Skip to content

Commit 2d524fd

Browse files
bizarrebizarre
committed
refactor(timeslice): rename to chrono
1 parent d55f302 commit 2d524fd

25 files changed

Lines changed: 338 additions & 368 deletions

‎README.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Or use `npm`, `yarn`, or `pnpm`. Whatever you like.
2121

2222
## 🧩 Components
2323

24-
### `TimeSlice`
24+
### `Chrono`
2525

2626
A smart, headless time range picker that speaks human.
2727

@@ -38,27 +38,27 @@ A smart, headless time range picker that speaks human.
3838
#### 🛠 Basic Usage
3939

4040
```tsx
41-
import { TimeSlice } from '@bizarre/ui'
41+
import { Chrono } from '@bizarre/ui'
4242

4343
function MyComponent() {
4444
const handleConfirm = (range) => {
4545
console.log('Selected range:', range)
4646
}
4747

4848
return (
49-
<TimeSlice.Root onDateRangeConfirm={handleConfirm}>
50-
<TimeSlice.Input />
51-
<TimeSlice.Portal>
52-
<TimeSlice.Shortcut duration={{ minutes: 15 }}>
49+
<Chrono.Root onDateRangeConfirm={handleConfirm}>
50+
<Chrono.Input />
51+
<Chrono.Portal>
52+
<Chrono.Shortcut duration={{ minutes: 15 }}>
5353
15 minutes
54-
</TimeSlice.Shortcut>
55-
<TimeSlice.Shortcut duration={{ hours: 1 }}>1 hour</TimeSlice.Shortcut>
56-
<TimeSlice.Shortcut duration={{ days: 1 }}>1 day</TimeSlice.Shortcut>
57-
<TimeSlice.Shortcut duration={{ months: 1 }}>
54+
</Chrono.Shortcut>
55+
<Chrono.Shortcut duration={{ hours: 1 }}>1 hour</Chrono.Shortcut>
56+
<Chrono.Shortcut duration={{ days: 1 }}>1 day</Chrono.Shortcut>
57+
<Chrono.Shortcut duration={{ months: 1 }}>
5858
1 month
59-
</TimeSlice.Shortcut>
60-
</TimeSlice.Portal>
61-
</TimeSlice.Root>
59+
</Chrono.Shortcut>
60+
</Chrono.Portal>
61+
</Chrono.Root>
6262
)
6363
}
6464
```

