@yamada-ui/react 2.2.2-dev-20260525091318 → 2.2.2-dev-20260525152928

package/dist/esm/components/snacks/snacks.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"snacks.style.js","names":[],"sources":["../../../../src/components/snacks/snacks.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const snacksStyle = defineComponentSlotStyle({\n  base: {\n    closeButton: {\n      \"&:is([data-variant='plain'], [data-variant='island'])\": {\n        colorScheme: \"mono!\",\n      },\n      \"&:is([data-variant='solid'])\": {\n        color: \"colorScheme.contrast!\",\n        _hover: { bg: \"colorScheme.solid!\" },\n      },\n      fontSize: \"md!\",\n      minBoxSize: \"6!\",\n      position: \"absolute\",\n      right: \"3\",\n      top: \"2.5\",\n    },\n    content: {\n      \"&[data-close-button]\": { pe: \"6\" },\n      display: \"flex\",\n      flex: \"1\",\n      flexDirection: \"column\",\n      gap: \"1\",\n    },\n    item: {\n      insetX: \"0\",\n      maxW: \"full\",\n      position: \"absolute\",\n      top: \"calc({gap} * {index})\",\n      w: \"100%\",\n      zIndex: \"{z-index}\",\n    },\n    list: { position: \"relative\", w: \"full\" },\n    root: {\n      \"&[data-negative]\": { m: \"calc({top} * -1) 0 calc({bottom} * -1)\" },\n      \"--gap\": \"spaces.md\",\n      w: \"full\",\n    },\n  },\n})\n\nexport type SnacksStyle = typeof snacksStyle\n"],"mappings":";;AAEA,MAAa,cAAc,yBAAyB,EAClD,MAAM;CACJ,aAAa;EACX,yDAAyD,EACvD,aAAa,SACd;EACD,gCAAgC;GAC9B,OAAO;GACP,QAAQ,EAAE,IAAI,sBAAsB;GACrC;EACD,UAAU;EACV,YAAY;EACZ,UAAU;EACV,OAAO;EACP,KAAK;EACN;CACD,SAAS;EACP,wBAAwB,EAAE,IAAI,KAAK;EACnC,SAAS;EACT,MAAM;EACN,eAAe;EACf,KAAK;EACN;CACD,MAAM;EACJ,QAAQ;EACR,MAAM;EACN,UAAU;EACV,KAAK;EACL,GAAG;EACH,QAAQ;EACT;CACD,MAAM;EAAE,UAAU;EAAY,GAAG;EAAQ;CACzC,MAAM;EACJ,oBAAoB,EAAE,GAAG,0CAA0C;EACnE,SAAS;EACT,GAAG;EACJ;CACF,EACF,CAAC"}
+{"version":3,"file":"snacks.style.js","names":[],"sources":["../../../../src/components/snacks/snacks.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const snacksStyle = defineComponentSlotStyle({\n  base: {\n    closeButton: {\n      \"&:is([data-variant='plain'], [data-variant='island'])\": {\n        colorScheme: \"mono!\",\n      },\n      \"&:is([data-variant='solid'])\": {\n        color: \"colorScheme.contrast!\",\n        _hover: { bg: \"colorScheme.solid!\" },\n      },\n      fontSize: \"md!\",\n      minBoxSize: \"6!\",\n      position: \"absolute\",\n      right: \"3\",\n      top: \"2.5\",\n    },\n    content: {\n      \"&[data-close-button]\": { pe: \"6\" },\n      display: \"flex\",\n      flex: \"1\",\n      flexDirection: \"column\",\n      gap: \"1\",\n    },\n    item: {\n      insetX: \"0\",\n      maxW: \"full\",\n      position: \"absolute\",\n      top: \"calc({gap} * {index})\",\n      w: \"100%\",\n      zIndex: \"{z-index}\",\n    },\n    list: { position: \"relative\", w: \"full\" },\n    root: {\n      \"&[data-negative]\": { m: \"calc({top} * -1) 0 calc({bottom} * -1)\" },\n      \"--gap\": \"spaces.md\",\n      w: \"full\",\n    },\n  },\n})\n\nexport type SnacksStyle = typeof snacksStyle\n"],"mappings":";;AAEA,MAAa,cAAc,yBAAyB,EAClD,MAAM;CACJ,aAAa;EACX,yDAAyD,EACvD,aAAa,QACf;EACA,gCAAgC;GAC9B,OAAO;GACP,QAAQ,EAAE,IAAI,qBAAqB;EACrC;EACA,UAAU;EACV,YAAY;EACZ,UAAU;EACV,OAAO;EACP,KAAK;CACP;CACA,SAAS;EACP,wBAAwB,EAAE,IAAI,IAAI;EAClC,SAAS;EACT,MAAM;EACN,eAAe;EACf,KAAK;CACP;CACA,MAAM;EACJ,QAAQ;EACR,MAAM;EACN,UAAU;EACV,KAAK;EACL,GAAG;EACH,QAAQ;CACV;CACA,MAAM;EAAE,UAAU;EAAY,GAAG;CAAO;CACxC,MAAM;EACJ,oBAAoB,EAAE,GAAG,yCAAyC;EAClE,SAAS;EACT,GAAG;CACL;AACF,EACF,CAAC"}

package/dist/esm/components/snacks/use-snacks.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-snacks.js","names":[],"sources":["../../../../src/components/snacks/use-snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { SnacksConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { SnackCloseButtonProps, SnackContentProps } from \"./snacks\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useSystem } from \"../../core\"\n\nexport interface Snack extends Omit<\n  UseSnacksOptions,\n  \"direction\" | \"limit\" | \"startIndex\"\n> {\n  id: string\n  onClose: () => void\n  onCloseComplete?: () => void\n}\n\nlet counter = 0\n\ninterface SnackMethodsOptions extends Partial<Omit<Snack, \"onClose\">> {}\n\nexport interface UseSnacksOptions\n  extends\n    Omit<Alert.RootProps, \"direction\" | \"title\">,\n    Pick<Alert.LoadingProps, \"loadingScheme\">,\n    SnacksConfig {\n  /**\n   * The description of the snack.\n   */\n  description?: ReactNode\n  /**\n   * The title of the snack.\n   */\n  title?: ReactNode\n  /**\n   * If `true`, the snack will have an icon.\n   *\n   * @default true\n   */\n  withIcon?: boolean\n  /**\n   * Props for the snack close button.\n   */\n  closeButtonProps?: SnackCloseButtonProps\n  /**\n   * Props for the snack content component.\n   */\n  contentProps?: SnackContentProps\n  /**\n   * Props for the alert description component.\n   */\n  descriptionProps?: Alert.DescriptionProps\n  /**\n   * Props for the alert icon component.\n   */\n  iconProps?: Alert.IconProps\n  /**\n   * Props for the alert loading component.\n   */\n  loadingProps?: Alert.LoadingProps\n  /**\n   * Props for the alert title component.\n   */\n  titleProps?: Alert.TitleProps\n}\n\n/**\n * `useSnacks` is a custom hook for controlling notifications used in forms and the like.\n *\n * @see https://yamada-ui.com/docs/hooks/use-snacks\n */\nexport const useSnacks = (options: UseSnacksOptions = {}) => {\n  const [items, setItems] = useState<Snack[]>([])\n  const { config } = useSystem()\n\n  const systemOptions = useMemo(() => config.snacks ?? {}, [config])\n  const defaultOptions = useMemo(\n    () => ({ ...systemOptions, ...options }),\n    [options, systemOptions],\n  )\n  const { direction, limit = 3, startIndex } = defaultOptions\n\n  const getOptions = useCallback(\n    (options: SnackMethodsOptions) => ({ ...defaultOptions, ...options }),\n    [defaultOptions],\n  )\n\n  const snack = useMemo(() => {\n    const methods = (options: SnackMethodsOptions = {}) => {\n      options = getOptions(options)\n      // eslint-disable-next-line react-hooks/globals\n      counter += 1\n\n      const { id = counter.toString(), ...rest } = options\n      const onClose = () =>\n        setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n\n      const snack: Snack = { id, onClose, ...rest }\n\n      setItems((prev) => [\n        ...prev.splice(-1 * ((limit ?? Infinity) - 1)),\n        snack,\n      ])\n\n      return id\n    }\n\n    methods.update = (\n      id: number | string,\n      options: Omit<SnackMethodsOptions, \"id\">,\n    ) => {\n      options = getOptions(options)\n\n      setItems((prev) =>\n        prev.map((prevOptions) =>\n          prevOptions.id === id ? { ...prevOptions, ...options } : prevOptions,\n        ),\n      )\n    }\n\n    methods.closeAll = () => {\n      setItems([])\n    }\n\n    methods.close = (id: number | string) => {\n      setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n    }\n\n    methods.isActive = (id: number | string) =>\n      !!items.find((prevOptions) => prevOptions.id === id)\n\n    return methods\n  }, [items, limit, getOptions])\n\n  const snacks = useMemo(\n    () => ({ direction, items, startIndex }),\n    [direction, startIndex, items],\n  )\n\n  return { snack, snacks }\n}\n\nexport type UseSnacksReturn = ReturnType<typeof useSnacks>\n"],"mappings":";;;;AAkBA,IAAI,UAAU;;;;;;AAsDd,MAAa,aAAa,UAA4B,EAAE,KAAK;CAC3D,MAAM,CAAC,OAAO,YAAY,SAAkB,EAAE,CAAC;CAC/C,MAAM,EAAE,WAAW,WAAW;CAE9B,MAAM,gBAAgB,cAAc,OAAO,UAAU,EAAE,EAAE,CAAC,OAAO,CAAC;CAClE,MAAM,iBAAiB,eACd;EAAE,GAAG;EAAe,GAAG;EAAS,GACvC,CAAC,SAAS,cAAc,CACzB;CACD,MAAM,EAAE,WAAW,QAAQ,GAAG,eAAe;CAE7C,MAAM,aAAa,aAChB,aAAkC;EAAE,GAAG;EAAgB,GAAG;EAAS,GACpE,CAAC,eAAe,CACjB;CAsDD,OAAO;EAAE,OApDK,cAAc;GAC1B,MAAM,WAAW,UAA+B,EAAE,KAAK;IACrD,UAAU,WAAW,QAAQ;IAE7B,WAAW;IAEX,MAAM,EAAE,KAAK,QAAQ,UAAU,EAAE,GAAG,SAAS;IAC7C,MAAM,gBACJ,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,GAAG,CAAC;IAEzE,MAAM,QAAe;KAAE;KAAI;KAAS,GAAG;KAAM;IAE7C,UAAU,SAAS,CACjB,GAAG,KAAK,OAAO,OAAO,SAAS,YAAY,GAAG,EAC9C,MACD,CAAC;IAEF,OAAO;;GAGT,QAAQ,UACN,IACA,YACG;IACH,UAAU,WAAW,QAAQ;IAE7B,UAAU,SACR,KAAK,KAAK,gBACR,YAAY,OAAO,KAAK;KAAE,GAAG;KAAa,GAAG;KAAS,GAAG,YAC1D,CACF;;GAGH,QAAQ,iBAAiB;IACvB,SAAS,EAAE,CAAC;;GAGd,QAAQ,SAAS,OAAwB;IACvC,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,GAAG,CAAC;;GAGzE,QAAQ,YAAY,OAClB,CAAC,CAAC,MAAM,MAAM,gBAAgB,YAAY,OAAO,GAAG;GAEtD,OAAO;KACN;GAAC;GAAO;GAAO;GAAW,CAOf;EAAE,QALD,eACN;GAAE;GAAW;GAAO;GAAY,GACvC;GAAC;GAAW;GAAY;GAAM,CAGV;EAAE"}
+{"version":3,"file":"use-snacks.js","names":[],"sources":["../../../../src/components/snacks/use-snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { SnacksConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { SnackCloseButtonProps, SnackContentProps } from \"./snacks\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useSystem } from \"../../core\"\n\nexport interface Snack extends Omit<\n  UseSnacksOptions,\n  \"direction\" | \"limit\" | \"startIndex\"\n> {\n  id: string\n  onClose: () => void\n  onCloseComplete?: () => void\n}\n\nlet counter = 0\n\ninterface SnackMethodsOptions extends Partial<Omit<Snack, \"onClose\">> {}\n\nexport interface UseSnacksOptions\n  extends\n    Omit<Alert.RootProps, \"direction\" | \"title\">,\n    Pick<Alert.LoadingProps, \"loadingScheme\">,\n    SnacksConfig {\n  /**\n   * The description of the snack.\n   */\n  description?: ReactNode\n  /**\n   * The title of the snack.\n   */\n  title?: ReactNode\n  /**\n   * If `true`, the snack will have an icon.\n   *\n   * @default true\n   */\n  withIcon?: boolean\n  /**\n   * Props for the snack close button.\n   */\n  closeButtonProps?: SnackCloseButtonProps\n  /**\n   * Props for the snack content component.\n   */\n  contentProps?: SnackContentProps\n  /**\n   * Props for the alert description component.\n   */\n  descriptionProps?: Alert.DescriptionProps\n  /**\n   * Props for the alert icon component.\n   */\n  iconProps?: Alert.IconProps\n  /**\n   * Props for the alert loading component.\n   */\n  loadingProps?: Alert.LoadingProps\n  /**\n   * Props for the alert title component.\n   */\n  titleProps?: Alert.TitleProps\n}\n\n/**\n * `useSnacks` is a custom hook for controlling notifications used in forms and the like.\n *\n * @see https://yamada-ui.com/docs/hooks/use-snacks\n */\nexport const useSnacks = (options: UseSnacksOptions = {}) => {\n  const [items, setItems] = useState<Snack[]>([])\n  const { config } = useSystem()\n\n  const systemOptions = useMemo(() => config.snacks ?? {}, [config])\n  const defaultOptions = useMemo(\n    () => ({ ...systemOptions, ...options }),\n    [options, systemOptions],\n  )\n  const { direction, limit = 3, startIndex } = defaultOptions\n\n  const getOptions = useCallback(\n    (options: SnackMethodsOptions) => ({ ...defaultOptions, ...options }),\n    [defaultOptions],\n  )\n\n  const snack = useMemo(() => {\n    const methods = (options: SnackMethodsOptions = {}) => {\n      options = getOptions(options)\n      // eslint-disable-next-line react-hooks/globals\n      counter += 1\n\n      const { id = counter.toString(), ...rest } = options\n      const onClose = () =>\n        setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n\n      const snack: Snack = { id, onClose, ...rest }\n\n      setItems((prev) => [\n        ...prev.splice(-1 * ((limit ?? Infinity) - 1)),\n        snack,\n      ])\n\n      return id\n    }\n\n    methods.update = (\n      id: number | string,\n      options: Omit<SnackMethodsOptions, \"id\">,\n    ) => {\n      options = getOptions(options)\n\n      setItems((prev) =>\n        prev.map((prevOptions) =>\n          prevOptions.id === id ? { ...prevOptions, ...options } : prevOptions,\n        ),\n      )\n    }\n\n    methods.closeAll = () => {\n      setItems([])\n    }\n\n    methods.close = (id: number | string) => {\n      setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n    }\n\n    methods.isActive = (id: number | string) =>\n      !!items.find((prevOptions) => prevOptions.id === id)\n\n    return methods\n  }, [items, limit, getOptions])\n\n  const snacks = useMemo(\n    () => ({ direction, items, startIndex }),\n    [direction, startIndex, items],\n  )\n\n  return { snack, snacks }\n}\n\nexport type UseSnacksReturn = ReturnType<typeof useSnacks>\n"],"mappings":";;;;AAkBA,IAAI,UAAU;;;;;;AAsDd,MAAa,aAAa,UAA4B,CAAC,MAAM;CAC3D,MAAM,CAAC,OAAO,YAAY,SAAkB,CAAC,CAAC;CAC9C,MAAM,EAAE,WAAW,UAAU;CAE7B,MAAM,gBAAgB,cAAc,OAAO,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC;CACjE,MAAM,iBAAiB,eACd;EAAE,GAAG;EAAe,GAAG;CAAQ,IACtC,CAAC,SAAS,aAAa,CACzB;CACA,MAAM,EAAE,WAAW,QAAQ,GAAG,eAAe;CAE7C,MAAM,aAAa,aAChB,aAAkC;EAAE,GAAG;EAAgB,GAAG;CAAQ,IACnE,CAAC,cAAc,CACjB;CAsDA,OAAO;EAAE,OApDK,cAAc;GAC1B,MAAM,WAAW,UAA+B,CAAC,MAAM;IACrD,UAAU,WAAW,OAAO;IAE5B,WAAW;IAEX,MAAM,EAAE,KAAK,QAAQ,SAAS,GAAG,GAAG,SAAS;IAC7C,MAAM,gBACJ,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,EAAE,CAAC;IAExE,MAAM,QAAe;KAAE;KAAI;KAAS,GAAG;IAAK;IAE5C,UAAU,SAAS,CACjB,GAAG,KAAK,OAAO,OAAO,SAAS,YAAY,EAAE,GAC7C,KACF,CAAC;IAED,OAAO;GACT;GAEA,QAAQ,UACN,IACA,YACG;IACH,UAAU,WAAW,OAAO;IAE5B,UAAU,SACR,KAAK,KAAK,gBACR,YAAY,OAAO,KAAK;KAAE,GAAG;KAAa,GAAG;IAAQ,IAAI,WAC3D,CACF;GACF;GAEA,QAAQ,iBAAiB;IACvB,SAAS,CAAC,CAAC;GACb;GAEA,QAAQ,SAAS,OAAwB;IACvC,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,EAAE,CAAC;GACxE;GAEA,QAAQ,YAAY,OAClB,CAAC,CAAC,MAAM,MAAM,gBAAgB,YAAY,OAAO,EAAE;GAErD,OAAO;EACT,GAAG;GAAC;GAAO;GAAO;EAAU,CAOf;EAAG,QALD,eACN;GAAE;GAAW;GAAO;EAAW,IACtC;GAAC;GAAW;GAAY;EAAK,CAGV;CAAE;AACzB"}

