@jbpark/ui-kit 10.0.1 → 10.1.0

package/dist/components/organisms/toast.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.mts","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"mappings":";KAkBK;UAEY;EACf,SAAS;EACT,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,OAAO,MAAM;EACb;EACA,SAAS,MAAM;EACf;EACA;;UAGQ,oBAAoB;EAC5B;EACA;EACA,YAAY;;cAUR;KASH,QAAA,OAAA,aAAA,MAAA,UAAA,QAAA,WAAA,WAAA,wBAAK,IAAA;;;EAoHa,KAAA,OAAA,MAAM,WAAS,QAAU;EAEtB,QAAA,OAAA,MAAM,WAAS,QAAU;EAE3B,MAAA,OAAA,MAAM,WAAS,QAAU;EAEvB,QAAA,OAAA,MAAM,WAAS,QAAU;;KAR5C,iBAAiB,KAAK"}
+{"version":3,"file":"toast.d.mts","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"mappings":";KAkBK;UAEY;EACf,SAAS;EACT,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,OAAO,MAAM;EACb;EACA,SAAS,MAAM;EACf;EACA;;UAGQ,oBAAoB;EAC5B;EACA;EACA,YAAY;;cAUR;KASH,QAAA,OAAA,aAAA,MAAA,UAAA,QAAA,WAAA,WAAA,wBAAK,IAAA;;;EAqHa,KAAA,OAAA,MAAM,WAAS,QAAU;EAEtB,QAAA,OAAA,MAAM,WAAS,QAAU;EAE3B,MAAA,OAAA,MAAM,WAAS,QAAU;EAEvB,QAAA,OAAA,MAAM,WAAS,QAAU;;KAR5C,iBAAiB,KAAK"}

package/dist/components/organisms/toast.mjs

@@ -5,8 +5,8 @@ import Button from "../../Button.mjs";
 import { createImperativeStack, isBrowser } from "./imperative-stack.mjs";
 import { useState } from "react";
 import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useTimeout } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/components/organisms/toast.tsx
 const STATUS_ICONS = {
@@ -18,6 +18,7 @@ const STATUS_ICONS = {
 const Toast = ({ status, title, description, icon, closable = true, action, className, onClose }) => {
 	const { locale } = useConfig();
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "toast",
 		role: status === "error" ? "alert" : "status",
 		className: cn("pointer-events-auto flex w-80 items-start gap-3 rounded-lg", "bg-background text-foreground border p-4 shadow-lg", className),
 		children: [

package/dist/components/organisms/toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.mjs","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useTimeout } from '@jbpark/use-hooks';\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport {\n  type ImperativeStack,\n  createImperativeStack,\n  isBrowser,\n} from './imperative-stack';\n\ntype ToastStatus = 'info' | 'success' | 'error' | 'warning';\n\nexport interface Props {\n  status?: ToastStatus;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  closable?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  onClose?: () => void;\n}\n\ninterface StaticProps extends Props {\n  id?: string;\n  duration?: number;\n  container?: HTMLElement;\n}\n\nconst STATUS_ICONS: Record<ToastStatus, React.ReactNode> = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n};\n\nconst Toast = ({\n  status,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  const { locale } = useConfig();\n\n  return (\n    <div\n      role={status === 'error' ? 'alert' : 'status'}\n      className={cn(\n        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg',\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || status) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (status && STATUS_ICONS[status])}\n        </div>\n      )}\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        {description && (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n      {closable && (\n        <Button\n          variant=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label={locale.close ?? DEFAULT_LOCALE.close}\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst StaticToast = ({\n  id,\n  duration = DEFAULT_DURATION,\n  container,\n  onClose,\n  ...props\n}: StaticProps & { id: string }): React.ReactPortal | null => {\n  const [visible, setVisible] = useState(true);\n\n  const close = () => {\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      toastStack.destroy(id);\n    }, 200);\n  };\n\n  const { reset, clear } = useTimeout(close, duration || null);\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : 'translate-x-2 opacity-0',\n      )}\n      // Without this, a toast with a closable/action button (or one the\n      // user is mid-read on) could auto-dismiss itself out from under\n      // them — hovering or focusing anything inside pauses the timer,\n      // moving away restarts it from the full duration.\n      onMouseEnter={clear}\n      onMouseLeave={reset}\n      onFocus={clear}\n      onBlur={reset}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    toastStack.getRootElement(container)!,\n  );\n};\n\nconst toastStack: ImperativeStack<StaticProps> =\n  createImperativeStack<StaticProps>({\n    createRootElement: () => {\n      const el = document.createElement('div');\n      el.setAttribute('role', 'region');\n      // Plain DOM, created outside any React tree — no Config to read a\n      // locale override from until #226 gives the imperative stack a way\n      // to inherit one.\n      el.setAttribute('aria-label', 'Notifications');\n      el.style.zIndex = '10000';\n      el.style.position = 'fixed';\n      el.style.right = '0';\n      el.style.bottom = '0';\n      el.style.display = 'flex';\n      el.style.flexDirection = 'column-reverse';\n      el.style.gap = '8px';\n      el.style.padding = '16px';\n      el.style.pointerEvents = 'none';\n      return el;\n    },\n    StackItem: StaticToast,\n  });\n\nToast.destroy = toastStack.destroy;\n\nToast.destroyAll = () => {\n  toastStack.destroy();\n};\n\ntype TriggerOptions = Omit<StaticProps, 'status' | 'title'>;\n\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'warning', title, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,eAAqD;CACzD,MAAM,oBAAC,MAAD,EAAM,WAAU,gBAAiB,CAAA;CACvC,SAAS,oBAAC,OAAD,EAAO,WAAU,iBAAkB,CAAA;CAC5C,OAAO,oBAAC,UAAD,EAAU,WAAU,eAAgB,CAAA;CAC3C,SAAS,oBAAC,cAAD,EAAc,WAAU,kBAAmB,CAAA;AACtD;AAEA,MAAM,SAAS,EACb,QACA,OACA,aACA,MACA,WAAW,MACX,QACA,WACA,cACW;CACX,MAAM,EAAE,WAAW,UAAU;CAE7B,OACE,qBAAC,OAAD;EACE,MAAM,WAAW,UAAU,UAAU;EACrC,WAAW,GACT,8DACA,sDACA,SAEF;EAPF,UAAA;IASI,QAAQ,WACR,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,QAAS,UAAU,aAAa;GAC9B,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,KAAD;MAAG,WAAU;MAAuB,UAAA;KAAS,CAAA;KAC5C,eACC,oBAAC,KAAD;MAAG,WAAU;MAAiC,UAAA;KAAe,CAAA;KAE9D,UAAU,oBAAC,OAAD;MAAK,WAAU;MAAQ,UAAA;KAAY,CAAA;IAC3C;;GACJ,YACC,oBAAC,QAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAY,OAAO,SAAS,eAAe;IAC3C,MAAM,oBAAC,GAAD,CAAI,CAAA;IACV,SAAS;GACV,CAAA;EAEA;;AAET;AAEA,MAAM,mBAAmB;AAEzB,MAAM,eAAe,EACnB,IACA,WAAW,kBACX,WACA,SACA,GAAG,YACyD;CAC5D,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,MAAM,cAAc;EAClB,UAAU;EACV,WAAW,KAAK;EAChB,iBAAiB;GACf,WAAW,QAAQ,EAAE;EACvB,GAAG,GAAG;CACR;CAEA,MAAM,EAAE,OAAO,UAAU,WAAW,OAAO,YAAY,IAAI;CAE3D,IAAI,CAAC,WACH,OAAO;CAGT,OAAO,aACL,oBAAC,OAAD;EACE,WAAW,GACT,+BACA,UAAU,gBAAgB,yBAC5B;EAKA,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EAER,UAAA,oBAAC,OAAD;GAAO,GAAI;GAAO,SAAS;EAAQ,CAAA;CAChC,CAAA,GACL,WAAW,eAAe,SAAS,CACrC;AACF;AAEA,MAAM,aACJ,sBAAmC;CACjC,yBAAyB;EACvB,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,aAAa,QAAQ,QAAQ;EAIhC,GAAG,aAAa,cAAc,eAAe;EAC7C,GAAG,MAAM,SAAS;EAClB,GAAG,MAAM,WAAW;EACpB,GAAG,MAAM,QAAQ;EACjB,GAAG,MAAM,SAAS;EAClB,GAAG,MAAM,UAAU;EACnB,GAAG,MAAM,gBAAgB;EACzB,GAAG,MAAM,MAAM;EACf,GAAG,MAAM,UAAU;EACnB,GAAG,MAAM,gBAAgB;EACzB,OAAO;CACT;CACA,WAAW;AACb,CAAC;AAEH,MAAM,UAAU,WAAW;AAE3B,MAAM,mBAAmB;CACvB,WAAW,QAAQ;AACrB;AAIA,MAAM,QAAQ,OAAwB,UACpC,WAAW,OAAO;CAAE,QAAQ;CAAQ;CAAO,GAAG;AAAM,CAAC;AACvD,MAAM,WAAW,OAAwB,UACvC,WAAW,OAAO;CAAE,QAAQ;CAAW;CAAO,GAAG;AAAM,CAAC;AAC1D,MAAM,SAAS,OAAwB,UACrC,WAAW,OAAO;CAAE,QAAQ;CAAS;CAAO,GAAG;AAAM,CAAC;AACxD,MAAM,WAAW,OAAwB,UACvC,WAAW,OAAO;CAAE,QAAQ;CAAW;CAAO,GAAG;AAAM,CAAC"}
+{"version":3,"file":"toast.mjs","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useTimeout } from '@jbpark/use-hooks';\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport {\n  type ImperativeStack,\n  createImperativeStack,\n  isBrowser,\n} from './imperative-stack';\n\ntype ToastStatus = 'info' | 'success' | 'error' | 'warning';\n\nexport interface Props {\n  status?: ToastStatus;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  closable?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  onClose?: () => void;\n}\n\ninterface StaticProps extends Props {\n  id?: string;\n  duration?: number;\n  container?: HTMLElement;\n}\n\nconst STATUS_ICONS: Record<ToastStatus, React.ReactNode> = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n};\n\nconst Toast = ({\n  status,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  const { locale } = useConfig();\n\n  return (\n    <div\n      data-slot=\"toast\"\n      role={status === 'error' ? 'alert' : 'status'}\n      className={cn(\n        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg',\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || status) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (status && STATUS_ICONS[status])}\n        </div>\n      )}\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        {description && (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n      {closable && (\n        <Button\n          variant=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label={locale.close ?? DEFAULT_LOCALE.close}\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst StaticToast = ({\n  id,\n  duration = DEFAULT_DURATION,\n  container,\n  onClose,\n  ...props\n}: StaticProps & { id: string }): React.ReactPortal | null => {\n  const [visible, setVisible] = useState(true);\n\n  const close = () => {\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      toastStack.destroy(id);\n    }, 200);\n  };\n\n  const { reset, clear } = useTimeout(close, duration || null);\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : 'translate-x-2 opacity-0',\n      )}\n      // Without this, a toast with a closable/action button (or one the\n      // user is mid-read on) could auto-dismiss itself out from under\n      // them — hovering or focusing anything inside pauses the timer,\n      // moving away restarts it from the full duration.\n      onMouseEnter={clear}\n      onMouseLeave={reset}\n      onFocus={clear}\n      onBlur={reset}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    toastStack.getRootElement(container)!,\n  );\n};\n\nconst toastStack: ImperativeStack<StaticProps> =\n  createImperativeStack<StaticProps>({\n    createRootElement: () => {\n      const el = document.createElement('div');\n      el.setAttribute('role', 'region');\n      // Plain DOM, created outside any React tree — no Config to read a\n      // locale override from until #226 gives the imperative stack a way\n      // to inherit one.\n      el.setAttribute('aria-label', 'Notifications');\n      el.style.zIndex = '10000';\n      el.style.position = 'fixed';\n      el.style.right = '0';\n      el.style.bottom = '0';\n      el.style.display = 'flex';\n      el.style.flexDirection = 'column-reverse';\n      el.style.gap = '8px';\n      el.style.padding = '16px';\n      el.style.pointerEvents = 'none';\n      return el;\n    },\n    StackItem: StaticToast,\n  });\n\nToast.destroy = toastStack.destroy;\n\nToast.destroyAll = () => {\n  toastStack.destroy();\n};\n\ntype TriggerOptions = Omit<StaticProps, 'status' | 'title'>;\n\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'warning', title, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,eAAqD;CACzD,MAAM,oBAAC,MAAD,EAAM,WAAU,gBAAiB,CAAA;CACvC,SAAS,oBAAC,OAAD,EAAO,WAAU,iBAAkB,CAAA;CAC5C,OAAO,oBAAC,UAAD,EAAU,WAAU,eAAgB,CAAA;CAC3C,SAAS,oBAAC,cAAD,EAAc,WAAU,kBAAmB,CAAA;AACtD;AAEA,MAAM,SAAS,EACb,QACA,OACA,aACA,MACA,WAAW,MACX,QACA,WACA,cACW;CACX,MAAM,EAAE,WAAW,UAAU;CAE7B,OACE,qBAAC,OAAD;EACE,aAAU;EACV,MAAM,WAAW,UAAU,UAAU;EACrC,WAAW,GACT,8DACA,sDACA,SAEF;EARF,UAAA;IAUI,QAAQ,WACR,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,QAAS,UAAU,aAAa;GAC9B,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,KAAD;MAAG,WAAU;MAAuB,UAAA;KAAS,CAAA;KAC5C,eACC,oBAAC,KAAD;MAAG,WAAU;MAAiC,UAAA;KAAe,CAAA;KAE9D,UAAU,oBAAC,OAAD;MAAK,WAAU;MAAQ,UAAA;KAAY,CAAA;IAC3C;;GACJ,YACC,oBAAC,QAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAY,OAAO,SAAS,eAAe;IAC3C,MAAM,oBAAC,GAAD,CAAI,CAAA;IACV,SAAS;GACV,CAAA;EAEA;;AAET;AAEA,MAAM,mBAAmB;AAEzB,MAAM,eAAe,EACnB,IACA,WAAW,kBACX,WACA,SACA,GAAG,YACyD;CAC5D,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,MAAM,cAAc;EAClB,UAAU;EACV,WAAW,KAAK;EAChB,iBAAiB;GACf,WAAW,QAAQ,EAAE;EACvB,GAAG,GAAG;CACR;CAEA,MAAM,EAAE,OAAO,UAAU,WAAW,OAAO,YAAY,IAAI;CAE3D,IAAI,CAAC,WACH,OAAO;CAGT,OAAO,aACL,oBAAC,OAAD;EACE,WAAW,GACT,+BACA,UAAU,gBAAgB,yBAC5B;EAKA,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EAER,UAAA,oBAAC,OAAD;GAAO,GAAI;GAAO,SAAS;EAAQ,CAAA;CAChC,CAAA,GACL,WAAW,eAAe,SAAS,CACrC;AACF;AAEA,MAAM,aACJ,sBAAmC;CACjC,yBAAyB;EACvB,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,aAAa,QAAQ,QAAQ;EAIhC,GAAG,aAAa,cAAc,eAAe;EAC7C,GAAG,MAAM,SAAS;EAClB,GAAG,MAAM,WAAW;EACpB,GAAG,MAAM,QAAQ;EACjB,GAAG,MAAM,SAAS;EAClB,GAAG,MAAM,UAAU;EACnB,GAAG,MAAM,gBAAgB;EACzB,GAAG,MAAM,MAAM;EACf,GAAG,MAAM,UAAU;EACnB,GAAG,MAAM,gBAAgB;EACzB,OAAO;CACT;CACA,WAAW;AACb,CAAC;AAEH,MAAM,UAAU,WAAW;AAE3B,MAAM,mBAAmB;CACvB,WAAW,QAAQ;AACrB;AAIA,MAAM,QAAQ,OAAwB,UACpC,WAAW,OAAO;CAAE,QAAQ;CAAQ;CAAO,GAAG;AAAM,CAAC;AACvD,MAAM,WAAW,OAAwB,UACvC,WAAW,OAAO;CAAE,QAAQ;CAAW;CAAO,GAAG;AAAM,CAAC;AAC1D,MAAM,SAAS,OAAwB,UACrC,WAAW,OAAO;CAAE,QAAQ;CAAS;CAAO,GAAG;AAAM,CAAC;AACxD,MAAM,WAAW,OAAwB,UACvC,WAAW,OAAO;CAAE,QAAQ;CAAW;CAAO,GAAG;AAAM,CAAC"}

package/dist/components/templates/empty.mjs

@@ -4,6 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/templates/empty.tsx
 const Empty = ({ icon, title, description = "No data", action, className, ...props }) => {
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "empty",
 		role: "status",
 		className: cn("flex flex-col items-center justify-center gap-3 py-12 text-center", className),
 		...props,

package/dist/components/templates/empty.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty.mjs","names":[],"sources":["../../../src/components/templates/empty.tsx"],"sourcesContent":["import { Inbox } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  icon?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n}\n\n// The counterpart List's `empty` prop was asking for — List/Upload/Swiper\n// each render arbitrary content for their empty state today with nothing\n// in the library actually meant to go there. Pairs with Skeleton the same\n// way Skeleton pairs with real content: one placeholder for \"nothing\n// loaded yet\", one for \"loaded, and there's nothing\".\nconst Empty = ({\n  icon,\n  title,\n  description = 'No data',\n  action,\n  className,\n  ...props\n}: Props) => {\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        'flex flex-col items-center justify-center gap-3 py-12 text-center',\n        className,\n        //\n      )}\n      {...props}\n    >\n      <div className=\"text-muted-foreground [&_svg]:size-12\">\n        {icon ?? <Inbox />}\n      </div>\n      {title && <p className=\"text-sm font-medium\">{title}</p>}\n      {description && (\n        <p className=\"text-muted-foreground text-sm\">{description}</p>\n      )}\n      {action && <div className=\"mt-1\">{action}</div>}\n    </div>\n  );\n};\n\nexport default Empty;\n"],"mappings":";;;;AAgBA,MAAM,SAAS,EACb,MACA,OACA,cAAc,WACd,QACA,WACA,GAAG,YACQ;CACX,OACE,qBAAC,OAAD;EACE,MAAK;EACL,WAAW,GACT,qEACA,SAEF;EACA,GAAI;EAPN,UAAA;GASE,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,QAAQ,oBAAC,OAAD,CAAQ,CAAA;GACd,CAAA;GACJ,SAAS,oBAAC,KAAD;IAAG,WAAU;IAAuB,UAAA;GAAS,CAAA;GACtD,eACC,oBAAC,KAAD;IAAG,WAAU;IAAiC,UAAA;GAAe,CAAA;GAE9D,UAAU,oBAAC,OAAD;IAAK,WAAU;IAAQ,UAAA;GAAY,CAAA;EAC3C;;AAET"}
+{"version":3,"file":"empty.mjs","names":[],"sources":["../../../src/components/templates/empty.tsx"],"sourcesContent":["import { Inbox } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  icon?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  action?: React.ReactNode;\n}\n\n// The counterpart List's `empty` prop was asking for — List/Upload/Swiper\n// each render arbitrary content for their empty state today with nothing\n// in the library actually meant to go there. Pairs with Skeleton the same\n// way Skeleton pairs with real content: one placeholder for \"nothing\n// loaded yet\", one for \"loaded, and there's nothing\".\nconst Empty = ({\n  icon,\n  title,\n  description = 'No data',\n  action,\n  className,\n  ...props\n}: Props) => {\n  return (\n    <div\n      data-slot=\"empty\"\n      role=\"status\"\n      className={cn(\n        'flex flex-col items-center justify-center gap-3 py-12 text-center',\n        className,\n        //\n      )}\n      {...props}\n    >\n      <div className=\"text-muted-foreground [&_svg]:size-12\">\n        {icon ?? <Inbox />}\n      </div>\n      {title && <p className=\"text-sm font-medium\">{title}</p>}\n      {description && (\n        <p className=\"text-muted-foreground text-sm\">{description}</p>\n      )}\n      {action && <div className=\"mt-1\">{action}</div>}\n    </div>\n  );\n};\n\nexport default Empty;\n"],"mappings":";;;;AAgBA,MAAM,SAAS,EACb,MACA,OACA,cAAc,WACd,QACA,WACA,GAAG,YACQ;CACX,OACE,qBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,qEACA,SAEF;EACA,GAAI;EARN,UAAA;GAUE,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,QAAQ,oBAAC,OAAD,CAAQ,CAAA;GACd,CAAA;GACJ,SAAS,oBAAC,KAAD;IAAG,WAAU;IAAuB,UAAA;GAAS,CAAA;GACtD,eACC,oBAAC,KAAD;IAAG,WAAU;IAAiC,UAAA;GAAe,CAAA;GAE9D,UAAU,oBAAC,OAAD;IAAK,WAAU;IAAQ,UAAA;GAAY,CAAA;EAC3C;;AAET"}

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

@@ -9,6 +9,7 @@ const Content = ({ children, className, render, ...props }) => {
 		defaultTagName: "main",
 		render,
 		props: {
+			"data-slot": "layout-content",
 			...props,
 			className: cn("min-w-0 shrink grow basis-auto", className),
 			children: /* @__PURE__ */ jsx(SiderRegistryContext.Provider, {

package/dist/components/templates/layout/content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"sourcesContent":["'use client';\n\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { SiderRegistryContext } from './sider-context';\n\nexport interface Props extends Omit<\n  useRender.ComponentProps<'main'>,\n  'className'\n> {\n  className?: string;\n}\n\nconst Content = ({ children, className, render, ...props }: Props) => {\n  // Only one <main> landmark should exist per page — a Layout nested\n  // inside a page that already has its own <main> (or a Content nested\n  // inside another Content) needs a way to opt out of rendering a second\n  // one. Base UI's render contract merges these props/classes onto the\n  // caller's own element instead.\n  return useRender({\n    defaultTagName: 'main',\n    render,\n    props: {\n      ...props,\n      className: cn(\n        'min-w-0 shrink grow basis-auto',\n        // basis-auto (not basis-0) sizes Content from its actual content\n        // height first, so flex-grow only adds extra space when content is\n        // shorter than the viewport — when content is taller, Content\n        // keeps its natural (larger) height instead of clipping to\n        // available space and pushes Footer below it. min-h-0 is\n        // intentionally omitted here: with basis-auto, the default\n        // min-height:auto (content-based) is what makes that possible; on\n        // the Sider row's cross axis it's harmless since min-height there\n        // governs stretch, not main-axis growth.\n        className,\n      ),\n      children: (\n        <SiderRegistryContext.Provider value={null}>\n          {children}\n        </SiderRegistryContext.Provider>\n      ),\n    },\n  });\n};\n\nexport default Content;\n"],"mappings":";;;;;;AAeA,MAAM,WAAW,EAAE,UAAU,WAAW,QAAQ,GAAG,YAAmB;CAMpE,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,GAAG;GACH,WAAW,GACT,kCAUA,SACF;GACA,UACE,oBAAC,qBAAqB,UAAtB;IAA+B,OAAO;IACnC;GAC4B,CAAA;EAEnC;CACF,CAAC;AACH"}
+{"version":3,"file":"content.mjs","names":[],"sources":["../../../../src/components/templates/layout/content.tsx"],"sourcesContent":["'use client';\n\nimport { useRender } from '@base-ui/react/use-render';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { SiderRegistryContext } from './sider-context';\n\nexport interface Props extends Omit<\n  useRender.ComponentProps<'main'>,\n  'className'\n> {\n  className?: string;\n}\n\nconst Content = ({ children, className, render, ...props }: Props) => {\n  // Only one <main> landmark should exist per page — a Layout nested\n  // inside a page that already has its own <main> (or a Content nested\n  // inside another Content) needs a way to opt out of rendering a second\n  // one. Base UI's render contract merges these props/classes onto the\n  // caller's own element instead.\n  return useRender({\n    defaultTagName: 'main',\n    render,\n    props: {\n      'data-slot': 'layout-content',\n      ...props,\n      className: cn(\n        'min-w-0 shrink grow basis-auto',\n        // basis-auto (not basis-0) sizes Content from its actual content\n        // height first, so flex-grow only adds extra space when content is\n        // shorter than the viewport — when content is taller, Content\n        // keeps its natural (larger) height instead of clipping to\n        // available space and pushes Footer below it. min-h-0 is\n        // intentionally omitted here: with basis-auto, the default\n        // min-height:auto (content-based) is what makes that possible; on\n        // the Sider row's cross axis it's harmless since min-height there\n        // governs stretch, not main-axis growth.\n        className,\n      ),\n      children: (\n        <SiderRegistryContext.Provider value={null}>\n          {children}\n        </SiderRegistryContext.Provider>\n      ),\n    },\n  });\n};\n\nexport default Content;\n"],"mappings":";;;;;;AAeA,MAAM,WAAW,EAAE,UAAU,WAAW,QAAQ,GAAG,YAAmB;CAMpE,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,aAAa;GACb,GAAG;GACH,WAAW,GACT,kCAUA,SACF;GACA,UACE,oBAAC,qBAAqB,UAAtB;IAA+B,OAAO;IACnC;GAC4B,CAAA;EAEnC;CACF,CAAC;AACH"}

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

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/templates/layout/footer.tsx
 const Footer = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("footer", {
+		"data-slot": "layout-footer",
 		className: cn("w-full", className),
 		...props,
 		children

package/dist/components/templates/layout/footer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"footer.mjs","names":[],"sources":["../../../../src/components/templates/layout/footer.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentProps<'footer'> {}\n\nconst Footer = ({ children, className, ...props }: Props) => {\n  return (\n    <footer className={cn('w-full', className)} {...props}>\n      {children}\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"mappings":";;;AAIA,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC3D,OACE,oBAAC,UAAD;EAAQ,WAAW,GAAG,UAAU,SAAS;EAAG,GAAI;EAC7C;CACK,CAAA;AAEZ"}
+{"version":3,"file":"footer.mjs","names":[],"sources":["../../../../src/components/templates/layout/footer.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentProps<'footer'> {}\n\nconst Footer = ({ children, className, ...props }: Props) => {\n  return (\n    <footer\n      data-slot=\"layout-footer\"\n      className={cn('w-full', className)}\n      {...props}\n    >\n      {children}\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"mappings":";;;AAIA,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC3D,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GAAG,UAAU,SAAS;EACjC,GAAI;EAEH;CACK,CAAA;AAEZ"}

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

@@ -4,6 +4,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/templates/layout/header.tsx
 const Header = ({ children, className, position = "sticky", ...props }) => {
 	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "layout-header",
 		className: cn(position !== "static" && "z-1000", position === "sticky" && "sticky top-0", position === "fixed" && "fixed inset-x-0 top-0", "bg-background", "flex h-16 w-full items-center px-5", className),
 		...props,
 		children

package/dist/components/templates/layout/header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"header.mjs","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../../../lib/z-layers';\n\nexport interface Props extends React.ComponentProps<'header'> {\n  position?: 'sticky' | 'static' | 'fixed';\n}\n\nconst Header = ({\n  children,\n  className,\n  position = 'sticky',\n  ...props\n}: Props) => {\n  return (\n    <header\n      className={cn(\n        position !== 'static' && OVERLAY_LAYER,\n        position === 'sticky' && 'sticky top-0',\n        position === 'fixed' && 'fixed inset-x-0 top-0',\n        'bg-background',\n        'flex h-16 w-full items-center px-5',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;AAQA,MAAM,UAAU,EACd,UACA,WACA,WAAW,UACX,GAAG,YACQ;CACX,OACE,oBAAC,UAAD;EACE,WAAW,GACT,aAAa,YAAA,UACb,aAAa,YAAY,gBACzB,aAAa,WAAW,yBACxB,iBACA,sCACA,SAEF;EACA,GAAI;EAEH;CACK,CAAA;AAEZ"}
+{"version":3,"file":"header.mjs","names":[],"sources":["../../../../src/components/templates/layout/header.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../../../lib/z-layers';\n\nexport interface Props extends React.ComponentProps<'header'> {\n  position?: 'sticky' | 'static' | 'fixed';\n}\n\nconst Header = ({\n  children,\n  className,\n  position = 'sticky',\n  ...props\n}: Props) => {\n  return (\n    <header\n      data-slot=\"layout-header\"\n      className={cn(\n        position !== 'static' && OVERLAY_LAYER,\n        position === 'sticky' && 'sticky top-0',\n        position === 'fixed' && 'fixed inset-x-0 top-0',\n        'bg-background',\n        'flex h-16 w-full items-center px-5',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n};\n\nexport default Header;\n"],"mappings":";;;;AAQA,MAAM,UAAU,EACd,UACA,WACA,WAAW,UACX,GAAG,YACQ;CACX,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,aAAa,YAAA,UACb,aAAa,YAAY,gBACzB,aAAa,WAAW,yBACxB,iBACA,sCACA,SAEF;EACA,GAAI;EAEH;CACK,CAAA;AAEZ"}

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

@@ -26,6 +26,7 @@ const Layout = ({ children, className, ...props }) => {
 		children: /* @__PURE__ */ jsx(SiderRegistryContext.Provider, {
 			value: registry,
 			children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "layout",
 				className: cn("flex w-full flex-1", isNested ? "min-h-0" : "min-h-screen", isRow ? "flex-row" : "flex-col", className),
 				...props,
 				children

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

@@ -1 +1 @@
-{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Sider from './sider';\nimport { SiderRegistryContext } from './sider-context';\n\nexport interface Props extends React.ComponentProps<'div'> {}\n\nconst LayoutNestedContext = createContext(false);\n\n// Effects (including the registry-based detection in sider-context.ts)\n// never run during SSR, so registry state alone would render flex-col on\n// the server and every first paint, then flip to flex-row after hydration\n// for even the common, non-wrapped case. This direct-children check seeds\n// the correct initial guess for that common case so it's right immediately;\n// the registry then stays authoritative for Fragment-wrapped/custom-wrapped\n// Siders it can't see, correcting the guess after mount if needed.\nconst hasDirectSiderChild = (children: React.ReactNode) =>\n  Children.toArray(children).some(\n    child => isValidElement(child) && child.type === Sider,\n  );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n  const isNested = useContext(LayoutNestedContext);\n  const [siderIds] = useState(() => new Set<object>());\n  const [siderCount, setSiderCount] = useState(() =>\n    hasDirectSiderChild(children) ? 1 : 0,\n  );\n\n  const registry = useMemo(\n    () => ({\n      registerSider: (id: object) => {\n        siderIds.add(id);\n        setSiderCount(siderIds.size);\n      },\n      unregisterSider: (id: object) => {\n        siderIds.delete(id);\n        setSiderCount(siderIds.size);\n      },\n    }),\n    [siderIds],\n  );\n\n  const isRow = siderCount > 0;\n\n  return (\n    <LayoutNestedContext.Provider value>\n      <SiderRegistryContext.Provider value={registry}>\n        <div\n          className={cn(\n            'flex w-full flex-1',\n            // A nested Layout (the Sider row wrapper) must stay free to\n            // shrink/grow inside its parent's flex column, so it keeps\n            // min-h-0. The outermost Layout has no ancestor to size against,\n            // so it needs its own height anchor or flex-1/grow are no-ops\n            // and Content collapses under Footer.\n            isNested ? 'min-h-0' : 'min-h-screen',\n            isRow ? 'flex-row' : 'flex-col',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </SiderRegistryContext.Provider>\n    </LayoutNestedContext.Provider>\n  );\n};\n\nexport default Layout;\n"],"mappings":";;;;;;AAgBA,MAAM,sBAAsB,cAAc,KAAK;AAS/C,MAAM,uBAAuB,aAC3B,SAAS,QAAQ,QAAQ,CAAC,CAAC,MACzB,UAAS,eAAe,KAAK,KAAK,MAAM,SAAS,KACnD;AAEF,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC3D,MAAM,WAAW,WAAW,mBAAmB;CAC/C,MAAM,CAAC,YAAY,+BAAe,IAAI,IAAY,CAAC;CACnD,MAAM,CAAC,YAAY,iBAAiB,eAClC,oBAAoB,QAAQ,IAAI,IAAI,CACtC;CAEA,MAAM,WAAW,eACR;EACL,gBAAgB,OAAe;GAC7B,SAAS,IAAI,EAAE;GACf,cAAc,SAAS,IAAI;EAC7B;EACA,kBAAkB,OAAe;GAC/B,SAAS,OAAO,EAAE;GAClB,cAAc,SAAS,IAAI;EAC7B;CACF,IACA,CAAC,QAAQ,CACX;CAEA,MAAM,QAAQ,aAAa;CAE3B,OACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAA;EAC5B,UAAA,oBAAC,qBAAqB,UAAtB;GAA+B,OAAO;GACpC,UAAA,oBAAC,OAAD;IACE,WAAW,GACT,sBAMA,WAAW,YAAY,gBACvB,QAAQ,aAAa,YACrB,SACF;IACA,GAAI;IAEH;GACE,CAAA;EACwB,CAAA;CACH,CAAA;AAElC"}
+{"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Sider from './sider';\nimport { SiderRegistryContext } from './sider-context';\n\nexport interface Props extends React.ComponentProps<'div'> {}\n\nconst LayoutNestedContext = createContext(false);\n\n// Effects (including the registry-based detection in sider-context.ts)\n// never run during SSR, so registry state alone would render flex-col on\n// the server and every first paint, then flip to flex-row after hydration\n// for even the common, non-wrapped case. This direct-children check seeds\n// the correct initial guess for that common case so it's right immediately;\n// the registry then stays authoritative for Fragment-wrapped/custom-wrapped\n// Siders it can't see, correcting the guess after mount if needed.\nconst hasDirectSiderChild = (children: React.ReactNode) =>\n  Children.toArray(children).some(\n    child => isValidElement(child) && child.type === Sider,\n  );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n  const isNested = useContext(LayoutNestedContext);\n  const [siderIds] = useState(() => new Set<object>());\n  const [siderCount, setSiderCount] = useState(() =>\n    hasDirectSiderChild(children) ? 1 : 0,\n  );\n\n  const registry = useMemo(\n    () => ({\n      registerSider: (id: object) => {\n        siderIds.add(id);\n        setSiderCount(siderIds.size);\n      },\n      unregisterSider: (id: object) => {\n        siderIds.delete(id);\n        setSiderCount(siderIds.size);\n      },\n    }),\n    [siderIds],\n  );\n\n  const isRow = siderCount > 0;\n\n  return (\n    <LayoutNestedContext.Provider value>\n      <SiderRegistryContext.Provider value={registry}>\n        <div\n          data-slot=\"layout\"\n          className={cn(\n            'flex w-full flex-1',\n            // A nested Layout (the Sider row wrapper) must stay free to\n            // shrink/grow inside its parent's flex column, so it keeps\n            // min-h-0. The outermost Layout has no ancestor to size against,\n            // so it needs its own height anchor or flex-1/grow are no-ops\n            // and Content collapses under Footer.\n            isNested ? 'min-h-0' : 'min-h-screen',\n            isRow ? 'flex-row' : 'flex-col',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </SiderRegistryContext.Provider>\n    </LayoutNestedContext.Provider>\n  );\n};\n\nexport default Layout;\n"],"mappings":";;;;;;AAgBA,MAAM,sBAAsB,cAAc,KAAK;AAS/C,MAAM,uBAAuB,aAC3B,SAAS,QAAQ,QAAQ,CAAC,CAAC,MACzB,UAAS,eAAe,KAAK,KAAK,MAAM,SAAS,KACnD;AAEF,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC3D,MAAM,WAAW,WAAW,mBAAmB;CAC/C,MAAM,CAAC,YAAY,+BAAe,IAAI,IAAY,CAAC;CACnD,MAAM,CAAC,YAAY,iBAAiB,eAClC,oBAAoB,QAAQ,IAAI,IAAI,CACtC;CAEA,MAAM,WAAW,eACR;EACL,gBAAgB,OAAe;GAC7B,SAAS,IAAI,EAAE;GACf,cAAc,SAAS,IAAI;EAC7B;EACA,kBAAkB,OAAe;GAC/B,SAAS,OAAO,EAAE;GAClB,cAAc,SAAS,IAAI;EAC7B;CACF,IACA,CAAC,QAAQ,CACX;CAEA,MAAM,QAAQ,aAAa;CAE3B,OACE,oBAAC,oBAAoB,UAArB;EAA8B,OAAA;EAC5B,UAAA,oBAAC,qBAAqB,UAAtB;GAA+B,OAAO;GACpC,UAAA,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,GACT,sBAMA,WAAW,YAAY,gBACvB,QAAQ,aAAa,YACrB,SACF;IACA,GAAI;IAEH;GACE,CAAA;EACwB,CAAA;CACH,CAAA;AAElC"}

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

@@ -4,8 +4,8 @@ import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs
 import { useRegisterSider } from "./sider-context.mjs";
 import { useEffect, useId, useRef } from "react";
 import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useResponsiveSize } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/templates/layout/sider.tsx
 const BREAKPOINT_ORDER = [
 	"xs",
@@ -57,6 +57,7 @@ const Sider = ({ children, className, classNames, style, width = 200, collapsedW
 	};
 	const TriggerIcon = collapsed !== (reverseArrow !== (placement === "right")) ? PanelLeftOpen : PanelLeftClose;
 	return /* @__PURE__ */ jsxs("aside", {
+		"data-slot": "layout-sider",
 		className: cn("z-10 flex h-full shrink-0 flex-col overflow-hidden", "transition-[width] duration-200", placement === "right" && "order-last", className),
 		style: {
 			width: toCssSize(collapsed ? collapsedWidth : width),
@@ -69,6 +70,7 @@ const Sider = ({ children, className, classNames, style, width = 200, collapsedW
 			children
 		}), collapsible && trigger !== null && /* @__PURE__ */ jsx("button", {
 			type: "button",
+			"data-slot": "layout-sider-trigger",
 			"aria-label": collapsed ? locale.expand ?? DEFAULT_LOCALE.expand : locale.collapse ?? DEFAULT_LOCALE.collapse,
 			"aria-expanded": !collapsed,
 			"aria-controls": contentId,

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

@@ -1 +1 @@
-{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useId, useRef } from 'react';\n\nimport { useControllableState, useResponsiveSize } from '@jbpark/use-hooks';\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { useRegisterSider } from './sider-context';\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n// Order matters here, not the values — used to compare the current\n// viewport tier against the configured `breakpoint` ordinally, since\n// `useResponsiveSize` reports which named tier the viewport is currently\n// in rather than a raw pixel width.\nconst BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nexport interface Props extends Omit<\n  React.ComponentProps<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  placement?: 'left' | 'right';\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  breakpoint?: Breakpoint;\n  onCollapse?: (collapsed: boolean) => void;\n  onBreakpoint?: (broken: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  placement = 'left',\n  reverseArrow = false,\n  trigger,\n  breakpoint,\n  onCollapse,\n  onBreakpoint,\n  ...props\n}: Props) => {\n  useRegisterSider();\n\n  const { locale } = useConfig();\n  const contentId = useId();\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: _collapsed,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapse,\n  });\n\n  const { breakpoint: viewportBreakpoint } = useResponsiveSize({\n    viewport: true,\n  });\n  const broken = breakpoint\n    ? BREAKPOINT_ORDER.indexOf(viewportBreakpoint.current) <\n      BREAKPOINT_ORDER.indexOf(breakpoint)\n    : false;\n\n  const latestBrokenRef = useRef(broken);\n  const previousBrokenRef = useRef<boolean | null>(null);\n  const microtaskScheduledRef = useRef(false);\n  const onBreakpointRef = useRef(onBreakpoint);\n\n  useEffect(() => {\n    onBreakpointRef.current = onBreakpoint;\n  });\n\n  // `useResponsiveSize`'s own initial measurement resolves through its own\n  // layout effect, which (since it's called earlier in this component)\n  // commits and — if the real viewport differs from its SSR-safe 'xs'\n  // placeholder default — triggers a synchronous corrective re-render, all\n  // before the browser paints. Both the placeholder-derived render and the\n  // corrected one get their own effect pass (React doesn't coalesce\n  // same-tick synchronous re-commits into a single effect flush), so\n  // reacting to `broken` directly — in a layout or passive effect either\n  // way — fires once with the wrong placeholder value, then again with the\n  // corrected one.\n  //\n  // Coalescing through a microtask sidesteps that: every effect pass just\n  // records its `broken` into a ref and schedules (at most once) a\n  // microtask that reads whatever ended up latest once the synchronous\n  // cascade has fully settled, and acts on that single, correct value.\n  //\n  // The `previousBrokenRef` guard is the separate fix for #227 point 3:\n  // without it, an inline `onCollapse`/`onBreakpoint` (a fresh identity\n  // every render) would change `setCollapsed`'s own identity and re-run\n  // this effect on every unrelated parent re-render, reapplying `broken`\n  // and undoing a user's manual toggle. Only a genuine change should act.\n  useEffect(() => {\n    if (!breakpoint) {\n      return;\n    }\n\n    latestBrokenRef.current = broken;\n\n    if (microtaskScheduledRef.current) {\n      return;\n    }\n    microtaskScheduledRef.current = true;\n\n    queueMicrotask(() => {\n      microtaskScheduledRef.current = false;\n\n      const settledBroken = latestBrokenRef.current;\n\n      if (previousBrokenRef.current === settledBroken) {\n        return;\n      }\n\n      previousBrokenRef.current = settledBroken;\n      setCollapsed(settledBroken);\n      onBreakpointRef.current?.(settledBroken);\n    });\n  }, [broken, breakpoint, setCollapsed]);\n\n  const onTriggerClick = () => {\n    setCollapsed(!collapsed);\n  };\n\n  // A right-placed Sider's collapse icon should default to pointing the\n  // opposite way from a left-placed one (it's opening/closing a panel on\n  // the other side of the content), so `placement` flips the effective\n  // direction on top of whatever `reverseArrow` already requests —\n  // `reverseArrow` still layers on as a manual override either way.\n  const effectiveReverseArrow = reverseArrow !== (placement === 'right');\n  const TriggerIcon =\n    collapsed !== effectiveReverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      className={cn(\n        // Below Header — and below every other floating/overlay primitive\n        // in this library, which all share OVERLAY_LAYER (lib/z-layers.ts).\n        // Sider is a static layout column, not floating chrome, and\n        // previously outranked Header with an arbitrary z-100, covering it\n        // once Header stuck to the viewport top on scroll. Kept as a small\n        // absolute value rather than tracking OVERLAY_LAYER: it only has to\n        // stay under that layer, and raising it in step would defeat this.\n        'z-10 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        // Lets a Sider visually sit on the right without needing to\n        // reorder JSX/children — useful since Sider's presence is\n        // detected via context (sider-context.ts) rather than requiring\n        // it to be a specific direct child in a specific position.\n        placement === 'right' && 'order-last',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div id={contentId} className=\"min-h-0 flex-1 overflow-auto\">\n        {children}\n      </div>\n      {collapsible && trigger !== null && (\n        <button\n          type=\"button\"\n          aria-label={\n            collapsed\n              ? (locale.expand ?? DEFAULT_LOCALE.expand)\n              : (locale.collapse ?? DEFAULT_LOCALE.collapse)\n          }\n          aria-expanded={!collapsed}\n          aria-controls={contentId}\n          onClick={onTriggerClick}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger === undefined ? <TriggerIcon className=\"size-4\" /> : trigger}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;;AAkBA,MAAM,mBAAiC;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAK;AAsB3E,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,YAAY,QACZ,eAAe,OACf,SACA,YACA,YACA,cACA,GAAG,YACQ;CACX,iBAAiB;CAEjB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,WAAW,gBAAgB,qBAA8B;EAC9D,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAED,MAAM,EAAE,YAAY,uBAAuB,kBAAkB,EAC3D,UAAU,KACZ,CAAC;CACD,MAAM,SAAS,aACX,iBAAiB,QAAQ,mBAAmB,OAAO,IACnD,iBAAiB,QAAQ,UAAU,IACnC;CAEJ,MAAM,kBAAkB,OAAO,MAAM;CACrC,MAAM,oBAAoB,OAAuB,IAAI;CACrD,MAAM,wBAAwB,OAAO,KAAK;CAC1C,MAAM,kBAAkB,OAAO,YAAY;CAE3C,gBAAgB;EACd,gBAAgB,UAAU;CAC5B,CAAC;CAuBD,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,gBAAgB,UAAU;EAE1B,IAAI,sBAAsB,SACxB;EAEF,sBAAsB,UAAU;EAEhC,qBAAqB;GACnB,sBAAsB,UAAU;GAEhC,MAAM,gBAAgB,gBAAgB;GAEtC,IAAI,kBAAkB,YAAY,eAChC;GAGF,kBAAkB,UAAU;GAC5B,aAAa,aAAa;GAC1B,gBAAgB,UAAU,aAAa;EACzC,CAAC;CACH,GAAG;EAAC;EAAQ;EAAY;CAAY,CAAC;CAErC,MAAM,uBAAuB;EAC3B,aAAa,CAAC,SAAS;CACzB;CAQA,MAAM,cACJ,eAF4B,kBAAkB,cAAc,YAEtB,gBAAgB;CAExD,OACE,qBAAC,SAAD;EACE,WAAW,GAQT,sDACA,mCAKA,cAAc,WAAW,cACzB,SAEF;EACA,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,KAAK;GACnD,GAAG;EACL;EACA,GAAI;EAvBN,UAAA,CAyBE,oBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAC3B;EACE,CAAA,GACJ,eAAe,YAAY,QAC1B,oBAAC,UAAD;GACE,MAAK;GACL,cACE,YACK,OAAO,UAAU,eAAe,SAChC,OAAO,YAAY,eAAe;GAEzC,iBAAe,CAAC;GAChB,iBAAe;GACf,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,OAEd;GAEC,UAAA,YAAY,KAAA,IAAY,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA,IAAI;EACxD,CAAA,CAEL;;AAEX"}
+{"version":3,"file":"sider.mjs","names":[],"sources":["../../../../src/components/templates/layout/sider.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useId, useRef } from 'react';\n\nimport { useControllableState, useResponsiveSize } from '@jbpark/use-hooks';\nimport { PanelLeftClose, PanelLeftOpen } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { useRegisterSider } from './sider-context';\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n// Order matters here, not the values — used to compare the current\n// viewport tier against the configured `breakpoint` ordinally, since\n// `useResponsiveSize` reports which named tier the viewport is currently\n// in rather than a raw pixel width.\nconst BREAKPOINT_ORDER: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];\n\nexport interface Props extends Omit<\n  React.ComponentProps<'aside'>,\n  'onCollapse'\n> {\n  width?: number | string;\n  collapsedWidth?: number | string;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  collapsed?: boolean;\n  placement?: 'left' | 'right';\n  reverseArrow?: boolean;\n  trigger?: React.ReactNode;\n  classNames?: {\n    trigger?: string;\n  };\n  breakpoint?: Breakpoint;\n  onCollapse?: (collapsed: boolean) => void;\n  onBreakpoint?: (broken: boolean) => void;\n}\n\nconst toCssSize = (value: number | string) =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst Sider = ({\n  children,\n  className,\n  classNames,\n  style,\n  width = 200,\n  collapsedWidth = 80,\n  collapsible = false,\n  defaultCollapsed = false,\n  collapsed: _collapsed,\n  placement = 'left',\n  reverseArrow = false,\n  trigger,\n  breakpoint,\n  onCollapse,\n  onBreakpoint,\n  ...props\n}: Props) => {\n  useRegisterSider();\n\n  const { locale } = useConfig();\n  const contentId = useId();\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: _collapsed,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapse,\n  });\n\n  const { breakpoint: viewportBreakpoint } = useResponsiveSize({\n    viewport: true,\n  });\n  const broken = breakpoint\n    ? BREAKPOINT_ORDER.indexOf(viewportBreakpoint.current) <\n      BREAKPOINT_ORDER.indexOf(breakpoint)\n    : false;\n\n  const latestBrokenRef = useRef(broken);\n  const previousBrokenRef = useRef<boolean | null>(null);\n  const microtaskScheduledRef = useRef(false);\n  const onBreakpointRef = useRef(onBreakpoint);\n\n  useEffect(() => {\n    onBreakpointRef.current = onBreakpoint;\n  });\n\n  // `useResponsiveSize`'s own initial measurement resolves through its own\n  // layout effect, which (since it's called earlier in this component)\n  // commits and — if the real viewport differs from its SSR-safe 'xs'\n  // placeholder default — triggers a synchronous corrective re-render, all\n  // before the browser paints. Both the placeholder-derived render and the\n  // corrected one get their own effect pass (React doesn't coalesce\n  // same-tick synchronous re-commits into a single effect flush), so\n  // reacting to `broken` directly — in a layout or passive effect either\n  // way — fires once with the wrong placeholder value, then again with the\n  // corrected one.\n  //\n  // Coalescing through a microtask sidesteps that: every effect pass just\n  // records its `broken` into a ref and schedules (at most once) a\n  // microtask that reads whatever ended up latest once the synchronous\n  // cascade has fully settled, and acts on that single, correct value.\n  //\n  // The `previousBrokenRef` guard is the separate fix for #227 point 3:\n  // without it, an inline `onCollapse`/`onBreakpoint` (a fresh identity\n  // every render) would change `setCollapsed`'s own identity and re-run\n  // this effect on every unrelated parent re-render, reapplying `broken`\n  // and undoing a user's manual toggle. Only a genuine change should act.\n  useEffect(() => {\n    if (!breakpoint) {\n      return;\n    }\n\n    latestBrokenRef.current = broken;\n\n    if (microtaskScheduledRef.current) {\n      return;\n    }\n    microtaskScheduledRef.current = true;\n\n    queueMicrotask(() => {\n      microtaskScheduledRef.current = false;\n\n      const settledBroken = latestBrokenRef.current;\n\n      if (previousBrokenRef.current === settledBroken) {\n        return;\n      }\n\n      previousBrokenRef.current = settledBroken;\n      setCollapsed(settledBroken);\n      onBreakpointRef.current?.(settledBroken);\n    });\n  }, [broken, breakpoint, setCollapsed]);\n\n  const onTriggerClick = () => {\n    setCollapsed(!collapsed);\n  };\n\n  // A right-placed Sider's collapse icon should default to pointing the\n  // opposite way from a left-placed one (it's opening/closing a panel on\n  // the other side of the content), so `placement` flips the effective\n  // direction on top of whatever `reverseArrow` already requests —\n  // `reverseArrow` still layers on as a manual override either way.\n  const effectiveReverseArrow = reverseArrow !== (placement === 'right');\n  const TriggerIcon =\n    collapsed !== effectiveReverseArrow ? PanelLeftOpen : PanelLeftClose;\n\n  return (\n    <aside\n      data-slot=\"layout-sider\"\n      className={cn(\n        // Below Header — and below every other floating/overlay primitive\n        // in this library, which all share OVERLAY_LAYER (lib/z-layers.ts).\n        // Sider is a static layout column, not floating chrome, and\n        // previously outranked Header with an arbitrary z-100, covering it\n        // once Header stuck to the viewport top on scroll. Kept as a small\n        // absolute value rather than tracking OVERLAY_LAYER: it only has to\n        // stay under that layer, and raising it in step would defeat this.\n        'z-10 flex h-full shrink-0 flex-col overflow-hidden',\n        'transition-[width] duration-200',\n        // Lets a Sider visually sit on the right without needing to\n        // reorder JSX/children — useful since Sider's presence is\n        // detected via context (sider-context.ts) rather than requiring\n        // it to be a specific direct child in a specific position.\n        placement === 'right' && 'order-last',\n        className,\n        //\n      )}\n      style={{\n        width: toCssSize(collapsed ? collapsedWidth : width),\n        ...style,\n      }}\n      {...props}\n    >\n      <div id={contentId} className=\"min-h-0 flex-1 overflow-auto\">\n        {children}\n      </div>\n      {collapsible && trigger !== null && (\n        <button\n          type=\"button\"\n          data-slot=\"layout-sider-trigger\"\n          aria-label={\n            collapsed\n              ? (locale.expand ?? DEFAULT_LOCALE.expand)\n              : (locale.collapse ?? DEFAULT_LOCALE.collapse)\n          }\n          aria-expanded={!collapsed}\n          aria-controls={contentId}\n          onClick={onTriggerClick}\n          className={cn(\n            'flex w-full shrink-0 items-center justify-center py-2',\n            'cursor-pointer transition-colors hover:bg-black/5',\n            classNames?.trigger,\n            //\n          )}\n        >\n          {trigger === undefined ? <TriggerIcon className=\"size-4\" /> : trigger}\n        </button>\n      )}\n    </aside>\n  );\n};\n\nexport default Sider;\n"],"mappings":";;;;;;;;;AAkBA,MAAM,mBAAiC;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAK;AAsB3E,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE7C,MAAM,SAAS,EACb,UACA,WACA,YACA,OACA,QAAQ,KACR,iBAAiB,IACjB,cAAc,OACd,mBAAmB,OACnB,WAAW,YACX,YAAY,QACZ,eAAe,OACf,SACA,YACA,YACA,cACA,GAAG,YACQ;CACX,iBAAiB;CAEjB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,WAAW,gBAAgB,qBAA8B;EAC9D,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CAED,MAAM,EAAE,YAAY,uBAAuB,kBAAkB,EAC3D,UAAU,KACZ,CAAC;CACD,MAAM,SAAS,aACX,iBAAiB,QAAQ,mBAAmB,OAAO,IACnD,iBAAiB,QAAQ,UAAU,IACnC;CAEJ,MAAM,kBAAkB,OAAO,MAAM;CACrC,MAAM,oBAAoB,OAAuB,IAAI;CACrD,MAAM,wBAAwB,OAAO,KAAK;CAC1C,MAAM,kBAAkB,OAAO,YAAY;CAE3C,gBAAgB;EACd,gBAAgB,UAAU;CAC5B,CAAC;CAuBD,gBAAgB;EACd,IAAI,CAAC,YACH;EAGF,gBAAgB,UAAU;EAE1B,IAAI,sBAAsB,SACxB;EAEF,sBAAsB,UAAU;EAEhC,qBAAqB;GACnB,sBAAsB,UAAU;GAEhC,MAAM,gBAAgB,gBAAgB;GAEtC,IAAI,kBAAkB,YAAY,eAChC;GAGF,kBAAkB,UAAU;GAC5B,aAAa,aAAa;GAC1B,gBAAgB,UAAU,aAAa;EACzC,CAAC;CACH,GAAG;EAAC;EAAQ;EAAY;CAAY,CAAC;CAErC,MAAM,uBAAuB;EAC3B,aAAa,CAAC,SAAS;CACzB;CAQA,MAAM,cACJ,eAF4B,kBAAkB,cAAc,YAEtB,gBAAgB;CAExD,OACE,qBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAQT,sDACA,mCAKA,cAAc,WAAW,cACzB,SAEF;EACA,OAAO;GACL,OAAO,UAAU,YAAY,iBAAiB,KAAK;GACnD,GAAG;EACL;EACA,GAAI;EAxBN,UAAA,CA0BE,oBAAC,OAAD;GAAK,IAAI;GAAW,WAAU;GAC3B;EACE,CAAA,GACJ,eAAe,YAAY,QAC1B,oBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,cACE,YACK,OAAO,UAAU,eAAe,SAChC,OAAO,YAAY,eAAe;GAEzC,iBAAe,CAAC;GAChB,iBAAe;GACf,SAAS;GACT,WAAW,GACT,yDACA,qDACA,YAAY,OAEd;GAEC,UAAA,YAAY,KAAA,IAAY,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA,IAAI;EACxD,CAAA,CAEL;;AAEX"}

package/dist/components/templates/page-header.mjs

@@ -8,6 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const PageHeader = ({ title, subTitle, extra, backIcon, onBack, className, classNames, children, ...props }) => {
 	const { locale } = useConfig();
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "page-header",
 		className: cn("flex flex-col gap-2", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {

package/dist/components/templates/page-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.mjs","names":[],"sources":["../../../src/components/templates/page-header.tsx"],"sourcesContent":["'use client';\n\nimport { ArrowLeft } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n  backIcon?: React.ReactNode;\n  onBack?: () => void;\n  classNames?: {\n    back?: string;\n    title?: string;\n    subTitle?: string;\n    extra?: string;\n  };\n}\n\n// Title + back button + extra action area — same shape as Drawer's header\n// (title/extra/closable), which this borrows the layout from wholesale;\n// PageHeader just swaps Drawer's close button for a back button.\nconst PageHeader = ({\n  title,\n  subTitle,\n  extra,\n  backIcon,\n  onBack,\n  className,\n  classNames,\n  children,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)} {...props}>\n      <div className=\"flex items-start gap-2\">\n        {onBack && (\n          <Button\n            variant=\"text\"\n            shape=\"circle\"\n            size=\"small\"\n            aria-label={locale.back ?? DEFAULT_LOCALE.back}\n            icon={backIcon || <ArrowLeft />}\n            onClick={onBack}\n            className={cn(classNames?.back)}\n          />\n        )}\n        <div className=\"flex flex-1 items-start justify-between gap-2\">\n          <div className=\"flex flex-col gap-0.5\">\n            {title && (\n              <p className={cn('text-lg font-medium', classNames?.title)}>\n                {title}\n              </p>\n            )}\n            {subTitle && (\n              <p\n                className={cn(\n                  'text-muted-foreground text-sm',\n                  classNames?.subTitle,\n                )}\n              >\n                {subTitle}\n              </p>\n            )}\n          </div>\n          {extra != null && (\n            <div className={cn('shrink-0', classNames?.extra)}>{extra}</div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AA0BA,MAAM,cAAc,EAClB,OACA,UACA,OACA,UACA,QACA,WACA,YACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAE7B,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;EAA1D,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,UACC,oBAAC,QAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAY,OAAO,QAAQ,eAAe;IAC1C,MAAM,YAAY,oBAAC,WAAD,CAAY,CAAA;IAC9B,SAAS;IACT,WAAW,GAAG,YAAY,IAAI;GAC/B,CAAA,GAEH,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,SACC,oBAAC,KAAD;MAAG,WAAW,GAAG,uBAAuB,YAAY,KAAK;MACtD,UAAA;KACA,CAAA,GAEJ,YACC,oBAAC,KAAD;MACE,WAAW,GACT,iCACA,YAAY,QACd;MAEC,UAAA;KACA,CAAA,CAEF;IACJ,CAAA,GAAA,SAAS,QACR,oBAAC,OAAD;KAAK,WAAW,GAAG,YAAY,YAAY,KAAK;KAAI,UAAA;IAAW,CAAA,CAE9D;GACF,CAAA,CAAA;EACJ,CAAA,GAAA,QACE;;AAET"}
+{"version":3,"file":"page-header.mjs","names":[],"sources":["../../../src/components/templates/page-header.tsx"],"sourcesContent":["'use client';\n\nimport { ArrowLeft } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n  backIcon?: React.ReactNode;\n  onBack?: () => void;\n  classNames?: {\n    back?: string;\n    title?: string;\n    subTitle?: string;\n    extra?: string;\n  };\n}\n\n// Title + back button + extra action area — same shape as Drawer's header\n// (title/extra/closable), which this borrows the layout from wholesale;\n// PageHeader just swaps Drawer's close button for a back button.\nconst PageHeader = ({\n  title,\n  subTitle,\n  extra,\n  backIcon,\n  onBack,\n  className,\n  classNames,\n  children,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  return (\n    <div\n      data-slot=\"page-header\"\n      className={cn('flex flex-col gap-2', className)}\n      {...props}\n    >\n      <div className=\"flex items-start gap-2\">\n        {onBack && (\n          <Button\n            variant=\"text\"\n            shape=\"circle\"\n            size=\"small\"\n            aria-label={locale.back ?? DEFAULT_LOCALE.back}\n            icon={backIcon || <ArrowLeft />}\n            onClick={onBack}\n            className={cn(classNames?.back)}\n          />\n        )}\n        <div className=\"flex flex-1 items-start justify-between gap-2\">\n          <div className=\"flex flex-col gap-0.5\">\n            {title && (\n              <p className={cn('text-lg font-medium', classNames?.title)}>\n                {title}\n              </p>\n            )}\n            {subTitle && (\n              <p\n                className={cn(\n                  'text-muted-foreground text-sm',\n                  classNames?.subTitle,\n                )}\n              >\n                {subTitle}\n              </p>\n            )}\n          </div>\n          {extra != null && (\n            <div className={cn('shrink-0', classNames?.extra)}>{extra}</div>\n          )}\n        </div>\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default PageHeader;\n"],"mappings":";;;;;;;AA0BA,MAAM,cAAc,EAClB,OACA,UACA,OACA,UACA,QACA,WACA,YACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAE7B,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;EAHN,UAAA,CAKE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,UACC,oBAAC,QAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAY,OAAO,QAAQ,eAAe;IAC1C,MAAM,YAAY,oBAAC,WAAD,CAAY,CAAA;IAC9B,SAAS;IACT,WAAW,GAAG,YAAY,IAAI;GAC/B,CAAA,GAEH,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,SACC,oBAAC,KAAD;MAAG,WAAW,GAAG,uBAAuB,YAAY,KAAK;MACtD,UAAA;KACA,CAAA,GAEJ,YACC,oBAAC,KAAD;MACE,WAAW,GACT,iCACA,YAAY,QACd;MAEC,UAAA;KACA,CAAA,CAEF;IACJ,CAAA,GAAA,SAAS,QACR,oBAAC,OAAD;KAAK,WAAW,GAAG,YAAY,YAAY,KAAK;KAAI,UAAA;IAAW,CAAA,CAE9D;GACF,CAAA,CAAA;EACJ,CAAA,GAAA,QACE;;AAET"}

package/dist/components/templates/result.mjs

@@ -13,6 +13,7 @@ const STATUS_ICONS = {
 };
 const Result = ({ status = "info", icon, title, subTitle, extra, className, children, ...props }) => {
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "result",
 		className: cn("flex flex-col items-center justify-center gap-2 py-16 text-center", className),
 		...props,
 		children: [

package/dist/components/templates/result.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"result.mjs","names":[],"sources":["../../../src/components/templates/result.tsx"],"sourcesContent":["import {\n  Check,\n  FileQuestion,\n  Info,\n  OctagonAlert,\n  OctagonX,\n  ServerCrash,\n  ShieldAlert,\n} from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\ntype Status = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';\n\n// Reuses Modal's exact STATIC_ICONS set (Check/OctagonX/Info/OctagonAlert,\n// same colors) for the 4 statuses they share, so a Result page matches the\n// tone of a Modal.success()/error()/etc a user may have just seen.\nconst STATUS_ICONS: Record<Status, React.ReactNode> = {\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  info: <Info className=\"text-blue-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  '404': <FileQuestion className=\"text-muted-foreground\" />,\n  '403': <ShieldAlert className=\"text-muted-foreground\" />,\n  '500': <ServerCrash className=\"text-muted-foreground\" />,\n};\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  status?: Status;\n  icon?: React.ReactNode;\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n}\n\n// Full-page success/failure/404/403 state screen — Empty's larger,\n// more prominent sibling (Empty says \"nothing here yet\" inline within a\n// list/table; Result says \"here's what happened\" for an entire page/view).\nconst Result = ({\n  status = 'info',\n  icon,\n  title,\n  subTitle,\n  extra,\n  className,\n  children,\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-2 py-16 text-center',\n        className,\n        //\n      )}\n      {...props}\n    >\n      <div className=\"mb-2 [&_svg]:size-16\">{icon ?? STATUS_ICONS[status]}</div>\n      {title && <p className=\"text-xl font-medium\">{title}</p>}\n      {subTitle && <p className=\"text-muted-foreground text-sm\">{subTitle}</p>}\n      {extra && (\n        <div className=\"mt-4 flex items-center justify-center gap-2\">\n          {extra}\n        </div>\n      )}\n      {children && <div className=\"mt-4 w-full\">{children}</div>}\n    </div>\n  );\n};\n\nexport default Result;\n"],"mappings":";;;;AAiBA,MAAM,eAAgD;CACpD,SAAS,oBAAC,OAAD,EAAO,WAAU,iBAAkB,CAAA;CAC5C,OAAO,oBAAC,UAAD,EAAU,WAAU,eAAgB,CAAA;CAC3C,MAAM,oBAAC,MAAD,EAAM,WAAU,gBAAiB,CAAA;CACvC,SAAS,oBAAC,cAAD,EAAc,WAAU,kBAAmB,CAAA;CACpD,OAAO,oBAAC,cAAD,EAAc,WAAU,wBAAyB,CAAA;CACxD,OAAO,oBAAC,aAAD,EAAa,WAAU,wBAAyB,CAAA;CACvD,OAAO,oBAAC,aAAD,EAAa,WAAU,wBAAyB,CAAA;AACzD;AAaA,MAAM,UAAU,EACd,SAAS,QACT,MACA,OACA,UACA,OACA,WACA,UACA,GAAG,YACQ;CACX,OACE,qBAAC,OAAD;EACE,WAAW,GACT,qEACA,SAEF;EACA,GAAI;EANN,UAAA;GAQE,oBAAC,OAAD;IAAK,WAAU;IAAwB,UAAA,QAAQ,aAAa;GAAa,CAAA;GACxE,SAAS,oBAAC,KAAD;IAAG,WAAU;IAAuB,UAAA;GAAS,CAAA;GACtD,YAAY,oBAAC,KAAD;IAAG,WAAU;IAAiC,UAAA;GAAY,CAAA;GACtE,SACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA;GAEN,YAAY,oBAAC,OAAD;IAAK,WAAU;IAAe;GAAc,CAAA;EACtD;;AAET"}
+{"version":3,"file":"result.mjs","names":[],"sources":["../../../src/components/templates/result.tsx"],"sourcesContent":["import {\n  Check,\n  FileQuestion,\n  Info,\n  OctagonAlert,\n  OctagonX,\n  ServerCrash,\n  ShieldAlert,\n} from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\ntype Status = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';\n\n// Reuses Modal's exact STATIC_ICONS set (Check/OctagonX/Info/OctagonAlert,\n// same colors) for the 4 statuses they share, so a Result page matches the\n// tone of a Modal.success()/error()/etc a user may have just seen.\nconst STATUS_ICONS: Record<Status, React.ReactNode> = {\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  info: <Info className=\"text-blue-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  '404': <FileQuestion className=\"text-muted-foreground\" />,\n  '403': <ShieldAlert className=\"text-muted-foreground\" />,\n  '500': <ServerCrash className=\"text-muted-foreground\" />,\n};\n\nexport interface Props extends Omit<React.ComponentProps<'div'>, 'title'> {\n  status?: Status;\n  icon?: React.ReactNode;\n  title?: React.ReactNode;\n  subTitle?: React.ReactNode;\n  extra?: React.ReactNode;\n}\n\n// Full-page success/failure/404/403 state screen — Empty's larger,\n// more prominent sibling (Empty says \"nothing here yet\" inline within a\n// list/table; Result says \"here's what happened\" for an entire page/view).\nconst Result = ({\n  status = 'info',\n  icon,\n  title,\n  subTitle,\n  extra,\n  className,\n  children,\n  ...props\n}: Props) => {\n  return (\n    <div\n      data-slot=\"result\"\n      className={cn(\n        'flex flex-col items-center justify-center gap-2 py-16 text-center',\n        className,\n        //\n      )}\n      {...props}\n    >\n      <div className=\"mb-2 [&_svg]:size-16\">{icon ?? STATUS_ICONS[status]}</div>\n      {title && <p className=\"text-xl font-medium\">{title}</p>}\n      {subTitle && <p className=\"text-muted-foreground text-sm\">{subTitle}</p>}\n      {extra && (\n        <div className=\"mt-4 flex items-center justify-center gap-2\">\n          {extra}\n        </div>\n      )}\n      {children && <div className=\"mt-4 w-full\">{children}</div>}\n    </div>\n  );\n};\n\nexport default Result;\n"],"mappings":";;;;AAiBA,MAAM,eAAgD;CACpD,SAAS,oBAAC,OAAD,EAAO,WAAU,iBAAkB,CAAA;CAC5C,OAAO,oBAAC,UAAD,EAAU,WAAU,eAAgB,CAAA;CAC3C,MAAM,oBAAC,MAAD,EAAM,WAAU,gBAAiB,CAAA;CACvC,SAAS,oBAAC,cAAD,EAAc,WAAU,kBAAmB,CAAA;CACpD,OAAO,oBAAC,cAAD,EAAc,WAAU,wBAAyB,CAAA;CACxD,OAAO,oBAAC,aAAD,EAAa,WAAU,wBAAyB,CAAA;CACvD,OAAO,oBAAC,aAAD,EAAa,WAAU,wBAAyB,CAAA;AACzD;AAaA,MAAM,UAAU,EACd,SAAS,QACT,MACA,OACA,UACA,OACA,WACA,UACA,GAAG,YACQ;CACX,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qEACA,SAEF;EACA,GAAI;EAPN,UAAA;GASE,oBAAC,OAAD;IAAK,WAAU;IAAwB,UAAA,QAAQ,aAAa;GAAa,CAAA;GACxE,SAAS,oBAAC,KAAD;IAAG,WAAU;IAAuB,UAAA;GAAS,CAAA;GACtD,YAAY,oBAAC,KAAD;IAAG,WAAU;IAAiC,UAAA;GAAY,CAAA;GACtE,SACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA;GAEN,YAAY,oBAAC,OAAD;IAAK,WAAU;IAAe;GAAc,CAAA;EACtD;;AAET"}

package/dist/core/badge.d.mts

@@ -2,7 +2,7 @@ import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 //#region src/core/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+  variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = Omit<useRender.ComponentProps<'span'>, 'className'> & VariantProps<typeof badgeVariants> & {
   className?: string;

package/dist/core/button.d.mts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 import { Button } from "@base-ui/react/button";
 //#region src/core/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+  variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
   size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = Omit<React$1.ComponentProps<typeof Button>, 'className'> & VariantProps<typeof buttonVariants> & {

package/dist/core/combobox.d.mts

@@ -0,0 +1,7 @@
+import "react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/core/combobox.d.ts
+type RootProps<Value, Item = Value, Multiple extends boolean | undefined = false> = Combobox.Root.Props<Value, Multiple, Item>;
+//#endregion
+export { RootProps };
+//# sourceMappingURL=combobox.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.mts","names":[],"sources":["../../src/core/combobox.tsx"],"mappings":";;;KAYY,UACV,OACA,OAAO,OACP,gDACE,SAAkB,KAAK,MAAM,OAAO,UAAU"}

package/dist/core/combobox.mjs

@@ -0,0 +1,99 @@
+"use client";
+import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
+import { cn } from "../utils.mjs";
+import { useConfig } from "../providers/config/context.mjs";
+import { OVERLAY_LAYER } from "../lib/z-layers.mjs";
+import "react";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/core/combobox.tsx
+var combobox_exports = /* @__PURE__ */ __exportAll({
+	Combobox: () => Combobox$1,
+	ComboboxChip: () => ComboboxChip,
+	ComboboxChipRemove: () => ComboboxChipRemove,
+	ComboboxChips: () => ComboboxChips,
+	ComboboxClear: () => ComboboxClear,
+	ComboboxCollection: () => ComboboxCollection,
+	ComboboxContent: () => ComboboxContent,
+	ComboboxEmpty: () => ComboboxEmpty,
+	ComboboxGroup: () => ComboboxGroup,
+	ComboboxGroupLabel: () => ComboboxGroupLabel,
+	ComboboxIcon: () => ComboboxIcon,
+	ComboboxInput: () => ComboboxInput,
+	ComboboxInputGroup: () => ComboboxInputGroup,
+	ComboboxItem: () => ComboboxItem,
+	ComboboxList: () => ComboboxList,
+	ComboboxTrigger: () => ComboboxTrigger,
+	ComboboxValue: () => ComboboxValue,
+	createItems: () => createItems
+});
+const Combobox$1 = Combobox.Root;
+const ComboboxInput = Combobox.Input;
+const ComboboxInputGroup = Combobox.InputGroup;
+const ComboboxTrigger = Combobox.Trigger;
+const ComboboxValue = Combobox.Value;
+const ComboboxIcon = Combobox.Icon;
+const ComboboxGroup = Combobox.Group;
+const ComboboxGroupLabel = Combobox.GroupLabel;
+const ComboboxCollection = Combobox.Collection;
+const ComboboxClear = Combobox.Clear;
+const ComboboxChips = Combobox.Chips;
+const ComboboxChip = Combobox.Chip;
+const ComboboxChipRemove = Combobox.ChipRemove;
+const createItems = Combobox.createItems;
+function ComboboxContent({ className, children, container, ...props }) {
+	const { getContainer } = useConfig();
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		container: container ?? getContainer(),
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			className: cn(OVERLAY_LAYER, "min-w-(--anchor-width)"),
+			children: /* @__PURE__ */ jsx(Combobox.Popup, {
+				"data-slot": "combobox-content",
+				className: cn(`bg-popover text-popover-foreground max-h-(--available-height)
+            origin-(--transform-origin) overflow-hidden rounded-md border
+            shadow-md transition-[opacity,transform] duration-150
+            data-ending-style:scale-95 data-ending-style:opacity-0
+            data-starting-style:scale-95 data-starting-style:opacity-0`, className),
+				...props,
+				children
+			})
+		})
+	});
+}
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		"data-slot": "combobox-list",
+		className: cn("max-h-60 overflow-y-auto p-1", className),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: cn(`data-highlighted:bg-accent data-highlighted:text-accent-foreground
+        relative flex w-full cursor-default items-center rounded-sm py-1.5 ps-2
+        pe-8 text-sm outline-hidden select-none
+        data-disabled:pointer-events-none data-disabled:opacity-50`, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+			"data-slot": "combobox-item-indicator",
+			className: "absolute end-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+		}), children]
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("text-muted-foreground px-2 py-3 text-center text-sm", className),
+		...props
+	});
+}
+//#endregion
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxIcon, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxList, ComboboxTrigger, ComboboxValue, combobox_exports, createItems };
+
+//# sourceMappingURL=combobox.mjs.map

package/dist/core/combobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.mjs","names":["Combobox","ComboboxPrimitive"],"sources":["../../src/core/combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport { CheckIcon } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\nexport type RootProps<\n  Value,\n  Item = Value,\n  Multiple extends boolean | undefined = false,\n> = ComboboxPrimitive.Root.Props<Value, Multiple, Item>;\n\nconst Combobox = ComboboxPrimitive.Root;\nconst ComboboxInput = ComboboxPrimitive.Input;\nconst ComboboxInputGroup = ComboboxPrimitive.InputGroup;\nconst ComboboxTrigger = ComboboxPrimitive.Trigger;\nconst ComboboxValue = ComboboxPrimitive.Value;\nconst ComboboxIcon = ComboboxPrimitive.Icon;\nconst ComboboxGroup = ComboboxPrimitive.Group;\nconst ComboboxGroupLabel = ComboboxPrimitive.GroupLabel;\nconst ComboboxCollection = ComboboxPrimitive.Collection;\nconst ComboboxClear = ComboboxPrimitive.Clear;\nconst ComboboxChips = ComboboxPrimitive.Chips;\nconst ComboboxChip = ComboboxPrimitive.Chip;\nconst ComboboxChipRemove = ComboboxPrimitive.ChipRemove;\nconst createItems = ComboboxPrimitive.createItems;\n\nfunction ComboboxContent({\n  className,\n  children,\n  container,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Popup> & {\n  container?: HTMLElement;\n}) {\n  const { getContainer } = useConfig();\n\n  return (\n    <ComboboxPrimitive.Portal container={container ?? getContainer()}>\n      <ComboboxPrimitive.Positioner\n        side=\"bottom\"\n        align=\"start\"\n        sideOffset={4}\n        className={cn(OVERLAY_LAYER, 'min-w-(--anchor-width)')}\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          className={cn(\n            `bg-popover text-popover-foreground max-h-(--available-height)\n            origin-(--transform-origin) overflow-hidden rounded-md border\n            shadow-md transition-[opacity,transform] duration-150\n            data-ending-style:scale-95 data-ending-style:opacity-0\n            data-starting-style:scale-95 data-starting-style:opacity-0`,\n            className,\n            //\n          )}\n          {...props}\n        >\n          {children}\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction ComboboxList({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.List>) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn('max-h-60 overflow-y-auto p-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Item>) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        `data-highlighted:bg-accent data-highlighted:text-accent-foreground\n        relative flex w-full cursor-default items-center rounded-sm py-1.5 ps-2\n        pe-8 text-sm outline-hidden select-none\n        data-disabled:pointer-events-none data-disabled:opacity-50`,\n        className,\n        //\n      )}\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator\n        data-slot=\"combobox-item-indicator\"\n        className=\"absolute end-2 flex size-3.5 items-center justify-center\"\n      >\n        <CheckIcon className=\"size-4\" />\n      </ComboboxPrimitive.ItemIndicator>\n      {children}\n    </ComboboxPrimitive.Item>\n  );\n}\n\nfunction ComboboxEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Empty>) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        'text-muted-foreground px-2 py-3 text-center text-sm',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Combobox,\n  ComboboxClear,\n  ComboboxChip,\n  ComboboxChipRemove,\n  ComboboxChips,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxIcon,\n  ComboboxInput,\n  ComboboxInputGroup,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxTrigger,\n  ComboboxValue,\n  createItems,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,aAAWC,SAAkB;AACnC,MAAM,gBAAgBA,SAAkB;AACxC,MAAM,qBAAqBA,SAAkB;AAC7C,MAAM,kBAAkBA,SAAkB;AAC1C,MAAM,gBAAgBA,SAAkB;AACxC,MAAM,eAAeA,SAAkB;AACvC,MAAM,gBAAgBA,SAAkB;AACxC,MAAM,qBAAqBA,SAAkB;AAC7C,MAAM,qBAAqBA,SAAkB;AAC7C,MAAM,gBAAgBA,SAAkB;AACxC,MAAM,gBAAgBA,SAAkB;AACxC,MAAM,eAAeA,SAAkB;AACvC,MAAM,qBAAqBA,SAAkB;AAC7C,MAAM,cAAcA,SAAkB;AAEtC,SAAS,gBAAgB,EACvB,WACA,UACA,WACA,GAAG,SAGF;CACD,MAAM,EAAE,iBAAiB,UAAU;CAEnC,OACE,oBAACA,SAAkB,QAAnB;EAA0B,WAAW,aAAa,aAAa;EAC7D,UAAA,oBAACA,SAAkB,YAAnB;GACE,MAAK;GACL,OAAM;GACN,YAAY;GACZ,WAAW,GAAG,eAAe,wBAAwB;GAErD,UAAA,oBAACA,SAAkB,OAAnB;IACE,aAAU;IACV,WAAW,GACT;;;;yEAKA,SAEF;IACA,GAAI;IAEH;GACsB,CAAA;EACG,CAAA;CACN,CAAA;AAE9B;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GAAG,gCAAgC,SAAS;EACvD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,UACA,GAAG,SACmD;CACtD,OACE,qBAACA,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT;;;qEAIA,SAEF;EACA,GAAI;EAVN,UAAA,CAYE,oBAACA,SAAkB,eAAnB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,WAAD,EAAW,WAAU,SAAU,CAAA;EACA,CAAA,GAChC,QACqB;;AAE5B;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,SAAkB,OAAnB;EACE,aAAU;EACV,WAAW,GACT,uDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/core/dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.mjs","names":["Dialog","DialogPrimitive"],"sources":["../../src/core/dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Dialog as DialogPrimitive } from '@base-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';\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n/*\n * Base UI primitives with repo-owned styling; no longer vendored from shadcn.\n *\n * Notes on the Radix → Base UI shape change:\n * - Radix's `Dialog.Overlay` becomes Base UI's `Dialog.Backdrop`, and\n *   `Dialog.Content` becomes `Dialog.Popup`.\n * - Open/close styling moves from Radix's `data-[state=open|closed]:animate-*`\n *   (inert here — this package never defined those keyframes) to Base UI's\n *   `data-starting-style`/`data-ending-style` transition hooks, which are plain\n *   Tailwind transitions and actually animate.\n * - Pointer-outside dismissal (antd's `maskClosable`) is a *root*-level concern\n *   in Base UI (`disablePointerDismissal`), not a Content event. See\n *   `organisms/modal`.\n *\n * Local patches retained from the shadcn version:\n * - `OVERLAY_LAYER` (src/lib/z-layers.ts) replaces upstream's `z-50` on the\n *   backdrop and popup — this package is published and can't own the app's\n *   z-index scale (#359).\n * - `DialogContent` takes a `container` prop (default `useConfig().getContainer()`)\n *   passed to the portal, so portalled content stays inside the themed wrapper.\n * - `DialogContent` exposes `closable`/`closeIcon`/`classNames.mask` instead of\n *   upstream's `showCloseButton`.\n * - `DialogFooter`'s close button uses this library's Button vocabulary.\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 {...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.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        `fixed inset-0 bg-black/50 transition-opacity duration-200\n        data-ending-style:opacity-0 data-starting-style:opacity-0`,\n        OVERLAY_LAYER,\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.Popup> & 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 data-open:bg-accent\n        data-open:text-muted-foreground absolute top-4 right-4 rounded-xs\n        opacity-70 transition-opacity hover:opacity-100 focus:ring-2\n        focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\n        [&_svg]:pointer-events-none [&_svg]:shrink-0\n        [&_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 container={resolvedContainer}>\n      <DialogOverlay className={cn(classNames?.mask)} />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          `bg-background fixed top-[50%] left-[50%] grid w-full\n          max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4\n          rounded-lg border p-6 shadow-lg transition-[opacity,transform]\n          duration-200 outline-none data-ending-style:scale-95\n          data-ending-style:opacity-0 data-starting-style:scale-95\n          data-starting-style:opacity-0 sm:max-w-lg`,\n          OVERLAY_LAYER,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {closable && closeIcon}\n      </DialogPrimitive.Popup>\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\n          render={<Button variant=\"outlined\">Close</Button>}\n        />\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":";;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAASA,SAAO,EACd,GAAG,SACiD;CACpD,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OAAO,oBAACA,OAAgB,QAAjB,EAAwB,GAAI,MAAQ,CAAA;AAC7C;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT;oEAEA,eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAS,cAAc,EACrB,WACA,UACA,YACA,WAAW,YACX,UACA,WACA,GAAG,SACuE;CAC1E,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,oBAAoB,aAAa,aAAa;CAEpD,MAAM,YACJ,qBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAU;EAMV,UAAU,OAAO,aAAa,YAAY,SAAS;EARrD,UAAA,CAUG,cAAc,oBAAC,OAAD,CAAQ,CAAA,GACvB,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAW,CAAA,CAChB;;CAGzB,OACE,qBAAC,cAAD;EAAc,WAAW;EAAzB,UAAA,CACE,oBAAC,eAAD,EAAe,WAAW,GAAG,YAAY,IAAI,EAAI,CAAA,GACjD,qBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT;;;;;sDAMA,eACA,SACF;GACA,GAAI;GAZN,UAAA,CAcG,UACA,YAAY,SACQ;EACX,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACA,mBACC,oBAACA,OAAgB,OAAjB,EACE,QAAQ,oBAAC,QAAD;GAAQ,SAAQ;GAAW,UAAA;EAAa,CAAA,EACjD,CAAA,CAEA;;AAET;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"dialog.mjs","names":["Dialog","DialogPrimitive"],"sources":["../../src/core/dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Dialog as DialogPrimitive } from '@base-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';\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n/*\n * Base UI primitives with repo-owned styling; no longer vendored from shadcn.\n *\n * Notes on the Radix → Base UI shape change:\n * - Radix's `Dialog.Overlay` becomes Base UI's `Dialog.Backdrop`, and\n *   `Dialog.Content` becomes `Dialog.Popup`.\n * - Open/close styling moves from Radix's `data-[state=open|closed]:animate-*`\n *   (inert here — this package never defined those keyframes) to Base UI's\n *   `data-starting-style`/`data-ending-style` transition hooks, which are plain\n *   Tailwind transitions and actually animate.\n * - Pointer-outside dismissal (antd's `maskClosable`) is a *root*-level concern\n *   in Base UI (`disablePointerDismissal`), not a Content event. See\n *   `organisms/modal`.\n *\n * Deviations from the shadcn Base UI styles this file was seeded from (#375;\n * there is no upstream to track any more):\n * - `OVERLAY_LAYER` (src/lib/z-layers.ts) replaces the seed's `z-50` on the\n *   backdrop and popup — this package is published and can't own the app's\n *   z-index scale (#359, re-evaluated in #411).\n * - `DialogContent` takes a `container` prop (default `useConfig().getContainer()`)\n *   passed to the portal, so portalled content stays inside the themed wrapper.\n * - `DialogContent` exposes `closable`/`closeIcon`/`classNames.mask` instead of\n *   the seed's `showCloseButton`.\n * - `DialogFooter`'s close button uses this library's Button vocabulary.\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 {...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.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        `fixed inset-0 bg-black/50 transition-opacity duration-200\n        data-ending-style:opacity-0 data-starting-style:opacity-0`,\n        OVERLAY_LAYER,\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.Popup> & 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 data-open:bg-accent\n        data-open:text-muted-foreground absolute top-4 right-4 rounded-xs\n        opacity-70 transition-opacity hover:opacity-100 focus:ring-2\n        focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\n        [&_svg]:pointer-events-none [&_svg]:shrink-0\n        [&_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 container={resolvedContainer}>\n      <DialogOverlay className={cn(classNames?.mask)} />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          `bg-background fixed top-[50%] left-[50%] grid w-full\n          max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4\n          rounded-lg border p-6 shadow-lg transition-[opacity,transform]\n          duration-200 outline-none data-ending-style:scale-95\n          data-ending-style:opacity-0 data-starting-style:scale-95\n          data-starting-style:opacity-0 sm:max-w-lg`,\n          OVERLAY_LAYER,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {closable && closeIcon}\n      </DialogPrimitive.Popup>\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\n          render={<Button variant=\"outlined\">Close</Button>}\n        />\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":";;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAASA,SAAO,EACd,GAAG,SACiD;CACpD,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OAAO,oBAACA,OAAgB,QAAjB,EAAwB,GAAI,MAAQ,CAAA;AAC7C;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT;oEAEA,eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAS,cAAc,EACrB,WACA,UACA,YACA,WAAW,YACX,UACA,WACA,GAAG,SACuE;CAC1E,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,oBAAoB,aAAa,aAAa;CAEpD,MAAM,YACJ,qBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAU;EAMV,UAAU,OAAO,aAAa,YAAY,SAAS;EARrD,UAAA,CAUG,cAAc,oBAAC,OAAD,CAAQ,CAAA,GACvB,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAW,CAAA,CAChB;;CAGzB,OACE,qBAAC,cAAD;EAAc,WAAW;EAAzB,UAAA,CACE,oBAAC,eAAD,EAAe,WAAW,GAAG,YAAY,IAAI,EAAI,CAAA,GACjD,qBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT;;;;;sDAMA,eACA,SACF;GACA,GAAI;GAZN,UAAA,CAcG,UACA,YAAY,SACQ;EACX,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACA,mBACC,oBAACA,OAAgB,OAAjB,EACE,QAAQ,oBAAC,QAAD;GAAQ,SAAQ;GAAW,UAAA;EAAa,CAAA,EACjD,CAAA,CAEA;;AAET;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/core/drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.mjs","names":["DialogPrimitive"],"sources":["../../src/core/drawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n/*\n * Drawer rebuilt on Base UI's Dialog primitives (ui-kit#375, Decision #2) —\n * no longer `vaul`. Base UI has no dedicated Drawer, so the side-sheet is a\n * Dialog whose popup is anchored to an edge and slides in/out.\n *\n * Consequences of dropping vaul:\n * - No drag-to-dismiss / snap points. The `handlebar` stays as a visual\n *   affordance on bottom drawers but is no longer draggable.\n * - `direction` is a local `DrawerContent` prop (top/bottom/left/right) exposed\n *   as `data-direction`, which drives both the popup's own placement/slide and\n *   the `group-data-[direction=…]` hooks the header/handlebar rely on. It\n *   replaces vaul's `data-vaul-drawer-direction`.\n * - Pointer-outside dismissal (`maskClosable`) is a root concern\n *   (`disablePointerDismissal`), and mask/modal behaviour is driven by the\n *   consumer — see `organisms/drawer`.\n *\n * Retained local patches: `OVERLAY_LAYER` (#359) over upstream's z-index, the\n * themed portal `container` (default `useConfig().getContainer()`), and the\n * `classNames`/`handlebar`/`mask` custom props.\n */\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal {...props} />;\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        `fixed inset-0 bg-black/50 transition-opacity duration-300\n        data-ending-style:opacity-0 data-starting-style:opacity-0`,\n        OVERLAY_LAYER,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  handlebar?: boolean;\n  mask?: boolean;\n  direction?: Direction;\n  container?: HTMLElement;\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  classNames = {},\n  handlebar,\n  mask = true,\n  direction = 'bottom',\n  container,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup> & CustomContentProps) {\n  const { getContainer } = useConfig();\n  const resolvedContainer = container ?? getContainer();\n\n  return (\n    <DrawerPortal container={resolvedContainer}>\n      {mask && <DrawerOverlay className={cn(classNames?.mask)} />}\n      <DialogPrimitive.Popup\n        data-slot=\"drawer-content\"\n        data-direction={direction}\n        className={cn(\n          `group/drawer-content bg-background fixed flex h-auto flex-col\n          transition-transform duration-300 ease-in-out`,\n          OVERLAY_LAYER,\n          `data-[direction=top]:inset-x-0 data-[direction=top]:top-0\n          data-[direction=top]:mb-24 data-[direction=top]:max-h-[80vh]\n          data-[direction=top]:w-full data-[direction=top]:rounded-b-lg\n          data-[direction=top]:border-b\n          data-[direction=top]:data-ending-style:-translate-y-full\n          data-[direction=top]:data-starting-style:-translate-y-full`,\n          `data-[direction=bottom]:inset-x-0 data-[direction=bottom]:bottom-0\n          data-[direction=bottom]:mt-24 data-[direction=bottom]:max-h-[80vh]\n          data-[direction=bottom]:w-full data-[direction=bottom]:rounded-t-lg\n          data-[direction=bottom]:border-t\n          data-[direction=bottom]:data-ending-style:translate-y-full\n          data-[direction=bottom]:data-starting-style:translate-y-full`,\n          `data-[direction=right]:inset-y-0 data-[direction=right]:right-0\n          data-[direction=right]:h-full data-[direction=right]:w-3/4\n          data-[direction=right]:border-l\n          data-[direction=right]:data-ending-style:translate-x-full\n          data-[direction=right]:data-starting-style:translate-x-full\n          data-[direction=right]:sm:max-w-sm`,\n          `data-[direction=left]:inset-y-0 data-[direction=left]:left-0\n          data-[direction=left]:h-full data-[direction=left]:w-3/4\n          data-[direction=left]:border-r\n          data-[direction=left]:data-ending-style:-translate-x-full\n          data-[direction=left]:data-starting-style:-translate-x-full\n          data-[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-[direction=bottom]/drawer-content:block`,\n              classNames?.handlebar,\n            )}\n          />\n        )}\n        {children}\n      </DialogPrimitive.Popup>\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-[direction=bottom]/drawer-content:text-center\n        group-data-[direction=top]/drawer-content:text-center md:gap-1.5\n        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 DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.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 DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.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":";;;;;;;;;;;;;;;;;;;;;AAiCA,SAAS,OAAO,EACd,GAAG,SACiD;CACpD,OAAO,oBAACA,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OAAO,oBAACA,OAAgB,QAAjB,EAAwB,GAAI,MAAQ,CAAA;AAC7C;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT;oEAEA,eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAUA,SAAS,cAAc,EACrB,WACA,UACA,aAAa,CAAC,GACd,WACA,OAAO,MACP,YAAY,UACZ,WACA,GAAG,SACuE;CAC1E,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,oBAAoB,aAAa,aAAa;CAEpD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAzB,UAAA,CACG,QAAQ,oBAAC,eAAD,EAAe,WAAW,GAAG,YAAY,IAAI,EAAI,CAAA,GAC1D,qBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,kBAAgB;GAChB,WAAW,GACT;0DAEA,eACA;;;;;uEAMA;;;;;yEAMA;;;;;+CAMA;;;;;8CAMA,SACF;GACA,GAAI;GAjCN,UAAA,CAmCG,aACC,oBAAC,OAAD,EACE,WAAW,GACT;mEAEA,YAAY,SACd,EACD,CAAA,GAEF,QACoB;EACX,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT;;;uBAIA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"drawer.mjs","names":["DialogPrimitive"],"sources":["../../src/core/drawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n/*\n * Drawer rebuilt on Base UI's Dialog primitives (ui-kit#375, Decision #2) —\n * no longer `vaul`. Base UI has no dedicated Drawer, so the side-sheet is a\n * Dialog whose popup is anchored to an edge and slides in/out.\n *\n * Consequences of dropping vaul:\n * - No drag-to-dismiss / snap points. The `handlebar` stays as a visual\n *   affordance on bottom drawers but is no longer draggable.\n * - `direction` is a local `DrawerContent` prop (top/bottom/left/right) exposed\n *   as `data-direction`, which drives both the popup's own placement/slide and\n *   the `group-data-[direction=…]` hooks the header/handlebar rely on. It\n *   replaces vaul's `data-vaul-drawer-direction`.\n * - Pointer-outside dismissal (`maskClosable`) is a root concern\n *   (`disablePointerDismissal`), and mask/modal behaviour is driven by the\n *   consumer — see `organisms/drawer`.\n *\n * Local additions: `OVERLAY_LAYER` (#359, #411) rather than a hard-coded\n * z-index, the themed portal `container` (default\n * `useConfig().getContainer()`), and the `classNames`/`handlebar`/`mask` custom\n * props.\n */\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal {...props} />;\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        `fixed inset-0 bg-black/50 transition-opacity duration-300\n        data-ending-style:opacity-0 data-starting-style:opacity-0`,\n        OVERLAY_LAYER,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  handlebar?: boolean;\n  mask?: boolean;\n  direction?: Direction;\n  container?: HTMLElement;\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  classNames = {},\n  handlebar,\n  mask = true,\n  direction = 'bottom',\n  container,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup> & CustomContentProps) {\n  const { getContainer } = useConfig();\n  const resolvedContainer = container ?? getContainer();\n\n  return (\n    <DrawerPortal container={resolvedContainer}>\n      {mask && <DrawerOverlay className={cn(classNames?.mask)} />}\n      <DialogPrimitive.Popup\n        data-slot=\"drawer-content\"\n        data-direction={direction}\n        className={cn(\n          `group/drawer-content bg-background fixed flex h-auto flex-col\n          transition-transform duration-300 ease-in-out`,\n          OVERLAY_LAYER,\n          `data-[direction=top]:inset-x-0 data-[direction=top]:top-0\n          data-[direction=top]:mb-24 data-[direction=top]:max-h-[80vh]\n          data-[direction=top]:w-full data-[direction=top]:rounded-b-lg\n          data-[direction=top]:border-b\n          data-[direction=top]:data-ending-style:-translate-y-full\n          data-[direction=top]:data-starting-style:-translate-y-full`,\n          `data-[direction=bottom]:inset-x-0 data-[direction=bottom]:bottom-0\n          data-[direction=bottom]:mt-24 data-[direction=bottom]:max-h-[80vh]\n          data-[direction=bottom]:w-full data-[direction=bottom]:rounded-t-lg\n          data-[direction=bottom]:border-t\n          data-[direction=bottom]:data-ending-style:translate-y-full\n          data-[direction=bottom]:data-starting-style:translate-y-full`,\n          `data-[direction=right]:inset-y-0 data-[direction=right]:right-0\n          data-[direction=right]:h-full data-[direction=right]:w-3/4\n          data-[direction=right]:border-l\n          data-[direction=right]:data-ending-style:translate-x-full\n          data-[direction=right]:data-starting-style:translate-x-full\n          data-[direction=right]:sm:max-w-sm`,\n          `data-[direction=left]:inset-y-0 data-[direction=left]:left-0\n          data-[direction=left]:h-full data-[direction=left]:w-3/4\n          data-[direction=left]:border-r\n          data-[direction=left]:data-ending-style:-translate-x-full\n          data-[direction=left]:data-starting-style:-translate-x-full\n          data-[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-[direction=bottom]/drawer-content:block`,\n              classNames?.handlebar,\n            )}\n          />\n        )}\n        {children}\n      </DialogPrimitive.Popup>\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-[direction=bottom]/drawer-content:text-center\n        group-data-[direction=top]/drawer-content:text-center md:gap-1.5\n        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 DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.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 DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.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":";;;;;;;;;;;;;;;;;;;;;AAkCA,SAAS,OAAO,EACd,GAAG,SACiD;CACpD,OAAO,oBAACA,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OAAO,oBAACA,OAAgB,QAAjB,EAAwB,GAAI,MAAQ,CAAA;AAC7C;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT;oEAEA,eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAUA,SAAS,cAAc,EACrB,WACA,UACA,aAAa,CAAC,GACd,WACA,OAAO,MACP,YAAY,UACZ,WACA,GAAG,SACuE;CAC1E,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,oBAAoB,aAAa,aAAa;CAEpD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAzB,UAAA,CACG,QAAQ,oBAAC,eAAD,EAAe,WAAW,GAAG,YAAY,IAAI,EAAI,CAAA,GAC1D,qBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,kBAAgB;GAChB,WAAW,GACT;0DAEA,eACA;;;;;uEAMA;;;;;yEAMA;;;;;+CAMA;;;;;8CAMA,SACF;GACA,GAAI;GAjCN,UAAA,CAmCG,aACC,oBAAC,OAAD,EACE,WAAW,GACT;mEAEA,YAAY,SACd,EACD,CAAA,GAEF,QACoB;EACX,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT;;;uBAIA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/core/field.mjs

@@ -81,9 +81,7 @@ function FieldLabel({ className, ...props }) {
 		className: cn(`group/field-label peer/field-label flex w-fit gap-2 leading-snug
         group-data-[disabled=true]/field:opacity-50`, `has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col
         has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border
-        [&>*]:data-[slot=field]:p-4`, `has-data-[state=checked]:bg-primary/5
-        has-data-[state=checked]:border-primary
-        dark:has-data-[state=checked]:bg-primary/10`, className),
+        [&>*]:data-[slot=field]:p-4`, className),
 		...props
 	});
 }
@@ -124,7 +122,7 @@ function FieldError({ className, children, errors, ...props }) {
 		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
 		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
 		return /* @__PURE__ */ jsx("ul", {
-			className: "m-0 ml-4 flex list-disc flex-col gap-1 p-0",
+			className: "ml-4 flex list-disc flex-col gap-1 p-0",
 			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
 		});
 	}, [children, errors]);