inlay

.github/workflows/ci-tests.yml

@@ -9,7 +9,7 @@ on:
       - master
 
 jobs:
-  test:
+  unit-tests:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -20,9 +20,31 @@ jobs:
         with:
           bun-version: latest
 
+      - name: Cache Bun dependencies
+        uses: actions/cache@v4
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lockb') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-
+
       - name: Install dependencies
         run: bun install
 
+      - name: Run unit tests
+        run: bun run test:run
+
+  component-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
       - name: Cache Bun dependencies
         uses: actions/cache@v4
         with:
@@ -31,5 +53,30 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-bun-
 
-      - name: Run tests
-        run: bun run test:run
+      - name: Install dependencies
+        run: bun install
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/bun.lock') }}
+
+      - name: Install Playwright browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: bun run playwright:install
+
+      - name: Install Playwright system dependencies
+        run: bunx playwright install-deps
+
+      - name: Run component tests
+        run: bun run test:ct
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -25,3 +25,10 @@ yarn-error.log*
 *storybook.log
 
 /dist
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -21,7 +21,7 @@ Or use `npm`, `yarn`, or `pnpm`. Whatever you like.
 
 ## 🧩 Components
 
-### `TimeSlice`
+### `Chrono`
 
 A smart, headless time range picker that speaks human.
 
@@ -38,27 +38,27 @@ A smart, headless time range picker that speaks human.
 #### 🛠 Basic Usage
 
 ```tsx
-import { TimeSlice } from '@bizarre/ui'
+import { Chrono } from '@bizarre/ui'
 
 function MyComponent() {
   const handleConfirm = (range) => {
     console.log('Selected range:', range)
   }
 
   return (
-    <TimeSlice.Root onDateRangeConfirm={handleConfirm}>
-      <TimeSlice.Input />
-      <TimeSlice.Portal>
-        <TimeSlice.Shortcut duration={{ minutes: 15 }}>
+    <Chrono.Root onDateRangeConfirm={handleConfirm}>
+      <Chrono.Input />
+      <Chrono.Portal>
+        <Chrono.Shortcut duration={{ minutes: 15 }}>
           15 minutes
-        </TimeSlice.Shortcut>
-        <TimeSlice.Shortcut duration={{ hours: 1 }}>1 hour</TimeSlice.Shortcut>
-        <TimeSlice.Shortcut duration={{ days: 1 }}>1 day</TimeSlice.Shortcut>
-        <TimeSlice.Shortcut duration={{ months: 1 }}>
+        </Chrono.Shortcut>
+        <Chrono.Shortcut duration={{ hours: 1 }}>1 hour</Chrono.Shortcut>
+        <Chrono.Shortcut duration={{ days: 1 }}>1 day</Chrono.Shortcut>
+        <Chrono.Shortcut duration={{ months: 1 }}>
           1 month
-        </TimeSlice.Shortcut>
-      </TimeSlice.Portal>
-    </TimeSlice.Root>
+        </Chrono.Shortcut>
+      </Chrono.Portal>
+    </Chrono.Root>
   )
 }
 ```

eslint.config.mjs

