@tosui/react 0.1.3 → 0.1.5

package/dist/components/Box/roundness/roundness.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"roundness.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"roundness.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Box/shadows/shadows.d.ts

@@ -1,14 +1,8 @@
 import { ResponsiveValue } from '../../../utils/breakpoints';
-import { StyleResult } from '../shared';
+import { StateProps, StyleResult } from '../shared';
 export type ShadowValue = "none" | "sm" | "md" | "lg";
 export type ShadowProps = {
     shadow?: ResponsiveValue<ShadowValue>;
 };
-export type ShadowStateProps = {
-    _hover?: ShadowProps;
-    _focus?: ShadowProps;
-    _active?: ShadowProps;
-    _disabled?: ShadowProps;
-};
-export declare function getShadowStyles(props: ShadowProps & ShadowStateProps): StyleResult;
+export declare function getShadowStyles(props: ShadowProps & StateProps<ShadowProps>): StyleResult;
 //# sourceMappingURL=shadows.d.ts.map

package/dist/components/Box/shadows/shadows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/shadows/shadows.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB,CAAC;AAiDF,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,GAAG,gBAAgB,GACpC,WAAW,CAmBb"}
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/shadows/shadows.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACvC,CAAC;AAWF,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,GAAG,UAAU,CAAC,WAAW,CAAC,GAC3C,WAAW,CAmBb"}

package/dist/components/Box/shadows/shadows.js