package/dist/esm/components/stack/h-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"h-stack.js","names":[],"sources":["../../../../src/components/stack/h-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { HStackStyle } from \"./h-stack.style\"\nimport type { StackProps } from \"./stack\"\nimport { createComponent } from \"../../core\"\nimport { hStackStyle } from \"./h-stack.style\"\nimport { Stack } from \"./stack\"\n\nexport interface HStackProps\n  extends WithoutThemeProps<StackProps, HStackStyle>, ThemeProps<HStackStyle> {}\n\nconst {\n  PropsContext: HStackPropsContext,\n  usePropsContext: useHStackPropsContext,\n  withContext,\n} = createComponent<HStackProps, HStackStyle>(\"stack--horizontal\", hStackStyle)\n\nexport { HStackPropsContext, useHStackPropsContext }\n\n/**\n * `HStack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const HStack = withContext<\"div\", HStackProps>(Stack)(undefined, {\n  direction: \"row\",\n})\n"],"mappings":";;;;;AAYA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,qBAAqB,YAAY;;;;;;AAS/E,MAAa,SAAS,YAAgC,MAAM,CAAC,KAAA,GAAW,EACtE,WAAW,OACZ,CAAC"}
+{"version":3,"file":"h-stack.js","names":[],"sources":["../../../../src/components/stack/h-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { HStackStyle } from \"./h-stack.style\"\nimport type { StackProps } from \"./stack\"\nimport { createComponent } from \"../../core\"\nimport { hStackStyle } from \"./h-stack.style\"\nimport { Stack } from \"./stack\"\n\nexport interface HStackProps\n  extends WithoutThemeProps<StackProps, HStackStyle>, ThemeProps<HStackStyle> {}\n\nconst {\n  PropsContext: HStackPropsContext,\n  usePropsContext: useHStackPropsContext,\n  withContext,\n} = createComponent<HStackProps, HStackStyle>(\"stack--horizontal\", hStackStyle)\n\nexport { HStackPropsContext, useHStackPropsContext }\n\n/**\n * `HStack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const HStack = withContext<\"div\", HStackProps>(Stack)(undefined, {\n  direction: \"row\",\n})\n"],"mappings":";;;;;AAYA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,qBAAqB,WAAW;;;;;;AAS9E,MAAa,SAAS,YAAgC,KAAK,EAAE,KAAA,GAAW,EACtE,WAAW,MACb,CAAC"}

package/dist/esm/components/stack/h-stack.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"h-stack.style.js","names":[],"sources":["../../../../src/components/stack/h-stack.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const hStackStyle = defineComponentStyle({\n  base: {\n    alignItems: \"center\",\n    gap: \"md\",\n  },\n})\n\nexport type HStackStyle = typeof hStackStyle\n"],"mappings":";;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,YAAY;CACZ,KAAK;CACN,EACF,CAAC"}
+{"version":3,"file":"h-stack.style.js","names":[],"sources":["../../../../src/components/stack/h-stack.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const hStackStyle = defineComponentStyle({\n  base: {\n    alignItems: \"center\",\n    gap: \"md\",\n  },\n})\n\nexport type HStackStyle = typeof hStackStyle\n"],"mappings":";;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,YAAY;CACZ,KAAK;AACP,EACF,CAAC"}

package/dist/esm/components/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { replaceObject, useValidChildren } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n  /**\n   * The CSS `align-items` property.\n   */\n  align?: CSSProps[\"alignItems\"]\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSProps[\"flexDirection\"]\n  /**\n   * The CSS `justify-content` property.\n   */\n  justify?: CSSProps[\"justifyContent\"]\n  /**\n   * If `true`, each stack item will show a separator.\n   */\n  separator?: ReactElement\n  /**\n   * The CSS `flex-wrap` property.\n   */\n  wrap?: CSSProps[\"flexWrap\"]\n}\n\nconst {\n  PropsContext: StackPropsContext,\n  usePropsContext: useStackPropsContext,\n  withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\nexport { StackPropsContext, useStackPropsContext }\n\n/**\n * `Stack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const Stack = withContext<\"div\", StackProps>(\n  ({\n    align: alignItems,\n    children,\n    direction: flexDirection = \"column\",\n    justify: justifyContent,\n    separator,\n    wrap: flexWrap,\n    ...rest\n  }) => {\n    const isColumn = (value: any) =>\n      value === \"column\" || value === \"column-reverse\"\n\n    const validChildren = useValidChildren(children)\n    const cloneChildren = useMemo(\n      () =>\n        separator\n          ? validChildren.map((child, index) => {\n              const key = typeof child.key !== \"undefined\" ? child.key : index\n\n              const cloneSeparator = cloneElement<any>(separator, {\n                borderWidth: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n                ),\n                h: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"fit-content\" : \"100%\",\n                ),\n                w: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"100%\" : \"fit-content\",\n                ),\n              })\n\n              return (\n                <Fragment key={key}>\n                  {index ? cloneSeparator : null}\n                  {child}\n                </Fragment>\n              )\n            })\n          : validChildren,\n      [separator, flexDirection, validChildren],\n    )\n\n    return (\n      <styled.div\n        alignItems={alignItems}\n        flexDirection={flexDirection}\n        flexWrap={flexWrap}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {cloneChildren}\n      </styled.div>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;AAiCA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,WAAW;;;;;;AAShE,MAAa,QAAQ,aAClB,EACC,OAAO,YACP,UACA,WAAW,gBAAgB,UAC3B,SAAS,gBACT,WACA,MAAM,UACN,GAAG,WACC;CACJ,MAAM,YAAY,UAChB,UAAU,YAAY,UAAU;CAElC,MAAM,gBAAgB,iBAAiB,SAAS;CAChD,MAAM,gBAAgB,cAElB,YACI,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,iBAAiB,aAAkB,WAAW;GAClD,cAAA,GAAA,cAAA,eAA2B,gBAAgB,UACzC,SAAS,MAAM,GAAG,cAAc,YACjC;GACD,IAAA,GAAA,cAAA,eAAiB,gBAAgB,UAC/B,SAAS,MAAM,GAAG,gBAAgB,OACnC;GACD,IAAA,GAAA,cAAA,eAAiB,gBAAgB,UAC/B,SAAS,MAAM,GAAG,SAAS,cAC5B;GACF,CAAC;EAEF,OACE,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,iBAAiB,MACzB,MACQ,EAAA,EAHI,IAGJ;GAEb,GACF,eACN;EAAC;EAAW;EAAe;EAAc,CAC1C;CAED,OACE,oBAAC,OAAO,KAAR;EACc;EACG;EACL;EACM;EAChB,GAAI;YAEH;EACU,CAAA;EAGlB,EAAE"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { replaceObject, useValidChildren } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n  /**\n   * The CSS `align-items` property.\n   */\n  align?: CSSProps[\"alignItems\"]\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSProps[\"flexDirection\"]\n  /**\n   * The CSS `justify-content` property.\n   */\n  justify?: CSSProps[\"justifyContent\"]\n  /**\n   * If `true`, each stack item will show a separator.\n   */\n  separator?: ReactElement\n  /**\n   * The CSS `flex-wrap` property.\n   */\n  wrap?: CSSProps[\"flexWrap\"]\n}\n\nconst {\n  PropsContext: StackPropsContext,\n  usePropsContext: useStackPropsContext,\n  withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\nexport { StackPropsContext, useStackPropsContext }\n\n/**\n * `Stack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const Stack = withContext<\"div\", StackProps>(\n  ({\n    align: alignItems,\n    children,\n    direction: flexDirection = \"column\",\n    justify: justifyContent,\n    separator,\n    wrap: flexWrap,\n    ...rest\n  }) => {\n    const isColumn = (value: any) =>\n      value === \"column\" || value === \"column-reverse\"\n\n    const validChildren = useValidChildren(children)\n    const cloneChildren = useMemo(\n      () =>\n        separator\n          ? validChildren.map((child, index) => {\n              const key = typeof child.key !== \"undefined\" ? child.key : index\n\n              const cloneSeparator = cloneElement<any>(separator, {\n                borderWidth: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n                ),\n                h: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"fit-content\" : \"100%\",\n                ),\n                w: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"100%\" : \"fit-content\",\n                ),\n              })\n\n              return (\n                <Fragment key={key}>\n                  {index ? cloneSeparator : null}\n                  {child}\n                </Fragment>\n              )\n            })\n          : validChildren,\n      [separator, flexDirection, validChildren],\n    )\n\n    return (\n      <styled.div\n        alignItems={alignItems}\n        flexDirection={flexDirection}\n        flexWrap={flexWrap}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {cloneChildren}\n      </styled.div>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;AAiCA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,UAAU;;;;;;AAS/D,MAAa,QAAQ,aAClB,EACC,OAAO,YACP,UACA,WAAW,gBAAgB,UAC3B,SAAS,gBACT,WACA,MAAM,UACN,GAAG,WACC;CACJ,MAAM,YAAY,UAChB,UAAU,YAAY,UAAU;CAElC,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,gBAAgB,cAElB,YACI,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,iBAAiB,aAAkB,WAAW;GAClD,cAAA,GAAA,cAAA,eAA2B,gBAAgB,UACzC,SAAS,KAAK,IAAI,cAAc,WAClC;GACA,IAAA,GAAA,cAAA,eAAiB,gBAAgB,UAC/B,SAAS,KAAK,IAAI,gBAAgB,MACpC;GACA,IAAA,GAAA,cAAA,eAAiB,gBAAgB,UAC/B,SAAS,KAAK,IAAI,SAAS,aAC7B;EACF,CAAC;EAED,OACE,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,iBAAiB,MACzB,KACO,EAAA,GAHK,GAGL;CAEd,CAAC,IACD,eACN;EAAC;EAAW;EAAe;CAAa,CAC1C;CAEA,OACE,oBAAC,OAAO,KAAR;EACc;EACG;EACL;EACM;EAChB,GAAI;YAEH;CACS,CAAA;AAEhB,CACF,EAAE"}

package/dist/esm/components/stack/stack.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.style.js","names":[],"sources":["../../../../src/components/stack/stack.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const stackStyle = defineComponentStyle({\n  base: {\n    display: \"flex\",\n    gap: \"lg\",\n  },\n})\n\nexport type StackStyle = typeof stackStyle\n"],"mappings":";;AAEA,MAAa,aAAa,qBAAqB,EAC7C,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC"}
+{"version":3,"file":"stack.style.js","names":[],"sources":["../../../../src/components/stack/stack.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const stackStyle = defineComponentStyle({\n  base: {\n    display: \"flex\",\n    gap: \"lg\",\n  },\n})\n\nexport type StackStyle = typeof stackStyle\n"],"mappings":";;AAEA,MAAa,aAAa,qBAAqB,EAC7C,MAAM;CACJ,SAAS;CACT,KAAK;AACP,EACF,CAAC"}

package/dist/esm/components/stack/v-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"v-stack.js","names":[],"sources":["../../../../src/components/stack/v-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { StackProps } from \"./stack\"\nimport type { VStackStyle } from \"./v-stack.style\"\nimport { createComponent } from \"../../core\"\nimport { Stack } from \"./stack\"\nimport { vStackStyle } from \"./v-stack.style\"\n\nexport interface VStackProps\n  extends WithoutThemeProps<StackProps, VStackStyle>, ThemeProps<VStackStyle> {}\n\nconst {\n  PropsContext: VStackPropsContext,\n  usePropsContext: useVStackPropsContext,\n  withContext,\n} = createComponent<VStackProps, VStackStyle>(\"stack--vertical\", vStackStyle)\n\nexport { useVStackPropsContext, VStackPropsContext }\n\n/**\n * `VStack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const VStack = withContext<\"div\", VStackProps>(Stack)(undefined, {\n  direction: \"column\",\n})\n"],"mappings":";;;;;AAYA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,mBAAmB,YAAY;;;;;;AAS7E,MAAa,SAAS,YAAgC,MAAM,CAAC,KAAA,GAAW,EACtE,WAAW,UACZ,CAAC"}
+{"version":3,"file":"v-stack.js","names":[],"sources":["../../../../src/components/stack/v-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { StackProps } from \"./stack\"\nimport type { VStackStyle } from \"./v-stack.style\"\nimport { createComponent } from \"../../core\"\nimport { Stack } from \"./stack\"\nimport { vStackStyle } from \"./v-stack.style\"\n\nexport interface VStackProps\n  extends WithoutThemeProps<StackProps, VStackStyle>, ThemeProps<VStackStyle> {}\n\nconst {\n  PropsContext: VStackPropsContext,\n  usePropsContext: useVStackPropsContext,\n  withContext,\n} = createComponent<VStackProps, VStackStyle>(\"stack--vertical\", vStackStyle)\n\nexport { useVStackPropsContext, VStackPropsContext }\n\n/**\n * `VStack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const VStack = withContext<\"div\", VStackProps>(Stack)(undefined, {\n  direction: \"column\",\n})\n"],"mappings":";;;;;AAYA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,mBAAmB,WAAW;;;;;;AAS5E,MAAa,SAAS,YAAgC,KAAK,EAAE,KAAA,GAAW,EACtE,WAAW,SACb,CAAC"}

package/dist/esm/components/stack/v-stack.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"v-stack.style.js","names":[],"sources":["../../../../src/components/stack/v-stack.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const vStackStyle = defineComponentStyle({\n  base: {\n    alignItems: \"stretch\",\n    width: \"full\",\n  },\n})\n\nexport type VStackStyle = typeof vStackStyle\n"],"mappings":";;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,YAAY;CACZ,OAAO;CACR,EACF,CAAC"}
+{"version":3,"file":"v-stack.style.js","names":[],"sources":["../../../../src/components/stack/v-stack.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const vStackStyle = defineComponentStyle({\n  base: {\n    alignItems: \"stretch\",\n    width: \"full\",\n  },\n})\n\nexport type VStackStyle = typeof vStackStyle\n"],"mappings":";;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,YAAY;CACZ,OAAO;AACT,EACF,CAAC"}