@@ -20,7 +20,7 @@ export default [
     rules: {
       'prettier/prettier': 'error',
       'react/prop-types': 'off',
-      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-explicit-any': 'error',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       'unused-imports/no-unused-imports': 'error',
       'unused-imports/no-unused-vars': [

landing/components/chrono-example.tsx

@@ -0,0 +1,188 @@
+import React from 'react'
+import { Chrono } from '@lib'
+import type { DateRange } from '@lib/chrono'
+import { ChevronDown } from 'lucide-react'
+import {
+  differenceInYears,
+  differenceInMonths,
+  differenceInWeeks,
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  differenceInSeconds
+} from 'date-fns'
+
+const colors = {
+  bg: '#0A0A0A',
+  surface: '#111111',
+  border: '#222222',
+  text: '#FFFFFF',
+  textMuted: '#888888',
+  cyan: '#00F0FF'
+}
+
+export default function ChronoExample() {
+  const [dateRange, setDateRange] = React.useState<DateRange>({
+    startDate: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
+    endDate: new Date()
+  })
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const onDateRangeChange = (range: DateRange) => {
+    setDateRange(range)
+  }
+
+  const getDurationLabel = (start: Date, end: Date) => {
+    const diffSeconds = differenceInSeconds(end, start)
+    const diffMinutes = differenceInMinutes(end, start)
+    const diffHours = differenceInHours(end, start)
+    const diffDays = differenceInDays(end, start)
+    const diffWeeks = differenceInWeeks(end, start)
+    const diffMonths = differenceInMonths(end, start)
+    const diffYears = differenceInYears(end, start)
+
+    if (diffYears > 0) return `${diffYears}y`
+    if (diffMonths > 0) return `${diffMonths}mo`
+    if (diffWeeks > 0) return `${diffWeeks}w`
+    if (diffDays > 0) return `${diffDays}d`
+    if (diffHours > 0) return `${diffHours}h`
+    if (diffMinutes > 0) return `${diffMinutes}m`
+
+    return `${diffSeconds}s`
+  }
+
+  const activeDurationLabel = React.useMemo(() => {
+    if (!dateRange.startDate || !dateRange.endDate) return '-'
+    return getDurationLabel(dateRange.startDate, dateRange.endDate)
+  }, [dateRange])
+
+  return (
+    <Chrono.Root
+      onDateRangeChange={onDateRangeChange}
+      defaultDateRange={dateRange}
+      onOpenChange={setIsOpen}
+    >
+      <Chrono.Trigger asChild>
+        <div className="flex items-center space-x-2 w-full">
+          <div
+            className="flex-1 flex items-center rounded-lg px-4 py-3 transition-all duration-200 cursor-pointer group"
+            style={{
+              border: `1px solid ${colors.border}`,
+              backgroundColor: colors.surface
+            }}
+          >
+            <div className="flex items-center space-x-3 w-full">
+              <div
+                className="h-6 min-w-[48px] rounded text-xs text-center leading-6 font-mono font-medium"
+                style={{
+                  backgroundColor: `${colors.cyan}20`,
+                  color: colors.cyan
+                }}
+              >
+                {activeDurationLabel}
+              </div>
+              <Chrono.Input
+                className="bg-transparent text-sm w-full outline-none border-none cursor-pointer overflow-hidden truncate"
+                style={{ color: colors.textMuted }}
+              />
+              <div
+                className={`transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+                style={{ color: colors.textMuted }}
+              >
+                <ChevronDown className="h-4 w-4" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Chrono.Trigger>
+
+      <Chrono.Portal
+        className="relative rounded-lg mt-2 p-1.5 flex flex-col gap-0.5 text-sm shadow-2xl z-50 w-full transition-all duration-100 animate-in fade-in-0 zoom-in-95"
+        style={{
+          backgroundColor: colors.surface,
+          border: `1px solid ${colors.border}`
+        }}
+      >
+        <div
+          className="pb-2 px-2 mb-1"
+          style={{ borderBottom: `1px solid ${colors.border}` }}
+        >
+          <div
+            className="text-[10px] font-mono font-medium uppercase tracking-widest"
+            style={{ color: colors.textMuted }}
+          >
+            Quick select
+          </div>
+        </div>
+        <Chrono.Shortcut duration={{ minutes: 15 }} asChild>
+          <div
+            className="p-2.5 rounded-md cursor-pointer transition-colors duration-100 flex items-center justify-between"
+            style={{ color: colors.text }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = `${colors.cyan}10`)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = 'transparent')
+            }
+          >
+            <span className="text-sm">15 minutes</span>
+            <span className="text-xs font-mono" style={{ color: colors.cyan }}>
+              15m
+            </span>
+          </div>
+        </Chrono.Shortcut>
+        <Chrono.Shortcut duration={{ hours: 1 }} asChild>
+          <div
+            className="p-2.5 rounded-md cursor-pointer transition-colors duration-100 flex items-center justify-between"
+            style={{ color: colors.text }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = `${colors.cyan}10`)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = 'transparent')
+            }
+          >
+            <span className="text-sm">1 hour</span>
+            <span className="text-xs font-mono" style={{ color: colors.cyan }}>
+              1h
+            </span>
+          </div>
+        </Chrono.Shortcut>
+        <Chrono.Shortcut duration={{ days: 1 }} asChild>
+          <div
+            className="p-2.5 rounded-md cursor-pointer transition-colors duration-100 flex items-center justify-between"
+            style={{ color: colors.text }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = `${colors.cyan}10`)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = 'transparent')
+            }
+          >
+            <span className="text-sm">1 day</span>
+            <span className="text-xs font-mono" style={{ color: colors.cyan }}>
+              1d
+            </span>
+          </div>
+        </Chrono.Shortcut>
+        <Chrono.Shortcut duration={{ months: 1 }} asChild>
+          <div
+            className="p-2.5 rounded-md cursor-pointer transition-colors duration-100 flex items-center justify-between"
+            style={{ color: colors.text }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = `${colors.cyan}10`)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = 'transparent')
+            }
+          >
+            <span className="text-sm">1 month</span>
+            <span className="text-xs font-mono" style={{ color: colors.cyan }}>
+              1mo
+            </span>
+          </div>
+        </Chrono.Shortcut>
+      </Chrono.Portal>
+    </Chrono.Root>
+  )
+}