@tosui/react 0.1.4 → 0.1.5

package/dist/components/Box/zIndex/zIndex.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"zIndex.js","sources":["../../../../src/components/Box/zIndex/zIndex.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 \"./zIndex.module.css\";\nimport clsx from \"clsx\";\n\nexport type ZIndexValue = \"base\" | \"behind\" | \"dropdown\" | \"sticky\" | \"modal\" | \"toast\" | \"tooltip\";\n\nexport type ZIndexProps = {\n  zIndex?: ResponsiveValue<ZIndexValue>;\n};\n\nexport type ZIndexStateProps = {\n  _hover?: ZIndexProps;\n  _focus?: ZIndexProps;\n  _active?: ZIndexProps;\n  _disabled?: ZIndexProps;\n};\n\nfunction getZIndexClass(\n  value: ZIndexValue,\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 getZIndexStylesForValue(\n  value: ResponsiveValue<ZIndexValue> | 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 = getZIndexClass(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 zIndexValue = value[responsiveKey];\n    if (zIndexValue === undefined) continue;\n\n    const className = getZIndexClass(zIndexValue, responsiveKey, state);\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n  }\n\n  return result;\n}\n\nexport function getZIndexStyles(\n  props: ZIndexProps & ZIndexStateProps\n): StyleResult {\n  const { zIndex, _hover, _focus, _active, _disabled } = props;\n\n  const baseStyles = getZIndexStylesForValue(zIndex, \"base\");\n  const hoverStyles = getZIndexStylesForValue(_hover?.zIndex, \"hover\");\n  const focusStyles = getZIndexStylesForValue(_focus?.zIndex, \"focus\");\n  const activeStyles = getZIndexStylesForValue(_active?.zIndex, \"active\");\n  const disabledStyles = getZIndexStylesForValue(_disabled?.zIndex, \"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":"zIndex.js","sources":["../../../../src/components/Box/zIndex/zIndex.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 \"./zIndex.module.css\";\nimport clsx from \"clsx\";\n\nexport type ZIndexValue = \"base\" | \"behind\" | \"dropdown\" | \"sticky\" | \"modal\" | \"toast\" | \"tooltip\";\n\nexport type ZIndexProps = {\n  zIndex?: ResponsiveValue<ZIndexValue>;\n};\n\nfunction getZIndexStylesForState(\n  props: ZIndexProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  return getEnumResponsiveStyles(styles, \"\", props.zIndex, state);\n}\n\nexport function getZIndexStyles(\n  props: ZIndexProps & StateProps<ZIndexProps>\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getZIndexStylesForState(baseProps, \"base\");\n  const hoverStyles = getZIndexStylesForState(_hover, \"hover\");\n  const focusStyles = getZIndexStylesForState(_focus, \"focus\");\n  const activeStyles = getZIndexStylesForState(_active, \"active\");\n  const disabledStyles = getZIndexStylesForState(_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/Flex/Flex.d.ts

@@ -1,6 +1,7 @@
 import { ElementType } from 'react';
 import { Polymorphic } from '../../types/Polymorphic';
 import { BoxOwnProps } from '../Box/Box';
+import { ResponsiveValue } from '../../utils/breakpoints';
 import { FlexDirectionValue, JustifyContentValue, AlignItemsValue, AlignSelfValue, FlexWrapValue, SpacingValue } from '../Box/flexbox/flexbox';
 export type FlexOwnProps = Omit<BoxOwnProps, "display" | "flexDirection" | "justifyContent" | "alignItems" | "alignSelf" | "flexWrap" | "gap" | "gapRow" | "gapColumn" | "flexBasis" | "flexGrow" | "flexShrink"> & {
     /** Flex direction: row (default), column, row-reverse, column-reverse */
@@ -11,14 +12,12 @@ export type FlexOwnProps = Omit<BoxOwnProps, "display" | "flexDirection" | "just
     justify?: JustifyContentValue;
     /** Align items along the cross axis */
     align?: AlignItemsValue;
-    /** Align content when there are multiple lines */
-    alignContent?: JustifyContentValue;
     /** Gap between children (0-32 spacing multiplier or string) */
-    gap?: SpacingValue;
+    gap?: ResponsiveValue<SpacingValue>;
     /** Row gap between children (0-32 spacing multiplier or string) */
-    gapRow?: SpacingValue;
+    gapRow?: ResponsiveValue<SpacingValue>;
     /** Column gap between children (0-32 spacing multiplier or string) */
-    gapColumn?: SpacingValue;
+    gapColumn?: ResponsiveValue<SpacingValue>;
     /** Flex basis of the container */
     basis?: string;
     /** Flex grow of the container */
@@ -42,5 +41,5 @@ export type FlexProps<T extends ElementType = "div"> = Polymorphic<T, FlexOwnPro
  * - gap, gapRow, gapColumn
  * - basis, grow, shrink -> flexBasis, flexGrow, flexShrink
  */
-export declare function Flex<T extends ElementType = "div">({ as, direction, wrap, justify, align, alignContent, gap, gapRow, gapColumn, basis, grow, shrink, alignSelf, children, ...rest }: FlexProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Flex<T extends ElementType = "div">({ as, direction, wrap, justify, align, gap, gapRow, gapColumn, basis, grow, shrink, alignSelf, children, ...rest }: FlexProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Flex.d.ts.map

package/dist/components/Flex/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,aAAa,EACb,YAAY,EACb,MAAM,kCAAkC,CAAC;AAM1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,WAAW,EACT,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,YAAY,GACZ,WAAW,GACX,UAAU,GACV,KAAK,GACL,QAAQ,GACR,WAAW,GACX,WAAW,GACX,UAAU,GACV,YAAY,CACf,GAAG;IACF,yEAAyE;IACzE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,uCAAuC;IACvC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,kDAAkD;IAClD,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,+DAA+D;IAC/D,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,mEAAmE;IACnE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,sEAAsE;IACtE,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CAChE,CAAC,EACD,YAAY,CACb,CAAC;AAMF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EACL,YAAY,EACZ,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAsBd"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,aAAa,EACb,YAAY,EACb,MAAM,kCAAkC,CAAC;AAM1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,WAAW,EACT,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,YAAY,GACZ,WAAW,GACX,UAAU,GACV,KAAK,GACL,QAAQ,GACR,WAAW,GACX,WAAW,GACX,UAAU,GACV,YAAY,CACf,GAAG;IACF,yEAAyE;IACzE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,uCAAuC;IACvC,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB,+DAA+D;IAC/D,GAAG,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACpC,mEAAmE;IACnE,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACvC,sEAAsE;IACtE,SAAS,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC1C,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CAChE,CAAC,EACD,YAAY,CACb,CAAC;AAMF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,SAAS,EACT,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAsBd"}

package/dist/components/Flex/Flex.js

@@ -7,7 +7,6 @@ function Flex({
   wrap,
   justify,
   align,
-  alignContent,
   gap,
   gapRow,
   gapColumn,

package/dist/components/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type {\n  FlexDirectionValue,\n  JustifyContentValue,\n  AlignItemsValue,\n  AlignSelfValue,\n  FlexWrapValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type FlexOwnProps = Omit<\n  BoxOwnProps,\n  | \"display\"\n  | \"flexDirection\"\n  | \"justifyContent\"\n  | \"alignItems\"\n  | \"alignSelf\"\n  | \"flexWrap\"\n  | \"gap\"\n  | \"gapRow\"\n  | \"gapColumn\"\n  | \"flexBasis\"\n  | \"flexGrow\"\n  | \"flexShrink\"\n> & {\n  /** Flex direction: row (default), column, row-reverse, column-reverse */\n  direction?: FlexDirectionValue;\n  /** Flex wrapping: nowrap (default), wrap, wrap-reverse */\n  wrap?: FlexWrapValue;\n  /** Justify content along the main axis */\n  justify?: JustifyContentValue;\n  /** Align items along the cross axis */\n  align?: AlignItemsValue;\n  /** Align content when there are multiple lines */\n  alignContent?: JustifyContentValue;\n  /** Gap between children (0-32 spacing multiplier or string) */\n  gap?: SpacingValue;\n  /** Row gap between children (0-32 spacing multiplier or string) */\n  gapRow?: SpacingValue;\n  /** Column gap between children (0-32 spacing multiplier or string) */\n  gapColumn?: SpacingValue;\n  /** Flex basis of the container */\n  basis?: string;\n  /** Flex grow of the container */\n  grow?: number;\n  /** Flex shrink of the container */\n  shrink?: number;\n  /** Align self within parent flex container */\n  alignSelf?: AlignSelfValue;\n};\n\nexport type FlexProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  FlexOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Flex - Explicit flexbox layout component\n *\n * A polymorphic flex container with shorthand props:\n * - Default element: <div>\n * - Always renders with display=\"flex\"\n * - direction -> flexDirection (default: row)\n * - wrap -> flexWrap\n * - justify -> justifyContent\n * - align -> alignItems\n * - gap, gapRow, gapColumn\n * - basis, grow, shrink -> flexBasis, flexGrow, flexShrink\n */\nexport function Flex<T extends ElementType = \"div\">({\n  as,\n  direction,\n  wrap,\n  justify,\n  align,\n  alignContent,\n  gap,\n  gapRow,\n  gapColumn,\n  basis,\n  grow,\n  shrink,\n  alignSelf,\n  children,\n  ...rest\n}: FlexProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"flex\"\n      flexDirection={direction}\n      flexWrap={wrap}\n      justifyContent={justify}\n      alignItems={align}\n      gap={gap}\n      gapRow={gapRow}\n      gapColumn={gapColumn}\n      flexBasis={basis}\n      flexGrow={grow}\n      flexShrink={shrink}\n      alignSelf={alignSelf}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AA+EO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,eAAe;AAAA,QACf,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,QACZ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}
+{"version":3,"file":"Flex.js","sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport type {\n  FlexDirectionValue,\n  JustifyContentValue,\n  AlignItemsValue,\n  AlignSelfValue,\n  FlexWrapValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type FlexOwnProps = Omit<\n  BoxOwnProps,\n  | \"display\"\n  | \"flexDirection\"\n  | \"justifyContent\"\n  | \"alignItems\"\n  | \"alignSelf\"\n  | \"flexWrap\"\n  | \"gap\"\n  | \"gapRow\"\n  | \"gapColumn\"\n  | \"flexBasis\"\n  | \"flexGrow\"\n  | \"flexShrink\"\n> & {\n  /** Flex direction: row (default), column, row-reverse, column-reverse */\n  direction?: FlexDirectionValue;\n  /** Flex wrapping: nowrap (default), wrap, wrap-reverse */\n  wrap?: FlexWrapValue;\n  /** Justify content along the main axis */\n  justify?: JustifyContentValue;\n  /** Align items along the cross axis */\n  align?: AlignItemsValue;\n\n  /** Gap between children (0-32 spacing multiplier or string) */\n  gap?: ResponsiveValue<SpacingValue>;\n  /** Row gap between children (0-32 spacing multiplier or string) */\n  gapRow?: ResponsiveValue<SpacingValue>;\n  /** Column gap between children (0-32 spacing multiplier or string) */\n  gapColumn?: ResponsiveValue<SpacingValue>;\n  /** Flex basis of the container */\n  basis?: string;\n  /** Flex grow of the container */\n  grow?: number;\n  /** Flex shrink of the container */\n  shrink?: number;\n  /** Align self within parent flex container */\n  alignSelf?: AlignSelfValue;\n};\n\nexport type FlexProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  FlexOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Flex - Explicit flexbox layout component\n *\n * A polymorphic flex container with shorthand props:\n * - Default element: <div>\n * - Always renders with display=\"flex\"\n * - direction -> flexDirection (default: row)\n * - wrap -> flexWrap\n * - justify -> justifyContent\n * - align -> alignItems\n * - gap, gapRow, gapColumn\n * - basis, grow, shrink -> flexBasis, flexGrow, flexShrink\n */\nexport function Flex<T extends ElementType = \"div\">({\n  as,\n  direction,\n  wrap,\n  justify,\n  align,\n\n  gap,\n  gapRow,\n  gapColumn,\n  basis,\n  grow,\n  shrink,\n  alignSelf,\n  children,\n  ...rest\n}: FlexProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"flex\"\n      flexDirection={direction}\n      flexWrap={wrap}\n      justifyContent={justify}\n      alignItems={align}\n      gap={gap}\n      gapRow={gapRow}\n      gapColumn={gapColumn}\n      flexBasis={basis}\n      flexGrow={grow}\n      flexShrink={shrink}\n      alignSelf={alignSelf}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AA+EO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,eAAe;AAAA,QACf,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,QACZ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}

package/dist/components/Grid/Grid.d.ts

@@ -9,11 +9,11 @@ export type GridOwnProps = Omit<BoxOwnProps, "display" | "gridTemplateColumns" |
     /** Grid template rows — CSS value or responsive object */
     rows?: ResponsiveValue<string>;
     /** Gap between grid items (0-32 spacing multiplier or string) */
-    gap?: SpacingValue;
+    gap?: ResponsiveValue<SpacingValue>;
     /** Row gap between grid items (0-32 spacing multiplier or string) */
-    gapRow?: SpacingValue;
+    gapRow?: ResponsiveValue<SpacingValue>;
     /** Column gap between grid items (0-32 spacing multiplier or string) */
-    gapColumn?: SpacingValue;
+    gapColumn?: ResponsiveValue<SpacingValue>;
     /** Justify items along the inline (row) axis */
     justify?: JustifyContentValue;
     /** Align items along the block (column) axis */

package/dist/components/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EACV,mBAAmB,EACnB,eAAe,EACf,YAAY,EACb,MAAM,kCAAkC,CAAC;AAM1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,WAAW,EACT,SAAS,GACT,qBAAqB,GACrB,kBAAkB,GAClB,KAAK,GACL,QAAQ,GACR,WAAW,GACX,gBAAgB,GAChB,YAAY,CACf,GAAG;IACF,6DAA6D;IAC7D,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAClC,0DAA0D;IAC1D,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,iEAAiE;IACjE,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,qEAAqE;IACrE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,gDAAgD;IAChD,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,gDAAgD;IAChD,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,wCAAwC;IACxC,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,yCAAyC;IACzC,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CAChE,CAAC,EACD,YAAY,CACb,CAAC;AAMF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,OAAO,EACP,IAAI,EACJ,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAkBd"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EACV,mBAAmB,EACnB,eAAe,EACf,YAAY,EACb,MAAM,kCAAkC,CAAC;AAM1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,WAAW,EACT,SAAS,GACT,qBAAqB,GACrB,kBAAkB,GAClB,KAAK,GACL,QAAQ,GACR,WAAW,GACX,gBAAgB,GAChB,YAAY,CACf,GAAG;IACF,6DAA6D;IAC7D,OAAO,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAClC,0DAA0D;IAC1D,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,iEAAiE;IACjE,GAAG,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACpC,qEAAqE;IACrE,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACvC,wEAAwE;IACxE,SAAS,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC1C,gDAAgD;IAChD,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,gDAAgD;IAChD,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,wCAAwC;IACxC,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,yCAAyC;IACzC,YAAY,CAAC,EAAE,mBAAmB,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CAChE,CAAC,EACD,YAAY,CACb,CAAC;AAMF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,OAAO,EACP,IAAI,EACJ,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAO,EACP,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAkBd"}

package/dist/components/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type {\n  JustifyContentValue,\n  AlignItemsValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type GridOwnProps = Omit<\n  BoxOwnProps,\n  | \"display\"\n  | \"gridTemplateColumns\"\n  | \"gridTemplateRows\"\n  | \"gap\"\n  | \"gapRow\"\n  | \"gapColumn\"\n  | \"justifyContent\"\n  | \"alignItems\"\n> & {\n  /** Grid template columns — CSS value or responsive object */\n  columns?: ResponsiveValue<string>;\n  /** Grid template rows — CSS value or responsive object */\n  rows?: ResponsiveValue<string>;\n  /** Gap between grid items (0-32 spacing multiplier or string) */\n  gap?: SpacingValue;\n  /** Row gap between grid items (0-32 spacing multiplier or string) */\n  gapRow?: SpacingValue;\n  /** Column gap between grid items (0-32 spacing multiplier or string) */\n  gapColumn?: SpacingValue;\n  /** Justify items along the inline (row) axis */\n  justify?: JustifyContentValue;\n  /** Align items along the block (column) axis */\n  align?: AlignItemsValue;\n  /** Justify content (distribute rows) */\n  justifyContent?: JustifyContentValue;\n  /** Align content (distribute columns) */\n  alignContent?: JustifyContentValue;\n};\n\nexport type GridProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  GridOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Grid - Explicit CSS Grid layout component\n *\n * A polymorphic grid container with shorthand props:\n * - Default element: <div>\n * - Always renders with display=\"grid\"\n * - columns -> gridTemplateColumns\n * - rows -> gridTemplateRows\n * - gap, gapRow, gapColumn\n * - justify -> justifyItems (alignment within cells)\n * - align -> alignItems (alignment within cells)\n * - justifyContent, alignContent (distribution of grid tracks)\n */\nexport function Grid<T extends ElementType = \"div\">({\n  as,\n  columns,\n  rows,\n  gap,\n  gapRow,\n  gapColumn,\n  justify,\n  align,\n  justifyContent,\n  alignContent,\n  children,\n  ...rest\n}: GridProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"grid\"\n      gridTemplateColumns={columns}\n      gridTemplateRows={rows}\n      gap={gap}\n      gapRow={gapRow}\n      gapColumn={gapColumn}\n      justifyContent={justify ?? justifyContent}\n      alignItems={align ?? alignContent}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAmEO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,qBAAqB;AAAA,QACrB,kBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,WAAW;AAAA,QAC3B,YAAY,SAAS;AAAA,QACpB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type {\n  JustifyContentValue,\n  AlignItemsValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type GridOwnProps = Omit<\n  BoxOwnProps,\n  | \"display\"\n  | \"gridTemplateColumns\"\n  | \"gridTemplateRows\"\n  | \"gap\"\n  | \"gapRow\"\n  | \"gapColumn\"\n  | \"justifyContent\"\n  | \"alignItems\"\n> & {\n  /** Grid template columns — CSS value or responsive object */\n  columns?: ResponsiveValue<string>;\n  /** Grid template rows — CSS value or responsive object */\n  rows?: ResponsiveValue<string>;\n  /** Gap between grid items (0-32 spacing multiplier or string) */\n  gap?: ResponsiveValue<SpacingValue>;\n  /** Row gap between grid items (0-32 spacing multiplier or string) */\n  gapRow?: ResponsiveValue<SpacingValue>;\n  /** Column gap between grid items (0-32 spacing multiplier or string) */\n  gapColumn?: ResponsiveValue<SpacingValue>;\n  /** Justify items along the inline (row) axis */\n  justify?: JustifyContentValue;\n  /** Align items along the block (column) axis */\n  align?: AlignItemsValue;\n  /** Justify content (distribute rows) */\n  justifyContent?: JustifyContentValue;\n  /** Align content (distribute columns) */\n  alignContent?: JustifyContentValue;\n};\n\nexport type GridProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  GridOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Grid - Explicit CSS Grid layout component\n *\n * A polymorphic grid container with shorthand props:\n * - Default element: <div>\n * - Always renders with display=\"grid\"\n * - columns -> gridTemplateColumns\n * - rows -> gridTemplateRows\n * - gap, gapRow, gapColumn\n * - justify -> justifyItems (alignment within cells)\n * - align -> alignItems (alignment within cells)\n * - justifyContent, alignContent (distribution of grid tracks)\n */\nexport function Grid<T extends ElementType = \"div\">({\n  as,\n  columns,\n  rows,\n  gap,\n  gapRow,\n  gapColumn,\n  justify,\n  align,\n  justifyContent,\n  alignContent,\n  children,\n  ...rest\n}: GridProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"grid\"\n      gridTemplateColumns={columns}\n      gridTemplateRows={rows}\n      gap={gap}\n      gapRow={gapRow}\n      gapColumn={gapColumn}\n      justifyContent={justify ?? justifyContent}\n      alignItems={align ?? alignContent}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAmEO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,qBAAqB;AAAA,QACrB,kBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,WAAW;AAAA,QAC3B,YAAY,SAAS;AAAA,QACpB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}

package/dist/components/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAChD,MAAM,MAAM,qBAAqB,GAC7B,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG;IAC5B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,yBAAyB;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAkEF;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,+GAgEtB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAChD,MAAM,MAAM,qBAAqB,GAC7B,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG;IAC5B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,yBAAyB;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAkEF;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,+GAgEtB,CAAC"}

package/dist/components/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { Spinner } from \"@/components/Spinner/Spinner\";\nimport styles from \"./iconbutton.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type IconButtonVariant = \"solid\" | \"outline\" | \"ghost\";\nexport type IconButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type IconButtonColorScheme =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\nexport type IconButtonProps = {\n  /** The icon to display */\n  icon: ReactNode;\n  /** Accessible label (required for screen readers) */\n  \"aria-label\": string;\n  /** Visual variant */\n  variant?: IconButtonVariant;\n  /** Size of the button */\n  size?: IconButtonSize;\n  /** Color scheme */\n  colorScheme?: IconButtonColorScheme;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Whether to show loading spinner */\n  loading?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { dimension: \"28px\", iconSize: \"14px\", fontSize: \"sm\" },\n  md: { dimension: \"36px\", iconSize: \"18px\", fontSize: \"md\" },\n  lg: { dimension: \"44px\", iconSize: \"22px\", fontSize: \"lg\" },\n} as const;\n\n// ============================================================================\n// Color configurations\n// ============================================================================\n\ntype ColorConfig = {\n  bg: string;\n  color: string;\n  borderColor: string | undefined;\n  hoverBg: string;\n};\n\nfunction getColorConfig(\n  variant: IconButtonVariant,\n  colorScheme: IconButtonColorScheme\n): ColorConfig {\n  switch (variant) {\n    case \"solid\":\n      return {\n        bg: `${colorScheme}-default`,\n        color: \"foreground-inverted\",\n        borderColor: undefined,\n        hoverBg: `var(--t-color-${colorScheme}-emphasis)`,\n      };\n    case \"outline\":\n      return {\n        bg: \"transparent\",\n        color: colorScheme,\n        borderColor: colorScheme,\n        hoverBg: `var(--t-color-${colorScheme}-subtle)`,\n      };\n    case \"ghost\":\n      return {\n        bg: \"transparent\",\n        color: colorScheme,\n        borderColor: undefined,\n        hoverBg: `var(--t-color-${colorScheme}-subtle)`,\n      };\n  }\n}\n\n// ============================================================================\n// Variant border configurations\n// ============================================================================\n\nconst variantBorderConfig = {\n  solid: \"none\",\n  outline: \"thin\",\n  ghost: \"none\",\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * IconButton - Icon-only button component\n *\n * A compact button for icons that provides:\n * - Square sizing for icon-only use\n * - All Button variants (solid, outline, ghost)\n * - All color schemes\n * - Loading state with spinner\n * - Required aria-label for accessibility\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    {\n      icon,\n      \"aria-label\": ariaLabel,\n      variant = \"solid\",\n      size = \"md\",\n      colorScheme = \"primary\",\n      disabled = false,\n      loading = false,\n      className,\n      onClick,\n      ...rest\n    },\n    ref\n  ) {\n    const isDisabled = disabled || loading;\n    const colorConfig = getColorConfig(variant, colorScheme);\n    const sizeProps = sizeConfig[size];\n\n    return (\n      <Box\n        as=\"button\"\n        ref={ref}\n        // Layout\n        display=\"inline-flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        // Size (square)\n        w={sizeProps.dimension}\n        h={sizeProps.dimension}\n        fontSize={sizeProps.fontSize}\n        rounded=\"md\"\n        // Colors (type assertions for computed values)\n        bg={colorConfig.bg as any}\n        color={colorConfig.color as any}\n        border={variantBorderConfig[variant]}\n        borderColor={colorConfig.borderColor as any}\n        // Interaction states\n        cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n        pointerEvents={isDisabled ? \"none\" : undefined}\n        opacity={isDisabled ? \"faint\" : undefined}\n        // CSS module styles\n        className={clsx(styles.iconButton, styles[variant], className)}\n        // Hover color via CSS variable\n        style={{ \"--iconbutton-hover-bg\": colorConfig.hoverBg } as CSSProperties}\n        // Accessibility\n        aria-label={ariaLabel}\n        disabled={isDisabled}\n        aria-disabled={isDisabled}\n        aria-busy={loading}\n        onClick={onClick}\n        {...rest}\n      >\n        {loading ? (\n          <Spinner size=\"sm\" aria-hidden=\"true\" />\n        ) : (\n          <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\" aria-hidden=\"true\">\n            {icon}\n          </Box>\n        )}\n      </Box>\n    );\n  }\n);\n"],"names":["IconButton"],"mappings":";;;;;;AA6CA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,WAAW,QAAQ,UAAU,QAAQ,UAAU,KAAA;AAAA,EACrD,IAAI,EAAE,WAAW,QAAQ,UAAU,QAAQ,UAAU,KAAA;AAAA,EACrD,IAAI,EAAE,WAAW,QAAQ,UAAU,QAAQ,UAAU,KAAA;AACvD;AAaA,SAAS,eACP,SACA,aACa;AACb,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,QACL,IAAI,GAAG,WAAW;AAAA,QAClB,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAAA,IAEzC,KAAK;AACH,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAAA,IAEzC,KAAK;AACH,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAAA,EACvC;AAEN;AAMA,MAAM,sBAAsB;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAgBO,MAAM,aAAa;AAAA,EACxB,SAASA,YACP;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,aAAa,YAAY;AAC/B,UAAM,cAAc,eAAe,SAAS,WAAW;AACvD,UAAM,YAAY,WAAW,IAAI;AAEjC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QAEA,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QAEf,GAAG,UAAU;AAAA,QACb,GAAG,UAAU;AAAA,QACb,UAAU,UAAU;AAAA,QACpB,SAAQ;AAAA,QAER,IAAI,YAAY;AAAA,QAChB,OAAO,YAAY;AAAA,QACnB,QAAQ,oBAAoB,OAAO;AAAA,QACnC,aAAa,YAAY;AAAA,QAEzB,QAAQ,aAAa,gBAAgB;AAAA,QACrC,eAAe,aAAa,SAAS;AAAA,QACrC,SAAS,aAAa,UAAU;AAAA,QAEhC,WAAW,KAAK,OAAO,YAAY,OAAO,OAAO,GAAG,SAAS;AAAA,QAE7D,OAAO,EAAE,yBAAyB,YAAY,QAAA;AAAA,QAE9C,cAAY;AAAA,QACZ,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QAEH,oBACC,oBAAC,SAAA,EAAQ,MAAK,MAAK,eAAY,QAAO,IAEtC,oBAAC,KAAA,EAAI,IAAG,QAAO,SAAQ,eAAc,YAAW,UAAS,eAAY,QAClE,UAAA,KAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type ReactNode } from \"react\";\nimport type { BackgroundColorValue, BorderColorValue, ColorValue } from \"@/components/Box/colors/colors\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { Spinner } from \"@/components/Spinner/Spinner\";\nimport styles from \"./iconbutton.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type IconButtonVariant = \"solid\" | \"outline\" | \"ghost\";\nexport type IconButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type IconButtonColorScheme =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\nexport type IconButtonProps = {\n  /** The icon to display */\n  icon: ReactNode;\n  /** Accessible label (required for screen readers) */\n  \"aria-label\": string;\n  /** Visual variant */\n  variant?: IconButtonVariant;\n  /** Size of the button */\n  size?: IconButtonSize;\n  /** Color scheme */\n  colorScheme?: IconButtonColorScheme;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Whether to show loading spinner */\n  loading?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { dimension: \"28px\", iconSize: \"14px\", fontSize: \"sm\" },\n  md: { dimension: \"36px\", iconSize: \"18px\", fontSize: \"md\" },\n  lg: { dimension: \"44px\", iconSize: \"22px\", fontSize: \"lg\" },\n} as const;\n\n// ============================================================================\n// Color configurations\n// ============================================================================\n\ntype ColorConfig = {\n  bg: string;\n  color: string;\n  borderColor: string | undefined;\n  hoverBg: string;\n};\n\nfunction getColorConfig(\n  variant: IconButtonVariant,\n  colorScheme: IconButtonColorScheme\n): ColorConfig {\n  switch (variant) {\n    case \"solid\":\n      return {\n        bg: `${colorScheme}-default`,\n        color: \"foreground-inverted\",\n        borderColor: undefined,\n        hoverBg: `var(--t-color-${colorScheme}-emphasis)`,\n      };\n    case \"outline\":\n      return {\n        bg: \"transparent\",\n        color: colorScheme,\n        borderColor: colorScheme,\n        hoverBg: `var(--t-color-${colorScheme}-subtle)`,\n      };\n    case \"ghost\":\n      return {\n        bg: \"transparent\",\n        color: colorScheme,\n        borderColor: undefined,\n        hoverBg: `var(--t-color-${colorScheme}-subtle)`,\n      };\n  }\n}\n\n// ============================================================================\n// Variant border configurations\n// ============================================================================\n\nconst variantBorderConfig = {\n  solid: \"none\",\n  outline: \"thin\",\n  ghost: \"none\",\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * IconButton - Icon-only button component\n *\n * A compact button for icons that provides:\n * - Square sizing for icon-only use\n * - All Button variants (solid, outline, ghost)\n * - All color schemes\n * - Loading state with spinner\n * - Required aria-label for accessibility\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    {\n      icon,\n      \"aria-label\": ariaLabel,\n      variant = \"solid\",\n      size = \"md\",\n      colorScheme = \"primary\",\n      disabled = false,\n      loading = false,\n      className,\n      onClick,\n      ...rest\n    },\n    ref\n  ) {\n    const isDisabled = disabled || loading;\n    const colorConfig = getColorConfig(variant, colorScheme);\n    const sizeProps = sizeConfig[size];\n\n    return (\n      <Box\n        as=\"button\"\n        ref={ref}\n        // Layout\n        display=\"inline-flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        // Size (square)\n        w={sizeProps.dimension}\n        h={sizeProps.dimension}\n        fontSize={sizeProps.fontSize}\n        rounded=\"md\"\n        // Colors (type assertions for computed values)\n        bg={colorConfig.bg as BackgroundColorValue}\n        color={colorConfig.color as ColorValue}\n        border={variantBorderConfig[variant]}\n        borderColor={colorConfig.borderColor as BorderColorValue | undefined}\n        // Interaction states\n        cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n        pointerEvents={isDisabled ? \"none\" : undefined}\n        opacity={isDisabled ? \"faint\" : undefined}\n        // CSS module styles\n        className={clsx(styles.iconButton, styles[variant], className)}\n        // Hover color via CSS variable\n        style={{ \"--iconbutton-hover-bg\": colorConfig.hoverBg } as CSSProperties}\n        // Accessibility\n        aria-label={ariaLabel}\n        disabled={isDisabled}\n        aria-disabled={isDisabled}\n        aria-busy={loading}\n        onClick={onClick}\n        {...rest}\n      >\n        {loading ? (\n          <Spinner size=\"sm\" aria-hidden=\"true\" />\n        ) : (\n          <Box as=\"span\" display=\"inline-flex\" alignItems=\"center\" aria-hidden=\"true\">\n            {icon}\n          </Box>\n        )}\n      </Box>\n    );\n  }\n);\n"],"names":["IconButton"],"mappings":";;;;;;AA8CA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,WAAW,QAAQ,UAAU,QAAQ,UAAU,KAAA;AAAA,EACrD,IAAI,EAAE,WAAW,QAAQ,UAAU,QAAQ,UAAU,KAAA;AAAA,EACrD,IAAI,EAAE,WAAW,QAAQ,UAAU,QAAQ,UAAU,KAAA;AACvD;AAaA,SAAS,eACP,SACA,aACa;AACb,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,QACL,IAAI,GAAG,WAAW;AAAA,QAClB,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAAA,IAEzC,KAAK;AACH,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAAA,IAEzC,KAAK;AACH,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS,iBAAiB,WAAW;AAAA,MAAA;AAAA,EACvC;AAEN;AAMA,MAAM,sBAAsB;AAAA,EAC1B,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AACT;AAgBO,MAAM,aAAa;AAAA,EACxB,SAASA,YACP;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,aAAa,YAAY;AAC/B,UAAM,cAAc,eAAe,SAAS,WAAW;AACvD,UAAM,YAAY,WAAW,IAAI;AAEjC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QAEA,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QAEf,GAAG,UAAU;AAAA,QACb,GAAG,UAAU;AAAA,QACb,UAAU,UAAU;AAAA,QACpB,SAAQ;AAAA,QAER,IAAI,YAAY;AAAA,QAChB,OAAO,YAAY;AAAA,QACnB,QAAQ,oBAAoB,OAAO;AAAA,QACnC,aAAa,YAAY;AAAA,QAEzB,QAAQ,aAAa,gBAAgB;AAAA,QACrC,eAAe,aAAa,SAAS;AAAA,QACrC,SAAS,aAAa,UAAU;AAAA,QAEhC,WAAW,KAAK,OAAO,YAAY,OAAO,OAAO,GAAG,SAAS;AAAA,QAE7D,OAAO,EAAE,yBAAyB,YAAY,QAAA;AAAA,QAE9C,cAAY;AAAA,QACZ,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QAEH,oBACC,oBAAC,SAAA,EAAQ,MAAK,MAAK,eAAY,QAAO,IAEtC,oBAAC,KAAA,EAAI,IAAG,QAAO,SAAQ,eAAc,YAAW,UAAS,eAAY,QAClE,UAAA,KAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/components/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAyB/D,MAAM,MAAM,SAAS,GAAG;IACtB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,GAAG;IAChE,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EACnB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,SAAS,2CAsDX;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAe3E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,aAAa,kDAyB9D;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,2CAgCf"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAyB/D,MAAM,MAAM,SAAS,GAAG;IACtB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,GAAG;IAChE,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EACnB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,SAAS,2CAsDX;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAe3E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,aAAa,kDAyB9D;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,2CAgCf"}

package/dist/components/Menu/Menu.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useState, useRef, useEffect, useContext } from "react";
+import { createContext, useState, useRef, useCallback, useEffect, useContext } from "react";
 import clsx from "clsx";
 import { Box } from "../Box/Box.js";
 import { Button } from "../Button/Button.js";
@@ -22,7 +22,7 @@ function Menu({
   const isControlled = controlledIsOpen !== void 0;
   const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
   const buttonRef = useRef(null);
-  const setOpen = (open) => {
+  const setOpen = useCallback((open) => {
     if (!isControlled) {
       setInternalIsOpen(open);
     }
@@ -31,7 +31,7 @@ function Menu({
     } else {
       onClose?.();
     }
-  };
+  }, [isControlled, onOpen, onClose]);
   useEffect(() => {
     if (!isOpen) return;
     const handleClick = (e) => {
@@ -40,7 +40,7 @@ function Menu({
     };
     document.addEventListener("click", handleClick);
     return () => document.removeEventListener("click", handleClick);
-  }, [isOpen]);
+  }, [isOpen, setOpen]);
   useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
@@ -48,7 +48,7 @@ function Menu({
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen]);
+  }, [isOpen, setOpen]);
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { isOpen, setIsOpen: setOpen, buttonRef }, children: /* @__PURE__ */ jsx(
     Box,
     {

package/dist/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactNode,\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport styles from \"./menu.module.css\";\n\n// ============================================================================\n// Context\n// ============================================================================\n\ntype MenuContextValue = {\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  buttonRef: React.RefObject<HTMLButtonElement | null>;\n};\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nfunction useMenuContext() {\n  const context = useContext(MenuContext);\n  if (!context) throw new Error(\"Menu components must be used within Menu\");\n  return context;\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type MenuProps = {\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Callback when menu opens */\n  onOpen?: () => void;\n  /** Callback when menu closes */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n  /** Menu components */\n  children?: ReactNode;\n};\n\nexport type MenuButtonProps = Omit<ButtonProps<\"button\">, \"as\"> & {\n  /** Button content */\n  children?: ReactNode;\n};\n\nexport type MenuListProps = {\n  /** Additional class name */\n  className?: string;\n  /** Menu items */\n  children?: ReactNode;\n};\n\nexport type MenuItemProps = {\n  /** Click handler */\n  onClick?: () => void;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Item content */\n  children?: ReactNode;\n};\n\n// ============================================================================\n// Components\n// ============================================================================\n\n/**\n * Menu - Dropdown menu container\n *\n * Provides context for MenuButton, MenuList, and MenuItem.\n * Handles open/close state and click-outside behavior.\n * Supports controlled mode via isOpen/onOpen/onClose.\n */\nexport function Menu({\n  isOpen: controlledIsOpen,\n  onOpen,\n  onClose,\n  className,\n  children,\n}: MenuProps) {\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const isControlled = controlledIsOpen !== undefined;\n  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;\n\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setOpen = (open: boolean) => {\n    if (!isControlled) {\n      setInternalIsOpen(open);\n    }\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  };\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleClick = (e: MouseEvent) => {\n      if (buttonRef.current?.contains(e.target as Node)) return;\n      setOpen(false);\n    };\n\n    document.addEventListener(\"click\", handleClick);\n    return () => document.removeEventListener(\"click\", handleClick);\n  }, [isOpen]);\n\n  // Close on Escape\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isOpen]);\n\n  return (\n    <MenuContext.Provider value={{ isOpen, setIsOpen: setOpen, buttonRef }}>\n      <Box\n        position=\"relative\"\n        display=\"inline-block\"\n        className={clsx(styles.menu, className)}\n      >\n        {children}\n      </Box>\n    </MenuContext.Provider>\n  );\n}\n\n/**\n * MenuButton - Trigger button for the menu\n *\n * Renders as a Button component with dropdown indicators.\n */\nexport function MenuButton({ children, className, ...rest }: MenuButtonProps) {\n  const { isOpen, setIsOpen, buttonRef } = useMenuContext();\n\n  return (\n    <Button\n      ref={buttonRef}\n      aria-haspopup=\"menu\"\n      aria-expanded={isOpen}\n      onClick={() => setIsOpen(!isOpen)}\n      className={className}\n      {...rest}\n    >\n      {children}\n    </Button>\n  );\n}\n\n/**\n * MenuList - Dropdown container for menu items\n *\n * Only renders when menu is open.\n */\nexport function MenuList({ className, children }: MenuListProps) {\n  const { isOpen } = useMenuContext();\n\n  if (!isOpen) return null;\n\n  return (\n    <Box\n      role=\"menu\"\n      position=\"absolute\"\n      top=\"100%\"\n      left={0}\n      mt={1}\n      py={1}\n      minW=\"160px\"\n      bg=\"surface\"\n      border=\"thin\"\n      borderColor=\"border\"\n      rounded=\"md\"\n      shadow=\"md\"\n      zIndex=\"dropdown\"\n      className={clsx(styles.menuList, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * MenuItem - Individual menu item\n *\n * Closes the menu when clicked (unless disabled).\n */\nexport function MenuItem({\n  onClick,\n  disabled = false,\n  className,\n  children,\n}: MenuItemProps) {\n  const { setIsOpen } = useMenuContext();\n\n  const handleClick = () => {\n    if (disabled) return;\n    onClick?.();\n    setIsOpen(false);\n  };\n\n  return (\n    <Box\n      as=\"button\"\n      type=\"button\"\n      role=\"menuitem\"\n      onClick={handleClick}\n      disabled={disabled}\n      display=\"flex\"\n      alignItems=\"center\"\n      w=\"100%\"\n      py={2}\n      px={3}\n      fontSize=\"sm\"\n      color={disabled ? \"foreground-muted\" : \"foreground\"}\n      bg=\"transparent\"\n      border=\"none\"\n      cursor={disabled ? \"not-allowed\" : \"pointer\"}\n      textAlign=\"left\"\n      className={clsx(styles.menuItem, disabled && styles.disabled, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAyBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,SAAS,iBAAiB;AACxB,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,0CAA0C;AACxE,SAAO;AACT;AAqDO,SAAS,KAAK;AAAA,EACnB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,eAAe,qBAAqB;AAC1C,QAAM,SAAS,eAAe,mBAAmB;AAEjD,QAAM,YAAY,OAAiC,IAAI;AAEvD,QAAM,UAAU,CAAC,SAAkB;AACjC,QAAI,CAAC,cAAc;AACjB,wBAAkB,IAAI;AAAA,IACxB;AACA,QAAI,MAAM;AACR,eAAA;AAAA,IACF,OAAO;AACL,gBAAA;AAAA,IACF;AAAA,EACF;AAGA,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,UAAM,cAAc,CAAC,MAAkB;AACrC,UAAI,UAAU,SAAS,SAAS,EAAE,MAAc,EAAG;AACnD,cAAQ,KAAK;AAAA,IACf;AAEA,aAAS,iBAAiB,SAAS,WAAW;AAC9C,WAAO,MAAM,SAAS,oBAAoB,SAAS,WAAW;AAAA,EAChE,GAAG,CAAC,MAAM,CAAC;AAGX,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,UAAM,gBAAgB,CAAC,MAAqB;AAC1C,UAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,IACvC;AAEA,aAAS,iBAAiB,WAAW,aAAa;AAClD,WAAO,MAAM,SAAS,oBAAoB,WAAW,aAAa;AAAA,EACpE,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,WAAW,SAAS,UAAA,GACzD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,MAErC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAOO,SAAS,WAAW,EAAE,UAAU,WAAW,GAAG,QAAyB;AAC5E,QAAM,EAAE,QAAQ,WAAW,UAAA,IAAc,eAAA;AAEzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,MAChC;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAAS,SAAS,EAAE,WAAW,YAA2B;AAC/D,QAAM,EAAE,OAAA,IAAW,eAAA;AAEnB,MAAI,CAAC,OAAQ,QAAO;AAEpB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAS;AAAA,MACT,KAAI;AAAA,MACJ,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,IAAG;AAAA,MACH,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,QAAO;AAAA,MACP,WAAW,KAAK,OAAO,UAAU,SAAS;AAAA,MAEzC;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,EAAE,UAAA,IAAc,eAAA;AAEtB,QAAM,cAAc,MAAM;AACxB,QAAI,SAAU;AACd,cAAA;AACA,cAAU,KAAK;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS;AAAA,MACT;AAAA,MACA,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,GAAE;AAAA,MACF,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,UAAS;AAAA,MACT,OAAO,WAAW,qBAAqB;AAAA,MACvC,IAAG;AAAA,MACH,QAAO;AAAA,MACP,QAAQ,WAAW,gBAAgB;AAAA,MACnC,WAAU;AAAA,MACV,WAAW,KAAK,OAAO,UAAU,YAAY,OAAO,UAAU,SAAS;AAAA,MAEtE;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactNode,\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport styles from \"./menu.module.css\";\n\n// ============================================================================\n// Context\n// ============================================================================\n\ntype MenuContextValue = {\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  buttonRef: React.RefObject<HTMLButtonElement | null>;\n};\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nfunction useMenuContext() {\n  const context = useContext(MenuContext);\n  if (!context) throw new Error(\"Menu components must be used within Menu\");\n  return context;\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type MenuProps = {\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Callback when menu opens */\n  onOpen?: () => void;\n  /** Callback when menu closes */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n  /** Menu components */\n  children?: ReactNode;\n};\n\nexport type MenuButtonProps = Omit<ButtonProps<\"button\">, \"as\"> & {\n  /** Button content */\n  children?: ReactNode;\n};\n\nexport type MenuListProps = {\n  /** Additional class name */\n  className?: string;\n  /** Menu items */\n  children?: ReactNode;\n};\n\nexport type MenuItemProps = {\n  /** Click handler */\n  onClick?: () => void;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Item content */\n  children?: ReactNode;\n};\n\n// ============================================================================\n// Components\n// ============================================================================\n\n/**\n * Menu - Dropdown menu container\n *\n * Provides context for MenuButton, MenuList, and MenuItem.\n * Handles open/close state and click-outside behavior.\n * Supports controlled mode via isOpen/onOpen/onClose.\n */\nexport function Menu({\n  isOpen: controlledIsOpen,\n  onOpen,\n  onClose,\n  className,\n  children,\n}: MenuProps) {\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const isControlled = controlledIsOpen !== undefined;\n  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;\n\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setOpen = useCallback((open: boolean) => {\n    if (!isControlled) {\n      setInternalIsOpen(open);\n    }\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [isControlled, onOpen, onClose]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleClick = (e: MouseEvent) => {\n      if (buttonRef.current?.contains(e.target as Node)) return;\n      setOpen(false);\n    };\n\n    document.addEventListener(\"click\", handleClick);\n    return () => document.removeEventListener(\"click\", handleClick);\n  }, [isOpen, setOpen]);\n\n  // Close on Escape\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isOpen, setOpen]);\n\n  return (\n    <MenuContext.Provider value={{ isOpen, setIsOpen: setOpen, buttonRef }}>\n      <Box\n        position=\"relative\"\n        display=\"inline-block\"\n        className={clsx(styles.menu, className)}\n      >\n        {children}\n      </Box>\n    </MenuContext.Provider>\n  );\n}\n\n/**\n * MenuButton - Trigger button for the menu\n *\n * Renders as a Button component with dropdown indicators.\n */\nexport function MenuButton({ children, className, ...rest }: MenuButtonProps) {\n  const { isOpen, setIsOpen, buttonRef } = useMenuContext();\n\n  return (\n    <Button\n      ref={buttonRef}\n      aria-haspopup=\"menu\"\n      aria-expanded={isOpen}\n      onClick={() => setIsOpen(!isOpen)}\n      className={className}\n      {...rest}\n    >\n      {children}\n    </Button>\n  );\n}\n\n/**\n * MenuList - Dropdown container for menu items\n *\n * Only renders when menu is open.\n */\nexport function MenuList({ className, children }: MenuListProps) {\n  const { isOpen } = useMenuContext();\n\n  if (!isOpen) return null;\n\n  return (\n    <Box\n      role=\"menu\"\n      position=\"absolute\"\n      top=\"100%\"\n      left={0}\n      mt={1}\n      py={1}\n      minW=\"160px\"\n      bg=\"surface\"\n      border=\"thin\"\n      borderColor=\"border\"\n      rounded=\"md\"\n      shadow=\"md\"\n      zIndex=\"dropdown\"\n      className={clsx(styles.menuList, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * MenuItem - Individual menu item\n *\n * Closes the menu when clicked (unless disabled).\n */\nexport function MenuItem({\n  onClick,\n  disabled = false,\n  className,\n  children,\n}: MenuItemProps) {\n  const { setIsOpen } = useMenuContext();\n\n  const handleClick = () => {\n    if (disabled) return;\n    onClick?.();\n    setIsOpen(false);\n  };\n\n  return (\n    <Box\n      as=\"button\"\n      type=\"button\"\n      role=\"menuitem\"\n      onClick={handleClick}\n      disabled={disabled}\n      display=\"flex\"\n      alignItems=\"center\"\n      w=\"100%\"\n      py={2}\n      px={3}\n      fontSize=\"sm\"\n      color={disabled ? \"foreground-muted\" : \"foreground\"}\n      bg=\"transparent\"\n      border=\"none\"\n      cursor={disabled ? \"not-allowed\" : \"pointer\"}\n      textAlign=\"left\"\n      className={clsx(styles.menuItem, disabled && styles.disabled, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAUpE,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAoB,EACpB,WAAkB,EAClB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,YAAY,2CA4Hd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAaxE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAMpE"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA6D,MAAM,OAAO,CAAC;AAUlG,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAoB,EACpB,WAAkB,EAClB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,YAAY,2CA6Hd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAaxE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAMpE"}

package/dist/components/Popover/Popover.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { Box } from "../Box/Box.js";
@@ -21,7 +21,7 @@ function Popover({
   const [position, setPosition] = useState({ top: 0, left: 0 });
   const triggerRef = useRef(null);
   const popoverRef = useRef(null);
-  const setOpen = (open) => {
+  const setOpen = useCallback((open) => {
     if (!isControlled) {
       setInternalIsOpen(open);
     }
@@ -30,8 +30,8 @@ function Popover({
     } else {
       onClose?.();
     }
-  };
-  const updatePosition = () => {
+  }, [isControlled, onOpen, onClose]);
+  const updatePosition = useCallback(() => {
     if (!triggerRef.current || !popoverRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popoverRect = popoverRef.current.getBoundingClientRect();
@@ -57,10 +57,10 @@ function Popover({
         break;
     }
     setPosition({ top: top + window.scrollY, left: left + window.scrollX });
-  };
-  useEffect(() => {
+  }, [placement]);
+  useLayoutEffect(() => {
     if (isOpen) updatePosition();
-  }, [isOpen, placement]);
+  }, [isOpen, updatePosition]);
   useEffect(() => {
     if (!isOpen || !closeOnBlur) return;
     const handleClick = (e) => {
@@ -70,7 +70,7 @@ function Popover({
     };
     document.addEventListener("click", handleClick);
     return () => document.removeEventListener("click", handleClick);
-  }, [isOpen, closeOnBlur]);
+  }, [isOpen, closeOnBlur, setOpen]);
   useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
@@ -78,7 +78,7 @@ function Popover({
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen]);
+  }, [isOpen, setOpen]);
   const handleTriggerClick = () => {
     setOpen(!isOpen);
   };

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState, useRef, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./popover.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type PopoverProps = {\n  /** Popover content */\n  content: ReactNode;\n  /** Placement of popover */\n  placement?: PopoverPlacement;\n  /** Close on outside click */\n  closeOnBlur?: boolean;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Callback when popover opens */\n  onOpen?: () => void;\n  /** Callback when popover closes */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n  /** Trigger element */\n  children: ReactNode;\n};\n\nexport type PopoverHeaderProps = {\n  /** Additional class name */\n  className?: string;\n  /** Header content */\n  children?: ReactNode;\n};\n\nexport type PopoverBodyProps = {\n  /** Additional class name */\n  className?: string;\n  /** Body content */\n  children?: ReactNode;\n};\n\n// ============================================================================\n// Components\n// ============================================================================\n\n/**\n * Popover - Click-triggered overlay with positioning\n *\n * A popover component that:\n * - Toggles on click\n * - Positions relative to trigger\n * - Closes on outside click and Escape\n * - Supports controlled mode via isOpen/onOpen/onClose\n * - Renders via portal\n */\nexport function Popover({\n  content,\n  placement = \"bottom\",\n  closeOnBlur = true,\n  isOpen: controlledIsOpen,\n  onOpen,\n  onClose,\n  className,\n  children,\n}: PopoverProps) {\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const isControlled = controlledIsOpen !== undefined;\n  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;\n\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const setOpen = (open: boolean) => {\n    if (!isControlled) {\n      setInternalIsOpen(open);\n    }\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  };\n\n  const updatePosition = () => {\n    if (!triggerRef.current || !popoverRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const popoverRect = popoverRef.current.getBoundingClientRect();\n    const gap = 8;\n\n    let top = 0;\n    let left = 0;\n\n    switch (placement) {\n      case \"top\":\n        top = triggerRect.top - popoverRect.height - gap;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case \"bottom\":\n        top = triggerRect.bottom + gap;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case \"left\":\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.left - popoverRect.width - gap;\n        break;\n      case \"right\":\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.right + gap;\n        break;\n    }\n\n    setPosition({ top: top + window.scrollY, left: left + window.scrollX });\n  };\n\n  useEffect(() => {\n    if (isOpen) updatePosition();\n  }, [isOpen, placement]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen || !closeOnBlur) return;\n\n    const handleClick = (e: MouseEvent) => {\n      if (\n        triggerRef.current?.contains(e.target as Node) ||\n        popoverRef.current?.contains(e.target as Node)\n      )\n        return;\n      setOpen(false);\n    };\n\n    document.addEventListener(\"click\", handleClick);\n    return () => document.removeEventListener(\"click\", handleClick);\n  }, [isOpen, closeOnBlur]);\n\n  // Close on Escape\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isOpen]);\n\n  const handleTriggerClick = () => {\n    setOpen(!isOpen);\n  };\n\n  return (\n    <>\n      <Box\n        as=\"span\"\n        ref={triggerRef}\n        display=\"inline-block\"\n        onClick={handleTriggerClick}\n        aria-expanded={isOpen}\n        aria-haspopup=\"dialog\"\n        cursor=\"pointer\"\n      >\n        {children}\n      </Box>\n      {isOpen &&\n        createPortal(\n          <Box\n            ref={popoverRef}\n            position=\"absolute\"\n            bg=\"surface\"\n            border=\"thin\"\n            borderColor=\"border\"\n            rounded=\"md\"\n            shadow=\"lg\"\n            zIndex=\"dropdown\"\n            minW=\"200px\"\n            className={clsx(styles.popover, className)}\n            style={{ top: position.top, left: position.left }}\n            role=\"dialog\"\n          >\n            {content}\n          </Box>,\n          document.body\n        )}\n    </>\n  );\n}\n\n/**\n * PopoverHeader - Header section for popover\n */\nexport function PopoverHeader({ className, children }: PopoverHeaderProps) {\n  return (\n    <Box\n      px={4}\n      py={3}\n      borderBottom=\"thin\"\n      borderColor=\"border\"\n      fontWeight=\"medium\"\n      className={clsx(styles.header, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * PopoverBody - Body section for popover\n */\nexport function PopoverBody({ className, children }: PopoverBodyProps) {\n  return (\n    <Box px={4} py={3} className={clsx(styles.body, className)}>\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState, useRef, useEffect, useCallback, useLayoutEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./popover.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type PopoverProps = {\n  /** Popover content */\n  content: ReactNode;\n  /** Placement of popover */\n  placement?: PopoverPlacement;\n  /** Close on outside click */\n  closeOnBlur?: boolean;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Callback when popover opens */\n  onOpen?: () => void;\n  /** Callback when popover closes */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n  /** Trigger element */\n  children: ReactNode;\n};\n\nexport type PopoverHeaderProps = {\n  /** Additional class name */\n  className?: string;\n  /** Header content */\n  children?: ReactNode;\n};\n\nexport type PopoverBodyProps = {\n  /** Additional class name */\n  className?: string;\n  /** Body content */\n  children?: ReactNode;\n};\n\n// ============================================================================\n// Components\n// ============================================================================\n\n/**\n * Popover - Click-triggered overlay with positioning\n *\n * A popover component that:\n * - Toggles on click\n * - Positions relative to trigger\n * - Closes on outside click and Escape\n * - Supports controlled mode via isOpen/onOpen/onClose\n * - Renders via portal\n */\nexport function Popover({\n  content,\n  placement = \"bottom\",\n  closeOnBlur = true,\n  isOpen: controlledIsOpen,\n  onOpen,\n  onClose,\n  className,\n  children,\n}: PopoverProps) {\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const isControlled = controlledIsOpen !== undefined;\n  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;\n\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const setOpen = useCallback((open: boolean) => {\n    if (!isControlled) {\n      setInternalIsOpen(open);\n    }\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  }, [isControlled, onOpen, onClose]);\n\n  const updatePosition = useCallback(() => {\n    if (!triggerRef.current || !popoverRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const popoverRect = popoverRef.current.getBoundingClientRect();\n    const gap = 8;\n\n    let top = 0;\n    let left = 0;\n\n    switch (placement) {\n      case \"top\":\n        top = triggerRect.top - popoverRect.height - gap;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case \"bottom\":\n        top = triggerRect.bottom + gap;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case \"left\":\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.left - popoverRect.width - gap;\n        break;\n      case \"right\":\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.right + gap;\n        break;\n    }\n\n    setPosition({ top: top + window.scrollY, left: left + window.scrollX });\n  }, [placement]);\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- useLayoutEffect for DOM measurement before paint\n    if (isOpen) updatePosition();\n  }, [isOpen, updatePosition]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen || !closeOnBlur) return;\n\n    const handleClick = (e: MouseEvent) => {\n      if (\n        triggerRef.current?.contains(e.target as Node) ||\n        popoverRef.current?.contains(e.target as Node)\n      )\n        return;\n      setOpen(false);\n    };\n\n    document.addEventListener(\"click\", handleClick);\n    return () => document.removeEventListener(\"click\", handleClick);\n  }, [isOpen, closeOnBlur, setOpen]);\n\n  // Close on Escape\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isOpen, setOpen]);\n\n  const handleTriggerClick = () => {\n    setOpen(!isOpen);\n  };\n\n  return (\n    <>\n      <Box\n        as=\"span\"\n        ref={triggerRef}\n        display=\"inline-block\"\n        onClick={handleTriggerClick}\n        aria-expanded={isOpen}\n        aria-haspopup=\"dialog\"\n        cursor=\"pointer\"\n      >\n        {children}\n      </Box>\n      {isOpen &&\n        createPortal(\n          <Box\n            ref={popoverRef}\n            position=\"absolute\"\n            bg=\"surface\"\n            border=\"thin\"\n            borderColor=\"border\"\n            rounded=\"md\"\n            shadow=\"lg\"\n            zIndex=\"dropdown\"\n            minW=\"200px\"\n            className={clsx(styles.popover, className)}\n            style={{ top: position.top, left: position.left }}\n            role=\"dialog\"\n          >\n            {content}\n          </Box>,\n          document.body\n        )}\n    </>\n  );\n}\n\n/**\n * PopoverHeader - Header section for popover\n */\nexport function PopoverHeader({ className, children }: PopoverHeaderProps) {\n  return (\n    <Box\n      px={4}\n      py={3}\n      borderBottom=\"thin\"\n      borderColor=\"border\"\n      fontWeight=\"medium\"\n      className={clsx(styles.header, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * PopoverBody - Body section for popover\n */\nexport function PopoverBody({ className, children }: PopoverBodyProps) {\n  return (\n    <Box px={4} py={3} className={clsx(styles.body, className)}>\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Progress/Progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,WAAW;IACX,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAS,EACT,GAAS,EACT,WAAuB,EACvB,IAAW,EACX,eAAuB,EACvB,SAAS,GACV,EAAE,aAAa,2CAkCf"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,aAAa,GAAG;IAC1B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,WAAW;IACX,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgBF;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAS,EACT,GAAS,EACT,WAAuB,EACvB,IAAW,EACX,eAAuB,EACvB,SAAS,GACV,EAAE,aAAa,2CAkCf"}

package/dist/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./progress.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ProgressColorScheme =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport type ProgressProps = {\n  /** Progress value (0-100) */\n  value?: number;\n  /** Maximum value (default 100) */\n  max?: number;\n  /** Color scheme */\n  colorScheme?: ProgressColorScheme;\n  /** Size */\n  size?: ProgressSize;\n  /** Indeterminate mode (loading without known progress) */\n  isIndeterminate?: boolean;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: \"4px\",\n  md: \"8px\",\n  lg: \"12px\",\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Progress - Progress bar indicator\n *\n * A visual indicator of completion progress:\n * - Value-based: shows percentage complete\n * - Indeterminate: animated loading state\n *\n * Features:\n * - 6 color schemes\n * - 3 sizes (sm, md, lg)\n * - Accessible with role=\"progressbar\" and ARIA attributes\n */\nexport function Progress({\n  value = 0,\n  max = 100,\n  colorScheme = \"primary\",\n  size = \"md\",\n  isIndeterminate = false,\n  className,\n}: ProgressProps) {\n  const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n  const height = sizeConfig[size];\n\n  return (\n    <Box\n      role=\"progressbar\"\n      aria-valuenow={isIndeterminate ? undefined : value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      position=\"relative\"\n      overflow=\"hidden\"\n      rounded=\"full\"\n      bg=\"surface\"\n      className={clsx(styles.track, className)}\n      style={{ \"--progress-height\": height } as CSSProperties}\n    >\n      <Box\n        position=\"absolute\"\n        inset={0}\n        rounded=\"full\"\n        bg={`${colorScheme}-default` as any}\n        className={clsx(\n          styles.fill,\n          isIndeterminate && styles.indeterminate\n        )}\n        style={\n          isIndeterminate\n            ? undefined\n            : ({ \"--progress-width\": `${percentage}%` } as CSSProperties)\n        }\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAsCA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAkBO,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB;AACF,GAAkB;AAChB,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;AACjE,QAAM,SAAS,WAAW,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAe,kBAAkB,SAAY;AAAA,MAC7C,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,UAAS;AAAA,MACT,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,IAAG;AAAA,MACH,WAAW,KAAK,OAAO,OAAO,SAAS;AAAA,MACvC,OAAO,EAAE,qBAAqB,OAAA;AAAA,MAE9B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAAQ;AAAA,UACR,IAAI,GAAG,WAAW;AAAA,UAClB,WAAW;AAAA,YACT,OAAO;AAAA,YACP,mBAAmB,OAAO;AAAA,UAAA;AAAA,UAE5B,OACE,kBACI,SACC,EAAE,oBAAoB,GAAG,UAAU,IAAA;AAAA,QAAI;AAAA,MAAA;AAAA,IAEhD;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport type { BackgroundColorValue } from \"@/components/Box/colors/colors\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./progress.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ProgressColorScheme =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport type ProgressProps = {\n  /** Progress value (0-100) */\n  value?: number;\n  /** Maximum value (default 100) */\n  max?: number;\n  /** Color scheme */\n  colorScheme?: ProgressColorScheme;\n  /** Size */\n  size?: ProgressSize;\n  /** Indeterminate mode (loading without known progress) */\n  isIndeterminate?: boolean;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: \"4px\",\n  md: \"8px\",\n  lg: \"12px\",\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Progress - Progress bar indicator\n *\n * A visual indicator of completion progress:\n * - Value-based: shows percentage complete\n * - Indeterminate: animated loading state\n *\n * Features:\n * - 6 color schemes\n * - 3 sizes (sm, md, lg)\n * - Accessible with role=\"progressbar\" and ARIA attributes\n */\nexport function Progress({\n  value = 0,\n  max = 100,\n  colorScheme = \"primary\",\n  size = \"md\",\n  isIndeterminate = false,\n  className,\n}: ProgressProps) {\n  const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n  const height = sizeConfig[size];\n\n  return (\n    <Box\n      role=\"progressbar\"\n      aria-valuenow={isIndeterminate ? undefined : value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      position=\"relative\"\n      overflow=\"hidden\"\n      rounded=\"full\"\n      bg=\"surface\"\n      className={clsx(styles.track, className)}\n      style={{ \"--progress-height\": height } as CSSProperties}\n    >\n      <Box\n        position=\"absolute\"\n        inset={0}\n        rounded=\"full\"\n        bg={`${colorScheme}-default` as BackgroundColorValue}\n        className={clsx(\n          styles.fill,\n          isIndeterminate && styles.indeterminate\n        )}\n        style={\n          isIndeterminate\n            ? undefined\n            : ({ \"--progress-width\": `${percentage}%` } as CSSProperties)\n        }\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAuCA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAkBO,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB;AACF,GAAkB;AAChB,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;AACjE,QAAM,SAAS,WAAW,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAe,kBAAkB,SAAY;AAAA,MAC7C,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,UAAS;AAAA,MACT,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,IAAG;AAAA,MACH,WAAW,KAAK,OAAO,OAAO,SAAS;AAAA,MACvC,OAAO,EAAE,qBAAqB,OAAA;AAAA,MAE9B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAAQ;AAAA,UACR,IAAI,GAAG,WAAW;AAAA,UAClB,WAAW;AAAA,YACT,OAAO;AAAA,YACP,mBAAmB,OAAO;AAAA,UAAA;AAAA,UAE5B,OACE,kBACI,SACC,EAAE,oBAAoB,GAAG,UAAU,IAAA;AAAA,QAAI;AAAA,MAAA;AAAA,IAEhD;AAAA,EAAA;AAGN;"}

package/dist/components/Stack/Stack.d.ts

@@ -1,12 +1,13 @@
 import { ElementType } from 'react';
 import { Polymorphic } from '../../types/Polymorphic';
 import { BoxOwnProps } from '../Box/Box';
+import { ResponsiveValue } from '../../utils/breakpoints';
 import { FlexDirectionValue, JustifyContentValue, AlignItemsValue, SpacingValue } from '../Box/flexbox/flexbox';
 export type StackOwnProps = Omit<BoxOwnProps, "display" | "flexDirection" | "justifyContent" | "alignItems" | "flexWrap" | "gap"> & {
     /** Stack direction: row, column, row-reverse, column-reverse */
     direction?: FlexDirectionValue;
     /** Gap between children (0-32 spacing multiplier) */
-    gap?: SpacingValue;
+    gap?: ResponsiveValue<SpacingValue>;
     /** Align items along the cross axis */
     align?: AlignItemsValue;
     /** Justify content along the main axis */

package/dist/components/Stack/Stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,YAAY,EACb,MAAM,kCAAkC,CAAC;AAM1C,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,SAAS,GAAG,eAAe,GAAG,gBAAgB,GAAG,YAAY,GAAG,UAAU,GAAG,KAAK,CACnF,GAAG;IACF,gEAAgE;IAChE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qDAAqD;IACrD,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CACjE,CAAC,EACD,aAAa,CACd,CAAC;AAMF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EACnD,EAAE,EACF,SAAoB,EACpB,GAAG,EACH,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,CAAC,CAAC,CAAC,2CAgBf"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,eAAe,EACf,YAAY,EACb,MAAM,kCAAkC,CAAC;AAM1C,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,SAAS,GAAG,eAAe,GAAG,gBAAgB,GAAG,YAAY,GAAG,UAAU,GAAG,KAAK,CACnF,GAAG;IACF,gEAAgE;IAChE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,qDAAqD;IACrD,GAAG,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACpC,uCAAuC;IACvC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,CACjE,CAAC,EACD,aAAa,CACd,CAAC;AAMF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EACnD,EAAE,EACF,SAAoB,EACpB,GAAG,EACH,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,CAAC,CAAC,CAAC,2CAgBf"}

package/dist/components/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type {\n  FlexDirectionValue,\n  JustifyContentValue,\n  AlignItemsValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type StackOwnProps = Omit<\n  BoxOwnProps,\n  \"display\" | \"flexDirection\" | \"justifyContent\" | \"alignItems\" | \"flexWrap\" | \"gap\"\n> & {\n  /** Stack direction: row, column, row-reverse, column-reverse */\n  direction?: FlexDirectionValue;\n  /** Gap between children (0-32 spacing multiplier) */\n  gap?: SpacingValue;\n  /** Align items along the cross axis */\n  align?: AlignItemsValue;\n  /** Justify content along the main axis */\n  justify?: JustifyContentValue;\n  /** Enable flex wrapping */\n  wrap?: boolean;\n};\n\nexport type StackProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  StackOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Stack - Flex-based layout component\n *\n * A polymorphic flex container that provides:\n * - Default element: <div>\n * - Direction: column (default), row, row-reverse, column-reverse\n * - Gap: spacing multiplier (0-32)\n * - Align: cross-axis alignment\n * - Justify: main-axis alignment\n * - Wrap: enable flex wrapping\n */\nexport function Stack<T extends ElementType = \"div\">({\n  as,\n  direction = \"column\",\n  gap,\n  align,\n  justify,\n  wrap,\n  children,\n  ...rest\n}: StackProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"flex\"\n      flexDirection={direction}\n      gap={gap}\n      alignItems={align}\n      justifyContent={justify}\n      flexWrap={wrap ? \"wrap\" : undefined}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAkDO,SAAS,MAAqC;AAAA,EACnD;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,eAAe;AAAA,QACf;AAAA,QACA,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,UAAU,OAAO,SAAS;AAAA,QACzB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}
+{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport type {\n  FlexDirectionValue,\n  JustifyContentValue,\n  AlignItemsValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type StackOwnProps = Omit<\n  BoxOwnProps,\n  \"display\" | \"flexDirection\" | \"justifyContent\" | \"alignItems\" | \"flexWrap\" | \"gap\"\n> & {\n  /** Stack direction: row, column, row-reverse, column-reverse */\n  direction?: FlexDirectionValue;\n  /** Gap between children (0-32 spacing multiplier) */\n  gap?: ResponsiveValue<SpacingValue>;\n  /** Align items along the cross axis */\n  align?: AlignItemsValue;\n  /** Justify content along the main axis */\n  justify?: JustifyContentValue;\n  /** Enable flex wrapping */\n  wrap?: boolean;\n};\n\nexport type StackProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  StackOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Stack - Flex-based layout component\n *\n * A polymorphic flex container that provides:\n * - Default element: <div>\n * - Direction: column (default), row, row-reverse, column-reverse\n * - Gap: spacing multiplier (0-32)\n * - Align: cross-axis alignment\n * - Justify: main-axis alignment\n * - Wrap: enable flex wrapping\n */\nexport function Stack<T extends ElementType = \"div\">({\n  as,\n  direction = \"column\",\n  gap,\n  align,\n  justify,\n  wrap,\n  children,\n  ...rest\n}: StackProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"flex\"\n      flexDirection={direction}\n      gap={gap}\n      alignItems={align}\n      justifyContent={justify}\n      flexWrap={wrap ? \"wrap\" : undefined}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAmDO,SAAS,MAAqC;AAAA,EACnD;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,eAAe;AAAA,QACf;AAAA,QACA,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,UAAU,OAAO,SAAS;AAAA,QACzB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAUpE,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,sBAAsB;IACtB,KAAK,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAMF;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAiB,EACjB,SAAa,EACb,UAAc,EACd,QAAgB,EAChB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,YAAY,2CA6Hd"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA6D,MAAM,OAAO,CAAC;AAUlG,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,sBAAsB;IACtB,KAAK,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAMF;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAiB,EACjB,SAAa,EACb,UAAc,EACd,QAAgB,EAChB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,YAAY,2CA8Hd"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { Box } from "../Box/Box.js";
@@ -25,7 +25,7 @@ function Tooltip({
   const tooltipRef = useRef(null);
   const openTimeoutRef = useRef(null);
   const closeTimeoutRef = useRef(null);
-  const updatePosition = () => {
+  const updatePosition = useCallback(() => {
     if (!triggerRef.current || !tooltipRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
@@ -51,10 +51,10 @@ function Tooltip({
         break;
     }
     setPosition({ top: top + window.scrollY, left: left + window.scrollX });
-  };
-  useEffect(() => {
+  }, [placement]);
+  useLayoutEffect(() => {
     if (isOpen) updatePosition();
-  }, [isOpen, placement]);
+  }, [isOpen, updatePosition]);
   const setOpen = (open) => {
     if (!isControlled) {
       setInternalIsOpen(open);