package/dist/esm/components/stack/z-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"z-stack.js","names":[],"sources":["../../../../src/components/stack/z-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type {\n  CSSObject,\n  Direction,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { ZStackStyle } from \"./z-stack.style\"\nimport {\n  cloneElement,\n  createRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  createComponent,\n  mergeCSS,\n  styled,\n  useInjectVarsIntoCss,\n  useInjectVarsIntoProps,\n} from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { zStackStyle } from \"./z-stack.style\"\n\nexport interface ZStackProps\n  extends Omit<HTMLStyledProps, \"direction\">, ThemeProps<ZStackStyle> {\n  /**\n   * Stack in the specified direction.\n   *\n   * @default 'end'\n   */\n  direction?: Direction\n  /**\n   * If `true`, calculate the `width` and `height` of the element and assign container.\n   *\n   * @default true\n   */\n  fit?: boolean\n  /**\n   * If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * If set the stack will start from the given index.\n   *\n   * @default 0\n   */\n  startIndex?: number\n}\n\nconst {\n  PropsContext: ZStackPropsContext,\n  usePropsContext: useZStackPropsContext,\n  withContext,\n} = createComponent<ZStackProps, ZStackStyle>(\"stack--depth\", zStackStyle)\n\nexport { useZStackPropsContext, ZStackPropsContext }\n\n/**\n * `ZStack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const ZStack = withContext<\"div\", ZStackProps>(\n  ({\n    css,\n    children,\n    direction = \"end\",\n    fit = true,\n    reverse = false,\n    startIndex = 0,\n    ...rest\n  }) => {\n    if (direction === \"start-center\") direction = \"start\"\n    if (direction === \"end-center\") direction = \"end\"\n\n    const refMap = useRef<Map<number, RefObject<HTMLDivElement | null>>>(\n      new Map(),\n    )\n    const [rect, setRect] = useState<{ height: number; width: number }>({\n      height: 0,\n      width: 0,\n    })\n\n    const vertical = useCallback(\n      (space: string) => {\n        if (direction.startsWith(\"start\")) {\n          return { [!reverse ? \"bottom\" : \"top\"]: space }\n        } else if (direction.startsWith(\"end\")) {\n          return { [!reverse ? \"top\" : \"bottom\"]: space }\n        } else {\n          return { [!reverse ? \"top\" : \"bottom\"]: 0 }\n        }\n      },\n      [direction, reverse],\n    )\n\n    const horizontal = useCallback(\n      (space: string) => {\n        if (direction.endsWith(\"-start\")) {\n          return { [!reverse ? \"right\" : \"left\"]: space }\n        } else if (direction.endsWith(\"-end\")) {\n          return { [!reverse ? \"left\" : \"right\"]: space }\n        } else {\n          return { [!reverse ? \"left\" : \"right\"]: 0 }\n        }\n      },\n      [direction, reverse],\n    )\n\n    const cloneChildren = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      const clonedChildren = validChildren.map((child, index) => {\n        const ref = createRef<HTMLDivElement>()\n\n        refMap.current.set(index, ref)\n\n        const key = child.key ?? index\n\n        const zIndex = startIndex + index\n        const space = `calc({space} * ${index})`\n\n        const css: CSSObject = {\n          position: \"absolute\",\n          zIndex,\n          ...vertical(space),\n          ...horizontal(space),\n        }\n\n        const props = {\n          ...child.props,\n          ref: mergeRefs(child.props.ref, ref),\n          css: mergeCSS(child.props.css, css),\n        }\n\n        const clonedChild = cloneElement(child, props)\n\n        return <Fragment key={key}>{clonedChild}</Fragment>\n      })\n\n      return clonedChildren\n    }, [children, startIndex, vertical, horizontal])\n\n    useEffect(() => {\n      if (!fit) return\n\n      let negativeLeft = direction.endsWith(\"-start\")\n      let negativeTop = direction.startsWith(\"start\")\n      let width = 0\n      let height = 0\n\n      if (reverse) {\n        negativeLeft = !negativeLeft\n        negativeTop = !negativeTop\n      }\n\n      for (const ref of refMap.current.values()) {\n        if (!ref.current) continue\n\n        let { offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth } =\n          ref.current\n\n        if (!offsetParent && process.env.NODE_ENV !== \"test\") continue\n\n        if (negativeLeft) {\n          const offsetParentWidth =\n            (offsetParent as HTMLDivElement | null)?.offsetWidth ?? 0\n\n          offsetLeft = offsetParentWidth - offsetLeft - offsetWidth\n        }\n\n        if (negativeTop) {\n          const offsetParentHeight =\n            (offsetParent as HTMLDivElement | null)?.offsetHeight ?? 0\n\n          offsetTop = offsetParentHeight - offsetTop - offsetHeight\n        }\n\n        offsetWidth += offsetLeft\n        offsetHeight += offsetTop\n\n        if (offsetWidth > width) width = offsetWidth\n        if (offsetHeight > height) height = offsetHeight\n      }\n\n      setRect({ height, width })\n    }, [cloneChildren, direction, reverse, fit])\n\n    return (\n      <styled.div\n        css={css}\n        minHeight={fit ? `${rect.height}px` : undefined}\n        minWidth={fit ? `${rect.width}px` : undefined}\n        {...rest}\n      >\n        {cloneChildren}\n      </styled.div>\n    )\n  },\n)(undefined, (props) => {\n  const css = useInjectVarsIntoCss(props.css, { gap: \"space\" })\n  const rest = useInjectVarsIntoProps(props, { gap: \"space\" })\n\n  return { ...rest, css }\n})\n"],"mappings":"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"}
+{"version":3,"file":"z-stack.js","names":[],"sources":["../../../../src/components/stack/z-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type {\n  CSSObject,\n  Direction,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { ZStackStyle } from \"./z-stack.style\"\nimport {\n  cloneElement,\n  createRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport {\n  createComponent,\n  mergeCSS,\n  styled,\n  useInjectVarsIntoCss,\n  useInjectVarsIntoProps,\n} from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { zStackStyle } from \"./z-stack.style\"\n\nexport interface ZStackProps\n  extends Omit<HTMLStyledProps, \"direction\">, ThemeProps<ZStackStyle> {\n  /**\n   * Stack in the specified direction.\n   *\n   * @default 'end'\n   */\n  direction?: Direction\n  /**\n   * If `true`, calculate the `width` and `height` of the element and assign container.\n   *\n   * @default true\n   */\n  fit?: boolean\n  /**\n   * If `true`, reverse direction.\n   *\n   * @default false\n   */\n  reverse?: boolean\n  /**\n   * If set the stack will start from the given index.\n   *\n   * @default 0\n   */\n  startIndex?: number\n}\n\nconst {\n  PropsContext: ZStackPropsContext,\n  usePropsContext: useZStackPropsContext,\n  withContext,\n} = createComponent<ZStackProps, ZStackStyle>(\"stack--depth\", zStackStyle)\n\nexport { useZStackPropsContext, ZStackPropsContext }\n\n/**\n * `ZStack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const ZStack = withContext<\"div\", ZStackProps>(\n  ({\n    css,\n    children,\n    direction = \"end\",\n    fit = true,\n    reverse = false,\n    startIndex = 0,\n    ...rest\n  }) => {\n    if (direction === \"start-center\") direction = \"start\"\n    if (direction === \"end-center\") direction = \"end\"\n\n    const refMap = useRef<Map<number, RefObject<HTMLDivElement | null>>>(\n      new Map(),\n    )\n    const [rect, setRect] = useState<{ height: number; width: number }>({\n      height: 0,\n      width: 0,\n    })\n\n    const vertical = useCallback(\n      (space: string) => {\n        if (direction.startsWith(\"start\")) {\n          return { [!reverse ? \"bottom\" : \"top\"]: space }\n        } else if (direction.startsWith(\"end\")) {\n          return { [!reverse ? \"top\" : \"bottom\"]: space }\n        } else {\n          return { [!reverse ? \"top\" : \"bottom\"]: 0 }\n        }\n      },\n      [direction, reverse],\n    )\n\n    const horizontal = useCallback(\n      (space: string) => {\n        if (direction.endsWith(\"-start\")) {\n          return { [!reverse ? \"right\" : \"left\"]: space }\n        } else if (direction.endsWith(\"-end\")) {\n          return { [!reverse ? \"left\" : \"right\"]: space }\n        } else {\n          return { [!reverse ? \"left\" : \"right\"]: 0 }\n        }\n      },\n      [direction, reverse],\n    )\n\n    const cloneChildren = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      const clonedChildren = validChildren.map((child, index) => {\n        const ref = createRef<HTMLDivElement>()\n\n        refMap.current.set(index, ref)\n\n        const key = child.key ?? index\n\n        const zIndex = startIndex + index\n        const space = `calc({space} * ${index})`\n\n        const css: CSSObject = {\n          position: \"absolute\",\n          zIndex,\n          ...vertical(space),\n          ...horizontal(space),\n        }\n\n        const props = {\n          ...child.props,\n          ref: mergeRefs(child.props.ref, ref),\n          css: mergeCSS(child.props.css, css),\n        }\n\n        const clonedChild = cloneElement(child, props)\n\n        return <Fragment key={key}>{clonedChild}</Fragment>\n      })\n\n      return clonedChildren\n    }, [children, startIndex, vertical, horizontal])\n\n    useEffect(() => {\n      if (!fit) return\n\n      let negativeLeft = direction.endsWith(\"-start\")\n      let negativeTop = direction.startsWith(\"start\")\n      let width = 0\n      let height = 0\n\n      if (reverse) {\n        negativeLeft = !negativeLeft\n        negativeTop = !negativeTop\n      }\n\n      for (const ref of refMap.current.values()) {\n        if (!ref.current) continue\n\n        let { offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth } =\n          ref.current\n\n        if (!offsetParent && process.env.NODE_ENV !== \"test\") continue\n\n        if (negativeLeft) {\n          const offsetParentWidth =\n            (offsetParent as HTMLDivElement | null)?.offsetWidth ?? 0\n\n          offsetLeft = offsetParentWidth - offsetLeft - offsetWidth\n        }\n\n        if (negativeTop) {\n          const offsetParentHeight =\n            (offsetParent as HTMLDivElement | null)?.offsetHeight ?? 0\n\n          offsetTop = offsetParentHeight - offsetTop - offsetHeight\n        }\n\n        offsetWidth += offsetLeft\n        offsetHeight += offsetTop\n\n        if (offsetWidth > width) width = offsetWidth\n        if (offsetHeight > height) height = offsetHeight\n      }\n\n      setRect({ height, width })\n    }, [cloneChildren, direction, reverse, fit])\n\n    return (\n      <styled.div\n        css={css}\n        minHeight={fit ? `${rect.height}px` : undefined}\n        minWidth={fit ? `${rect.width}px` : undefined}\n        {...rest}\n      >\n        {cloneChildren}\n      </styled.div>\n    )\n  },\n)(undefined, (props) => {\n  const css = useInjectVarsIntoCss(props.css, { gap: \"space\" })\n  const rest = useInjectVarsIntoProps(props, { gap: \"space\" })\n\n  return { ...rest, css }\n})\n"],"mappings":"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"}

package/dist/esm/components/stack/z-stack.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"z-stack.style.js","names":[],"sources":["../../../../src/components/stack/z-stack.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const zStackStyle = defineComponentStyle({\n  base: {\n    gap: \"lg\",\n    overflow: \"hidden\",\n    position: \"relative\",\n  },\n})\n\nexport type ZStackStyle = typeof zStackStyle\n"],"mappings":";;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,KAAK;CACL,UAAU;CACV,UAAU;CACX,EACF,CAAC"}
+{"version":3,"file":"z-stack.style.js","names":[],"sources":["../../../../src/components/stack/z-stack.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const zStackStyle = defineComponentStyle({\n  base: {\n    gap: \"lg\",\n    overflow: \"hidden\",\n    position: \"relative\",\n  },\n})\n\nexport type ZStackStyle = typeof zStackStyle\n"],"mappings":";;AAEA,MAAa,cAAc,qBAAqB,EAC9C,MAAM;CACJ,KAAK;CACL,UAAU;CACV,UAAU;AACZ,EACF,CAAC"}

package/dist/esm/components/stat/stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.js","names":[],"sources":["../../../../src/components/stat/stat.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatStyle } from \"./stat.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { useSplitChildren } from \"../../utils\"\nimport { TriangleIcon } from \"../icon\"\nimport { statStyle } from \"./stat.style\"\n\nexport interface StatRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<StatStyle> {\n  /**\n   * If `true`, container will center its children regardless of their width.\n   *\n   * @default false\n   */\n  centerContent?: boolean\n  /**\n   * The stat helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * The stat icon to use.\n   */\n  icon?: StatIconProps[\"type\"]\n  /**\n   * The stat label to use.\n   */\n  label?: ReactNode\n  /**\n   * The stat value to use.\n   */\n  value?: ReactNode\n  /**\n   * Props for stat helper message component.\n   */\n  helperMessageProps?: StatHelperMessageProps\n  /**\n   * Props for stat icon component.\n   */\n  iconProps?: Omit<StatIconProps, \"type\">\n  /**\n   * Props for stat label component.\n   */\n  labelProps?: StatLabelProps\n  /**\n   * Props for stat value component.\n   */\n  valueProps?: StatValueProps\n}\n\nconst {\n  PropsContext: StatPropsContext,\n  usePropsContext: useStatPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StatRootProps, StatStyle>(\"stat\", statStyle)\n\nexport { StatPropsContext, useStatPropsContext }\n\n/**\n * `Stat` is used to show numbers and data in a box.\n *\n * @see https://yamada-ui.com/docs/components/stat\n */\nexport const StatRoot = withProvider<\"dl\", StatRootProps>(\n  ({\n    children,\n    helperMessage,\n    icon,\n    label,\n    value,\n    helperMessageProps,\n    iconProps,\n    labelProps,\n    valueProps,\n    ...rest\n  }) => {\n    const [\n      omittedChildren,\n      customStatLabel,\n      customStatValue,\n      customStatHelperMessage,\n    ] = useSplitChildren(children, StatLabel, StatValue, StatHelperMessage)\n\n    return (\n      <styled.dl {...rest}>\n        {customStatLabel ?? <StatLabel {...labelProps}>{label}</StatLabel>}\n        {customStatValue ?? <StatValue {...valueProps}>{value}</StatValue>}\n        {customStatHelperMessage ?? (\n          <StatHelperMessage {...helperMessageProps}>\n            {icon ? <StatIcon type={icon} {...iconProps} /> : null}\n            {helperMessage}\n          </StatHelperMessage>\n        )}\n        {omittedChildren}\n      </styled.dl>\n    )\n  },\n  \"root\",\n)()\n\nexport interface StatIconProps extends HTMLStyledProps<\"svg\"> {\n  /**\n   * The type of the icon.\n   *\n   * @default 'increase'\n   */\n  type?: \"decrease\" | \"increase\"\n}\n\nexport const StatIcon = withContext<\"svg\", StatIconProps>(\n  ({ type = \"increase\", ...rest }) => {\n    const { t } = useI18n(\"stat\")\n\n    return (\n      <TriangleIcon\n        aria-label={type === \"increase\" ? t(\"Increased by\") : t(\"Decreased by\")}\n        data-type={type}\n        {...rest}\n      />\n    )\n  },\n  \"icon\",\n)()\n\nexport interface StatLabelProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const StatLabel = withContext<\"dt\", StatLabelProps>(\"dt\", \"label\")()\n\nexport interface StatValueProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatValue = withContext<\"dd\", StatValueProps>(\"dd\", \"value\")()\n\nexport interface StatUnitProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StatUnit = withContext<\"span\", StatUnitProps>(\"span\", \"unit\")()\n\nexport interface StatHelperMessageProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatHelperMessage = withContext<\"dd\", StatHelperMessageProps>(\n  \"dd\",\n  \"helperMessage\",\n)()\n"],"mappings":";;;;;;;;;AAqDA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBAA8C,QAAQ,UAAU;;;;;;AASpE,MAAa,WAAW,cACrB,EACC,UACA,eACA,MACA,OACA,OACA,oBACA,WACA,YACA,YACA,GAAG,WACC;CACJ,MAAM,CACJ,iBACA,iBACA,iBACA,2BACE,iBAAiB,UAAU,WAAW,WAAW,kBAAkB;CAEvE,OACE,qBAAC,OAAO,IAAR;EAAW,GAAI;YAAf;GACG,mBAAmB,oBAAC,WAAD;IAAW,GAAI;cAAa;IAAkB,CAAA;GACjE,mBAAmB,oBAAC,WAAD;IAAW,GAAI;cAAa;IAAkB,CAAA;GACjE,2BACC,qBAAC,mBAAD;IAAmB,GAAI;cAAvB,CACG,OAAO,oBAAC,UAAD;KAAU,MAAM;KAAM,GAAI;KAAa,CAAA,GAAG,MACjD,cACiB;;GAErB;GACS;;GAGhB,OACD,EAAE;AAWH,MAAa,WAAW,aACrB,EAAE,OAAO,YAAY,GAAG,WAAW;CAClC,MAAM,EAAE,MAAM,QAAQ,OAAO;CAE7B,OACE,oBAAC,cAAD;EACE,cAAY,SAAS,aAAa,EAAE,eAAe,GAAG,EAAE,eAAe;EACvE,aAAW;EACX,GAAI;EACJ,CAAA;GAGN,OACD,EAAE;AAIH,MAAa,YAAY,YAAkC,MAAM,QAAQ,EAAE;AAI3E,MAAa,YAAY,YAAkC,MAAM,QAAQ,EAAE;AAI3E,MAAa,WAAW,YAAmC,QAAQ,OAAO,EAAE;AAI5E,MAAa,oBAAoB,YAC/B,MACA,gBACD,EAAE"}
+{"version":3,"file":"stat.js","names":[],"sources":["../../../../src/components/stat/stat.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatStyle } from \"./stat.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { useSplitChildren } from \"../../utils\"\nimport { TriangleIcon } from \"../icon\"\nimport { statStyle } from \"./stat.style\"\n\nexport interface StatRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<StatStyle> {\n  /**\n   * If `true`, container will center its children regardless of their width.\n   *\n   * @default false\n   */\n  centerContent?: boolean\n  /**\n   * The stat helper message to use.\n   */\n  helperMessage?: ReactNode\n  /**\n   * The stat icon to use.\n   */\n  icon?: StatIconProps[\"type\"]\n  /**\n   * The stat label to use.\n   */\n  label?: ReactNode\n  /**\n   * The stat value to use.\n   */\n  value?: ReactNode\n  /**\n   * Props for stat helper message component.\n   */\n  helperMessageProps?: StatHelperMessageProps\n  /**\n   * Props for stat icon component.\n   */\n  iconProps?: Omit<StatIconProps, \"type\">\n  /**\n   * Props for stat label component.\n   */\n  labelProps?: StatLabelProps\n  /**\n   * Props for stat value component.\n   */\n  valueProps?: StatValueProps\n}\n\nconst {\n  PropsContext: StatPropsContext,\n  usePropsContext: useStatPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StatRootProps, StatStyle>(\"stat\", statStyle)\n\nexport { StatPropsContext, useStatPropsContext }\n\n/**\n * `Stat` is used to show numbers and data in a box.\n *\n * @see https://yamada-ui.com/docs/components/stat\n */\nexport const StatRoot = withProvider<\"dl\", StatRootProps>(\n  ({\n    children,\n    helperMessage,\n    icon,\n    label,\n    value,\n    helperMessageProps,\n    iconProps,\n    labelProps,\n    valueProps,\n    ...rest\n  }) => {\n    const [\n      omittedChildren,\n      customStatLabel,\n      customStatValue,\n      customStatHelperMessage,\n    ] = useSplitChildren(children, StatLabel, StatValue, StatHelperMessage)\n\n    return (\n      <styled.dl {...rest}>\n        {customStatLabel ?? <StatLabel {...labelProps}>{label}</StatLabel>}\n        {customStatValue ?? <StatValue {...valueProps}>{value}</StatValue>}\n        {customStatHelperMessage ?? (\n          <StatHelperMessage {...helperMessageProps}>\n            {icon ? <StatIcon type={icon} {...iconProps} /> : null}\n            {helperMessage}\n          </StatHelperMessage>\n        )}\n        {omittedChildren}\n      </styled.dl>\n    )\n  },\n  \"root\",\n)()\n\nexport interface StatIconProps extends HTMLStyledProps<\"svg\"> {\n  /**\n   * The type of the icon.\n   *\n   * @default 'increase'\n   */\n  type?: \"decrease\" | \"increase\"\n}\n\nexport const StatIcon = withContext<\"svg\", StatIconProps>(\n  ({ type = \"increase\", ...rest }) => {\n    const { t } = useI18n(\"stat\")\n\n    return (\n      <TriangleIcon\n        aria-label={type === \"increase\" ? t(\"Increased by\") : t(\"Decreased by\")}\n        data-type={type}\n        {...rest}\n      />\n    )\n  },\n  \"icon\",\n)()\n\nexport interface StatLabelProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const StatLabel = withContext<\"dt\", StatLabelProps>(\"dt\", \"label\")()\n\nexport interface StatValueProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatValue = withContext<\"dd\", StatValueProps>(\"dd\", \"value\")()\n\nexport interface StatUnitProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StatUnit = withContext<\"span\", StatUnitProps>(\"span\", \"unit\")()\n\nexport interface StatHelperMessageProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatHelperMessage = withContext<\"dd\", StatHelperMessageProps>(\n  \"dd\",\n  \"helperMessage\",\n)()\n"],"mappings":";;;;;;;;;AAqDA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBAA8C,QAAQ,SAAS;;;;;;AASnE,MAAa,WAAW,cACrB,EACC,UACA,eACA,MACA,OACA,OACA,oBACA,WACA,YACA,YACA,GAAG,WACC;CACJ,MAAM,CACJ,iBACA,iBACA,iBACA,2BACE,iBAAiB,UAAU,WAAW,WAAW,iBAAiB;CAEtE,OACE,qBAAC,OAAO,IAAR;EAAW,GAAI;YAAf;GACG,mBAAmB,oBAAC,WAAD;IAAW,GAAI;cAAa;GAAiB,CAAA;GAChE,mBAAmB,oBAAC,WAAD;IAAW,GAAI;cAAa;GAAiB,CAAA;GAChE,2BACC,qBAAC,mBAAD;IAAmB,GAAI;cAAvB,CACG,OAAO,oBAAC,UAAD;KAAU,MAAM;KAAM,GAAI;IAAY,CAAA,IAAI,MACjD,aACgB;;GAEpB;EACQ;;AAEf,GACA,MACF,EAAE;AAWF,MAAa,WAAW,aACrB,EAAE,OAAO,YAAY,GAAG,WAAW;CAClC,MAAM,EAAE,MAAM,QAAQ,MAAM;CAE5B,OACE,oBAAC,cAAD;EACE,cAAY,SAAS,aAAa,EAAE,cAAc,IAAI,EAAE,cAAc;EACtE,aAAW;EACX,GAAI;CACL,CAAA;AAEL,GACA,MACF,EAAE;AAIF,MAAa,YAAY,YAAkC,MAAM,OAAO,EAAE;AAI1E,MAAa,YAAY,YAAkC,MAAM,OAAO,EAAE;AAI1E,MAAa,WAAW,YAAmC,QAAQ,MAAM,EAAE;AAI3E,MAAa,oBAAoB,YAC/B,MACA,eACF,EAAE"}

