@octavius2929-personal/design-system 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -69,6 +69,7 @@ __export(index_exports, {
   text: () => text,
   theme: () => vars,
   themes: () => themes,
+  usePrevious: () => usePrevious,
   useTheme: () => useTheme,
   useToggle: () => useToggle
 });
@@ -80,19 +81,29 @@ var schemaNames = ["tinta"];
 var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2v", dark: "theme_themes_tinta_dark__e3grur2w", sepia: "theme_themes_tinta_sepia__e3grur2x", contrast: "theme_themes_tinta_contrast__e3grur2y" } };
 var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: { bg1: "var(--color-bg1__e3grur2c)", bg2: "var(--color-bg2__e3grur2d)", bg3: "var(--color-bg3__e3grur2e)", bgInset: "var(--color-bgInset__e3grur2f)", fg1: "var(--color-fg1__e3grur2g)", fg2: "var(--color-fg2__e3grur2h)", fg3: "var(--color-fg3__e3grur2i)", fgOnAccent: "var(--color-fgOnAccent__e3grur2j)", border1: "var(--color-border1__e3grur2k)", border2: "var(--color-border2__e3grur2l)", borderStrong: "var(--color-borderStrong__e3grur2m)", accent: "var(--color-accent__e3grur2n)", accentHover: "var(--color-accentHover__e3grur2o)", accentSoft: "var(--color-accentSoft__e3grur2p)", ok: "var(--color-ok__e3grur2q)", warn: "var(--color-warn__e3grur2r)", danger: "var(--color-danger__e3grur2s)", info: "var(--color-info__e3grur2t)", scrim: "var(--color-scrim__e3grur2u)" } };
 
-// src/hooks/use-toggle/index.ts
+// src/hooks/use-previous/index.ts
 var import_react = require("react");
