@zentauri-ui/zentauri-components 1.7.6 → 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.
Files changed (49) hide show
  1. package/README.md +4 -2
  2. package/cli/registry.json +1 -0
  3. package/dist/chunk-GRJFGIZC.mjs +417 -0
  4. package/dist/chunk-GRJFGIZC.mjs.map +1 -0
  5. package/dist/chunk-QHEHBC6M.js +421 -0
  6. package/dist/chunk-QHEHBC6M.js.map +1 -0
  7. package/dist/design-system/index.d.ts +1 -0
  8. package/dist/design-system/index.d.ts.map +1 -1
  9. package/dist/design-system/tree-view.d.ts +66 -0
  10. package/dist/design-system/tree-view.d.ts.map +1 -0
  11. package/dist/ui/tree-view/animated/animations.d.ts +6 -0
  12. package/dist/ui/tree-view/animated/animations.d.ts.map +1 -0
  13. package/dist/ui/tree-view/animated/index.d.ts +5 -0
  14. package/dist/ui/tree-view/animated/index.d.ts.map +1 -0
  15. package/dist/ui/tree-view/animated/tree-view-animated.d.ts +6 -0
  16. package/dist/ui/tree-view/animated/tree-view-animated.d.ts.map +1 -0
  17. package/dist/ui/tree-view/animated/types.d.ts +6 -0
  18. package/dist/ui/tree-view/animated/types.d.ts.map +1 -0
  19. package/dist/ui/tree-view/animated.js +53 -0
  20. package/dist/ui/tree-view/animated.js.map +1 -0
  21. package/dist/ui/tree-view/animated.mjs +50 -0
  22. package/dist/ui/tree-view/animated.mjs.map +1 -0
  23. package/dist/ui/tree-view/index.d.ts +5 -0
  24. package/dist/ui/tree-view/index.d.ts.map +1 -0
  25. package/dist/ui/tree-view/tree-view-base.d.ts +15 -0
  26. package/dist/ui/tree-view/tree-view-base.d.ts.map +1 -0
  27. package/dist/ui/tree-view/tree-view.d.ts +6 -0
  28. package/dist/ui/tree-view/tree-view.d.ts.map +1 -0
  29. package/dist/ui/tree-view/types.d.ts +61 -0
  30. package/dist/ui/tree-view/types.d.ts.map +1 -0
  31. package/dist/ui/tree-view/variants.d.ts +9 -0
  32. package/dist/ui/tree-view/variants.d.ts.map +1 -0
  33. package/dist/ui/tree-view.js +27 -0
  34. package/dist/ui/tree-view.js.map +1 -0
  35. package/dist/ui/tree-view.mjs +14 -0
  36. package/dist/ui/tree-view.mjs.map +1 -0
  37. package/package.json +1 -1
  38. package/src/design-system/index.ts +1 -0
  39. package/src/design-system/tree-view.ts +113 -0
  40. package/src/ui/tree-view/animated/animations.ts +13 -0
  41. package/src/ui/tree-view/animated/index.ts +6 -0
  42. package/src/ui/tree-view/animated/tree-view-animated.tsx +52 -0
  43. package/src/ui/tree-view/animated/types.ts +6 -0
  44. package/src/ui/tree-view/index.ts +13 -0
  45. package/src/ui/tree-view/tree-view-base.tsx +496 -0
  46. package/src/ui/tree-view/tree-view.test.tsx +136 -0
  47. package/src/ui/tree-view/tree-view.tsx +9 -0
  48. package/src/ui/tree-view/types.ts +68 -0
  49. package/src/ui/tree-view/variants.ts +32 -0