landing/components/time-slice-example.tsx renamed to landing/components/chrono-example.tsx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
2-
import { TimeSlice } from '@lib'
3-
import type { DateRange } from '@lib/timeslice'
2+
import { Chrono } from '@lib'
3+
import type { DateRange } from '@lib/chrono'
44
import { ChevronDown } from 'lucide-react'
55
import {
66
differenceInYears,
@@ -21,7 +21,7 @@ const colors = {
2121
cyan: '#00F0FF'
2222
}
2323

24-
export default function TimeSliceExample() {
24+
export default function ChronoExample() {
2525
const [dateRange, setDateRange] = React.useState<DateRange>({
2626
startDate: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
2727
endDate: new Date()
@@ -57,12 +57,12 @@ export default function TimeSliceExample() {
5757
}, [dateRange])
5858

5959
return (
60-
<TimeSlice.Root
60+
<Chrono.Root
6161
onDateRangeChange={onDateRangeChange}
6262
defaultDateRange={dateRange}
6363
onOpenChange={setIsOpen}
6464
>
65-
<TimeSlice.Trigger asChild>
65+
<Chrono.Trigger asChild>
6666
<div className="flex items-center space-x-2 w-full">
6767
<div
6868
className="flex-1 flex items-center rounded-lg px-4 py-3 transition-all duration-200 cursor-pointer group"
@@ -81,7 +81,7 @@ export default function TimeSliceExample() {
8181
>
8282
{activeDurationLabel}
8383
</div>
84-
<TimeSlice.Input
84+
<Chrono.Input
8585
className="bg-transparent text-sm w-full outline-none border-none cursor-pointer overflow-hidden truncate"
8686
style={{ color: colors.textMuted }}
8787
/>
@@ -94,9 +94,9 @@ export default function TimeSliceExample() {
9494
</div>
9595
</div>
9696
</div>
97-
</TimeSlice.Trigger>
97+
</Chrono.Trigger>
9898

99-
<TimeSlice.Portal
99+
<Chrono.Portal
100100
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"
101101
style={{
102102
backgroundColor: colors.surface,
@@ -114,7 +114,7 @@ export default function TimeSliceExample() {
114114
Quick select
115115
</div>
116116
</div>
117-
<TimeSlice.Shortcut duration={{ minutes: 15 }} asChild>
117+
<Chrono.Shortcut duration={{ minutes: 15 }} asChild>
118118
<div
119119
className="p-2.5 rounded-md cursor-pointer transition-colors duration-100 flex items-center justify-between"
120120
style={{ color: colors.text }}
@@ -130,8 +130,8 @@ export default function TimeSliceExample() {
130130
15m
131131
</span>
132132
</div>
133-
</TimeSlice.Shortcut>
134-
<TimeSlice.Shortcut duration={{ hours: 1 }} asChild>
133+
</Chrono.Shortcut>
134+
<Chrono.Shortcut duration={{ hours: 1 }} asChild>
135135
<div
136136
className="p-2.5 rounded-md cursor-pointer transition-colors duration-100 flex items-center justify-between"
137137
style={{ color: colors.text }}
@@ -147,8 +147,8 @@ export default function TimeSliceExample() {
147147
1h
148148
</span>
149149
</div>
150-
</TimeSlice.Shortcut>
151-
<TimeSlice.Shortcut duration={{ days: 1 }} asChild>
150+
</Chrono.Shortcut>
151+
<Chrono.Shortcut duration={{ days: 1 }} asChild>
152152
<div
153153
className="p-2.5 rounded-md cursor-pointer transition-colors duration-100 flex items-center justify-between"
154154
style={{ color: colors.text }}
@@ -164,8 +164,8 @@ export default function TimeSliceExample() {
164164
1d
165165
</span>
166166
</div>
167-
</TimeSlice.Shortcut>
168-
<TimeSlice.Shortcut duration={{ months: 1 }} asChild>
167+
</Chrono.Shortcut>
168+
<Chrono.Shortcut duration={{ months: 1 }} asChild>
169169
<div
170170
className="p-2.5 rounded-md cursor-pointer transition-colors duration-100 flex items-center justify-between"
171171
style={{ color: colors.text }}
@@ -181,8 +181,8 @@ export default function TimeSliceExample() {
181181
1mo
182182
</span>
183183
</div>
184-
</TimeSlice.Shortcut>
185-
</TimeSlice.Portal>
186-
</TimeSlice.Root>
184+
</Chrono.Shortcut>
185+
</Chrono.Portal>
186+
</Chrono.Root>
187187
)
188188
}

‎landing/components/code-examples.ts‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
// Basic usage example for TimeSlice
2-
export const timeSliceBasicExample = `import { TimeSlice } from "@bizarre/ui"
1+
// Basic usage example for Chrono
2+
export const chronoBasicExample = `import { Chrono } from "@bizarre/ui"
33
44
export function TimeRangePicker() {
55
const handleDateRangeChange = (range) => {
66
console.log('Date range changed:', range)
77
}
88
99
return (
10-
<TimeSlice.Root onDateRangeChange={handleDateRangeChange}>
11-
<TimeSlice.Input />
12-
<TimeSlice.Portal>
13-
<TimeSlice.Shortcut duration={{ minutes: 15 }}>
10+
<Chrono.Root onDateRangeChange={handleDateRangeChange}>
11+
<Chrono.Input />
12+
<Chrono.Portal>
13+
<Chrono.Shortcut duration={{ minutes: 15 }}>
1414
15 minutes
15-
</TimeSlice.Shortcut>
16-
<TimeSlice.Shortcut duration={{ hours: 1 }}>
15+
</Chrono.Shortcut>
16+
<Chrono.Shortcut duration={{ hours: 1 }}>
1717
1 hour
18-
</TimeSlice.Shortcut>
19-
<TimeSlice.Shortcut duration={{ days: 1 }}>
18+
</Chrono.Shortcut>
19+
<Chrono.Shortcut duration={{ days: 1 }}>
2020
1 day
21-
</TimeSlice.Shortcut>
22-
<TimeSlice.Shortcut duration={{ months: 1 }}>
21+
</Chrono.Shortcut>
22+
<Chrono.Shortcut duration={{ months: 1 }}>
2323
1 month
24-
</TimeSlice.Shortcut>
25-
</TimeSlice.Portal>
26-
</TimeSlice.Root>
24+
</Chrono.Shortcut>
25+
</Chrono.Portal>
26+
</Chrono.Root>
2727
)
2828
}`
2929

30-
// Implementation example for TimeSlice - similar to the actual implementation but simplified
31-
export const timeSliceImplementationExample = `import React from 'react'
32-
import { TimeSlice } from '@bizarre/ui'
30+
// Implementation example for Chrono - similar to the actual implementation but simplified
31+
export const chronoImplementationExample = `import React from 'react'
32+
import { Chrono } from '@bizarre/ui'
3333
import { ChevronDown } from 'lucide-react'
3434
3535
export function CustomTimeRangePicker() {
@@ -67,56 +67,56 @@ export function CustomTimeRangePicker() {
6767
}, [dateRange])
6868
6969
return (
70-
<TimeSlice.Root
70+
<Chrono.Root
7171
onDateRangeChange={setDateRange}
7272
defaultDateRange={dateRange}
7373
onOpenChange={setIsOpen}
7474
>
75-
<TimeSlice.Trigger asChild>
75+
<Chrono.Trigger asChild>
7676
<div className="flex items-center w-full">
7777
<div className="flex-1 flex items-center border border-zinc-800 rounded-md px-3 py-2 cursor-pointer">
7878
<div className="flex items-center w-full">
7979
<div className="h-[22px] min-w-[44px] bg-zinc-800 rounded-md text-xs text-center mr-2">
8080
{activeDurationLabel}
8181
</div>
82-
<TimeSlice.Input className="bg-transparent text-sm w-full outline-none border-none" />
82+
<Chrono.Input className="bg-transparent text-sm w-full outline-none border-none" />
8383
<div className={\`transition-transform \${isOpen ? "rotate-180" : ""}\`}>
8484
<ChevronDown className="h-4 w-4" />
8585
</div>
8686
</div>
8787
</div>
8888
</div>
89-
</TimeSlice.Trigger>
89+
</Chrono.Trigger>
9090
91-
<TimeSlice.Portal className="bg-zinc-900 border border-zinc-800 rounded-md mt-1.5 p-1.5 flex flex-col gap-1">
91+
<Chrono.Portal className="bg-zinc-900 border border-zinc-800 rounded-md mt-1.5 p-1.5 flex flex-col gap-1">
9292
<div className="pb-1.5 px-1.5 mb-1 border-b border-zinc-800">
9393
<div className="text-xs font-medium">Quick select</div>
9494
</div>
95-
<TimeSlice.Shortcut duration={{ minutes: 15 }} asChild>
95+
<Chrono.Shortcut duration={{ minutes: 15 }} asChild>
9696
<div className="hover:bg-zinc-800 p-2 rounded-sm flex items-center justify-between">
9797
<span>15 minutes</span>
9898
<span className="text-xs text-zinc-500">15m</span>
9999
</div>
100-
</TimeSlice.Shortcut>
101-
<TimeSlice.Shortcut duration={{ hours: 1 }} asChild>
100+
</Chrono.Shortcut>
101+
<Chrono.Shortcut duration={{ hours: 1 }} asChild>
102102
<div className="hover:bg-zinc-800 p-2 rounded-sm flex items-center justify-between">
103103
<span>1 hour</span>
104104
<span className="text-xs text-zinc-500">1h</span>
105105
</div>
106-
</TimeSlice.Shortcut>
107-
<TimeSlice.Shortcut duration={{ days: 1 }} asChild>
106+
</Chrono.Shortcut>
107+
<Chrono.Shortcut duration={{ days: 1 }} asChild>
108108
<div className="hover:bg-zinc-800 p-2 rounded-sm flex items-center justify-between">
109109
<span>1 day</span>
110110
<span className="text-xs text-zinc-500">1d</span>
111111
</div>
112-
</TimeSlice.Shortcut>
113-
<TimeSlice.Shortcut duration={{ months: 1 }} asChild>
112+
</Chrono.Shortcut>
113+
<Chrono.Shortcut duration={{ months: 1 }} asChild>
114114
<div className="hover:bg-zinc-800 p-2 rounded-sm flex items-center justify-between">
115115
<span>1 month</span>
116116
<span className="text-xs text-zinc-500">1mo</span>
117117
</div>
118-
</TimeSlice.Shortcut>
119-
</TimeSlice.Portal>
120-
</TimeSlice.Root>
118+
</Chrono.Shortcut>
119+
</Chrono.Portal>
120+
</Chrono.Root>
121121
)
122122
}`

‎landing/pages/index/+Page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1139,7 +1139,7 @@ function InlayDemo() {
11391139
function ChronoDemo() {
11401140
return (
11411141
<ClientOnly
1142-
load={() => import('../../components/time-slice-example')}
1142+
load={() => import('../../components/chrono-example')}
11431143
fallback={
11441144
<div
11451145
className="rounded-lg px-4 py-3"

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
"types": "./dist/index.d.ts",
1818
"require": "./dist/index/index.cjs.js"
1919
},
20-
"./timeslice": {
21-
"import": "./dist/timeslice/index.es.js",
22-
"types": "./dist/timeslice.d.ts",
23-
"require": "./dist/timeslice/index.cjs.js"
20+
"./chrono": {
21+
"import": "./dist/chrono/index.es.js",
22+
"types": "./dist/chrono.d.ts",
23+
"require": "./dist/chrono/index.cjs.js"
2424
},
2525
"./inlay": {
2626
"import": "./dist/inlay/index.es.js",
@@ -30,8 +30,8 @@
3030
},
3131
"typesVersions": {
3232
"*": {
33-
"timeslice": [
34-
"./dist/timeslice.d.ts"
33+
"chrono": [
34+
"./dist/chrono.d.ts"
3535
]
3636
}
3737
},

0 commit comments

Comments
 (0)