+function usePrevious(value, initial) {
+  const ref = (0, import_react.useRef)(initial);
+  (0, import_react.useEffect)(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+// src/hooks/use-toggle/index.ts
+var import_react2 = require("react");
 function useToggle(initial = false) {
-  const [on, setOn] = (0, import_react.useState)(initial);
-  const toggle = (0, import_react.useCallback)(() => setOn((value) => !value), []);
+  const [on, setOn] = (0, import_react2.useState)(initial);
+  const toggle = (0, import_react2.useCallback)(() => setOn((value) => !value), []);
   return [on, toggle, setOn];
 }
 
 // src/components/button/use-styles.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/theme/context/theme-context.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var noop = () => {
 };
@@ -104,15 +115,15 @@ var DEFAULT_VALUE = {
   setMode: noop,
   toggleMode: noop
 };
-var ThemeContext = (0, import_react2.createContext)(null);
+var ThemeContext = (0, import_react3.createContext)(null);
 function ThemeProvider({
   children,
   defaultSchema = "tinta",
   defaultMode = "light"
 }) {
-  const [schema, setSchema] = (0, import_react2.useState)(defaultSchema);
-  const [mode, setMode] = (0, import_react2.useState)(defaultMode);
-  const value = (0, import_react2.useMemo)(
+  const [schema, setSchema] = (0, import_react3.useState)(defaultSchema);
+  const [mode, setMode] = (0, import_react3.useState)(defaultMode);
+  const value = (0, import_react3.useMemo)(
     () => ({
       schema,
       mode,
@@ -126,7 +137,7 @@ function ThemeProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  return (0, import_react2.useContext)(ThemeContext) ?? DEFAULT_VALUE;
+  return (0, import_react3.useContext)(ThemeContext) ?? DEFAULT_VALUE;
 }
 
 // src/components/button/use-styles.css.ts
@@ -147,7 +158,7 @@ function useStyles({
   className
 }) {
   const { themeClass } = useTheme();
-  const container = (0, import_react3.useMemo)(
+  const container = (0, import_react4.useMemo)(
     () => [
       themeClass,
       root,
@@ -185,7 +196,7 @@ function Button({
 }
 
 // src/components/divider/use-styles.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/divider/use-styles.css.ts
 var horizontal = "use-styles_horizontal__1n7v7yj1";
@@ -198,7 +209,7 @@ var vertical = "use-styles_vertical__1n7v7yj2";
 // src/components/divider/use-styles.ts
 function useStyles2({ vertical: vertical2, hasLabel }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react4.useMemo)(
+  const root24 = (0, import_react5.useMemo)(
     () => [
       themeClass,
       root2,
@@ -225,7 +236,7 @@ function Divider({ vertical: vertical2, label: label7, ...rest }) {
 }
 
 // src/components/avatar/use-styles.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/avatar/use-styles.css.ts
 var root3 = "use-styles_root__1mn1rmu0";
@@ -239,7 +250,7 @@ function useStyles3({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react5.useMemo)(
+  const root24 = (0, import_react6.useMemo)(
     () => [
       themeClass,
       root3,
@@ -260,7 +271,7 @@ function Avatar({ size: size3, filled, className, children, ...rest }) {
 }
 
 // src/components/badge/use-styles.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/badge/use-styles.css.ts
 var dot = "use-styles_dot__1wpei6p1";
@@ -270,11 +281,11 @@ var tone2 = { ink: "use-styles_tone_ink__1wpei6p2", accent: "use-styles_tone_acc
 // src/components/badge/use-styles.ts
 function useStyles4({ tone: tone4 = "ink", className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react6.useMemo)(
+  const root24 = (0, import_react7.useMemo)(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
-  const dot3 = (0, import_react6.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
+  const dot3 = (0, import_react7.useMemo)(() => [dot, tone2[tone4]].join(" "), [tone4]);
   return { root: root24, dot: dot3 };
 }
 
@@ -289,7 +300,7 @@ function Badge({ count, tone: tone4, className, children, ...rest }) {
 }
 
 // src/components/progress/use-styles.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/progress/use-styles.css.ts
 var bar = "use-styles_bar__kbop7v3";
@@ -305,7 +316,7 @@ function useStyles5({
 }) {
   const { themeClass } = useTheme();
   const indeterminate2 = value === void 0;
-  return (0, import_react7.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     const root24 = (...classes) => [themeClass, ...classes, className].filter(Boolean).join(" ");
     if (variant2 === "circular") {
       return { track: "", bar: "", spinner: root24(spinner) };
@@ -383,7 +394,7 @@ function XIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/chip/use-styles.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/chip/use-styles.css.ts
 var clickable = "use-styles_clickable__1axilf44";
@@ -399,7 +410,7 @@ function useStyles6({
   clickable: clickable2
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react8.useMemo)(
+  const root24 = (0, import_react9.useMemo)(
     () => [
       themeClass,
       root5,
@@ -449,7 +460,7 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/checkbox/use-styles.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/checkbox/use-styles.css.ts
 var box = "use-styles_box__9zoga92";
@@ -462,11 +473,11 @@ var root6 = "use-styles_root__9zoga90";
 // src/components/checkbox/use-styles.ts
 function useStyles7({ checked, disabled: disabled3 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react9.useMemo)(
+  const root24 = (0, import_react10.useMemo)(
     () => [themeClass, root6, disabled3 && disabled].filter(Boolean).join(" "),
     [themeClass, disabled3]
   );
-  const box2 = (0, import_react9.useMemo)(
+  const box2 = (0, import_react10.useMemo)(
     () => [box, checked && boxChecked].filter(Boolean).join(" "),
     [checked]
   );
@@ -505,7 +516,7 @@ function Checkbox({
 }
 
 // src/components/radio/use-styles.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/radio/use-styles.css.ts
 var circle = "use-styles_circle__vy61b43";
@@ -521,7 +532,7 @@ function useStyles8({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react10.useMemo)(
+  const root24 = (0, import_react11.useMemo)(
     () => [themeClass, root7, disabled3 && disabled2, className].filter(Boolean).join(" "),
     [themeClass, disabled3, className]
   );
@@ -557,7 +568,7 @@ function Radio({ checked, onChange, label: label7, name, value, disabled: disabl
 }
 
 // src/components/switch/use-styles.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/components/switch/use-styles.css.ts
 var input3 = "use-styles_input__1r6kem71";
@@ -571,7 +582,7 @@ var trackChecked = "use-styles_trackChecked__1r6kem73";
 // src/components/switch/use-styles.ts
 function useStyles9({ checked }) {
   const { themeClass } = useTheme();
-  return (0, import_react11.useMemo)(
+  return (0, import_react12.useMemo)(
     () => ({
       root: [themeClass, root8].filter(Boolean).join(" "),
       input: input3,
@@ -609,7 +620,7 @@ function Switch({ checked = false, onChange, label: label7, disabled: disabled3
 }
 
 // src/components/text-field/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/icons/eye/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -664,7 +675,7 @@ function EyeOffIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/text-field/use-styles.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/text-field/use-styles.css.ts
 var field = "use-styles_field__vat8gv3";
@@ -683,7 +694,7 @@ var startIcon = "use-styles_startIcon__vat8gva";
 // src/components/text-field/use-styles.ts
 function useStyles10({ error, hasStartIcon, hasReveal, className }) {
   const { themeClass } = useTheme();
-  return (0, import_react12.useMemo)(() => {
+  return (0, import_react13.useMemo)(() => {
     const root24 = [themeClass, root9].filter(Boolean).join(" ");
     const labelText2 = [labelText, error && labelTextError].filter(Boolean).join(" ");
     const input6 = [
@@ -721,11 +732,11 @@ function TextField({
   id,
   ...rest
 }) {
-  const [reveal, setReveal] = (0, import_react13.useState)(false);
+  const [reveal, setReveal] = (0, import_react14.useState)(false);
   const isPassword = type === "password";
   const hasReveal = isPassword;
   const effectiveType = isPassword ? reveal ? "text" : "password" : type;
-  const autoId = (0, import_react13.useId)();
+  const autoId = (0, import_react14.useId)();
   const controlId = id ?? autoId;
   const classes = useStyles10({
     error,
@@ -783,7 +794,7 @@ function TextField({
 }
 
 // src/components/icon-button/use-styles.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/icon-button/use-styles.css.ts
 var accent = "use-styles_accent__18np0q02";
@@ -796,7 +807,7 @@ function useStyles11({
   tone: tone4 = "ink"
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react14.useMemo)(
+  const root24 = (0, import_react15.useMemo)(
     () => [themeClass, root10, tone4 === "accent" && accent, active2 && active].filter(Boolean).join(" "),
     [themeClass, active2, tone4]
   );
@@ -811,7 +822,7 @@ function IconButton({ icon: Icon, active: active2, tone: tone4, title, ...rest }
 }
 
 // src/components/card/use-styles.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/components/card/use-styles.css.ts
 var body = "use-styles_body__1fuvd022";
@@ -822,7 +833,7 @@ var root11 = "use-styles_root__1fuvd020";
 // src/components/card/use-styles.ts
 function useStyles12() {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react15.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
+  const root24 = (0, import_react16.useMemo)(() => `${themeClass} ${root11}`, [themeClass]);
   return { root: root24, header, body, footer };
 }
 
@@ -958,7 +969,7 @@ function TriangleAlertIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/alert/use-styles.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/alert/use-styles.css.ts
 var body2 = "use-styles_body__ivsh6u8";
@@ -974,7 +985,7 @@ function useStyles13({
   className
 }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react16.useMemo)(
+  const root24 = (0, import_react17.useMemo)(
     () => [themeClass, root12, severity[severity2], className].filter(Boolean).join(" "),
     [themeClass, severity2, className]
   );
@@ -1015,10 +1026,10 @@ function Alert({
 }
 
 // src/components/tooltip/index.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/tooltip/use-styles.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1";
@@ -1028,11 +1039,11 @@ var wrapper = "use-styles_wrapper__h9kvh0";
 // src/components/tooltip/use-styles.ts
 function useStyles14({ placement: placement2 = "top" }) {
   const { themeClass } = useTheme();
-  const wrapper4 = (0, import_react17.useMemo)(
+  const wrapper4 = (0, import_react18.useMemo)(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = (0, import_react17.useMemo)(
+  const bubble2 = (0, import_react18.useMemo)(
     () => [bubble, placement[placement2]].filter(Boolean).join(" "),
     [placement2]
   );
@@ -1042,14 +1053,14 @@ function useStyles14({ placement: placement2 = "top" }) {
 // src/components/tooltip/index.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function Tooltip({ label: label7, children, placement: placement2 }) {
-  const [open, setOpen] = (0, import_react18.useState)(false);
-  const tooltipId = (0, import_react18.useId)();
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const tooltipId = (0, import_react19.useId)();
   const { wrapper: wrapper4, bubble: bubble2 } = useStyles14({ placement: placement2 });
   const show = () => setOpen(true);
   const hide = () => setOpen(false);
   const previousDescribedBy = children.props["aria-describedby"];
   const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
-  const trigger2 = (0, import_react18.cloneElement)(children, { "aria-describedby": describedBy });
+  const trigger2 = (0, import_react19.cloneElement)(children, { "aria-describedby": describedBy });
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: wrapper4, onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [
     trigger2,
     open && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: tooltipId, role: "tooltip", className: bubble2, children: label7 })
@@ -1057,7 +1068,7 @@ function Tooltip({ label: label7, children, placement: placement2 }) {
 }
 
 // src/components/select/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/icons/chevron-down/index.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
@@ -1082,7 +1093,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/select/use-styles.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -1101,7 +1112,7 @@ function useStyles15({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return (0, import_react19.useMemo)(() => {
+  return (0, import_react20.useMemo)(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root13].filter(Boolean).join(" "),
@@ -1118,10 +1129,10 @@ function useStyles15({
 // src/components/select/index.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function Select({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3 }) {
-  const [open, setOpen] = (0, import_react20.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react20.useState)(0);
-  const rootRef = (0, import_react20.useRef)(null);
-  const baseId = (0, import_react20.useId)();
+  const [open, setOpen] = (0, import_react21.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react21.useState)(0);
+  const rootRef = (0, import_react21.useRef)(null);
+  const baseId = (0, import_react21.useId)();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const {
@@ -1133,7 +1144,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     menu: menu2,
     optionClass
   } = useStyles15({ open });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -1244,7 +1255,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
 }
 
 // src/components/slider/use-styles.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -1258,7 +1269,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
 // src/components/slider/use-styles.ts
 function useStyles16() {
   const { themeClass } = useTheme();
-  return (0, import_react21.useMemo)(() => {
+  return (0, import_react22.useMemo)(() => {
     const root24 = [themeClass, root14].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -1314,10 +1325,10 @@ function Slider({
 }
 
 // src/components/accordion/index.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/components/accordion/use-styles.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -1330,7 +1341,7 @@ var root15 = "use-styles_root__1cjrdh90";
 // src/components/accordion/use-styles.ts
 function useStyles17({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react22.useMemo)(
+  return (0, import_react23.useMemo)(
     () => ({
       root: [themeClass, root15, className].filter(Boolean).join(" "),
       item,
@@ -1350,7 +1361,7 @@ function Accordion({
   defaultOpen = [],
   className
 }) {
-  const [open, setOpen] = (0, import_react23.useState)(defaultOpen);
+  const [open, setOpen] = (0, import_react24.useState)(defaultOpen);
   const { root: root24, item: item3, header: header3, chevronFor, panel: panel2 } = useStyles17({ className });
   const toggle = (id) => {
     setOpen((current2) => {
@@ -1385,7 +1396,7 @@ function Accordion({
 }
 
 // src/components/breadcrumbs/index.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/icons/chevron-right/index.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
@@ -1410,7 +1421,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/breadcrumbs/use-styles.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -1421,7 +1432,7 @@ var separator = "use-styles_separator__7u0du63";
 // src/components/breadcrumbs/use-styles.ts
 function useStyles18({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react24.useMemo)(
+  const root24 = (0, import_react25.useMemo)(
     () => [themeClass, root16, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1435,7 +1446,7 @@ function Breadcrumbs({ items, className, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("nav", { "aria-label": "Breadcrumb", className: root24, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react25.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react26.Fragment, { children: [
       isLast ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: current2, "aria-current": "page", children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("a", { className: crumb2, href: item3.href, children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: crumb2, children: item3.label }),
       !isLast && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronRightIcon, { size: 14 }) })
     ] }, key);
@@ -1465,7 +1476,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 }
 
 // src/components/pagination/use-styles.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -1477,7 +1488,7 @@ var root17 = "use-styles_root__1azgzoh0";
 // src/components/pagination/use-styles.ts
 function useStyles19() {
   const { themeClass } = useTheme();
-  return (0, import_react26.useMemo)(
+  return (0, import_react27.useMemo)(
     () => ({
       root: [themeClass, root17].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -1552,10 +1563,10 @@ function Pagination({ count, page = 1, onChange, siblingCount = 1 }) {
 }
 
 // src/components/stepper/index.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/stepper/use-styles.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -1570,7 +1581,7 @@ var step = "use-styles_step__79pt4e1";
 // src/components/stepper/use-styles.ts
 function useStyles20({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react27.useMemo)(() => {
+  return (0, import_react28.useMemo)(() => {
     const root24 = [themeClass, root18, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -1591,7 +1602,7 @@ function Stepper({ steps, active: active2 = 0, className, ...rest }) {
     const isActive = state === "active";
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react29.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: step2, "aria-current": isActive ? "step" : void 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: markerFor(state), children: state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckIcon, { size: 14 }) : index + 1 }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: labelFor(isActive), children: s.label })
@@ -1603,7 +1614,7 @@ function Stepper({ steps, active: active2 = 0, className, ...rest }) {
 }
 
 // src/components/tabs/use-styles.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/tabs/use-styles.css.ts
 var root19 = "use-styles_root__1l4m7t40";
@@ -1613,7 +1624,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
 // src/components/tabs/use-styles.ts
 function useStyles21() {
   const { themeClass } = useTheme();
-  return (0, import_react29.useMemo)(() => {
+  return (0, import_react30.useMemo)(() => {
     const root24 = [themeClass, root19].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root24, tab, tabClass };
@@ -1642,10 +1653,10 @@ function Tabs({ items, value, onChange }) {
 }
 
 // src/components/menu/index.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/components/menu/use-styles.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -1656,7 +1667,7 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
 // src/components/menu/use-styles.ts
 function useStyles22() {
   const { themeClass } = useTheme();
-  return (0, import_react30.useMemo)(
+  return (0, import_react31.useMemo)(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
       list,
@@ -1675,10 +1686,10 @@ function assignRef(ref, value) {
 }
 function Menu({ trigger: trigger2, items }) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles22();
-  const [open, setOpen] = (0, import_react31.useState)(false);
-  const rootRef = (0, import_react31.useRef)(null);
-  const listRef = (0, import_react31.useRef)(null);
-  const triggerRef = (0, import_react31.useRef)(null);
+  const [open, setOpen] = (0, import_react32.useState)(false);
+  const rootRef = (0, import_react32.useRef)(null);
+  const listRef = (0, import_react32.useRef)(null);
+  const triggerRef = (0, import_react32.useRef)(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -1690,7 +1701,7 @@ function Menu({ trigger: trigger2, items }) {
     setOpen(false);
     triggerRef.current?.focus();
   };
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
     const onDocMouseDown = (event) => {
@@ -1746,7 +1757,7 @@ function Menu({ trigger: trigger2, items }) {
     triggerRef.current = node;
     assignRef(consumerRef, node);
   };
-  const clonedTrigger = (0, import_react31.cloneElement)(trigger2, {
+  const clonedTrigger = (0, import_react32.cloneElement)(trigger2, {
     ref: mergedTriggerRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
@@ -1776,10 +1787,10 @@ function Menu({ trigger: trigger2, items }) {
 }
 
 // src/components/dialog/index.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/dialog/use-styles.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu84";
@@ -1791,7 +1802,7 @@ var titleText2 = "use-styles_titleText__5tstu82";
 // src/components/dialog/use-styles.ts
 function useStyles23() {
   const { themeClass } = useTheme();
-  return (0, import_react32.useMemo)(
+  return (0, import_react33.useMemo)(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface,
@@ -1808,11 +1819,11 @@ var import_jsx_runtime35 = require("react/jsx-runtime");
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Dialog({ open, onClose, title, actions: actions3, children }) {
   const { overlay: overlay2, surface: surface2, titleText: titleText3, body: body4, actions: actionsClass } = useStyles23();
-  const surfaceRef = (0, import_react33.useRef)(null);
-  const previouslyFocused = (0, import_react33.useRef)(null);
-  const generatedId = (0, import_react33.useId)();
+  const surfaceRef = (0, import_react34.useRef)(null);
+  const previouslyFocused = (0, import_react34.useRef)(null);
+  const generatedId = (0, import_react34.useId)();
   const titleId = title != null ? generatedId : void 0;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1820,13 +1831,13 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -1885,7 +1896,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
 }
 
 // src/components/snackbar/use-styles.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -1895,7 +1906,7 @@ var root20 = "use-styles_root__ihzsep0";
 // src/components/snackbar/use-styles.ts
 function useStyles24() {
   const { themeClass } = useTheme();
-  return (0, import_react34.useMemo)(
+  return (0, import_react35.useMemo)(
     () => ({
       root: [themeClass, root20].filter(Boolean).join(" "),
       message,
@@ -1918,7 +1929,7 @@ function Snackbar({ open, message: message2, action, onClose }) {
 }
 
 // src/components/table/use-styles.ts
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -1929,7 +1940,7 @@ var th = "use-styles_th__1n2cz6i1";
 // src/components/table/use-styles.ts
 function useStyles25({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react35.useMemo)(
+  const root24 = (0, import_react36.useMemo)(
     () => [themeClass, root21, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1955,7 +1966,7 @@ function Table({
 }
 
 // src/components/app-bar/use-styles.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -1965,7 +1976,7 @@ var root22 = "use-styles_root__1h133nh0";
 // src/components/app-bar/use-styles.ts
 function useStyles26({ className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react36.useMemo)(
+  const root24 = (0, import_react37.useMemo)(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -1984,7 +1995,7 @@ function AppBar({ brand: brand2, actions: actions3, className, children, ...rest
 }
 
 // src/components/list-item/use-styles.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/list-item/use-styles.css.ts
 var content2 = "use-styles_content__kbreq13";
@@ -1996,7 +2007,7 @@ var trailing = "use-styles_trailing__kbreq14";
 // src/components/list-item/use-styles.ts
 function useStyles27({ selected: selected3, className }) {
   const { themeClass } = useTheme();
-  const root24 = (0, import_react37.useMemo)(
+  const root24 = (0, import_react38.useMemo)(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),
     [themeClass, selected3, className]
   );
@@ -2194,6 +2205,7 @@ var text = { eyebrow: "typography_text_eyebrow__1wmlzy0", display: "typography_t
   text,
   theme,
   themes,
+  usePrevious,
   useTheme,
   useToggle
 });

package/dist/index.d.cts

@@ -156,6 +156,9 @@ declare const themes: Record<SchemaName, Record<Mode, string>>;
 declare const schemaNames: readonly SchemaName[];
 declare const modeNames: readonly Mode[];
 
+declare function usePrevious<T>(value: T, initial: T): T;
+declare function usePrevious<T>(value: T, initial?: T): T | undefined;
+
 declare function useToggle(initial?: boolean): readonly [boolean, () => void, (value: boolean) => void];
 
 interface IconProps extends SVGProps<SVGSVGElement> {
@@ -509,4 +512,4 @@ interface ThemeProviderProps {
 declare function ThemeProvider({ children, defaultSchema, defaultMode, }: ThemeProviderProps): react.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, MoreHorizontalIcon, Pagination, type PaginationProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, XIcon, modeNames, schemaNames, text, vars as theme, themes, useTheme, useToggle };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, MoreHorizontalIcon, Pagination, type PaginationProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, XIcon, modeNames, schemaNames, text, vars as theme, themes, usePrevious, useTheme, useToggle };

package/dist/index.d.ts

@@ -156,6 +156,9 @@ declare const themes: Record<SchemaName, Record<Mode, string>>;
 declare const schemaNames: readonly SchemaName[];
 declare const modeNames: readonly Mode[];
 
+declare function usePrevious<T>(value: T, initial: T): T;
+declare function usePrevious<T>(value: T, initial?: T): T | undefined;
+
 declare function useToggle(initial?: boolean): readonly [boolean, () => void, (value: boolean) => void];
 
 interface IconProps extends SVGProps<SVGSVGElement> {
@@ -509,4 +512,4 @@ interface ThemeProviderProps {
 declare function ThemeProvider({ children, defaultSchema, defaultMode, }: ThemeProviderProps): react.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, MoreHorizontalIcon, Pagination, type PaginationProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, XIcon, modeNames, schemaNames, text, vars as theme, themes, useTheme, useToggle };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, MoreHorizontalIcon, Pagination, type PaginationProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, XIcon, modeNames, schemaNames, text, vars as theme, themes, usePrevious, useTheme, useToggle };

package/dist/index.js

@@ -4,6 +4,16 @@ var schemaNames = ["tinta"];
 var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2v", dark: "theme_themes_tinta_dark__e3grur2w", sepia: "theme_themes_tinta_sepia__e3grur2x", contrast: "theme_themes_tinta_contrast__e3grur2y" } };
 var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: { bg1: "var(--color-bg1__e3grur2c)", bg2: "var(--color-bg2__e3grur2d)", bg3: "var(--color-bg3__e3grur2e)", bgInset: "var(--color-bgInset__e3grur2f)", fg1: "var(--color-fg1__e3grur2g)", fg2: "var(--color-fg2__e3grur2h)", fg3: "var(--color-fg3__e3grur2i)", fgOnAccent: "var(--color-fgOnAccent__e3grur2j)", border1: "var(--color-border1__e3grur2k)", border2: "var(--color-border2__e3grur2l)", borderStrong: "var(--color-borderStrong__e3grur2m)", accent: "var(--color-accent__e3grur2n)", accentHover: "var(--color-accentHover__e3grur2o)", accentSoft: "var(--color-accentSoft__e3grur2p)", ok: "var(--color-ok__e3grur2q)", warn: "var(--color-warn__e3grur2r)", danger: "var(--color-danger__e3grur2s)", info: "var(--color-info__e3grur2t)", scrim: "var(--color-scrim__e3grur2u)" } };
 
+// src/hooks/use-previous/index.ts
+import { useEffect, useRef } from "react";
+function usePrevious(value, initial) {
+  const ref = useRef(initial);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
 // src/hooks/use-toggle/index.ts
 import { useCallback, useState } from "react";
 function useToggle(initial = false) {
@@ -984,7 +994,7 @@ function Tooltip({ label: label7, children, placement: placement2 }) {
 }
 
 // src/components/select/index.tsx
-import { useEffect, useId as useId3, useRef, useState as useState5 } from "react";
+import { useEffect as useEffect2, useId as useId3, useRef as useRef2, useState as useState5 } from "react";
 
 // src/components/icons/chevron-down/index.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
@@ -1047,7 +1057,7 @@ import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function Select({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3 }) {
   const [open, setOpen] = useState5(false);
   const [activeIndex, setActiveIndex] = useState5(0);
-  const rootRef = useRef(null);
+  const rootRef = useRef2(null);
   const baseId = useId3();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
@@ -1060,7 +1070,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     menu: menu2,
     optionClass
   } = useStyles15({ open });
-  useEffect(() => {
+  useEffect2(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -1571,8 +1581,8 @@ function Tabs({ items, value, onChange }) {
 // src/components/menu/index.tsx
 import {
   cloneElement as cloneElement2,
-  useEffect as useEffect2,
-  useRef as useRef2,
+  useEffect as useEffect3,
+  useRef as useRef3,
   useState as useState7
 } from "react";
 
@@ -1608,9 +1618,9 @@ function assignRef(ref, value) {
 function Menu({ trigger: trigger2, items }) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles22();
   const [open, setOpen] = useState7(false);
-  const rootRef = useRef2(null);
-  const listRef = useRef2(null);
-  const triggerRef = useRef2(null);
+  const rootRef = useRef3(null);
+  const listRef = useRef3(null);
+  const triggerRef = useRef3(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -1622,7 +1632,7 @@ function Menu({ trigger: trigger2, items }) {
     setOpen(false);
     triggerRef.current?.focus();
   };
-  useEffect2(() => {
+  useEffect3(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
     const onDocMouseDown = (event) => {
@@ -1709,9 +1719,9 @@ function Menu({ trigger: trigger2, items }) {
 
 // src/components/dialog/index.tsx
 import {
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useId as useId4,
-  useRef as useRef3
+  useRef as useRef4
 } from "react";
 
 // src/components/dialog/use-styles.ts
@@ -1744,11 +1754,11 @@ import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Dialog({ open, onClose, title, actions: actions3, children }) {
   const { overlay: overlay2, surface: surface2, titleText: titleText3, body: body4, actions: actionsClass } = useStyles23();
-  const surfaceRef = useRef3(null);
-  const previouslyFocused = useRef3(null);
+  const surfaceRef = useRef4(null);
+  const previouslyFocused = useRef4(null);
   const generatedId = useId4();
   const titleId = title != null ? generatedId : void 0;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1756,13 +1766,13 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -2129,6 +2139,7 @@ export {
   text,
   vars as theme,
   themes,
+  usePrevious,
   useTheme,
   useToggle
 };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@octavius2929-personal/design-system",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Librería de componentes React con estilos en TypeScript (vanilla-extract) y theming por schema × modo (light/dark/sepia/contrast).",
   "license": "MIT",
   "author": "justinoctavius <justinoctavio2001@gmail.com>",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/justinoctavius/design-system.git"
+    "url": "git+https://github.com/proyectos-octavio/design-system.git"
   },
-  "homepage": "https://github.com/justinoctavius/design-system#readme",
-  "bugs": "https://github.com/justinoctavius/design-system/issues",
+  "homepage": "https://github.com/proyectos-octavio/design-system#readme",
+  "bugs": "https://github.com/proyectos-octavio/design-system/issues",
   "keywords": [
     "react",
     "components",
@@ -36,8 +36,13 @@
     },
     "./styles.css": "./dist/index.css"
   },
-  "sideEffects": ["**/*.css", "**/*.css.ts"],
-  "files": ["dist"],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.css.ts"
+  ],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -52,7 +57,7 @@
     "lint:fix": "biome check --write .",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
-    "prepublishOnly": "npm run lint && npm run typecheck && npm test && npm run build",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build",
     "prepare": "husky"
   },
   "lint-staged": {
@@ -85,6 +90,7 @@
     "lint-staged": "^15.2.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
+    "semantic-release": "^24.0.0",
     "storybook": "^8.6.18",
     "tsup": "^8.0.0",
     "typescript": "^5.5.0",