@zentauri-ui/zentauri-components 1.7.5 → 1.7.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -6
- package/cli/registry.json +3 -0
- package/dist/chunk-DEZRB6DS.mjs +83 -0
- package/dist/chunk-DEZRB6DS.mjs.map +1 -0
- package/dist/chunk-GRJFGIZC.mjs +417 -0
- package/dist/chunk-GRJFGIZC.mjs.map +1 -0
- package/dist/chunk-QHEHBC6M.js +421 -0
- package/dist/chunk-QHEHBC6M.js.map +1 -0
- package/dist/chunk-V5JTDRV5.mjs +278 -0
- package/dist/chunk-V5JTDRV5.mjs.map +1 -0
- package/dist/chunk-Z4KHAD6Y.js +295 -0
- package/dist/chunk-Z4KHAD6Y.js.map +1 -0
- package/dist/chunk-ZX2IBIZT.js +92 -0
- package/dist/chunk-ZX2IBIZT.js.map +1 -0
- package/dist/design-system/context-menu.d.ts +41 -0
- package/dist/design-system/context-menu.d.ts.map +1 -0
- package/dist/design-system/index.d.ts +3 -0
- package/dist/design-system/index.d.ts.map +1 -1
- package/dist/design-system/timeline.d.ts +56 -0
- package/dist/design-system/timeline.d.ts.map +1 -0
- package/dist/design-system/tree-view.d.ts +66 -0
- package/dist/design-system/tree-view.d.ts.map +1 -0
- package/dist/ui/context-menu/context-menu.d.ts +11 -0
- package/dist/ui/context-menu/context-menu.d.ts.map +1 -0
- package/dist/ui/context-menu/index.d.ts +4 -0
- package/dist/ui/context-menu/index.d.ts.map +1 -0
- package/dist/ui/context-menu/types.d.ts +81 -0
- package/dist/ui/context-menu/types.d.ts.map +1 -0
- package/dist/ui/context-menu/variants.d.ts +7 -0
- package/dist/ui/context-menu/variants.d.ts.map +1 -0
- package/dist/ui/context-menu.js +500 -0
- package/dist/ui/context-menu.js.map +1 -0
- package/dist/ui/context-menu.mjs +488 -0
- package/dist/ui/context-menu.mjs.map +1 -0
- package/dist/ui/dropdown.js +9 -89
- package/dist/ui/dropdown.js.map +1 -1
- package/dist/ui/dropdown.mjs +1 -81
- package/dist/ui/dropdown.mjs.map +1 -1
- package/dist/ui/scroll-area/scroll-area.d.ts.map +1 -1
- package/dist/ui/scroll-area.js.map +1 -1
- package/dist/ui/scroll-area.mjs.map +1 -1
- package/dist/ui/timeline/animated/animations.d.ts +8 -0
- package/dist/ui/timeline/animated/animations.d.ts.map +1 -0
- package/dist/ui/timeline/animated/index.d.ts +6 -0
- package/dist/ui/timeline/animated/index.d.ts.map +1 -0
- package/dist/ui/timeline/animated/timeline-item-animated.d.ts +8 -0
- package/dist/ui/timeline/animated/timeline-item-animated.d.ts.map +1 -0
- package/dist/ui/timeline/animated/types.d.ts +12 -0
- package/dist/ui/timeline/animated/types.d.ts.map +1 -0
- package/dist/ui/timeline/animated.js +94 -0
- package/dist/ui/timeline/animated.js.map +1 -0
- package/dist/ui/timeline/animated.mjs +71 -0
- package/dist/ui/timeline/animated.mjs.map +1 -0
- package/dist/ui/timeline/index.d.ts +4 -0
- package/dist/ui/timeline/index.d.ts.map +1 -0
- package/dist/ui/timeline/timeline-base.d.ts +37 -0
- package/dist/ui/timeline/timeline-base.d.ts.map +1 -0
- package/dist/ui/timeline/timeline.d.ts +8 -0
- package/dist/ui/timeline/timeline.d.ts.map +1 -0
- package/dist/ui/timeline/types.d.ts +38 -0
- package/dist/ui/timeline/types.d.ts.map +1 -0
- package/dist/ui/timeline/variants.d.ts +19 -0
- package/dist/ui/timeline/variants.d.ts.map +1 -0
- package/dist/ui/timeline.js +63 -0
- package/dist/ui/timeline.js.map +1 -0
- package/dist/ui/timeline.mjs +14 -0
- package/dist/ui/timeline.mjs.map +1 -0
- package/dist/ui/tree-view/animated/animations.d.ts +6 -0
- package/dist/ui/tree-view/animated/animations.d.ts.map +1 -0
- package/dist/ui/tree-view/animated/index.d.ts +5 -0
- package/dist/ui/tree-view/animated/index.d.ts.map +1 -0
- package/dist/ui/tree-view/animated/tree-view-animated.d.ts +6 -0
- package/dist/ui/tree-view/animated/tree-view-animated.d.ts.map +1 -0
- package/dist/ui/tree-view/animated/types.d.ts +6 -0
- package/dist/ui/tree-view/animated/types.d.ts.map +1 -0
- package/dist/ui/tree-view/animated.js +53 -0
- package/dist/ui/tree-view/animated.js.map +1 -0
- package/dist/ui/tree-view/animated.mjs +50 -0
- package/dist/ui/tree-view/animated.mjs.map +1 -0
- package/dist/ui/tree-view/index.d.ts +5 -0
- package/dist/ui/tree-view/index.d.ts.map +1 -0
- package/dist/ui/tree-view/tree-view-base.d.ts +15 -0
- package/dist/ui/tree-view/tree-view-base.d.ts.map +1 -0
- package/dist/ui/tree-view/tree-view.d.ts +6 -0
- package/dist/ui/tree-view/tree-view.d.ts.map +1 -0
- package/dist/ui/tree-view/types.d.ts +61 -0
- package/dist/ui/tree-view/types.d.ts.map +1 -0
- package/dist/ui/tree-view/variants.d.ts +9 -0
- package/dist/ui/tree-view/variants.d.ts.map +1 -0
- package/dist/ui/tree-view.js +27 -0
- package/dist/ui/tree-view.js.map +1 -0
- package/dist/ui/tree-view.mjs +14 -0
- package/dist/ui/tree-view.mjs.map +1 -0
- package/package.json +1 -1
- package/src/design-system/context-menu.ts +44 -0
- package/src/design-system/index.ts +3 -0
- package/src/design-system/timeline.ts +87 -0
- package/src/design-system/tree-view.ts +113 -0
- package/src/ui/context-menu/context-menu.test.tsx +176 -0
- package/src/ui/context-menu/context-menu.tsx +536 -0
- package/src/ui/context-menu/index.ts +29 -0
- package/src/ui/context-menu/types.ts +110 -0
- package/src/ui/context-menu/variants.ts +26 -0
- package/src/ui/scroll-area/scroll-area.tsx +0 -2
- package/src/ui/timeline/animated/animations.ts +16 -0
- package/src/ui/timeline/animated/index.ts +22 -0
- package/src/ui/timeline/animated/timeline-item-animated.tsx +76 -0
- package/src/ui/timeline/animated/types.ts +21 -0
- package/src/ui/timeline/index.ts +30 -0
- package/src/ui/timeline/timeline-base.tsx +232 -0
- package/src/ui/timeline/timeline.test.tsx +262 -0
- package/src/ui/timeline/timeline.tsx +24 -0
- package/src/ui/timeline/types.ts +61 -0
- package/src/ui/timeline/variants.ts +60 -0
- package/src/ui/tree-view/animated/animations.ts +13 -0
- package/src/ui/tree-view/animated/index.ts +6 -0
- package/src/ui/tree-view/animated/tree-view-animated.tsx +52 -0
- package/src/ui/tree-view/animated/types.ts +6 -0
- package/src/ui/tree-view/index.ts +13 -0
- package/src/ui/tree-view/tree-view-base.tsx +496 -0
- package/src/ui/tree-view/tree-view.test.tsx +136 -0
- package/src/ui/tree-view/tree-view.tsx +9 -0
- package/src/ui/tree-view/types.ts +68 -0
- package/src/ui/tree-view/variants.ts +32 -0
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
import { cn } from './chunk-4D54YOL6.mjs';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { createContext, useContext, useMemo, Children, isValidElement } from 'react';
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
// src/design-system/timeline.ts
|
|
7
|
+
var zuiTimelineBase = "flex w-full flex-col";
|
|
8
|
+
var zuiTimelineItemBase = "relative flex gap-4";
|
|
9
|
+
var zuiTimelineIndicatorBase = "relative z-[1] grid shrink-0 place-items-center rounded-full border font-semibold transition-colors";
|
|
10
|
+
var zuiTimelineIndicatorAppearances = {
|
|
11
|
+
default: "border-[color:var(--zui-timeline-indicator-default-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-default-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-default-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-default-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
|
|
12
|
+
sky: "border-[color:var(--zui-timeline-indicator-sky-border,oklch(68.5%_0.169_237.323_/_0.6))] bg-[var(--zui-timeline-indicator-sky-bg,oklch(68.5%_0.169_237.323_/_0.2))] text-[color:var(--zui-timeline-indicator-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-timeline-indicator-sky-fg-dark,oklch(95.1%_0.026_236.824))] ring-2 ring-[var(--zui-timeline-indicator-sky-ring,oklch(74.6%_0.16_232.661_/_0.3))]",
|
|
13
|
+
rose: "border-[color:var(--zui-timeline-indicator-rose-border,oklch(64.5%_0.246_16.439_/_0.6))] bg-[var(--zui-timeline-indicator-rose-bg,oklch(64.5%_0.246_16.439_/_0.2))] text-[color:var(--zui-timeline-indicator-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-timeline-indicator-rose-fg-dark,oklch(94.1%_0.03_12.58))] ring-2 ring-[var(--zui-timeline-indicator-rose-ring,oklch(71.2%_0.194_13.428_/_0.3))]",
|
|
14
|
+
purple: "border-[color:var(--zui-timeline-indicator-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-timeline-indicator-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-timeline-indicator-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-timeline-indicator-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-timeline-indicator-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
|
|
15
|
+
pink: "border-[color:var(--zui-timeline-indicator-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-timeline-indicator-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-timeline-indicator-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-timeline-indicator-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-timeline-indicator-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
|
|
16
|
+
orange: "border-[color:var(--zui-timeline-indicator-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-timeline-indicator-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-timeline-indicator-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-timeline-indicator-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-timeline-indicator-orange-ring,oklch(75%_0.183_55.934_/_0.3))]",
|
|
17
|
+
yellow: "border-[color:var(--zui-timeline-indicator-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-timeline-indicator-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-timeline-indicator-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-timeline-indicator-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-timeline-indicator-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
|
|
18
|
+
teal: "border-[color:var(--zui-timeline-indicator-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-timeline-indicator-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-timeline-indicator-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-timeline-indicator-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-timeline-indicator-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
|
|
19
|
+
indigo: "border-[color:var(--zui-timeline-indicator-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-timeline-indicator-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-timeline-indicator-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-timeline-indicator-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-timeline-indicator-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
|
|
20
|
+
emerald: "border-[color:var(--zui-timeline-indicator-emerald-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-timeline-indicator-emerald-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-timeline-indicator-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-timeline-indicator-emerald-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-timeline-indicator-emerald-ring,oklch(76.5%_0.177_163.223_/_0.3))]",
|
|
21
|
+
gray: "border-[color:var(--zui-timeline-indicator-gray-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-gray-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-gray-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-gray-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-gray-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
|
|
22
|
+
violet: "border-[color:var(--zui-timeline-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-timeline-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-timeline-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-timeline-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-timeline-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]",
|
|
23
|
+
"gradient-blue": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-timeline-indicator-gradient-blue-to,oklch(54.6%_0.245_262.881))] text-[color:var(--zui-timeline-indicator-gradient-blue-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))]",
|
|
24
|
+
"gradient-green": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-timeline-indicator-gradient-green-to,oklch(62.7%_0.194_149.214))] text-[color:var(--zui-timeline-indicator-gradient-green-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))]",
|
|
25
|
+
"gradient-red": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-timeline-indicator-gradient-red-to,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-timeline-indicator-gradient-red-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))]",
|
|
26
|
+
"gradient-yellow": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-timeline-indicator-gradient-yellow-to,oklch(79.5%_0.184_86.047))] text-[color:var(--zui-timeline-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] ring-2 ring-[var(--zui-timeline-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
|
|
27
|
+
"gradient-purple": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-timeline-indicator-gradient-purple-to,oklch(62.7%_0.265_303.9))] text-[color:var(--zui-timeline-indicator-gradient-purple-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
|
|
28
|
+
"gradient-teal": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-timeline-indicator-gradient-teal-to,oklch(70.4%_0.14_182.503))] text-[color:var(--zui-timeline-indicator-gradient-teal-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
|
|
29
|
+
"gradient-indigo": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-timeline-indicator-gradient-indigo-to,oklch(58.5%_0.233_277.117))] text-[color:var(--zui-timeline-indicator-gradient-indigo-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
|
|
30
|
+
"gradient-pink": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-timeline-indicator-gradient-pink-to,oklch(65.6%_0.241_354.308))] text-[color:var(--zui-timeline-indicator-gradient-pink-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
|
|
31
|
+
"gradient-orange": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-timeline-indicator-gradient-orange-to,oklch(70.5%_0.213_47.604))] text-[color:var(--zui-timeline-indicator-gradient-orange-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))]"
|
|
32
|
+
};
|
|
33
|
+
var zuiTimelineIndicatorSizes = {
|
|
34
|
+
sm: "size-5 text-[0.625rem]",
|
|
35
|
+
md: "size-6 text-xs",
|
|
36
|
+
lg: "size-7 text-sm"
|
|
37
|
+
};
|
|
38
|
+
var zuiTimelineConnectorBase = "pointer-events-none absolute bottom-0 w-px -translate-x-1/2 rounded-full bg-[var(--zui-timeline-connector,#0000001f)] dark:bg-[var(--zui-timeline-connector-dark,#ffffff1f)]";
|
|
39
|
+
var zuiTimelineConnectorSizes = {
|
|
40
|
+
sm: "left-2.5 top-6",
|
|
41
|
+
md: "left-3 top-7",
|
|
42
|
+
lg: "left-3.5 top-8"
|
|
43
|
+
};
|
|
44
|
+
var zuiTimelineContentBase = "min-w-0 flex-1";
|
|
45
|
+
var zuiTimelineContentSizes = {
|
|
46
|
+
sm: "pb-5",
|
|
47
|
+
md: "pb-6",
|
|
48
|
+
lg: "pb-8"
|
|
49
|
+
};
|
|
50
|
+
var zuiTimelineTitleBase = "font-semibold text-[color:var(--zui-timeline-title-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-timeline-title-fg-dark,#ffffff)]";
|
|
51
|
+
var zuiTimelineTitleSizes = {
|
|
52
|
+
sm: "text-sm",
|
|
53
|
+
md: "text-sm",
|
|
54
|
+
lg: "text-base"
|
|
55
|
+
};
|
|
56
|
+
var zuiTimelineDescriptionBase = "text-[color:var(--zui-timeline-description-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-timeline-description-fg-dark,oklch(70.4%_0.04_256.788))]";
|
|
57
|
+
var zuiTimelineDescriptionSizes = {
|
|
58
|
+
sm: "text-xs",
|
|
59
|
+
md: "text-xs",
|
|
60
|
+
lg: "text-sm"
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
// src/ui/timeline/variants.ts
|
|
64
|
+
var timelineVariants = cva(zuiTimelineBase);
|
|
65
|
+
var timelineItemVariants = cva(zuiTimelineItemBase);
|
|
66
|
+
var timelineConnectorVariants = cva(zuiTimelineConnectorBase, {
|
|
67
|
+
variants: {
|
|
68
|
+
size: zuiTimelineConnectorSizes
|
|
69
|
+
},
|
|
70
|
+
defaultVariants: { size: "md" }
|
|
71
|
+
});
|
|
72
|
+
var timelineIndicatorVariants = cva(zuiTimelineIndicatorBase, {
|
|
73
|
+
variants: {
|
|
74
|
+
appearance: zuiTimelineIndicatorAppearances,
|
|
75
|
+
size: zuiTimelineIndicatorSizes
|
|
76
|
+
},
|
|
77
|
+
defaultVariants: {
|
|
78
|
+
appearance: "default",
|
|
79
|
+
size: "md"
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
var timelineContentVariants = cva(zuiTimelineContentBase, {
|
|
83
|
+
variants: {
|
|
84
|
+
size: zuiTimelineContentSizes
|
|
85
|
+
},
|
|
86
|
+
defaultVariants: { size: "md" }
|
|
87
|
+
});
|
|
88
|
+
var timelineTitleVariants = cva(zuiTimelineTitleBase, {
|
|
89
|
+
variants: {
|
|
90
|
+
size: zuiTimelineTitleSizes
|
|
91
|
+
},
|
|
92
|
+
defaultVariants: { size: "md" }
|
|
93
|
+
});
|
|
94
|
+
var timelineDescriptionVariants = cva(zuiTimelineDescriptionBase, {
|
|
95
|
+
variants: {
|
|
96
|
+
size: zuiTimelineDescriptionSizes
|
|
97
|
+
},
|
|
98
|
+
defaultVariants: { size: "md" }
|
|
99
|
+
});
|
|
100
|
+
var TimelineContext = createContext(null);
|
|
101
|
+
var TimelineIndexContext = createContext(null);
|
|
102
|
+
var TimelineItemContext = createContext(null);
|
|
103
|
+
function useTimelineContext(component) {
|
|
104
|
+
const ctx = useContext(TimelineContext);
|
|
105
|
+
if (!ctx) {
|
|
106
|
+
throw new Error(`${component} must be used within <Timeline>`);
|
|
107
|
+
}
|
|
108
|
+
return ctx;
|
|
109
|
+
}
|
|
110
|
+
function useTimelineIndex(component) {
|
|
111
|
+
const index = useContext(TimelineIndexContext);
|
|
112
|
+
if (index === null) {
|
|
113
|
+
throw new Error(`${component} must be used within <Timeline>`);
|
|
114
|
+
}
|
|
115
|
+
return index;
|
|
116
|
+
}
|
|
117
|
+
function useTimelineSize() {
|
|
118
|
+
return useContext(TimelineContext)?.size ?? "md";
|
|
119
|
+
}
|
|
120
|
+
function useTimelineIsLast() {
|
|
121
|
+
return useContext(TimelineItemContext)?.isLast ?? false;
|
|
122
|
+
}
|
|
123
|
+
function Timeline({
|
|
124
|
+
appearance = "default",
|
|
125
|
+
size = "md",
|
|
126
|
+
className,
|
|
127
|
+
children,
|
|
128
|
+
ref,
|
|
129
|
+
...rest
|
|
130
|
+
}) {
|
|
131
|
+
const items = useMemo(
|
|
132
|
+
() => Children.toArray(children).filter(isValidElement),
|
|
133
|
+
[children]
|
|
134
|
+
);
|
|
135
|
+
const ctx = useMemo(
|
|
136
|
+
() => ({
|
|
137
|
+
appearance: appearance ?? "default",
|
|
138
|
+
size: size ?? "md",
|
|
139
|
+
total: items.length
|
|
140
|
+
}),
|
|
141
|
+
[appearance, size, items.length]
|
|
142
|
+
);
|
|
143
|
+
return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
|
|
144
|
+
"ol",
|
|
145
|
+
{
|
|
146
|
+
ref,
|
|
147
|
+
"data-slot": "timeline",
|
|
148
|
+
className: cn(timelineVariants(), "m-0 list-none p-0", className),
|
|
149
|
+
...rest,
|
|
150
|
+
children: items.map((child, index) => /* @__PURE__ */ jsx(TimelineIndexContext.Provider, { value: index, children: child }, child.key))
|
|
151
|
+
}
|
|
152
|
+
) });
|
|
153
|
+
}
|
|
154
|
+
Timeline.displayName = "Timeline";
|
|
155
|
+
function TimelineItem({
|
|
156
|
+
className,
|
|
157
|
+
children,
|
|
158
|
+
ref,
|
|
159
|
+
...rest
|
|
160
|
+
}) {
|
|
161
|
+
const { size, total } = useTimelineContext("TimelineItem");
|
|
162
|
+
const index = useTimelineIndex("TimelineItem");
|
|
163
|
+
const isLast = index === total - 1;
|
|
164
|
+
const itemCtx = useMemo(
|
|
165
|
+
() => ({ index, isLast }),
|
|
166
|
+
[index, isLast]
|
|
167
|
+
);
|
|
168
|
+
return /* @__PURE__ */ jsx(TimelineItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsxs(
|
|
169
|
+
"li",
|
|
170
|
+
{
|
|
171
|
+
ref,
|
|
172
|
+
"data-slot": "timeline-item",
|
|
173
|
+
"data-last": isLast ? "" : void 0,
|
|
174
|
+
className: cn(timelineItemVariants(), className),
|
|
175
|
+
...rest,
|
|
176
|
+
children: [
|
|
177
|
+
!isLast ? /* @__PURE__ */ jsx(
|
|
178
|
+
"span",
|
|
179
|
+
{
|
|
180
|
+
"aria-hidden": "true",
|
|
181
|
+
"data-slot": "timeline-connector",
|
|
182
|
+
className: timelineConnectorVariants({ size })
|
|
183
|
+
}
|
|
184
|
+
) : null,
|
|
185
|
+
children
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
) });
|
|
189
|
+
}
|
|
190
|
+
TimelineItem.displayName = "TimelineItem";
|
|
191
|
+
function TimelineIndicator({
|
|
192
|
+
className,
|
|
193
|
+
appearance,
|
|
194
|
+
children,
|
|
195
|
+
ref,
|
|
196
|
+
...rest
|
|
197
|
+
}) {
|
|
198
|
+
const { appearance: rootAppearance, size } = useTimelineContext("TimelineIndicator");
|
|
199
|
+
return /* @__PURE__ */ jsx(
|
|
200
|
+
"div",
|
|
201
|
+
{
|
|
202
|
+
ref,
|
|
203
|
+
"data-slot": "timeline-indicator",
|
|
204
|
+
className: cn(
|
|
205
|
+
timelineIndicatorVariants({
|
|
206
|
+
appearance: appearance ?? rootAppearance,
|
|
207
|
+
size
|
|
208
|
+
}),
|
|
209
|
+
className
|
|
210
|
+
),
|
|
211
|
+
...rest,
|
|
212
|
+
children
|
|
213
|
+
}
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
TimelineIndicator.displayName = "TimelineIndicator";
|
|
217
|
+
function TimelineContent({
|
|
218
|
+
className,
|
|
219
|
+
children,
|
|
220
|
+
ref,
|
|
221
|
+
...rest
|
|
222
|
+
}) {
|
|
223
|
+
const size = useTimelineSize();
|
|
224
|
+
const isLast = useTimelineIsLast();
|
|
225
|
+
return /* @__PURE__ */ jsx(
|
|
226
|
+
"div",
|
|
227
|
+
{
|
|
228
|
+
ref,
|
|
229
|
+
"data-slot": "timeline-content",
|
|
230
|
+
className: cn(
|
|
231
|
+
timelineContentVariants({ size }),
|
|
232
|
+
isLast && "pb-0",
|
|
233
|
+
className
|
|
234
|
+
),
|
|
235
|
+
...rest,
|
|
236
|
+
children
|
|
237
|
+
}
|
|
238
|
+
);
|
|
239
|
+
}
|
|
240
|
+
TimelineContent.displayName = "TimelineContent";
|
|
241
|
+
function TimelineTitle({
|
|
242
|
+
className,
|
|
243
|
+
ref,
|
|
244
|
+
...rest
|
|
245
|
+
}) {
|
|
246
|
+
const size = useTimelineSize();
|
|
247
|
+
return /* @__PURE__ */ jsx(
|
|
248
|
+
"div",
|
|
249
|
+
{
|
|
250
|
+
ref,
|
|
251
|
+
"data-slot": "timeline-title",
|
|
252
|
+
className: cn(timelineTitleVariants({ size }), className),
|
|
253
|
+
...rest
|
|
254
|
+
}
|
|
255
|
+
);
|
|
256
|
+
}
|
|
257
|
+
TimelineTitle.displayName = "TimelineTitle";
|
|
258
|
+
function TimelineDescription({
|
|
259
|
+
className,
|
|
260
|
+
ref,
|
|
261
|
+
...rest
|
|
262
|
+
}) {
|
|
263
|
+
const size = useTimelineSize();
|
|
264
|
+
return /* @__PURE__ */ jsx(
|
|
265
|
+
"p",
|
|
266
|
+
{
|
|
267
|
+
ref,
|
|
268
|
+
"data-slot": "timeline-description",
|
|
269
|
+
className: cn(timelineDescriptionVariants({ size }), className),
|
|
270
|
+
...rest
|
|
271
|
+
}
|
|
272
|
+
);
|
|
273
|
+
}
|
|
274
|
+
TimelineDescription.displayName = "TimelineDescription";
|
|
275
|
+
|
|
276
|
+
export { Timeline, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineItemContext, TimelineTitle, timelineConnectorVariants, timelineContentVariants, timelineDescriptionVariants, timelineIndicatorVariants, timelineItemVariants, timelineTitleVariants, timelineVariants, useTimelineContext, useTimelineIndex };
|
|
277
|
+
//# sourceMappingURL=chunk-V5JTDRV5.mjs.map
|
|
278
|
+
//# sourceMappingURL=chunk-V5JTDRV5.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/design-system/timeline.ts","../src/ui/timeline/variants.ts","../src/ui/timeline/timeline-base.tsx"],"names":[],"mappings":"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","file":"chunk-V5JTDRV5.mjs","sourcesContent":["export const zuiTimelineBase = \"flex w-full flex-col\";\n\nexport const zuiTimelineItemBase = \"relative flex gap-4\";\n\nexport const zuiTimelineIndicatorBase =\n \"relative z-[1] grid shrink-0 place-items-center rounded-full border font-semibold transition-colors\";\n\nexport const zuiTimelineIndicatorAppearances = {\n default:\n \"border-[color:var(--zui-timeline-indicator-default-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-default-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-default-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-default-ring,oklch(70.7%_0.022_261.325_/_0.3))]\",\n sky: \"border-[color:var(--zui-timeline-indicator-sky-border,oklch(68.5%_0.169_237.323_/_0.6))] bg-[var(--zui-timeline-indicator-sky-bg,oklch(68.5%_0.169_237.323_/_0.2))] text-[color:var(--zui-timeline-indicator-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-timeline-indicator-sky-fg-dark,oklch(95.1%_0.026_236.824))] ring-2 ring-[var(--zui-timeline-indicator-sky-ring,oklch(74.6%_0.16_232.661_/_0.3))]\",\n rose: \"border-[color:var(--zui-timeline-indicator-rose-border,oklch(64.5%_0.246_16.439_/_0.6))] bg-[var(--zui-timeline-indicator-rose-bg,oklch(64.5%_0.246_16.439_/_0.2))] text-[color:var(--zui-timeline-indicator-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-timeline-indicator-rose-fg-dark,oklch(94.1%_0.03_12.58))] ring-2 ring-[var(--zui-timeline-indicator-rose-ring,oklch(71.2%_0.194_13.428_/_0.3))]\",\n purple:\n \"border-[color:var(--zui-timeline-indicator-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-timeline-indicator-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-timeline-indicator-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-timeline-indicator-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-timeline-indicator-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]\",\n pink: \"border-[color:var(--zui-timeline-indicator-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-timeline-indicator-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-timeline-indicator-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-timeline-indicator-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-timeline-indicator-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]\",\n orange:\n \"border-[color:var(--zui-timeline-indicator-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-timeline-indicator-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-timeline-indicator-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-timeline-indicator-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-timeline-indicator-orange-ring,oklch(75%_0.183_55.934_/_0.3))]\",\n yellow:\n \"border-[color:var(--zui-timeline-indicator-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-timeline-indicator-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-timeline-indicator-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-timeline-indicator-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-timeline-indicator-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]\",\n teal: \"border-[color:var(--zui-timeline-indicator-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-timeline-indicator-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-timeline-indicator-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-timeline-indicator-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-timeline-indicator-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]\",\n indigo:\n \"border-[color:var(--zui-timeline-indicator-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-timeline-indicator-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-timeline-indicator-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-timeline-indicator-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-timeline-indicator-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]\",\n emerald:\n \"border-[color:var(--zui-timeline-indicator-emerald-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-timeline-indicator-emerald-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-timeline-indicator-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-timeline-indicator-emerald-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-timeline-indicator-emerald-ring,oklch(76.5%_0.177_163.223_/_0.3))]\",\n gray: \"border-[color:var(--zui-timeline-indicator-gray-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-gray-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-gray-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-gray-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-gray-ring,oklch(70.7%_0.022_261.325_/_0.3))]\",\n violet:\n \"border-[color:var(--zui-timeline-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-timeline-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-timeline-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-timeline-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-timeline-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]\",\n \"gradient-blue\":\n \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-timeline-indicator-gradient-blue-to,oklch(54.6%_0.245_262.881))] text-[color:var(--zui-timeline-indicator-gradient-blue-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))]\",\n \"gradient-green\":\n \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-timeline-indicator-gradient-green-to,oklch(62.7%_0.194_149.214))] text-[color:var(--zui-timeline-indicator-gradient-green-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))]\",\n \"gradient-red\":\n \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-timeline-indicator-gradient-red-to,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-timeline-indicator-gradient-red-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))]\",\n \"gradient-yellow\":\n \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-timeline-indicator-gradient-yellow-to,oklch(79.5%_0.184_86.047))] text-[color:var(--zui-timeline-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] ring-2 ring-[var(--zui-timeline-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]\",\n \"gradient-purple\":\n \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-timeline-indicator-gradient-purple-to,oklch(62.7%_0.265_303.9))] text-[color:var(--zui-timeline-indicator-gradient-purple-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]\",\n \"gradient-teal\":\n \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-timeline-indicator-gradient-teal-to,oklch(70.4%_0.14_182.503))] text-[color:var(--zui-timeline-indicator-gradient-teal-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]\",\n \"gradient-indigo\":\n \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-timeline-indicator-gradient-indigo-to,oklch(58.5%_0.233_277.117))] text-[color:var(--zui-timeline-indicator-gradient-indigo-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]\",\n \"gradient-pink\":\n \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-timeline-indicator-gradient-pink-to,oklch(65.6%_0.241_354.308))] text-[color:var(--zui-timeline-indicator-gradient-pink-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]\",\n \"gradient-orange\":\n \"border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-timeline-indicator-gradient-orange-to,oklch(70.5%_0.213_47.604))] text-[color:var(--zui-timeline-indicator-gradient-orange-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))]\",\n} as const;\n\nexport const zuiTimelineIndicatorSizes = {\n sm: \"size-5 text-[0.625rem]\",\n md: \"size-6 text-xs\",\n lg: \"size-7 text-sm\",\n} as const;\n\nexport const zuiTimelineConnectorBase =\n \"pointer-events-none absolute bottom-0 w-px -translate-x-1/2 rounded-full bg-[var(--zui-timeline-connector,#0000001f)] dark:bg-[var(--zui-timeline-connector-dark,#ffffff1f)]\";\n\nexport const zuiTimelineConnectorSizes = {\n sm: \"left-2.5 top-6\",\n md: \"left-3 top-7\",\n lg: \"left-3.5 top-8\",\n} as const;\n\nexport const zuiTimelineContentBase = \"min-w-0 flex-1\";\n\nexport const zuiTimelineContentSizes = {\n sm: \"pb-5\",\n md: \"pb-6\",\n lg: \"pb-8\",\n} as const;\n\nexport const zuiTimelineTitleBase =\n \"font-semibold text-[color:var(--zui-timeline-title-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-timeline-title-fg-dark,#ffffff)]\";\n\nexport const zuiTimelineTitleSizes = {\n sm: \"text-sm\",\n md: \"text-sm\",\n lg: \"text-base\",\n} as const;\n\nexport const zuiTimelineDescriptionBase =\n \"text-[color:var(--zui-timeline-description-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-timeline-description-fg-dark,oklch(70.4%_0.04_256.788))]\";\n\nexport const zuiTimelineDescriptionSizes = {\n sm: \"text-xs\",\n md: \"text-xs\",\n lg: \"text-sm\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiTimelineBase,\n zuiTimelineConnectorBase,\n zuiTimelineConnectorSizes,\n zuiTimelineContentBase,\n zuiTimelineContentSizes,\n zuiTimelineDescriptionBase,\n zuiTimelineDescriptionSizes,\n zuiTimelineIndicatorAppearances,\n zuiTimelineIndicatorBase,\n zuiTimelineIndicatorSizes,\n zuiTimelineItemBase,\n zuiTimelineTitleBase,\n zuiTimelineTitleSizes,\n} from \"../../design-system/timeline\";\n\nexport const timelineVariants = cva(zuiTimelineBase);\n\nexport const timelineItemVariants = cva(zuiTimelineItemBase);\n\nexport const timelineConnectorVariants = cva(zuiTimelineConnectorBase, {\n variants: {\n size: zuiTimelineConnectorSizes,\n },\n defaultVariants: { size: \"md\" },\n});\n\nexport const timelineIndicatorVariants = cva(zuiTimelineIndicatorBase, {\n variants: {\n appearance: zuiTimelineIndicatorAppearances,\n size: zuiTimelineIndicatorSizes,\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n },\n});\n\nexport const timelineContentVariants = cva(zuiTimelineContentBase, {\n variants: {\n size: zuiTimelineContentSizes,\n },\n defaultVariants: { size: \"md\" },\n});\n\nexport const timelineTitleVariants = cva(zuiTimelineTitleBase, {\n variants: {\n size: zuiTimelineTitleSizes,\n },\n defaultVariants: { size: \"md\" },\n});\n\nexport const timelineDescriptionVariants = cva(zuiTimelineDescriptionBase, {\n variants: {\n size: zuiTimelineDescriptionSizes,\n },\n defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport {\n Children,\n createContext,\n isValidElement,\n useContext,\n useMemo,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n TimelineContentProps,\n TimelineCtx,\n TimelineDescriptionProps,\n TimelineIndicatorProps,\n TimelineItemCtx,\n TimelineItemProps,\n TimelineProps,\n TimelineSize,\n TimelineTitleProps,\n} from \"./types\";\nimport {\n timelineConnectorVariants,\n timelineContentVariants,\n timelineDescriptionVariants,\n timelineIndicatorVariants,\n timelineItemVariants,\n timelineTitleVariants,\n timelineVariants,\n} from \"./variants\";\n\nconst TimelineContext = createContext<TimelineCtx | null>(null);\n\nconst TimelineIndexContext = createContext<number | null>(null);\n\nexport const TimelineItemContext = createContext<TimelineItemCtx | null>(null);\n\nexport function useTimelineContext(component: string): TimelineCtx {\n const ctx = useContext(TimelineContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <Timeline>`);\n }\n return ctx;\n}\n\nexport function useTimelineIndex(component: string): number {\n const index = useContext(TimelineIndexContext);\n if (index === null) {\n throw new Error(`${component} must be used within <Timeline>`);\n }\n return index;\n}\n\nfunction useTimelineSize(): TimelineSize {\n return useContext(TimelineContext)?.size ?? \"md\";\n}\n\nfunction useTimelineIsLast(): boolean {\n return useContext(TimelineItemContext)?.isLast ?? false;\n}\n\nexport function Timeline({\n appearance = \"default\",\n size = \"md\",\n className,\n children,\n ref,\n ...rest\n}: TimelineProps) {\n const items = useMemo(\n () => Children.toArray(children).filter(isValidElement),\n [children],\n );\n const ctx = useMemo<TimelineCtx>(\n () => ({\n appearance: appearance ?? \"default\",\n size: size ?? \"md\",\n total: items.length,\n }),\n [appearance, size, items.length],\n );\n\n return (\n <TimelineContext.Provider value={ctx}>\n <ol\n ref={ref}\n data-slot=\"timeline\"\n className={cn(timelineVariants(), \"m-0 list-none p-0\", className)}\n {...rest}\n >\n {items.map((child, index) => (\n <TimelineIndexContext.Provider key={child.key} value={index}>\n {child}\n </TimelineIndexContext.Provider>\n ))}\n </ol>\n </TimelineContext.Provider>\n );\n}\n\nTimeline.displayName = \"Timeline\";\n\nexport function TimelineItem({\n className,\n children,\n ref,\n ...rest\n}: TimelineItemProps) {\n const { size, total } = useTimelineContext(\"TimelineItem\");\n const index = useTimelineIndex(\"TimelineItem\");\n const isLast = index === total - 1;\n const itemCtx = useMemo<TimelineItemCtx>(\n () => ({ index, isLast }),\n [index, isLast],\n );\n\n return (\n <TimelineItemContext.Provider value={itemCtx}>\n <li\n ref={ref}\n data-slot=\"timeline-item\"\n data-last={isLast ? \"\" : undefined}\n className={cn(timelineItemVariants(), className)}\n {...rest}\n >\n {!isLast ? (\n <span\n aria-hidden=\"true\"\n data-slot=\"timeline-connector\"\n className={timelineConnectorVariants({ size })}\n />\n ) : null}\n {children}\n </li>\n </TimelineItemContext.Provider>\n );\n}\n\nTimelineItem.displayName = \"TimelineItem\";\n\nexport function TimelineIndicator({\n className,\n appearance,\n children,\n ref,\n ...rest\n}: TimelineIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {\n const { appearance: rootAppearance, size } =\n useTimelineContext(\"TimelineIndicator\");\n return (\n <div\n ref={ref}\n data-slot=\"timeline-indicator\"\n className={cn(\n timelineIndicatorVariants({\n appearance: appearance ?? rootAppearance,\n size,\n }),\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nTimelineIndicator.displayName = \"TimelineIndicator\";\n\nexport function TimelineContent({\n className,\n children,\n ref,\n ...rest\n}: TimelineContentProps & { ref?: React.Ref<HTMLDivElement> }) {\n const size = useTimelineSize();\n const isLast = useTimelineIsLast();\n return (\n <div\n ref={ref}\n data-slot=\"timeline-content\"\n className={cn(\n timelineContentVariants({ size }),\n isLast && \"pb-0\",\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n );\n}\n\nTimelineContent.displayName = \"TimelineContent\";\n\nexport function TimelineTitle({\n className,\n ref,\n ...rest\n}: TimelineTitleProps & { ref?: React.Ref<HTMLDivElement> }) {\n const size = useTimelineSize();\n return (\n <div\n ref={ref}\n data-slot=\"timeline-title\"\n className={cn(timelineTitleVariants({ size }), className)}\n {...rest}\n />\n );\n}\n\nTimelineTitle.displayName = \"TimelineTitle\";\n\nexport function TimelineDescription({\n className,\n ref,\n ...rest\n}: TimelineDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {\n const size = useTimelineSize();\n return (\n <p\n ref={ref}\n data-slot=\"timeline-description\"\n className={cn(timelineDescriptionVariants({ size }), className)}\n {...rest}\n />\n );\n}\n\nTimelineDescription.displayName = \"TimelineDescription\";\n"]}
|
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkZS5756ZC_js = require('./chunk-ZS5756ZC.js');
|
|
4
|
+
var classVarianceAuthority = require('class-variance-authority');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
// src/design-system/timeline.ts
|
|
9
|
+
var zuiTimelineBase = "flex w-full flex-col";
|
|
10
|
+
var zuiTimelineItemBase = "relative flex gap-4";
|
|
11
|
+
var zuiTimelineIndicatorBase = "relative z-[1] grid shrink-0 place-items-center rounded-full border font-semibold transition-colors";
|
|
12
|
+
var zuiTimelineIndicatorAppearances = {
|
|
13
|
+
default: "border-[color:var(--zui-timeline-indicator-default-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-default-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-default-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-default-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
|
|
14
|
+
sky: "border-[color:var(--zui-timeline-indicator-sky-border,oklch(68.5%_0.169_237.323_/_0.6))] bg-[var(--zui-timeline-indicator-sky-bg,oklch(68.5%_0.169_237.323_/_0.2))] text-[color:var(--zui-timeline-indicator-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-timeline-indicator-sky-fg-dark,oklch(95.1%_0.026_236.824))] ring-2 ring-[var(--zui-timeline-indicator-sky-ring,oklch(74.6%_0.16_232.661_/_0.3))]",
|
|
15
|
+
rose: "border-[color:var(--zui-timeline-indicator-rose-border,oklch(64.5%_0.246_16.439_/_0.6))] bg-[var(--zui-timeline-indicator-rose-bg,oklch(64.5%_0.246_16.439_/_0.2))] text-[color:var(--zui-timeline-indicator-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-timeline-indicator-rose-fg-dark,oklch(94.1%_0.03_12.58))] ring-2 ring-[var(--zui-timeline-indicator-rose-ring,oklch(71.2%_0.194_13.428_/_0.3))]",
|
|
16
|
+
purple: "border-[color:var(--zui-timeline-indicator-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-timeline-indicator-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-timeline-indicator-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-timeline-indicator-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-timeline-indicator-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
|
|
17
|
+
pink: "border-[color:var(--zui-timeline-indicator-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-timeline-indicator-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-timeline-indicator-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-timeline-indicator-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-timeline-indicator-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
|
|
18
|
+
orange: "border-[color:var(--zui-timeline-indicator-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-timeline-indicator-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-timeline-indicator-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-timeline-indicator-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-timeline-indicator-orange-ring,oklch(75%_0.183_55.934_/_0.3))]",
|
|
19
|
+
yellow: "border-[color:var(--zui-timeline-indicator-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-timeline-indicator-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-timeline-indicator-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-timeline-indicator-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-timeline-indicator-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
|
|
20
|
+
teal: "border-[color:var(--zui-timeline-indicator-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-timeline-indicator-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-timeline-indicator-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-timeline-indicator-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-timeline-indicator-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
|
|
21
|
+
indigo: "border-[color:var(--zui-timeline-indicator-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-timeline-indicator-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-timeline-indicator-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-timeline-indicator-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-timeline-indicator-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
|
|
22
|
+
emerald: "border-[color:var(--zui-timeline-indicator-emerald-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-timeline-indicator-emerald-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-timeline-indicator-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-timeline-indicator-emerald-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-timeline-indicator-emerald-ring,oklch(76.5%_0.177_163.223_/_0.3))]",
|
|
23
|
+
gray: "border-[color:var(--zui-timeline-indicator-gray-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-timeline-indicator-gray-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-timeline-indicator-gray-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-timeline-indicator-gray-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-timeline-indicator-gray-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
|
|
24
|
+
violet: "border-[color:var(--zui-timeline-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-timeline-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-timeline-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-timeline-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-timeline-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]",
|
|
25
|
+
"gradient-blue": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-timeline-indicator-gradient-blue-to,oklch(54.6%_0.245_262.881))] text-[color:var(--zui-timeline-indicator-gradient-blue-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))]",
|
|
26
|
+
"gradient-green": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-timeline-indicator-gradient-green-to,oklch(62.7%_0.194_149.214))] text-[color:var(--zui-timeline-indicator-gradient-green-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))]",
|
|
27
|
+
"gradient-red": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-timeline-indicator-gradient-red-to,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-timeline-indicator-gradient-red-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))]",
|
|
28
|
+
"gradient-yellow": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-timeline-indicator-gradient-yellow-to,oklch(79.5%_0.184_86.047))] text-[color:var(--zui-timeline-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] ring-2 ring-[var(--zui-timeline-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
|
|
29
|
+
"gradient-purple": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-timeline-indicator-gradient-purple-to,oklch(62.7%_0.265_303.9))] text-[color:var(--zui-timeline-indicator-gradient-purple-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
|
|
30
|
+
"gradient-teal": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-timeline-indicator-gradient-teal-to,oklch(70.4%_0.14_182.503))] text-[color:var(--zui-timeline-indicator-gradient-teal-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
|
|
31
|
+
"gradient-indigo": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-timeline-indicator-gradient-indigo-to,oklch(58.5%_0.233_277.117))] text-[color:var(--zui-timeline-indicator-gradient-indigo-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
|
|
32
|
+
"gradient-pink": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-timeline-indicator-gradient-pink-to,oklch(65.6%_0.241_354.308))] text-[color:var(--zui-timeline-indicator-gradient-pink-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
|
|
33
|
+
"gradient-orange": "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-timeline-indicator-gradient-orange-to,oklch(70.5%_0.213_47.604))] text-[color:var(--zui-timeline-indicator-gradient-orange-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))]"
|
|
34
|
+
};
|
|
35
|
+
var zuiTimelineIndicatorSizes = {
|
|
36
|
+
sm: "size-5 text-[0.625rem]",
|
|
37
|
+
md: "size-6 text-xs",
|
|
38
|
+
lg: "size-7 text-sm"
|
|
39
|
+
};
|
|
40
|
+
var zuiTimelineConnectorBase = "pointer-events-none absolute bottom-0 w-px -translate-x-1/2 rounded-full bg-[var(--zui-timeline-connector,#0000001f)] dark:bg-[var(--zui-timeline-connector-dark,#ffffff1f)]";
|
|
41
|
+
var zuiTimelineConnectorSizes = {
|
|
42
|
+
sm: "left-2.5 top-6",
|
|
43
|
+
md: "left-3 top-7",
|
|
44
|
+
lg: "left-3.5 top-8"
|
|
45
|
+
};
|
|
46
|
+
var zuiTimelineContentBase = "min-w-0 flex-1";
|
|
47
|
+
var zuiTimelineContentSizes = {
|
|
48
|
+
sm: "pb-5",
|
|
49
|
+
md: "pb-6",
|
|
50
|
+
lg: "pb-8"
|
|
51
|
+
};
|
|
52
|
+
var zuiTimelineTitleBase = "font-semibold text-[color:var(--zui-timeline-title-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-timeline-title-fg-dark,#ffffff)]";
|
|
53
|
+
var zuiTimelineTitleSizes = {
|
|
54
|
+
sm: "text-sm",
|
|
55
|
+
md: "text-sm",
|
|
56
|
+
lg: "text-base"
|
|
57
|
+
};
|
|
58
|
+
var zuiTimelineDescriptionBase = "text-[color:var(--zui-timeline-description-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-timeline-description-fg-dark,oklch(70.4%_0.04_256.788))]";
|
|
59
|
+
var zuiTimelineDescriptionSizes = {
|
|
60
|
+
sm: "text-xs",
|
|
61
|
+
md: "text-xs",
|
|
62
|
+
lg: "text-sm"
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
// src/ui/timeline/variants.ts
|
|
66
|
+
var timelineVariants = classVarianceAuthority.cva(zuiTimelineBase);
|
|
67
|
+
var timelineItemVariants = classVarianceAuthority.cva(zuiTimelineItemBase);
|
|
68
|
+
var timelineConnectorVariants = classVarianceAuthority.cva(zuiTimelineConnectorBase, {
|
|
69
|
+
variants: {
|
|
70
|
+
size: zuiTimelineConnectorSizes
|
|
71
|
+
},
|
|
72
|
+
defaultVariants: { size: "md" }
|
|
73
|
+
});
|
|
74
|
+
var timelineIndicatorVariants = classVarianceAuthority.cva(zuiTimelineIndicatorBase, {
|
|
75
|
+
variants: {
|
|
76
|
+
appearance: zuiTimelineIndicatorAppearances,
|
|
77
|
+
size: zuiTimelineIndicatorSizes
|
|
78
|
+
},
|
|
79
|
+
defaultVariants: {
|
|
80
|
+
appearance: "default",
|
|
81
|
+
size: "md"
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
var timelineContentVariants = classVarianceAuthority.cva(zuiTimelineContentBase, {
|
|
85
|
+
variants: {
|
|
86
|
+
size: zuiTimelineContentSizes
|
|
87
|
+
},
|
|
88
|
+
defaultVariants: { size: "md" }
|
|
89
|
+
});
|
|
90
|
+
var timelineTitleVariants = classVarianceAuthority.cva(zuiTimelineTitleBase, {
|
|
91
|
+
variants: {
|
|
92
|
+
size: zuiTimelineTitleSizes
|
|
93
|
+
},
|
|
94
|
+
defaultVariants: { size: "md" }
|
|
95
|
+
});
|
|
96
|
+
var timelineDescriptionVariants = classVarianceAuthority.cva(zuiTimelineDescriptionBase, {
|
|
97
|
+
variants: {
|
|
98
|
+
size: zuiTimelineDescriptionSizes
|
|
99
|
+
},
|
|
100
|
+
defaultVariants: { size: "md" }
|
|
101
|
+
});
|
|
102
|
+
var TimelineContext = react.createContext(null);
|
|
103
|
+
var TimelineIndexContext = react.createContext(null);
|
|
104
|
+
var TimelineItemContext = react.createContext(null);
|
|
105
|
+
function useTimelineContext(component) {
|
|
106
|
+
const ctx = react.useContext(TimelineContext);
|
|
107
|
+
if (!ctx) {
|
|
108
|
+
throw new Error(`${component} must be used within <Timeline>`);
|
|
109
|
+
}
|
|
110
|
+
return ctx;
|
|
111
|
+
}
|
|
112
|
+
function useTimelineIndex(component) {
|
|
113
|
+
const index = react.useContext(TimelineIndexContext);
|
|
114
|
+
if (index === null) {
|
|
115
|
+
throw new Error(`${component} must be used within <Timeline>`);
|
|
116
|
+
}
|
|
117
|
+
return index;
|
|
118
|
+
}
|
|
119
|
+
function useTimelineSize() {
|
|
120
|
+
return react.useContext(TimelineContext)?.size ?? "md";
|
|
121
|
+
}
|
|
122
|
+
function useTimelineIsLast() {
|
|
123
|
+
return react.useContext(TimelineItemContext)?.isLast ?? false;
|
|
124
|
+
}
|
|
125
|
+
function Timeline({
|
|
126
|
+
appearance = "default",
|
|
127
|
+
size = "md",
|
|
128
|
+
className,
|
|
129
|
+
children,
|
|
130
|
+
ref,
|
|
131
|
+
...rest
|
|
132
|
+
}) {
|
|
133
|
+
const items = react.useMemo(
|
|
134
|
+
() => react.Children.toArray(children).filter(react.isValidElement),
|
|
135
|
+
[children]
|
|
136
|
+
);
|
|
137
|
+
const ctx = react.useMemo(
|
|
138
|
+
() => ({
|
|
139
|
+
appearance: appearance ?? "default",
|
|
140
|
+
size: size ?? "md",
|
|
141
|
+
total: items.length
|
|
142
|
+
}),
|
|
143
|
+
[appearance, size, items.length]
|
|
144
|
+
);
|
|
145
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TimelineContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
146
|
+
"ol",
|
|
147
|
+
{
|
|
148
|
+
ref,
|
|
149
|
+
"data-slot": "timeline",
|
|
150
|
+
className: chunkZS5756ZC_js.cn(timelineVariants(), "m-0 list-none p-0", className),
|
|
151
|
+
...rest,
|
|
152
|
+
children: items.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(TimelineIndexContext.Provider, { value: index, children: child }, child.key))
|
|
153
|
+
}
|
|
154
|
+
) });
|
|
155
|
+
}
|
|
156
|
+
Timeline.displayName = "Timeline";
|
|
157
|
+
function TimelineItem({
|
|
158
|
+
className,
|
|
159
|
+
children,
|
|
160
|
+
ref,
|
|
161
|
+
...rest
|
|
162
|
+
}) {
|
|
163
|
+
const { size, total } = useTimelineContext("TimelineItem");
|
|
164
|
+
const index = useTimelineIndex("TimelineItem");
|
|
165
|
+
const isLast = index === total - 1;
|
|
166
|
+
const itemCtx = react.useMemo(
|
|
167
|
+
() => ({ index, isLast }),
|
|
168
|
+
[index, isLast]
|
|
169
|
+
);
|
|
170
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TimelineItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
171
|
+
"li",
|
|
172
|
+
{
|
|
173
|
+
ref,
|
|
174
|
+
"data-slot": "timeline-item",
|
|
175
|
+
"data-last": isLast ? "" : void 0,
|
|
176
|
+
className: chunkZS5756ZC_js.cn(timelineItemVariants(), className),
|
|
177
|
+
...rest,
|
|
178
|
+
children: [
|
|
179
|
+
!isLast ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
180
|
+
"span",
|
|
181
|
+
{
|
|
182
|
+
"aria-hidden": "true",
|
|
183
|
+
"data-slot": "timeline-connector",
|
|
184
|
+
className: timelineConnectorVariants({ size })
|
|
185
|
+
}
|
|
186
|
+
) : null,
|
|
187
|
+
children
|
|
188
|
+
]
|
|
189
|
+
}
|
|
190
|
+
) });
|
|
191
|
+
}
|
|
192
|
+
TimelineItem.displayName = "TimelineItem";
|
|
193
|
+
function TimelineIndicator({
|
|
194
|
+
className,
|
|
195
|
+
appearance,
|
|
196
|
+
children,
|
|
197
|
+
ref,
|
|
198
|
+
...rest
|
|
199
|
+
}) {
|
|
200
|
+
const { appearance: rootAppearance, size } = useTimelineContext("TimelineIndicator");
|
|
201
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
202
|
+
"div",
|
|
203
|
+
{
|
|
204
|
+
ref,
|
|
205
|
+
"data-slot": "timeline-indicator",
|
|
206
|
+
className: chunkZS5756ZC_js.cn(
|
|
207
|
+
timelineIndicatorVariants({
|
|
208
|
+
appearance: appearance ?? rootAppearance,
|
|
209
|
+
size
|
|
210
|
+
}),
|
|
211
|
+
className
|
|
212
|
+
),
|
|
213
|
+
...rest,
|
|
214
|
+
children
|
|
215
|
+
}
|
|
216
|
+
);
|
|
217
|
+
}
|
|
218
|
+
TimelineIndicator.displayName = "TimelineIndicator";
|
|
219
|
+
function TimelineContent({
|
|
220
|
+
className,
|
|
221
|
+
children,
|
|
222
|
+
ref,
|
|
223
|
+
...rest
|
|
224
|
+
}) {
|
|
225
|
+
const size = useTimelineSize();
|
|
226
|
+
const isLast = useTimelineIsLast();
|
|
227
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
228
|
+
"div",
|
|
229
|
+
{
|
|
230
|
+
ref,
|
|
231
|
+
"data-slot": "timeline-content",
|
|
232
|
+
className: chunkZS5756ZC_js.cn(
|
|
233
|
+
timelineContentVariants({ size }),
|
|
234
|
+
isLast && "pb-0",
|
|
235
|
+
className
|
|
236
|
+
),
|
|
237
|
+
...rest,
|
|
238
|
+
children
|
|
239
|
+
}
|
|
240
|
+
);
|
|
241
|
+
}
|
|
242
|
+
TimelineContent.displayName = "TimelineContent";
|
|
243
|
+
function TimelineTitle({
|
|
244
|
+
className,
|
|
245
|
+
ref,
|
|
246
|
+
...rest
|
|
247
|
+
}) {
|
|
248
|
+
const size = useTimelineSize();
|
|
249
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
250
|
+
"div",
|
|
251
|
+
{
|
|
252
|
+
ref,
|
|
253
|
+
"data-slot": "timeline-title",
|
|
254
|
+
className: chunkZS5756ZC_js.cn(timelineTitleVariants({ size }), className),
|
|
255
|
+
...rest
|
|
256
|
+
}
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
TimelineTitle.displayName = "TimelineTitle";
|
|
260
|
+
function TimelineDescription({
|
|
261
|
+
className,
|
|
262
|
+
ref,
|
|
263
|
+
...rest
|
|
264
|
+
}) {
|
|
265
|
+
const size = useTimelineSize();
|
|
266
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
267
|
+
"p",
|
|
268
|
+
{
|
|
269
|
+
ref,
|
|
270
|
+
"data-slot": "timeline-description",
|
|
271
|
+
className: chunkZS5756ZC_js.cn(timelineDescriptionVariants({ size }), className),
|
|
272
|
+
...rest
|
|
273
|
+
}
|
|
274
|
+
);
|
|
275
|
+
}
|
|
276
|
+
TimelineDescription.displayName = "TimelineDescription";
|
|
277
|
+
|
|
278
|
+
exports.Timeline = Timeline;
|
|
279
|
+
exports.TimelineContent = TimelineContent;
|
|
280
|
+
exports.TimelineDescription = TimelineDescription;
|
|
281
|
+
exports.TimelineIndicator = TimelineIndicator;
|
|
282
|
+
exports.TimelineItem = TimelineItem;
|
|
283
|
+
exports.TimelineItemContext = TimelineItemContext;
|
|
284
|
+
exports.TimelineTitle = TimelineTitle;
|
|
285
|
+
exports.timelineConnectorVariants = timelineConnectorVariants;
|
|
286
|
+
exports.timelineContentVariants = timelineContentVariants;
|
|
287
|
+
exports.timelineDescriptionVariants = timelineDescriptionVariants;
|
|
288
|
+
exports.timelineIndicatorVariants = timelineIndicatorVariants;
|
|
289
|
+
exports.timelineItemVariants = timelineItemVariants;
|
|
290
|
+
exports.timelineTitleVariants = timelineTitleVariants;
|
|
291
|
+
exports.timelineVariants = timelineVariants;
|
|
292
|
+
exports.useTimelineContext = useTimelineContext;
|
|
293
|
+
exports.useTimelineIndex = useTimelineIndex;
|
|
294
|
+
//# sourceMappingURL=chunk-Z4KHAD6Y.js.map
|
|
295
|
+
//# sourceMappingURL=chunk-Z4KHAD6Y.js.map
|