@jbpark/ui-kit 4.0.0 → 4.1.0

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/badge.d.mts

@@ -8,7 +8,7 @@ declare namespace badge_d_exports {
   export { Badge, Props, badgeVariants };
 }
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+  variant?: "outline" | "default" | "destructive" | "secondary" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;

package/dist/core/button.d.mts

@@ -8,7 +8,7 @@ declare namespace button_d_exports {
   export { Button, Props, buttonVariants };
 }
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+  variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
   size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {

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 { 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 };

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/index.d.mts → config/config.d.mts}

@@ -2,19 +2,21 @@ 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
+//#region src/providers/config/config.d.ts
 interface Props {
   theme?: ThemeConfig;
   locale?: Locale;
+  getContainer?: () => HTMLElement;
   className?: string;
   children: React.ReactNode;
 }
 declare const Config: ({
   theme,
   locale,
+  getContainer,
   className,
   children
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Config, type Props };
-//# sourceMappingURL=index.d.mts.map
+//# 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":";;;;;UAmDU,KAAA;EACR,KAAA,GAAQ,WAAA;EACR,MAAA,GAAS,MAAA;EACT,YAAA,SAAqB,WAAA;EACrB,SAAA;EACA,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGZ,MAAA;EAAU,KAAA;EAAA,MAAA;EAAA,YAAA;EAAA,SAAA;EAAA;AAAA,GAMb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -2,10 +2,10 @@
 
 import { cn } from "../../utils.mjs";
 import { Context, DEFAULT_LOCALE, useConfig } from "./context.mjs";
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/providers/Config/index.tsx
+//#region src/providers/config/config.tsx
 const tokenToCssVar = {
 	colorPrimary: "--primary",
 	colorPrimaryForeground: "--primary-foreground",
@@ -37,8 +37,9 @@ const buildCssVars = (token) => {
 	}
 	return vars;
 };
-const Config = ({ theme = {}, locale = {}, className, children }) => {
+const Config = ({ theme = {}, locale = {}, getContainer, className, 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);
@@ -55,17 +56,33 @@ const Config = ({ theme = {}, locale = {}, className, children }) => {
 		...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;
+	const resolvedGetContainer = useCallback(() => {
+		if (getContainer) return getContainer();
+		if (needsWrapper && wrapperEl) return wrapperEl;
+		return parent.getContainer();
+	}, [
+		getContainer,
+		needsWrapper,
+		wrapperEl,
+		parent
+	]);
+	const contextValue = useMemo(() => ({
+		theme: mergedTheme,
+		locale: mergedLocale,
+		getContainer: resolvedGetContainer
+	}), [
+		mergedTheme,
+		mergedLocale,
+		resolvedGetContainer
+	]);
 	return /* @__PURE__ */ jsx(Context.Provider, {
 		value: contextValue,
 		children: needsWrapper ? /* @__PURE__ */ jsx("div", {
+			ref: setWrapperEl,
 			className: cn(mergedTheme.dark && "dark", className),
 			style: {
 				...hasCssVars ? cssVars : void 0,
@@ -78,4 +95,4 @@ const Config = ({ theme = {}, locale = {}, className, children }) => {
 
 //#endregion
 export { Config as default };
-//# sourceMappingURL=index.mjs.map
+//# 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 } 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  getContainer?: () => HTMLElement;\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst Config = ({\n  theme = {},\n  locale = {},\n  getContainer,\n  className,\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    }),\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 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  // 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 contextValue = useMemo(\n    () => ({\n      theme: mergedTheme,\n      locale: mergedLocale,\n      getContainer: resolvedGetContainer,\n    }),\n    [mergedTheme, mergedLocale, resolvedGetContainer],\n  );\n\n  return (\n    <Context.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          ref={setWrapperEl}\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;;AAWT,MAAM,UAAU,EACd,QAAQ,EAAE,EACV,SAAS,EAAE,EACX,cACA,WACA,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;EACF,GAED,CAAC,gBAAgB,SAAS,CAC3B;CAED,MAAM,eAAe,eACZ;EACL,GAAG,OAAO;EACV,GAAG;EACJ,GAED,CAAC,iBAAiB,UAAU,CAC7B;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;CAUlD,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,eAAe,eACZ;EACL,OAAO;EACP,QAAQ;EACR,cAAc;EACf,GACD;EAAC;EAAa;EAAc;EAAqB,CAClD;AAED,QACE,oBAAC,QAAQ;EAAS,OAAO;YACtB,eACC,oBAAC;GACC,KAAK;GACL,WAAW,GAAG,YAAY,QAAQ,QAAQ,UAAU;GACpD,OAAO;IACL,GAAI,aAAa,UAAU;IAW3B,SAAS;IACV;GAEA;IACG,GAEN;GAEe"}

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,cAezB,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,8 @@ const DEFAULT_LOCALE = {
 };
 const Context = createContext({
 	theme: {},
-	locale: DEFAULT_LOCALE
+	locale: DEFAULT_LOCALE,
+	getContainer: () => void 0
 });
 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});\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;CACrB,CAAC;AAEF,MAAa,kBAAkB,WAAW,QAAQ"}

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

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

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

@@ -1,4 +1,4 @@
-//#region src/providers/Config/types.d.ts
+//#region src/providers/config/types.d.ts
 interface ThemeToken {
   colorPrimary?: string;
   colorPrimaryForeground?: string;
@@ -35,6 +35,7 @@ interface Locale {
 interface ContextValue {
   theme: ThemeConfig;
   locale: Locale;
+  getContainer: () => HTMLElement | undefined;
 }
 //#endregion
 export { ContextValue, Locale, ThemeConfig, ThemeToken };

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

@@ -1 +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;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"}
+{"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;EAUR,YAAA,QAAoB,WAAA;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";
+import { 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 { Config, type Props as ConfigProps, DEFAULT_LOCALE, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "4.0.0",
+  "version": "4.1.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",

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.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.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"}