@tac-ui/web 1.0.0 → 1.0.1

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 (3) hide show
  1. package/dist/index.js +63 -54
  2. package/dist/index.mjs +63 -54
  3. package/package.json +9 -9
package/dist/index.js CHANGED
@@ -84,6 +84,15 @@ function useTacTheme() {
84
84
  function cn(...inputs) {
85
85
  return tailwindMerge.twMerge(clsx.clsx(inputs));
86
86
  }
87
+ var EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
88
+ var DURATION = {
89
+ fast: "150ms",
90
+ moderate: "200ms",
91
+ normal: "220ms",
92
+ slow: "350ms"
93
+ };
94
+ var EXIT_DURATION = 0.15;
95
+ var OVERLAY_DURATION = 0.2;
87
96
  var dropdownMotionVariants = {
88
97
  hidden: {
89
98
  opacity: 0,
@@ -110,7 +119,7 @@ var panelVariants = {
110
119
  opacity: 0,
111
120
  scale: 0.97,
112
121
  filter: "blur(4px)",
113
- transition: { duration: 0.15 }
122
+ transition: { duration: EXIT_DURATION }
114
123
  }
115
124
  };
116
125
  var fadeVariants = {
@@ -125,12 +134,12 @@ var fadeVariants = {
125
134
  opacity: 0,
126
135
  y: -6,
127
136
  filter: "blur(4px)",
128
- transition: { duration: 0.15 }
137
+ transition: { duration: EXIT_DURATION }
129
138
  }
130
139
  };
131
140
  var exitVariants = {
132
141
  initial: { scale: 1, opacity: 1 },
133
- exit: { scale: 0.85, opacity: 0, transition: { duration: 0.15 } }
142
+ exit: { scale: 0.85, opacity: 0, transition: { duration: EXIT_DURATION } }
134
143
  };
135
144
  var pageEntrance = {
136
145
  initial: { opacity: 0, y: 8 },
@@ -141,7 +150,7 @@ var pageEntrance = {
141
150
  var focusRing = "focus-visible:outline-none focus-visible:shadow-[var(--focus-glow)]";
142
151
  var peerFocusRing = "peer-focus-visible:outline-none peer-focus-visible:shadow-[var(--point-glow)]";
143
152
  var focusRingPoint = "outline-none focus-visible:shadow-[var(--point-glow)]";
144
- var inputTransition = "border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1)";
153
+ var inputTransition = `border-color ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}, color ${DURATION.normal} ${EASING}, background-color ${DURATION.normal} ${EASING}`;
145
154
  var buttonVariants = classVarianceAuthority.cva(
146
155
  `relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium cursor-pointer border-none ${focusRing} disabled:opacity-50 disabled:pointer-events-none`,
147
156
  {
@@ -186,7 +195,7 @@ var Button = React40.forwardRef(
186
195
  ref,
187
196
  className: cn(buttonVariants({ variant, size, iconOnly }), className),
188
197
  style: {
189
- transition: "color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1)"
198
+ transition: `color ${DURATION.normal} ${EASING}, background-color ${DURATION.normal} ${EASING}, border-color ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}`
190
199
  },
191
200
  disabled,
192
201
  whileHover: whileHoverProps,
@@ -580,7 +589,7 @@ var Select = React40.forwardRef(
580
589
  if (e.key === "Escape") handleClose();
581
590
  },
582
591
  style: {
583
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
592
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
584
593
  },
585
594
  className: cn(
586
595
  "px-3 py-2.5 text-sm cursor-pointer",
@@ -757,7 +766,7 @@ var Combobox = React40.forwardRef(
757
766
  }
758
767
  },
759
768
  style: {
760
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
769
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
761
770
  },
762
771
  className: cn(
763
772
  "px-3 py-2.5 text-sm cursor-pointer",
@@ -823,7 +832,7 @@ var Card = React40.forwardRef(
823
832
  ref,
824
833
  ...props,
825
834
  style: {
826
- transition: "box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms cubic-bezier(0.22, 1, 0.36, 1)",
835
+ transition: `box-shadow ${DURATION.moderate} ${EASING}, border-color ${DURATION.moderate} ${EASING}, background-color ${DURATION.moderate} ${EASING}`,
827
836
  ...style
828
837
  },
829
838
  className: cn(cardVariants({ variant }), className),
@@ -944,7 +953,7 @@ var MorphingCard = React40.forwardRef(
944
953
  }
945
954
  },
946
955
  style: {
947
- transition: "box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1)"
956
+ transition: `box-shadow ${DURATION.normal} ${EASING}, border-color ${DURATION.normal} ${EASING}, background-color ${DURATION.normal} ${EASING}`
948
957
  },
949
958
  className: cn(
950
959
  glassClasses,
@@ -963,7 +972,7 @@ var MorphingCard = React40.forwardRef(
963
972
  initial: { opacity: 0 },
964
973
  animate: { opacity: 1 },
965
974
  exit: { opacity: 0 },
966
- transition: { duration: 0.2 },
975
+ transition: { duration: OVERLAY_DURATION },
967
976
  className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[8px]",
968
977
  onClick: handleOverlayClick,
969
978
  children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -985,7 +994,7 @@ var MorphingCard = React40.forwardRef(
985
994
  "aria-label": "Close",
986
995
  onClick: () => setExpanded(false),
987
996
  style: {
988
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
997
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
989
998
  },
990
999
  className: cn(
991
1000
  "absolute top-3 right-3 flex items-center justify-center w-7 h-7 rounded-full bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--secondary)] cursor-pointer border-none",
@@ -1125,7 +1134,7 @@ var Checkbox = React40.forwardRef(
1125
1134
  borderColor: isChecked ? "var(--point)" : "var(--gray-300)"
1126
1135
  },
1127
1136
  whileTap: { scale: 0.95 },
1128
- transition: { ...tokens.tacSpring.light, backgroundColor: { duration: 0.2 }, borderColor: { duration: 0.2 } },
1137
+ transition: { ...tokens.tacSpring.light, backgroundColor: { duration: OVERLAY_DURATION }, borderColor: { duration: OVERLAY_DURATION } },
1129
1138
  children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
1130
1139
  "svg",
1131
1140
  {
@@ -1225,7 +1234,7 @@ var Radio = React40.forwardRef(
1225
1234
  "span",
1226
1235
  {
1227
1236
  style: {
1228
- transition: "border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms cubic-bezier(0.22, 1, 0.36, 1)"
1237
+ transition: `border-color ${DURATION.moderate} ${EASING}, box-shadow ${DURATION.moderate} ${EASING}, background-color ${DURATION.moderate} ${EASING}`
1229
1238
  },
1230
1239
  className: cn(
1231
1240
  "relative w-5 h-5 rounded-full shrink-0 flex items-center justify-center border-[1.5px] border-solid",
@@ -1275,7 +1284,7 @@ var Switch = React40.forwardRef(
1275
1284
  disabled,
1276
1285
  onClick: handleClick,
1277
1286
  style: {
1278
- transition: "background-color 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1)"
1287
+ transition: `background-color ${DURATION.moderate} ${EASING}, box-shadow ${DURATION.moderate} ${EASING}`
1279
1288
  },
1280
1289
  className: cn(
1281
1290
  "relative w-[var(--switch-width)] h-[var(--switch-height)] rounded-[var(--radius-pill)] cursor-pointer",
@@ -1328,7 +1337,7 @@ var Toggle = React40.forwardRef(
1328
1337
  "aria-pressed": checked,
1329
1338
  onClick: () => onChange?.(!checked),
1330
1339
  style: {
1331
- transition: "background 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1)"
1340
+ transition: `background ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}`
1332
1341
  },
1333
1342
  className: cn(
1334
1343
  "relative w-10 h-10 flex items-center justify-center rounded-[var(--radius-m)] border-none cursor-pointer",
@@ -1459,7 +1468,7 @@ var TabTrigger = React40.forwardRef(
1459
1468
  "aria-controls": `tabpanel-${tabValue}`,
1460
1469
  onClick: () => onChange(tabValue),
1461
1470
  style: {
1462
- transition: "color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1)"
1471
+ transition: `color ${DURATION.normal} ${EASING}, background-color ${DURATION.normal} ${EASING}, border-color ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}, opacity ${DURATION.normal} ${EASING}`
1463
1472
  },
1464
1473
  className: cn(
1465
1474
  "relative cursor-pointer text-center",
@@ -1582,7 +1591,7 @@ var Dialog = React40.forwardRef(
1582
1591
  initial: { opacity: 0 },
1583
1592
  animate: { opacity: 1 },
1584
1593
  exit: { opacity: 0 },
1585
- transition: { duration: 0.2 },
1594
+ transition: { duration: OVERLAY_DURATION },
1586
1595
  className: cn(
1587
1596
  "fixed inset-0 flex items-center justify-center z-[var(--z-modal)]",
1588
1597
  backdrop && "bg-black/30 backdrop-blur-md"
@@ -1597,7 +1606,7 @@ var Dialog = React40.forwardRef(
1597
1606
  layoutId,
1598
1607
  initial: { opacity: 0, scale: 0.97, filter: "blur(4px)" },
1599
1608
  animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
1600
- exit: { opacity: 0, scale: 0.97, filter: "blur(4px)", transition: { duration: 0.15 } },
1609
+ exit: { opacity: 0, scale: 0.97, filter: "blur(4px)", transition: { duration: EXIT_DURATION } },
1601
1610
  transition: { ...tokens.tacSpring.heavy, filter: { duration: 0.25 } },
1602
1611
  role: "dialog",
1603
1612
  "aria-modal": "true",
@@ -1700,7 +1709,7 @@ var Modal = React40.forwardRef(
1700
1709
  initial: { opacity: 0 },
1701
1710
  animate: { opacity: 1 },
1702
1711
  exit: { opacity: 0 },
1703
- transition: { duration: 0.2 },
1712
+ transition: { duration: OVERLAY_DURATION },
1704
1713
  className: cn(
1705
1714
  "fixed inset-0 flex items-center justify-center px-4 z-[var(--z-modal)]",
1706
1715
  backdrop && "bg-black/30 backdrop-blur-md"
@@ -1715,7 +1724,7 @@ var Modal = React40.forwardRef(
1715
1724
  layoutId,
1716
1725
  initial: { opacity: 0, scale: 0.97, filter: "blur(4px)" },
1717
1726
  animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
1718
- exit: { opacity: 0, scale: 0.97, filter: "blur(4px)", transition: { duration: 0.15 } },
1727
+ exit: { opacity: 0, scale: 0.97, filter: "blur(4px)", transition: { duration: EXIT_DURATION } },
1719
1728
  transition: { ...tokens.tacSpring.heavy, filter: { duration: 0.25 } },
1720
1729
  role: "dialog",
1721
1730
  "aria-modal": "true",
@@ -1943,7 +1952,7 @@ var AccordionTrigger = React40.forwardRef(
1943
1952
  focusRing,
1944
1953
  className
1945
1954
  ),
1946
- style: { transition: "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1)" },
1955
+ style: { transition: `background-color ${DURATION.normal} ${EASING}` },
1947
1956
  "aria-expanded": isOpen,
1948
1957
  "aria-controls": `accordion-content-${value}`,
1949
1958
  ...props,
@@ -2039,7 +2048,7 @@ var BreadcrumbSeparator = React40.forwardRef(
2039
2048
  ref,
2040
2049
  role: "presentation",
2041
2050
  className: cn("text-[var(--muted-foreground)] opacity-50", className),
2042
- style: { transition: "opacity 150ms cubic-bezier(0.22, 1, 0.36, 1)" },
2051
+ style: { transition: `opacity ${DURATION.fast} ${EASING}` },
2043
2052
  ...props,
2044
2053
  children: children || /* @__PURE__ */ jsxRuntime.jsx(
2045
2054
  "svg",
@@ -2128,7 +2137,7 @@ var Dropdown = React40.forwardRef(
2128
2137
  ref: mergeRefs(menuRef, ref),
2129
2138
  initial: { opacity: 0, scale: 0.97, y: 4, filter: "blur(4px)" },
2130
2139
  animate: { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" },
2131
- exit: { opacity: 0, scale: 0.97, y: 2, filter: "blur(4px)", transition: { duration: 0.15 } },
2140
+ exit: { opacity: 0, scale: 0.97, y: 2, filter: "blur(4px)", transition: { duration: EXIT_DURATION } },
2132
2141
  transition: tokens.tacSpring.magnetic,
2133
2142
  role: "menu",
2134
2143
  className: cn(
@@ -2216,7 +2225,7 @@ var PaginationItem = React40.forwardRef(
2216
2225
  type: "button",
2217
2226
  "aria-current": active ? "page" : void 0,
2218
2227
  style: {
2219
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
2228
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
2220
2229
  },
2221
2230
  className: cn(
2222
2231
  "w-9 h-9 flex items-center justify-center text-sm rounded-[var(--radius-m)] border-none cursor-pointer",
@@ -2251,7 +2260,7 @@ var PaginationPrevious = React40.forwardRef(
2251
2260
  ref,
2252
2261
  type: "button",
2253
2262
  style: {
2254
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
2263
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
2255
2264
  },
2256
2265
  className: cn(
2257
2266
  "flex items-center gap-1 px-3 h-9 text-sm rounded-[var(--radius-m)] bg-transparent border-none cursor-pointer text-[var(--foreground)] hover:bg-[var(--interactive-hover)] disabled:opacity-50 disabled:pointer-events-none",
@@ -2276,7 +2285,7 @@ var PaginationNext = React40.forwardRef(
2276
2285
  ref,
2277
2286
  type: "button",
2278
2287
  style: {
2279
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
2288
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
2280
2289
  },
2281
2290
  className: cn(
2282
2291
  "flex items-center gap-1 px-3 h-9 text-sm rounded-[var(--radius-m)] bg-transparent border-none cursor-pointer text-[var(--foreground)] hover:bg-[var(--interactive-hover)] disabled:opacity-50 disabled:pointer-events-none",
@@ -2326,7 +2335,7 @@ var TableRow = React40.forwardRef(
2326
2335
  {
2327
2336
  ref,
2328
2337
  style: {
2329
- transition: "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms cubic-bezier(0.22, 1, 0.36, 1)",
2338
+ transition: `background-color ${DURATION.normal} ${EASING}, color ${DURATION.normal} ${EASING}`,
2330
2339
  ...style
2331
2340
  },
2332
2341
  className: cn(
@@ -2441,7 +2450,7 @@ var Snackbar = React40.forwardRef(
2441
2450
  "aria-atomic": "true",
2442
2451
  className: cn(snackbarVariants({ variant }), className),
2443
2452
  initial: { opacity: 0, y: 10, filter: "blur(4px)" },
2444
- animate: closing ? { opacity: 0, y: 6, filter: "blur(2px)", transition: { duration: 0.15 } } : { opacity: 1, y: 0, filter: "blur(0px)" },
2453
+ animate: closing ? { opacity: 0, y: 6, filter: "blur(2px)", transition: { duration: EXIT_DURATION } } : { opacity: 1, y: 0, filter: "blur(0px)" },
2445
2454
  transition: tokens.tacSpring.magnetic,
2446
2455
  onAnimationComplete,
2447
2456
  ...props,
@@ -2600,7 +2609,7 @@ var Chip = React40.forwardRef(
2600
2609
  disabled,
2601
2610
  whileHover: !disabled ? { scale: 1, transition: tokens.tacSpring.light } : void 0,
2602
2611
  whileTap: !disabled ? { scale: 0.98 } : void 0,
2603
- style: { transition: "all 220ms cubic-bezier(0.22, 1, 0.36, 1)" },
2612
+ style: { transition: `all ${DURATION.normal} ${EASING}` },
2604
2613
  className: cn(chipVariants({ variant }), leftIcon && "py-2 px-3", className),
2605
2614
  ...props,
2606
2615
  children: [
@@ -2625,7 +2634,7 @@ var Chip = React40.forwardRef(
2625
2634
  onDismiss();
2626
2635
  }
2627
2636
  },
2628
- style: { transition: "opacity 220ms cubic-bezier(0.22, 1, 0.36, 1)" },
2637
+ style: { transition: `opacity ${DURATION.normal} ${EASING}` },
2629
2638
  className: "flex items-center justify-center w-3.5 h-3.5 shrink-0 bg-transparent border-none cursor-pointer opacity-70 hover:opacity-100",
2630
2639
  "aria-label": "Remove",
2631
2640
  children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2738,7 +2747,7 @@ var Slider = React40.forwardRef(
2738
2747
  onTouchEnd: handleTouchEnd,
2739
2748
  style: {
2740
2749
  background: filled ? `linear-gradient(to right, var(--point) 0%, var(--point) ${percent}%, var(--secondary) ${percent}%, var(--secondary) 100%)` : "var(--secondary)",
2741
- transition: "background 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1)",
2750
+ transition: `background ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}`,
2742
2751
  ...style
2743
2752
  },
2744
2753
  className: cn(
@@ -3014,7 +3023,7 @@ var CodeBlock = React40.forwardRef(
3014
3023
  "aria-live": "polite",
3015
3024
  whileTap: { scale: 0.95 },
3016
3025
  style: {
3017
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
3026
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
3018
3027
  },
3019
3028
  className: cn(
3020
3029
  "text-xs text-[var(--muted-foreground)] bg-transparent border-none cursor-pointer px-2 py-0.5 rounded-[var(--radius-sm)]",
@@ -3027,7 +3036,7 @@ var CodeBlock = React40.forwardRef(
3027
3036
  initial: { opacity: 0, y: 2 },
3028
3037
  animate: { opacity: 1, y: 0 },
3029
3038
  exit: { opacity: 0, y: -2 },
3030
- transition: { duration: 0.15 },
3039
+ transition: { duration: EXIT_DURATION },
3031
3040
  children: copied ? "Copied!" : "Copy"
3032
3041
  },
3033
3042
  copied ? "copied" : "copy"
@@ -3342,7 +3351,7 @@ var Header = React40.forwardRef(
3342
3351
  {
3343
3352
  ref,
3344
3353
  className: cn(headerVariants({ sticky, bordered, blur }), autoHide && hidden && "-translate-y-full", className),
3345
- style: autoHide ? { transition: "transform 350ms cubic-bezier(0.22, 1, 0.36, 1)" } : void 0,
3354
+ style: autoHide ? { transition: `transform ${DURATION.slow} ${EASING}` } : void 0,
3346
3355
  ...props,
3347
3356
  children: [
3348
3357
  hasSidebar && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3419,7 +3428,7 @@ var Sidebar = React40.forwardRef(
3419
3428
  }
3420
3429
  };
3421
3430
  const hasHeader = label || icon || collapsible;
3422
- const sidebarTransition = "width 350ms cubic-bezier(0.22, 1, 0.36, 1), padding 350ms cubic-bezier(0.22, 1, 0.36, 1), background-color 350ms cubic-bezier(0.22, 1, 0.36, 1)";
3431
+ const sidebarTransition = `width ${DURATION.slow} ${EASING}, padding ${DURATION.slow} ${EASING}, background-color ${DURATION.slow} ${EASING}`;
3423
3432
  return /* @__PURE__ */ jsxRuntime.jsx(
3424
3433
  "aside",
3425
3434
  {
@@ -3444,7 +3453,7 @@ var Sidebar = React40.forwardRef(
3444
3453
  collapsible && position === "left" ? "pl-4 pr-12" : collapsible && position === "right" ? "pl-12 pr-4" : "px-4"
3445
3454
  )
3446
3455
  ),
3447
- style: { transition: "all 350ms cubic-bezier(0.22, 1, 0.36, 1)" },
3456
+ style: { transition: `all ${DURATION.slow} ${EASING}` },
3448
3457
  children: [
3449
3458
  icon && /* @__PURE__ */ jsxRuntime.jsx(
3450
3459
  "span",
@@ -3453,7 +3462,7 @@ var Sidebar = React40.forwardRef(
3453
3462
  "flex items-center justify-center shrink-0 text-[var(--foreground)]",
3454
3463
  swapOnCollapse && !collapsed && "w-0 opacity-0 overflow-hidden"
3455
3464
  ),
3456
- style: { transition: "all 350ms cubic-bezier(0.22, 1, 0.36, 1)" },
3465
+ style: { transition: `all ${DURATION.slow} ${EASING}` },
3457
3466
  children: icon
3458
3467
  }
3459
3468
  ),
@@ -3464,7 +3473,7 @@ var Sidebar = React40.forwardRef(
3464
3473
  "text-sm font-medium text-[var(--foreground)] truncate overflow-hidden",
3465
3474
  collapsed ? "opacity-0 w-0" : "opacity-100 flex-1"
3466
3475
  ),
3467
- style: { transition: "all 350ms cubic-bezier(0.22, 1, 0.36, 1)" },
3476
+ style: { transition: `all ${DURATION.slow} ${EASING}` },
3468
3477
  children: label
3469
3478
  }
3470
3479
  )
@@ -3478,7 +3487,7 @@ var Sidebar = React40.forwardRef(
3478
3487
  style: {
3479
3488
  top: collapsed ? "calc(100% - 22px)" : "50%",
3480
3489
  left: collapsed ? "50%" : position === "left" ? "calc(100% - 24px)" : "24px",
3481
- transition: "all 350ms cubic-bezier(0.22, 1, 0.36, 1)"
3490
+ transition: `all ${DURATION.slow} ${EASING}`
3482
3491
  },
3483
3492
  children: /* @__PURE__ */ jsxRuntime.jsx(CollapseToggle, { collapsed, position, onClick: handleToggle })
3484
3493
  }
@@ -3510,7 +3519,7 @@ var SidebarGroup = React40.forwardRef(
3510
3519
  const showChildrenWhenCollapsed = collapseDisplay === "children";
3511
3520
  const isOpen = collapsed ? showChildrenWhenCollapsed : !groupCollapsible || open;
3512
3521
  const showHeader = collapsed ? !showChildrenWhenCollapsed : true;
3513
- const groupTransition = "all 200ms cubic-bezier(0.22, 1, 0.36, 1)";
3522
+ const groupTransition = `all ${DURATION.moderate} ${EASING}`;
3514
3523
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col py-1.5", className), ...props, children: [
3515
3524
  showHeader && (label || icon) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3516
3525
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3556,7 +3565,7 @@ var SidebarGroup = React40.forwardRef(
3556
3565
  viewBox: "0 0 12 12",
3557
3566
  fill: "none",
3558
3567
  className: cn("shrink-0", isOpen && "rotate-180"),
3559
- style: { transition: "transform 200ms cubic-bezier(0.22, 1, 0.36, 1)" },
3568
+ style: { transition: `transform ${DURATION.moderate} ${EASING}` },
3560
3569
  children: /* @__PURE__ */ jsxRuntime.jsx(
3561
3570
  "path",
3562
3571
  {
@@ -3585,7 +3594,7 @@ var SidebarGroup = React40.forwardRef(
3585
3594
  {
3586
3595
  className: cn("grid", isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"),
3587
3596
  style: {
3588
- transition: "grid-template-rows 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1)"
3597
+ transition: `grid-template-rows ${DURATION.moderate} ${EASING}, opacity ${DURATION.moderate} ${EASING}`
3589
3598
  },
3590
3599
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.LayoutGroup, { id: groupId, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-1 px-2 pt-1", groupCollapsible && !collapsed && "ml-2"), children }) }) })
3591
3600
  }
@@ -3604,7 +3613,7 @@ var SidebarItem = React40.forwardRef(
3604
3613
  {
3605
3614
  ref,
3606
3615
  style: {
3607
- transition: "color 220ms cubic-bezier(0.22, 1, 0.36, 1)"
3616
+ transition: `color ${DURATION.normal} ${EASING}`
3608
3617
  },
3609
3618
  className: cn(
3610
3619
  "relative flex items-center rounded-[var(--radius-m)] text-sm cursor-pointer overflow-hidden",
@@ -3641,7 +3650,7 @@ var SidebarItem = React40.forwardRef(
3641
3650
  collapsed ? "w-0 opacity-0 overflow-hidden" : "flex-1 opacity-100"
3642
3651
  ),
3643
3652
  style: {
3644
- transition: "opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), width 220ms cubic-bezier(0.22, 1, 0.36, 1)"
3653
+ transition: `opacity ${DURATION.normal} ${EASING}, width ${DURATION.normal} ${EASING}`
3645
3654
  },
3646
3655
  children
3647
3656
  }
@@ -3665,7 +3674,7 @@ var SidebarContent = React40.forwardRef(
3665
3674
  className
3666
3675
  ),
3667
3676
  style: {
3668
- transition: "max-height 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), padding 200ms cubic-bezier(0.22, 1, 0.36, 1)"
3677
+ transition: `max-height ${DURATION.moderate} ${EASING}, opacity ${DURATION.moderate} ${EASING}, padding ${DURATION.moderate} ${EASING}`
3669
3678
  },
3670
3679
  ...props
3671
3680
  }
@@ -3686,7 +3695,7 @@ var SidebarFooter = React40.forwardRef(
3686
3695
  className
3687
3696
  ),
3688
3697
  style: {
3689
- transition: "max-height 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), padding 200ms cubic-bezier(0.22, 1, 0.36, 1)"
3698
+ transition: `max-height ${DURATION.moderate} ${EASING}, opacity ${DURATION.moderate} ${EASING}, padding ${DURATION.moderate} ${EASING}`
3690
3699
  },
3691
3700
  ...props
3692
3701
  }
@@ -3829,7 +3838,7 @@ var Drawer = React40.forwardRef(
3829
3838
  initial: { opacity: 0 },
3830
3839
  animate: { opacity: 1 },
3831
3840
  exit: { opacity: 0 },
3832
- transition: { duration: 0.2 },
3841
+ transition: { duration: OVERLAY_DURATION },
3833
3842
  className: cn("fixed inset-0 z-[var(--z-modal)]", backdrop && "bg-black/30 backdrop-blur-md"),
3834
3843
  onClick: (e) => {
3835
3844
  if (e.target === e.currentTarget) onClose();
@@ -4584,7 +4593,7 @@ var ToastItem = React40.forwardRef(
4584
4593
  className: cn(toastVariants({ variant }), className),
4585
4594
  initial: { opacity: 0, y: 10, filter: "blur(4px)" },
4586
4595
  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
4587
- exit: { opacity: 0, y: 6, filter: "blur(2px)", transition: { duration: 0.15 } },
4596
+ exit: { opacity: 0, y: 6, filter: "blur(2px)", transition: { duration: EXIT_DURATION } },
4588
4597
  transition: tokens.tacSpring.magnetic,
4589
4598
  ...props,
4590
4599
  children: [
@@ -5423,7 +5432,7 @@ var SegmentController = React40.forwardRef((props, ref) => {
5423
5432
  handleSingleSelect(option.value);
5424
5433
  }
5425
5434
  },
5426
- style: { transition: "color 220ms cubic-bezier(0.22, 1, 0.36, 1)" },
5435
+ style: { transition: `color ${DURATION.normal} ${EASING}` },
5427
5436
  className: cn(
5428
5437
  "relative flex items-center justify-center h-full rounded-[calc(var(--radius-m)-2px)] border-none cursor-pointer bg-transparent font-medium whitespace-nowrap",
5429
5438
  focusRing,
@@ -5566,8 +5575,8 @@ function defaultFormatDateByMode(date, mode) {
5566
5575
  }
5567
5576
  return `${y}-${m}-${d}`;
5568
5577
  }
5569
- var btnTransition = "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1)";
5570
- var cellTransition = "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms cubic-bezier(0.22, 1, 0.36, 1)";
5578
+ var btnTransition = `background-color ${DURATION.normal} ${EASING}`;
5579
+ var cellTransition = `background-color ${DURATION.normal} ${EASING}, color ${DURATION.normal} ${EASING}`;
5571
5580
  function clampNumber(val, min, max) {
5572
5581
  return Math.max(min, Math.min(max, val));
5573
5582
  }
@@ -6122,7 +6131,7 @@ function normalizeHex(hex) {
6122
6131
  }
6123
6132
  return `#${h}`.toUpperCase();
6124
6133
  }
6125
- var btnTransition2 = "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1)";
6134
+ var btnTransition2 = `background-color ${DURATION.normal} ${EASING}, opacity ${DURATION.normal} ${EASING}`;
6126
6135
  var DEFAULT_COLORS = [
6127
6136
  "#EF4444",
6128
6137
  "#DC2626",
@@ -6608,7 +6617,7 @@ var ColorPicker = React40.forwardRef(
6608
6617
  initial: { height: 0, opacity: 0 },
6609
6618
  animate: { height: "auto", opacity: 1 },
6610
6619
  exit: { height: 0, opacity: 0 },
6611
- transition: { ...tokens.tacSpring.magnetic, opacity: { duration: 0.15 } },
6620
+ transition: { ...tokens.tacSpring.magnetic, opacity: { duration: EXIT_DURATION } },
6612
6621
  style: { overflow: "hidden" },
6613
6622
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1.5", children: colors.map((color) => {
6614
6623
  const normalized = normalizeHex(color);
@@ -6621,7 +6630,7 @@ var ColorPicker = React40.forwardRef(
6621
6630
  onClick: () => handleSwatchClick(color),
6622
6631
  style: {
6623
6632
  backgroundColor: color,
6624
- transition: "transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1)"
6633
+ transition: `transform ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}`
6625
6634
  },
6626
6635
  className: cn(
6627
6636
  "w-8 h-8 rounded-[var(--radius-sm)] border-none cursor-pointer",
package/dist/index.mjs CHANGED
@@ -79,6 +79,15 @@ function useTacTheme() {
79
79
  function cn(...inputs) {
80
80
  return twMerge(clsx(inputs));
81
81
  }
82
+ var EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
83
+ var DURATION = {
84
+ fast: "150ms",
85
+ moderate: "200ms",
86
+ normal: "220ms",
87
+ slow: "350ms"
88
+ };
89
+ var EXIT_DURATION = 0.15;
90
+ var OVERLAY_DURATION = 0.2;
82
91
  var dropdownMotionVariants = {
83
92
  hidden: {
84
93
  opacity: 0,
@@ -105,7 +114,7 @@ var panelVariants = {
105
114
  opacity: 0,
106
115
  scale: 0.97,
107
116
  filter: "blur(4px)",
108
- transition: { duration: 0.15 }
117
+ transition: { duration: EXIT_DURATION }
109
118
  }
110
119
  };
111
120
  var fadeVariants = {
@@ -120,12 +129,12 @@ var fadeVariants = {
120
129
  opacity: 0,
121
130
  y: -6,
122
131
  filter: "blur(4px)",
123
- transition: { duration: 0.15 }
132
+ transition: { duration: EXIT_DURATION }
124
133
  }
125
134
  };
126
135
  var exitVariants = {
127
136
  initial: { scale: 1, opacity: 1 },
128
- exit: { scale: 0.85, opacity: 0, transition: { duration: 0.15 } }
137
+ exit: { scale: 0.85, opacity: 0, transition: { duration: EXIT_DURATION } }
129
138
  };
130
139
  var pageEntrance = {
131
140
  initial: { opacity: 0, y: 8 },
@@ -136,7 +145,7 @@ var pageEntrance = {
136
145
  var focusRing = "focus-visible:outline-none focus-visible:shadow-[var(--focus-glow)]";
137
146
  var peerFocusRing = "peer-focus-visible:outline-none peer-focus-visible:shadow-[var(--point-glow)]";
138
147
  var focusRingPoint = "outline-none focus-visible:shadow-[var(--point-glow)]";
139
- var inputTransition = "border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1)";
148
+ var inputTransition = `border-color ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}, color ${DURATION.normal} ${EASING}, background-color ${DURATION.normal} ${EASING}`;
140
149
  var buttonVariants = cva(
141
150
  `relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium cursor-pointer border-none ${focusRing} disabled:opacity-50 disabled:pointer-events-none`,
142
151
  {
@@ -181,7 +190,7 @@ var Button = forwardRef(
181
190
  ref,
182
191
  className: cn(buttonVariants({ variant, size, iconOnly }), className),
183
192
  style: {
184
- transition: "color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1)"
193
+ transition: `color ${DURATION.normal} ${EASING}, background-color ${DURATION.normal} ${EASING}, border-color ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}`
185
194
  },
186
195
  disabled,
187
196
  whileHover: whileHoverProps,
@@ -575,7 +584,7 @@ var Select = forwardRef(
575
584
  if (e.key === "Escape") handleClose();
576
585
  },
577
586
  style: {
578
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
587
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
579
588
  },
580
589
  className: cn(
581
590
  "px-3 py-2.5 text-sm cursor-pointer",
@@ -752,7 +761,7 @@ var Combobox = forwardRef(
752
761
  }
753
762
  },
754
763
  style: {
755
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
764
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
756
765
  },
757
766
  className: cn(
758
767
  "px-3 py-2.5 text-sm cursor-pointer",
@@ -818,7 +827,7 @@ var Card = forwardRef(
818
827
  ref,
819
828
  ...props,
820
829
  style: {
821
- transition: "box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms cubic-bezier(0.22, 1, 0.36, 1)",
830
+ transition: `box-shadow ${DURATION.moderate} ${EASING}, border-color ${DURATION.moderate} ${EASING}, background-color ${DURATION.moderate} ${EASING}`,
822
831
  ...style
823
832
  },
824
833
  className: cn(cardVariants({ variant }), className),
@@ -939,7 +948,7 @@ var MorphingCard = forwardRef(
939
948
  }
940
949
  },
941
950
  style: {
942
- transition: "box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1)"
951
+ transition: `box-shadow ${DURATION.normal} ${EASING}, border-color ${DURATION.normal} ${EASING}, background-color ${DURATION.normal} ${EASING}`
943
952
  },
944
953
  className: cn(
945
954
  glassClasses,
@@ -958,7 +967,7 @@ var MorphingCard = forwardRef(
958
967
  initial: { opacity: 0 },
959
968
  animate: { opacity: 1 },
960
969
  exit: { opacity: 0 },
961
- transition: { duration: 0.2 },
970
+ transition: { duration: OVERLAY_DURATION },
962
971
  className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[8px]",
963
972
  onClick: handleOverlayClick,
964
973
  children: /* @__PURE__ */ jsxs(
@@ -980,7 +989,7 @@ var MorphingCard = forwardRef(
980
989
  "aria-label": "Close",
981
990
  onClick: () => setExpanded(false),
982
991
  style: {
983
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
992
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
984
993
  },
985
994
  className: cn(
986
995
  "absolute top-3 right-3 flex items-center justify-center w-7 h-7 rounded-full bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--secondary)] cursor-pointer border-none",
@@ -1120,7 +1129,7 @@ var Checkbox = forwardRef(
1120
1129
  borderColor: isChecked ? "var(--point)" : "var(--gray-300)"
1121
1130
  },
1122
1131
  whileTap: { scale: 0.95 },
1123
- transition: { ...tacSpring.light, backgroundColor: { duration: 0.2 }, borderColor: { duration: 0.2 } },
1132
+ transition: { ...tacSpring.light, backgroundColor: { duration: OVERLAY_DURATION }, borderColor: { duration: OVERLAY_DURATION } },
1124
1133
  children: indeterminate ? /* @__PURE__ */ jsx(
1125
1134
  "svg",
1126
1135
  {
@@ -1220,7 +1229,7 @@ var Radio = forwardRef(
1220
1229
  "span",
1221
1230
  {
1222
1231
  style: {
1223
- transition: "border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms cubic-bezier(0.22, 1, 0.36, 1)"
1232
+ transition: `border-color ${DURATION.moderate} ${EASING}, box-shadow ${DURATION.moderate} ${EASING}, background-color ${DURATION.moderate} ${EASING}`
1224
1233
  },
1225
1234
  className: cn(
1226
1235
  "relative w-5 h-5 rounded-full shrink-0 flex items-center justify-center border-[1.5px] border-solid",
@@ -1270,7 +1279,7 @@ var Switch = forwardRef(
1270
1279
  disabled,
1271
1280
  onClick: handleClick,
1272
1281
  style: {
1273
- transition: "background-color 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1)"
1282
+ transition: `background-color ${DURATION.moderate} ${EASING}, box-shadow ${DURATION.moderate} ${EASING}`
1274
1283
  },
1275
1284
  className: cn(
1276
1285
  "relative w-[var(--switch-width)] h-[var(--switch-height)] rounded-[var(--radius-pill)] cursor-pointer",
@@ -1323,7 +1332,7 @@ var Toggle = forwardRef(
1323
1332
  "aria-pressed": checked,
1324
1333
  onClick: () => onChange?.(!checked),
1325
1334
  style: {
1326
- transition: "background 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1)"
1335
+ transition: `background ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}`
1327
1336
  },
1328
1337
  className: cn(
1329
1338
  "relative w-10 h-10 flex items-center justify-center rounded-[var(--radius-m)] border-none cursor-pointer",
@@ -1454,7 +1463,7 @@ var TabTrigger = forwardRef(
1454
1463
  "aria-controls": `tabpanel-${tabValue}`,
1455
1464
  onClick: () => onChange(tabValue),
1456
1465
  style: {
1457
- transition: "color 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1)"
1466
+ transition: `color ${DURATION.normal} ${EASING}, background-color ${DURATION.normal} ${EASING}, border-color ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}, opacity ${DURATION.normal} ${EASING}`
1458
1467
  },
1459
1468
  className: cn(
1460
1469
  "relative cursor-pointer text-center",
@@ -1577,7 +1586,7 @@ var Dialog = forwardRef(
1577
1586
  initial: { opacity: 0 },
1578
1587
  animate: { opacity: 1 },
1579
1588
  exit: { opacity: 0 },
1580
- transition: { duration: 0.2 },
1589
+ transition: { duration: OVERLAY_DURATION },
1581
1590
  className: cn(
1582
1591
  "fixed inset-0 flex items-center justify-center z-[var(--z-modal)]",
1583
1592
  backdrop && "bg-black/30 backdrop-blur-md"
@@ -1592,7 +1601,7 @@ var Dialog = forwardRef(
1592
1601
  layoutId,
1593
1602
  initial: { opacity: 0, scale: 0.97, filter: "blur(4px)" },
1594
1603
  animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
1595
- exit: { opacity: 0, scale: 0.97, filter: "blur(4px)", transition: { duration: 0.15 } },
1604
+ exit: { opacity: 0, scale: 0.97, filter: "blur(4px)", transition: { duration: EXIT_DURATION } },
1596
1605
  transition: { ...tacSpring.heavy, filter: { duration: 0.25 } },
1597
1606
  role: "dialog",
1598
1607
  "aria-modal": "true",
@@ -1695,7 +1704,7 @@ var Modal = forwardRef(
1695
1704
  initial: { opacity: 0 },
1696
1705
  animate: { opacity: 1 },
1697
1706
  exit: { opacity: 0 },
1698
- transition: { duration: 0.2 },
1707
+ transition: { duration: OVERLAY_DURATION },
1699
1708
  className: cn(
1700
1709
  "fixed inset-0 flex items-center justify-center px-4 z-[var(--z-modal)]",
1701
1710
  backdrop && "bg-black/30 backdrop-blur-md"
@@ -1710,7 +1719,7 @@ var Modal = forwardRef(
1710
1719
  layoutId,
1711
1720
  initial: { opacity: 0, scale: 0.97, filter: "blur(4px)" },
1712
1721
  animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
1713
- exit: { opacity: 0, scale: 0.97, filter: "blur(4px)", transition: { duration: 0.15 } },
1722
+ exit: { opacity: 0, scale: 0.97, filter: "blur(4px)", transition: { duration: EXIT_DURATION } },
1714
1723
  transition: { ...tacSpring.heavy, filter: { duration: 0.25 } },
1715
1724
  role: "dialog",
1716
1725
  "aria-modal": "true",
@@ -1938,7 +1947,7 @@ var AccordionTrigger = forwardRef(
1938
1947
  focusRing,
1939
1948
  className
1940
1949
  ),
1941
- style: { transition: "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1)" },
1950
+ style: { transition: `background-color ${DURATION.normal} ${EASING}` },
1942
1951
  "aria-expanded": isOpen,
1943
1952
  "aria-controls": `accordion-content-${value}`,
1944
1953
  ...props,
@@ -2034,7 +2043,7 @@ var BreadcrumbSeparator = forwardRef(
2034
2043
  ref,
2035
2044
  role: "presentation",
2036
2045
  className: cn("text-[var(--muted-foreground)] opacity-50", className),
2037
- style: { transition: "opacity 150ms cubic-bezier(0.22, 1, 0.36, 1)" },
2046
+ style: { transition: `opacity ${DURATION.fast} ${EASING}` },
2038
2047
  ...props,
2039
2048
  children: children || /* @__PURE__ */ jsx(
2040
2049
  "svg",
@@ -2123,7 +2132,7 @@ var Dropdown = forwardRef(
2123
2132
  ref: mergeRefs(menuRef, ref),
2124
2133
  initial: { opacity: 0, scale: 0.97, y: 4, filter: "blur(4px)" },
2125
2134
  animate: { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" },
2126
- exit: { opacity: 0, scale: 0.97, y: 2, filter: "blur(4px)", transition: { duration: 0.15 } },
2135
+ exit: { opacity: 0, scale: 0.97, y: 2, filter: "blur(4px)", transition: { duration: EXIT_DURATION } },
2127
2136
  transition: tacSpring.magnetic,
2128
2137
  role: "menu",
2129
2138
  className: cn(
@@ -2211,7 +2220,7 @@ var PaginationItem = forwardRef(
2211
2220
  type: "button",
2212
2221
  "aria-current": active ? "page" : void 0,
2213
2222
  style: {
2214
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
2223
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
2215
2224
  },
2216
2225
  className: cn(
2217
2226
  "w-9 h-9 flex items-center justify-center text-sm rounded-[var(--radius-m)] border-none cursor-pointer",
@@ -2246,7 +2255,7 @@ var PaginationPrevious = forwardRef(
2246
2255
  ref,
2247
2256
  type: "button",
2248
2257
  style: {
2249
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
2258
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
2250
2259
  },
2251
2260
  className: cn(
2252
2261
  "flex items-center gap-1 px-3 h-9 text-sm rounded-[var(--radius-m)] bg-transparent border-none cursor-pointer text-[var(--foreground)] hover:bg-[var(--interactive-hover)] disabled:opacity-50 disabled:pointer-events-none",
@@ -2271,7 +2280,7 @@ var PaginationNext = forwardRef(
2271
2280
  ref,
2272
2281
  type: "button",
2273
2282
  style: {
2274
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
2283
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
2275
2284
  },
2276
2285
  className: cn(
2277
2286
  "flex items-center gap-1 px-3 h-9 text-sm rounded-[var(--radius-m)] bg-transparent border-none cursor-pointer text-[var(--foreground)] hover:bg-[var(--interactive-hover)] disabled:opacity-50 disabled:pointer-events-none",
@@ -2321,7 +2330,7 @@ var TableRow = forwardRef(
2321
2330
  {
2322
2331
  ref,
2323
2332
  style: {
2324
- transition: "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms cubic-bezier(0.22, 1, 0.36, 1)",
2333
+ transition: `background-color ${DURATION.normal} ${EASING}, color ${DURATION.normal} ${EASING}`,
2325
2334
  ...style
2326
2335
  },
2327
2336
  className: cn(
@@ -2436,7 +2445,7 @@ var Snackbar = forwardRef(
2436
2445
  "aria-atomic": "true",
2437
2446
  className: cn(snackbarVariants({ variant }), className),
2438
2447
  initial: { opacity: 0, y: 10, filter: "blur(4px)" },
2439
- animate: closing ? { opacity: 0, y: 6, filter: "blur(2px)", transition: { duration: 0.15 } } : { opacity: 1, y: 0, filter: "blur(0px)" },
2448
+ animate: closing ? { opacity: 0, y: 6, filter: "blur(2px)", transition: { duration: EXIT_DURATION } } : { opacity: 1, y: 0, filter: "blur(0px)" },
2440
2449
  transition: tacSpring.magnetic,
2441
2450
  onAnimationComplete,
2442
2451
  ...props,
@@ -2595,7 +2604,7 @@ var Chip = forwardRef(
2595
2604
  disabled,
2596
2605
  whileHover: !disabled ? { scale: 1, transition: tacSpring.light } : void 0,
2597
2606
  whileTap: !disabled ? { scale: 0.98 } : void 0,
2598
- style: { transition: "all 220ms cubic-bezier(0.22, 1, 0.36, 1)" },
2607
+ style: { transition: `all ${DURATION.normal} ${EASING}` },
2599
2608
  className: cn(chipVariants({ variant }), leftIcon && "py-2 px-3", className),
2600
2609
  ...props,
2601
2610
  children: [
@@ -2620,7 +2629,7 @@ var Chip = forwardRef(
2620
2629
  onDismiss();
2621
2630
  }
2622
2631
  },
2623
- style: { transition: "opacity 220ms cubic-bezier(0.22, 1, 0.36, 1)" },
2632
+ style: { transition: `opacity ${DURATION.normal} ${EASING}` },
2624
2633
  className: "flex items-center justify-center w-3.5 h-3.5 shrink-0 bg-transparent border-none cursor-pointer opacity-70 hover:opacity-100",
2625
2634
  "aria-label": "Remove",
2626
2635
  children: /* @__PURE__ */ jsxs(
@@ -2733,7 +2742,7 @@ var Slider = forwardRef(
2733
2742
  onTouchEnd: handleTouchEnd,
2734
2743
  style: {
2735
2744
  background: filled ? `linear-gradient(to right, var(--point) 0%, var(--point) ${percent}%, var(--secondary) ${percent}%, var(--secondary) 100%)` : "var(--secondary)",
2736
- transition: "background 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1)",
2745
+ transition: `background ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}`,
2737
2746
  ...style
2738
2747
  },
2739
2748
  className: cn(
@@ -3009,7 +3018,7 @@ var CodeBlock = forwardRef(
3009
3018
  "aria-live": "polite",
3010
3019
  whileTap: { scale: 0.95 },
3011
3020
  style: {
3012
- transition: "color 150ms cubic-bezier(0.22, 1, 0.36, 1), background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)"
3021
+ transition: `color ${DURATION.fast} ${EASING}, background-color ${DURATION.fast} ${EASING}`
3013
3022
  },
3014
3023
  className: cn(
3015
3024
  "text-xs text-[var(--muted-foreground)] bg-transparent border-none cursor-pointer px-2 py-0.5 rounded-[var(--radius-sm)]",
@@ -3022,7 +3031,7 @@ var CodeBlock = forwardRef(
3022
3031
  initial: { opacity: 0, y: 2 },
3023
3032
  animate: { opacity: 1, y: 0 },
3024
3033
  exit: { opacity: 0, y: -2 },
3025
- transition: { duration: 0.15 },
3034
+ transition: { duration: EXIT_DURATION },
3026
3035
  children: copied ? "Copied!" : "Copy"
3027
3036
  },
3028
3037
  copied ? "copied" : "copy"
@@ -3337,7 +3346,7 @@ var Header = forwardRef(
3337
3346
  {
3338
3347
  ref,
3339
3348
  className: cn(headerVariants({ sticky, bordered, blur }), autoHide && hidden && "-translate-y-full", className),
3340
- style: autoHide ? { transition: "transform 350ms cubic-bezier(0.22, 1, 0.36, 1)" } : void 0,
3349
+ style: autoHide ? { transition: `transform ${DURATION.slow} ${EASING}` } : void 0,
3341
3350
  ...props,
3342
3351
  children: [
3343
3352
  hasSidebar && /* @__PURE__ */ jsx(
@@ -3414,7 +3423,7 @@ var Sidebar = forwardRef(
3414
3423
  }
3415
3424
  };
3416
3425
  const hasHeader = label || icon || collapsible;
3417
- const sidebarTransition = "width 350ms cubic-bezier(0.22, 1, 0.36, 1), padding 350ms cubic-bezier(0.22, 1, 0.36, 1), background-color 350ms cubic-bezier(0.22, 1, 0.36, 1)";
3426
+ const sidebarTransition = `width ${DURATION.slow} ${EASING}, padding ${DURATION.slow} ${EASING}, background-color ${DURATION.slow} ${EASING}`;
3418
3427
  return /* @__PURE__ */ jsx(
3419
3428
  "aside",
3420
3429
  {
@@ -3439,7 +3448,7 @@ var Sidebar = forwardRef(
3439
3448
  collapsible && position === "left" ? "pl-4 pr-12" : collapsible && position === "right" ? "pl-12 pr-4" : "px-4"
3440
3449
  )
3441
3450
  ),
3442
- style: { transition: "all 350ms cubic-bezier(0.22, 1, 0.36, 1)" },
3451
+ style: { transition: `all ${DURATION.slow} ${EASING}` },
3443
3452
  children: [
3444
3453
  icon && /* @__PURE__ */ jsx(
3445
3454
  "span",
@@ -3448,7 +3457,7 @@ var Sidebar = forwardRef(
3448
3457
  "flex items-center justify-center shrink-0 text-[var(--foreground)]",
3449
3458
  swapOnCollapse && !collapsed && "w-0 opacity-0 overflow-hidden"
3450
3459
  ),
3451
- style: { transition: "all 350ms cubic-bezier(0.22, 1, 0.36, 1)" },
3460
+ style: { transition: `all ${DURATION.slow} ${EASING}` },
3452
3461
  children: icon
3453
3462
  }
3454
3463
  ),
@@ -3459,7 +3468,7 @@ var Sidebar = forwardRef(
3459
3468
  "text-sm font-medium text-[var(--foreground)] truncate overflow-hidden",
3460
3469
  collapsed ? "opacity-0 w-0" : "opacity-100 flex-1"
3461
3470
  ),
3462
- style: { transition: "all 350ms cubic-bezier(0.22, 1, 0.36, 1)" },
3471
+ style: { transition: `all ${DURATION.slow} ${EASING}` },
3463
3472
  children: label
3464
3473
  }
3465
3474
  )
@@ -3473,7 +3482,7 @@ var Sidebar = forwardRef(
3473
3482
  style: {
3474
3483
  top: collapsed ? "calc(100% - 22px)" : "50%",
3475
3484
  left: collapsed ? "50%" : position === "left" ? "calc(100% - 24px)" : "24px",
3476
- transition: "all 350ms cubic-bezier(0.22, 1, 0.36, 1)"
3485
+ transition: `all ${DURATION.slow} ${EASING}`
3477
3486
  },
3478
3487
  children: /* @__PURE__ */ jsx(CollapseToggle, { collapsed, position, onClick: handleToggle })
3479
3488
  }
@@ -3505,7 +3514,7 @@ var SidebarGroup = forwardRef(
3505
3514
  const showChildrenWhenCollapsed = collapseDisplay === "children";
3506
3515
  const isOpen = collapsed ? showChildrenWhenCollapsed : !groupCollapsible || open;
3507
3516
  const showHeader = collapsed ? !showChildrenWhenCollapsed : true;
3508
- const groupTransition = "all 200ms cubic-bezier(0.22, 1, 0.36, 1)";
3517
+ const groupTransition = `all ${DURATION.moderate} ${EASING}`;
3509
3518
  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col py-1.5", className), ...props, children: [
3510
3519
  showHeader && (label || icon) && /* @__PURE__ */ jsxs(Fragment, { children: [
3511
3520
  /* @__PURE__ */ jsxs(
@@ -3551,7 +3560,7 @@ var SidebarGroup = forwardRef(
3551
3560
  viewBox: "0 0 12 12",
3552
3561
  fill: "none",
3553
3562
  className: cn("shrink-0", isOpen && "rotate-180"),
3554
- style: { transition: "transform 200ms cubic-bezier(0.22, 1, 0.36, 1)" },
3563
+ style: { transition: `transform ${DURATION.moderate} ${EASING}` },
3555
3564
  children: /* @__PURE__ */ jsx(
3556
3565
  "path",
3557
3566
  {
@@ -3580,7 +3589,7 @@ var SidebarGroup = forwardRef(
3580
3589
  {
3581
3590
  className: cn("grid", isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"),
3582
3591
  style: {
3583
- transition: "grid-template-rows 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1)"
3592
+ transition: `grid-template-rows ${DURATION.moderate} ${EASING}, opacity ${DURATION.moderate} ${EASING}`
3584
3593
  },
3585
3594
  children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ jsx(LayoutGroup, { id: groupId, children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1 px-2 pt-1", groupCollapsible && !collapsed && "ml-2"), children }) }) })
3586
3595
  }
@@ -3599,7 +3608,7 @@ var SidebarItem = forwardRef(
3599
3608
  {
3600
3609
  ref,
3601
3610
  style: {
3602
- transition: "color 220ms cubic-bezier(0.22, 1, 0.36, 1)"
3611
+ transition: `color ${DURATION.normal} ${EASING}`
3603
3612
  },
3604
3613
  className: cn(
3605
3614
  "relative flex items-center rounded-[var(--radius-m)] text-sm cursor-pointer overflow-hidden",
@@ -3636,7 +3645,7 @@ var SidebarItem = forwardRef(
3636
3645
  collapsed ? "w-0 opacity-0 overflow-hidden" : "flex-1 opacity-100"
3637
3646
  ),
3638
3647
  style: {
3639
- transition: "opacity 220ms cubic-bezier(0.22, 1, 0.36, 1), width 220ms cubic-bezier(0.22, 1, 0.36, 1)"
3648
+ transition: `opacity ${DURATION.normal} ${EASING}, width ${DURATION.normal} ${EASING}`
3640
3649
  },
3641
3650
  children
3642
3651
  }
@@ -3660,7 +3669,7 @@ var SidebarContent = forwardRef(
3660
3669
  className
3661
3670
  ),
3662
3671
  style: {
3663
- transition: "max-height 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), padding 200ms cubic-bezier(0.22, 1, 0.36, 1)"
3672
+ transition: `max-height ${DURATION.moderate} ${EASING}, opacity ${DURATION.moderate} ${EASING}, padding ${DURATION.moderate} ${EASING}`
3664
3673
  },
3665
3674
  ...props
3666
3675
  }
@@ -3681,7 +3690,7 @@ var SidebarFooter = forwardRef(
3681
3690
  className
3682
3691
  ),
3683
3692
  style: {
3684
- transition: "max-height 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), padding 200ms cubic-bezier(0.22, 1, 0.36, 1)"
3693
+ transition: `max-height ${DURATION.moderate} ${EASING}, opacity ${DURATION.moderate} ${EASING}, padding ${DURATION.moderate} ${EASING}`
3685
3694
  },
3686
3695
  ...props
3687
3696
  }
@@ -3824,7 +3833,7 @@ var Drawer = forwardRef(
3824
3833
  initial: { opacity: 0 },
3825
3834
  animate: { opacity: 1 },
3826
3835
  exit: { opacity: 0 },
3827
- transition: { duration: 0.2 },
3836
+ transition: { duration: OVERLAY_DURATION },
3828
3837
  className: cn("fixed inset-0 z-[var(--z-modal)]", backdrop && "bg-black/30 backdrop-blur-md"),
3829
3838
  onClick: (e) => {
3830
3839
  if (e.target === e.currentTarget) onClose();
@@ -4579,7 +4588,7 @@ var ToastItem = forwardRef(
4579
4588
  className: cn(toastVariants({ variant }), className),
4580
4589
  initial: { opacity: 0, y: 10, filter: "blur(4px)" },
4581
4590
  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
4582
- exit: { opacity: 0, y: 6, filter: "blur(2px)", transition: { duration: 0.15 } },
4591
+ exit: { opacity: 0, y: 6, filter: "blur(2px)", transition: { duration: EXIT_DURATION } },
4583
4592
  transition: tacSpring.magnetic,
4584
4593
  ...props,
4585
4594
  children: [
@@ -5418,7 +5427,7 @@ var SegmentController = forwardRef((props, ref) => {
5418
5427
  handleSingleSelect(option.value);
5419
5428
  }
5420
5429
  },
5421
- style: { transition: "color 220ms cubic-bezier(0.22, 1, 0.36, 1)" },
5430
+ style: { transition: `color ${DURATION.normal} ${EASING}` },
5422
5431
  className: cn(
5423
5432
  "relative flex items-center justify-center h-full rounded-[calc(var(--radius-m)-2px)] border-none cursor-pointer bg-transparent font-medium whitespace-nowrap",
5424
5433
  focusRing,
@@ -5561,8 +5570,8 @@ function defaultFormatDateByMode(date, mode) {
5561
5570
  }
5562
5571
  return `${y}-${m}-${d}`;
5563
5572
  }
5564
- var btnTransition = "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1)";
5565
- var cellTransition = "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms cubic-bezier(0.22, 1, 0.36, 1)";
5573
+ var btnTransition = `background-color ${DURATION.normal} ${EASING}`;
5574
+ var cellTransition = `background-color ${DURATION.normal} ${EASING}, color ${DURATION.normal} ${EASING}`;
5566
5575
  function clampNumber(val, min, max) {
5567
5576
  return Math.max(min, Math.min(max, val));
5568
5577
  }
@@ -6117,7 +6126,7 @@ function normalizeHex(hex) {
6117
6126
  }
6118
6127
  return `#${h}`.toUpperCase();
6119
6128
  }
6120
- var btnTransition2 = "background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms cubic-bezier(0.22, 1, 0.36, 1)";
6129
+ var btnTransition2 = `background-color ${DURATION.normal} ${EASING}, opacity ${DURATION.normal} ${EASING}`;
6121
6130
  var DEFAULT_COLORS = [
6122
6131
  "#EF4444",
6123
6132
  "#DC2626",
@@ -6603,7 +6612,7 @@ var ColorPicker = forwardRef(
6603
6612
  initial: { height: 0, opacity: 0 },
6604
6613
  animate: { height: "auto", opacity: 1 },
6605
6614
  exit: { height: 0, opacity: 0 },
6606
- transition: { ...tacSpring.magnetic, opacity: { duration: 0.15 } },
6615
+ transition: { ...tacSpring.magnetic, opacity: { duration: EXIT_DURATION } },
6607
6616
  style: { overflow: "hidden" },
6608
6617
  children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-1.5", children: colors.map((color) => {
6609
6618
  const normalized = normalizeHex(color);
@@ -6616,7 +6625,7 @@ var ColorPicker = forwardRef(
6616
6625
  onClick: () => handleSwatchClick(color),
6617
6626
  style: {
6618
6627
  backgroundColor: color,
6619
- transition: "transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1)"
6628
+ transition: `transform ${DURATION.normal} ${EASING}, box-shadow ${DURATION.normal} ${EASING}`
6620
6629
  },
6621
6630
  className: cn(
6622
6631
  "w-8 h-8 rounded-[var(--radius-sm)] border-none cursor-pointer",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tac-ui/web",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Web components for Tac UI (Next.js / React)",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
@@ -31,19 +31,19 @@
31
31
  "access": "public"
32
32
  },
33
33
  "dependencies": {
34
+ "@tac-ui/shared": "^1.0.1",
35
+ "@tac-ui/tokens": "^1.0.1",
36
+ "@tac-ui/icon": "^1.0.1",
34
37
  "chart.js": "^4.5.1",
35
38
  "class-variance-authority": "^0.7.0",
36
39
  "clsx": "^2.1.0",
37
40
  "framer-motion": "^12.34.0",
38
- "tailwind-merge": "^3.4.1",
39
- "@tac-ui/shared": "1.0.0",
40
- "@tac-ui/icon": "1.0.0",
41
- "@tac-ui/tokens": "1.0.0"
41
+ "tailwind-merge": "^3.4.1"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "next-themes": "^0.4.0",
45
- "react": "^18.0.0 || ^19.0.0",
46
- "react-dom": "^18.0.0 || ^19.0.0"
45
+ "react": "^19.0.0",
46
+ "react-dom": "^19.0.0"
47
47
  },
48
48
  "peerDependenciesMeta": {
49
49
  "next-themes": {
@@ -54,8 +54,8 @@
54
54
  "@types/react": "^19.0.0",
55
55
  "@types/react-dom": "^19.0.0",
56
56
  "next-themes": "^0.4.0",
57
- "react": "^19.0.0",
58
- "react-dom": "^19.0.0",
57
+ "react": "^19.2.4",
58
+ "react-dom": "^19.2.4",
59
59
  "tsup": "^8.3.0",
60
60
  "typescript": "^5.7.0"
61
61
  },