package/dist/esm/components/stat/stat.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.style.js","names":[],"sources":["../../../../src/components/stat/stat.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const statStyle = defineComponentSlotStyle({\n  base: {\n    helperMessage: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n    },\n    icon: {\n      \"&[data-type='decrease']\": {\n        color: \"fg.error\",\n        fill: \"fg.error\",\n        transform: \"rotate(180deg)\",\n      },\n      \"&[data-type='increase']\": {\n        color: \"fg.success\",\n        fill: \"fg.success\",\n      },\n      fontSize: \"1em\",\n      me: \"1\",\n      verticalAlign: \"middle\",\n    },\n    label: {\n      color: \"fg.muted\",\n      fontWeight: \"medium\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    unit: {\n      color: \"fg.muted\",\n      fontWeight: \"initial\",\n      letterSpacing: \"initial\",\n    },\n    value: {\n      alignItems: \"baseline\",\n      color: \"colorScheme.solid\",\n      display: \"inline-flex\",\n      fontFeatureSettings: '\"pnum\"',\n      fontVariantNumeric: \"proportional-nums\",\n      fontWeight: \"semibold\",\n      letterSpacing: \"tight\",\n      lineHeight: \"1\",\n      verticalAlign: \"baseline\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, container will center its children regardless of their width.\n     *\n     * @default false\n     */\n    centerContent: {\n      false: {\n        root: {\n          alignItems: \"flex-start\",\n        },\n      },\n      true: {\n        root: {\n          alignItems: \"center\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      helperMessage: {\n        fontSize: \"xs\",\n      },\n      label: {\n        fontSize: \"sm\",\n      },\n      root: {\n        gap: \"1\",\n      },\n      unit: {\n        fontSize: \"sm\",\n      },\n      value: {\n        fontSize: \"3xl\",\n        gap: \"1\",\n      },\n    },\n    sm: {\n      helperMessage: {\n        fontSize: \"xs\",\n      },\n      label: {\n        fontSize: \"sm\",\n      },\n      root: {\n        gap: \"1\",\n      },\n      unit: {\n        fontSize: \"sm\",\n      },\n      value: {\n        fontSize: \"4xl\",\n        gap: \"1\",\n      },\n    },\n    md: {\n      helperMessage: {\n        fontSize: \"sm\",\n      },\n      label: {\n        fontSize: \"md\",\n      },\n      root: {\n        gap: \"2\",\n      },\n      unit: {\n        fontSize: \"md\",\n      },\n      value: {\n        fontSize: \"5xl\",\n        gap: \"1.5\",\n      },\n    },\n    lg: {\n      helperMessage: {\n        fontSize: \"sm\",\n      },\n      label: {\n        fontSize: \"md\",\n      },\n      root: {\n        gap: \"2\",\n      },\n      unit: {\n        fontSize: \"md\",\n      },\n      value: {\n        fontSize: \"6xl\",\n        gap: \"2\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type StatStyle = typeof statStyle\n"],"mappings":";;AAEA,MAAa,YAAY,yBAAyB;CAChD,MAAM;EACJ,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;GACV;EACD,MAAM;GACJ,2BAA2B;IACzB,OAAO;IACP,MAAM;IACN,WAAW;IACZ;GACD,2BAA2B;IACzB,OAAO;IACP,MAAM;IACP;GACD,UAAU;GACV,IAAI;GACJ,eAAe;GAChB;EACD,OAAO;GACL,OAAO;GACP,YAAY;GACb;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GAChB;EACD,MAAM;GACJ,OAAO;GACP,YAAY;GACZ,eAAe;GAChB;EACD,OAAO;GACL,YAAY;GACZ,OAAO;GACP,SAAS;GACT,qBAAqB;GACrB,oBAAoB;GACpB,YAAY;GACZ,eAAe;GACf,YAAY;GACZ,eAAe;GAChB;EACF;CAED,OAAO;;;;;;AAML,eAAe;EACb,OAAO,EACL,MAAM,EACJ,YAAY,cACb,EACF;EACD,MAAM,EACJ,MAAM,EACJ,YAAY,UACb,EACF;EACF,EACF;CAED,OAAO;EACL,IAAI;GACF,eAAe,EACb,UAAU,MACX;GACD,OAAO,EACL,UAAU,MACX;GACD,MAAM,EACJ,KAAK,KACN;GACD,MAAM,EACJ,UAAU,MACX;GACD,OAAO;IACL,UAAU;IACV,KAAK;IACN;GACF;EACD,IAAI;GACF,eAAe,EACb,UAAU,MACX;GACD,OAAO,EACL,UAAU,MACX;GACD,MAAM,EACJ,KAAK,KACN;GACD,MAAM,EACJ,UAAU,MACX;GACD,OAAO;IACL,UAAU;IACV,KAAK;IACN;GACF;EACD,IAAI;GACF,eAAe,EACb,UAAU,MACX;GACD,OAAO,EACL,UAAU,MACX;GACD,MAAM,EACJ,KAAK,KACN;GACD,MAAM,EACJ,UAAU,MACX;GACD,OAAO;IACL,UAAU;IACV,KAAK;IACN;GACF;EACD,IAAI;GACF,eAAe,EACb,UAAU,MACX;GACD,OAAO,EACL,UAAU,MACX;GACD,MAAM,EACJ,KAAK,KACN;GACD,MAAM,EACJ,UAAU,MACX;GACD,OAAO;IACL,UAAU;IACV,KAAK;IACN;GACF;EACF;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}
+{"version":3,"file":"stat.style.js","names":[],"sources":["../../../../src/components/stat/stat.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const statStyle = defineComponentSlotStyle({\n  base: {\n    helperMessage: {\n      alignItems: \"center\",\n      color: \"fg.muted\",\n      display: \"inline-flex\",\n    },\n    icon: {\n      \"&[data-type='decrease']\": {\n        color: \"fg.error\",\n        fill: \"fg.error\",\n        transform: \"rotate(180deg)\",\n      },\n      \"&[data-type='increase']\": {\n        color: \"fg.success\",\n        fill: \"fg.success\",\n      },\n      fontSize: \"1em\",\n      me: \"1\",\n      verticalAlign: \"middle\",\n    },\n    label: {\n      color: \"fg.muted\",\n      fontWeight: \"medium\",\n    },\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    unit: {\n      color: \"fg.muted\",\n      fontWeight: \"initial\",\n      letterSpacing: \"initial\",\n    },\n    value: {\n      alignItems: \"baseline\",\n      color: \"colorScheme.solid\",\n      display: \"inline-flex\",\n      fontFeatureSettings: '\"pnum\"',\n      fontVariantNumeric: \"proportional-nums\",\n      fontWeight: \"semibold\",\n      letterSpacing: \"tight\",\n      lineHeight: \"1\",\n      verticalAlign: \"baseline\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, container will center its children regardless of their width.\n     *\n     * @default false\n     */\n    centerContent: {\n      false: {\n        root: {\n          alignItems: \"flex-start\",\n        },\n      },\n      true: {\n        root: {\n          alignItems: \"center\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      helperMessage: {\n        fontSize: \"xs\",\n      },\n      label: {\n        fontSize: \"sm\",\n      },\n      root: {\n        gap: \"1\",\n      },\n      unit: {\n        fontSize: \"sm\",\n      },\n      value: {\n        fontSize: \"3xl\",\n        gap: \"1\",\n      },\n    },\n    sm: {\n      helperMessage: {\n        fontSize: \"xs\",\n      },\n      label: {\n        fontSize: \"sm\",\n      },\n      root: {\n        gap: \"1\",\n      },\n      unit: {\n        fontSize: \"sm\",\n      },\n      value: {\n        fontSize: \"4xl\",\n        gap: \"1\",\n      },\n    },\n    md: {\n      helperMessage: {\n        fontSize: \"sm\",\n      },\n      label: {\n        fontSize: \"md\",\n      },\n      root: {\n        gap: \"2\",\n      },\n      unit: {\n        fontSize: \"md\",\n      },\n      value: {\n        fontSize: \"5xl\",\n        gap: \"1.5\",\n      },\n    },\n    lg: {\n      helperMessage: {\n        fontSize: \"sm\",\n      },\n      label: {\n        fontSize: \"md\",\n      },\n      root: {\n        gap: \"2\",\n      },\n      unit: {\n        fontSize: \"md\",\n      },\n      value: {\n        fontSize: \"6xl\",\n        gap: \"2\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type StatStyle = typeof statStyle\n"],"mappings":";;AAEA,MAAa,YAAY,yBAAyB;CAChD,MAAM;EACJ,eAAe;GACb,YAAY;GACZ,OAAO;GACP,SAAS;EACX;EACA,MAAM;GACJ,2BAA2B;IACzB,OAAO;IACP,MAAM;IACN,WAAW;GACb;GACA,2BAA2B;IACzB,OAAO;IACP,MAAM;GACR;GACA,UAAU;GACV,IAAI;GACJ,eAAe;EACjB;EACA,OAAO;GACL,OAAO;GACP,YAAY;EACd;EACA,MAAM;GACJ,SAAS;GACT,eAAe;EACjB;EACA,MAAM;GACJ,OAAO;GACP,YAAY;GACZ,eAAe;EACjB;EACA,OAAO;GACL,YAAY;GACZ,OAAO;GACP,SAAS;GACT,qBAAqB;GACrB,oBAAoB;GACpB,YAAY;GACZ,eAAe;GACf,YAAY;GACZ,eAAe;EACjB;CACF;CAEA,OAAO;;;;;;AAML,eAAe;EACb,OAAO,EACL,MAAM,EACJ,YAAY,aACd,EACF;EACA,MAAM,EACJ,MAAM,EACJ,YAAY,SACd,EACF;CACF,EACF;CAEA,OAAO;EACL,IAAI;GACF,eAAe,EACb,UAAU,KACZ;GACA,OAAO,EACL,UAAU,KACZ;GACA,MAAM,EACJ,KAAK,IACP;GACA,MAAM,EACJ,UAAU,KACZ;GACA,OAAO;IACL,UAAU;IACV,KAAK;GACP;EACF;EACA,IAAI;GACF,eAAe,EACb,UAAU,KACZ;GACA,OAAO,EACL,UAAU,KACZ;GACA,MAAM,EACJ,KAAK,IACP;GACA,MAAM,EACJ,UAAU,KACZ;GACA,OAAO;IACL,UAAU;IACV,KAAK;GACP;EACF;EACA,IAAI;GACF,eAAe,EACb,UAAU,KACZ;GACA,OAAO,EACL,UAAU,KACZ;GACA,MAAM,EACJ,KAAK,IACP;GACA,MAAM,EACJ,UAAU,KACZ;GACA,OAAO;IACL,UAAU;IACV,KAAK;GACP;EACF;EACA,IAAI;GACF,eAAe,EACb,UAAU,KACZ;GACA,OAAO,EACL,UAAU,KACZ;GACA,MAAM,EACJ,KAAK,IACP;GACA,MAAM,EACJ,UAAU,KACZ;GACA,OAAO;IACL,UAAU;IACV,KAAK;GACP;EACF;CACF;CAEA,cAAc,EACZ,MAAM,KACR;AACF,CAAC"}

package/dist/esm/components/status/status.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.js","names":[],"sources":["../../../../src/components/status/status.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatusStyle } from \"./status.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { statusStyle } from \"./status.style\"\n\nexport type StatusScheme = \"error\" | \"info\" | \"success\" | \"warning\"\n\nexport interface StatusProps extends HTMLStyledProps, ThemeProps<StatusStyle> {\n  /**\n   * The type of the status\n   *\n   * @default 'info'\n   * */\n  value?: StatusScheme\n  /**\n   * The props for the status indicator component\n   */\n  indicatorProps?: HTMLStyledProps\n  /**\n   * The props for the status label component\n   */\n  labelProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: StatusPropsContext,\n  usePropsContext: useStatusPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StatusProps, StatusStyle>(\"status\", statusStyle)\n\nexport { StatusPropsContext, useStatusPropsContext }\n\n/**\n * `Status` is component that indicate the status of a process or state.\n *\n * @see https://yamada-ui.com/docs/components/status\n */\nexport const Status = withProvider<\"div\", StatusProps>(\n  ({ children, indicatorProps, labelProps, ...rest }) => {\n    return (\n      <styled.div {...rest}>\n        <StatusIndicator {...indicatorProps} />\n\n        <StatusLabel {...labelProps}>{children}</StatusLabel>\n      </styled.div>\n    )\n  },\n  \"root\",\n)(undefined, ({ colorScheme, value = \"info\", ...rest }) => ({\n  colorScheme: colorScheme ?? value,\n  ...rest,\n}))\n\ninterface StatusIndicatorProps extends HTMLStyledProps {}\n\nconst StatusIndicator = withContext<\"div\", StatusIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n\ninterface StatusLabelProps extends HTMLStyledProps<\"p\"> {}\n\nconst StatusLabel = withContext<\"p\", StatusLabelProps>(\"p\", \"label\")()\n"],"mappings":";;;;;;AA0BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,YAAY;;;;;;AASxE,MAAa,SAAS,cACnB,EAAE,UAAU,gBAAgB,YAAY,GAAG,WAAW;CACrD,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB,CACE,oBAAC,iBAAD,EAAiB,GAAI,gBAAkB,CAAA,EAEvC,oBAAC,aAAD;GAAa,GAAI;GAAa;GAAuB,CAAA,CAC1C;;GAGjB,OACD,CAAC,KAAA,IAAY,EAAE,aAAa,QAAQ,QAAQ,GAAG,YAAY;CAC1D,aAAa,eAAe;CAC5B,GAAG;CACJ,EAAE;AAIH,MAAM,kBAAkB,YACtB,OACA,YACD,EAAE;AAIH,MAAM,cAAc,YAAmC,KAAK,QAAQ,EAAE"}
+{"version":3,"file":"status.js","names":[],"sources":["../../../../src/components/status/status.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatusStyle } from \"./status.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { statusStyle } from \"./status.style\"\n\nexport type StatusScheme = \"error\" | \"info\" | \"success\" | \"warning\"\n\nexport interface StatusProps extends HTMLStyledProps, ThemeProps<StatusStyle> {\n  /**\n   * The type of the status\n   *\n   * @default 'info'\n   * */\n  value?: StatusScheme\n  /**\n   * The props for the status indicator component\n   */\n  indicatorProps?: HTMLStyledProps\n  /**\n   * The props for the status label component\n   */\n  labelProps?: HTMLStyledProps\n}\n\nconst {\n  PropsContext: StatusPropsContext,\n  usePropsContext: useStatusPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StatusProps, StatusStyle>(\"status\", statusStyle)\n\nexport { StatusPropsContext, useStatusPropsContext }\n\n/**\n * `Status` is component that indicate the status of a process or state.\n *\n * @see https://yamada-ui.com/docs/components/status\n */\nexport const Status = withProvider<\"div\", StatusProps>(\n  ({ children, indicatorProps, labelProps, ...rest }) => {\n    return (\n      <styled.div {...rest}>\n        <StatusIndicator {...indicatorProps} />\n\n        <StatusLabel {...labelProps}>{children}</StatusLabel>\n      </styled.div>\n    )\n  },\n  \"root\",\n)(undefined, ({ colorScheme, value = \"info\", ...rest }) => ({\n  colorScheme: colorScheme ?? value,\n  ...rest,\n}))\n\ninterface StatusIndicatorProps extends HTMLStyledProps {}\n\nconst StatusIndicator = withContext<\"div\", StatusIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n\ninterface StatusLabelProps extends HTMLStyledProps<\"p\"> {}\n\nconst StatusLabel = withContext<\"p\", StatusLabelProps>(\"p\", \"label\")()\n"],"mappings":";;;;;;AA0BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,WAAW;;;;;;AASvE,MAAa,SAAS,cACnB,EAAE,UAAU,gBAAgB,YAAY,GAAG,WAAW;CACrD,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB,CACE,oBAAC,iBAAD,EAAiB,GAAI,eAAiB,CAAA,GAEtC,oBAAC,aAAD;GAAa,GAAI;GAAa;EAAsB,CAAA,CAC1C;;AAEhB,GACA,MACF,EAAE,KAAA,IAAY,EAAE,aAAa,QAAQ,QAAQ,GAAG,YAAY;CAC1D,aAAa,eAAe;CAC5B,GAAG;AACL,EAAE;AAIF,MAAM,kBAAkB,YACtB,OACA,WACF,EAAE;AAIF,MAAM,cAAc,YAAmC,KAAK,OAAO,EAAE"}

