@jbpark/ui-kit 4.0.0 → 5.0.0

package/dist/Button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;;;KAQK,WAAA,GAAc,OAAA;AAAA,KAEd,YAAA;AAAA,UAeY,KAAA,SAAc,IAAA,CAAK,WAAA;EAClC,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,KAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EAtB6B;AAAA;;;;EA4B7B,IAAA;EACA,OAAA;EAZqB;;;;;EAkBrB,QAAA;EACA,KAAA;EACA,KAAA,GAAQ,YAAA;EACR,OAAA;IAAsB,IAAA,EAAM,KAAA,CAAM,SAAA;EAAA;AAAA;AAAA,cAkD9B,MAAA;EAAU,IAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,QAAA;EAAA,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA,GAAA;AAAA,GAgBb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;;;KASK,WAAA,GAAc,OAAA;AAAA,KAEd,YAAA;AAAA,UAeY,KAAA,SAAc,IAAA,CAAK,WAAA;EAClC,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,KAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EAtB6B;AAAA;;;;EA4B7B,IAAA;EACA,OAAA;EAZqB;;;;;EAkBrB,QAAA;EACA,KAAA;EACA,KAAA,GAAQ,YAAA;EACR,OAAA;IAAsB,IAAA,EAAM,KAAA,CAAM,SAAA;EAAA;AAAA;AAAA,cAkD9B,MAAA;EAAU,IAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,QAAA;EAAA,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA,GAAA;AAAA,GAgBb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Button.mjs

@@ -2,6 +2,7 @@
 
 import { cn } from "./utils.mjs";
 import { Button as Button$1 } from "./core/button.mjs";