package/dist/design-system/tree-view.d.ts ADDED
@@ -0,0 +1,66 @@
1
+ export declare const zuiTreeViewBase = "w-full text-[color:var(--zui-tree-view-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-tree-view-fg-dark,oklch(92.9%_0.013_255.508))]";
2
+ export declare const zuiTreeViewAppearances: {
3
+ readonly default: "rounded-xl border border-[color:var(--zui-tree-view-default-border,#0000001a)] dark:border-[color:var(--zui-tree-view-default-border-dark,#ffffff1a)] p-2";
4
+ readonly outline: "rounded-xl border border-[color:var(--zui-tree-view-outline-border,#00000026)] dark:border-[color:var(--zui-tree-view-outline-border-dark,#ffffff26)] p-2";
5
+ readonly ghost: "p-1";
6
+ readonly card: "rounded-xl border border-[color:var(--zui-tree-view-card-border,#0000001a)] dark:border-[color:var(--zui-tree-view-card-border-dark,#ffffff1a)] bg-[var(--zui-tree-view-card-bg,#0000000d)] dark:bg-[var(--zui-tree-view-card-bg-dark,#00000099)] p-3";
7
+ readonly separated: "rounded-xl border border-[color:var(--zui-tree-view-separated-border,#0000001a)] dark:border-[color:var(--zui-tree-view-separated-border-dark,#ffffff1a)] bg-[var(--zui-tree-view-separated-bg,oklch(98.4%_0.003_247.858_/_0.4))] dark:bg-[var(--zui-tree-view-separated-bg-dark,oklch(12.9%_0.042_264.695_/_0.4))] p-3";
8
+ readonly sky: "rounded-xl border border-[color:var(--zui-tree-view-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-tree-view-sky-border-dark,oklch(58.8%_0.158_241.966))] p-2";
9
+ readonly rose: "rounded-xl border border-[color:var(--zui-tree-view-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-tree-view-rose-border-dark,oklch(58.6%_0.253_17.585))] p-2";
10
+ readonly purple: "rounded-xl border border-[color:var(--zui-tree-view-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-tree-view-purple-border-dark,oklch(55.8%_0.288_302.321))] p-2";
11
+ readonly pink: "rounded-xl border border-[color:var(--zui-tree-view-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-tree-view-pink-border-dark,oklch(59.2%_0.249_0.584))] p-2";
12
+ readonly orange: "rounded-xl border border-[color:var(--zui-tree-view-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-tree-view-orange-border-dark,oklch(64.6%_0.222_41.116))] p-2";
13
+ readonly yellow: "rounded-xl border border-[color:var(--zui-tree-view-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-tree-view-yellow-border-dark,oklch(68.1%_0.162_75.834))] p-2";
14
+ readonly teal: "rounded-xl border border-[color:var(--zui-tree-view-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-tree-view-teal-border-dark,oklch(60%_0.118_184.704))] p-2";
15
+ readonly indigo: "rounded-xl border border-[color:var(--zui-tree-view-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-tree-view-indigo-border-dark,oklch(51.1%_0.262_276.966))] p-2";
16
+ readonly emerald: "rounded-xl border border-[color:var(--zui-tree-view-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-tree-view-emerald-border-dark,oklch(59.6%_0.145_163.225))] p-2";
17
+ readonly "gradient-blue": "rounded-xl border border-[color:var(--zui-tree-view-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-tree-view-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))] p-2";
18
+ readonly "gradient-green": "rounded-xl border border-[color:var(--zui-tree-view-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-tree-view-gradient-green-border-dark,oklch(62.7%_0.194_149.214))] p-2";
19
+ readonly "gradient-red": "rounded-xl border border-[color:var(--zui-tree-view-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-tree-view-gradient-red-border-dark,oklch(57.7%_0.245_27.325))] p-2";
20
+ readonly "gradient-yellow": "rounded-xl border border-[color:var(--zui-tree-view-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-tree-view-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))] p-2";
21
+ readonly "gradient-purple": "rounded-xl border border-[color:var(--zui-tree-view-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-tree-view-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))] p-2";
22
+ readonly "gradient-teal": "rounded-xl border border-[color:var(--zui-tree-view-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-tree-view-gradient-teal-border-dark,oklch(60%_0.118_184.704))] p-2";
23
+ readonly "gradient-indigo": "rounded-xl border border-[color:var(--zui-tree-view-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-tree-view-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] p-2";
24
+ readonly "gradient-pink": "rounded-xl border border-[color:var(--zui-tree-view-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-tree-view-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] p-2";
25
+ readonly "gradient-orange": "rounded-xl border border-[color:var(--zui-tree-view-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-tree-view-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] p-2";
26
+ };
27
+ export declare const zuiTreeViewSizes: {
28
+ readonly sm: "text-xs";
29
+ readonly md: "text-sm";
30
+ readonly lg: "text-base";
31
+ };
32
+ export declare const zuiTreeViewItemBase = "relative flex w-full items-center gap-2 rounded-lg pr-2 text-left font-medium outline-none transition select-none cursor-pointer hover:bg-[var(--zui-tree-view-item-hover,#0000000d)] dark:hover:bg-[var(--zui-tree-view-item-hover-dark,#ffffff0d)] focus-visible:ring-2 focus-visible:ring-[var(--zui-tree-view-ring-focus,#0000004d)] dark:focus-visible:ring-[var(--zui-tree-view-ring-focus-dark,#ffffff4d)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
33
+ export declare const zuiTreeViewItemSizes: {
34
+ readonly sm: "py-1 text-xs";
35
+ readonly md: "py-1.5 text-sm";
36
+ readonly lg: "py-2 text-base";
37
+ };
38
+ export declare const zuiTreeViewItemAppearances: {
39
+ readonly default: "data-[selected=true]:bg-[var(--zui-tree-view-selected,#0000000f)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff14)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]";
40
+ readonly outline: "data-[selected=true]:bg-[var(--zui-tree-view-selected,#0000000f)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff14)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]";
41
+ readonly ghost: "data-[selected=true]:bg-[var(--zui-tree-view-selected,#0000000f)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff14)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]";
42
+ readonly card: "data-[selected=true]:bg-[var(--zui-tree-view-selected,#00000014)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff1f)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]";
43
+ readonly separated: "data-[selected=true]:bg-[var(--zui-tree-view-selected,#00000014)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff1f)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]";
44
+ readonly sky: "data-[selected=true]:bg-[var(--zui-tree-view-sky-selected,oklch(95.1%_0.026_236.824))] dark:data-[selected=true]:bg-[var(--zui-tree-view-sky-selected-dark,oklch(58.8%_0.158_241.966_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-sky-selected-fg,oklch(44.3%_0.11_240.79))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-sky-selected-fg-dark,oklch(82.8%_0.111_230.318))]";
45
+ readonly rose: "data-[selected=true]:bg-[var(--zui-tree-view-rose-selected,oklch(94.1%_0.03_12.58))] dark:data-[selected=true]:bg-[var(--zui-tree-view-rose-selected-dark,oklch(58.6%_0.253_17.585_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-rose-selected-fg,oklch(45.5%_0.188_13.697))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-rose-selected-fg-dark,oklch(81%_0.117_11.638))]";
46
+ readonly purple: "data-[selected=true]:bg-[var(--zui-tree-view-purple-selected,oklch(94.6%_0.033_307.174))] dark:data-[selected=true]:bg-[var(--zui-tree-view-purple-selected-dark,oklch(55.8%_0.288_302.321_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-purple-selected-fg,oklch(43.8%_0.218_303.724))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-purple-selected-fg-dark,oklch(82.7%_0.119_306.383))]";
47
+ readonly pink: "data-[selected=true]:bg-[var(--zui-tree-view-pink-selected,oklch(94.8%_0.028_342.258))] dark:data-[selected=true]:bg-[var(--zui-tree-view-pink-selected-dark,oklch(59.2%_0.249_0.584_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-pink-selected-fg,oklch(45.9%_0.187_3.815))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-pink-selected-fg-dark,oklch(82.3%_0.12_346.018))]";
48
+ readonly orange: "data-[selected=true]:bg-[var(--zui-tree-view-orange-selected,oklch(95.4%_0.038_75.164))] dark:data-[selected=true]:bg-[var(--zui-tree-view-orange-selected-dark,oklch(64.6%_0.222_41.116_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-orange-selected-fg,oklch(47%_0.157_37.304))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-orange-selected-fg-dark,oklch(83.7%_0.128_66.29))]";
49
+ readonly yellow: "data-[selected=true]:bg-[var(--zui-tree-view-yellow-selected,oklch(97.3%_0.071_103.193))] dark:data-[selected=true]:bg-[var(--zui-tree-view-yellow-selected-dark,oklch(68.1%_0.162_75.834_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-yellow-selected-fg,oklch(47.6%_0.114_61.907))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-yellow-selected-fg-dark,oklch(90.5%_0.182_98.111))]";
50
+ readonly teal: "data-[selected=true]:bg-[var(--zui-tree-view-teal-selected,oklch(95.3%_0.051_180.801))] dark:data-[selected=true]:bg-[var(--zui-tree-view-teal-selected-dark,oklch(60%_0.118_184.704_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-teal-selected-fg,oklch(43.7%_0.078_188.216))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-teal-selected-fg-dark,oklch(85.5%_0.138_181.071))]";
51
+ readonly indigo: "data-[selected=true]:bg-[var(--zui-tree-view-indigo-selected,oklch(93%_0.034_272.788))] dark:data-[selected=true]:bg-[var(--zui-tree-view-indigo-selected-dark,oklch(51.1%_0.262_276.966_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-indigo-selected-fg,oklch(39.8%_0.195_277.366))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-indigo-selected-fg-dark,oklch(78.5%_0.115_274.713))]";
52
+ readonly emerald: "data-[selected=true]:bg-[var(--zui-tree-view-emerald-selected,oklch(95%_0.052_163.051))] dark:data-[selected=true]:bg-[var(--zui-tree-view-emerald-selected-dark,oklch(59.6%_0.145_163.225_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-emerald-selected-fg,oklch(43.2%_0.095_166.913))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-emerald-selected-fg-dark,oklch(84.5%_0.143_164.978))]";
53
+ readonly "gradient-blue": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-blue-from,oklch(80.9%_0.105_251.813))] data-[selected=true]:to-[var(--zui-tree-view-gradient-blue-to,oklch(82.7%_0.119_306.383))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
54
+ readonly "gradient-green": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-green-from,oklch(87.1%_0.15_154.449))] data-[selected=true]:to-[var(--zui-tree-view-gradient-green-to,oklch(89.7%_0.196_126.665))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
55
+ readonly "gradient-red": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-red-from,oklch(80.8%_0.114_19.571))] data-[selected=true]:to-[var(--zui-tree-view-gradient-red-to,oklch(82.3%_0.12_346.018))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
56
+ readonly "gradient-yellow": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-yellow-from,oklch(90.5%_0.182_98.111))] data-[selected=true]:to-[var(--zui-tree-view-gradient-yellow-to,oklch(83.7%_0.128_66.29))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
57
+ readonly "gradient-purple": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-purple-from,oklch(82.7%_0.119_306.383))] data-[selected=true]:to-[var(--zui-tree-view-gradient-purple-to,oklch(82.3%_0.12_346.018))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
58
+ readonly "gradient-teal": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-teal-from,oklch(85.5%_0.138_181.071))] data-[selected=true]:to-[var(--zui-tree-view-gradient-teal-to,oklch(86.5%_0.127_207.078))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-teal-from-dark,oklch(60%_0.118_184.704))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
59
+ readonly "gradient-indigo": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-indigo-from,oklch(78.5%_0.115_274.713))] data-[selected=true]:to-[var(--zui-tree-view-gradient-indigo-to,oklch(82.7%_0.119_306.383))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
60
+ readonly "gradient-pink": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from,oklch(82.3%_0.12_346.018))] data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to,oklch(81%_0.117_11.638))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
61
+ readonly "gradient-orange": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from,oklch(83.7%_0.128_66.29))] data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to,oklch(80.8%_0.114_19.571))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
62
+ };
63
+ export declare const zuiTreeViewChevron = "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-[color:var(--zui-tree-view-chevron,oklch(55.5%_0.041_257.417))] dark:text-[color:var(--zui-tree-view-chevron-dark,oklch(70.4%_0.04_256.788))] transition-transform duration-200 data-[expanded=true]:rotate-90";
64
+ export declare const zuiTreeViewIcon = "inline-flex shrink-0 items-center justify-center text-[color:var(--zui-tree-view-icon,oklch(55.5%_0.041_257.417))] dark:text-[color:var(--zui-tree-view-icon-dark,oklch(70.4%_0.04_256.788))]";
65
+ export declare const zuiTreeViewGuide = "border-l border-[color:var(--zui-tree-view-guide,#0000001a)] dark:border-[color:var(--zui-tree-view-guide-dark,#ffffff1a)]";
66
+ //# sourceMappingURL=tree-view.d.ts.map
package/dist/design-system/tree-view.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../src/design-system/tree-view.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,qJACwH,CAAC;AAErJ,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;CAyCzB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,eAAO,MAAM,mBAAmB,8dAC6b,CAAC;AAE9d,eAAO,MAAM,oBAAoB;;;;CAIvB,CAAC;AAEX,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CA0C7B,CAAC;AAEX,eAAO,MAAM,kBAAkB,yRACyP,CAAC;AAEzR,eAAO,MAAM,eAAe,kMACqK,CAAC;AAElM,eAAO,MAAM,gBAAgB,+HACiG,CAAC"}
package/dist/ui/tree-view/animated/animations.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { Transition } from "framer-motion";
2
+ /** Easing and duration presets for tree group expand/collapse. */
3
+ export type TreeViewTransition = "none" | "default" | "smooth" | "slow";
4
+ export type TreeViewTransitionPresets = Record<TreeViewTransition, Transition>;
5
+ export declare const treeViewTransitionPresets: TreeViewTransitionPresets;
6
+ //# sourceMappingURL=animations.d.ts.map
package/dist/ui/tree-view/animated/animations.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../../../src/ui/tree-view/animated/animations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,kEAAkE;AAClE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAExE,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;AAE/E,eAAO,MAAM,yBAAyB,EAAE,yBAKvC,CAAC"}
package/dist/ui/tree-view/animated/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export { TreeViewAnimated } from "./tree-view-animated";
2
+ export type { TreeViewAnimatedProps } from "./types";
3
+ export { treeViewTransitionPresets } from "./animations";
4
+ export type { TreeViewTransition } from "./animations";
5
+ //# sourceMappingURL=index.d.ts.map
package/dist/ui/tree-view/animated/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/tree-view/animated/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACzD,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}
package/dist/ui/tree-view/animated/tree-view-animated.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { TreeViewAnimatedProps } from "./types";
2
+ export declare function TreeViewAnimated({ transitionVariant, ...props }: TreeViewAnimatedProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare namespace TreeViewAnimated {
4
+ var displayName: string;
5
+ }
6
+ //# sourceMappingURL=tree-view-animated.d.ts.map
package/dist/ui/tree-view/animated/tree-view-animated.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tree-view-animated.d.ts","sourceRoot":"","sources":["../../../../src/ui/tree-view/animated/tree-view-animated.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+BrD,wBAAgB,gBAAgB,CAAC,EAC/B,iBAA6B,EAC7B,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAMvB;yBATe,gBAAgB"}
package/dist/ui/tree-view/animated/types.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { TreeViewBaseProps } from "../types";
2
+ import type { TreeViewTransition } from "./animations";
3
+ export type TreeViewAnimatedProps = TreeViewBaseProps & {
4
+ transitionVariant?: TreeViewTransition;
5
+ };
6
+ //# sourceMappingURL=types.d.ts.map
package/dist/ui/tree-view/animated/types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/tree-view/animated/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,GAAG;IACtD,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;CACxC,CAAC"}
package/dist/ui/tree-view/animated.js ADDED
@@ -0,0 +1,53 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var chunkQHEHBC6M_js = require('../../chunk-QHEHBC6M.js');
5
+ require('../../chunk-ZS5756ZC.js');
6
+ var react = require('react');
7
+ var framerMotion = require('framer-motion');
8
+ var jsxRuntime = require('react/jsx-runtime');
9
+
10
+ // src/ui/tree-view/animated/animations.ts
11
+ var treeViewTransitionPresets = {
12
+ none: { duration: 0 },
13
+ default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
14
+ smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },
15
+ slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] }
16
+ };
17
+ function createAnimatedGroup(transitionVariant) {
18
+ const transition = treeViewTransitionPresets[transitionVariant];
19
+ const motionless = transitionVariant === "none";
20
+ function AnimatedTreeGroup({ open, children }) {
21
+ return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsxRuntime.jsx(
22
+ framerMotion.motion.ul,
23
+ {
24
+ role: "group",
25
+ "data-slot": "tree-view-group",
26
+ className: "m-0 list-none overflow-hidden p-0",
27
+ initial: motionless ? false : { height: 0, opacity: 0 },
28
+ animate: motionless ? void 0 : { height: "auto", opacity: 1 },
29
+ exit: motionless ? void 0 : { height: 0, opacity: 0 },
30
+ transition,
31
+ children
32
+ }
33
+ ) : null });
34
+ }
35
+ AnimatedTreeGroup.displayName = "AnimatedTreeGroup";
36
+ return AnimatedTreeGroup;
37
+ }
38
+ function TreeViewAnimated({
39
+ transitionVariant = "default",
40
+ ...props
41
+ }) {
42
+ const GroupComponent = react.useMemo(
43
+ () => createAnimatedGroup(transitionVariant),
44
+ [transitionVariant]
45
+ );
46
+ return /* @__PURE__ */ jsxRuntime.jsx(chunkQHEHBC6M_js.TreeViewBase, { ...props, GroupComponent });
47
+ }
48
+ TreeViewAnimated.displayName = "TreeViewAnimated";
49
+
50
+ exports.TreeViewAnimated = TreeViewAnimated;
51
+ exports.treeViewTransitionPresets = treeViewTransitionPresets;
52
+ //# sourceMappingURL=animated.js.map
53
+ //# sourceMappingURL=animated.js.map
package/dist/ui/tree-view/animated.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/ui/tree-view/animated/animations.ts","../../../src/ui/tree-view/animated/tree-view-animated.tsx"],"names":["jsx","AnimatePresence","motion","useMemo","TreeViewBase"],"mappings":";;;;;;;;;AAOO,IAAM,yBAAA,GAAuD;AAAA,EAClE,IAAA,EAAM,EAAE,QAAA,EAAU,CAAA,EAAE;AAAA,EACpB,OAAA,EAAS,EAAE,QAAA,EAAU,GAAA,EAAK,IAAA,EAAM,CAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAC,CAAA,EAAE;AAAA,EACjD,MAAA,EAAQ,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,CAAC,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,CAAC,CAAA,EAAE;AAAA,EACnD,IAAA,EAAM,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,CAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAC,CAAA;AAC/C;ACAA,SAAS,oBAAoB,iBAAA,EAAuC;AAClE,EAAA,MAAM,UAAA,GAAa,0BAA0B,iBAAiB,CAAA;AAC9D,EAAA,MAAM,aAAa,iBAAA,KAAsB,MAAA;AAEzC,EAAA,SAAS,iBAAA,CAAkB,EAAE,IAAA,EAAM,QAAA,EAAS,EAAmB;AAC7D,IAAA,uBACEA,cAAA,CAACC,4BAAA,EAAA,EAAgB,OAAA,EAAS,KAAA,EACvB,QAAA,EAAA,IAAA,mBACCD,cAAA;AAAA,MAACE,mBAAA,CAAO,EAAA;AAAA,MAAP;AAAA,QACC,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAU,mCAAA;AAAA,QACV,SAAS,UAAA,GAAa,KAAA,GAAQ,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,QACtD,SAAS,UAAA,GAAa,MAAA,GAAY,EAAE,MAAA,EAAQ,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,QAC/D,MAAM,UAAA,GAAa,MAAA,GAAY,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,QACvD,UAAA;AAAA,QAEC;AAAA;AAAA,QAED,IAAA,EACN,CAAA;AAAA,EAEJ;AAEA,EAAA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;AAChC,EAAA,OAAO,iBAAA;AACT;AAEO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,iBAAA,GAAoB,SAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,MAAM,cAAA,GAAiBC,aAAA;AAAA,IACrB,MAAM,oBAAoB,iBAAiB,CAAA;AAAA,IAC3C,CAAC,iBAAiB;AAAA,GACpB;AACA,EAAA,uBAAOH,cAAA,CAACI,6BAAA,EAAA,EAAc,GAAG,KAAA,EAAO,cAAA,EAAgC,CAAA;AAClE;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"animated.js","sourcesContent":["import type { Transition } from \"framer-motion\";\n\n/** Easing and duration presets for tree group expand/collapse. */\nexport type TreeViewTransition = \"none\" | \"default\" | \"smooth\" | \"slow\";\n\nexport type TreeViewTransitionPresets = Record<TreeViewTransition, Transition>;\n\nexport const treeViewTransitionPresets: TreeViewTransitionPresets = {\n none: { duration: 0 },\n default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },\n smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },\n slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] },\n};\n","\"use client\";\n\nimport { useMemo } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { TreeViewBase } from \"../tree-view-base\";\nimport type { TreeGroupProps } from \"../types\";\n\nimport { treeViewTransitionPresets } from \"./animations\";\nimport type { TreeViewAnimatedProps } from \"./types\";\nimport type { TreeViewTransition } from \"./animations\";\n\nfunction createAnimatedGroup(transitionVariant: TreeViewTransition) {\n const transition = treeViewTransitionPresets[transitionVariant];\n const motionless = transitionVariant === \"none\";\n\n function AnimatedTreeGroup({ open, children }: TreeGroupProps) {\n return (\n <AnimatePresence initial={false}>\n {open ? (\n <motion.ul\n role=\"group\"\n data-slot=\"tree-view-group\"\n className=\"m-0 list-none overflow-hidden p-0\"\n initial={motionless ? false : { height: 0, opacity: 0 }}\n animate={motionless ? undefined : { height: \"auto\", opacity: 1 }}\n exit={motionless ? undefined : { height: 0, opacity: 0 }}\n transition={transition}\n >\n {children}\n </motion.ul>\n ) : null}\n </AnimatePresence>\n );\n }\n\n AnimatedTreeGroup.displayName = \"AnimatedTreeGroup\";\n return AnimatedTreeGroup;\n}\n\nexport function TreeViewAnimated({\n transitionVariant = \"default\",\n ...props\n}: TreeViewAnimatedProps) {\n const GroupComponent = useMemo(\n () => createAnimatedGroup(transitionVariant),\n [transitionVariant],\n );\n return <TreeViewBase {...props} GroupComponent={GroupComponent} />;\n}\n\nTreeViewAnimated.displayName = \"TreeViewAnimated\";\n"]}
package/dist/ui/tree-view/animated.mjs ADDED
@@ -0,0 +1,50 @@
1
+ "use client";
2
+ import { TreeViewBase } from '../../chunk-GRJFGIZC.mjs';
3
+ import '../../chunk-4D54YOL6.mjs';
4
+ import { useMemo } from 'react';
5
+ import { AnimatePresence, motion } from 'framer-motion';
6
+ import { jsx } from 'react/jsx-runtime';
7
+
8
+ // src/ui/tree-view/animated/animations.ts
9
+ var treeViewTransitionPresets = {
10
+ none: { duration: 0 },
11
+ default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
12
+ smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },
13
+ slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] }
14
+ };
15
+ function createAnimatedGroup(transitionVariant) {
16
+ const transition = treeViewTransitionPresets[transitionVariant];
17
+ const motionless = transitionVariant === "none";
18
+ function AnimatedTreeGroup({ open, children }) {
19
+ return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx(
20
+ motion.ul,
21
+ {
22
+ role: "group",
23
+ "data-slot": "tree-view-group",
24
+ className: "m-0 list-none overflow-hidden p-0",
25
+ initial: motionless ? false : { height: 0, opacity: 0 },
26
+ animate: motionless ? void 0 : { height: "auto", opacity: 1 },
27
+ exit: motionless ? void 0 : { height: 0, opacity: 0 },
28
+ transition,
29
+ children
30
+ }
31
+ ) : null });
32
+ }
33
+ AnimatedTreeGroup.displayName = "AnimatedTreeGroup";
34
+ return AnimatedTreeGroup;
35
+ }
36
+ function TreeViewAnimated({
37
+ transitionVariant = "default",
38
+ ...props
39
+ }) {
40
+ const GroupComponent = useMemo(
41
+ () => createAnimatedGroup(transitionVariant),
42
+ [transitionVariant]
43
+ );
44
+ return /* @__PURE__ */ jsx(TreeViewBase, { ...props, GroupComponent });
45
+ }
46
+ TreeViewAnimated.displayName = "TreeViewAnimated";
47
+
48
+ export { TreeViewAnimated, treeViewTransitionPresets };
49
+ //# sourceMappingURL=animated.mjs.map
50
+ //# sourceMappingURL=animated.mjs.map
package/dist/ui/tree-view/animated.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/ui/tree-view/animated/animations.ts","../../../src/ui/tree-view/animated/tree-view-animated.tsx"],"names":[],"mappings":";;;;;;;AAOO,IAAM,yBAAA,GAAuD;AAAA,EAClE,IAAA,EAAM,EAAE,QAAA,EAAU,CAAA,EAAE;AAAA,EACpB,OAAA,EAAS,EAAE,QAAA,EAAU,GAAA,EAAK,IAAA,EAAM,CAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAC,CAAA,EAAE;AAAA,EACjD,MAAA,EAAQ,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,CAAC,IAAA,EAAM,CAAA,EAAG,IAAA,EAAM,CAAC,CAAA,EAAE;AAAA,EACnD,IAAA,EAAM,EAAE,QAAA,EAAU,IAAA,EAAM,IAAA,EAAM,CAAC,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAC,CAAA;AAC/C;ACAA,SAAS,oBAAoB,iBAAA,EAAuC;AAClE,EAAA,MAAM,UAAA,GAAa,0BAA0B,iBAAiB,CAAA;AAC9D,EAAA,MAAM,aAAa,iBAAA,KAAsB,MAAA;AAEzC,EAAA,SAAS,iBAAA,CAAkB,EAAE,IAAA,EAAM,QAAA,EAAS,EAAmB;AAC7D,IAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,KAAA,EACvB,QAAA,EAAA,IAAA,mBACC,GAAA;AAAA,MAAC,MAAA,CAAO,EAAA;AAAA,MAAP;AAAA,QACC,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAU,mCAAA;AAAA,QACV,SAAS,UAAA,GAAa,KAAA,GAAQ,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,QACtD,SAAS,UAAA,GAAa,MAAA,GAAY,EAAE,MAAA,EAAQ,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,QAC/D,MAAM,UAAA,GAAa,MAAA,GAAY,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA,EAAE;AAAA,QACvD,UAAA;AAAA,QAEC;AAAA;AAAA,QAED,IAAA,EACN,CAAA;AAAA,EAEJ;AAEA,EAAA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;AAChC,EAAA,OAAO,iBAAA;AACT;AAEO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,iBAAA,GAAoB,SAAA;AAAA,EACpB,GAAG;AACL,CAAA,EAA0B;AACxB,EAAA,MAAM,cAAA,GAAiB,OAAA;AAAA,IACrB,MAAM,oBAAoB,iBAAiB,CAAA;AAAA,IAC3C,CAAC,iBAAiB;AAAA,GACpB;AACA,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,cAAA,EAAgC,CAAA;AAClE;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"animated.mjs","sourcesContent":["import type { Transition } from \"framer-motion\";\n\n/** Easing and duration presets for tree group expand/collapse. */\nexport type TreeViewTransition = \"none\" | \"default\" | \"smooth\" | \"slow\";\n\nexport type TreeViewTransitionPresets = Record<TreeViewTransition, Transition>;\n\nexport const treeViewTransitionPresets: TreeViewTransitionPresets = {\n none: { duration: 0 },\n default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },\n smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },\n slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] },\n};\n","\"use client\";\n\nimport { useMemo } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nimport { TreeViewBase } from \"../tree-view-base\";\nimport type { TreeGroupProps } from \"../types\";\n\nimport { treeViewTransitionPresets } from \"./animations\";\nimport type { TreeViewAnimatedProps } from \"./types\";\nimport type { TreeViewTransition } from \"./animations\";\n\nfunction createAnimatedGroup(transitionVariant: TreeViewTransition) {\n const transition = treeViewTransitionPresets[transitionVariant];\n const motionless = transitionVariant === \"none\";\n\n function AnimatedTreeGroup({ open, children }: TreeGroupProps) {\n return (\n <AnimatePresence initial={false}>\n {open ? (\n <motion.ul\n role=\"group\"\n data-slot=\"tree-view-group\"\n className=\"m-0 list-none overflow-hidden p-0\"\n initial={motionless ? false : { height: 0, opacity: 0 }}\n animate={motionless ? undefined : { height: \"auto\", opacity: 1 }}\n exit={motionless ? undefined : { height: 0, opacity: 0 }}\n transition={transition}\n >\n {children}\n </motion.ul>\n ) : null}\n </AnimatePresence>\n );\n }\n\n AnimatedTreeGroup.displayName = \"AnimatedTreeGroup\";\n return AnimatedTreeGroup;\n}\n\nexport function TreeViewAnimated({\n transitionVariant = \"default\",\n ...props\n}: TreeViewAnimatedProps) {\n const GroupComponent = useMemo(\n () => createAnimatedGroup(transitionVariant),\n [transitionVariant],\n );\n return <TreeViewBase {...props} GroupComponent={GroupComponent} />;\n}\n\nTreeViewAnimated.displayName = \"TreeViewAnimated\";\n"]}
package/dist/ui/tree-view/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export { TreeView } from "./tree-view";
2
+ export { TreeViewBase } from "./tree-view-base";
3
+ export type { TreeNode, TreeViewBaseProps, TreeViewProps, TreeViewRenderArgs, TreeViewVariantProps, TreeGroupProps, } from "./types";
4
+ export { treeViewVariants, treeViewItemVariants } from "./variants";
5
+ //# sourceMappingURL=index.d.ts.map
package/dist/ui/tree-view/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC"}
package/dist/ui/tree-view/tree-view-base.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { TreeViewBaseProps, TreeViewCtx } from "./types";
2
+ /**
3
+ * Reads the shared tree-view state from context and fails early when a tree item
4
+ * is rendered outside the TreeView provider. The component name keeps the error
5
+ * message actionable for consumers composing custom tree-view pieces.
6
+ */
7
+ declare function useTreeViewContext(component: string): TreeViewCtx;
8
+ export declare function TreeViewBase({ data, defaultExpanded, expanded, onExpandedChange, defaultSelected, selected, onSelect, renderNode, showGuides, appearance, size, className, GroupComponent, ...rest }: TreeViewBaseProps & {
9
+ GroupComponent?: TreeViewCtx["GroupComponent"];
10
+ }): import("react/jsx-runtime").JSX.Element;
11
+ export declare namespace TreeViewBase {
12
+ var displayName: string;
13
+ }
14
+ export { useTreeViewContext };
15
+ //# sourceMappingURL=tree-view-base.d.ts.map
package/dist/ui/tree-view/tree-view-base.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tree-view-base.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/tree-view-base.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAGV,iBAAiB,EACjB,WAAW,EACZ,MAAM,SAAS,CAAC;AAMjB;;;;GAIG;AACH,iBAAS,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,WAAW,CAM1D;AAwKD,wBAAgB,YAAY,CAAC,EAC3B,IAAS,EACT,eAAe,EACf,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAkB,EAClB,UAAsB,EACtB,IAAW,EACX,SAAS,EACT,cAAgC,EAChC,GAAG,IAAI,EACR,EAAE,iBAAiB,GAAG;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAChD,2CA0QA;yBA3Re,YAAY;;;AA+R5B,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
package/dist/ui/tree-view/tree-view.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { TreeViewProps } from "./types";
2
+ export declare function TreeView(props: TreeViewProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare namespace TreeView {
4
+ var displayName: string;
5
+ }
6
+ //# sourceMappingURL=tree-view.d.ts.map
package/dist/ui/tree-view/tree-view.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/tree-view.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ"}
package/dist/ui/tree-view/types.d.ts ADDED
@@ -0,0 +1,61 @@
1
+ import type { VariantProps } from "class-variance-authority";
2
+ import type { ComponentType, ReactNode } from "react";
3
+ import type { treeViewVariants } from "./variants";
4
+ export type TreeViewVariantProps = VariantProps<typeof treeViewVariants>;
5
+ export type TreeNode = {
6
+ /** Stable, unique identifier used for expansion and selection state. */
7
+ id: string;
8
+ label: ReactNode;
9
+ /** Optional leading icon rendered before the label. */
10
+ icon?: ReactNode;
11
+ children?: TreeNode[];
12
+ disabled?: boolean;
13
+ };
14
+ export type TreeViewRenderArgs = {
15
+ node: TreeNode;
16
+ depth: number;
17
+ isExpanded: boolean;
18
+ isSelected: boolean;
19
+ };
20
+ export type TreeViewBaseProps = TreeViewVariantProps & {
21
+ data: TreeNode[];
22
+ /** Uncontrolled set of expanded node ids. */
23
+ defaultExpanded?: string[];
24
+ /** Controlled set of expanded node ids. */
25
+ expanded?: string[];
26
+ onExpandedChange?: (ids: string[]) => void;
27
+ /** Uncontrolled selected node id. */
28
+ defaultSelected?: string;
29
+ /** Controlled selected node id. */
30
+ selected?: string;
31
+ onSelect?: (node: TreeNode) => void;
32
+ /** Replace the default label rendering for each node. */
33
+ renderNode?: (args: TreeViewRenderArgs) => ReactNode;
34
+ /** Draw vertical indentation guide lines for nested levels. */
35
+ showGuides?: boolean;
36
+ className?: string;
37
+ "aria-label"?: string;
38
+ "aria-labelledby"?: string;
39
+ };
40
+ export type TreeViewProps = TreeViewBaseProps;
41
+ export type TreeGroupProps = {
42
+ open: boolean;
43
+ level: number;
44
+ children: ReactNode;
45
+ };
46
+ export type TreeViewCtx = {
47
+ appearance: NonNullable<TreeViewBaseProps["appearance"]>;
48
+ size: NonNullable<TreeViewBaseProps["size"]>;
49
+ showGuides: boolean;
50
+ GroupComponent: ComponentType<TreeGroupProps>;
51
+ isExpanded: (id: string) => boolean;
52
+ toggleExpanded: (id: string) => void;
53
+ setExpanded: (id: string, open: boolean) => void;
54
+ selectedId: string | undefined;
55
+ activeId: string | undefined;
56
+ selectNode: (node: TreeNode) => void;
57
+ registerItem: (id: string, el: HTMLDivElement | null) => void;
58
+ onItemKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
59
+ renderNode?: (args: TreeViewRenderArgs) => ReactNode;
60
+ };
61
+ //# sourceMappingURL=types.d.ts.map
package/dist/ui/tree-view/types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAEzE,MAAM,MAAM,QAAQ,GAAG;IACrB,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,GAAG;IACrD,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,yDAAyD;IACzD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,SAAS,CAAC;IACrD,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,WAAW,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAC;IACzD,IAAI,EAAE,WAAW,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7C,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,UAAU,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,SAAS,CAAC;CACtD,CAAC"}
package/dist/ui/tree-view/variants.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ export declare const treeViewVariants: (props?: ({
2
+ appearance?: "default" | "outline" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
3
+ size?: "md" | "sm" | "lg" | null | undefined;
4
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
5
+ export declare const treeViewItemVariants: (props?: ({
6
+ appearance?: "default" | "outline" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
7
+ size?: "md" | "sm" | "lg" | null | undefined;
8
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
9
+ //# sourceMappingURL=variants.d.ts.map
package/dist/ui/tree-view/variants.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/tree-view/variants.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,gBAAgB;;;8EAS3B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;8EAS/B,CAAC"}
package/dist/ui/tree-view.js ADDED
@@ -0,0 +1,27 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var chunkQHEHBC6M_js = require('../chunk-QHEHBC6M.js');
5
+ require('../chunk-ZS5756ZC.js');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
+
8
+ function TreeView(props) {
9
+ return /* @__PURE__ */ jsxRuntime.jsx(chunkQHEHBC6M_js.TreeViewBase, { ...props });
10
+ }
11
+ TreeView.displayName = "TreeView";
12
+
13
+ Object.defineProperty(exports, "TreeViewBase", {
14
+ enumerable: true,
15
+ get: function () { return chunkQHEHBC6M_js.TreeViewBase; }
16
+ });
17
+ Object.defineProperty(exports, "treeViewItemVariants", {
18
+ enumerable: true,
19
+ get: function () { return chunkQHEHBC6M_js.treeViewItemVariants; }
20
+ });
21
+ Object.defineProperty(exports, "treeViewVariants", {
22
+ enumerable: true,
23
+ get: function () { return chunkQHEHBC6M_js.treeViewVariants; }
24
+ });
25
+ exports.TreeView = TreeView;
26
+ //# sourceMappingURL=tree-view.js.map
27
+ //# sourceMappingURL=tree-view.js.map
package/dist/ui/tree-view.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/ui/tree-view/tree-view.tsx"],"names":["jsx","TreeViewBase"],"mappings":";;;;;;AAIO,SAAS,SAAS,KAAA,EAAsB;AAC7C,EAAA,uBAAOA,cAAA,CAACC,6BAAA,EAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AAClC;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"tree-view.js","sourcesContent":["// tree-view.tsx — default static entry (no framer-motion on expand/collapse)\nimport { TreeViewBase } from \"./tree-view-base\";\nimport type { TreeViewProps } from \"./types\";\n\nexport function TreeView(props: TreeViewProps) {\n return <TreeViewBase {...props} />;\n}\n\nTreeView.displayName = \"TreeView\";\n"]}
package/dist/ui/tree-view.mjs ADDED
@@ -0,0 +1,14 @@
1
+ "use client";
2
+ import { TreeViewBase } from '../chunk-GRJFGIZC.mjs';
3
+ export { TreeViewBase, treeViewItemVariants, treeViewVariants } from '../chunk-GRJFGIZC.mjs';
4
+ import '../chunk-4D54YOL6.mjs';
5
+ import { jsx } from 'react/jsx-runtime';
6
+
7
+ function TreeView(props) {
8
+ return /* @__PURE__ */ jsx(TreeViewBase, { ...props });
9
+ }
10
+ TreeView.displayName = "TreeView";
11
+
12
+ export { TreeView };
13
+ //# sourceMappingURL=tree-view.mjs.map
14
+ //# sourceMappingURL=tree-view.mjs.map
package/dist/ui/tree-view.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/ui/tree-view/tree-view.tsx"],"names":[],"mappings":";;;;;AAIO,SAAS,SAAS,KAAA,EAAsB;AAC7C,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AAClC;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"tree-view.mjs","sourcesContent":["// tree-view.tsx — default static entry (no framer-motion on expand/collapse)\nimport { TreeViewBase } from \"./tree-view-base\";\nimport type { TreeViewProps } from \"./types\";\n\nexport function TreeView(props: TreeViewProps) {\n return <TreeViewBase {...props} />;\n}\n\nTreeView.displayName = \"TreeView\";\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zentauri-ui/zentauri-components",
3
- "version": "1.7.6",
3
+ "version": "1.7.7",
4
4
  "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
5
5
  "license": "MIT",
6
6
  "files": [
package/src/design-system/index.ts CHANGED
@@ -34,4 +34,5 @@ export * from "./toast";
34
34
  export * from "./tokens";
35
35
  export * from "./toggle";
36
36
  export * from "./tooltip";
37
+ export * from "./tree-view";
37
38
  export * from "./typography";
package/src/design-system/tree-view.ts ADDED
@@ -0,0 +1,113 @@
1
+ export const zuiTreeViewBase =
2
+ "w-full text-[color:var(--zui-tree-view-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-tree-view-fg-dark,oklch(92.9%_0.013_255.508))]";
3
+
4
+ export const zuiTreeViewAppearances = {
5
+ default:
6
+ "rounded-xl border border-[color:var(--zui-tree-view-default-border,#0000001a)] dark:border-[color:var(--zui-tree-view-default-border-dark,#ffffff1a)] p-2",
7
+ outline:
8
+ "rounded-xl border border-[color:var(--zui-tree-view-outline-border,#00000026)] dark:border-[color:var(--zui-tree-view-outline-border-dark,#ffffff26)] p-2",
9
+ ghost: "p-1",
10
+ card: "rounded-xl border border-[color:var(--zui-tree-view-card-border,#0000001a)] dark:border-[color:var(--zui-tree-view-card-border-dark,#ffffff1a)] bg-[var(--zui-tree-view-card-bg,#0000000d)] dark:bg-[var(--zui-tree-view-card-bg-dark,#00000099)] p-3",
11
+ separated:
12
+ "rounded-xl border border-[color:var(--zui-tree-view-separated-border,#0000001a)] dark:border-[color:var(--zui-tree-view-separated-border-dark,#ffffff1a)] bg-[var(--zui-tree-view-separated-bg,oklch(98.4%_0.003_247.858_/_0.4))] dark:bg-[var(--zui-tree-view-separated-bg-dark,oklch(12.9%_0.042_264.695_/_0.4))] p-3",
13
+ sky: "rounded-xl border border-[color:var(--zui-tree-view-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-tree-view-sky-border-dark,oklch(58.8%_0.158_241.966))] p-2",
14
+ rose: "rounded-xl border border-[color:var(--zui-tree-view-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-tree-view-rose-border-dark,oklch(58.6%_0.253_17.585))] p-2",
15
+ purple:
16
+ "rounded-xl border border-[color:var(--zui-tree-view-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-tree-view-purple-border-dark,oklch(55.8%_0.288_302.321))] p-2",
17
+ pink: "rounded-xl border border-[color:var(--zui-tree-view-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-tree-view-pink-border-dark,oklch(59.2%_0.249_0.584))] p-2",
18
+ orange:
19
+ "rounded-xl border border-[color:var(--zui-tree-view-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-tree-view-orange-border-dark,oklch(64.6%_0.222_41.116))] p-2",
20
+ yellow:
21
+ "rounded-xl border border-[color:var(--zui-tree-view-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-tree-view-yellow-border-dark,oklch(68.1%_0.162_75.834))] p-2",
22
+ teal: "rounded-xl border border-[color:var(--zui-tree-view-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-tree-view-teal-border-dark,oklch(60%_0.118_184.704))] p-2",
23
+ indigo:
24
+ "rounded-xl border border-[color:var(--zui-tree-view-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-tree-view-indigo-border-dark,oklch(51.1%_0.262_276.966))] p-2",
25
+ emerald:
26
+ "rounded-xl border border-[color:var(--zui-tree-view-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-tree-view-emerald-border-dark,oklch(59.6%_0.145_163.225))] p-2",
27
+ "gradient-blue":
28
+ "rounded-xl border border-[color:var(--zui-tree-view-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-tree-view-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))] p-2",
29
+ "gradient-green":
30
+ "rounded-xl border border-[color:var(--zui-tree-view-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-tree-view-gradient-green-border-dark,oklch(62.7%_0.194_149.214))] p-2",
31
+ "gradient-red":
32
+ "rounded-xl border border-[color:var(--zui-tree-view-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-tree-view-gradient-red-border-dark,oklch(57.7%_0.245_27.325))] p-2",
33
+ "gradient-yellow":
34
+ "rounded-xl border border-[color:var(--zui-tree-view-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-tree-view-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))] p-2",
35
+ "gradient-purple":
36
+ "rounded-xl border border-[color:var(--zui-tree-view-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-tree-view-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))] p-2",
37
+ "gradient-teal":
38
+ "rounded-xl border border-[color:var(--zui-tree-view-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-tree-view-gradient-teal-border-dark,oklch(60%_0.118_184.704))] p-2",
39
+ "gradient-indigo":
40
+ "rounded-xl border border-[color:var(--zui-tree-view-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-tree-view-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] p-2",
41
+ "gradient-pink":
42
+ "rounded-xl border border-[color:var(--zui-tree-view-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-tree-view-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] p-2",
43
+ "gradient-orange":
44
+ "rounded-xl border border-[color:var(--zui-tree-view-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-tree-view-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] p-2",
45
+ } as const;
46
+
47
+ export const zuiTreeViewSizes = {
48
+ sm: "text-xs",
49
+ md: "text-sm",
50
+ lg: "text-base",
51
+ } as const;
52
+
53
+ export const zuiTreeViewItemBase =
54
+ "relative flex w-full items-center gap-2 rounded-lg pr-2 text-left font-medium outline-none transition select-none cursor-pointer hover:bg-[var(--zui-tree-view-item-hover,#0000000d)] dark:hover:bg-[var(--zui-tree-view-item-hover-dark,#ffffff0d)] focus-visible:ring-2 focus-visible:ring-[var(--zui-tree-view-ring-focus,#0000004d)] dark:focus-visible:ring-[var(--zui-tree-view-ring-focus-dark,#ffffff4d)] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
55
+
56
+ export const zuiTreeViewItemSizes = {
57
+ sm: "py-1 text-xs",
58
+ md: "py-1.5 text-sm",
59
+ lg: "py-2 text-base",
60
+ } as const;
61
+
62
+ export const zuiTreeViewItemAppearances = {
63
+ default:
64
+ "data-[selected=true]:bg-[var(--zui-tree-view-selected,#0000000f)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff14)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
65
+ outline:
66
+ "data-[selected=true]:bg-[var(--zui-tree-view-selected,#0000000f)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff14)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
67
+ ghost:
68
+ "data-[selected=true]:bg-[var(--zui-tree-view-selected,#0000000f)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff14)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
69
+ card: "data-[selected=true]:bg-[var(--zui-tree-view-selected,#00000014)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff1f)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
70
+ separated:
71
+ "data-[selected=true]:bg-[var(--zui-tree-view-selected,#00000014)] dark:data-[selected=true]:bg-[var(--zui-tree-view-selected-dark,#ffffff1f)] data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg,oklch(20.8%_0.042_265.755))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-selected-fg-dark,#ffffff)]",
72
+ sky: "data-[selected=true]:bg-[var(--zui-tree-view-sky-selected,oklch(95.1%_0.026_236.824))] dark:data-[selected=true]:bg-[var(--zui-tree-view-sky-selected-dark,oklch(58.8%_0.158_241.966_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-sky-selected-fg,oklch(44.3%_0.11_240.79))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-sky-selected-fg-dark,oklch(82.8%_0.111_230.318))]",
73
+ rose: "data-[selected=true]:bg-[var(--zui-tree-view-rose-selected,oklch(94.1%_0.03_12.58))] dark:data-[selected=true]:bg-[var(--zui-tree-view-rose-selected-dark,oklch(58.6%_0.253_17.585_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-rose-selected-fg,oklch(45.5%_0.188_13.697))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-rose-selected-fg-dark,oklch(81%_0.117_11.638))]",
74
+ purple:
75
+ "data-[selected=true]:bg-[var(--zui-tree-view-purple-selected,oklch(94.6%_0.033_307.174))] dark:data-[selected=true]:bg-[var(--zui-tree-view-purple-selected-dark,oklch(55.8%_0.288_302.321_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-purple-selected-fg,oklch(43.8%_0.218_303.724))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-purple-selected-fg-dark,oklch(82.7%_0.119_306.383))]",
76
+ pink: "data-[selected=true]:bg-[var(--zui-tree-view-pink-selected,oklch(94.8%_0.028_342.258))] dark:data-[selected=true]:bg-[var(--zui-tree-view-pink-selected-dark,oklch(59.2%_0.249_0.584_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-pink-selected-fg,oklch(45.9%_0.187_3.815))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-pink-selected-fg-dark,oklch(82.3%_0.12_346.018))]",
77
+ orange:
78
+ "data-[selected=true]:bg-[var(--zui-tree-view-orange-selected,oklch(95.4%_0.038_75.164))] dark:data-[selected=true]:bg-[var(--zui-tree-view-orange-selected-dark,oklch(64.6%_0.222_41.116_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-orange-selected-fg,oklch(47%_0.157_37.304))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-orange-selected-fg-dark,oklch(83.7%_0.128_66.29))]",
79
+ yellow:
80
+ "data-[selected=true]:bg-[var(--zui-tree-view-yellow-selected,oklch(97.3%_0.071_103.193))] dark:data-[selected=true]:bg-[var(--zui-tree-view-yellow-selected-dark,oklch(68.1%_0.162_75.834_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-yellow-selected-fg,oklch(47.6%_0.114_61.907))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-yellow-selected-fg-dark,oklch(90.5%_0.182_98.111))]",
81
+ teal: "data-[selected=true]:bg-[var(--zui-tree-view-teal-selected,oklch(95.3%_0.051_180.801))] dark:data-[selected=true]:bg-[var(--zui-tree-view-teal-selected-dark,oklch(60%_0.118_184.704_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-teal-selected-fg,oklch(43.7%_0.078_188.216))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-teal-selected-fg-dark,oklch(85.5%_0.138_181.071))]",
82
+ indigo:
83
+ "data-[selected=true]:bg-[var(--zui-tree-view-indigo-selected,oklch(93%_0.034_272.788))] dark:data-[selected=true]:bg-[var(--zui-tree-view-indigo-selected-dark,oklch(51.1%_0.262_276.966_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-indigo-selected-fg,oklch(39.8%_0.195_277.366))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-indigo-selected-fg-dark,oklch(78.5%_0.115_274.713))]",
84
+ emerald:
85
+ "data-[selected=true]:bg-[var(--zui-tree-view-emerald-selected,oklch(95%_0.052_163.051))] dark:data-[selected=true]:bg-[var(--zui-tree-view-emerald-selected-dark,oklch(59.6%_0.145_163.225_/_0.16))] data-[selected=true]:text-[color:var(--zui-tree-view-emerald-selected-fg,oklch(43.2%_0.095_166.913))] dark:data-[selected=true]:text-[color:var(--zui-tree-view-emerald-selected-fg-dark,oklch(84.5%_0.143_164.978))]",
86
+ "gradient-blue":
87
+ "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-blue-from,oklch(80.9%_0.105_251.813))] data-[selected=true]:to-[var(--zui-tree-view-gradient-blue-to,oklch(82.7%_0.119_306.383))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
88
+ "gradient-green":
89
+ "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-green-from,oklch(87.1%_0.15_154.449))] data-[selected=true]:to-[var(--zui-tree-view-gradient-green-to,oklch(89.7%_0.196_126.665))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
90
+ "gradient-red":
91
+ "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-red-from,oklch(80.8%_0.114_19.571))] data-[selected=true]:to-[var(--zui-tree-view-gradient-red-to,oklch(82.3%_0.12_346.018))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
92
+ "gradient-yellow":
93
+ "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-yellow-from,oklch(90.5%_0.182_98.111))] data-[selected=true]:to-[var(--zui-tree-view-gradient-yellow-to,oklch(83.7%_0.128_66.29))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
94
+ "gradient-purple":
95
+ "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-purple-from,oklch(82.7%_0.119_306.383))] data-[selected=true]:to-[var(--zui-tree-view-gradient-purple-to,oklch(82.3%_0.12_346.018))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
96
+ "gradient-teal":
97
+ "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-teal-from,oklch(85.5%_0.138_181.071))] data-[selected=true]:to-[var(--zui-tree-view-gradient-teal-to,oklch(86.5%_0.127_207.078))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-teal-from-dark,oklch(60%_0.118_184.704))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
98
+ "gradient-indigo":
99
+ "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-indigo-from,oklch(78.5%_0.115_274.713))] data-[selected=true]:to-[var(--zui-tree-view-gradient-indigo-to,oklch(82.7%_0.119_306.383))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
100
+ "gradient-pink":
101
+ "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from,oklch(82.3%_0.12_346.018))] data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to,oklch(81%_0.117_11.638))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
102
+ "gradient-orange":
103
+ "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from,oklch(83.7%_0.128_66.29))] data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to,oklch(80.8%_0.114_19.571))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
104
+ } as const;
105
+
106
+ export const zuiTreeViewChevron =
107
+ "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-[color:var(--zui-tree-view-chevron,oklch(55.5%_0.041_257.417))] dark:text-[color:var(--zui-tree-view-chevron-dark,oklch(70.4%_0.04_256.788))] transition-transform duration-200 data-[expanded=true]:rotate-90";
108
+
109
+ export const zuiTreeViewIcon =
110
+ "inline-flex shrink-0 items-center justify-center text-[color:var(--zui-tree-view-icon,oklch(55.5%_0.041_257.417))] dark:text-[color:var(--zui-tree-view-icon-dark,oklch(70.4%_0.04_256.788))]";
111
+
112
+ export const zuiTreeViewGuide =
113
+ "border-l border-[color:var(--zui-tree-view-guide,#0000001a)] dark:border-[color:var(--zui-tree-view-guide-dark,#ffffff1a)]";
package/src/ui/tree-view/animated/animations.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { Transition } from "framer-motion";
2
+
3
+ /** Easing and duration presets for tree group expand/collapse. */
4
+ export type TreeViewTransition = "none" | "default" | "smooth" | "slow";
5
+
6
+ export type TreeViewTransitionPresets = Record<TreeViewTransition, Transition>;
7
+
8
+ export const treeViewTransitionPresets: TreeViewTransitionPresets = {
9
+ none: { duration: 0 },
10
+ default: { duration: 0.2, ease: [0.4, 0, 0.2, 1] },
11
+ smooth: { duration: 0.28, ease: [0.22, 1, 0.36, 1] },
12
+ slow: { duration: 0.38, ease: [0.4, 0, 0.2, 1] },
13
+ };