package/dist/esm/components/status/status.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.style.js","names":[],"sources":["../../../../src/components/status/status.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const statusStyle = defineComponentSlotStyle({\n  base: {\n    indicator: {\n      bg: \"colorScheme.solid\",\n      flexShrink: 0,\n      forcedColorAdjust: \"none\",\n      rounded: \"full\",\n    },\n    label: {},\n    root: {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      gap: \"sm\",\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: { boxSize: \"2\" },\n      label: { fontSize: \"sm\" },\n    },\n    md: {\n      indicator: { boxSize: \"2.5\" },\n      label: { fontSize: \"md\" },\n    },\n    lg: {\n      indicator: { boxSize: \"3\" },\n      label: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type StatusStyle = typeof statusStyle\n"],"mappings":";;AAEA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,WAAW;GACT,IAAI;GACJ,YAAY;GACZ,mBAAmB;GACnB,SAAS;GACV;EACD,OAAO,EAAE;EACT,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;GACN;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,SAAS,KAAK;GAC3B,OAAO,EAAE,UAAU,MAAM;GAC1B;EACD,IAAI;GACF,WAAW,EAAE,SAAS,OAAO;GAC7B,OAAO,EAAE,UAAU,MAAM;GAC1B;EACD,IAAI;GACF,WAAW,EAAE,SAAS,KAAK;GAC3B,OAAO,EAAE,UAAU,MAAM;GAC1B;EACF;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}
+{"version":3,"file":"status.style.js","names":[],"sources":["../../../../src/components/status/status.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const statusStyle = defineComponentSlotStyle({\n  base: {\n    indicator: {\n      bg: \"colorScheme.solid\",\n      flexShrink: 0,\n      forcedColorAdjust: \"none\",\n      rounded: \"full\",\n    },\n    label: {},\n    root: {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      gap: \"sm\",\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: { boxSize: \"2\" },\n      label: { fontSize: \"sm\" },\n    },\n    md: {\n      indicator: { boxSize: \"2.5\" },\n      label: { fontSize: \"md\" },\n    },\n    lg: {\n      indicator: { boxSize: \"3\" },\n      label: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type StatusStyle = typeof statusStyle\n"],"mappings":";;AAEA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,WAAW;GACT,IAAI;GACJ,YAAY;GACZ,mBAAmB;GACnB,SAAS;EACX;EACA,OAAO,CAAC;EACR,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;EACP;CACF;CAEA,OAAO;EACL,IAAI;GACF,WAAW,EAAE,SAAS,IAAI;GAC1B,OAAO,EAAE,UAAU,KAAK;EAC1B;EACA,IAAI;GACF,WAAW,EAAE,SAAS,MAAM;GAC5B,OAAO,EAAE,UAAU,KAAK;EAC1B;EACA,IAAI;GACF,WAAW,EAAE,SAAS,IAAI;GAC1B,OAAO,EAAE,UAAU,KAAK;EAC1B;CACF;CAEA,cAAc,EACZ,MAAM,KACR;AACF,CAAC"}

package/dist/esm/components/steps/steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.js","names":[],"sources":["../../../../src/components/steps/steps.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { StepsStyle } from \"./steps.style\"\nimport type { UseStepsItemProps, UseStepsProps } from \"./use-steps\"\nimport { Children, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport {\n  isNull,\n  isUndefined,\n  useFindChild,\n  useValidChildren,\n} from \"../../utils\"\nimport { CheckIcon } from \"../icon\"\nimport { stepsStyle } from \"./steps.style\"\nimport {\n  StepsContext,\n  StepsDescendantsContext,\n  StepsItemContext,\n  useSteps,\n  useStepsContext,\n  useStepsItem,\n  useStepsItemContext,\n} from \"./use-steps\"\n\ninterface ComponentContext extends Pick<\n  StepsRootProps,\n  \"items\" | \"lazy\" | \"lazyBehavior\"\n> {}\n\nexport interface StepsItem\n  extends\n    Omit<StepsItemProps, \"content\" | \"index\" | \"title\">,\n    Pick<StepsIndicatorProps, \"complete\" | \"current\" | \"incomplete\"> {\n  /**\n   * The content for step element.\n   */\n  content?: ReactNode\n  /**\n   * The description for step element.\n   */\n  description?: ReactNode\n  /**\n   * If true, display the step separator.\n   *\n   * @default true\n   */\n  hasSeparator?: boolean\n  /**\n   * The title for step element.\n   */\n  title?: string\n  /**\n   * Props for step content element.\n   */\n  contentProps?: StepsContentProps\n  /**\n   * Props for step description element.\n   */\n  descriptionProps?: StepsDescriptionProps\n  /**\n   * Props for step indicator element.\n   */\n  indicatorProps?: StepsIndicatorProps\n  /**\n   * Props for step separator element.\n   */\n  separatorProps?: StepsSeparatorProps\n  /**\n   * Props for step title element.\n   */\n  titleProps?: StepsTitleProps\n}\n\nexport interface StepsRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    Omit<UseStepsProps, \"count\" | \"orientation\">,\n    Pick<UseLazyMountProps, \"lazy\" | \"lazyBehavior\">,\n    ThemeProps<StepsStyle> {\n  /**\n   * If provided, generate step components based on steps.\n   */\n  items?: StepsItem[]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: StepsPropsContext,\n  useComponentContext,\n  usePropsContext: useStepsPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StepsRootProps, StepsStyle, ComponentContext>(\n  \"steps\",\n  stepsStyle,\n)\n\nexport { StepsPropsContext, useStepsPropsContext }\n\n/**\n * `Steps` is a component that displays the progress of a multi-step process.\n *\n * @see https://yamada-ui.com/docs/components/steps\n */\nexport const StepsRoot = withProvider<\"div\", StepsRootProps, \"orientation\">(\n  ({\n    children,\n    items = [],\n    lazy,\n    lazyBehavior,\n    orientation: orientationProp,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const validChildren = useValidChildren(children)\n    const stepsList = useFindChild<StepsListProps>(validChildren, StepsList)\n    const {\n      id,\n      count,\n      descendants,\n      getStatus,\n      index,\n      orientation,\n      setIndex,\n      getContentProps,\n      getListProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n      onNext,\n      onPrev,\n    } = useSteps({\n      count: items.length || Children.count(stepsList?.props.children),\n      orientation: computedOrientation,\n      ...rest,\n    })\n    const componentContext = useMemo(\n      () => ({ items, lazy, lazyBehavior }),\n      [items, lazy, lazyBehavior],\n    )\n    const stepsContext = useMemo(\n      () => ({\n        id,\n        count,\n        getStatus,\n        index,\n        orientation,\n        setIndex,\n        getContentProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        onNext,\n        onPrev,\n      }),\n      [\n        id,\n        count,\n        index,\n        orientation,\n        setIndex,\n        getStatus,\n        onNext,\n        onPrev,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getContentProps,\n      ],\n    )\n\n    return (\n      <StepsDescendantsContext value={descendants}>\n        <StepsContext value={stepsContext}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{children}</styled.div>\n          </ComponentContext>\n        </StepsContext>\n      </StepsDescendantsContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface StepsListProps extends HTMLStyledProps<\"ol\"> {}\n\nexport const StepsList = withContext<\"ol\", StepsListProps>(\n  ({ children, ...rest }) => {\n    const { items } = useComponentContext()\n    const { getListProps } = useStepsContext()\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items?.map(\n          (\n            {\n              complete,\n              content: _content,\n              current,\n              description,\n              hasSeparator = true,\n              incomplete,\n              title,\n              contentProps: _contentProps,\n              descriptionProps,\n              indicatorProps,\n              separatorProps,\n              titleProps,\n              ...rest\n            },\n            index,\n          ) => (\n            <StepsItem key={index} index={index} title={title} {...rest}>\n              <StepsIndicator\n                complete={complete}\n                current={current}\n                incomplete={incomplete}\n                {...indicatorProps}\n              />\n\n              <styled.div>\n                {title ? (\n                  <StepsTitle {...titleProps}>{title}</StepsTitle>\n                ) : null}\n                {description ? (\n                  <StepsDescription {...descriptionProps}>\n                    {description}\n                  </StepsDescription>\n                ) : null}\n              </styled.div>\n\n              {hasSeparator ? <StepsSeparator {...separatorProps} /> : null}\n            </StepsItem>\n          ),\n        )\n      }\n    }, [children, items])\n\n    return <styled.ol {...getListProps(rest)}>{computedChildren}</styled.ol>\n  },\n  \"list\",\n)()\n\nexport interface StepsItemProps\n  extends HTMLStyledProps<\"li\">, UseStepsItemProps {}\n\nexport const StepsItem = withContext<\"li\", StepsItemProps>((props) => {\n  const {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  } = useStepsItem(props)\n  const context = useMemo(\n    () => ({\n      first,\n      index,\n      last,\n      status,\n      getDescriptionProps,\n      getIndicatorProps,\n      getSeparatorProps,\n      getTitleProps,\n    }),\n    [\n      first,\n      index,\n      last,\n      status,\n      getTitleProps,\n      getDescriptionProps,\n      getSeparatorProps,\n      getIndicatorProps,\n    ],\n  )\n\n  return (\n    <StepsItemContext value={context}>\n      <styled.li {...getRootProps()} />\n    </StepsItemContext>\n  )\n}, \"item\")()\n\nexport interface StepsIndicatorProps extends HTMLStyledProps {\n  /**\n   * The element for the complete indicator.\n   *\n   * @default <CheckIcon />\n   */\n  complete?: ReactNode\n  /**\n   * The element for the current indicator.\n   *\n   * @default <StepsNumber />\n   */\n  current?: ReactNode\n  /**\n   * The element for the incomplete indicator.\n   *\n   * @default <StepsNumber />\n   */\n  incomplete?: ReactNode\n}\n\nexport const StepsIndicator = withContext<\"div\", StepsIndicatorProps>(\n  ({\n    complete = <CheckIcon />,\n    current = <StepsNumber />,\n    incomplete = <StepsNumber />,\n    ...rest\n  }) => {\n    const { status, getIndicatorProps } = useStepsItemContext()\n    const components = useMemo(\n      () => ({ complete, current, incomplete }),\n      [complete, current, incomplete],\n    )\n\n    return (\n      <styled.div {...getIndicatorProps(rest)}>{components[status]}</styled.div>\n    )\n  },\n  \"indicator\",\n)()\n\nexport interface StepsNumberProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StepsNumber = withContext<\"span\", StepsNumberProps>(\n  \"span\",\n  \"number\",\n)(undefined, ({ children, ...rest }) => {\n  const { index } = useStepsItemContext()\n\n  return { ...rest, children: children ?? index + 1 }\n})\n\nexport interface StepsTitleProps extends HTMLStyledProps {}\n\nexport const StepsTitle = withContext<\"h3\", StepsTitleProps>(\"h3\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useStepsItemContext()\n\n    return getTitleProps(props)\n  },\n)\n\nexport interface StepsDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const StepsDescription = withContext<\"p\", StepsDescriptionProps>(\n  \"p\",\n  \"description\",\n)(undefined, (props) => {\n  const { getDescriptionProps } = useStepsItemContext()\n\n  return getDescriptionProps(props)\n})\n\nexport interface StepsSeparatorProps extends HTMLStyledProps {}\n\nexport const StepsSeparator = withContext<\"div\", StepsSeparatorProps>(\n  \"div\",\n  \"separator\",\n)(undefined, (props) => {\n  const { getSeparatorProps } = useStepsItemContext()\n\n  return getSeparatorProps(props)\n})\n\nexport interface StepsContentsProps extends PropsWithChildren {}\n\nexport const StepsContents: FC<StepsContentsProps> = ({ children }) => {\n  const { items } = useComponentContext()\n\n  return useMemo(() => {\n    if (children) {\n      return children\n    } else {\n      return items?.map(({ content, contentProps }, index) =>\n        isUndefined(content) || isNull(content) ? null : (\n          <StepsContent key={index} index={index} {...contentProps}>\n            {content}\n          </StepsContent>\n        ),\n      )\n    }\n  }, [children, items])\n}\n\nexport interface StepsContentProps extends HTMLStyledProps {\n  /**\n   * The index of the step content.\n   */\n  index: number\n}\n\nexport const StepsContent = withContext<\"div\", StepsContentProps>(\n  \"div\",\n  \"content\",\n)(undefined, ({ index, ...rest }) => {\n  const { lazy, lazyBehavior } = useComponentContext()\n  const { index: selectedIndex, getContentProps } = useStepsContext()\n  const mounted = index === selectedIndex\n  const children = useLazyMount({\n    lazy,\n    lazyBehavior,\n    mounted,\n    ...rest,\n  })\n\n  return { ...getContentProps({ index, ...rest }), children }\n})\n\nexport interface StepsCompletedContentProps extends HTMLStyledProps {}\n\nexport const StepsCompletedContent = withContext<\n  \"div\",\n  StepsCompletedContentProps\n>(\"div\", { name: \"CompletedContent\", slot: [\"content\", \"completed\"] })(\n  undefined,\n  (props) => {\n    const { lazy, lazyBehavior } = useComponentContext()\n    const { count, index: selectedIndex, getContentProps } = useStepsContext()\n    const mounted = count !== 0 && count === selectedIndex\n    const children = useLazyMount({\n      lazy,\n      lazyBehavior,\n      mounted,\n      ...props,\n    })\n\n    return { ...getContentProps(props), children }\n  },\n)\n\nexport interface StepsPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsPrevTrigger = withContext<\"button\", StepsPrevTriggerProps>(\n  \"button\",\n  { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] },\n)((props) => {\n  const { getPrevTriggerProps } = useStepsContext()\n\n  return { asChild: true, ...getPrevTriggerProps(props) }\n})\n\nexport interface StepsNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsNextTrigger = withContext<\"button\", StepsNextTriggerProps>(\n  \"button\",\n  { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] },\n)((props) => {\n  const { getNextTriggerProps } = useStepsContext()\n\n  return { asChild: true, ...getNextTriggerProps(props) }\n})\n"],"mappings":"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"}
+{"version":3,"file":"steps.js","names":[],"sources":["../../../../src/components/steps/steps.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { StepsStyle } from \"./steps.style\"\nimport type { UseStepsItemProps, UseStepsProps } from \"./use-steps\"\nimport { Children, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport {\n  isNull,\n  isUndefined,\n  useFindChild,\n  useValidChildren,\n} from \"../../utils\"\nimport { CheckIcon } from \"../icon\"\nimport { stepsStyle } from \"./steps.style\"\nimport {\n  StepsContext,\n  StepsDescendantsContext,\n  StepsItemContext,\n  useSteps,\n  useStepsContext,\n  useStepsItem,\n  useStepsItemContext,\n} from \"./use-steps\"\n\ninterface ComponentContext extends Pick<\n  StepsRootProps,\n  \"items\" | \"lazy\" | \"lazyBehavior\"\n> {}\n\nexport interface StepsItem\n  extends\n    Omit<StepsItemProps, \"content\" | \"index\" | \"title\">,\n    Pick<StepsIndicatorProps, \"complete\" | \"current\" | \"incomplete\"> {\n  /**\n   * The content for step element.\n   */\n  content?: ReactNode\n  /**\n   * The description for step element.\n   */\n  description?: ReactNode\n  /**\n   * If true, display the step separator.\n   *\n   * @default true\n   */\n  hasSeparator?: boolean\n  /**\n   * The title for step element.\n   */\n  title?: string\n  /**\n   * Props for step content element.\n   */\n  contentProps?: StepsContentProps\n  /**\n   * Props for step description element.\n   */\n  descriptionProps?: StepsDescriptionProps\n  /**\n   * Props for step indicator element.\n   */\n  indicatorProps?: StepsIndicatorProps\n  /**\n   * Props for step separator element.\n   */\n  separatorProps?: StepsSeparatorProps\n  /**\n   * Props for step title element.\n   */\n  titleProps?: StepsTitleProps\n}\n\nexport interface StepsRootProps\n  extends\n    Omit<HTMLStyledProps, \"onChange\">,\n    Omit<UseStepsProps, \"count\" | \"orientation\">,\n    Pick<UseLazyMountProps, \"lazy\" | \"lazyBehavior\">,\n    ThemeProps<StepsStyle> {\n  /**\n   * If provided, generate step components based on steps.\n   */\n  items?: StepsItem[]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: StepsPropsContext,\n  useComponentContext,\n  usePropsContext: useStepsPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<StepsRootProps, StepsStyle, ComponentContext>(\n  \"steps\",\n  stepsStyle,\n)\n\nexport { StepsPropsContext, useStepsPropsContext }\n\n/**\n * `Steps` is a component that displays the progress of a multi-step process.\n *\n * @see https://yamada-ui.com/docs/components/steps\n */\nexport const StepsRoot = withProvider<\"div\", StepsRootProps, \"orientation\">(\n  ({\n    children,\n    items = [],\n    lazy,\n    lazyBehavior,\n    orientation: orientationProp,\n    ...rest\n  }) => {\n    const computedOrientation = useValue(orientationProp)\n    const validChildren = useValidChildren(children)\n    const stepsList = useFindChild<StepsListProps>(validChildren, StepsList)\n    const {\n      id,\n      count,\n      descendants,\n      getStatus,\n      index,\n      orientation,\n      setIndex,\n      getContentProps,\n      getListProps,\n      getNextTriggerProps,\n      getPrevTriggerProps,\n      getRootProps,\n      onNext,\n      onPrev,\n    } = useSteps({\n      count: items.length || Children.count(stepsList?.props.children),\n      orientation: computedOrientation,\n      ...rest,\n    })\n    const componentContext = useMemo(\n      () => ({ items, lazy, lazyBehavior }),\n      [items, lazy, lazyBehavior],\n    )\n    const stepsContext = useMemo(\n      () => ({\n        id,\n        count,\n        getStatus,\n        index,\n        orientation,\n        setIndex,\n        getContentProps,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        onNext,\n        onPrev,\n      }),\n      [\n        id,\n        count,\n        index,\n        orientation,\n        setIndex,\n        getStatus,\n        onNext,\n        onPrev,\n        getListProps,\n        getNextTriggerProps,\n        getPrevTriggerProps,\n        getContentProps,\n      ],\n    )\n\n    return (\n      <StepsDescendantsContext value={descendants}>\n        <StepsContext value={stepsContext}>\n          <ComponentContext value={componentContext}>\n            <styled.div {...getRootProps()}>{children}</styled.div>\n          </ComponentContext>\n        </StepsContext>\n      </StepsDescendantsContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface StepsListProps extends HTMLStyledProps<\"ol\"> {}\n\nexport const StepsList = withContext<\"ol\", StepsListProps>(\n  ({ children, ...rest }) => {\n    const { items } = useComponentContext()\n    const { getListProps } = useStepsContext()\n    const computedChildren = useMemo(() => {\n      if (children) {\n        return children\n      } else {\n        return items?.map(\n          (\n            {\n              complete,\n              content: _content,\n              current,\n              description,\n              hasSeparator = true,\n              incomplete,\n              title,\n              contentProps: _contentProps,\n              descriptionProps,\n              indicatorProps,\n              separatorProps,\n              titleProps,\n              ...rest\n            },\n            index,\n          ) => (\n            <StepsItem key={index} index={index} title={title} {...rest}>\n              <StepsIndicator\n                complete={complete}\n                current={current}\n                incomplete={incomplete}\n                {...indicatorProps}\n              />\n\n              <styled.div>\n                {title ? (\n                  <StepsTitle {...titleProps}>{title}</StepsTitle>\n                ) : null}\n                {description ? (\n                  <StepsDescription {...descriptionProps}>\n                    {description}\n                  </StepsDescription>\n                ) : null}\n              </styled.div>\n\n              {hasSeparator ? <StepsSeparator {...separatorProps} /> : null}\n            </StepsItem>\n          ),\n        )\n      }\n    }, [children, items])\n\n    return <styled.ol {...getListProps(rest)}>{computedChildren}</styled.ol>\n  },\n  \"list\",\n)()\n\nexport interface StepsItemProps\n  extends HTMLStyledProps<\"li\">, UseStepsItemProps {}\n\nexport const StepsItem = withContext<\"li\", StepsItemProps>((props) => {\n  const {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  } = useStepsItem(props)\n  const context = useMemo(\n    () => ({\n      first,\n      index,\n      last,\n      status,\n      getDescriptionProps,\n      getIndicatorProps,\n      getSeparatorProps,\n      getTitleProps,\n    }),\n    [\n      first,\n      index,\n      last,\n      status,\n      getTitleProps,\n      getDescriptionProps,\n      getSeparatorProps,\n      getIndicatorProps,\n    ],\n  )\n\n  return (\n    <StepsItemContext value={context}>\n      <styled.li {...getRootProps()} />\n    </StepsItemContext>\n  )\n}, \"item\")()\n\nexport interface StepsIndicatorProps extends HTMLStyledProps {\n  /**\n   * The element for the complete indicator.\n   *\n   * @default <CheckIcon />\n   */\n  complete?: ReactNode\n  /**\n   * The element for the current indicator.\n   *\n   * @default <StepsNumber />\n   */\n  current?: ReactNode\n  /**\n   * The element for the incomplete indicator.\n   *\n   * @default <StepsNumber />\n   */\n  incomplete?: ReactNode\n}\n\nexport const StepsIndicator = withContext<\"div\", StepsIndicatorProps>(\n  ({\n    complete = <CheckIcon />,\n    current = <StepsNumber />,\n    incomplete = <StepsNumber />,\n    ...rest\n  }) => {\n    const { status, getIndicatorProps } = useStepsItemContext()\n    const components = useMemo(\n      () => ({ complete, current, incomplete }),\n      [complete, current, incomplete],\n    )\n\n    return (\n      <styled.div {...getIndicatorProps(rest)}>{components[status]}</styled.div>\n    )\n  },\n  \"indicator\",\n)()\n\nexport interface StepsNumberProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StepsNumber = withContext<\"span\", StepsNumberProps>(\n  \"span\",\n  \"number\",\n)(undefined, ({ children, ...rest }) => {\n  const { index } = useStepsItemContext()\n\n  return { ...rest, children: children ?? index + 1 }\n})\n\nexport interface StepsTitleProps extends HTMLStyledProps {}\n\nexport const StepsTitle = withContext<\"h3\", StepsTitleProps>(\"h3\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useStepsItemContext()\n\n    return getTitleProps(props)\n  },\n)\n\nexport interface StepsDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const StepsDescription = withContext<\"p\", StepsDescriptionProps>(\n  \"p\",\n  \"description\",\n)(undefined, (props) => {\n  const { getDescriptionProps } = useStepsItemContext()\n\n  return getDescriptionProps(props)\n})\n\nexport interface StepsSeparatorProps extends HTMLStyledProps {}\n\nexport const StepsSeparator = withContext<\"div\", StepsSeparatorProps>(\n  \"div\",\n  \"separator\",\n)(undefined, (props) => {\n  const { getSeparatorProps } = useStepsItemContext()\n\n  return getSeparatorProps(props)\n})\n\nexport interface StepsContentsProps extends PropsWithChildren {}\n\nexport const StepsContents: FC<StepsContentsProps> = ({ children }) => {\n  const { items } = useComponentContext()\n\n  return useMemo(() => {\n    if (children) {\n      return children\n    } else {\n      return items?.map(({ content, contentProps }, index) =>\n        isUndefined(content) || isNull(content) ? null : (\n          <StepsContent key={index} index={index} {...contentProps}>\n            {content}\n          </StepsContent>\n        ),\n      )\n    }\n  }, [children, items])\n}\n\nexport interface StepsContentProps extends HTMLStyledProps {\n  /**\n   * The index of the step content.\n   */\n  index: number\n}\n\nexport const StepsContent = withContext<\"div\", StepsContentProps>(\n  \"div\",\n  \"content\",\n)(undefined, ({ index, ...rest }) => {\n  const { lazy, lazyBehavior } = useComponentContext()\n  const { index: selectedIndex, getContentProps } = useStepsContext()\n  const mounted = index === selectedIndex\n  const children = useLazyMount({\n    lazy,\n    lazyBehavior,\n    mounted,\n    ...rest,\n  })\n\n  return { ...getContentProps({ index, ...rest }), children }\n})\n\nexport interface StepsCompletedContentProps extends HTMLStyledProps {}\n\nexport const StepsCompletedContent = withContext<\n  \"div\",\n  StepsCompletedContentProps\n>(\"div\", { name: \"CompletedContent\", slot: [\"content\", \"completed\"] })(\n  undefined,\n  (props) => {\n    const { lazy, lazyBehavior } = useComponentContext()\n    const { count, index: selectedIndex, getContentProps } = useStepsContext()\n    const mounted = count !== 0 && count === selectedIndex\n    const children = useLazyMount({\n      lazy,\n      lazyBehavior,\n      mounted,\n      ...props,\n    })\n\n    return { ...getContentProps(props), children }\n  },\n)\n\nexport interface StepsPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsPrevTrigger = withContext<\"button\", StepsPrevTriggerProps>(\n  \"button\",\n  { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] },\n)((props) => {\n  const { getPrevTriggerProps } = useStepsContext()\n\n  return { asChild: true, ...getPrevTriggerProps(props) }\n})\n\nexport interface StepsNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsNextTrigger = withContext<\"button\", StepsNextTriggerProps>(\n  \"button\",\n  { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] },\n)((props) => {\n  const { getNextTriggerProps } = useStepsContext()\n\n  return { asChild: true, ...getNextTriggerProps(props) }\n})\n"],"mappings":"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"}

package/dist/esm/components/steps/steps.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"steps.style.js","names":[],"sources":["../../../../src/components/steps/steps.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const stepsStyle = defineComponentSlotStyle({\n  base: {\n    description: {\n      color: \"fg.muted\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      boxSize: \"{size}\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      fontWeight: \"medium\",\n      justifyContent: \"center\",\n      rounded: \"full\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n    },\n    item: {\n      display: \"flex\",\n      flex: \"1 0 0\",\n      position: \"relative\",\n      _last: {\n        \"& [role=separator]\": {\n          display: \"none\",\n        },\n        flex: \"initial\",\n      },\n    },\n    list: {\n      display: \"flex\",\n      gap: \"3\",\n      justifyContent: \"space-between\",\n    },\n    root: {\n      display: \"flex\",\n      gap: \"4\",\n      w: \"full\",\n    },\n    separator: {\n      bg: \"border\",\n      flex: \"1\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n    },\n    title: {\n      fontWeight: \"medium\",\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the steps.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        item: {\n          alignItems: \"center\",\n          flexDirection: \"row\",\n        },\n        list: {\n          alignItems: \"center\",\n          flexDirection: \"row\",\n          w: \"full\",\n        },\n        root: {\n          flexDirection: \"column\",\n        },\n        separator: {\n          h: \"{thickness}\",\n          w: \"full\",\n        },\n      },\n      vertical: {\n        content: {\n          flex: \"1\",\n        },\n        item: {\n          alignItems: \"flex-start\",\n        },\n        list: {\n          alignItems: \"flex-start\",\n          flexDirection: \"column\",\n        },\n        root: {\n          flexDirection: \"row\",\n        },\n        separator: {\n          h: \"full\",\n          insetBlockStart: \"calc({size} + {gap})\",\n          insetInlineStart: \"calc(({size} / 2) - ({thickness} / 2))\",\n          maxH: `calc(full - {size} - {gap})`,\n          position: \"absolute\",\n          w: \"{thickness}\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    solid: {\n      indicator: {\n        _complete: {\n          layerStyle: \"solid\",\n        },\n        _current: {\n          bg: \"colorScheme.muted\",\n          color: \"colorScheme.fg\",\n        },\n        _incomplete: {\n          bg: \"bg.subtle\",\n          color: \"fg.emphasized\",\n        },\n      },\n      separator: {\n        _complete: {\n          bg: \"colorScheme.solid\",\n        },\n      },\n    },\n    subtle: {\n      indicator: {\n        _complete: {\n          bg: \"colorScheme.emphasized\",\n          color: \"colorScheme.fg\",\n        },\n        _current: {\n          bg: \"colorScheme.muted\",\n          color: \"colorScheme.fg\",\n        },\n        _incomplete: {\n          bg: \"bg.subtle\",\n          color: \"fg.emphasized\",\n        },\n      },\n      separator: {\n        _complete: {\n          bg: \"colorScheme.emphasized\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: {\n        fontSize: \"md\",\n      },\n      item: {\n        \"--gap\": \"sizes.3\",\n        \"--size\": \"sizes.8\",\n        \"--thickness\": \"sizes.0.5\",\n        fontSize: \"xs\",\n        gap: \"3\",\n      },\n    },\n    md: {\n      indicator: {\n        fontSize: \"md\",\n      },\n      item: {\n        \"--gap\": \"sizes.3\",\n        \"--size\": \"sizes.10\",\n        \"--thickness\": \"sizes.0.5\",\n        fontSize: \"sm\",\n        gap: \"3\",\n      },\n    },\n    lg: {\n      indicator: {\n        fontSize: \"lg\",\n      },\n      item: {\n        \"--gap\": \"sizes.3\",\n        \"--size\": \"sizes.12\",\n        \"--thickness\": \"sizes.0.5\",\n        gap: \"3\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"solid\",\n    orientation: \"horizontal\",\n  },\n})\n\nexport type StepsStyle = typeof stepsStyle\n"],"mappings":";;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,aAAa,EACX,OAAO,YACR;EACD,WAAW;GACT,YAAY;GACZ,SAAS;GACT,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACrB;EACD,MAAM;GACJ,SAAS;GACT,MAAM;GACN,UAAU;GACV,OAAO;IACL,sBAAsB,EACpB,SAAS,QACV;IACD,MAAM;IACP;GACF;EACD,MAAM;GACJ,SAAS;GACT,KAAK;GACL,gBAAgB;GACjB;EACD,MAAM;GACJ,SAAS;GACT,KAAK;GACL,GAAG;GACJ;EACD,WAAW;GACT,IAAI;GACJ,MAAM;GACN,oBAAoB;GACpB,oBAAoB;GACrB;EACD,OAAO,EACL,YAAY,UACb;EACF;CAED,OAAO;;;;;;AAML,aAAa;EACX,YAAY;GACV,MAAM;IACJ,YAAY;IACZ,eAAe;IAChB;GACD,MAAM;IACJ,YAAY;IACZ,eAAe;IACf,GAAG;IACJ;GACD,MAAM,EACJ,eAAe,UAChB;GACD,WAAW;IACT,GAAG;IACH,GAAG;IACJ;GACF;EACD,UAAU;GACR,SAAS,EACP,MAAM,KACP;GACD,MAAM,EACJ,YAAY,cACb;GACD,MAAM;IACJ,YAAY;IACZ,eAAe;IAChB;GACD,MAAM,EACJ,eAAe,OAChB;GACD,WAAW;IACT,GAAG;IACH,iBAAiB;IACjB,kBAAkB;IAClB,MAAM;IACN,UAAU;IACV,GAAG;IACJ;GACF;EACF,EACF;CAED,UAAU;EACR,OAAO;GACL,WAAW;IACT,WAAW,EACT,YAAY,SACb;IACD,UAAU;KACR,IAAI;KACJ,OAAO;KACR;IACD,aAAa;KACX,IAAI;KACJ,OAAO;KACR;IACF;GACD,WAAW,EACT,WAAW,EACT,IAAI,qBACL,EACF;GACF;EACD,QAAQ;GACN,WAAW;IACT,WAAW;KACT,IAAI;KACJ,OAAO;KACR;IACD,UAAU;KACR,IAAI;KACJ,OAAO;KACR;IACD,aAAa;KACX,IAAI;KACJ,OAAO;KACR;IACF;GACD,WAAW,EACT,WAAW,EACT,IAAI,0BACL,EACF;GACF;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EACT,UAAU,MACX;GACD,MAAM;IACJ,SAAS;IACT,UAAU;IACV,eAAe;IACf,UAAU;IACV,KAAK;IACN;GACF;EACD,IAAI;GACF,WAAW,EACT,UAAU,MACX;GACD,MAAM;IACJ,SAAS;IACT,UAAU;IACV,eAAe;IACf,UAAU;IACV,KAAK;IACN;GACF;EACD,IAAI;GACF,WAAW,EACT,UAAU,MACX;GACD,MAAM;IACJ,SAAS;IACT,UAAU;IACV,eAAe;IACf,KAAK;IACN;GACF;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,aAAa;EACd;CACF,CAAC"}
+{"version":3,"file":"steps.style.js","names":[],"sources":["../../../../src/components/steps/steps.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const stepsStyle = defineComponentSlotStyle({\n  base: {\n    description: {\n      color: \"fg.muted\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      boxSize: \"{size}\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      fontWeight: \"medium\",\n      justifyContent: \"center\",\n      rounded: \"full\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n    },\n    item: {\n      display: \"flex\",\n      flex: \"1 0 0\",\n      position: \"relative\",\n      _last: {\n        \"& [role=separator]\": {\n          display: \"none\",\n        },\n        flex: \"initial\",\n      },\n    },\n    list: {\n      display: \"flex\",\n      gap: \"3\",\n      justifyContent: \"space-between\",\n    },\n    root: {\n      display: \"flex\",\n      gap: \"4\",\n      w: \"full\",\n    },\n    separator: {\n      bg: \"border\",\n      flex: \"1\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n    },\n    title: {\n      fontWeight: \"medium\",\n    },\n  },\n\n  props: {\n    /**\n     * The orientation of the steps.\n     *\n     * @default 'horizontal'\n     */\n    orientation: {\n      horizontal: {\n        item: {\n          alignItems: \"center\",\n          flexDirection: \"row\",\n        },\n        list: {\n          alignItems: \"center\",\n          flexDirection: \"row\",\n          w: \"full\",\n        },\n        root: {\n          flexDirection: \"column\",\n        },\n        separator: {\n          h: \"{thickness}\",\n          w: \"full\",\n        },\n      },\n      vertical: {\n        content: {\n          flex: \"1\",\n        },\n        item: {\n          alignItems: \"flex-start\",\n        },\n        list: {\n          alignItems: \"flex-start\",\n          flexDirection: \"column\",\n        },\n        root: {\n          flexDirection: \"row\",\n        },\n        separator: {\n          h: \"full\",\n          insetBlockStart: \"calc({size} + {gap})\",\n          insetInlineStart: \"calc(({size} / 2) - ({thickness} / 2))\",\n          maxH: `calc(full - {size} - {gap})`,\n          position: \"absolute\",\n          w: \"{thickness}\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    solid: {\n      indicator: {\n        _complete: {\n          layerStyle: \"solid\",\n        },\n        _current: {\n          bg: \"colorScheme.muted\",\n          color: \"colorScheme.fg\",\n        },\n        _incomplete: {\n          bg: \"bg.subtle\",\n          color: \"fg.emphasized\",\n        },\n      },\n      separator: {\n        _complete: {\n          bg: \"colorScheme.solid\",\n        },\n      },\n    },\n    subtle: {\n      indicator: {\n        _complete: {\n          bg: \"colorScheme.emphasized\",\n          color: \"colorScheme.fg\",\n        },\n        _current: {\n          bg: \"colorScheme.muted\",\n          color: \"colorScheme.fg\",\n        },\n        _incomplete: {\n          bg: \"bg.subtle\",\n          color: \"fg.emphasized\",\n        },\n      },\n      separator: {\n        _complete: {\n          bg: \"colorScheme.emphasized\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: {\n        fontSize: \"md\",\n      },\n      item: {\n        \"--gap\": \"sizes.3\",\n        \"--size\": \"sizes.8\",\n        \"--thickness\": \"sizes.0.5\",\n        fontSize: \"xs\",\n        gap: \"3\",\n      },\n    },\n    md: {\n      indicator: {\n        fontSize: \"md\",\n      },\n      item: {\n        \"--gap\": \"sizes.3\",\n        \"--size\": \"sizes.10\",\n        \"--thickness\": \"sizes.0.5\",\n        fontSize: \"sm\",\n        gap: \"3\",\n      },\n    },\n    lg: {\n      indicator: {\n        fontSize: \"lg\",\n      },\n      item: {\n        \"--gap\": \"sizes.3\",\n        \"--size\": \"sizes.12\",\n        \"--thickness\": \"sizes.0.5\",\n        gap: \"3\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"solid\",\n    orientation: \"horizontal\",\n  },\n})\n\nexport type StepsStyle = typeof stepsStyle\n"],"mappings":";;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,aAAa,EACX,OAAO,WACT;EACA,WAAW;GACT,YAAY;GACZ,SAAS;GACT,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,oBAAoB;GACpB,oBAAoB;EACtB;EACA,MAAM;GACJ,SAAS;GACT,MAAM;GACN,UAAU;GACV,OAAO;IACL,sBAAsB,EACpB,SAAS,OACX;IACA,MAAM;GACR;EACF;EACA,MAAM;GACJ,SAAS;GACT,KAAK;GACL,gBAAgB;EAClB;EACA,MAAM;GACJ,SAAS;GACT,KAAK;GACL,GAAG;EACL;EACA,WAAW;GACT,IAAI;GACJ,MAAM;GACN,oBAAoB;GACpB,oBAAoB;EACtB;EACA,OAAO,EACL,YAAY,SACd;CACF;CAEA,OAAO;;;;;;AAML,aAAa;EACX,YAAY;GACV,MAAM;IACJ,YAAY;IACZ,eAAe;GACjB;GACA,MAAM;IACJ,YAAY;IACZ,eAAe;IACf,GAAG;GACL;GACA,MAAM,EACJ,eAAe,SACjB;GACA,WAAW;IACT,GAAG;IACH,GAAG;GACL;EACF;EACA,UAAU;GACR,SAAS,EACP,MAAM,IACR;GACA,MAAM,EACJ,YAAY,aACd;GACA,MAAM;IACJ,YAAY;IACZ,eAAe;GACjB;GACA,MAAM,EACJ,eAAe,MACjB;GACA,WAAW;IACT,GAAG;IACH,iBAAiB;IACjB,kBAAkB;IAClB,MAAM;IACN,UAAU;IACV,GAAG;GACL;EACF;CACF,EACF;CAEA,UAAU;EACR,OAAO;GACL,WAAW;IACT,WAAW,EACT,YAAY,QACd;IACA,UAAU;KACR,IAAI;KACJ,OAAO;IACT;IACA,aAAa;KACX,IAAI;KACJ,OAAO;IACT;GACF;GACA,WAAW,EACT,WAAW,EACT,IAAI,oBACN,EACF;EACF;EACA,QAAQ;GACN,WAAW;IACT,WAAW;KACT,IAAI;KACJ,OAAO;IACT;IACA,UAAU;KACR,IAAI;KACJ,OAAO;IACT;IACA,aAAa;KACX,IAAI;KACJ,OAAO;IACT;GACF;GACA,WAAW,EACT,WAAW,EACT,IAAI,yBACN,EACF;EACF;CACF;CAEA,OAAO;EACL,IAAI;GACF,WAAW,EACT,UAAU,KACZ;GACA,MAAM;IACJ,SAAS;IACT,UAAU;IACV,eAAe;IACf,UAAU;IACV,KAAK;GACP;EACF;EACA,IAAI;GACF,WAAW,EACT,UAAU,KACZ;GACA,MAAM;IACJ,SAAS;IACT,UAAU;IACV,eAAe;IACf,UAAU;IACV,KAAK;GACP;EACF;EACA,IAAI;GACF,WAAW,EACT,UAAU,KACZ;GACA,MAAM;IACJ,SAAS;IACT,UAAU;IACV,eAAe;IACf,KAAK;GACP;EACF;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,aAAa;CACf;AACF,CAAC"}