@@ -1,40 +1,17 @@
-import { RESPONSIVE_KEYS, STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import { getEnumResponsiveStyles } from "../shared/responsive.js";
 import styles from "./shadows.module.css.js";
 import clsx from "clsx";
-function getShadowClass(value, responsiveKey, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  if (responsiveKey === "base") {
-    return stateClassSuffix ? styles[`${value}${stateClassSuffix}`] : styles[value];
-  }
-  return stateClassSuffix ? styles[`${value}_${responsiveKey}${stateClassSuffix}`] : styles[`${value}_${responsiveKey}`];
-}
-function getShadowStylesForValue(value, state) {
-  const result = { className: "", style: {} };
-  if (value === void 0) return result;
-  if (typeof value === "string") {
-    const className = getShadowClass(value, "base", state);
-    if (className) {
-      result.className = className;
-    }
-    return result;
-  }
-  for (const responsiveKey of RESPONSIVE_KEYS) {
-    const shadowValue = value[responsiveKey];
-    if (shadowValue === void 0) continue;
-    const className = getShadowClass(shadowValue, responsiveKey, state);
-    if (className) {
-      result.className = clsx(result.className, className);
-    }
-  }
-  return result;
+function getShadowStylesForState(props, state) {
+  if (!props) return { className: "", style: {} };
+  return getEnumResponsiveStyles(styles, "", props.shadow, state);
 }
 function getShadowStyles(props) {
-  const { shadow, _hover, _focus, _active, _disabled } = props;
-  const baseStyles = getShadowStylesForValue(shadow, "base");
-  const hoverStyles = getShadowStylesForValue(_hover?.shadow, "hover");
-  const focusStyles = getShadowStylesForValue(_focus?.shadow, "focus");
-  const activeStyles = getShadowStylesForValue(_active?.shadow, "active");
-  const disabledStyles = getShadowStylesForValue(_disabled?.shadow, "disabled");
+  const { _hover, _focus, _active, _disabled, ...baseProps } = props;
+  const baseStyles = getShadowStylesForState(baseProps, "base");
+  const hoverStyles = getShadowStylesForState(_hover, "hover");
+  const focusStyles = getShadowStylesForState(_focus, "focus");
+  const activeStyles = getShadowStylesForState(_active, "active");
+  const disabledStyles = getShadowStylesForState(_disabled, "disabled");
   return {
     className: clsx(
       baseStyles.className,

package/dist/components/Box/shadows/shadows.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.js","sources":["../../../../src/components/Box/shadows/shadows.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  RESPONSIVE_KEYS,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./shadows.module.css\";\nimport clsx from \"clsx\";\n\nexport type ShadowValue = \"none\" | \"sm\" | \"md\" | \"lg\";\n\nexport type ShadowProps = {\n  shadow?: ResponsiveValue<ShadowValue>;\n};\n\nexport type ShadowStateProps = {\n  _hover?: ShadowProps;\n  _focus?: ShadowProps;\n  _active?: ShadowProps;\n  _disabled?: ShadowProps;\n};\n\nfunction getShadowClass(\n  value: ShadowValue,\n  responsiveKey: (typeof RESPONSIVE_KEYS)[number],\n  state: StateKey\n): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  if (responsiveKey === \"base\") {\n    return stateClassSuffix\n      ? styles[`${value}${stateClassSuffix}`]\n      : styles[value];\n  }\n\n  return stateClassSuffix\n    ? styles[`${value}_${responsiveKey}${stateClassSuffix}`]\n    : styles[`${value}_${responsiveKey}`];\n}\n\nfunction getShadowStylesForValue(\n  value: ResponsiveValue<ShadowValue> | undefined,\n  state: StateKey\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  if (typeof value === \"string\") {\n    const className = getShadowClass(value, \"base\", state);\n    if (className) {\n      result.className = className;\n    }\n    return result;\n  }\n\n  for (const responsiveKey of RESPONSIVE_KEYS) {\n    const shadowValue = value[responsiveKey];\n    if (shadowValue === undefined) continue;\n\n    const className = getShadowClass(shadowValue, responsiveKey, state);\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n  }\n\n  return result;\n}\n\nexport function getShadowStyles(\n  props: ShadowProps & ShadowStateProps\n): StyleResult {\n  const { shadow, _hover, _focus, _active, _disabled } = props;\n\n  const baseStyles = getShadowStylesForValue(shadow, \"base\");\n  const hoverStyles = getShadowStylesForValue(_hover?.shadow, \"hover\");\n  const focusStyles = getShadowStylesForValue(_focus?.shadow, \"focus\");\n  const activeStyles = getShadowStylesForValue(_active?.shadow, \"active\");\n  const disabledStyles = getShadowStylesForValue(_disabled?.shadow, \"disabled\");\n\n  return {\n    className: clsx(\n      baseStyles.className,\n      hoverStyles.className,\n      focusStyles.className,\n      activeStyles.className,\n      disabledStyles.className\n    ),\n    style: {},\n  };\n}\n"],"names":[],"mappings":";;;AAuBA,SAAS,eACP,OACA,eACA,OACoB;AACpB,QAAM,mBAAmB,qBAAqB,KAAK;AAEnD,MAAI,kBAAkB,QAAQ;AAC5B,WAAO,mBACH,OAAO,GAAG,KAAK,GAAG,gBAAgB,EAAE,IACpC,OAAO,KAAK;AAAA,EAClB;AAEA,SAAO,mBACH,OAAO,GAAG,KAAK,IAAI,aAAa,GAAG,gBAAgB,EAAE,IACrD,OAAO,GAAG,KAAK,IAAI,aAAa,EAAE;AACxC;AAEA,SAAS,wBACP,OACA,OACa;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAEhC,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,YAAY,eAAe,OAAO,QAAQ,KAAK;AACrD,QAAI,WAAW;AACb,aAAO,YAAY;AAAA,IACrB;AACA,WAAO;AAAA,EACT;AAEA,aAAW,iBAAiB,iBAAiB;AAC3C,UAAM,cAAc,MAAM,aAAa;AACvC,QAAI,gBAAgB,OAAW;AAE/B,UAAM,YAAY,eAAe,aAAa,eAAe,KAAK;AAClE,QAAI,WAAW;AACb,aAAO,YAAY,KAAK,OAAO,WAAW,SAAS;AAAA,IACrD;AAAA,EACF;AAEA,SAAO;AACT;AAEO,SAAS,gBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,QAAQ,SAAS,cAAc;AAEvD,QAAM,aAAa,wBAAwB,QAAQ,MAAM;AACzD,QAAM,cAAc,wBAAwB,QAAQ,QAAQ,OAAO;AACnE,QAAM,cAAc,wBAAwB,QAAQ,QAAQ,OAAO;AACnE,QAAM,eAAe,wBAAwB,SAAS,QAAQ,QAAQ;AACtE,QAAM,iBAAiB,wBAAwB,WAAW,QAAQ,UAAU;AAE5E,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO,CAAA;AAAA,EAAC;AAEZ;"}
+{"version":3,"file":"shadows.js","sources":["../../../../src/components/Box/shadows/shadows.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  type StateKey,\n  type StateProps,\n  type StyleResult,\n  getEnumResponsiveStyles,\n} from \"../shared\";\nimport styles from \"./shadows.module.css\";\nimport clsx from \"clsx\";\n\nexport type ShadowValue = \"none\" | \"sm\" | \"md\" | \"lg\";\n\nexport type ShadowProps = {\n  shadow?: ResponsiveValue<ShadowValue>;\n};\n\nfunction getShadowStylesForState(\n  props: ShadowProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  return getEnumResponsiveStyles(styles, \"\", props.shadow, state);\n}\n\nexport function getShadowStyles(\n  props: ShadowProps & StateProps<ShadowProps>\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getShadowStylesForState(baseProps, \"base\");\n  const hoverStyles = getShadowStylesForState(_hover, \"hover\");\n  const focusStyles = getShadowStylesForState(_focus, \"focus\");\n  const activeStyles = getShadowStylesForState(_active, \"active\");\n  const disabledStyles = getShadowStylesForState(_disabled, \"disabled\");\n\n  return {\n    className: clsx(\n      baseStyles.className,\n      hoverStyles.className,\n      focusStyles.className,\n      activeStyles.className,\n      disabledStyles.className\n    ),\n    style: {},\n  };\n}\n"],"names":[],"mappings":";;;AAgBA,SAAS,wBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,SAAO,wBAAwB,QAAQ,IAAI,MAAM,QAAQ,KAAK;AAChE;AAEO,SAAS,gBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,wBAAwB,WAAW,MAAM;AAC5D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,eAAe,wBAAwB,SAAS,QAAQ;AAC9D,QAAM,iBAAiB,wBAAwB,WAAW,UAAU;AAEpE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO,CAAA;AAAA,EAAC;AAEZ;"}

package/dist/components/Box/shared/index.d.ts

@@ -1,4 +1,5 @@
 export * from './constants';
 export * from './types';
 export * from './spacing';
+export * from './responsive';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Box/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/dist/components/Box/shared/responsive.d.ts

@@ -0,0 +1,36 @@
+import { ResponsiveValue } from '../../../utils/breakpoints';
+import { StateKey, StyleResult } from './types';
+/**
+ * Generic helper for variable-based responsive props using CSS fallback chains.
+ *
+ * With this pattern, each prop has ONE CSS class per state. The CSS handles
+ * breakpoint cascading via nested var() fallbacks in media queries.
+ * JS only needs to apply the class and set CSS variables for specified breakpoints.
+ *
+ * @param styles     CSS module styles object
+ * @param classKey   Key to look up in the CSS module (e.g., "pt")
+ * @param varPrefix  CSS variable prefix (e.g., "pt" → --t-pt, --t-pt_sm, etc.)
+ * @param value      The prop value (plain or responsive object)
+ * @param state      Interaction state (base, hover, focus, active, disabled)
+ * @param transform  Optional transform from prop value to CSS string (e.g., getRawValue)
+ */
+export declare function getResponsiveVarStyles<T>(styles: Record<string, string>, classKey: string, varPrefix: string, value: ResponsiveValue<T> | undefined, state?: StateKey, transform?: (v: T) => string | undefined): StyleResult;
+/**
+ * Generic helper for enum-based responsive props using per-breakpoint CSS classes.
+ *
+ * Each combination of (value, breakpoint, state) maps to a unique CSS class.
+ * No inline styles — pure class-name lookup. Zero runtime cost.
+ *
+ * CSS class naming convention:
+ *   base:       .{classPrefix}-{value}  or  .{value} (if classPrefix is empty)
+ *   breakpoint:  .{classPrefix}-{value}_{bp}
+ *   state:       .{classPrefix}-{value}{stateClassSuffix}
+ *   both:        .{classPrefix}-{value}_{bp}{stateClassSuffix}
+ *
+ * @param styles       CSS module styles object
+ * @param classPrefix  Prefix for class lookup (e.g., "color", "text", "flex"). Empty string for no prefix.
+ * @param value        The prop value (plain string or responsive object)
+ * @param state        Interaction state (base, hover, focus, active, disabled)
+ */
+export declare function getEnumResponsiveStyles<T extends string>(styles: Record<string, string>, classPrefix: string, value: ResponsiveValue<T> | undefined, state?: StateKey): StyleResult;
+//# sourceMappingURL=responsive.d.ts.map

package/dist/components/Box/shared/responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/shared/responsive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,qBAAqB,CAAC;AAE7E,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,KAAK,GAAE,QAAiB,EACxB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,GACvC,WAAW,CAwCb;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,MAAM,EACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,KAAK,GAAE,QAAiB,GACvB,WAAW,CAoCb"}

package/dist/components/Box/shared/responsive.js

@@ -0,0 +1,65 @@
+import { STATE_CLASS_SUFFIXES, STATE_SUFFIXES, RESPONSIVE_KEYS } from "./constants.js";
+function getResponsiveVarStyles(styles, classKey, varPrefix, value, state = "base", transform) {
+  const result = { className: "", style: {} };
+  if (value === void 0) return result;
+  const stateSuffix = STATE_SUFFIXES[state];
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  const className = stateClassSuffix ? styles[`${classKey}${stateClassSuffix}`] : styles[classKey];
+  if (!className) return result;
+  if (typeof value !== "object") {
+    const raw = transform ? transform(value) : String(value);
+    if (raw === void 0) return result;
+    result.className = className;
+    result.style[`--t-${varPrefix}${stateSuffix}`] = raw;
+    return result;
+  }
+  let hasAnyValue = false;
+  const responsive = value;
+  for (const key of RESPONSIVE_KEYS) {
+    const v = responsive[key];
+    if (v === void 0) continue;
+    const raw = transform ? transform(v) : String(v);
+    if (raw === void 0) continue;
+    const bpSuffix = key === "base" ? "" : `_${key}`;
+    result.style[`--t-${varPrefix}${bpSuffix}${stateSuffix}`] = raw;
+    hasAnyValue = true;
+  }
+  if (hasAnyValue) {
+    result.className = className;
+  }
+  return result;
+}
+function getEnumResponsiveStyles(styles, classPrefix, value, state = "base") {
+  const result = { className: "", style: {} };
+  if (value === void 0) return result;
+  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
+  const getClass = (val, bp) => {
+    const baseKey = classPrefix ? `${classPrefix}-${val}` : val;
+    if (bp === "base") {
+      return stateClassSuffix ? styles[`${baseKey}${stateClassSuffix}`] : styles[baseKey];
+    }
+    return stateClassSuffix ? styles[`${baseKey}_${bp}${stateClassSuffix}`] : styles[`${baseKey}_${bp}`];
+  };
+  if (typeof value === "string") {
+    const cls = getClass(value, "base");
+    if (cls) result.className = cls;
+    return result;
+  }
+  const responsive = value;
+  const classes = [];
+  for (const key of RESPONSIVE_KEYS) {
+    const v = responsive[key];
+    if (v === void 0) continue;
+    const cls = getClass(v, key);
+    if (cls) classes.push(cls);
+  }
+  if (classes.length > 0) {
+    result.className = classes.join(" ");
+  }
+  return result;
+}
+export {
+  getEnumResponsiveStyles,
+  getResponsiveVarStyles
+};
+//# sourceMappingURL=responsive.js.map

package/dist/components/Box/shared/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","sources":["../../../../src/components/Box/shared/responsive.ts"],"sourcesContent":["import type { ResponsiveValue, ResponsiveObject } from \"@/utils/breakpoints\";\nimport { RESPONSIVE_KEYS, STATE_SUFFIXES, STATE_CLASS_SUFFIXES } from \"./constants\";\nimport type { StateKey, StyleResult } from \"./types\";\n\n/**\n * Generic helper for variable-based responsive props using CSS fallback chains.\n *\n * With this pattern, each prop has ONE CSS class per state. The CSS handles\n * breakpoint cascading via nested var() fallbacks in media queries.\n * JS only needs to apply the class and set CSS variables for specified breakpoints.\n *\n * @param styles     CSS module styles object\n * @param classKey   Key to look up in the CSS module (e.g., \"pt\")\n * @param varPrefix  CSS variable prefix (e.g., \"pt\" → --t-pt, --t-pt_sm, etc.)\n * @param value      The prop value (plain or responsive object)\n * @param state      Interaction state (base, hover, focus, active, disabled)\n * @param transform  Optional transform from prop value to CSS string (e.g., getRawValue)\n */\nexport function getResponsiveVarStyles<T>(\n  styles: Record<string, string>,\n  classKey: string,\n  varPrefix: string,\n  value: ResponsiveValue<T> | undefined,\n  state: StateKey = \"base\",\n  transform?: (v: T) => string | undefined\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  const stateSuffix = STATE_SUFFIXES[state];\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  const className = stateClassSuffix\n    ? styles[`${classKey}${stateClassSuffix}`]\n    : styles[classKey];\n\n  if (!className) return result;\n\n  if (typeof value !== \"object\") {\n    const raw = transform ? transform(value) : String(value);\n    if (raw === undefined) return result;\n    result.className = className;\n    result.style[`--t-${varPrefix}${stateSuffix}`] = raw;\n    return result;\n  }\n\n  let hasAnyValue = false;\n  const responsive = value as ResponsiveObject<T>;\n\n  for (const key of RESPONSIVE_KEYS) {\n    const v = responsive[key];\n    if (v === undefined) continue;\n    const raw = transform ? transform(v) : String(v);\n    if (raw === undefined) continue;\n    const bpSuffix = key === \"base\" ? \"\" : `_${key}`;\n    result.style[`--t-${varPrefix}${bpSuffix}${stateSuffix}`] = raw;\n    hasAnyValue = true;\n  }\n\n  if (hasAnyValue) {\n    result.className = className;\n  }\n\n  return result;\n}\n\n/**\n * Generic helper for enum-based responsive props using per-breakpoint CSS classes.\n *\n * Each combination of (value, breakpoint, state) maps to a unique CSS class.\n * No inline styles — pure class-name lookup. Zero runtime cost.\n *\n * CSS class naming convention:\n *   base:       .{classPrefix}-{value}  or  .{value} (if classPrefix is empty)\n *   breakpoint:  .{classPrefix}-{value}_{bp}\n *   state:       .{classPrefix}-{value}{stateClassSuffix}\n *   both:        .{classPrefix}-{value}_{bp}{stateClassSuffix}\n *\n * @param styles       CSS module styles object\n * @param classPrefix  Prefix for class lookup (e.g., \"color\", \"text\", \"flex\"). Empty string for no prefix.\n * @param value        The prop value (plain string or responsive object)\n * @param state        Interaction state (base, hover, focus, active, disabled)\n */\nexport function getEnumResponsiveStyles<T extends string>(\n  styles: Record<string, string>,\n  classPrefix: string,\n  value: ResponsiveValue<T> | undefined,\n  state: StateKey = \"base\"\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  const getClass = (val: string, bp: string): string | undefined => {\n    const baseKey = classPrefix ? `${classPrefix}-${val}` : val;\n    if (bp === \"base\") {\n      return stateClassSuffix ? styles[`${baseKey}${stateClassSuffix}`] : styles[baseKey];\n    }\n    return stateClassSuffix\n      ? styles[`${baseKey}_${bp}${stateClassSuffix}`]\n      : styles[`${baseKey}_${bp}`];\n  };\n\n  if (typeof value === \"string\") {\n    const cls = getClass(value, \"base\");\n    if (cls) result.className = cls;\n    return result;\n  }\n\n  const responsive = value as ResponsiveObject<T>;\n  const classes: string[] = [];\n  for (const key of RESPONSIVE_KEYS) {\n    const v = responsive[key];\n    if (v === undefined) continue;\n    const cls = getClass(v, key);\n    if (cls) classes.push(cls);\n  }\n  if (classes.length > 0) {\n    result.className = classes.join(\" \");\n  }\n\n  return result;\n}\n"],"names":[],"mappings":";AAkBO,SAAS,uBACd,QACA,UACA,WACA,OACA,QAAkB,QAClB,WACa;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAEhC,QAAM,cAAc,eAAe,KAAK;AACxC,QAAM,mBAAmB,qBAAqB,KAAK;AAEnD,QAAM,YAAY,mBACd,OAAO,GAAG,QAAQ,GAAG,gBAAgB,EAAE,IACvC,OAAO,QAAQ;AAEnB,MAAI,CAAC,UAAW,QAAO;AAEvB,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,MAAM,YAAY,UAAU,KAAK,IAAI,OAAO,KAAK;AACvD,QAAI,QAAQ,OAAW,QAAO;AAC9B,WAAO,YAAY;AACnB,WAAO,MAAM,OAAO,SAAS,GAAG,WAAW,EAAE,IAAI;AACjD,WAAO;AAAA,EACT;AAEA,MAAI,cAAc;AAClB,QAAM,aAAa;AAEnB,aAAW,OAAO,iBAAiB;AACjC,UAAM,IAAI,WAAW,GAAG;AACxB,QAAI,MAAM,OAAW;AACrB,UAAM,MAAM,YAAY,UAAU,CAAC,IAAI,OAAO,CAAC;AAC/C,QAAI,QAAQ,OAAW;AACvB,UAAM,WAAW,QAAQ,SAAS,KAAK,IAAI,GAAG;AAC9C,WAAO,MAAM,OAAO,SAAS,GAAG,QAAQ,GAAG,WAAW,EAAE,IAAI;AAC5D,kBAAc;AAAA,EAChB;AAEA,MAAI,aAAa;AACf,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO;AACT;AAmBO,SAAS,wBACd,QACA,aACA,OACA,QAAkB,QACL;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAEhC,QAAM,mBAAmB,qBAAqB,KAAK;AAEnD,QAAM,WAAW,CAAC,KAAa,OAAmC;AAChE,UAAM,UAAU,cAAc,GAAG,WAAW,IAAI,GAAG,KAAK;AACxD,QAAI,OAAO,QAAQ;AACjB,aAAO,mBAAmB,OAAO,GAAG,OAAO,GAAG,gBAAgB,EAAE,IAAI,OAAO,OAAO;AAAA,IACpF;AACA,WAAO,mBACH,OAAO,GAAG,OAAO,IAAI,EAAE,GAAG,gBAAgB,EAAE,IAC5C,OAAO,GAAG,OAAO,IAAI,EAAE,EAAE;AAAA,EAC/B;AAEA,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,MAAM,SAAS,OAAO,MAAM;AAClC,QAAI,YAAY,YAAY;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,aAAa;AACnB,QAAM,UAAoB,CAAA;AAC1B,aAAW,OAAO,iBAAiB;AACjC,UAAM,IAAI,WAAW,GAAG;AACxB,QAAI,MAAM,OAAW;AACrB,UAAM,MAAM,SAAS,GAAG,GAAG;AAC3B,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AACA,MAAI,QAAQ,SAAS,GAAG;AACtB,WAAO,YAAY,QAAQ,KAAK,GAAG;AAAA,EACrC;AAEA,SAAO;AACT;"}

package/dist/components/Box/shared/types.d.ts

@@ -4,4 +4,10 @@ export type StyleResult = {
     className: string;
     style: Record<string, string>;
 };
+export type StateProps<T> = {
+    _hover?: T;
+    _focus?: T;
+    _active?: T;
+    _disabled?: T;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Box/shared/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/shared/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAIzD,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/shared/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,oBAAoB,CAAC;AAIzD,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IAC1B,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,CAAC;CACf,CAAC"}

package/dist/components/Box/sizing/sizing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/sizing/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAKL,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;AAGnC,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACjC,CAAC,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB,CAAC;AAuEF,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,GAAG,gBAAgB,GACpC,WAAW,CAyBb"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/sizing/sizing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,WAAW,CAAC;AAInB,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;AAGnC,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACjC,CAAC,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB,CAAC;AAmBF,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,GAAG,gBAAgB,GACpC,WAAW,CAyBb"}

package/dist/components/Box/sizing/sizing.js

@@ -1,45 +1,13 @@
-import { STATE_SUFFIXES, STATE_CLASS_SUFFIXES, RESPONSIVE_KEYS } from "../shared/constants.js";
 import { getRawValue } from "../shared/spacing.js";
+import { getResponsiveVarStyles } from "../shared/responsive.js";
 import styles from "./sizing.module.css.js";
 import clsx from "clsx";
-function getSizingProp(key, value, state = "base") {
-  const result = { className: "", style: {} };
-  if (value === void 0) return result;
-  const stateSuffix = STATE_SUFFIXES[state];
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  if (typeof value !== "object") {
-    const rawValue = getRawValue(value);
-    if (rawValue !== void 0) {
-      const className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
-      result.className = className || "";
-      result.style[`--t-${key}${stateSuffix}`] = rawValue;
-    }
-    return result;
-  }
-  for (const responsiveKey of RESPONSIVE_KEYS) {
-    const rawValue = getRawValue(value[responsiveKey]);
-    if (rawValue === void 0) continue;
-    let className;
-    let varName;
-    if (responsiveKey === "base") {
-      className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
-      varName = `--t-${key}${stateSuffix}`;
-    } else {
-      className = stateClassSuffix ? styles[`${key}_${responsiveKey}${stateClassSuffix}`] : styles[`${key}_${responsiveKey}`];
-      varName = `--t-${key}_${responsiveKey}${stateSuffix}`;
-    }
-    if (className) {
-      result.className = clsx(result.className, className);
-    }
-    result.style[varName] = rawValue;
-  }
-  return result;
-}
 function getSizingStylesForState(props, state) {
-  const result = { className: "", style: {} };
-  if (!props) return result;
+  if (!props) return { className: "", style: {} };
   const keys = ["w", "h", "minW", "maxW", "minH", "maxH"];
-  const results = keys.map((key) => getSizingProp(key, props[key], state));
+  const results = keys.map(
+    (key) => getResponsiveVarStyles(styles, key, key, props[key], state, getRawValue)
+  );
   return {
     className: clsx(...results.map((r) => r.className)),
     style: Object.assign({}, ...results.map((r) => r.style))

package/dist/components/Box/sizing/sizing.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.js","sources":["../../../../src/components/Box/sizing/sizing.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  RESPONSIVE_KEYS,\n  STATE_SUFFIXES,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n  getRawValue,\n} from \"../shared\";\nimport styles from \"./sizing.module.css\";\nimport clsx from \"clsx\";\n\ntype SizingValue = string | number;\ntype SizingKey = \"w\" | \"h\" | \"minW\" | \"maxW\" | \"minH\" | \"maxH\";\n\nexport type SizingProps = {\n  w?: ResponsiveValue<SizingValue>;\n  h?: ResponsiveValue<SizingValue>;\n  minW?: ResponsiveValue<SizingValue>;\n  maxW?: ResponsiveValue<SizingValue>;\n  minH?: ResponsiveValue<SizingValue>;\n  maxH?: ResponsiveValue<SizingValue>;\n};\n\nexport type SizingStateProps = {\n  _hover?: SizingProps;\n  _focus?: SizingProps;\n  _active?: SizingProps;\n  _disabled?: SizingProps;\n};\n\nfunction getSizingProp(\n  key: SizingKey,\n  value: ResponsiveValue<SizingValue> | undefined,\n  state: StateKey = \"base\"\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  const stateSuffix = STATE_SUFFIXES[state];\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  if (typeof value !== \"object\") {\n    const rawValue = getRawValue(value);\n    if (rawValue !== undefined) {\n      const className = stateClassSuffix\n        ? styles[`${key}${stateClassSuffix}`]\n        : styles[key];\n      result.className = className || \"\";\n      result.style[`--t-${key}${stateSuffix}`] = rawValue;\n    }\n    return result;\n  }\n\n  for (const responsiveKey of RESPONSIVE_KEYS) {\n    const rawValue = getRawValue(value[responsiveKey]);\n    if (rawValue === undefined) continue;\n\n    let className: string | undefined;\n    let varName: string;\n\n    if (responsiveKey === \"base\") {\n      className = stateClassSuffix\n        ? styles[`${key}${stateClassSuffix}`]\n        : styles[key];\n      varName = `--t-${key}${stateSuffix}`;\n    } else {\n      className = stateClassSuffix\n        ? styles[`${key}_${responsiveKey}${stateClassSuffix}`]\n        : styles[`${key}_${responsiveKey}`];\n      varName = `--t-${key}_${responsiveKey}${stateSuffix}`;\n    }\n\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n    result.style[varName] = rawValue;\n  }\n\n  return result;\n}\n\nfunction getSizingStylesForState(\n  props: SizingProps | undefined,\n  state: StateKey\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (!props) return result;\n\n  const keys: SizingKey[] = [\"w\", \"h\", \"minW\", \"maxW\", \"minH\", \"maxH\"];\n  const results = keys.map((key) => getSizingProp(key, props[key], state));\n\n  return {\n    className: clsx(...results.map((r) => r.className)),\n    style: Object.assign({}, ...results.map((r) => r.style)),\n  };\n}\n\nexport function getSizingStyles(\n  props: SizingProps & SizingStateProps\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getSizingStylesForState(baseProps, \"base\");\n  const hoverStyles = getSizingStylesForState(_hover, \"hover\");\n  const focusStyles = getSizingStylesForState(_focus, \"focus\");\n  const activeStyles = getSizingStylesForState(_active, \"active\");\n  const disabledStyles = getSizingStylesForState(_disabled, \"disabled\");\n\n  return {\n    className: clsx(\n      baseStyles.className,\n      hoverStyles.className,\n      focusStyles.className,\n      activeStyles.className,\n      disabledStyles.className\n    ),\n    style: {\n      ...baseStyles.style,\n      ...hoverStyles.style,\n      ...focusStyles.style,\n      ...activeStyles.style,\n      ...disabledStyles.style,\n    },\n  };\n}\n"],"names":[],"mappings":";;;;AA+BA,SAAS,cACP,KACA,OACA,QAAkB,QACL;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAEhC,QAAM,cAAc,eAAe,KAAK;AACxC,QAAM,mBAAmB,qBAAqB,KAAK;AAEnD,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,WAAW,YAAY,KAAK;AAClC,QAAI,aAAa,QAAW;AAC1B,YAAM,YAAY,mBACd,OAAO,GAAG,GAAG,GAAG,gBAAgB,EAAE,IAClC,OAAO,GAAG;AACd,aAAO,YAAY,aAAa;AAChC,aAAO,MAAM,OAAO,GAAG,GAAG,WAAW,EAAE,IAAI;AAAA,IAC7C;AACA,WAAO;AAAA,EACT;AAEA,aAAW,iBAAiB,iBAAiB;AAC3C,UAAM,WAAW,YAAY,MAAM,aAAa,CAAC;AACjD,QAAI,aAAa,OAAW;AAE5B,QAAI;AACJ,QAAI;AAEJ,QAAI,kBAAkB,QAAQ;AAC5B,kBAAY,mBACR,OAAO,GAAG,GAAG,GAAG,gBAAgB,EAAE,IAClC,OAAO,GAAG;AACd,gBAAU,OAAO,GAAG,GAAG,WAAW;AAAA,IACpC,OAAO;AACL,kBAAY,mBACR,OAAO,GAAG,GAAG,IAAI,aAAa,GAAG,gBAAgB,EAAE,IACnD,OAAO,GAAG,GAAG,IAAI,aAAa,EAAE;AACpC,gBAAU,OAAO,GAAG,IAAI,aAAa,GAAG,WAAW;AAAA,IACrD;AAEA,QAAI,WAAW;AACb,aAAO,YAAY,KAAK,OAAO,WAAW,SAAS;AAAA,IACrD;AACA,WAAO,MAAM,OAAO,IAAI;AAAA,EAC1B;AAEA,SAAO;AACT;AAEA,SAAS,wBACP,OACA,OACa;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,OAAoB,CAAC,KAAK,KAAK,QAAQ,QAAQ,QAAQ,MAAM;AACnE,QAAM,UAAU,KAAK,IAAI,CAAC,QAAQ,cAAc,KAAK,MAAM,GAAG,GAAG,KAAK,CAAC;AAEvE,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;AAAA,IAClD,OAAO,OAAO,OAAO,IAAI,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAAA,EAAA;AAE3D;AAEO,SAAS,gBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,wBAAwB,WAAW,MAAM;AAC5D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,eAAe,wBAAwB,SAAS,QAAQ;AAC9D,QAAM,iBAAiB,wBAAwB,WAAW,UAAU;AAEpE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO;AAAA,MACL,GAAG,WAAW;AAAA,MACd,GAAG,YAAY;AAAA,MACf,GAAG,YAAY;AAAA,MACf,GAAG,aAAa;AAAA,MAChB,GAAG,eAAe;AAAA,IAAA;AAAA,EACpB;AAEJ;"}
+{"version":3,"file":"sizing.js","sources":["../../../../src/components/Box/sizing/sizing.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  type StateKey,\n  type StyleResult,\n  getRawValue,\n  getResponsiveVarStyles,\n} from \"../shared\";\nimport styles from \"./sizing.module.css\";\nimport clsx from \"clsx\";\n\ntype SizingValue = string | number;\ntype SizingKey = \"w\" | \"h\" | \"minW\" | \"maxW\" | \"minH\" | \"maxH\";\n\nexport type SizingProps = {\n  w?: ResponsiveValue<SizingValue>;\n  h?: ResponsiveValue<SizingValue>;\n  minW?: ResponsiveValue<SizingValue>;\n  maxW?: ResponsiveValue<SizingValue>;\n  minH?: ResponsiveValue<SizingValue>;\n  maxH?: ResponsiveValue<SizingValue>;\n};\n\nexport type SizingStateProps = {\n  _hover?: SizingProps;\n  _focus?: SizingProps;\n  _active?: SizingProps;\n  _disabled?: SizingProps;\n};\n\nfunction getSizingStylesForState(\n  props: SizingProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const keys: SizingKey[] = [\"w\", \"h\", \"minW\", \"maxW\", \"minH\", \"maxH\"];\n  const results = keys.map((key) =>\n    getResponsiveVarStyles(styles, key, key, props[key], state, getRawValue)\n  );\n\n  return {\n    className: clsx(...results.map((r) => r.className)),\n    style: Object.assign({}, ...results.map((r) => r.style)),\n  };\n}\n\nexport function getSizingStyles(\n  props: SizingProps & SizingStateProps\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getSizingStylesForState(baseProps, \"base\");\n  const hoverStyles = getSizingStylesForState(_hover, \"hover\");\n  const focusStyles = getSizingStylesForState(_focus, \"focus\");\n  const activeStyles = getSizingStylesForState(_active, \"active\");\n  const disabledStyles = getSizingStylesForState(_disabled, \"disabled\");\n\n  return {\n    className: clsx(\n      baseStyles.className,\n      hoverStyles.className,\n      focusStyles.className,\n      activeStyles.className,\n      disabledStyles.className\n    ),\n    style: {\n      ...baseStyles.style,\n      ...hoverStyles.style,\n      ...focusStyles.style,\n      ...activeStyles.style,\n      ...disabledStyles.style,\n    },\n  };\n}\n"],"names":[],"mappings":";;;;AA6BA,SAAS,wBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,OAAoB,CAAC,KAAK,KAAK,QAAQ,QAAQ,QAAQ,MAAM;AACnE,QAAM,UAAU,KAAK;AAAA,IAAI,CAAC,QACxB,uBAAuB,QAAQ,KAAK,KAAK,MAAM,GAAG,GAAG,OAAO,WAAW;AAAA,EAAA;AAGzE,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;AAAA,IAClD,OAAO,OAAO,OAAO,IAAI,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAAA,EAAA;AAE3D;AAEO,SAAS,gBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,wBAAwB,WAAW,MAAM;AAC5D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,eAAe,wBAAwB,SAAS,QAAQ;AAC9D,QAAM,iBAAiB,wBAAwB,WAAW,UAAU;AAEpE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO;AAAA,MACL,GAAG,WAAW;AAAA,MACd,GAAG,YAAY;AAAA,MACf,GAAG,YAAY;AAAA,MACf,GAAG,aAAa;AAAA,MAChB,GAAG,eAAe;AAAA,IAAA;AAAA,EACpB;AAEJ;"}