@tosui/react 0.1.3 → 0.1.5

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

@@ -1,14 +1,8 @@
 import { ResponsiveValue } from '../../../utils/breakpoints';
-import { StyleResult } from '../shared';
+import { StateProps, StyleResult } from '../shared';
 export type OpacityValue = "invisible" | "faint" | "semi" | "full";
 export type OpacityProps = {
     opacity?: ResponsiveValue<OpacityValue>;
 };
-export type OpacityStateProps = {
-    _hover?: OpacityProps;
-    _focus?: OpacityProps;
-    _active?: OpacityProps;
-    _disabled?: OpacityProps;
-};
-export declare function getOpacityStyles(props: OpacityProps & OpacityStateProps): StyleResult;
+export declare function getOpacityStyles(props: OpacityProps & StateProps<OpacityProps>): StyleResult;
 //# sourceMappingURL=opacity.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"opacity.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/opacity/opacity.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CAAC;AAiDF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,GAAG,iBAAiB,GACtC,WAAW,CAmBb"}
+{"version":3,"file":"opacity.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/opacity/opacity.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,YAAY,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACzC,CAAC;AAWF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,GAC7C,WAAW,CAmBb"}

package/dist/components/Box/opacity/opacity.js

@@ -1,40 +1,17 @@
-import { RESPONSIVE_KEYS, STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import { getEnumResponsiveStyles } from "../shared/responsive.js";
 import styles from "./opacity.module.css.js";
 import clsx from "clsx";
-function getOpacityClass(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 getOpacityStylesForValue(value, state) {
-  const result = { className: "", style: {} };
-  if (value === void 0) return result;
-  if (typeof value === "string") {
-    const className = getOpacityClass(value, "base", state);
-    if (className) {
-      result.className = className;
-    }
-    return result;
-  }
-  for (const responsiveKey of RESPONSIVE_KEYS) {
-    const opacityValue = value[responsiveKey];
-    if (opacityValue === void 0) continue;
-    const className = getOpacityClass(opacityValue, responsiveKey, state);
-    if (className) {
-      result.className = clsx(result.className, className);
-    }
-  }
-  return result;
+function getOpacityStylesForState(props, state) {
+  if (!props) return { className: "", style: {} };
+  return getEnumResponsiveStyles(styles, "", props.opacity, state);
 }
 function getOpacityStyles(props) {
-  const { opacity, _hover, _focus, _active, _disabled } = props;
-  const baseStyles = getOpacityStylesForValue(opacity, "base");
-  const hoverStyles = getOpacityStylesForValue(_hover?.opacity, "hover");
-  const focusStyles = getOpacityStylesForValue(_focus?.opacity, "focus");
-  const activeStyles = getOpacityStylesForValue(_active?.opacity, "active");
-  const disabledStyles = getOpacityStylesForValue(_disabled?.opacity, "disabled");
+  const { _hover, _focus, _active, _disabled, ...baseProps } = props;
+  const baseStyles = getOpacityStylesForState(baseProps, "base");
+  const hoverStyles = getOpacityStylesForState(_hover, "hover");
+  const focusStyles = getOpacityStylesForState(_focus, "focus");
+  const activeStyles = getOpacityStylesForState(_active, "active");
+  const disabledStyles = getOpacityStylesForState(_disabled, "disabled");
   return {
     className: clsx(
       baseStyles.className,

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

@@ -1 +1 @@
-{"version":3,"file":"opacity.js","sources":["../../../../src/components/Box/opacity/opacity.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 \"./opacity.module.css\";\nimport clsx from \"clsx\";\n\nexport type OpacityValue = \"invisible\" | \"faint\" | \"semi\" | \"full\";\n\nexport type OpacityProps = {\n  opacity?: ResponsiveValue<OpacityValue>;\n};\n\nexport type OpacityStateProps = {\n  _hover?: OpacityProps;\n  _focus?: OpacityProps;\n  _active?: OpacityProps;\n  _disabled?: OpacityProps;\n};\n\nfunction getOpacityClass(\n  value: OpacityValue,\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 getOpacityStylesForValue(\n  value: ResponsiveValue<OpacityValue> | 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 = getOpacityClass(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 opacityValue = value[responsiveKey];\n    if (opacityValue === undefined) continue;\n\n    const className = getOpacityClass(opacityValue, responsiveKey, state);\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n  }\n\n  return result;\n}\n\nexport function getOpacityStyles(\n  props: OpacityProps & OpacityStateProps\n): StyleResult {\n  const { opacity, _hover, _focus, _active, _disabled } = props;\n\n  const baseStyles = getOpacityStylesForValue(opacity, \"base\");\n  const hoverStyles = getOpacityStylesForValue(_hover?.opacity, \"hover\");\n  const focusStyles = getOpacityStylesForValue(_focus?.opacity, \"focus\");\n  const activeStyles = getOpacityStylesForValue(_active?.opacity, \"active\");\n  const disabledStyles = getOpacityStylesForValue(_disabled?.opacity, \"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,gBACP,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,yBACP,OACA,OACa;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAEhC,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,YAAY,gBAAgB,OAAO,QAAQ,KAAK;AACtD,QAAI,WAAW;AACb,aAAO,YAAY;AAAA,IACrB;AACA,WAAO;AAAA,EACT;AAEA,aAAW,iBAAiB,iBAAiB;AAC3C,UAAM,eAAe,MAAM,aAAa;AACxC,QAAI,iBAAiB,OAAW;AAEhC,UAAM,YAAY,gBAAgB,cAAc,eAAe,KAAK;AACpE,QAAI,WAAW;AACb,aAAO,YAAY,KAAK,OAAO,WAAW,SAAS;AAAA,IACrD;AAAA,EACF;AAEA,SAAO;AACT;AAEO,SAAS,iBACd,OACa;AACb,QAAM,EAAE,SAAS,QAAQ,QAAQ,SAAS,cAAc;AAExD,QAAM,aAAa,yBAAyB,SAAS,MAAM;AAC3D,QAAM,cAAc,yBAAyB,QAAQ,SAAS,OAAO;AACrE,QAAM,cAAc,yBAAyB,QAAQ,SAAS,OAAO;AACrE,QAAM,eAAe,yBAAyB,SAAS,SAAS,QAAQ;AACxE,QAAM,iBAAiB,yBAAyB,WAAW,SAAS,UAAU;AAE9E,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":"opacity.js","sources":["../../../../src/components/Box/opacity/opacity.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 \"./opacity.module.css\";\nimport clsx from \"clsx\";\n\nexport type OpacityValue = \"invisible\" | \"faint\" | \"semi\" | \"full\";\n\nexport type OpacityProps = {\n  opacity?: ResponsiveValue<OpacityValue>;\n};\n\nfunction getOpacityStylesForState(\n  props: OpacityProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  return getEnumResponsiveStyles(styles, \"\", props.opacity, state);\n}\n\nexport function getOpacityStyles(\n  props: OpacityProps & StateProps<OpacityProps>\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getOpacityStylesForState(baseProps, \"base\");\n  const hoverStyles = getOpacityStylesForState(_hover, \"hover\");\n  const focusStyles = getOpacityStylesForState(_focus, \"focus\");\n  const activeStyles = getOpacityStylesForState(_active, \"active\");\n  const disabledStyles = getOpacityStylesForState(_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,yBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,SAAO,wBAAwB,QAAQ,IAAI,MAAM,SAAS,KAAK;AACjE;AAEO,SAAS,iBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,yBAAyB,WAAW,MAAM;AAC7D,QAAM,cAAc,yBAAyB,QAAQ,OAAO;AAC5D,QAAM,cAAc,yBAAyB,QAAQ,OAAO;AAC5D,QAAM,eAAe,yBAAyB,SAAS,QAAQ;AAC/D,QAAM,iBAAiB,yBAAyB,WAAW,UAAU;AAErE,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/overflow/overflow.d.ts

@@ -1,16 +1,10 @@
 import { ResponsiveValue } from '../../../utils/breakpoints';
-import { StyleResult } from '../shared';
+import { StateProps, StyleResult } from '../shared';
 export type OverflowValue = "auto" | "hidden" | "scroll" | "visible";
 export type OverflowProps = {
     overflow?: ResponsiveValue<OverflowValue>;
     overflowX?: ResponsiveValue<OverflowValue>;
     overflowY?: ResponsiveValue<OverflowValue>;
 };
-export type OverflowStateProps = {
-    _hover?: OverflowProps;
-    _focus?: OverflowProps;
-    _active?: OverflowProps;
-    _disabled?: OverflowProps;
-};
-export declare function getOverflowStyles(props: OverflowProps & OverflowStateProps): StyleResult;
+export declare function getOverflowStyles(props: OverflowProps & StateProps<OverflowProps>): StyleResult;
 //# sourceMappingURL=overflow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"overflow.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/overflow/overflow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B,CAAC;AA6EF,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,aAAa,GAAG,kBAAkB,GACxC,WAAW,CAmBb"}
+{"version":3,"file":"overflow.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/overflow/overflow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;CAC5C,CAAC;AAmEF,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,aAAa,GAAG,UAAU,CAAC,aAAa,CAAC,GAC/C,WAAW,CAmBb"}

package/dist/components/Box/overflow/overflow.js

@@ -1,53 +1,48 @@
 import { RESPONSIVE_KEYS, STATE_CLASS_SUFFIXES } from "../shared/constants.js";
 import styles from "./overflow.module.css.js";
 import clsx from "clsx";
-const CLASS_SUFFIX_MAP = {
-  overflow: "",
-  overflowX: "X",
-  overflowY: "Y"
-};
-function getOverflowClass(value, type, responsiveKey, state) {
+function getOverflowClassForProp(value, suffix, bp, state) {
   const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  const typeSuffix = CLASS_SUFFIX_MAP[type];
-  const baseClassName = `${value}${typeSuffix}`;
-  if (responsiveKey === "base") {
-    return stateClassSuffix ? styles[`${baseClassName}${stateClassSuffix}`] : styles[baseClassName];
+  const baseKey = `${value}${suffix}`;
+  if (bp === "base") {
+    return stateClassSuffix ? styles[`${baseKey}${stateClassSuffix}`] : styles[baseKey];
   }
-  return stateClassSuffix ? styles[`${baseClassName}_${responsiveKey}${stateClassSuffix}`] : styles[`${baseClassName}_${responsiveKey}`];
+  return stateClassSuffix ? styles[`${baseKey}_${bp}${stateClassSuffix}`] : styles[`${baseKey}_${bp}`];
 }
-function getOverflowStylesForProp(value, type, state) {
+function resolveOverflowProp(value, suffix, state) {
   const result = { className: "", style: {} };
   if (value === void 0) return result;
   if (typeof value === "string") {
-    const className = getOverflowClass(value, type, "base", state);
-    if (className) {
-      result.className = className;
-    }
+    const cls = getOverflowClassForProp(value, suffix, "base", state);
+    if (cls) result.className = cls;
     return result;
   }
-  for (const responsiveKey of RESPONSIVE_KEYS) {
-    const overflowValue = value[responsiveKey];
-    if (overflowValue === void 0) continue;
-    const className = getOverflowClass(overflowValue, type, responsiveKey, state);
-    if (className) {
-      result.className = clsx(result.className, className);
-    }
+  const responsive = value;
+  const classes = [];
+  for (const key of RESPONSIVE_KEYS) {
+    const v = responsive[key];
+    if (v === void 0) continue;
+    const cls = getOverflowClassForProp(v, suffix, key, state);
+    if (cls) classes.push(cls);
+  }
+  if (classes.length > 0) {
+    result.className = classes.join(" ");
   }
   return result;
 }
 function getOverflowStylesForState(props, state) {
   if (!props) return { className: "", style: {} };
-  const overflow = getOverflowStylesForProp(props.overflow, "overflow", state);
-  const overflowX = getOverflowStylesForProp(props.overflowX, "overflowX", state);
-  const overflowY = getOverflowStylesForProp(props.overflowY, "overflowY", state);
+  const overflowResult = resolveOverflowProp(props.overflow, "", state);
+  const overflowXResult = resolveOverflowProp(props.overflowX, "X", state);
+  const overflowYResult = resolveOverflowProp(props.overflowY, "Y", state);
   return {
-    className: clsx(overflow.className, overflowX.className, overflowY.className),
+    className: clsx(overflowResult.className, overflowXResult.className, overflowYResult.className),
     style: {}
   };
 }
 function getOverflowStyles(props) {
-  const { overflow, overflowX, overflowY, _hover, _focus, _active, _disabled } = props;
-  const baseStyles = getOverflowStylesForState({ overflow, overflowX, overflowY }, "base");
+  const { _hover, _focus, _active, _disabled, ...baseProps } = props;
+  const baseStyles = getOverflowStylesForState(baseProps, "base");
   const hoverStyles = getOverflowStylesForState(_hover, "hover");
   const focusStyles = getOverflowStylesForState(_focus, "focus");
   const activeStyles = getOverflowStylesForState(_active, "active");

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

@@ -1 +1 @@
-{"version":3,"file":"overflow.js","sources":["../../../../src/components/Box/overflow/overflow.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 \"./overflow.module.css\";\nimport clsx from \"clsx\";\n\nexport type OverflowValue = \"auto\" | \"hidden\" | \"scroll\" | \"visible\";\n\nexport type OverflowProps = {\n  overflow?: ResponsiveValue<OverflowValue>;\n  overflowX?: ResponsiveValue<OverflowValue>;\n  overflowY?: ResponsiveValue<OverflowValue>;\n};\n\nexport type OverflowStateProps = {\n  _hover?: OverflowProps;\n  _focus?: OverflowProps;\n  _active?: OverflowProps;\n  _disabled?: OverflowProps;\n};\n\ntype OverflowType = \"overflow\" | \"overflowX\" | \"overflowY\";\n\nconst CLASS_SUFFIX_MAP: Record<OverflowType, string> = {\n  overflow: \"\",\n  overflowX: \"X\",\n  overflowY: \"Y\",\n};\n\nfunction getOverflowClass(\n  value: OverflowValue,\n  type: OverflowType,\n  responsiveKey: (typeof RESPONSIVE_KEYS)[number],\n  state: StateKey\n): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  const typeSuffix = CLASS_SUFFIX_MAP[type];\n  const baseClassName = `${value}${typeSuffix}`;\n\n  if (responsiveKey === \"base\") {\n    return stateClassSuffix\n      ? styles[`${baseClassName}${stateClassSuffix}`]\n      : styles[baseClassName];\n  }\n\n  return stateClassSuffix\n    ? styles[`${baseClassName}_${responsiveKey}${stateClassSuffix}`]\n    : styles[`${baseClassName}_${responsiveKey}`];\n}\n\nfunction getOverflowStylesForProp(\n  value: ResponsiveValue<OverflowValue> | undefined,\n  type: OverflowType,\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 = getOverflowClass(value, type, \"base\", state);\n    if (className) {\n      result.className = className;\n    }\n    return result;\n  }\n\n  for (const responsiveKey of RESPONSIVE_KEYS) {\n    const overflowValue = value[responsiveKey];\n    if (overflowValue === undefined) continue;\n\n    const className = getOverflowClass(overflowValue, type, responsiveKey, state);\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n  }\n\n  return result;\n}\n\nfunction getOverflowStylesForState(\n  props: OverflowProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const overflow = getOverflowStylesForProp(props.overflow, \"overflow\", state);\n  const overflowX = getOverflowStylesForProp(props.overflowX, \"overflowX\", state);\n  const overflowY = getOverflowStylesForProp(props.overflowY, \"overflowY\", state);\n\n  return {\n    className: clsx(overflow.className, overflowX.className, overflowY.className),\n    style: {},\n  };\n}\n\nexport function getOverflowStyles(\n  props: OverflowProps & OverflowStateProps\n): StyleResult {\n  const { overflow, overflowX, overflowY, _hover, _focus, _active, _disabled } = props;\n\n  const baseStyles = getOverflowStylesForState({ overflow, overflowX, overflowY }, \"base\");\n  const hoverStyles = getOverflowStylesForState(_hover, \"hover\");\n  const focusStyles = getOverflowStylesForState(_focus, \"focus\");\n  const activeStyles = getOverflowStylesForState(_active, \"active\");\n  const disabledStyles = getOverflowStylesForState(_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":";;;AA2BA,MAAM,mBAAiD;AAAA,EACrD,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AACb;AAEA,SAAS,iBACP,OACA,MACA,eACA,OACoB;AACpB,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM,aAAa,iBAAiB,IAAI;AACxC,QAAM,gBAAgB,GAAG,KAAK,GAAG,UAAU;AAE3C,MAAI,kBAAkB,QAAQ;AAC5B,WAAO,mBACH,OAAO,GAAG,aAAa,GAAG,gBAAgB,EAAE,IAC5C,OAAO,aAAa;AAAA,EAC1B;AAEA,SAAO,mBACH,OAAO,GAAG,aAAa,IAAI,aAAa,GAAG,gBAAgB,EAAE,IAC7D,OAAO,GAAG,aAAa,IAAI,aAAa,EAAE;AAChD;AAEA,SAAS,yBACP,OACA,MACA,OACa;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAEhC,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,YAAY,iBAAiB,OAAO,MAAM,QAAQ,KAAK;AAC7D,QAAI,WAAW;AACb,aAAO,YAAY;AAAA,IACrB;AACA,WAAO;AAAA,EACT;AAEA,aAAW,iBAAiB,iBAAiB;AAC3C,UAAM,gBAAgB,MAAM,aAAa;AACzC,QAAI,kBAAkB,OAAW;AAEjC,UAAM,YAAY,iBAAiB,eAAe,MAAM,eAAe,KAAK;AAC5E,QAAI,WAAW;AACb,aAAO,YAAY,KAAK,OAAO,WAAW,SAAS;AAAA,IACrD;AAAA,EACF;AAEA,SAAO;AACT;AAEA,SAAS,0BACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,WAAW,yBAAyB,MAAM,UAAU,YAAY,KAAK;AAC3E,QAAM,YAAY,yBAAyB,MAAM,WAAW,aAAa,KAAK;AAC9E,QAAM,YAAY,yBAAyB,MAAM,WAAW,aAAa,KAAK;AAE9E,SAAO;AAAA,IACL,WAAW,KAAK,SAAS,WAAW,UAAU,WAAW,UAAU,SAAS;AAAA,IAC5E,OAAO,CAAA;AAAA,EAAC;AAEZ;AAEO,SAAS,kBACd,OACa;AACb,QAAM,EAAE,UAAU,WAAW,WAAW,QAAQ,QAAQ,SAAS,cAAc;AAE/E,QAAM,aAAa,0BAA0B,EAAE,UAAU,WAAW,UAAA,GAAa,MAAM;AACvF,QAAM,cAAc,0BAA0B,QAAQ,OAAO;AAC7D,QAAM,cAAc,0BAA0B,QAAQ,OAAO;AAC7D,QAAM,eAAe,0BAA0B,SAAS,QAAQ;AAChE,QAAM,iBAAiB,0BAA0B,WAAW,UAAU;AAEtE,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":"overflow.js","sources":["../../../../src/components/Box/overflow/overflow.ts"],"sourcesContent":["import type { ResponsiveValue, ResponsiveObject } from \"@/utils/breakpoints\";\nimport {\n  RESPONSIVE_KEYS,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StateProps,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./overflow.module.css\";\nimport clsx from \"clsx\";\n\nexport type OverflowValue = \"auto\" | \"hidden\" | \"scroll\" | \"visible\";\n\nexport type OverflowProps = {\n  overflow?: ResponsiveValue<OverflowValue>;\n  overflowX?: ResponsiveValue<OverflowValue>;\n  overflowY?: ResponsiveValue<OverflowValue>;\n};\n\n/**\n * Overflow uses suffixed class names (e.g., \"autoX\", \"hiddenY\") rather than\n * prefixed ones, so we use a small custom lookup instead of getEnumResponsiveStyles.\n */\nfunction getOverflowClassForProp(\n  value: OverflowValue,\n  suffix: string,\n  bp: string,\n  state: StateKey\n): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  const baseKey = `${value}${suffix}`;\n\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\nfunction resolveOverflowProp(\n  value: ResponsiveValue<OverflowValue> | undefined,\n  suffix: string,\n  state: StateKey\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n  if (value === undefined) return result;\n\n  if (typeof value === \"string\") {\n    const cls = getOverflowClassForProp(value, suffix, \"base\", state);\n    if (cls) result.className = cls;\n    return result;\n  }\n\n  const responsive = value as ResponsiveObject<OverflowValue>;\n  const classes: string[] = [];\n  for (const key of RESPONSIVE_KEYS) {\n    const v = responsive[key];\n    if (v === undefined) continue;\n    const cls = getOverflowClassForProp(v, suffix, key, state);\n    if (cls) classes.push(cls);\n  }\n  if (classes.length > 0) {\n    result.className = classes.join(\" \");\n  }\n  return result;\n}\n\nfunction getOverflowStylesForState(\n  props: OverflowProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const overflowResult = resolveOverflowProp(props.overflow, \"\", state);\n  const overflowXResult = resolveOverflowProp(props.overflowX, \"X\", state);\n  const overflowYResult = resolveOverflowProp(props.overflowY, \"Y\", state);\n\n  return {\n    className: clsx(overflowResult.className, overflowXResult.className, overflowYResult.className),\n    style: {},\n  };\n}\n\nexport function getOverflowStyles(\n  props: OverflowProps & StateProps<OverflowProps>\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getOverflowStylesForState(baseProps, \"base\");\n  const hoverStyles = getOverflowStylesForState(_hover, \"hover\");\n  const focusStyles = getOverflowStylesForState(_focus, \"focus\");\n  const activeStyles = getOverflowStylesForState(_active, \"active\");\n  const disabledStyles = getOverflowStylesForState(_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":";;;AAuBA,SAAS,wBACP,OACA,QACA,IACA,OACoB;AACpB,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,QAAM,UAAU,GAAG,KAAK,GAAG,MAAM;AAEjC,MAAI,OAAO,QAAQ;AACjB,WAAO,mBAAmB,OAAO,GAAG,OAAO,GAAG,gBAAgB,EAAE,IAAI,OAAO,OAAO;AAAA,EACpF;AACA,SAAO,mBACH,OAAO,GAAG,OAAO,IAAI,EAAE,GAAG,gBAAgB,EAAE,IAC5C,OAAO,GAAG,OAAO,IAAI,EAAE,EAAE;AAC/B;AAEA,SAAS,oBACP,OACA,QACA,OACa;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AACrD,MAAI,UAAU,OAAW,QAAO;AAEhC,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,MAAM,wBAAwB,OAAO,QAAQ,QAAQ,KAAK;AAChE,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,wBAAwB,GAAG,QAAQ,KAAK,KAAK;AACzD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AACA,MAAI,QAAQ,SAAS,GAAG;AACtB,WAAO,YAAY,QAAQ,KAAK,GAAG;AAAA,EACrC;AACA,SAAO;AACT;AAEA,SAAS,0BACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,iBAAiB,oBAAoB,MAAM,UAAU,IAAI,KAAK;AACpE,QAAM,kBAAkB,oBAAoB,MAAM,WAAW,KAAK,KAAK;AACvE,QAAM,kBAAkB,oBAAoB,MAAM,WAAW,KAAK,KAAK;AAEvE,SAAO;AAAA,IACL,WAAW,KAAK,eAAe,WAAW,gBAAgB,WAAW,gBAAgB,SAAS;AAAA,IAC9F,OAAO,CAAA;AAAA,EAAC;AAEZ;AAEO,SAAS,kBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,0BAA0B,WAAW,MAAM;AAC9D,QAAM,cAAc,0BAA0B,QAAQ,OAAO;AAC7D,QAAM,cAAc,0BAA0B,QAAQ,OAAO;AAC7D,QAAM,eAAe,0BAA0B,SAAS,QAAQ;AAChE,QAAM,iBAAiB,0BAA0B,WAAW,UAAU;AAEtE,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/padding/padding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"padding.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/padding/padding.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAKL,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAIpC,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAClC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CAAC;AAgGF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,GAAG,iBAAiB,GACtC,WAAW,CAyBb"}
+{"version":3,"file":"padding.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/padding/padding.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,WAAW,CAAC;AAInB,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAIpC,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAClC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CAAC;AAgCF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,GAAG,iBAAiB,GACtC,WAAW,CAyBb"}

package/dist/components/Box/padding/padding.js

@@ -1,40 +1,7 @@
-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 "./padding.module.css.js";
 import clsx from "clsx";
-function getSpacingProps(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 resolvePaddingValue(key, props) {
   const shorthandMap = {
     pt: "py",
@@ -45,25 +12,14 @@ function resolvePaddingValue(key, props) {
   return props[key] ?? props[shorthandMap[key]] ?? props.p;
 }
 function getPaddingStylesForState(props, state) {
-  const result = { className: "", style: {} };
-  if (!props) return result;
-  const paddingTop = getSpacingProps("pt", resolvePaddingValue("pt", props), state);
-  const paddingRight = getSpacingProps("pr", resolvePaddingValue("pr", props), state);
-  const paddingBottom = getSpacingProps("pb", resolvePaddingValue("pb", props), state);
-  const paddingLeft = getSpacingProps("pl", resolvePaddingValue("pl", props), state);
+  if (!props) return { className: "", style: {} };
+  const keys = ["pt", "pr", "pb", "pl"];
+  const results = keys.map(
+    (key) => getResponsiveVarStyles(styles, key, key, resolvePaddingValue(key, props), state, getRawValue)
+  );
   return {
-    className: clsx(
-      paddingTop.className,
-      paddingRight.className,
-      paddingBottom.className,
-      paddingLeft.className
-    ),
-    style: {
-      ...paddingTop.style,
-      ...paddingRight.style,
-      ...paddingBottom.style,
-      ...paddingLeft.style
-    }
+    className: clsx(...results.map((r) => r.className)),
+    style: Object.assign({}, ...results.map((r) => r.style))
   };
 }
 function getPaddingStyles(props) {

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

@@ -1 +1 @@
-{"version":3,"file":"padding.js","sources":["../../../../src/components/Box/padding/padding.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 \"./padding.module.css\";\nimport clsx from \"clsx\";\n\ntype SpacingValue = string | number;\ntype PaddingKey = \"pt\" | \"pr\" | \"pb\" | \"pl\";\ntype PaddingShorthandKey = \"p\" | \"px\" | \"py\";\n\nexport type PaddingProps = {\n  p?: ResponsiveValue<SpacingValue>;\n  pt?: ResponsiveValue<SpacingValue>;\n  pr?: ResponsiveValue<SpacingValue>;\n  pb?: ResponsiveValue<SpacingValue>;\n  pl?: ResponsiveValue<SpacingValue>;\n  px?: ResponsiveValue<SpacingValue>;\n  py?: ResponsiveValue<SpacingValue>;\n};\n\nexport type PaddingStateProps = {\n  _hover?: PaddingProps;\n  _focus?: PaddingProps;\n  _active?: PaddingProps;\n  _disabled?: PaddingProps;\n};\n\nfunction getSpacingProps(\n  key: PaddingKey,\n  value: ResponsiveValue<SpacingValue> | 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 resolvePaddingValue(\n  key: PaddingKey,\n  props: PaddingProps\n): ResponsiveValue<SpacingValue> | undefined {\n  const shorthandMap: Record<PaddingKey, PaddingShorthandKey> = {\n    pt: \"py\",\n    pb: \"py\",\n    pr: \"px\",\n    pl: \"px\",\n  };\n  return props[key] ?? props[shorthandMap[key]] ?? props.p;\n}\n\nfunction getPaddingStylesForState(\n  props: PaddingProps | undefined,\n  state: StateKey\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (!props) return result;\n\n  const paddingTop = getSpacingProps(\"pt\", resolvePaddingValue(\"pt\", props), state);\n  const paddingRight = getSpacingProps(\"pr\", resolvePaddingValue(\"pr\", props), state);\n  const paddingBottom = getSpacingProps(\"pb\", resolvePaddingValue(\"pb\", props), state);\n  const paddingLeft = getSpacingProps(\"pl\", resolvePaddingValue(\"pl\", props), state);\n\n  return {\n    className: clsx(\n      paddingTop.className,\n      paddingRight.className,\n      paddingBottom.className,\n      paddingLeft.className\n    ),\n    style: {\n      ...paddingTop.style,\n      ...paddingRight.style,\n      ...paddingBottom.style,\n      ...paddingLeft.style,\n    },\n  };\n}\n\nexport function getPaddingStyles(\n  props: PaddingProps & PaddingStateProps\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getPaddingStylesForState(baseProps, \"base\");\n  const hoverStyles = getPaddingStylesForState(_hover, \"hover\");\n  const focusStyles = getPaddingStylesForState(_focus, \"focus\");\n  const activeStyles = getPaddingStylesForState(_active, \"active\");\n  const disabledStyles = getPaddingStylesForState(_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":"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"}
+{"version":3,"file":"padding.js","sources":["../../../../src/components/Box/padding/padding.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 \"./padding.module.css\";\nimport clsx from \"clsx\";\n\ntype SpacingValue = string | number;\ntype PaddingKey = \"pt\" | \"pr\" | \"pb\" | \"pl\";\ntype PaddingShorthandKey = \"p\" | \"px\" | \"py\";\n\nexport type PaddingProps = {\n  p?: ResponsiveValue<SpacingValue>;\n  pt?: ResponsiveValue<SpacingValue>;\n  pr?: ResponsiveValue<SpacingValue>;\n  pb?: ResponsiveValue<SpacingValue>;\n  pl?: ResponsiveValue<SpacingValue>;\n  px?: ResponsiveValue<SpacingValue>;\n  py?: ResponsiveValue<SpacingValue>;\n};\n\nexport type PaddingStateProps = {\n  _hover?: PaddingProps;\n  _focus?: PaddingProps;\n  _active?: PaddingProps;\n  _disabled?: PaddingProps;\n};\n\nfunction resolvePaddingValue(\n  key: PaddingKey,\n  props: PaddingProps\n): ResponsiveValue<SpacingValue> | undefined {\n  const shorthandMap: Record<PaddingKey, PaddingShorthandKey> = {\n    pt: \"py\",\n    pb: \"py\",\n    pr: \"px\",\n    pl: \"px\",\n  };\n  return props[key] ?? props[shorthandMap[key]] ?? props.p;\n}\n\nfunction getPaddingStylesForState(\n  props: PaddingProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const keys: PaddingKey[] = [\"pt\", \"pr\", \"pb\", \"pl\"];\n  const results = keys.map((key) =>\n    getResponsiveVarStyles(styles, key, key, resolvePaddingValue(key, props), 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 getPaddingStyles(\n  props: PaddingProps & PaddingStateProps\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getPaddingStylesForState(baseProps, \"base\");\n  const hoverStyles = getPaddingStylesForState(_hover, \"hover\");\n  const focusStyles = getPaddingStylesForState(_focus, \"focus\");\n  const activeStyles = getPaddingStylesForState(_active, \"active\");\n  const disabledStyles = getPaddingStylesForState(_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,oBACP,KACA,OAC2C;AAC3C,QAAM,eAAwD;AAAA,IAC5D,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAEN,SAAO,MAAM,GAAG,KAAK,MAAM,aAAa,GAAG,CAAC,KAAK,MAAM;AACzD;AAEA,SAAS,yBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,OAAqB,CAAC,MAAM,MAAM,MAAM,IAAI;AAClD,QAAM,UAAU,KAAK;AAAA,IAAI,CAAC,QACxB,uBAAuB,QAAQ,KAAK,KAAK,oBAAoB,KAAK,KAAK,GAAG,OAAO,WAAW;AAAA,EAAA;AAG9F,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,iBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,yBAAyB,WAAW,MAAM;AAC7D,QAAM,cAAc,yBAAyB,QAAQ,OAAO;AAC5D,QAAM,cAAc,yBAAyB,QAAQ,OAAO;AAC5D,QAAM,eAAe,yBAAyB,SAAS,QAAQ;AAC/D,QAAM,iBAAiB,yBAAyB,WAAW,UAAU;AAErE,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;"}