package/dist/esm/components/steps/use-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-steps.js","names":["createContext"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nconst {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n  UseStepsReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n  {\n    name: \"StepsItemContext\",\n  },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The total number of steps.\n   */\n  count?: number\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  count = 0,\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => mergeProps(rest, props)(),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n  /**\n   * The index of the step.\n   */\n  index: number\n}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseStepsItemProps) => {\n  const { descendants, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  useSafeLayoutEffect(() => {\n    const el = descendants.value(index)?.node\n    const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n    if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n  }, [descendants, getDocument, id, index])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-current\": current ? \"step\" : undefined,\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n          \"data-orientation\": orientation,\n          [statusDataAttr]: dataAttr(true),\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n      )(),\n    [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}
+{"version":3,"file":"use-steps.js","names":["createContext"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" | \"current\" | \"incomplete\"\n\nconst {\n  DescendantsContext: StepsDescendantsContext,\n  useDescendant: useStepsDescendant,\n  useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n  UseStepsReturn,\n  \"descendants\" | \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n  name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n  {\n    name: \"StepsItemContext\",\n  },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The total number of steps.\n   */\n  count?: number\n  /**\n   * The initial index of the active step.\n   *\n   * @default 0\n   */\n  defaultIndex?: number\n  /**\n   * The index of the active step.\n   */\n  index?: number\n  /**\n   * The orientation of the steps.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: Orientation\n  /**\n   * The callback function that is called when the active step index is changed.\n   */\n  onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n  count = 0,\n  defaultIndex = 0,\n  index: indexProp,\n  orientation = \"horizontal\",\n  onChange,\n  ...rest\n}: UseStepsProps = {}) => {\n  const descendants = useStepsDescendants()\n  const [index, setIndex] = useControllableState({\n    defaultValue: defaultIndex,\n    value: indexProp,\n    onChange,\n  })\n  const id = useId()\n\n  const getStatus = useCallback(\n    (indexProp: number): StepStatusScheme => {\n      if (indexProp < index) {\n        return \"complete\"\n      } else if (indexProp > index) {\n        return \"incomplete\"\n      } else {\n        return \"current\"\n      }\n    },\n    [index],\n  )\n\n  const onPrev = useCallback(\n    () => setIndex((index) => Math.max(0, index - 1)),\n    [setIndex],\n  )\n\n  const onNext = useCallback(() => {\n    setIndex((index) => Math.min(count, index + 1))\n  }, [count, setIndex])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => mergeProps(rest, props)(),\n    [rest],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => {\n      return {\n        \"data-orientation\": orientation,\n        ...props,\n      }\n    },\n    [orientation],\n  )\n\n  const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n    ({ index: indexProp = count, ...props } = {}) => ({\n      id: `${id}-${indexProp}`,\n      hidden: indexProp !== index,\n      tabIndex: 0,\n      ...props,\n    }),\n    [count, id, index],\n  )\n\n  const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      disabled: index === 0,\n      ...props,\n      onClick: handlerAll(props.onClick, onPrev),\n    }),\n    [onPrev, index],\n  )\n\n  const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        disabled: count <= index,\n        ...props,\n        onClick: handlerAll(props.onClick, onNext),\n      }\n    },\n    [count, index, onNext],\n  )\n\n  return {\n    id,\n    count,\n    descendants,\n    getStatus,\n    index,\n    orientation,\n    setIndex,\n    getContentProps,\n    getListProps,\n    getNextTriggerProps,\n    getPrevTriggerProps,\n    getRootProps,\n    onNext,\n    onPrev,\n  }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n  /**\n   * The index of the step.\n   */\n  index: number\n}\n\nexport const useStepsItem = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  index,\n  ...rest\n}: UseStepsItemProps) => {\n  const { descendants, register } = useStepsDescendant()\n  const { id, getStatus, orientation } = useStepsContext()\n  const status = getStatus(index)\n  const current = status === \"current\"\n  const first = index === 0\n  const last = index === descendants.lastValue()?.index\n  const statusDataAttr = `data-${status}`\n  const { getDocument } = useEnvironment()\n\n  useSafeLayoutEffect(() => {\n    const el = descendants.value(index)?.node\n    const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n    if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n  }, [descendants, getDocument, id, index])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-current\": current ? \"step\" : undefined,\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n          \"data-orientation\": orientation,\n          [statusDataAttr]: dataAttr(true),\n        },\n        rest,\n        props,\n        { ref: mergeRefs(ref, register) },\n      )(),\n    [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n  )\n\n  const getTitleProps: PropGetter<\"h3\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props) => ({\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [statusDataAttr],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({\n      \"data-orientation\": orientation,\n      role: \"separator\",\n      [statusDataAttr]: dataAttr(true),\n      ...props,\n    }),\n    [orientation, statusDataAttr],\n  )\n\n  return {\n    first,\n    index,\n    last,\n    status,\n    getDescriptionProps,\n    getIndicatorProps,\n    getRootProps,\n    getSeparatorProps,\n    getTitleProps,\n  }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}

package/dist/esm/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SwitchStyle } from \"./switch.style\"\nimport type { UseSwitchProps } from \"./use-switch\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isObject } from \"../../utils\"\nimport { switchStyle } from \"./switch.style\"\nimport { useSwitch } from \"./use-switch\"\n\nexport interface SwitchProps\n  extends\n    Merge<HTMLStyledProps<\"label\">, UseSwitchProps>,\n    ThemeProps<SwitchStyle> {\n  /**\n   * The switch icon to use.\n   */\n  icon?: ReactNode | { off: ReactNode; on: ReactNode }\n  /**\n   * Props for switch input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for switch label element.\n   */\n  labelProps?: HTMLStyledProps<\"span\">\n}\n\nconst {\n  PropsContext: SwitchPropsContext,\n  usePropsContext: useSwitchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<SwitchProps, SwitchStyle>(\"switch\", switchStyle)\n\nexport { SwitchPropsContext, useSwitchPropsContext }\n\n/**\n * `Switch` is a component used to toggle between on and off states.\n *\n * @see https://yamada-ui.com/docs/components/switch\n */\nexport const Switch = withProvider<\"input\", SwitchProps>(\n  ({ children, icon, inputProps, labelProps, ...props }) => {\n    const {\n      checked,\n      getInputProps,\n      getLabelProps,\n      getRootProps,\n      getThumbProps,\n      getTrackProps,\n    } = useSwitch(props)\n\n    return (\n      <styled.label {...getRootProps()}>\n        <styled.input data-peer {...getInputProps(inputProps)} />\n\n        <SwitchTrack {...getTrackProps()}>\n          <SwitchThumb {...getThumbProps()}>\n            {icon && isObject(icon) && \"on\" in icon\n              ? checked\n                ? icon.on\n                : icon.off\n              : icon}\n          </SwitchThumb>\n        </SwitchTrack>\n\n        {children ? (\n          <SwitchLabel {...getLabelProps(labelProps)}>{children}</SwitchLabel>\n        ) : null}\n      </styled.label>\n    )\n  },\n  \"root\",\n)()\n\ninterface SwitchThumbProps extends HTMLStyledProps {}\n\nconst SwitchThumb = withContext<\"div\", SwitchThumbProps>(\"div\", \"thumb\")()\n\ninterface SwitchTrackProps extends HTMLStyledProps {}\n\nconst SwitchTrack = withContext<\"div\", SwitchTrackProps>(\"div\", \"track\")()\n\ninterface SwitchLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst SwitchLabel = withContext<\"span\", SwitchLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;AA8BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,YAAY;;;;;;AASxE,MAAa,SAAS,cACnB,EAAE,UAAU,MAAM,YAAY,YAAY,GAAG,YAAY;CACxD,MAAM,EACJ,SACA,eACA,eACA,cACA,eACA,kBACE,UAAU,MAAM;CAEpB,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,cAAc;YAAhC;GACE,oBAAC,OAAO,OAAR;IAAc,aAAA;IAAU,GAAI,cAAc,WAAW;IAAI,CAAA;GAEzD,oBAAC,aAAD;IAAa,GAAI,eAAe;cAC9B,oBAAC,aAAD;KAAa,GAAI,eAAe;eAC7B,SAAA,GAAA,cAAA,UAAiB,KAAK,IAAI,QAAQ,OAC/B,UACE,KAAK,KACL,KAAK,MACP;KACQ,CAAA;IACF,CAAA;GAEb,WACC,oBAAC,aAAD;IAAa,GAAI,cAAc,WAAW;IAAG;IAAuB,CAAA,GAClE;GACS;;GAGnB,OACD,EAAE;AAIH,MAAM,cAAc,YAAqC,OAAO,QAAQ,EAAE;AAI1E,MAAM,cAAc,YAAqC,OAAO,QAAQ,EAAE;AAI1E,MAAM,cAAc,YAAsC,QAAQ,QAAQ,EAAE"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SwitchStyle } from \"./switch.style\"\nimport type { UseSwitchProps } from \"./use-switch\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isObject } from \"../../utils\"\nimport { switchStyle } from \"./switch.style\"\nimport { useSwitch } from \"./use-switch\"\n\nexport interface SwitchProps\n  extends\n    Merge<HTMLStyledProps<\"label\">, UseSwitchProps>,\n    ThemeProps<SwitchStyle> {\n  /**\n   * The switch icon to use.\n   */\n  icon?: ReactNode | { off: ReactNode; on: ReactNode }\n  /**\n   * Props for switch input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for switch label element.\n   */\n  labelProps?: HTMLStyledProps<\"span\">\n}\n\nconst {\n  PropsContext: SwitchPropsContext,\n  usePropsContext: useSwitchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<SwitchProps, SwitchStyle>(\"switch\", switchStyle)\n\nexport { SwitchPropsContext, useSwitchPropsContext }\n\n/**\n * `Switch` is a component used to toggle between on and off states.\n *\n * @see https://yamada-ui.com/docs/components/switch\n */\nexport const Switch = withProvider<\"input\", SwitchProps>(\n  ({ children, icon, inputProps, labelProps, ...props }) => {\n    const {\n      checked,\n      getInputProps,\n      getLabelProps,\n      getRootProps,\n      getThumbProps,\n      getTrackProps,\n    } = useSwitch(props)\n\n    return (\n      <styled.label {...getRootProps()}>\n        <styled.input data-peer {...getInputProps(inputProps)} />\n\n        <SwitchTrack {...getTrackProps()}>\n          <SwitchThumb {...getThumbProps()}>\n            {icon && isObject(icon) && \"on\" in icon\n              ? checked\n                ? icon.on\n                : icon.off\n              : icon}\n          </SwitchThumb>\n        </SwitchTrack>\n\n        {children ? (\n          <SwitchLabel {...getLabelProps(labelProps)}>{children}</SwitchLabel>\n        ) : null}\n      </styled.label>\n    )\n  },\n  \"root\",\n)()\n\ninterface SwitchThumbProps extends HTMLStyledProps {}\n\nconst SwitchThumb = withContext<\"div\", SwitchThumbProps>(\"div\", \"thumb\")()\n\ninterface SwitchTrackProps extends HTMLStyledProps {}\n\nconst SwitchTrack = withContext<\"div\", SwitchTrackProps>(\"div\", \"track\")()\n\ninterface SwitchLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst SwitchLabel = withContext<\"span\", SwitchLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;AA8BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,WAAW;;;;;;AASvE,MAAa,SAAS,cACnB,EAAE,UAAU,MAAM,YAAY,YAAY,GAAG,YAAY;CACxD,MAAM,EACJ,SACA,eACA,eACA,cACA,eACA,kBACE,UAAU,KAAK;CAEnB,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,aAAa;YAA/B;GACE,oBAAC,OAAO,OAAR;IAAc,aAAA;IAAU,GAAI,cAAc,UAAU;GAAI,CAAA;GAExD,oBAAC,aAAD;IAAa,GAAI,cAAc;cAC7B,oBAAC,aAAD;KAAa,GAAI,cAAc;eAC5B,SAAA,GAAA,cAAA,UAAiB,IAAI,KAAK,QAAQ,OAC/B,UACE,KAAK,KACL,KAAK,MACP;IACO,CAAA;GACF,CAAA;GAEZ,WACC,oBAAC,aAAD;IAAa,GAAI,cAAc,UAAU;IAAI;GAAsB,CAAA,IACjE;EACQ;;AAElB,GACA,MACF,EAAE;AAIF,MAAM,cAAc,YAAqC,OAAO,OAAO,EAAE;AAIzE,MAAM,cAAc,YAAqC,OAAO,OAAO,EAAE;AAIzE,MAAM,cAAc,YAAsC,QAAQ,OAAO,EAAE"}