+import { useConfig } from "./providers/config/context.mjs";
 import { LoaderCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -37,7 +38,11 @@ const shapesClasses = {
 	circle: "rounded-full",
 	round: "rounded-2xl"
 };
-const Button = ({ icon, className, type = "default", variant, htmlType = "button", size = "middle", color = "default", shape = "default", block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
+const Button = ({ icon, className, type = "default", variant, htmlType = "button", size, color = "default", shape, block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
+	const { componentSize, defaultProps } = useConfig();
+	const buttonDefaults = defaultProps?.button;
+	const resolvedSize = size ?? componentSize ?? "middle";
+	const resolvedShape = shape ?? buttonDefaults?.shape ?? "default";
 	const iconOnly = icon && !children;
 	const computedColor = danger ? "danger" : color;
 	const colored = computedColor && computedColor !== "default";
@@ -50,7 +55,7 @@ const Button = ({ icon, className, type = "default", variant, htmlType = "button
 		"aria-busy": isLoading,
 		variant: "default",
 		"data-color": computedColor,
-		className: cn("inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", "transition-all", variantClasses[resolvedVariant], sizesClasses[size], iconOnly && ["p-0", iconClasses[size]], shapesClasses[shape || "default"], block && "w-full", colored && (resolvedVariant === "solid" ? [
+		className: cn("inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", "transition-all", variantClasses[resolvedVariant], sizesClasses[resolvedSize], iconOnly && ["p-0", iconClasses[resolvedSize]], shapesClasses[resolvedShape], block && "w-full", colored && (resolvedVariant === "solid" ? [
 			"bg-(--btn-bg)",
 			"hover:bg-(--btn-bg-hover)",
 			"active:bg-(--btn-bg-active)",

package/dist/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  /**\n   * antd-style visual preset. Maps to a `variant` internally — passing\n   * both `type` and `variant` lets `variant` win, so it can override the\n   * preset for one-off cases without needing every value duplicated here.\n   */\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  /**\n   * Native `<button>` `type` (`button`/`submit`/`reset`), kept separate\n   * from the antd-style `type` above. Defaults to `'button'` so a Button\n   * placed inside a `<form>` doesn't submit it unless explicitly opted in.\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  shape?: 'default' | 'circle' | 'round';\n  color?: PresetColors | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n  solid: '',\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type = 'default',\n  variant,\n  htmlType = 'button',\n  size = 'middle',\n  color = 'default',\n  shape = 'default',\n  block = false,\n  disabled,\n  loading,\n  danger,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n  const isLoading = !!loading;\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Core\n      type={htmlType}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      variant=\"default\"\n      data-color={computedColor}\n      className={cn(\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[size],\n        iconOnly && ['p-0', iconClasses[size]],\n        shapesClasses[shape || 'default'],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;AAOA,MAAM,OAAOA;AA0Cb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,yEACA,iCACA,kBACD;CACD,QAAQ,GACN,uFACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;CACP;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,OAAO,WACP,SACA,WAAW,UACX,OAAO,UACP,QAAQ,WACR,QAAQ,WACR,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAC1D,MAAM,YAAY,CAAC,CAAC;CAEpB,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,gBAAa,WAAU,iBAAiB,GAG3C;AAGF,QACE,qBAAC;EACC,MAAM;EACN,UAAU,YAAY;EACtB,aAAW;EACX,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,OACb,YAAY,CAAC,OAAO,YAAY,MAAM,EACtC,cAAc,SAAS,YACvB,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,iEAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}
+{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  /**\n   * antd-style visual preset. Maps to a `variant` internally — passing\n   * both `type` and `variant` lets `variant` win, so it can override the\n   * preset for one-off cases without needing every value duplicated here.\n   */\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  /**\n   * Native `<button>` `type` (`button`/`submit`/`reset`), kept separate\n   * from the antd-style `type` above. Defaults to `'button'` so a Button\n   * placed inside a `<form>` doesn't submit it unless explicitly opted in.\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  shape?: 'default' | 'circle' | 'round';\n  color?: PresetColors | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n  solid: '',\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type = 'default',\n  variant,\n  htmlType = 'button',\n  size,\n  color = 'default',\n  shape,\n  block = false,\n  disabled,\n  loading,\n  danger,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const { componentSize, defaultProps } = useConfig();\n  const buttonDefaults = defaultProps?.button as\n    | Partial<Pick<Props, 'shape'>>\n    | undefined;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const resolvedShape = shape ?? buttonDefaults?.shape ?? 'default';\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n  const isLoading = !!loading;\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Core\n      type={htmlType}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      variant=\"default\"\n      data-color={computedColor}\n      className={cn(\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[resolvedSize],\n        iconOnly && ['p-0', iconClasses[resolvedSize]],\n        shapesClasses[resolvedShape],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;AAQA,MAAM,OAAOA;AA0Cb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,yEACA,iCACA,kBACD;CACD,QAAQ,GACN,uFACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;CACP;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,OAAO,WACP,SACA,WAAW,UACX,MACA,QAAQ,WACR,OACA,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,EAAE,eAAe,iBAAiB,WAAW;CACnD,MAAM,iBAAiB,cAAc;CAGrC,MAAM,eAAe,QAAQ,iBAAiB;CAC9C,MAAM,gBAAgB,SAAS,gBAAgB,SAAS;CACxD,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAC1D,MAAM,YAAY,CAAC,CAAC;CAEpB,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,gBAAa,WAAU,iBAAiB,GAG3C;AAGF,QACE,qBAAC;EACC,MAAM;EACN,UAAU,YAAY;EACtB,aAAW;EACX,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,eACb,YAAY,CAAC,OAAO,YAAY,cAAc,EAC9C,cAAc,gBACd,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,iEAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}

package/dist/components/atoms/float-button/back-top.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from "../../../utils.mjs";
-import { DEFAULT_LOCALE, useConfig } from "../../../providers/Config/context.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import FloatButton from "./float-button.mjs";
 import { ArrowUp } from "lucide-react";
 import { useRef } from "react";

package/dist/components/atoms/input/search.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../../utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import { input_exports } from "../../../core/input.mjs";
 import Button from "../../../Button.mjs";
-import { DEFAULT_LOCALE, useConfig } from "../../../providers/Config/context.mjs";
 import { CircleX, Search } from "lucide-react";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/atoms/skeleton/skeleton.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../../utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import { skeleton_exports } from "../../../core/skeleton.mjs";
-import { DEFAULT_LOCALE, useConfig } from "../../../providers/Config/context.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/atoms/skeleton/skeleton.tsx

package/dist/components/atoms/spin.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from "../../utils.mjs";
-import { DEFAULT_LOCALE, useConfig } from "../../providers/Config/context.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
 import { Loader2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/components/organisms/drawer.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn, renderConditional } from "../../utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
 import { drawer_exports } from "../../core/drawer.mjs";
 import Button from "../../Button.mjs";
-import { DEFAULT_LOCALE, useConfig } from "../../providers/Config/context.mjs";
 import { X } from "lucide-react";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/templates/layout/sider.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from "../../../utils.mjs";
-import { DEFAULT_LOCALE, useConfig } from "../../../providers/Config/context.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import { useRegisterSider } from "./sider-context.mjs";
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { useId, useLayoutEffect } from "react";

package/dist/core/dialog.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.mts","names":[],"sources":["../../src/core/dialog.tsx"],"mappings":";;;;;;;;iBAWS,MAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI3C,aAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI7C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAe7C,kBAAA;EACR,UAAA,GAAa,MAAA;EACb,SAAA,GAAY,OAAA,CAAM,SAAA;EAClB,QAAA;IAAuB,QAAA;EAAA;EACvB,SAAA,GAAY,WAAA;AAAA;AAAA,iBAGL,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,UAAA;EACA,SAAA,EAAW,UAAA;EACX,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAW,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyCnE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,YAAA,CAAA;EACP,SAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA;EACP,eAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBQ,WAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,WAAA,IAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"dialog.d.mts","names":[],"sources":["../../src/core/dialog.tsx"],"mappings":";;;;;;;;iBAYS,MAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI3C,aAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI7C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAe7C,kBAAA;EACR,UAAA,GAAa,MAAA;EACb,SAAA,GAAY,OAAA,CAAM,SAAA;EAClB,QAAA;IAAuB,QAAA;EAAA;EACvB,SAAA,GAAY,WAAA;AAAA;AAAA,iBAGL,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,UAAA;EACA,SAAA,EAAW,UAAA;EACX,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,IAAW,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA4CnE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,YAAA,CAAA;EACP,SAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA;EACP,eAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoBQ,WAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,WAAA,IAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/dialog.mjs

@@ -2,6 +2,7 @@
 
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
+import { useConfig } from "../providers/config/context.mjs";
 import Button from "../Button.mjs";
 import { XIcon } from "lucide-react";
 import "react";
@@ -55,6 +56,8 @@ function DialogOverlay({ className, ...props }) {
 	});
 }
 function DialogContent({ className, children, classNames, closeIcon: _closeIcon, closable, container, ...props }) {
+	const { getContainer } = useConfig();
+	const resolvedContainer = container ?? getContainer();
 	const closeIcon = /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
 		"data-slot": "dialog-close",
 		className: "ring-offset-background focus:ring-ring\n        data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\n        absolute top-4 right-4 rounded-xs opacity-70 transition-opacity\n        hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n        disabled:pointer-events-none [&_svg]:pointer-events-none\n        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -66,7 +69,7 @@ function DialogContent({ className, children, classNames, closeIcon: _closeIcon,
 	});
 	return /* @__PURE__ */ jsxs(DialogPortal, {
 		"data-slot": "dialog-portal",
-		container,
+		container: resolvedContainer,
 		children: [/* @__PURE__ */ jsx(DialogOverlay, { className: cn(classNames?.mask) }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 			"data-slot": "dialog-content",
 			className: cn(`bg-background data-[state=open]:animate-in

package/dist/core/dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.mjs","names":[],"sources":["../../src/core/dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { XIcon } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../components/atoms/button';\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        `data-[state=open]:animate-in data-[state=closed]:animate-out\n        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0\n        z-50 bg-black/50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  closeIcon?: React.ReactNode;\n  closable?: boolean | { disabled?: boolean };\n  container?: HTMLElement;\n}\n\nfunction DialogContent({\n  className,\n  children,\n  classNames,\n  closeIcon: _closeIcon,\n  closable,\n  container,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & CustomContentProps) {\n  const closeIcon = (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className=\"ring-offset-background focus:ring-ring\n        data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\n        absolute top-4 right-4 rounded-xs opacity-70 transition-opacity\n        hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n        disabled:pointer-events-none [&_svg]:pointer-events-none\n        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n      disabled={typeof closable === 'object' && closable.disabled}\n    >\n      {_closeIcon || <XIcon />}\n      <span className=\"sr-only\">Close</span>\n    </DialogPrimitive.Close>\n  );\n\n  return (\n    <DialogPortal data-slot=\"dialog-portal\" container={container}>\n      <DialogOverlay className={cn(classNames?.mask)} />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          `bg-background data-[state=open]:animate-in\n          data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95\n          data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid\n          w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]\n          gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none\n          sm:max-w-lg`,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {closable && closeIcon}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outlined\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWA,SAAS,OAAO,EACd,GAAG,SACiD;AACpD,QAAO,oBAAC,gBAAgB;EAAK,aAAU;EAAS,GAAI;GAAS;;AAG/D,SAAS,cAAc,EACrB,GAAG,SACoD;AACvD,QAAO,oBAAC,gBAAgB;EAAQ,aAAU;EAAiB,GAAI;GAAS;;AAG1E,SAAS,aAAa,EACpB,GAAG,SACmD;AACtD,QAAO,oBAAC,gBAAgB;EAAO,aAAU;EAAgB,GAAI;GAAS;;AAGxE,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAAC,gBAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GACT;;2BAGA,UACD;EACD,GAAI;GACJ;;AAWN,SAAS,cAAc,EACrB,WACA,UACA,YACA,WAAW,YACX,UACA,WACA,GAAG,SACyE;CAC5E,MAAM,YACJ,qBAAC,gBAAgB;EACf,aAAU;EACV,WAAU;EAMV,UAAU,OAAO,aAAa,YAAY,SAAS;aAElD,cAAc,oBAAC,UAAQ,EACxB,oBAAC;GAAK,WAAU;aAAU;IAAY;GAChB;AAG1B,QACE,qBAAC;EAAa,aAAU;EAA2B;aACjD,oBAAC,iBAAc,WAAW,GAAG,YAAY,KAAK,GAAI,EAClD,qBAAC,gBAAgB;GACf,aAAU;GACV,WAAW,GACT;;;;;;wBAOA,UACD;GACD,GAAI;cAEH,UACA,YAAY;IACW;GACb;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,gDAAgD,UAAU;EACxE,GAAI;GACJ;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;AACD,QACE,qBAAC;EACC,aAAU;EACV,WAAW,GACT,0DACA,UACD;EACD,GAAI;aAEH,UACA,mBACC,oBAAC,gBAAgB;GAAM;aACrB,oBAAC;IAAO,SAAQ;cAAW;KAAc;IACnB;GAEtB;;AAIV,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;GACJ;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ"}
+{"version":3,"file":"dialog.mjs","names":[],"sources":["../../src/core/dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { XIcon } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../components/atoms/button';\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        `data-[state=open]:animate-in data-[state=closed]:animate-out\n        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0\n        z-50 bg-black/50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  closeIcon?: React.ReactNode;\n  closable?: boolean | { disabled?: boolean };\n  container?: HTMLElement;\n}\n\nfunction DialogContent({\n  className,\n  children,\n  classNames,\n  closeIcon: _closeIcon,\n  closable,\n  container,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & CustomContentProps) {\n  const { getContainer } = useConfig();\n  const resolvedContainer = container ?? getContainer();\n\n  const closeIcon = (\n    <DialogPrimitive.Close\n      data-slot=\"dialog-close\"\n      className=\"ring-offset-background focus:ring-ring\n        data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\n        absolute top-4 right-4 rounded-xs opacity-70 transition-opacity\n        hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n        disabled:pointer-events-none [&_svg]:pointer-events-none\n        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n      disabled={typeof closable === 'object' && closable.disabled}\n    >\n      {_closeIcon || <XIcon />}\n      <span className=\"sr-only\">Close</span>\n    </DialogPrimitive.Close>\n  );\n\n  return (\n    <DialogPortal data-slot=\"dialog-portal\" container={resolvedContainer}>\n      <DialogOverlay className={cn(classNames?.mask)} />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          `bg-background data-[state=open]:animate-in\n          data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95\n          data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid\n          w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]\n          gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none\n          sm:max-w-lg`,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {closable && closeIcon}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<'div'> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outlined\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn('text-lg leading-none font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYA,SAAS,OAAO,EACd,GAAG,SACiD;AACpD,QAAO,oBAAC,gBAAgB;EAAK,aAAU;EAAS,GAAI;GAAS;;AAG/D,SAAS,cAAc,EACrB,GAAG,SACoD;AACvD,QAAO,oBAAC,gBAAgB;EAAQ,aAAU;EAAiB,GAAI;GAAS;;AAG1E,SAAS,aAAa,EACpB,GAAG,SACmD;AACtD,QAAO,oBAAC,gBAAgB;EAAO,aAAU;EAAgB,GAAI;GAAS;;AAGxE,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAAC,gBAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GACT;;2BAGA,UACD;EACD,GAAI;GACJ;;AAWN,SAAS,cAAc,EACrB,WACA,UACA,YACA,WAAW,YACX,UACA,WACA,GAAG,SACyE;CAC5E,MAAM,EAAE,iBAAiB,WAAW;CACpC,MAAM,oBAAoB,aAAa,cAAc;CAErD,MAAM,YACJ,qBAAC,gBAAgB;EACf,aAAU;EACV,WAAU;EAMV,UAAU,OAAO,aAAa,YAAY,SAAS;aAElD,cAAc,oBAAC,UAAQ,EACxB,oBAAC;GAAK,WAAU;aAAU;IAAY;GAChB;AAG1B,QACE,qBAAC;EAAa,aAAU;EAAgB,WAAW;aACjD,oBAAC,iBAAc,WAAW,GAAG,YAAY,KAAK,GAAI,EAClD,qBAAC,gBAAgB;GACf,aAAU;GACV,WAAW,GACT;;;;;;wBAOA,UACD;GACD,GAAI;cAEH,UACA,YAAY;IACW;GACb;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,gDAAgD,UAAU;EACxE,GAAI;GACJ;;AAIN,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;AACD,QACE,qBAAC;EACC,aAAU;EACV,WAAW,GACT,0DACA,UACD;EACD,GAAI;aAEH,UACA,mBACC,oBAAC,gBAAgB;GAAM;aACrB,oBAAC;IAAO,SAAQ;cAAW;KAAc;IACnB;GAEtB;;AAIV,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,sCAAsC,UAAU;EAC9D,GAAI;GACJ;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ"}

package/dist/core/drawer.d.mts

@@ -11,6 +11,7 @@ interface CustomProps {
 }
 declare function Drawer$1({
   draggable,
+  container,
   ...props
 }: React$1.ComponentProps<typeof Drawer.Root> & CustomProps): react_jsx_runtime0.JSX.Element;
 declare function DrawerTrigger({

package/dist/core/drawer.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.mts","names":[],"sources":["../../src/core/drawer.tsx"],"mappings":";;;;;;;;UAQU,WAAA;EACR,SAAA;AAAA;AAAA,iBAGO,QAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,IAAA,IAAQ,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUzD,aAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI7C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAe7C,kBAAA;EACR,UAAA,GAAa,MAAA;EACb,SAAA;EACA,IAAA;AAAA;AAAA,iBAGO,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,UAAA;EACA,SAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA,IAAW,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA2DnE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgBjE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,WAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,WAAA,IAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"drawer.d.mts","names":[],"sources":["../../src/core/drawer.tsx"],"mappings":";;;;;;;;UASU,WAAA;EACR,SAAA;AAAA;AAAA,iBAGO,QAAA,CAAA;EACP,SAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,IAAA,IAAQ,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAazD,aAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,YAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI7C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,aAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAe7C,kBAAA;EACR,UAAA,GAAa,MAAA;EACb,SAAA;EACA,IAAA;AAAA;AAAA,iBAGO,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,UAAA;EACA,SAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA,IAAW,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA2DnE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgBjE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUjE,WAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,iBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,WAAA,IAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/drawer.mjs

@@ -2,6 +2,7 @@
 
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
+import { useConfig } from "../providers/config/context.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "vaul";
@@ -19,10 +20,12 @@ var drawer_exports = /* @__PURE__ */ __exportAll({
 	DrawerTitle: () => DrawerTitle,
 	DrawerTrigger: () => DrawerTrigger
 });
-function Drawer$1({ draggable, ...props }) {
+function Drawer$1({ draggable, container, ...props }) {
+	const { getContainer } = useConfig();
 	return /* @__PURE__ */ jsx(Drawer.Root, {
 		"data-slot": "drawer",
 		handleOnly: !draggable,
+		container: container ?? getContainer(),
 		...props
 	});
 }

package/dist/core/drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.mjs","names":["Drawer","DrawerPrimitive"],"sources":["../../src/core/drawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Drawer as DrawerPrimitive } from 'vaul';\n\nimport { cn } from '@repo/ui/utils';\n\ninterface CustomProps {\n  draggable?: boolean;\n}\n\nfunction Drawer({\n  draggable,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root> & CustomProps) {\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      handleOnly={!draggable}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        `data-[state=open]:animate-in data-[state=closed]:animate-out\n        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0\n        z-50 bg-black/50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  handlebar?: boolean;\n  mask?: boolean;\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  classNames = {},\n  handlebar,\n  mask,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content> & CustomContentProps) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay\n        className={cn(\n          classNames?.mask || '',\n          !mask && 'hidden',\n          //\n        )}\n      />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',\n          `data-[vaul-drawer-direction=top]:inset-x-0\n          data-[vaul-drawer-direction=top]:top-0\n          data-[vaul-drawer-direction=top]:mb-24\n          data-[vaul-drawer-direction=top]:max-h-[80vh]\n          data-[vaul-drawer-direction=top]:rounded-b-lg\n          data-[vaul-drawer-direction=top]:border-b`,\n          `data-[vaul-drawer-direction=bottom]:inset-x-0\n          data-[vaul-drawer-direction=bottom]:bottom-0\n          data-[vaul-drawer-direction=bottom]:mt-24\n          data-[vaul-drawer-direction=bottom]:max-h-[80vh]\n          data-[vaul-drawer-direction=bottom]:rounded-t-lg\n          data-[vaul-drawer-direction=bottom]:border-t`,\n          `data-[vaul-drawer-direction=right]:inset-y-0\n          data-[vaul-drawer-direction=right]:right-0\n          data-[vaul-drawer-direction=right]:w-3/4\n          data-[vaul-drawer-direction=right]:border-l\n          data-[vaul-drawer-direction=right]:sm:max-w-sm`,\n          `data-[vaul-drawer-direction=left]:inset-y-0\n          data-[vaul-drawer-direction=left]:left-0\n          data-[vaul-drawer-direction=left]:w-3/4\n          data-[vaul-drawer-direction=left]:border-r\n          data-[vaul-drawer-direction=left]:sm:max-w-sm`,\n          className,\n        )}\n        {...props}\n      >\n        {handlebar && (\n          <div\n            className={cn(\n              `bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full\n              group-data-[vaul-drawer-direction=bottom]/drawer-content:block`,\n              classNames?.handlebar,\n            )}\n          />\n        )}\n        {/* <div\n          className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full\n            group-data-[vaul-drawer-direction=bottom]/drawer-content:block\"\n        /> */}\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        `flex flex-col gap-0.5 p-4\n        group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center\n        group-data-[vaul-drawer-direction=top]/drawer-content:text-center\n        md:gap-1.5 md:text-left`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,SAASA,SAAO,EACd,WACA,GAAG,SAC+D;AAClE,QACE,oBAACC,OAAgB;EACf,aAAU;EACV,YAAY,CAAC;EACb,GAAI;GACJ;;AAIN,SAAS,cAAc,EACrB,GAAG,SACoD;AACvD,QAAO,oBAACA,OAAgB;EAAQ,aAAU;EAAiB,GAAI;GAAS;;AAG1E,SAAS,aAAa,EACpB,GAAG,SACmD;AACtD,QAAO,oBAACA,OAAgB;EAAO,aAAU;EAAgB,GAAI;GAAS;;AAGxE,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAACA,OAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT;;2BAGA,UACD;EACD,GAAI;GACJ;;AAUN,SAAS,cAAc,EACrB,WACA,UACA,aAAa,EAAE,EACf,WACA,MACA,GAAG,SACyE;AAC5E,QACE,qBAAC;EAAa,aAAU;aACtB,oBAAC,iBACC,WAAW,GACT,YAAY,QAAQ,IACpB,CAAC,QAAQ,SAEV,GACD,EACF,qBAACA,OAAgB;GACf,aAAU;GACV,WAAW,GACT,sEACA;;;;;sDAMA;;;;;yDAMA;;;;2DAKA;;;;0DAKA,UACD;GACD,GAAI;cAEH,aACC,oBAAC,SACC,WAAW,GACT;+EAEA,YAAY,UACb,GACD,EAMH;IACuB;GACb;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT;;;kCAIA,UACD;EACD,GAAI;GACJ;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,mCAAmC,UAAU;EAC3D,GAAI;GACJ;;AAIN,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ"}
+{"version":3,"file":"drawer.mjs","names":["Drawer","DrawerPrimitive"],"sources":["../../src/core/drawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Drawer as DrawerPrimitive } from 'vaul';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\ninterface CustomProps {\n  draggable?: boolean;\n}\n\nfunction Drawer({\n  draggable,\n  container,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root> & CustomProps) {\n  const { getContainer } = useConfig();\n\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      handleOnly={!draggable}\n      container={container ?? getContainer()}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        `data-[state=open]:animate-in data-[state=closed]:animate-out\n        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0\n        z-50 bg-black/50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  handlebar?: boolean;\n  mask?: boolean;\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  classNames = {},\n  handlebar,\n  mask,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content> & CustomContentProps) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay\n        className={cn(\n          classNames?.mask || '',\n          !mask && 'hidden',\n          //\n        )}\n      />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',\n          `data-[vaul-drawer-direction=top]:inset-x-0\n          data-[vaul-drawer-direction=top]:top-0\n          data-[vaul-drawer-direction=top]:mb-24\n          data-[vaul-drawer-direction=top]:max-h-[80vh]\n          data-[vaul-drawer-direction=top]:rounded-b-lg\n          data-[vaul-drawer-direction=top]:border-b`,\n          `data-[vaul-drawer-direction=bottom]:inset-x-0\n          data-[vaul-drawer-direction=bottom]:bottom-0\n          data-[vaul-drawer-direction=bottom]:mt-24\n          data-[vaul-drawer-direction=bottom]:max-h-[80vh]\n          data-[vaul-drawer-direction=bottom]:rounded-t-lg\n          data-[vaul-drawer-direction=bottom]:border-t`,\n          `data-[vaul-drawer-direction=right]:inset-y-0\n          data-[vaul-drawer-direction=right]:right-0\n          data-[vaul-drawer-direction=right]:w-3/4\n          data-[vaul-drawer-direction=right]:border-l\n          data-[vaul-drawer-direction=right]:sm:max-w-sm`,\n          `data-[vaul-drawer-direction=left]:inset-y-0\n          data-[vaul-drawer-direction=left]:left-0\n          data-[vaul-drawer-direction=left]:w-3/4\n          data-[vaul-drawer-direction=left]:border-r\n          data-[vaul-drawer-direction=left]:sm:max-w-sm`,\n          className,\n        )}\n        {...props}\n      >\n        {handlebar && (\n          <div\n            className={cn(\n              `bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full\n              group-data-[vaul-drawer-direction=bottom]/drawer-content:block`,\n              classNames?.handlebar,\n            )}\n          />\n        )}\n        {/* <div\n          className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full\n            group-data-[vaul-drawer-direction=bottom]/drawer-content:block\"\n        /> */}\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        `flex flex-col gap-0.5 p-4\n        group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center\n        group-data-[vaul-drawer-direction=top]/drawer-content:text-center\n        md:gap-1.5 md:text-left`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,SAASA,SAAO,EACd,WACA,WACA,GAAG,SAC+D;CAClE,MAAM,EAAE,iBAAiB,WAAW;AAEpC,QACE,oBAACC,OAAgB;EACf,aAAU;EACV,YAAY,CAAC;EACb,WAAW,aAAa,cAAc;EACtC,GAAI;GACJ;;AAIN,SAAS,cAAc,EACrB,GAAG,SACoD;AACvD,QAAO,oBAACA,OAAgB;EAAQ,aAAU;EAAiB,GAAI;GAAS;;AAG1E,SAAS,aAAa,EACpB,GAAG,SACmD;AACtD,QAAO,oBAACA,OAAgB;EAAO,aAAU;EAAgB,GAAI;GAAS;;AAGxE,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAACA,OAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;AACvD,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT;;2BAGA,UACD;EACD,GAAI;GACJ;;AAUN,SAAS,cAAc,EACrB,WACA,UACA,aAAa,EAAE,EACf,WACA,MACA,GAAG,SACyE;AAC5E,QACE,qBAAC;EAAa,aAAU;aACtB,oBAAC,iBACC,WAAW,GACT,YAAY,QAAQ,IACpB,CAAC,QAAQ,SAEV,GACD,EACF,qBAACA,OAAgB;GACf,aAAU;GACV,WAAW,GACT,sEACA;;;;;sDAMA;;;;;yDAMA;;;;2DAKA;;;;0DAKA,UACD;GACD,GAAI;cAEH,aACC,oBAAC,SACC,WAAW,GACT;+EAEA,YAAY,UACb,GACD,EAMH;IACuB;GACb;;AAInB,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GACT;;;kCAIA,UACD;EACD,GAAI;GACJ;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,mCAAmC,UAAU;EAC3D,GAAI;GACJ;;AAIN,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;AAC3D,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;GACJ"}

package/dist/core/popover.d.mts

@@ -16,8 +16,11 @@ declare function PopoverContent({
   className,
   align,
   sideOffset,
+  container,
   ...props
-}: React$1.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof PopoverPrimitive.Content> & {
+  container?: HTMLElement;
+}): react_jsx_runtime0.JSX.Element;
 declare function PopoverAnchor({
   ...props
 }: React$1.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime0.JSX.Element;

package/dist/core/popover.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.mts","names":[],"sources":["../../src/core/popover.tsx"],"mappings":";;;;;;;;iBAQS,OAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,gBAAA,CAAiB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,cAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,gBAAA,CAAiB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI/C,cAAA,CAAA;EACP,SAAA;EACA,KAAA;EACA,UAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,gBAAA,CAAiB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyB/C,aAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,gBAAA,CAAiB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUlE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUhE,kBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"popover.d.mts","names":[],"sources":["../../src/core/popover.tsx"],"mappings":";;;;;;;;iBASS,OAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,gBAAA,CAAiB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,cAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,gBAAA,CAAiB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI/C,cAAA,CAAA;EACP,SAAA;EACA,KAAA;EACA,UAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,gBAAA,CAAiB,OAAA;EAC9C,SAAA,GAAY,WAAA;AAAA,IACb,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA2BQ,aAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,gBAAA,CAAiB,MAAA,IAAO,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9C,aAAA,CAAA;EAAgB,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUlE,YAAA,CAAA;EAAe,SAAA;EAAA,GAAc;AAAA,GAAS,OAAA,CAAM,cAAA,SAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUhE,kBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/popover.mjs

@@ -2,6 +2,7 @@
 
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
+import { useConfig } from "../providers/config/context.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -28,12 +29,15 @@ function PopoverTrigger({ ...props }) {
 		...props
 	});
 }
-function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
-		"data-slot": "popover-content",
-		align,
-		sideOffset,
-		className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
+function PopoverContent({ className, align = "center", sideOffset = 4, container, ...props }) {
+	const { getContainer } = useConfig();
+	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
+		container: container ?? getContainer(),
+		children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+			"data-slot": "popover-content",
+			align,
+			sideOffset,
+			className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
           data-[state=closed]:animate-out data-[state=closed]:fade-out-0
           data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
           data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2
@@ -42,8 +46,9 @@ function PopoverContent({ className, align = "center", sideOffset = 4, ...props
           data-[side=top]:slide-in-from-bottom-2 z-50 w-72
           origin-(--radix-popover-content-transform-origin) rounded-md border
           p-4 shadow-md outline-hidden`, className),
-		...props
-	}) });
+			...props
+		})
+	});
 }
 function PopoverAnchor({ ...props }) {
 	return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {

package/dist/core/popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.mjs","names":[],"sources":["../../src/core/popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          `bg-popover text-popover-foreground data-[state=open]:animate-in\n          data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95\n          data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2\n          data-[side=left]:slide-in-from-right-2\n          data-[side=right]:slide-in-from-left-2\n          data-[side=top]:slide-in-from-bottom-2 z-50 w-72\n          origin-(--radix-popover-content-transform-origin) rounded-md border\n          p-4 shadow-md outline-hidden`,\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn('flex flex-col gap-1 text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn('font-medium', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn('text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverAnchor,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAQA,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QAAO,oBAAC,iBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS;;AAGjE,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,oBAAC,iBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,GAAG,SACqD;AACxD,QACE,oBAAC,iBAAiB,oBAChB,oBAAC,iBAAiB;EAChB,aAAU;EACH;EACK;EACZ,WAAW,GACT;;;;;;;;yCASA,UACD;EACD,GAAI;GACJ,GACsB;;AAI9B,SAAS,cAAc,EACrB,GAAG,SACoD;AACvD,QAAO,oBAAC,iBAAiB;EAAO,aAAU;EAAiB,GAAI;GAAS;;AAG1E,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;GACJ;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAqC;AACzE,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,eAAe,UAAU;EACvC,GAAI;GACJ;;AAIN,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyB;AAC5B,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,yBAAyB,UAAU;EACjD,GAAI;GACJ"}
+{"version":3,"file":"popover.mjs","names":[],"sources":["../../src/core/popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  container,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content> & {\n  container?: HTMLElement;\n}) {\n  const { getContainer } = useConfig();\n\n  return (\n    <PopoverPrimitive.Portal container={container ?? getContainer()}>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          `bg-popover text-popover-foreground data-[state=open]:animate-in\n          data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95\n          data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2\n          data-[side=left]:slide-in-from-right-2\n          data-[side=right]:slide-in-from-left-2\n          data-[side=top]:slide-in-from-bottom-2 z-50 w-72\n          origin-(--radix-popover-content-transform-origin) rounded-md border\n          p-4 shadow-md outline-hidden`,\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn('flex flex-col gap-1 text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn('font-medium', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn('text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverAnchor,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AASA,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QAAO,oBAAC,iBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS;;AAGjE,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,oBAAC,iBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,WACA,GAAG,SAGF;CACD,MAAM,EAAE,iBAAiB,WAAW;AAEpC,QACE,oBAAC,iBAAiB;EAAO,WAAW,aAAa,cAAc;YAC7D,oBAAC,iBAAiB;GAChB,aAAU;GACH;GACK;GACZ,WAAW,GACT;;;;;;;;yCASA,UACD;GACD,GAAI;IACJ;GACsB;;AAI9B,SAAS,cAAc,EACrB,GAAG,SACoD;AACvD,QAAO,oBAAC,iBAAiB;EAAO,aAAU;EAAiB,GAAI;GAAS;;AAG1E,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;AAC3E,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;GACJ;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAAqC;AACzE,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,eAAe,UAAU;EACvC,GAAI;GACJ;;AAIN,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyB;AAC5B,QACE,oBAAC;EACC,aAAU;EACV,WAAW,GAAG,yBAAyB,UAAU;EACjD,GAAI;GACJ"}

package/dist/core/select.d.mts

@@ -28,8 +28,11 @@ declare function SelectContent({
   children,
   position,
   align,
+  container,
   ...props
-}: React$1.ComponentProps<typeof Select.Content>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof Select.Content> & {
+  container?: HTMLElement;
+}): react_jsx_runtime0.JSX.Element;
 declare function SelectLabel({
   className,
   ...props

package/dist/core/select.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.mts","names":[],"sources":["../../src/core/select.tsx"],"mappings":";;;;;;;;iBASS,QAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI3C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,aAAA,CAAA;EACP,SAAA;EACA,IAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA;EAC7C,IAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA+BQ,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,QAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA,IAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0C9C,WAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,UAAA,CAAA;EACP,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA6B3C,eAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,SAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUhD,oBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,cAAA,IAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAerD,sBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,gBAAA,IAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"select.d.mts","names":[],"sources":["../../src/core/select.tsx"],"mappings":";;;;;;;;iBAUS,QAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI3C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,WAAA,CAAA;EAAA,GACJ;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI5C,aAAA,CAAA;EACP,SAAA;EACA,IAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA;EAC7C,IAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA+BQ,aAAA,CAAA;EACP,SAAA;EACA,QAAA;EACA,QAAA;EACA,KAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,OAAA;EAC7C,SAAA,GAAY,WAAA;AAAA,IACb,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA4CQ,WAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU5C,UAAA,CAAA;EACP,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,IAAA,IAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA6B3C,eAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,SAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAUhD,oBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,cAAA,IAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAerD,sBAAA,CAAA;EACP,SAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,MAAA,CAAgB,gBAAA,IAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/select.mjs

@@ -2,6 +2,7 @@
 
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
+import { useConfig } from "../providers/config/context.mjs";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -62,10 +63,13 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
 		})]
 	});
 }
-function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
-	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, {
-		"data-slot": "select-content",
-		className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
+function SelectContent({ className, children, position = "item-aligned", align = "center", container, ...props }) {
+	const { getContainer } = useConfig();
+	return /* @__PURE__ */ jsx(Select.Portal, {
+		container: container ?? getContainer(),
+		children: /* @__PURE__ */ jsxs(Select.Content, {
+			"data-slot": "select-content",
+			className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
           data-[state=closed]:animate-out data-[state=closed]:fade-out-0
           data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
           data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2
@@ -76,19 +80,20 @@ function SelectContent({ className, children, position = "item-aligned", align =
           origin-(--radix-select-content-transform-origin) overflow-x-hidden
           overflow-y-auto rounded-md border shadow-md`, position === "popper" && `data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1
             data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1`, className),
-		position,
-		align,
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-			/* @__PURE__ */ jsx(Select.Viewport, {
-				className: cn("p-1", position === "popper" && `h-[var(--radix-select-trigger-height)] w-full
+			position,
+			align,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select.Viewport, {
+					className: cn("p-1", position === "popper" && `h-[var(--radix-select-trigger-height)] w-full
               min-w-[var(--radix-select-trigger-width)] scroll-my-1`),
-				children
-			}),
-			/* @__PURE__ */ jsx(SelectScrollDownButton, {})
-		]
-	}) });
+					children
+				}),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	});
 }
 function SelectLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select.Label, {

package/dist/core/select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.mjs","names":["Select","SelectPrimitive"],"sources":["../../src/core/select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\nimport { Select as SelectPrimitive } from 'radix-ui';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default';\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        `border-input data-[placeholder]:text-muted-foreground\n        [&_svg:not([class*='text-'])]:text-muted-foreground\n        focus-visible:border-ring focus-visible:ring-ring/50\n        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\n        aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50\n        flex w-fit items-center justify-between gap-2 rounded-md border\n        bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs\n        transition-[color,box-shadow] outline-none focus-visible:ring-[3px]\n        disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9\n        data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1\n        *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center\n        *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none\n        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'item-aligned',\n  align = 'center',\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          `bg-popover text-popover-foreground data-[state=open]:animate-in\n          data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95\n          data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2\n          data-[side=left]:slide-in-from-right-2\n          data-[side=right]:slide-in-from-left-2\n          data-[side=top]:slide-in-from-bottom-2 relative z-50\n          max-h-(--radix-select-content-available-height) min-w-[8rem]\n          origin-(--radix-select-content-transform-origin) overflow-x-hidden\n          overflow-y-auto rounded-md border shadow-md`,\n          position === 'popper' &&\n            `data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1\n            data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1`,\n          className,\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-1',\n            position === 'popper' &&\n              `h-[var(--radix-select-trigger-height)] w-full\n              min-w-[var(--radix-select-trigger-width)] scroll-my-1`,\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        `focus:bg-accent focus:text-accent-foreground\n        [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full\n        cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm\n        outline-hidden select-none data-[disabled]:pointer-events-none\n        data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\n        [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex\n        *:[span]:last:items-center *:[span]:last:gap-2`,\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'flex cursor-default items-center justify-center py-1',\n        className,\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'flex cursor-default items-center justify-center py-1',\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,SAASA,SAAO,EACd,GAAG,SACiD;AACpD,QAAO,oBAACC,OAAgB;EAAK,aAAU;EAAS,GAAI;GAAS;;AAG/D,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAACA,OAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAACA,OAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,cAAc,EACrB,WACA,OAAO,WACP,UACA,GAAG,SAGF;AACD,QACE,qBAACA,OAAgB;EACf,aAAU;EACV,aAAW;EACX,WAAW,GACT;;;;;;;;;;;;gEAaA,UACD;EACD,GAAI;aAEH,UACD,oBAACA,OAAgB;GAAK;aACpB,oBAAC,mBAAgB,WAAU,sBAAsB;IAC5B;GACC;;AAI9B,SAAS,cAAc,EACrB,WACA,UACA,WAAW,gBACX,QAAQ,UACR,GAAG,SACoD;AACvD,QACE,oBAACA,OAAgB,oBACf,qBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT;;;;;;;;;wDAUA,aAAa,YACX;6EAEF,UACD;EACS;EACH;EACP,GAAI;;GAEJ,oBAAC,yBAAuB;GACxB,oBAACA,OAAgB;IACf,WAAW,GACT,OACA,aAAa,YACX;qEAEH;IAEA;KACwB;GAC3B,oBAAC,2BAAyB;;GACF,GACH;;AAI7B,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GAAG,6CAA6C,UAAU;EACrE,GAAI;GACJ;;AAIN,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;AACpD,QACE,qBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT;;;;;;yDAOA,UACD;EACD,GAAI;aAEJ,oBAAC;GACC,aAAU;GACV,WAAU;aAEV,oBAACA,OAAgB,2BACf,oBAAC,aAAU,WAAU,WAAW,GACF;IAC3B,EACP,oBAACA,OAAgB,YAAU,WAAoC;GAC1C;;AAI3B,SAAS,gBAAgB,EACvB,WACA,GAAG,SACsD;AACzD,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GAAG,iDAAiD,UAAU;EACzE,GAAI;GACJ;;AAIN,SAAS,qBAAqB,EAC5B,WACA,GAAG,SAC2D;AAC9D,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT,wDACA,UACD;EACD,GAAI;YAEJ,oBAAC,iBAAc,WAAU,WAAW;GACL;;AAIrC,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;AAChE,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT,wDACA,UACD;EACD,GAAI;YAEJ,oBAAC,mBAAgB,WAAU,WAAW;GACL"}
+{"version":3,"file":"select.mjs","names":["Select","SelectPrimitive"],"sources":["../../src/core/select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\nimport { Select as SelectPrimitive } from 'radix-ui';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />;\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n}\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default';\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        `border-input data-[placeholder]:text-muted-foreground\n        [&_svg:not([class*='text-'])]:text-muted-foreground\n        focus-visible:border-ring focus-visible:ring-ring/50\n        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\n        aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50\n        flex w-fit items-center justify-between gap-2 rounded-md border\n        bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs\n        transition-[color,box-shadow] outline-none focus-visible:ring-[3px]\n        disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9\n        data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1\n        *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center\n        *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none\n        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = 'item-aligned',\n  align = 'center',\n  container,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content> & {\n  container?: HTMLElement;\n}) {\n  const { getContainer } = useConfig();\n\n  return (\n    <SelectPrimitive.Portal container={container ?? getContainer()}>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          `bg-popover text-popover-foreground data-[state=open]:animate-in\n          data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95\n          data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2\n          data-[side=left]:slide-in-from-right-2\n          data-[side=right]:slide-in-from-left-2\n          data-[side=top]:slide-in-from-bottom-2 relative z-50\n          max-h-(--radix-select-content-available-height) min-w-[8rem]\n          origin-(--radix-select-content-transform-origin) overflow-x-hidden\n          overflow-y-auto rounded-md border shadow-md`,\n          position === 'popper' &&\n            `data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1\n            data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1`,\n          className,\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            'p-1',\n            position === 'popper' &&\n              `h-[var(--radix-select-trigger-height)] w-full\n              min-w-[var(--radix-select-trigger-width)] scroll-my-1`,\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        `focus:bg-accent focus:text-accent-foreground\n        [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full\n        cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm\n        outline-hidden select-none data-[disabled]:pointer-events-none\n        data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\n        [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex\n        *:[span]:last:items-center *:[span]:last:gap-2`,\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'flex cursor-default items-center justify-center py-1',\n        className,\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'flex cursor-default items-center justify-center py-1',\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  );\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,SAASA,SAAO,EACd,GAAG,SACiD;AACpD,QAAO,oBAACC,OAAgB;EAAK,aAAU;EAAS,GAAI;GAAS;;AAG/D,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAACA,OAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,YAAY,EACnB,GAAG,SACkD;AACrD,QAAO,oBAACA,OAAgB;EAAM,aAAU;EAAe,GAAI;GAAS;;AAGtE,SAAS,cAAc,EACrB,WACA,OAAO,WACP,UACA,GAAG,SAGF;AACD,QACE,qBAACA,OAAgB;EACf,aAAU;EACV,aAAW;EACX,WAAW,GACT;;;;;;;;;;;;gEAaA,UACD;EACD,GAAI;aAEH,UACD,oBAACA,OAAgB;GAAK;aACpB,oBAAC,mBAAgB,WAAU,sBAAsB;IAC5B;GACC;;AAI9B,SAAS,cAAc,EACrB,WACA,UACA,WAAW,gBACX,QAAQ,UACR,WACA,GAAG,SAGF;CACD,MAAM,EAAE,iBAAiB,WAAW;AAEpC,QACE,oBAACA,OAAgB;EAAO,WAAW,aAAa,cAAc;YAC5D,qBAACA,OAAgB;GACf,aAAU;GACV,WAAW,GACT;;;;;;;;;wDAUA,aAAa,YACX;6EAEF,UACD;GACS;GACH;GACP,GAAI;;IAEJ,oBAAC,yBAAuB;IACxB,oBAACA,OAAgB;KACf,WAAW,GACT,OACA,aAAa,YACX;qEAEH;KAEA;MACwB;IAC3B,oBAAC,2BAAyB;;IACF;GACH;;AAI7B,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;AACrD,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GAAG,6CAA6C,UAAU;EACrE,GAAI;GACJ;;AAIN,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;AACpD,QACE,qBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT;;;;;;yDAOA,UACD;EACD,GAAI;aAEJ,oBAAC;GACC,aAAU;GACV,WAAU;aAEV,oBAACA,OAAgB,2BACf,oBAAC,aAAU,WAAU,WAAW,GACF;IAC3B,EACP,oBAACA,OAAgB,YAAU,WAAoC;GAC1C;;AAI3B,SAAS,gBAAgB,EACvB,WACA,GAAG,SACsD;AACzD,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GAAG,iDAAiD,UAAU;EACzE,GAAI;GACJ;;AAIN,SAAS,qBAAqB,EAC5B,WACA,GAAG,SAC2D;AAC9D,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT,wDACA,UACD;EACD,GAAI;YAEJ,oBAAC,iBAAc,WAAU,WAAW;GACL;;AAIrC,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;AAChE,QACE,oBAACA,OAAgB;EACf,aAAU;EACV,WAAW,GACT,wDACA,UACD;EACD,GAAI;YAEJ,oBAAC,mBAAgB,WAAU,WAAW;GACL"}

package/dist/index.d.mts

@@ -48,8 +48,8 @@ import { PageHeader, Props as Props$16 } from "./components/templates/page-heade
 import { Props as Props$19, Row } from "./components/templates/grid/row.mjs";
 import { Col, Props as Props$1 } from "./components/templates/grid/col.mjs";
 import "./components/templates/index.mjs";
-import { Locale, ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
-import { DEFAULT_LOCALE, useConfig } from "./providers/Config/context.mjs";
-import { Config, Props as Props$3 } from "./providers/Config/index.mjs";
+import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import { Config, Props as Props$3 } from "./providers/config/config.mjs";
 import "./providers.mjs";
-export { Button, Card, Props as CardProps, Checkbox, Col, Props$1 as ColProps, Collapse, Props$2 as CollapseProps, ColorPicker, Config, Props$3 as ConfigProps, Container, Props$4 as ContainerProps, Props$5 as ContentProps, DEFAULT_LOCALE, DatePicker, Drawer, Props$6 as DrawerProps, Dropdown, Props$7 as DropdownProps, Empty, Props$8 as EmptyProps, FloatButton, Props$9 as FooterProps, Props$10 as HeaderProps, Input, Layout, Props$11 as LayoutProps, List, Props$12 as ListProps, Locale, Marquees, Props$13 as MarqueesProps, Menu, Props$14 as MenuProps, Modal, Props$15 as ModalProps, PageHeader, Props$16 as PageHeaderProps, Popover, Progress, Radio, Result, Props$17 as ResultProps, Reveals, Props$18 as RevealsProps, Row, Props$19 as RowProps, Select, Props$20 as SiderProps, Skeleton, Space, Props$21 as SpaceProps, Spin, Splitter, Props$22 as SplitterProps, Swiper, Props$23 as SwiperProps, Switch, Tag, ThemeConfig, ThemeToken, Toast, StaticProps as ToastOptions, Typography, Upload, UploadFile, Props$24 as UploadProps, useConfig };
+export { Button, Card, Props as CardProps, Checkbox, Col, Props$1 as ColProps, Collapse, Props$2 as CollapseProps, ColorPicker, ComponentSize, Config, Props$3 as ConfigProps, Container, Props$4 as ContainerProps, Props$5 as ContentProps, DEFAULT_LOCALE, DatePicker, DefaultProps, Drawer, Props$6 as DrawerProps, Dropdown, Props$7 as DropdownProps, Empty, Props$8 as EmptyProps, FloatButton, Props$9 as FooterProps, Props$10 as HeaderProps, Input, Layout, Props$11 as LayoutProps, List, Props$12 as ListProps, Locale, Marquees, Props$13 as MarqueesProps, Menu, Props$14 as MenuProps, Modal, Props$15 as ModalProps, PageHeader, Props$16 as PageHeaderProps, Popover, Progress, Radio, Result, Props$17 as ResultProps, Reveals, Props$18 as RevealsProps, Row, Props$19 as RowProps, Select, Props$20 as SiderProps, Skeleton, Space, Props$21 as SpaceProps, Spin, Splitter, Props$22 as SplitterProps, Swiper, Props$23 as SwiperProps, Switch, Tag, ThemeConfig, ThemeToken, Toast, StaticProps as ToastOptions, Typography, Upload, UploadFile, Props$24 as UploadProps, useConfig };

package/dist/index.mjs

@@ -1,12 +1,12 @@
 import "./style.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import Config from "./providers/config/config.mjs";
 import Button from "./Button.mjs";
 import Checkbox from "./components/atoms/checkbox/index.mjs";
 import Typography from "./Typography.mjs";
 import Popover from "./components/atoms/popover.mjs";
 import ColorPicker from "./components/atoms/color-picker.mjs";
 import DatePicker from "./components/atoms/date-picker.mjs";
-import { DEFAULT_LOCALE, useConfig } from "./providers/Config/context.mjs";
-import Config from "./providers/Config/index.mjs";
 import FloatButton from "./components/atoms/float-button/index.mjs";
 import Input from "./components/atoms/input/index.mjs";
 import Progress from "./components/atoms/progress.mjs";

package/dist/providers/config/config.d.mts

@@ -0,0 +1,30 @@
+import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./context.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/providers/config/config.d.ts
+interface Props {
+  theme?: ThemeConfig;
+  locale?: Locale;
+  getContainer?: () => HTMLElement;
+  componentSize?: ComponentSize;
+  direction?: 'ltr' | 'rtl';
+  defaultProps?: DefaultProps;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+declare const Config: ({
+  theme,
+  locale,
+  getContainer,
+  componentSize,
+  direction,
+  defaultProps,
+  className,
+  style,
+  children
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Config, type Props };
+//# sourceMappingURL=config.d.mts.map

package/dist/providers/config/config.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.mts","names":[],"sources":["../../../src/providers/config/config.tsx"],"mappings":";;;;;UAgHU,KAAA;EACR,KAAA,GAAQ,WAAA;EACR,MAAA,GAAS,MAAA;EACT,YAAA,SAAqB,WAAA;EACrB,aAAA,GAAgB,aAAA;EAChB,SAAA;EACA,YAAA,GAAe,YAAA;EACf,SAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGZ,MAAA;EAAU,KAAA;EAAA,MAAA;EAAA,YAAA;EAAA,aAAA;EAAA,SAAA;EAAA,YAAA;EAAA,SAAA;EAAA,KAAA;EAAA;AAAA,GAUb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/providers/config/config.mjs

@@ -0,0 +1,162 @@
+'use client';
+
+import { cn } from "../../utils.mjs";
+import { Context, DEFAULT_LOCALE, useConfig } from "./context.mjs";
+import { useCallback, useMemo, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+import { DirectionProvider } from "@radix-ui/react-direction";
+
+//#region src/providers/config/config.tsx
+const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+const subscribeToSystemColorScheme = (callback) => {
+	if (typeof window === "undefined") return () => {};
+	const mql = window.matchMedia(DARK_MEDIA_QUERY);
+	mql.addEventListener("change", callback);
+	return () => mql.removeEventListener("change", callback);
+};
+const getSystemPrefersDark = () => typeof window !== "undefined" && window.matchMedia(DARK_MEDIA_QUERY).matches;
+const getServerSnapshot = () => false;
+const useSystemPrefersDark = () => useSyncExternalStore(subscribeToSystemColorScheme, getSystemPrefersDark, getServerSnapshot);
+const tokenToCssVar = {
+	colorPrimary: "--primary",
+	colorPrimaryForeground: "--primary-foreground",
+	colorBackground: "--background",
+	colorForeground: "--foreground",
+	colorCard: "--card",
+	colorCardForeground: "--card-foreground",
+	colorPopover: "--popover",
+	colorPopoverForeground: "--popover-foreground",
+	colorSecondary: "--secondary",
+	colorSecondaryForeground: "--secondary-foreground",
+	colorMuted: "--muted",
+	colorMutedForeground: "--muted-foreground",
+	colorAccent: "--accent",
+	colorAccentForeground: "--accent-foreground",
+	colorDestructive: "--destructive",
+	colorBorder: "--border",
+	colorInput: "--input",
+	colorRing: "--ring",
+	borderRadius: "--radius",
+	btnBackground: "--btn-bg",
+	btnBackgroundHover: "--btn-bg-hover",
+	btnBackgroundActive: "--btn-bg-active",
+	btnBorder: "--btn-border",
+	btnForeground: "--btn-fg",
+	sidebar: "--sidebar",
+	sidebarForeground: "--sidebar-foreground",
+	sidebarPrimary: "--sidebar-primary",
+	sidebarPrimaryForeground: "--sidebar-primary-foreground",
+	sidebarAccent: "--sidebar-accent",
+	sidebarAccentForeground: "--sidebar-accent-foreground",
+	sidebarBorder: "--sidebar-border",
+	sidebarRing: "--sidebar-ring",
+	chart1: "--chart-1",
+	chart2: "--chart-2",
+	chart3: "--chart-3",
+	chart4: "--chart-4",
+	chart5: "--chart-5",
+	fontSans: "--font-sans",
+	fontMono: "--font-mono"
+};
+const buildCssVars = (token) => {
+	if (!token) return {};
+	const vars = {};
+	for (const [key, value] of Object.entries(token)) {
+		if (value === void 0) continue;
+		const cssVar = tokenToCssVar[key];
+		if (cssVar) vars[cssVar] = value;
+	}
+	return vars;
+};
+const Config = ({ theme = {}, locale = {}, getContainer, componentSize, direction, defaultProps, className, style, children }) => {
+	const parent = useConfig();
+	const [wrapperEl, setWrapperEl] = useState(null);
+	const themeKey = JSON.stringify(theme);
+	const parentThemeKey = JSON.stringify(parent.theme);
+	const localeKey = JSON.stringify(locale);
+	const parentLocaleKey = JSON.stringify(parent.locale);
+	const mergedTheme = useMemo(() => ({
+		...parent.theme,
+		...theme,
+		token: {
+			...parent.theme.token,
+			...theme.token
+		},
+		darkToken: {
+			...parent.theme.darkToken,
+			...theme.darkToken
+		}
+	}), [parentThemeKey, themeKey]);
+	const mergedLocale = useMemo(() => ({
+		...parent.locale,
+		...locale
+	}), [parentLocaleKey, localeKey]);
+	const systemPrefersDark = useSystemPrefersDark();
+	const isDarkActive = mergedTheme.dark === "system" ? systemPrefersDark : mergedTheme.dark === "dark";
+	const cssVars = useMemo(() => buildCssVars(isDarkActive ? {
+		...mergedTheme.token,
+		...mergedTheme.darkToken
+	} : mergedTheme.token), [
+		mergedTheme.token,
+		mergedTheme.darkToken,
+		isDarkActive
+	]);
+	const hasCssVars = Object.keys(cssVars).length > 0;
+	const hasDarkMode = mergedTheme.dark !== void 0;
+	const needsWrapper = hasCssVars || hasDarkMode || !!className || !!style || !!direction;
+	const resolvedGetContainer = useCallback(() => {
+		if (getContainer) return getContainer();
+		if (needsWrapper && wrapperEl) return wrapperEl;
+		return parent.getContainer();
+	}, [
+		getContainer,
+		needsWrapper,
+		wrapperEl,
+		parent
+	]);
+	const resolvedComponentSize = componentSize ?? parent.componentSize;
+	const resolvedDirection = direction ?? parent.direction;
+	const defaultPropsKey = JSON.stringify(defaultProps);
+	const mergedDefaultProps = useMemo(() => parent.defaultProps || defaultProps ? {
+		...parent.defaultProps,
+		...defaultProps
+	} : void 0, [JSON.stringify(parent.defaultProps), defaultPropsKey]);
+	const contextValue = useMemo(() => ({
+		theme: mergedTheme,
+		locale: mergedLocale,
+		getContainer: resolvedGetContainer,
+		componentSize: resolvedComponentSize,
+		direction: resolvedDirection,
+		defaultProps: mergedDefaultProps,
+		isConfigured: true
+	}), [
+		mergedTheme,
+		mergedLocale,
+		resolvedGetContainer,
+		resolvedComponentSize,
+		resolvedDirection,
+		mergedDefaultProps
+	]);
+	const content = /* @__PURE__ */ jsx(Context.Provider, {
+		value: contextValue,
+		children: needsWrapper ? /* @__PURE__ */ jsx("div", {
+			ref: setWrapperEl,
+			dir: direction,
+			className: cn(isDarkActive && "dark", className),
+			style: {
+				...hasCssVars ? cssVars : void 0,
+				...style,
+				display: "contents"
+			},
+			children
+		}) : children
+	});
+	return direction ? /* @__PURE__ */ jsx(DirectionProvider, {
+		dir: direction,
+		children: content
+	}) : content;
+};
+
+//#endregion
+export { Config as default };
+//# sourceMappingURL=config.mjs.map

package/dist/providers/config/config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.mjs","names":[],"sources":["../../../src/providers/config/config.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState, useSyncExternalStore } from 'react';\n\nimport { DirectionProvider } from '@radix-ui/react-direction';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Context, DEFAULT_LOCALE, useConfig } from './context';\nimport type {\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n} from './types';\n\nconst DARK_MEDIA_QUERY = '(prefers-color-scheme: dark)';\n\nconst subscribeToSystemColorScheme = (callback: () => void) => {\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  const mql = window.matchMedia(DARK_MEDIA_QUERY);\n  mql.addEventListener('change', callback);\n  return () => mql.removeEventListener('change', callback);\n};\n\nconst getSystemPrefersDark = () =>\n  typeof window !== 'undefined' && window.matchMedia(DARK_MEDIA_QUERY).matches;\n\n// No `window` during SSR, so there's no way to know the visitor's actual\n// preference before hydration — assume light (the conservative default)\n// and let useSyncExternalStore correct it client-side once matchMedia is\n// available, same flash-of-incorrect-guess tradeoff already accepted for\n// Sider's breakpoint prop elsewhere in this library.\nconst getServerSnapshot = () => false;\n\nconst useSystemPrefersDark = () =>\n  useSyncExternalStore(\n    subscribeToSystemColorScheme,\n    getSystemPrefersDark,\n    getServerSnapshot,\n  );\n\nconst tokenToCssVar: Record<keyof ThemeToken, string> = {\n  colorPrimary: '--primary',\n  colorPrimaryForeground: '--primary-foreground',\n  colorBackground: '--background',\n  colorForeground: '--foreground',\n  colorCard: '--card',\n  colorCardForeground: '--card-foreground',\n  colorPopover: '--popover',\n  colorPopoverForeground: '--popover-foreground',\n  colorSecondary: '--secondary',\n  colorSecondaryForeground: '--secondary-foreground',\n  colorMuted: '--muted',\n  colorMutedForeground: '--muted-foreground',\n  colorAccent: '--accent',\n  colorAccentForeground: '--accent-foreground',\n  colorDestructive: '--destructive',\n  colorBorder: '--border',\n  colorInput: '--input',\n  colorRing: '--ring',\n  borderRadius: '--radius',\n\n  btnBackground: '--btn-bg',\n  btnBackgroundHover: '--btn-bg-hover',\n  btnBackgroundActive: '--btn-bg-active',\n  btnBorder: '--btn-border',\n  btnForeground: '--btn-fg',\n\n  sidebar: '--sidebar',\n  sidebarForeground: '--sidebar-foreground',\n  sidebarPrimary: '--sidebar-primary',\n  sidebarPrimaryForeground: '--sidebar-primary-foreground',\n  sidebarAccent: '--sidebar-accent',\n  sidebarAccentForeground: '--sidebar-accent-foreground',\n  sidebarBorder: '--sidebar-border',\n  sidebarRing: '--sidebar-ring',\n\n  chart1: '--chart-1',\n  chart2: '--chart-2',\n  chart3: '--chart-3',\n  chart4: '--chart-4',\n  chart5: '--chart-5',\n\n  fontSans: '--font-sans',\n  fontMono: '--font-mono',\n};\n\nconst buildCssVars = (token?: ThemeToken): React.CSSProperties => {\n  if (!token) {\n    return {};\n  }\n\n  const vars: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(token)) {\n    if (value === undefined) {\n      continue;\n    }\n    const cssVar = tokenToCssVar[key as keyof ThemeToken];\n    if (cssVar) {\n      vars[cssVar] = value;\n    }\n  }\n\n  return vars as React.CSSProperties;\n};\n\ninterface Props {\n  theme?: ThemeConfig;\n  locale?: Locale;\n  getContainer?: () => HTMLElement;\n  componentSize?: ComponentSize;\n  direction?: 'ltr' | 'rtl';\n  defaultProps?: DefaultProps;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}\n\nconst Config = ({\n  theme = {},\n  locale = {},\n  getContainer,\n  componentSize,\n  direction,\n  defaultProps,\n  className,\n  style,\n  children,\n}: Props) => {\n  const parent = useConfig();\n  const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);\n\n  // `theme` is typically a fresh inline object literal at the call site\n  // (and `parent.theme` inherits the same problem from its own Config\n  // ancestor), so depending on them directly meant mergedTheme/contextValue\n  // got a new identity on every render regardless of whether the actual\n  // values changed — every useConfig() consumer in the tree re-rendered on\n  // every render of whatever's above this Config, which for the common\n  // app-root usage is everything. Depend on a serialized key instead so\n  // the memo only invalidates when the content actually changes; these\n  // are small, string/boolean-only objects, so JSON.stringify is cheap.\n  const themeKey = JSON.stringify(theme);\n  const parentThemeKey = JSON.stringify(parent.theme);\n  const localeKey = JSON.stringify(locale);\n  const parentLocaleKey = JSON.stringify(parent.locale);\n\n  const mergedTheme = useMemo<ThemeConfig>(\n    () => ({\n      ...parent.theme,\n      ...theme,\n      token: {\n        ...parent.theme.token,\n        ...theme.token,\n      },\n      darkToken: {\n        ...parent.theme.darkToken,\n        ...theme.darkToken,\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentThemeKey, themeKey],\n  );\n\n  const mergedLocale = useMemo<Locale>(\n    () => ({\n      ...parent.locale,\n      ...locale,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentLocaleKey, localeKey],\n  );\n\n  const systemPrefersDark = useSystemPrefersDark();\n  const isDarkActive =\n    mergedTheme.dark === 'system'\n      ? systemPrefersDark\n      : mergedTheme.dark === 'dark';\n\n  // `darkToken` overrides individual keys of `token` (not a full swap)\n  // only while dark mode is actually active.\n  const cssVars = useMemo(\n    () =>\n      buildCssVars(\n        isDarkActive\n          ? { ...mergedTheme.token, ...mergedTheme.darkToken }\n          : mergedTheme.token,\n      ),\n    [mergedTheme.token, mergedTheme.darkToken, isDarkActive],\n  );\n\n  const hasCssVars = Object.keys(cssVars).length > 0;\n  const hasDarkMode = mergedTheme.dark !== undefined;\n  const needsWrapper =\n    hasCssVars || hasDarkMode || !!className || !!style || !!direction;\n\n  // Resolution order: an explicit `getContainer` prop on this Config wins;\n  // otherwise, if this Config renders its own themed wrapper below, that's\n  // the default (portaled content appended into it still inherits its CSS\n  // custom properties and matches the `.dark` selector — `display:\n  // contents` only removes the element from the layout box tree, not from\n  // the DOM/cascade); otherwise defer to the parent Config's resolution,\n  // so an inner Config that only sets e.g. `locale` doesn't shadow an\n  // outer one's theme container.\n  const resolvedGetContainer = useCallback((): HTMLElement | undefined => {\n    if (getContainer) {\n      return getContainer();\n    }\n    if (needsWrapper && wrapperEl) {\n      return wrapperEl;\n    }\n    return parent.getContainer();\n  }, [getContainer, needsWrapper, wrapperEl, parent]);\n\n  const resolvedComponentSize = componentSize ?? parent.componentSize;\n  const resolvedDirection = direction ?? parent.direction;\n\n  const defaultPropsKey = JSON.stringify(defaultProps);\n  const parentDefaultPropsKey = JSON.stringify(parent.defaultProps);\n\n  const mergedDefaultProps = useMemo<DefaultProps | undefined>(\n    () =>\n      parent.defaultProps || defaultProps\n        ? { ...parent.defaultProps, ...defaultProps }\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentDefaultPropsKey, defaultPropsKey],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      theme: mergedTheme,\n      locale: mergedLocale,\n      getContainer: resolvedGetContainer,\n      componentSize: resolvedComponentSize,\n      direction: resolvedDirection,\n      defaultProps: mergedDefaultProps,\n      isConfigured: true,\n    }),\n    [\n      mergedTheme,\n      mergedLocale,\n      resolvedGetContainer,\n      resolvedComponentSize,\n      resolvedDirection,\n      mergedDefaultProps,\n    ],\n  );\n\n  const content = (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          ref={setWrapperEl}\n          dir={direction}\n          className={cn(isDarkActive && 'dark', className)}\n          style={{\n            ...(hasCssVars ? cssVars : undefined),\n            ...style,\n            // Keeps this element out of the layout box tree — so it\n            // doesn't intercept flex/grid child relationships or break\n            // height chains like min-h-screen — while custom properties\n            // and the `dark` class selector still cascade to children\n            // normally (inheritance and box generation are separate\n            // mechanisms in CSS). Note this means className/style\n            // shouldn't be used here for anything that needs a real box\n            // (padding, background, borders); Config's className/style are\n            // meant for theming hooks (the `dark` class, arbitrary\n            // selector hooks, custom properties), not layout — spread\n            // after the caller's `style` so it can't be overridden into\n            // something that reintroduces the layout-breaking wrapper this\n            // was added to fix in the first place.\n            display: 'contents',\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Context.Provider>\n  );\n\n  // DirectionProvider is Radix's own mechanism (@radix-ui/react-direction)\n  // for propagating `dir` to every primitive that calls its useDirection()\n  // internally — Select, Menu (Dropdown/Menu), Accordion (Collapse),\n  // RadioGroup, ScrollArea all pick up RTL automatically this way, no\n  // per-component wiring needed. Only wraps when this Config's own\n  // `direction` prop is set (not the merely-inherited resolved value) —\n  // context already cascades on its own, so re-wrapping at every nested\n  // Config that doesn't override direction would just be redundant.\n  // Components with hardcoded LTR-only layout logic that Radix's Direction\n  // context doesn't reach (Popover placement, Splitter, Sider, Drawer)\n  // aren't covered by this and would need dedicated follow-up work.\n  return direction ? (\n    <DirectionProvider dir={direction}>{content}</DirectionProvider>\n  ) : (\n    content\n  );\n};\n\nexport default Config;\nexport { useConfig, DEFAULT_LOCALE };\nexport type {\n  Props,\n  ComponentSize,\n  DefaultProps,\n  Locale,\n  ThemeConfig,\n  ThemeToken,\n};\n"],"mappings":";;;;;;;;;AAiBA,MAAM,mBAAmB;AAEzB,MAAM,gCAAgC,aAAyB;AAC7D,KAAI,OAAO,WAAW,YACpB,cAAa;CAGf,MAAM,MAAM,OAAO,WAAW,iBAAiB;AAC/C,KAAI,iBAAiB,UAAU,SAAS;AACxC,cAAa,IAAI,oBAAoB,UAAU,SAAS;;AAG1D,MAAM,6BACJ,OAAO,WAAW,eAAe,OAAO,WAAW,iBAAiB,CAAC;AAOvE,MAAM,0BAA0B;AAEhC,MAAM,6BACJ,qBACE,8BACA,sBACA,kBACD;AAEH,MAAM,gBAAkD;CACtD,cAAc;CACd,wBAAwB;CACxB,iBAAiB;CACjB,iBAAiB;CACjB,WAAW;CACX,qBAAqB;CACrB,cAAc;CACd,wBAAwB;CACxB,gBAAgB;CAChB,0BAA0B;CAC1B,YAAY;CACZ,sBAAsB;CACtB,aAAa;CACb,uBAAuB;CACvB,kBAAkB;CAClB,aAAa;CACb,YAAY;CACZ,WAAW;CACX,cAAc;CAEd,eAAe;CACf,oBAAoB;CACpB,qBAAqB;CACrB,WAAW;CACX,eAAe;CAEf,SAAS;CACT,mBAAmB;CACnB,gBAAgB;CAChB,0BAA0B;CAC1B,eAAe;CACf,yBAAyB;CACzB,eAAe;CACf,aAAa;CAEb,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CAER,UAAU;CACV,UAAU;CACX;AAED,MAAM,gBAAgB,UAA4C;AAChE,KAAI,CAAC,MACH,QAAO,EAAE;CAGX,MAAM,OAA+B,EAAE;AAEvC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAAE;AAChD,MAAI,UAAU,OACZ;EAEF,MAAM,SAAS,cAAc;AAC7B,MAAI,OACF,MAAK,UAAU;;AAInB,QAAO;;AAeT,MAAM,UAAU,EACd,QAAQ,EAAE,EACV,SAAS,EAAE,EACX,cACA,eACA,WACA,cACA,WACA,OACA,eACW;CACX,MAAM,SAAS,WAAW;CAC1B,MAAM,CAAC,WAAW,gBAAgB,SAAgC,KAAK;CAWvE,MAAM,WAAW,KAAK,UAAU,MAAM;CACtC,MAAM,iBAAiB,KAAK,UAAU,OAAO,MAAM;CACnD,MAAM,YAAY,KAAK,UAAU,OAAO;CACxC,MAAM,kBAAkB,KAAK,UAAU,OAAO,OAAO;CAErD,MAAM,cAAc,eACX;EACL,GAAG,OAAO;EACV,GAAG;EACH,OAAO;GACL,GAAG,OAAO,MAAM;GAChB,GAAG,MAAM;GACV;EACD,WAAW;GACT,GAAG,OAAO,MAAM;GAChB,GAAG,MAAM;GACV;EACF,GAED,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,eAAe,eACZ;EACL,GAAG,OAAO;EACV,GAAG;EACJ,GAED,CAAC,iBAAiB,UAAU,CAC7B;CAED,MAAM,oBAAoB,sBAAsB;CAChD,MAAM,eACJ,YAAY,SAAS,WACjB,oBACA,YAAY,SAAS;CAI3B,MAAM,UAAU,cAEZ,aACE,eACI;EAAE,GAAG,YAAY;EAAO,GAAG,YAAY;EAAW,GAClD,YAAY,MACjB,EACH;EAAC,YAAY;EAAO,YAAY;EAAW;EAAa,CACzD;CAED,MAAM,aAAa,OAAO,KAAK,QAAQ,CAAC,SAAS;CACjD,MAAM,cAAc,YAAY,SAAS;CACzC,MAAM,eACJ,cAAc,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;CAU3D,MAAM,uBAAuB,kBAA2C;AACtE,MAAI,aACF,QAAO,cAAc;AAEvB,MAAI,gBAAgB,UAClB,QAAO;AAET,SAAO,OAAO,cAAc;IAC3B;EAAC;EAAc;EAAc;EAAW;EAAO,CAAC;CAEnD,MAAM,wBAAwB,iBAAiB,OAAO;CACtD,MAAM,oBAAoB,aAAa,OAAO;CAE9C,MAAM,kBAAkB,KAAK,UAAU,aAAa;CAGpD,MAAM,qBAAqB,cAEvB,OAAO,gBAAgB,eACnB;EAAE,GAAG,OAAO;EAAc,GAAG;EAAc,GAC3C,QAEN,CAR4B,KAAK,UAAU,OAAO,aAAa,EAQvC,gBAAgB,CACzC;CAED,MAAM,eAAe,eACZ;EACL,OAAO;EACP,QAAQ;EACR,cAAc;EACd,eAAe;EACf,WAAW;EACX,cAAc;EACd,cAAc;EACf,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,UACJ,oBAAC,QAAQ;EAAS,OAAO;YACtB,eACC,oBAAC;GACC,KAAK;GACL,KAAK;GACL,WAAW,GAAG,gBAAgB,QAAQ,UAAU;GAChD,OAAO;IACL,GAAI,aAAa,UAAU;IAC3B,GAAG;IAcH,SAAS;IACV;GAEA;IACG,GAEN;GAEe;AAcrB,QAAO,YACL,oBAAC;EAAkB,KAAK;YAAY;GAA4B,GAEhE"}

package/dist/providers/{Config → config}/context.d.mts

@@ -1,7 +1,7 @@
 import { ContextValue, Locale } from "./types.mjs";
 import "react";
 
-//#region src/providers/Config/context.d.ts
+//#region src/providers/config/context.d.ts
 declare const DEFAULT_LOCALE: Required<Locale>;
 declare const useConfig: () => ContextValue;
 //#endregion

package/dist/providers/config/context.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.mts","names":[],"sources":["../../../src/providers/config/context.ts"],"mappings":";;;;cAMa,cAAA,EAAgB,QAAA,CAAS,MAAA;AAAA,cAgBzB,SAAA,QAAS,YAAA"}

package/dist/providers/{Config → config}/context.mjs

@@ -2,7 +2,7 @@
 
 import { createContext, useContext } from "react";
 
-//#region src/providers/Config/context.ts
+//#region src/providers/config/context.ts
 const DEFAULT_LOCALE = {
 	close: "닫기",
 	clear: "지우기",
@@ -13,7 +13,9 @@ const DEFAULT_LOCALE = {
 };
 const Context = createContext({
 	theme: {},
-	locale: DEFAULT_LOCALE
+	locale: DEFAULT_LOCALE,
+	getContainer: () => void 0,
+	isConfigured: false
 });
 const useConfig = () => useContext(Context);
 

package/dist/providers/{Config → config}/context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/providers/Config/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\nimport type { ContextValue, Locale } from './types';\n\nexport const DEFAULT_LOCALE: Required<Locale> = {\n  close: '닫기',\n  clear: '지우기',\n  backToTop: '맨 위로',\n  loading: '로딩 중',\n  expand: '펼치기',\n  collapse: '접기',\n};\n\nexport const Context = createContext<ContextValue>({\n  theme: {},\n  locale: DEFAULT_LOCALE,\n});\n\nexport const useConfig = () => useContext(Context);\n"],"mappings":";;;;;AAMA,MAAa,iBAAmC;CAC9C,OAAO;CACP,OAAO;CACP,WAAW;CACX,SAAS;CACT,QAAQ;CACR,UAAU;CACX;AAED,MAAa,UAAU,cAA4B;CACjD,OAAO,EAAE;CACT,QAAQ;CACT,CAAC;AAEF,MAAa,kBAAkB,WAAW,QAAQ"}
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/providers/config/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\nimport type { ContextValue, Locale } from './types';\n\nexport const DEFAULT_LOCALE: Required<Locale> = {\n  close: '닫기',\n  clear: '지우기',\n  backToTop: '맨 위로',\n  loading: '로딩 중',\n  expand: '펼치기',\n  collapse: '접기',\n};\n\nexport const Context = createContext<ContextValue>({\n  theme: {},\n  locale: DEFAULT_LOCALE,\n  getContainer: () => undefined,\n  isConfigured: false,\n});\n\nexport const useConfig = () => useContext(Context);\n"],"mappings":";;;;;AAMA,MAAa,iBAAmC;CAC9C,OAAO;CACP,OAAO;CACP,WAAW;CACX,SAAS;CACT,QAAQ;CACR,UAAU;CACX;AAED,MAAa,UAAU,cAA4B;CACjD,OAAO,EAAE;CACT,QAAQ;CACR,oBAAoB;CACpB,cAAc;CACf,CAAC;AAEF,MAAa,kBAAkB,WAAW,QAAQ"}

package/dist/providers/config/index.d.mts

@@ -0,0 +1,3 @@
+import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./context.mjs";
+import { Config, Props } from "./config.mjs";

package/dist/providers/config/types.d.mts

@@ -0,0 +1,69 @@
+//#region src/providers/config/types.d.ts
+interface ThemeToken {
+  colorPrimary?: string;
+  colorPrimaryForeground?: string;
+  colorBackground?: string;
+  colorForeground?: string;
+  colorCard?: string;
+  colorCardForeground?: string;
+  colorPopover?: string;
+  colorPopoverForeground?: string;
+  colorSecondary?: string;
+  colorSecondaryForeground?: string;
+  colorMuted?: string;
+  colorMutedForeground?: string;
+  colorAccent?: string;
+  colorAccentForeground?: string;
+  colorDestructive?: string;
+  colorBorder?: string;
+  colorInput?: string;
+  colorRing?: string;
+  borderRadius?: string;
+  btnBackground?: string;
+  btnBackgroundHover?: string;
+  btnBackgroundActive?: string;
+  btnBorder?: string;
+  btnForeground?: string;
+  sidebar?: string;
+  sidebarForeground?: string;
+  sidebarPrimary?: string;
+  sidebarPrimaryForeground?: string;
+  sidebarAccent?: string;
+  sidebarAccentForeground?: string;
+  sidebarBorder?: string;
+  sidebarRing?: string;
+  chart1?: string;
+  chart2?: string;
+  chart3?: string;
+  chart4?: string;
+  chart5?: string;
+  fontSans?: string;
+  fontMono?: string;
+}
+interface ThemeConfig {
+  token?: ThemeToken;
+  darkToken?: ThemeToken;
+  dark?: 'light' | 'dark' | 'system';
+}
+interface Locale {
+  close?: string;
+  clear?: string;
+  backToTop?: string;
+  loading?: string;
+  expand?: string;
+  collapse?: string;
+}
+type ComponentSize = 'small' | 'middle' | 'large';
+type DefaultProps = Record<string, Record<string, unknown>>;
+interface ContextValue {
+  theme: ThemeConfig;
+  locale: Locale;
+  direction?: 'ltr' | 'rtl';
+  getContainer: () => HTMLElement | undefined;
+  componentSize?: ComponentSize;
+  defaultProps?: DefaultProps;
+  isConfigured: boolean;
+}
+//#endregion
+export { ComponentSize, ContextValue, DefaultProps, Locale, ThemeConfig, ThemeToken };
+//# sourceMappingURL=types.d.mts.map

package/dist/providers/config/types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/providers/config/types.ts"],"mappings":";UAAiB,UAAA;EAEf,YAAA;EACA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,SAAA;EACA,mBAAA;EACA,YAAA;EACA,sBAAA;EACA,cAAA;EACA,wBAAA;EACA,UAAA;EACA,oBAAA;EACA,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EASA,YAAA;EAIA,aAAA;EACA,kBAAA;EACA,mBAAA;EACA,SAAA;EACA,aAAA;EAGA,OAAA;EACA,iBAAA;EACA,cAAA;EACA,wBAAA;EACA,aAAA;EACA,uBAAA;EACA,aAAA;EACA,WAAA;EAGA,MAAA;EACA,MAAA;EACA,MAAA;EACA,MAAA;EACA,MAAA;EAGA,QAAA;EACA,QAAA;AAAA;AAAA,UAGe,WAAA;EACf,KAAA,GAAQ,UAAA;EAKR,SAAA,GAAY,UAAA;EASZ,IAAA;AAAA;AAAA,UAQe,MAAA;EACf,KAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;AAAA;AAAA,KAMU,aAAA;AAAA,KAYA,YAAA,GAAe,MAAA,SAAe,MAAA;AAAA,UAEzB,YAAA;EACf,KAAA,EAAO,WAAA;EACP,MAAA,EAAQ,MAAA;EACR,SAAA;EAUA,YAAA,QAAoB,WAAA;EACpB,aAAA,GAAgB,aAAA;EAChB,YAAA,GAAe,YAAA;EAKf,YAAA;AAAA"}

package/dist/providers.d.mts

@@ -1,4 +1,5 @@
-import { Locale, ThemeConfig, ThemeToken } from "./providers/Config/types.mjs";
-import { DEFAULT_LOCALE, useConfig } from "./providers/Config/context.mjs";
-import { Config, Props } from "./providers/Config/index.mjs";
-export { Config, type Props as ConfigProps, DEFAULT_LOCALE, type Locale, type ThemeConfig, type ThemeToken, useConfig };
+import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import { Config, Props } from "./providers/config/config.mjs";
+import "./providers/config/index.mjs";
+export { type ComponentSize, Config, type Props as ConfigProps, DEFAULT_LOCALE, type DefaultProps, type Locale, type ThemeConfig, type ThemeToken, useConfig };

package/dist/providers.mjs

@@ -1,4 +1,4 @@
-import { DEFAULT_LOCALE, useConfig } from "./providers/Config/context.mjs";
-import Config from "./providers/Config/index.mjs";
+import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import Config from "./providers/config/config.mjs";
 
 export { Config, DEFAULT_LOCALE, useConfig };

package/dist/style.css

@@ -3,6 +3,8 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
+    --font-sans: var(--font-geist-sans);
+    --font-mono: var(--font-geist-mono);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
@@ -54,6 +56,8 @@
     --leading-snug: 1.375;
     --leading-normal: 1.5;
     --radius-xs: 0.125rem;
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-lg: var(--radius);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
@@ -1426,6 +1430,9 @@
   .text-yellow-600 {
     color: var(--color-yellow-600);
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .underline {
     text-decoration-line: underline;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -131,6 +131,7 @@
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-direction": "^1.1.1",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",

package/dist/providers/Config/context.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.mts","names":[],"sources":["../../../src/providers/Config/context.ts"],"mappings":";;;;cAMa,cAAA,EAAgB,QAAA,CAAS,MAAA;AAAA,cAczB,SAAA,QAAS,YAAA"}

package/dist/providers/Config/index.d.mts

@@ -1,20 +0,0 @@
-import { Locale, ThemeConfig, ThemeToken } from "./types.mjs";
-import { DEFAULT_LOCALE, useConfig } from "./context.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/providers/Config/index.d.ts
-interface Props {
-  theme?: ThemeConfig;
-  locale?: Locale;
-  className?: string;
-  children: React.ReactNode;
-}
-declare const Config: ({
-  theme,
-  locale,
-  className,
-  children
-}: Props) => react_jsx_runtime0.JSX.Element;
-//#endregion
-export { Config, type Props };
-//# sourceMappingURL=index.d.mts.map

package/dist/providers/Config/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../src/providers/Config/index.tsx"],"mappings":";;;;;UAmDU,KAAA;EACR,KAAA,GAAQ,WAAA;EACR,MAAA,GAAS,MAAA;EACT,SAAA;EACA,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGZ,MAAA;EAAU,KAAA;EAAA,MAAA;EAAA,SAAA;EAAA;AAAA,GAAkD,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/providers/Config/index.mjs

@@ -1,81 +0,0 @@
-'use client';
-
-import { cn } from "../../utils.mjs";
-import { Context, DEFAULT_LOCALE, useConfig } from "./context.mjs";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/providers/Config/index.tsx
-const tokenToCssVar = {
-	colorPrimary: "--primary",
-	colorPrimaryForeground: "--primary-foreground",
-	colorBackground: "--background",
-	colorForeground: "--foreground",
-	colorCard: "--card",
-	colorCardForeground: "--card-foreground",
-	colorPopover: "--popover",
-	colorPopoverForeground: "--popover-foreground",
-	colorSecondary: "--secondary",
-	colorSecondaryForeground: "--secondary-foreground",
-	colorMuted: "--muted",
-	colorMutedForeground: "--muted-foreground",
-	colorAccent: "--accent",
-	colorAccentForeground: "--accent-foreground",
-	colorDestructive: "--destructive",
-	colorBorder: "--border",
-	colorInput: "--input",
-	colorRing: "--ring",
-	borderRadius: "--radius"
-};
-const buildCssVars = (token) => {
-	if (!token) return {};
-	const vars = {};
-	for (const [key, value] of Object.entries(token)) {
-		if (value === void 0) continue;
-		const cssVar = tokenToCssVar[key];
-		if (cssVar) vars[cssVar] = value;
-	}
-	return vars;
-};
-const Config = ({ theme = {}, locale = {}, className, children }) => {
-	const parent = useConfig();
-	const themeKey = JSON.stringify(theme);
-	const parentThemeKey = JSON.stringify(parent.theme);
-	const localeKey = JSON.stringify(locale);
-	const parentLocaleKey = JSON.stringify(parent.locale);
-	const mergedTheme = useMemo(() => ({
-		...parent.theme,
-		...theme,
-		token: {
-			...parent.theme.token,
-			...theme.token
-		}
-	}), [parentThemeKey, themeKey]);
-	const mergedLocale = useMemo(() => ({
-		...parent.locale,
-		...locale
-	}), [parentLocaleKey, localeKey]);
-	const contextValue = useMemo(() => ({
-		theme: mergedTheme,
-		locale: mergedLocale
-	}), [mergedTheme, mergedLocale]);
-	const cssVars = useMemo(() => buildCssVars(mergedTheme.token), [mergedTheme.token]);
-	const hasCssVars = Object.keys(cssVars).length > 0;
-	const hasDarkMode = mergedTheme.dark !== void 0;
-	const needsWrapper = hasCssVars || hasDarkMode || className;
-	return /* @__PURE__ */ jsx(Context.Provider, {
-		value: contextValue,
-		children: needsWrapper ? /* @__PURE__ */ jsx("div", {
-			className: cn(mergedTheme.dark && "dark", className),
-			style: {
-				...hasCssVars ? cssVars : void 0,
-				display: "contents"
-			},
-			children
-		}) : children
-	});
-};
-
-//#endregion
-export { Config as default };
-//# sourceMappingURL=index.mjs.map

package/dist/providers/Config/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/providers/Config/index.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Context, DEFAULT_LOCALE, useConfig } from './context';\nimport type { Locale, ThemeConfig, ThemeToken } from './types';\n\nconst tokenToCssVar: Record<keyof ThemeToken, string> = {\n  colorPrimary: '--primary',\n  colorPrimaryForeground: '--primary-foreground',\n  colorBackground: '--background',\n  colorForeground: '--foreground',\n  colorCard: '--card',\n  colorCardForeground: '--card-foreground',\n  colorPopover: '--popover',\n  colorPopoverForeground: '--popover-foreground',\n  colorSecondary: '--secondary',\n  colorSecondaryForeground: '--secondary-foreground',\n  colorMuted: '--muted',\n  colorMutedForeground: '--muted-foreground',\n  colorAccent: '--accent',\n  colorAccentForeground: '--accent-foreground',\n  colorDestructive: '--destructive',\n  colorBorder: '--border',\n  colorInput: '--input',\n  colorRing: '--ring',\n  borderRadius: '--radius',\n};\n\nconst buildCssVars = (token?: ThemeToken): React.CSSProperties => {\n  if (!token) {\n    return {};\n  }\n\n  const vars: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(token)) {\n    if (value === undefined) {\n      continue;\n    }\n    const cssVar = tokenToCssVar[key as keyof ThemeToken];\n    if (cssVar) {\n      vars[cssVar] = value;\n    }\n  }\n\n  return vars as React.CSSProperties;\n};\n\ninterface Props {\n  theme?: ThemeConfig;\n  locale?: Locale;\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst Config = ({ theme = {}, locale = {}, className, children }: Props) => {\n  const parent = useConfig();\n\n  // `theme` is typically a fresh inline object literal at the call site\n  // (and `parent.theme` inherits the same problem from its own Config\n  // ancestor), so depending on them directly meant mergedTheme/contextValue\n  // got a new identity on every render regardless of whether the actual\n  // values changed — every useConfig() consumer in the tree re-rendered on\n  // every render of whatever's above this Config, which for the common\n  // app-root usage is everything. Depend on a serialized key instead so\n  // the memo only invalidates when the content actually changes; these\n  // are small, string/boolean-only objects, so JSON.stringify is cheap.\n  const themeKey = JSON.stringify(theme);\n  const parentThemeKey = JSON.stringify(parent.theme);\n  const localeKey = JSON.stringify(locale);\n  const parentLocaleKey = JSON.stringify(parent.locale);\n\n  const mergedTheme = useMemo<ThemeConfig>(\n    () => ({\n      ...parent.theme,\n      ...theme,\n      token: {\n        ...parent.theme.token,\n        ...theme.token,\n      },\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentThemeKey, themeKey],\n  );\n\n  const mergedLocale = useMemo<Locale>(\n    () => ({\n      ...parent.locale,\n      ...locale,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [parentLocaleKey, localeKey],\n  );\n\n  const contextValue = useMemo(\n    () => ({ theme: mergedTheme, locale: mergedLocale }),\n    [mergedTheme, mergedLocale],\n  );\n\n  const cssVars = useMemo(\n    () => buildCssVars(mergedTheme.token),\n    [mergedTheme.token],\n  );\n\n  const hasCssVars = Object.keys(cssVars).length > 0;\n  const hasDarkMode = mergedTheme.dark !== undefined;\n  const needsWrapper = hasCssVars || hasDarkMode || className;\n\n  return (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          className={cn(mergedTheme.dark && 'dark', className)}\n          style={{\n            ...(hasCssVars ? cssVars : undefined),\n            // Keeps this element out of the layout box tree — so it\n            // doesn't intercept flex/grid child relationships or break\n            // height chains like min-h-screen — while custom properties\n            // and the `dark` class selector still cascade to children\n            // normally (inheritance and box generation are separate\n            // mechanisms in CSS). Note this means className shouldn't be\n            // used here for anything that needs a real box (padding,\n            // background, borders); Config's className is meant for\n            // theming hooks (the `dark` class, arbitrary selector hooks),\n            // not layout.\n            display: 'contents',\n          }}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Context.Provider>\n  );\n};\n\nexport default Config;\nexport { useConfig, DEFAULT_LOCALE };\nexport type { Props, Locale, ThemeConfig, ThemeToken };\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAkD;CACtD,cAAc;CACd,wBAAwB;CACxB,iBAAiB;CACjB,iBAAiB;CACjB,WAAW;CACX,qBAAqB;CACrB,cAAc;CACd,wBAAwB;CACxB,gBAAgB;CAChB,0BAA0B;CAC1B,YAAY;CACZ,sBAAsB;CACtB,aAAa;CACb,uBAAuB;CACvB,kBAAkB;CAClB,aAAa;CACb,YAAY;CACZ,WAAW;CACX,cAAc;CACf;AAED,MAAM,gBAAgB,UAA4C;AAChE,KAAI,CAAC,MACH,QAAO,EAAE;CAGX,MAAM,OAA+B,EAAE;AAEvC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAAE;AAChD,MAAI,UAAU,OACZ;EAEF,MAAM,SAAS,cAAc;AAC7B,MAAI,OACF,MAAK,UAAU;;AAInB,QAAO;;AAUT,MAAM,UAAU,EAAE,QAAQ,EAAE,EAAE,SAAS,EAAE,EAAE,WAAW,eAAsB;CAC1E,MAAM,SAAS,WAAW;CAW1B,MAAM,WAAW,KAAK,UAAU,MAAM;CACtC,MAAM,iBAAiB,KAAK,UAAU,OAAO,MAAM;CACnD,MAAM,YAAY,KAAK,UAAU,OAAO;CACxC,MAAM,kBAAkB,KAAK,UAAU,OAAO,OAAO;CAErD,MAAM,cAAc,eACX;EACL,GAAG,OAAO;EACV,GAAG;EACH,OAAO;GACL,GAAG,OAAO,MAAM;GAChB,GAAG,MAAM;GACV;EACF,GAED,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,eAAe,eACZ;EACL,GAAG,OAAO;EACV,GAAG;EACJ,GAED,CAAC,iBAAiB,UAAU,CAC7B;CAED,MAAM,eAAe,eACZ;EAAE,OAAO;EAAa,QAAQ;EAAc,GACnD,CAAC,aAAa,aAAa,CAC5B;CAED,MAAM,UAAU,cACR,aAAa,YAAY,MAAM,EACrC,CAAC,YAAY,MAAM,CACpB;CAED,MAAM,aAAa,OAAO,KAAK,QAAQ,CAAC,SAAS;CACjD,MAAM,cAAc,YAAY,SAAS;CACzC,MAAM,eAAe,cAAc,eAAe;AAElD,QACE,oBAAC,QAAQ;EAAS,OAAO;YACtB,eACC,oBAAC;GACC,WAAW,GAAG,YAAY,QAAQ,QAAQ,UAAU;GACpD,OAAO;IACL,GAAI,aAAa,UAAU;IAW3B,SAAS;IACV;GAEA;IACG,GAEN;GAEe"}

package/dist/providers/Config/types.d.mts

@@ -1,41 +0,0 @@
-//#region src/providers/Config/types.d.ts
-interface ThemeToken {
-  colorPrimary?: string;
-  colorPrimaryForeground?: string;
-  colorBackground?: string;
-  colorForeground?: string;
-  colorCard?: string;
-  colorCardForeground?: string;
-  colorPopover?: string;
-  colorPopoverForeground?: string;
-  colorSecondary?: string;
-  colorSecondaryForeground?: string;
-  colorMuted?: string;
-  colorMutedForeground?: string;
-  colorAccent?: string;
-  colorAccentForeground?: string;
-  colorDestructive?: string;
-  colorBorder?: string;
-  colorInput?: string;
-  colorRing?: string;
-  borderRadius?: string;
-}
-interface ThemeConfig {
-  token?: ThemeToken;
-  dark?: boolean;
-}
-interface Locale {
-  close?: string;
-  clear?: string;
-  backToTop?: string;
-  loading?: string;
-  expand?: string;
-  collapse?: string;
-}
-interface ContextValue {
-  theme: ThemeConfig;
-  locale: Locale;
-}
-//#endregion
-export { ContextValue, Locale, ThemeConfig, ThemeToken };
-//# sourceMappingURL=types.d.mts.map

package/dist/providers/Config/types.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/providers/Config/types.ts"],"mappings":";UAAiB,UAAA;EAEf,YAAA;EACA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,SAAA;EACA,mBAAA;EACA,YAAA;EACA,sBAAA;EACA,cAAA;EACA,wBAAA;EACA,UAAA;EACA,oBAAA;EACA,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EAGA,YAAA;AAAA;AAAA,UAGe,WAAA;EACf,KAAA,GAAQ,UAAA;EACR,IAAA;AAAA;AAAA,UAQe,MAAA;EACf,KAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;AAAA;AAAA,UAGe,YAAA;EACf,KAAA,EAAO,WAAA;EACP,MAAA,EAAQ,MAAA;AAAA"}