package/dist/esm/components/switch/switch.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.style.js","names":[],"sources":["../../../../src/components/switch/switch.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const switchStyle = defineComponentSlotStyle({\n  base: {\n    label: {\n      userSelect: \"none\",\n    },\n    root: {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      gap: \"2\",\n      _readOnly: {\n        layerStyle: \"readOnly\",\n        pointerEvents: \"none\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    thumb: {\n      alignItems: \"center\",\n      bg: \"white\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      position: \"absolute\",\n      rounded: \"inherit\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, transform\",\n      _checked: {\n        transform: \"translateX(100%)\",\n      },\n    },\n    track: {\n      \"--focus-ring-color\": \"{colorScheme.outline}\",\n      alignItems: \"center\",\n      bg: \"bg.muted\",\n      boxSizing: \"content-box\",\n      display: \"inline-flex\",\n      flexShrink: 0,\n      position: \"relative\",\n      rounded: \"full\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background\",\n      _peerFocusVisible: {\n        ...focusRingStyle.outline,\n      },\n    },\n  },\n\n  variants: {\n    thin: {\n      thumb: {\n        boxShadow: \"2xl\",\n        _checked: {\n          bg: \"colorScheme.solid\",\n        },\n      },\n      track: {\n        \"--focus-ring-offset\": \"4px\",\n        _checked: {\n          bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n        },\n      },\n    },\n    thick: {\n      thumb: {\n        _checked: {\n          bg: \"colorScheme.contrast\",\n        },\n      },\n      track: {\n        p: \"1\",\n        _checked: {\n          bg: \"colorScheme.solid\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      label: { fontSize: \"sm\" },\n      thumb: { boxSize: \"3\" },\n      track: { w: \"6\" },\n    },\n    md: {\n      label: { fontSize: \"md\" },\n      thumb: { boxSize: \"4\" },\n      track: { w: \"8\" },\n    },\n    lg: {\n      label: { fontSize: \"lg\" },\n      thumb: { boxSize: \"5\" },\n      track: { w: \"10\" },\n    },\n  },\n\n  props: {\n    /**\n     * Change switch label from right to left.\n     *\n     * @default false\n     */\n    reverse: {\n      false: {\n        root: { flexDirection: \"row\" },\n      },\n      true: {\n        root: { flexDirection: \"row-reverse\" },\n      },\n    },\n    /**\n     * The shape of the switch.\n     *\n     * @default circle\n     */\n    shape: {\n      circle: {\n        track: { rounded: \"full\" },\n      },\n      rounded: {\n        thumb: { rounded: \"l1\" },\n        track: { rounded: \"l2\" },\n      },\n      square: {\n        track: { rounded: \"0\" },\n      },\n    },\n  },\n\n  compounds: [\n    {\n      css: {\n        track: { h: \"3\" },\n      },\n      size: \"sm\",\n      variant: \"thick\",\n    },\n    {\n      css: {\n        track: { h: \"4\" },\n      },\n      size: \"md\",\n      variant: \"thick\",\n    },\n    {\n      css: {\n        track: { h: \"5\" },\n      },\n      size: \"lg\",\n      variant: \"thick\",\n    },\n    {\n      css: {\n        track: { h: \"2\" },\n      },\n      size: \"sm\",\n      variant: \"thin\",\n    },\n    {\n      css: {\n        track: { h: \"3\" },\n      },\n      size: \"md\",\n      variant: \"thin\",\n    },\n    {\n      css: {\n        track: { h: \"4\" },\n      },\n      size: \"lg\",\n      variant: \"thin\",\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"thick\",\n    shape: \"circle\",\n  },\n})\n\nexport type SwitchStyle = typeof switchStyle\n"],"mappings":";;;AAEA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,OAAO,EACL,YAAY,QACb;EACD,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,KAAK;GACL,WAAW;IACT,YAAY;IACZ,eAAe;IAChB;GACD,WAAW,EACT,YAAY,YACb;GACF;EACD,OAAO;GACL,YAAY;GACZ,IAAI;GACJ,SAAS;GACT,gBAAgB;GAChB,UAAU;GACV,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,UAAU,EACR,WAAW,oBACZ;GACF;EACD,OAAO;GACL,sBAAsB;GACtB,YAAY;GACZ,IAAI;GACJ,WAAW;GACX,SAAS;GACT,YAAY;GACZ,UAAU;GACV,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,mBAAmB,EACjB,GAAG,eAAe,SACnB;GACF;EACF;CAED,UAAU;EACR,MAAM;GACJ,OAAO;IACL,WAAW;IACX,UAAU,EACR,IAAI,qBACL;IACF;GACD,OAAO;IACL,uBAAuB;IACvB,UAAU,EACR,IAAI,CAAC,qBAAqB,qBAAqB,EAChD;IACF;GACF;EACD,OAAO;GACL,OAAO,EACL,UAAU,EACR,IAAI,wBACL,EACF;GACD,OAAO;IACL,GAAG;IACH,UAAU,EACR,IAAI,qBACL;IACF;GACF;EACF;CAED,OAAO;EACL,IAAI;GACF,OAAO,EAAE,UAAU,MAAM;GACzB,OAAO,EAAE,SAAS,KAAK;GACvB,OAAO,EAAE,GAAG,KAAK;GAClB;EACD,IAAI;GACF,OAAO,EAAE,UAAU,MAAM;GACzB,OAAO,EAAE,SAAS,KAAK;GACvB,OAAO,EAAE,GAAG,KAAK;GAClB;EACD,IAAI;GACF,OAAO,EAAE,UAAU,MAAM;GACzB,OAAO,EAAE,SAAS,KAAK;GACvB,OAAO,EAAE,GAAG,MAAM;GACnB;EACF;CAED,OAAO;;;;;;EAML,SAAS;GACP,OAAO,EACL,MAAM,EAAE,eAAe,OAAO,EAC/B;GACD,MAAM,EACJ,MAAM,EAAE,eAAe,eAAe,EACvC;GACF;;;;;;EAMD,OAAO;GACL,QAAQ,EACN,OAAO,EAAE,SAAS,QAAQ,EAC3B;GACD,SAAS;IACP,OAAO,EAAE,SAAS,MAAM;IACxB,OAAO,EAAE,SAAS,MAAM;IACzB;GACD,QAAQ,EACN,OAAO,EAAE,SAAS,KAAK,EACxB;GACF;EACF;CAED,WAAW;EACT;GACE,KAAK,EACH,OAAO,EAAE,GAAG,KAAK,EAClB;GACD,MAAM;GACN,SAAS;GACV;EACD;GACE,KAAK,EACH,OAAO,EAAE,GAAG,KAAK,EAClB;GACD,MAAM;GACN,SAAS;GACV;EACD;GACE,KAAK,EACH,OAAO,EAAE,GAAG,KAAK,EAClB;GACD,MAAM;GACN,SAAS;GACV;EACD;GACE,KAAK,EACH,OAAO,EAAE,GAAG,KAAK,EAClB;GACD,MAAM;GACN,SAAS;GACV;EACD;GACE,KAAK,EACH,OAAO,EAAE,GAAG,KAAK,EAClB;GACD,MAAM;GACN,SAAS;GACV;EACD;GACE,KAAK,EACH,OAAO,EAAE,GAAG,KAAK,EAClB;GACD,MAAM;GACN,SAAS;GACV;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}
+{"version":3,"file":"switch.style.js","names":[],"sources":["../../../../src/components/switch/switch.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const switchStyle = defineComponentSlotStyle({\n  base: {\n    label: {\n      userSelect: \"none\",\n    },\n    root: {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      gap: \"2\",\n      _readOnly: {\n        layerStyle: \"readOnly\",\n        pointerEvents: \"none\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n    },\n    thumb: {\n      alignItems: \"center\",\n      bg: \"white\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      position: \"absolute\",\n      rounded: \"inherit\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background, transform\",\n      _checked: {\n        transform: \"translateX(100%)\",\n      },\n    },\n    track: {\n      \"--focus-ring-color\": \"{colorScheme.outline}\",\n      alignItems: \"center\",\n      bg: \"bg.muted\",\n      boxSizing: \"content-box\",\n      display: \"inline-flex\",\n      flexShrink: 0,\n      position: \"relative\",\n      rounded: \"full\",\n      transitionDuration: \"fast\",\n      transitionProperty: \"background\",\n      _peerFocusVisible: {\n        ...focusRingStyle.outline,\n      },\n    },\n  },\n\n  variants: {\n    thin: {\n      thumb: {\n        boxShadow: \"2xl\",\n        _checked: {\n          bg: \"colorScheme.solid\",\n        },\n      },\n      track: {\n        \"--focus-ring-offset\": \"4px\",\n        _checked: {\n          bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n        },\n      },\n    },\n    thick: {\n      thumb: {\n        _checked: {\n          bg: \"colorScheme.contrast\",\n        },\n      },\n      track: {\n        p: \"1\",\n        _checked: {\n          bg: \"colorScheme.solid\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      label: { fontSize: \"sm\" },\n      thumb: { boxSize: \"3\" },\n      track: { w: \"6\" },\n    },\n    md: {\n      label: { fontSize: \"md\" },\n      thumb: { boxSize: \"4\" },\n      track: { w: \"8\" },\n    },\n    lg: {\n      label: { fontSize: \"lg\" },\n      thumb: { boxSize: \"5\" },\n      track: { w: \"10\" },\n    },\n  },\n\n  props: {\n    /**\n     * Change switch label from right to left.\n     *\n     * @default false\n     */\n    reverse: {\n      false: {\n        root: { flexDirection: \"row\" },\n      },\n      true: {\n        root: { flexDirection: \"row-reverse\" },\n      },\n    },\n    /**\n     * The shape of the switch.\n     *\n     * @default circle\n     */\n    shape: {\n      circle: {\n        track: { rounded: \"full\" },\n      },\n      rounded: {\n        thumb: { rounded: \"l1\" },\n        track: { rounded: \"l2\" },\n      },\n      square: {\n        track: { rounded: \"0\" },\n      },\n    },\n  },\n\n  compounds: [\n    {\n      css: {\n        track: { h: \"3\" },\n      },\n      size: \"sm\",\n      variant: \"thick\",\n    },\n    {\n      css: {\n        track: { h: \"4\" },\n      },\n      size: \"md\",\n      variant: \"thick\",\n    },\n    {\n      css: {\n        track: { h: \"5\" },\n      },\n      size: \"lg\",\n      variant: \"thick\",\n    },\n    {\n      css: {\n        track: { h: \"2\" },\n      },\n      size: \"sm\",\n      variant: \"thin\",\n    },\n    {\n      css: {\n        track: { h: \"3\" },\n      },\n      size: \"md\",\n      variant: \"thin\",\n    },\n    {\n      css: {\n        track: { h: \"4\" },\n      },\n      size: \"lg\",\n      variant: \"thin\",\n    },\n  ],\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"thick\",\n    shape: \"circle\",\n  },\n})\n\nexport type SwitchStyle = typeof switchStyle\n"],"mappings":";;;AAEA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,OAAO,EACL,YAAY,OACd;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,SAAS;GACT,KAAK;GACL,WAAW;IACT,YAAY;IACZ,eAAe;GACjB;GACA,WAAW,EACT,YAAY,WACd;EACF;EACA,OAAO;GACL,YAAY;GACZ,IAAI;GACJ,SAAS;GACT,gBAAgB;GAChB,UAAU;GACV,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,UAAU,EACR,WAAW,mBACb;EACF;EACA,OAAO;GACL,sBAAsB;GACtB,YAAY;GACZ,IAAI;GACJ,WAAW;GACX,SAAS;GACT,YAAY;GACZ,UAAU;GACV,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,mBAAmB,EACjB,GAAG,eAAe,QACpB;EACF;CACF;CAEA,UAAU;EACR,MAAM;GACJ,OAAO;IACL,WAAW;IACX,UAAU,EACR,IAAI,oBACN;GACF;GACA,OAAO;IACL,uBAAuB;IACvB,UAAU,EACR,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;GACF;EACF;EACA,OAAO;GACL,OAAO,EACL,UAAU,EACR,IAAI,uBACN,EACF;GACA,OAAO;IACL,GAAG;IACH,UAAU,EACR,IAAI,oBACN;GACF;EACF;CACF;CAEA,OAAO;EACL,IAAI;GACF,OAAO,EAAE,UAAU,KAAK;GACxB,OAAO,EAAE,SAAS,IAAI;GACtB,OAAO,EAAE,GAAG,IAAI;EAClB;EACA,IAAI;GACF,OAAO,EAAE,UAAU,KAAK;GACxB,OAAO,EAAE,SAAS,IAAI;GACtB,OAAO,EAAE,GAAG,IAAI;EAClB;EACA,IAAI;GACF,OAAO,EAAE,UAAU,KAAK;GACxB,OAAO,EAAE,SAAS,IAAI;GACtB,OAAO,EAAE,GAAG,KAAK;EACnB;CACF;CAEA,OAAO;;;;;;EAML,SAAS;GACP,OAAO,EACL,MAAM,EAAE,eAAe,MAAM,EAC/B;GACA,MAAM,EACJ,MAAM,EAAE,eAAe,cAAc,EACvC;EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,OAAO,EAAE,SAAS,OAAO,EAC3B;GACA,SAAS;IACP,OAAO,EAAE,SAAS,KAAK;IACvB,OAAO,EAAE,SAAS,KAAK;GACzB;GACA,QAAQ,EACN,OAAO,EAAE,SAAS,IAAI,EACxB;EACF;CACF;CAEA,WAAW;EACT;GACE,KAAK,EACH,OAAO,EAAE,GAAG,IAAI,EAClB;GACA,MAAM;GACN,SAAS;EACX;EACA;GACE,KAAK,EACH,OAAO,EAAE,GAAG,IAAI,EAClB;GACA,MAAM;GACN,SAAS;EACX;EACA;GACE,KAAK,EACH,OAAO,EAAE,GAAG,IAAI,EAClB;GACA,MAAM;GACN,SAAS;EACX;EACA;GACE,KAAK,EACH,OAAO,EAAE,GAAG,IAAI,EAClB;GACA,MAAM;GACN,SAAS;EACX;EACA;GACE,KAAK,EACH,OAAO,EAAE,GAAG,IAAI,EAClB;GACA,MAAM;GACN,SAAS;EACX;EACA;GACE,KAAK,EACH,OAAO,EAAE,GAAG,IAAI,EAClB;GACA,MAAM;GACN,SAAS;EACX;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;CACT;AACF,CAAC"}

package/dist/esm/components/switch/use-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-switch.js","names":[],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        { htmlFor: id, \"data-checked\": dataAttr(checked) },\n        rest,\n        props,\n      )(),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const mergedProps = mergeProps(\n        ariaProps,\n        dataProps,\n        {\n          id,\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          checked,\n          disabled,\n          readOnly,\n          required,\n          role: \"switch\",\n          tabIndex: interactive ? 0 : -1,\n          value,\n        },\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n        props,\n        { onChange, onKeyDown },\n      )({ mergeRef: false })\n\n      return {\n        ...mergedProps,\n        ref: mergeRefs(inputRef, props.ref, ref),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;AAqEA,MAAa,aACX,QAA2B,EAAE,KAC1B;CACH,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,MAAM;CACxB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;EACR,CAAC;CAEF,MAAM,WAAW,aACd,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAO,GAAG,gBAAgB;EAE5C,WAAW,GAAG,OAAO,QAAQ;EAC7B,eAAe,GAAG;IAEpB;EAAC;EAAc;EAAY;EAAY,CACxC;CAED,MAAM,YAAY,aACf,OAAwC;EACvC,IAAI,eAAe,gBAAgB,GAAG,QAAQ,SAC5C,SAAS,SAAS,OAAO;IAE7B,CAAC,aAAa,aAAa,CAC5B;CAED,MAAM,eAAoC,aACvC,QAAQ,EAAE,KACT,WACE,WACA;EAAE,SAAS;EAAI,iBAAA,GAAA,cAAA,UAAyB,QAAQ;EAAE,EAClD,MACA,MACD,EAAE,EACL;EAAC;EAAS;EAAM;EAAI;EAAU,CAC/B;CAED,MAAM,gBAA4B,aAC/B,QAAQ,EAAE,KACT,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,UAAyB,QAAQ,EAAE,EAAE,MAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;CAED,MAAM,gBAA4B,aAC/B,QAAQ,EAAE,KACT,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,UAAyB,QAAQ,EAAE,EAAE,MAAM,EAAE,EACvE,CAAC,SAAS,UAAU,CACrB;CAsDD,OAAO;EACL;EACA,eAtDyC,aACxC,QAAQ,EAAE,KAAK;GAsBd,OAAO;IACL,GAtBkB,WAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAO,yBAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;KACD,EACD;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;KAAS,EAC1D,OACA;KAAE;KAAU;KAAW,CACxB,CAAC,EAAE,UAAU,OAAO,CAGL;IACd,KAAK,UAAU,UAAU,MAAM,KAAK,IAAI;IACzC;KAEH;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAWY;EACb,eATwC,aACvC,QAAQ,EAAE,KACT,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,UAAyB,QAAQ,EAAE,EAAE,MAAM,EAAE,EACvE,CAAC,WAAW,QAAQ,CAMP;EACb;EACA;EACA;EACD"}
+{"version":3,"file":"use-switch.js","names":[],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEventHandler,\n  KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number | string = string>\n  extends\n    Omit<HTMLProps<\"label\">, \"onBlur\" | \"onChange\" | \"onFocus\" | \"ref\">,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, the switch will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the switch will be checked when the Enter key is pressed.\n   *\n   * @default true\n   */\n  checkOnEnter?: boolean\n  /**\n   * If `true`, the switch will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The tab-index property of the underlying input element.\n   */\n  tabIndex?: number\n  /**\n   * The value to be used in the switch input.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the switch is blurred.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * The callback invoked when the switch is focused.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number | string = string>(\n  props: UseSwitchProps<Y> = {},\n) => {\n  const uuid = useId()\n  const {\n    props: {\n      id = uuid,\n      ref,\n      name,\n      checked: checkedProp,\n      checkOnEnter = true,\n      defaultChecked = false,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onChange: onChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const interactive = !(readOnly || disabled)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [checked, setChecked] = useControllableState({\n    defaultValue: defaultChecked,\n    value: checkedProp,\n  })\n\n  const onChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!interactive) return ev.preventDefault()\n\n      setChecked(ev.target.checked)\n      onChangeProp?.(ev)\n    },\n    [onChangeProp, setChecked, interactive],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (interactive && checkOnEnter && ev.key === \"Enter\")\n        inputRef.current?.click()\n    },\n    [interactive, checkOnEnter],\n  )\n\n  const getRootProps: PropGetter<\"label\"> = useCallback(\n    (props = {}) =>\n      mergeProps(\n        dataProps,\n        { htmlFor: id, \"data-checked\": dataAttr(checked) },\n        rest,\n        props,\n      )(),\n    [checked, rest, id, dataProps],\n  )\n\n  const getTrackProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getThumbProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [checked, dataProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}) => {\n      const mergedProps = mergeProps(\n        ariaProps,\n        dataProps,\n        {\n          id,\n          type: \"checkbox\",\n          name,\n          style: visuallyHiddenAttributes.style,\n          checked,\n          disabled,\n          readOnly,\n          required,\n          role: \"switch\",\n          tabIndex: interactive ? 0 : -1,\n          value,\n        },\n        { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n        props,\n        { onChange, onKeyDown },\n      )({ mergeRef: false })\n\n      return {\n        ...mergedProps,\n        ref: mergeRefs(inputRef, props.ref, ref),\n      }\n    },\n    [\n      ariaProps,\n      dataProps,\n      id,\n      name,\n      checked,\n      disabled,\n      readOnly,\n      required,\n      interactive,\n      value,\n      ref,\n      eventProps,\n      onChange,\n      onKeyDown,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) =>\n      mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n    [dataProps, checked],\n  )\n\n  return {\n    checked,\n    getInputProps,\n    getLabelProps,\n    getRootProps,\n    getThumbProps,\n    getTrackProps,\n  }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;AAqEA,MAAa,aACX,QAA2B,CAAC,MACzB;CACH,MAAM,OAAO,MAAM;CACnB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;CACT,CAAC;CAED,MAAM,WAAW,aACd,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAO,GAAG,eAAe;EAE3C,WAAW,GAAG,OAAO,OAAO;EAC5B,eAAe,EAAE;CACnB,GACA;EAAC;EAAc;EAAY;CAAW,CACxC;CAEA,MAAM,YAAY,aACf,OAAwC;EACvC,IAAI,eAAe,gBAAgB,GAAG,QAAQ,SAC5C,SAAS,SAAS,MAAM;CAC5B,GACA,CAAC,aAAa,YAAY,CAC5B;CAEA,MAAM,eAAoC,aACvC,QAAQ,CAAC,MACR,WACE,WACA;EAAE,SAAS;EAAI,iBAAA,GAAA,cAAA,UAAyB,OAAO;CAAE,GACjD,MACA,KACF,EAAE,GACJ;EAAC;EAAS;EAAM;EAAI;CAAS,CAC/B;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,UAAyB,OAAO,EAAE,GAAG,KAAK,EAAE,GACtE,CAAC,SAAS,SAAS,CACrB;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,UAAyB,OAAO,EAAE,GAAG,KAAK,EAAE,GACtE,CAAC,SAAS,SAAS,CACrB;CAsDA,OAAO;EACL;EACA,eAtDyC,aACxC,QAAQ,CAAC,MAAM;GAsBd,OAAO;IACL,GAtBkB,WAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAO,yBAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;IACF,GACA;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;IAAQ,GACzD,OACA;KAAE;KAAU;IAAU,CACxB,EAAE,EAAE,UAAU,MAAM,CAGL;IACb,KAAK,UAAU,UAAU,MAAM,KAAK,GAAG;GACzC;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAWY;EACZ,eATwC,aACvC,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAA,cAAA,UAAyB,OAAO,EAAE,GAAG,KAAK,EAAE,GACtE,CAAC,WAAW,OAAO,CAMP;EACZ;EACA;EACA;CACF;AACF"}