@customafk/lunas-ui 0.2.75 → 0.2.77

package/dist/dialogs/confirm-dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.cjs","names":["AlertDialog","AlertDialogContent","AlertDialogHeader","AlertDialogTitle","TriangleAlert","AlertDialogDescription","AlertDialogFooter","AlertDialogCancel","AlertDialogAction"],"sources":["../../packages/components/dialogs/confirm-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { TriangleAlert } from 'lucide-react';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from '../ui/alert-dialog';\n\n/**\n * Props for the {@link ConfirmDialog} component.\n */\nexport type ConfirmDialogProps = {\n  /**\n   * Controls whether the dialog is currently open.\n   * This is a **controlled** prop — pair it with `onOpenChange` to manage state.\n   */\n  open?: boolean;\n\n  /**\n   * When `true`, shows an animated spinner inside the confirm button and\n   * prevents double-submission. Typically bound to a mutation's pending state.\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n\n  /**\n   * The dialog heading text. Keep it short and action-oriented,\n   * e.g. `\"Delete user?\"` or `\"Unsaved changes\"`.\n   */\n  title: string;\n\n  /**\n   * Body copy explaining what will happen if the user confirms.\n   * For irreversible actions, state explicitly that the action cannot be undone.\n   */\n  description: string;\n\n  /**\n   * Label for the cancel / dismiss button.\n   *\n   * @default \"Cancel\"\n   */\n  cancelText?: string;\n\n  /**\n   * Label for the confirm / submit button.\n   *\n   * @default \"Confirm\"\n   */\n  submitText?: string;\n\n  /**\n   * Additional class names applied to the `AlertDialogDescription` element.\n   * Useful for overriding text color or font size for specific contexts.\n   */\n  descriptionClassName?: string;\n\n  /**\n   * Callback fired when the dialog open state changes.\n   * Required to implement controlled open / close behavior.\n   *\n   * @param open - `true` when opening, `false` when closing.\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * Async-safe callback fired when the user clicks the confirm button.\n   * Supports both synchronous and `Promise`-returning functions.\n   *\n   * The dialog does **not** auto-close after `onConfirm` resolves — the caller\n   * is responsible for setting `open` to `false` once the operation completes.\n   *\n   * @example\n   * ```tsx\n   * onConfirm={async () => {\n   *   await deleteUser(userId);\n   *   setOpen(false);\n   * }}\n   * ```\n   */\n  onConfirm?: () => Promise<void> | void;\n};\n\n/**\n * A controlled confirmation dialog for destructive or irreversible actions.\n *\n * Built on Radix UI's `AlertDialog` primitive. Renders a warning icon, title,\n * description, and Cancel / Confirm buttons. The confirm button supports an\n * async loading state to prevent double-submission.\n *\n * **Import:** `import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog'`\n *\n * @example Delete confirmation with React state\n * ```tsx\n * import { useState } from 'react';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';\n *\n * export function DeleteUserButton({ userId }: { userId: string }) {\n *   const [open, setOpen] = useState(false);\n *   const [isPending, setIsPending] = useState(false);\n *\n *   const handleDelete = async () => {\n *     setIsPending(true);\n *     try {\n *       await deleteUser(userId);\n *       setOpen(false);\n *     } finally {\n *       setIsPending(false);\n *     }\n *   };\n *\n *   return (\n *     <>\n *       <Button variant=\"outline\" color=\"danger\" onClick={() => setOpen(true)}>\n *         Delete user\n *       </Button>\n *       <ConfirmDialog\n *         open={open}\n *         title=\"Delete user?\"\n *         description=\"This action is permanent and cannot be undone.\"\n *         submitText=\"Yes, delete\"\n *         isLoading={isPending}\n *         onOpenChange={setOpen}\n *         onConfirm={handleDelete}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @example With TanStack Query mutation\n * ```tsx\n * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';\n * import { useMutation } from '@tanstack/react-query';\n *\n * export function ArchiveDialog({ open, onOpenChange, id }: Props) {\n *   const { mutateAsync, isPending } = useMutation({ mutationFn: archiveItem });\n *\n *   return (\n *     <ConfirmDialog\n *       open={open}\n *       title=\"Archive item?\"\n *       description=\"The item will be hidden but can be restored later.\"\n *       submitText=\"Archive\"\n *       isLoading={isPending}\n *       onOpenChange={onOpenChange}\n *       onConfirm={() => mutateAsync(id).then(() => onOpenChange(false))}\n *     />\n *   );\n * }\n * ```\n */\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = ({\n  open,\n  isLoading = false,\n  title,\n  description,\n  cancelText = 'Hủy',\n  submitText = 'Xác nhận',\n  descriptionClassName,\n  onOpenChange,\n  onConfirm,\n}) => {\n  const handleConfirm = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onConfirm?.();\n    },\n    [onConfirm]\n  );\n\n  return (\n    <AlertDialog open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent className=\"p-4 pb-5\">\n        <AlertDialogHeader className=\"gap-2\">\n          <AlertDialogTitle className=\"inline-flex items-center gap-x-1\">\n            <TriangleAlert size={20} />\n            <p>{title}</p>\n          </AlertDialogTitle>\n          <AlertDialogDescription className={descriptionClassName}>{description}</AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>{cancelText}</AlertDialogCancel>\n          <AlertDialogAction type=\"button\" className=\"min-h-9 w-full md:w-24\" onClick={handleConfirm}>\n            {isLoading ? (\n              <div className=\"absolute inset-0 flex items-center justify-center\">\n                <div className=\"loader-spinner text-text-positive-weak\" />\n              </div>\n            ) : (\n              submitText\n            )}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\n"],"mappings":"0MAmKA,MAAa,GAA+C,CAC1D,OACA,YAAY,GACZ,QACA,cACA,aAAa,MACb,aAAa,WACb,uBACA,eACA,eACI,CACJ,IAAM,GAAA,EAAA,EAAA,YAAA,CACH,GAAwB,CACvB,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,IAAY,CACd,EACA,CAAC,CAAS,CACZ,EAEA,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,YAAD,CAAmB,OAAoB,yBACrC,EAAA,EAAA,KAAA,CAACC,EAAAA,mBAAD,CAAoB,UAAU,oBAA9B,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,kBAAD,CAAmB,UAAU,iBAA7B,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAkB,UAAU,4CAA5B,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,EAAK,CAAA,GAC1B,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,CAAS,CAAA,CACG,KAClB,EAAA,EAAA,IAAA,CAACC,EAAAA,uBAAD,CAAwB,UAAW,WAAuB,CAAoC,CAAA,CAC7E,KACnB,EAAA,EAAA,KAAA,CAACC,EAAAA,kBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAA,SAAoB,CAA8B,CAAA,GAClD,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAmB,KAAK,SAAS,UAAU,yBAAyB,QAAS,WAC1E,GACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,8DACb,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wCAA0C,CAAA,CACtD,CAAA,EAEL,CAEe,CAAA,CACF,CAAA,CAAA,CACD,GACT,CAAA,CAEjB"}
+{"version":3,"file":"confirm-dialog.cjs","names":["AlertDialog","AlertDialogContent","AlertDialogHeader","AlertDialogTitle","TriangleAlert","AlertDialogDescription","AlertDialogFooter","AlertDialogCancel","AlertDialogAction"],"sources":["../../packages/components/dialogs/confirm-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { TriangleAlert } from 'lucide-react';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from '../ui/alert-dialog';\n\n/**\n * Props for the {@link ConfirmDialog} component.\n */\nexport type ConfirmDialogProps = {\n  /**\n   * Controls whether the dialog is currently open.\n   * This is a **controlled** prop — pair it with `onOpenChange` to manage state.\n   */\n  open?: boolean;\n\n  /**\n   * When `true`, shows an animated spinner inside the confirm button and\n   * prevents double-submission. Typically bound to a mutation's pending state.\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n\n  /**\n   * The dialog heading text. Keep it short and action-oriented,\n   * e.g. `\"Delete user?\"` or `\"Unsaved changes\"`.\n   */\n  title: string;\n\n  /**\n   * Body copy explaining what will happen if the user confirms.\n   * For irreversible actions, state explicitly that the action cannot be undone.\n   */\n  description: string;\n\n  /**\n   * Label for the cancel / dismiss button.\n   *\n   * @default \"Cancel\"\n   */\n  cancelText?: string;\n\n  /**\n   * Label for the confirm / submit button.\n   *\n   * @default \"Confirm\"\n   */\n  submitText?: string;\n\n  /**\n   * Additional class names applied to the `AlertDialogDescription` element.\n   * Useful for overriding text color or font size for specific contexts.\n   */\n  descriptionClassName?: string;\n\n  /**\n   * Callback fired when the dialog open state changes.\n   * Required to implement controlled open / close behavior.\n   *\n   * @param open - `true` when opening, `false` when closing.\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * Async-safe callback fired when the user clicks the confirm button.\n   * Supports both synchronous and `Promise`-returning functions.\n   *\n   * The dialog does **not** auto-close after `onConfirm` resolves — the caller\n   * is responsible for setting `open` to `false` once the operation completes.\n   *\n   * @example\n   * ```tsx\n   * onConfirm={async () => {\n   *   await deleteUser(userId);\n   *   setOpen(false);\n   * }}\n   * ```\n   */\n  onConfirm?: () => Promise<void> | void;\n};\n\n/**\n * A controlled confirmation dialog for destructive or irreversible actions.\n *\n * Built on Radix UI's `AlertDialog` primitive. Renders a warning icon, title,\n * description, and Cancel / Confirm buttons. The confirm button supports an\n * async loading state to prevent double-submission.\n *\n * **Import:** `import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog'`\n *\n * @example Delete confirmation with React state\n * ```tsx\n * import { useState } from 'react';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';\n *\n * export function DeleteUserButton({ userId }: { userId: string }) {\n *   const [open, setOpen] = useState(false);\n *   const [isPending, setIsPending] = useState(false);\n *\n *   const handleDelete = async () => {\n *     setIsPending(true);\n *     try {\n *       await deleteUser(userId);\n *       setOpen(false);\n *     } finally {\n *       setIsPending(false);\n *     }\n *   };\n *\n *   return (\n *     <>\n *       <Button variant=\"outline\" color=\"danger\" onClick={() => setOpen(true)}>\n *         Delete user\n *       </Button>\n *       <ConfirmDialog\n *         open={open}\n *         title=\"Delete user?\"\n *         description=\"This action is permanent and cannot be undone.\"\n *         submitText=\"Yes, delete\"\n *         isLoading={isPending}\n *         onOpenChange={setOpen}\n *         onConfirm={handleDelete}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @example With TanStack Query mutation\n * ```tsx\n * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';\n * import { useMutation } from '@tanstack/react-query';\n *\n * export function ArchiveDialog({ open, onOpenChange, id }: Props) {\n *   const { mutateAsync, isPending } = useMutation({ mutationFn: archiveItem });\n *\n *   return (\n *     <ConfirmDialog\n *       open={open}\n *       title=\"Archive item?\"\n *       description=\"The item will be hidden but can be restored later.\"\n *       submitText=\"Archive\"\n *       isLoading={isPending}\n *       onOpenChange={onOpenChange}\n *       onConfirm={() => mutateAsync(id).then(() => onOpenChange(false))}\n *     />\n *   );\n * }\n * ```\n */\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = ({\n  open,\n  isLoading = false,\n  title,\n  description,\n  cancelText = 'Hủy',\n  submitText = 'Xác nhận',\n  descriptionClassName,\n  onOpenChange,\n  onConfirm,\n}) => {\n  const handleConfirm = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onConfirm?.();\n    },\n    [onConfirm]\n  );\n\n  return (\n    <AlertDialog open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent className=\"p-4 pb-5\">\n        <AlertDialogHeader className=\"gap-2\">\n          <AlertDialogTitle className=\"inline-flex items-center gap-x-1\">\n            <TriangleAlert size={20} />\n            <p>{title}</p>\n          </AlertDialogTitle>\n          <AlertDialogDescription className={descriptionClassName}>{description}</AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>{cancelText}</AlertDialogCancel>\n          <AlertDialogAction type=\"button\" className=\"min-h-9 w-full md:w-24\" onClick={handleConfirm}>\n            {isLoading ? (\n              <div className=\"absolute inset-0 flex items-center justify-center\">\n                <div className=\"loader-spinner text-text-positive-weak\" />\n              </div>\n            ) : (\n              submitText\n            )}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\n"],"mappings":"0MAmKA,MAAa,GAA+C,CAC1D,OACA,YAAY,GACZ,QACA,cACA,aAAa,MACb,aAAa,WACb,uBACA,eACA,eACI,CACJ,IAAM,GAAA,EAAA,EAAA,YAAA,CACH,GAAwB,CACvB,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,IAAY,CACd,EACA,CAAC,CAAS,CACZ,EAEA,OACE,EAAA,EAAA,IAAA,CAACA,EAAAA,YAAD,CAAmB,OAAoB,eACrC,UAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,mBAAD,CAAoB,UAAU,WAA9B,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,kBAAD,CAAmB,UAAU,QAA7B,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAkB,UAAU,mCAA5B,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,EAAK,CAAA,GAC1B,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,CAAS,CAAA,CACG,CAClB,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,uBAAD,CAAwB,UAAW,EAAuB,SAAA,CAAoC,CAAA,CAC7E,CACnB,CAAA,GAAA,EAAA,EAAA,KAAA,CAACC,EAAAA,kBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAA,SAAoB,CAA8B,CAAA,GAClD,EAAA,EAAA,IAAA,CAACC,EAAAA,kBAAD,CAAmB,KAAK,SAAS,UAAU,yBAAyB,QAAS,EAC1E,SAAA,GACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,oDACb,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wCAA0C,CAAA,CACtD,CAAA,EAEL,CAEe,CAAA,CACF,CAAA,CAAA,CACD,GACT,CAAA,CAEjB"}

package/dist/dialogs/confirm-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.mjs","names":[],"sources":["../../packages/components/dialogs/confirm-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { TriangleAlert } from 'lucide-react';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from '../ui/alert-dialog';\n\n/**\n * Props for the {@link ConfirmDialog} component.\n */\nexport type ConfirmDialogProps = {\n  /**\n   * Controls whether the dialog is currently open.\n   * This is a **controlled** prop — pair it with `onOpenChange` to manage state.\n   */\n  open?: boolean;\n\n  /**\n   * When `true`, shows an animated spinner inside the confirm button and\n   * prevents double-submission. Typically bound to a mutation's pending state.\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n\n  /**\n   * The dialog heading text. Keep it short and action-oriented,\n   * e.g. `\"Delete user?\"` or `\"Unsaved changes\"`.\n   */\n  title: string;\n\n  /**\n   * Body copy explaining what will happen if the user confirms.\n   * For irreversible actions, state explicitly that the action cannot be undone.\n   */\n  description: string;\n\n  /**\n   * Label for the cancel / dismiss button.\n   *\n   * @default \"Cancel\"\n   */\n  cancelText?: string;\n\n  /**\n   * Label for the confirm / submit button.\n   *\n   * @default \"Confirm\"\n   */\n  submitText?: string;\n\n  /**\n   * Additional class names applied to the `AlertDialogDescription` element.\n   * Useful for overriding text color or font size for specific contexts.\n   */\n  descriptionClassName?: string;\n\n  /**\n   * Callback fired when the dialog open state changes.\n   * Required to implement controlled open / close behavior.\n   *\n   * @param open - `true` when opening, `false` when closing.\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * Async-safe callback fired when the user clicks the confirm button.\n   * Supports both synchronous and `Promise`-returning functions.\n   *\n   * The dialog does **not** auto-close after `onConfirm` resolves — the caller\n   * is responsible for setting `open` to `false` once the operation completes.\n   *\n   * @example\n   * ```tsx\n   * onConfirm={async () => {\n   *   await deleteUser(userId);\n   *   setOpen(false);\n   * }}\n   * ```\n   */\n  onConfirm?: () => Promise<void> | void;\n};\n\n/**\n * A controlled confirmation dialog for destructive or irreversible actions.\n *\n * Built on Radix UI's `AlertDialog` primitive. Renders a warning icon, title,\n * description, and Cancel / Confirm buttons. The confirm button supports an\n * async loading state to prevent double-submission.\n *\n * **Import:** `import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog'`\n *\n * @example Delete confirmation with React state\n * ```tsx\n * import { useState } from 'react';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';\n *\n * export function DeleteUserButton({ userId }: { userId: string }) {\n *   const [open, setOpen] = useState(false);\n *   const [isPending, setIsPending] = useState(false);\n *\n *   const handleDelete = async () => {\n *     setIsPending(true);\n *     try {\n *       await deleteUser(userId);\n *       setOpen(false);\n *     } finally {\n *       setIsPending(false);\n *     }\n *   };\n *\n *   return (\n *     <>\n *       <Button variant=\"outline\" color=\"danger\" onClick={() => setOpen(true)}>\n *         Delete user\n *       </Button>\n *       <ConfirmDialog\n *         open={open}\n *         title=\"Delete user?\"\n *         description=\"This action is permanent and cannot be undone.\"\n *         submitText=\"Yes, delete\"\n *         isLoading={isPending}\n *         onOpenChange={setOpen}\n *         onConfirm={handleDelete}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @example With TanStack Query mutation\n * ```tsx\n * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';\n * import { useMutation } from '@tanstack/react-query';\n *\n * export function ArchiveDialog({ open, onOpenChange, id }: Props) {\n *   const { mutateAsync, isPending } = useMutation({ mutationFn: archiveItem });\n *\n *   return (\n *     <ConfirmDialog\n *       open={open}\n *       title=\"Archive item?\"\n *       description=\"The item will be hidden but can be restored later.\"\n *       submitText=\"Archive\"\n *       isLoading={isPending}\n *       onOpenChange={onOpenChange}\n *       onConfirm={() => mutateAsync(id).then(() => onOpenChange(false))}\n *     />\n *   );\n * }\n * ```\n */\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = ({\n  open,\n  isLoading = false,\n  title,\n  description,\n  cancelText = 'Hủy',\n  submitText = 'Xác nhận',\n  descriptionClassName,\n  onOpenChange,\n  onConfirm,\n}) => {\n  const handleConfirm = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onConfirm?.();\n    },\n    [onConfirm]\n  );\n\n  return (\n    <AlertDialog open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent className=\"p-4 pb-5\">\n        <AlertDialogHeader className=\"gap-2\">\n          <AlertDialogTitle className=\"inline-flex items-center gap-x-1\">\n            <TriangleAlert size={20} />\n            <p>{title}</p>\n          </AlertDialogTitle>\n          <AlertDialogDescription className={descriptionClassName}>{description}</AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>{cancelText}</AlertDialogCancel>\n          <AlertDialogAction type=\"button\" className=\"min-h-9 w-full md:w-24\" onClick={handleConfirm}>\n            {isLoading ? (\n              <div className=\"absolute inset-0 flex items-center justify-center\">\n                <div className=\"loader-spinner text-text-positive-weak\" />\n              </div>\n            ) : (\n              submitText\n            )}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\n"],"mappings":"2WAmKA,MAAa,GAA+C,CAC1D,OACA,YAAY,GACZ,QACA,cACA,aAAa,MACb,aAAa,WACb,uBACA,eACA,eACI,CACJ,IAAM,EAAgB,EACnB,GAAwB,CACvB,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,IAAY,CACd,EACA,CAAC,CAAS,CACZ,EAEA,OACE,EAAC,EAAD,CAAmB,OAAoB,wBACrC,EAAC,EAAD,CAAoB,UAAU,oBAA9B,CACE,EAAC,EAAD,CAAmB,UAAU,iBAA7B,CACE,EAAC,EAAD,CAAkB,UAAU,4CAA5B,CACE,EAAC,EAAD,CAAe,KAAM,EAAK,CAAA,EAC1B,EAAC,IAAD,CAAA,SAAI,CAAS,CAAA,CACG,IAClB,EAAC,EAAD,CAAwB,UAAW,WAAuB,CAAoC,CAAA,CAC7E,IACnB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAoB,CAA8B,CAAA,EAClD,EAAC,EAAD,CAAmB,KAAK,SAAS,UAAU,yBAAyB,QAAS,WAC1E,EACC,EAAC,MAAD,CAAK,UAAU,6DACb,EAAC,MAAD,CAAK,UAAU,wCAA0C,CAAA,CACtD,CAAA,EAEL,CAEe,CAAA,CACF,CAAA,CAAA,CACD,GACT,CAAA,CAEjB"}
+{"version":3,"file":"confirm-dialog.mjs","names":[],"sources":["../../packages/components/dialogs/confirm-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { TriangleAlert } from 'lucide-react';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from '../ui/alert-dialog';\n\n/**\n * Props for the {@link ConfirmDialog} component.\n */\nexport type ConfirmDialogProps = {\n  /**\n   * Controls whether the dialog is currently open.\n   * This is a **controlled** prop — pair it with `onOpenChange` to manage state.\n   */\n  open?: boolean;\n\n  /**\n   * When `true`, shows an animated spinner inside the confirm button and\n   * prevents double-submission. Typically bound to a mutation's pending state.\n   *\n   * @default false\n   */\n  isLoading?: boolean;\n\n  /**\n   * The dialog heading text. Keep it short and action-oriented,\n   * e.g. `\"Delete user?\"` or `\"Unsaved changes\"`.\n   */\n  title: string;\n\n  /**\n   * Body copy explaining what will happen if the user confirms.\n   * For irreversible actions, state explicitly that the action cannot be undone.\n   */\n  description: string;\n\n  /**\n   * Label for the cancel / dismiss button.\n   *\n   * @default \"Cancel\"\n   */\n  cancelText?: string;\n\n  /**\n   * Label for the confirm / submit button.\n   *\n   * @default \"Confirm\"\n   */\n  submitText?: string;\n\n  /**\n   * Additional class names applied to the `AlertDialogDescription` element.\n   * Useful for overriding text color or font size for specific contexts.\n   */\n  descriptionClassName?: string;\n\n  /**\n   * Callback fired when the dialog open state changes.\n   * Required to implement controlled open / close behavior.\n   *\n   * @param open - `true` when opening, `false` when closing.\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * Async-safe callback fired when the user clicks the confirm button.\n   * Supports both synchronous and `Promise`-returning functions.\n   *\n   * The dialog does **not** auto-close after `onConfirm` resolves — the caller\n   * is responsible for setting `open` to `false` once the operation completes.\n   *\n   * @example\n   * ```tsx\n   * onConfirm={async () => {\n   *   await deleteUser(userId);\n   *   setOpen(false);\n   * }}\n   * ```\n   */\n  onConfirm?: () => Promise<void> | void;\n};\n\n/**\n * A controlled confirmation dialog for destructive or irreversible actions.\n *\n * Built on Radix UI's `AlertDialog` primitive. Renders a warning icon, title,\n * description, and Cancel / Confirm buttons. The confirm button supports an\n * async loading state to prevent double-submission.\n *\n * **Import:** `import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog'`\n *\n * @example Delete confirmation with React state\n * ```tsx\n * import { useState } from 'react';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';\n *\n * export function DeleteUserButton({ userId }: { userId: string }) {\n *   const [open, setOpen] = useState(false);\n *   const [isPending, setIsPending] = useState(false);\n *\n *   const handleDelete = async () => {\n *     setIsPending(true);\n *     try {\n *       await deleteUser(userId);\n *       setOpen(false);\n *     } finally {\n *       setIsPending(false);\n *     }\n *   };\n *\n *   return (\n *     <>\n *       <Button variant=\"outline\" color=\"danger\" onClick={() => setOpen(true)}>\n *         Delete user\n *       </Button>\n *       <ConfirmDialog\n *         open={open}\n *         title=\"Delete user?\"\n *         description=\"This action is permanent and cannot be undone.\"\n *         submitText=\"Yes, delete\"\n *         isLoading={isPending}\n *         onOpenChange={setOpen}\n *         onConfirm={handleDelete}\n *       />\n *     </>\n *   );\n * }\n * ```\n *\n * @example With TanStack Query mutation\n * ```tsx\n * import { ConfirmDialog } from '@customafk/lunas-ui/dialogs/confirm-dialog';\n * import { useMutation } from '@tanstack/react-query';\n *\n * export function ArchiveDialog({ open, onOpenChange, id }: Props) {\n *   const { mutateAsync, isPending } = useMutation({ mutationFn: archiveItem });\n *\n *   return (\n *     <ConfirmDialog\n *       open={open}\n *       title=\"Archive item?\"\n *       description=\"The item will be hidden but can be restored later.\"\n *       submitText=\"Archive\"\n *       isLoading={isPending}\n *       onOpenChange={onOpenChange}\n *       onConfirm={() => mutateAsync(id).then(() => onOpenChange(false))}\n *     />\n *   );\n * }\n * ```\n */\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = ({\n  open,\n  isLoading = false,\n  title,\n  description,\n  cancelText = 'Hủy',\n  submitText = 'Xác nhận',\n  descriptionClassName,\n  onOpenChange,\n  onConfirm,\n}) => {\n  const handleConfirm = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      onConfirm?.();\n    },\n    [onConfirm]\n  );\n\n  return (\n    <AlertDialog open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent className=\"p-4 pb-5\">\n        <AlertDialogHeader className=\"gap-2\">\n          <AlertDialogTitle className=\"inline-flex items-center gap-x-1\">\n            <TriangleAlert size={20} />\n            <p>{title}</p>\n          </AlertDialogTitle>\n          <AlertDialogDescription className={descriptionClassName}>{description}</AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>{cancelText}</AlertDialogCancel>\n          <AlertDialogAction type=\"button\" className=\"min-h-9 w-full md:w-24\" onClick={handleConfirm}>\n            {isLoading ? (\n              <div className=\"absolute inset-0 flex items-center justify-center\">\n                <div className=\"loader-spinner text-text-positive-weak\" />\n              </div>\n            ) : (\n              submitText\n            )}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\n"],"mappings":"2WAmKA,MAAa,GAA+C,CAC1D,OACA,YAAY,GACZ,QACA,cACA,aAAa,MACb,aAAa,WACb,uBACA,eACA,eACI,CACJ,IAAM,EAAgB,EACnB,GAAwB,CACvB,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,IAAY,CACd,EACA,CAAC,CAAS,CACZ,EAEA,OACE,EAAC,EAAD,CAAmB,OAAoB,eACrC,SAAA,EAAC,EAAD,CAAoB,UAAU,WAA9B,SAAA,CACE,EAAC,EAAD,CAAmB,UAAU,QAA7B,SAAA,CACE,EAAC,EAAD,CAAkB,UAAU,mCAA5B,SAAA,CACE,EAAC,EAAD,CAAe,KAAM,EAAK,CAAA,EAC1B,EAAC,IAAD,CAAA,SAAI,CAAS,CAAA,CACG,CAClB,CAAA,EAAA,EAAC,EAAD,CAAwB,UAAW,EAAuB,SAAA,CAAoC,CAAA,CAC7E,CACnB,CAAA,EAAA,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SAAoB,CAA8B,CAAA,EAClD,EAAC,EAAD,CAAmB,KAAK,SAAS,UAAU,yBAAyB,QAAS,EAC1E,SAAA,EACC,EAAC,MAAD,CAAK,UAAU,oDACb,SAAA,EAAC,MAAD,CAAK,UAAU,wCAA0C,CAAA,CACtD,CAAA,EAEL,CAEe,CAAA,CACF,CAAA,CAAA,CACD,GACT,CAAA,CAEjB"}

package/dist/dialogs/detail-dialog/components/sidebar.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../ui/skeleton.cjs"),t=require("../../../sidebar-core-DQE6ymo4.cjs"),n=require("../../../ui/separator.cjs");let r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime"),o=require("radix-ui");function s({className:e,...n}){let{toggleSidebar:r}=t.u();return(0,a.jsx)(`button`,{"data-sidebar":`rail`,"data-slot":`sidebar-rail`,"aria-label":`Toggle Sidebar`,tabIndex:-1,onClick:r,title:`Toggle Sidebar`,className:(0,i.cn)(`absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex`,`after:absolute after:inset-y-0 after:left-1/2 after:w-0.5`,`hover:after:bg-sidebar-border`,`group-data-[side=left]:-right-4 group-data-[side=right]:left-0`,`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize`,`hover:group-data-[collapsible=offcanvas]:bg-sidebar`,`group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full`,`[[data-side=left][data-collapsible=offcanvas]_&]:-right-2`,`[[data-side=right][data-collapsible=offcanvas]_&]:-left-2`,e),...n})}function c({className:e,...t}){return(0,a.jsx)(`main`,{"data-slot":`sidebar-inset`,className:(0,i.cn)(`relative flex w-full flex-1 flex-col bg-background`,`md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0`,`md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm`,`md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2`,e),...t})}function l({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:(0,i.cn)(`relative flex w-full min-w-0 flex-col p-2`,e),...t})}function u({className:e,asChild:t=!1,...n}){return(0,a.jsx)(t?o.Slot.Slot:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:(0,i.cn)(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2`,`[&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,e),...n})}function d({className:e,asChild:t=!1,...n}){return(0,a.jsx)(t?o.Slot.Slot:`button`,{"data-slot":`sidebar-group-action`,"data-sidebar":`group-action`,className:(0,i.cn)(`absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`[&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`group-data-[collapsible=icon]:hidden`,e),...n})}function f({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:(0,i.cn)(`w-full text-sm`,e),...t})}function p({className:e,asChild:t=!1,showOnHover:n=!1,...r}){return(0,a.jsx)(t?o.Slot.Slot:`button`,{"data-slot":`sidebar-menu-action`,"data-sidebar":`menu-action`,className:(0,i.cn)(`absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden`,`text-sidebar-foreground ring-sidebar-ring`,`transition-[background-color,color,opacity]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`peer-hover/menu-button:text-sidebar-accent-foreground`,`[&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,n&&`peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,n&&`group-focus-within/menu-item:opacity-100`,n&&`group-hover/menu-item:opacity-100`,n&&`data-[state=open]:opacity-100 md:opacity-0`,e),...r})}function m({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:(0,i.cn)(`pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors`,`peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,e),...t})}function h({className:t,showIcon:n=!1,...o}){let s=(0,r.useMemo)(()=>`${Math.floor(Math.random()*40)+50}%`,[]);return(0,a.jsxs)(`div`,{"data-slot":`sidebar-menu-skeleton`,"data-sidebar":`menu-skeleton`,className:(0,i.cn)(`flex h-8 items-center gap-2 rounded-md px-2`,t),...o,children:[n&&(0,a.jsx)(e.Skeleton,{className:`size-4 rounded-md`,"data-sidebar":`menu-skeleton-icon`}),(0,a.jsx)(e.Skeleton,{className:`h-4 max-w-(--skeleton-width) flex-1`,"data-sidebar":`menu-skeleton-text`,style:{"--skeleton-width":s}})]})}function g({className:e,...t}){return(0,a.jsx)(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:(0,i.cn)(`mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5`,`group-data-[collapsible=icon]:hidden`,e),...t})}function _({className:e,...t}){return(0,a.jsx)(`li`,{"data-slot":`sidebar-menu-sub-item`,"data-sidebar":`menu-sub-item`,className:(0,i.cn)(`group/menu-sub-item relative`,e),...t})}function v({asChild:e=!1,size:t=`md`,isActive:n=!1,className:r,...s}){return(0,a.jsx)(e?o.Slot.Slot:`a`,{"data-slot":`sidebar-menu-sub-button`,"data-sidebar":`menu-sub-button`,"data-size":t,"data-active":n,className:(0,i.cn)(`text-sidebar-foreground ring-sidebar-ring`,`flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden`,`transition-[background-color,color]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`active:bg-sidebar-accent active:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`disabled:pointer-events-none disabled:opacity-50`,`aria-disabled:pointer-events-none aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:hidden`,`[&>span:last-child]:truncate`,`[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground`,t===`sm`&&`text-xs`,t===`md`&&`text-sm`,r),...s})}function y({className:e,...t}){return(0,a.jsx)(n.Separator,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:(0,i.cn)(`mx-2 w-auto bg-sidebar-border`,e),...t})}exports.DetailDialogSidebarContent=t.t,exports.DetailDialogSidebarFooter=t.n,exports.DetailDialogSidebarGroup=l,exports.DetailDialogSidebarGroupAction=d,exports.DetailDialogSidebarGroupContent=f,exports.DetailDialogSidebarGroupLabel=u,exports.DetailDialogSidebarHeader=t.r,exports.DetailDialogSidebarMenu=t.i,exports.DetailDialogSidebarMenuAction=p,exports.DetailDialogSidebarMenuBadge=m,exports.DetailDialogSidebarMenuButton=t.a,exports.DetailDialogSidebarMenuItem=t.o,exports.DetailDialogSidebarMenuSkeleton=h,exports.DetailDialogSidebarMenuSub=g,exports.DetailDialogSidebarMenuSubButton=v,exports.DetailDialogSidebarMenuSubItem=_,exports.DetailDialogSidebarRail=s,exports.DetailDialogSidebarSeparator=y,exports.DetailDialogSidebarTrigger=t.s,exports.Sidebar=t.c,exports.SidebarInset=c,exports.SidebarProvider=t.l,exports.useSidebar=t.u;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../ui/skeleton.cjs"),t=require("../../../sidebar-core-DUdB9WCv.cjs"),n=require("../../../ui/separator.cjs");let r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime"),o=require("radix-ui");function s({className:e,...n}){let{toggleSidebar:r}=t.g();return(0,a.jsx)(`button`,{"data-sidebar":`rail`,"data-slot":`sidebar-rail`,"aria-label":`Toggle Sidebar`,tabIndex:-1,onClick:r,title:`Toggle Sidebar`,className:(0,i.cn)(`absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex`,`after:absolute after:inset-y-0 after:left-1/2 after:w-0.5`,`hover:after:bg-sidebar-border`,`group-data-[side=left]:-right-4 group-data-[side=right]:left-0`,`in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize`,`[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize`,e),...n})}function c({className:e,...t}){return(0,a.jsx)(`main`,{"data-slot":`sidebar-inset`,className:(0,i.cn)(`relative flex w-full flex-1 flex-col bg-background`,e),...t})}function l({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:(0,i.cn)(`relative flex w-full min-w-0 flex-col p-2`,e),...t})}function u({className:e,asChild:t=!1,...n}){return(0,a.jsx)(t?o.Slot.Slot:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:(0,i.cn)(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2`,`[&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,e),...n})}function d({className:e,asChild:t=!1,...n}){return(0,a.jsx)(t?o.Slot.Slot:`button`,{"data-slot":`sidebar-group-action`,"data-sidebar":`group-action`,className:(0,i.cn)(`absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`[&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`group-data-[collapsible=icon]:hidden`,e),...n})}function f({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:(0,i.cn)(`w-full text-sm`,e),...t})}function p({className:e,asChild:t=!1,showOnHover:n=!1,...r}){return(0,a.jsx)(t?o.Slot.Slot:`button`,{"data-slot":`sidebar-menu-action`,"data-sidebar":`menu-action`,className:(0,i.cn)(`absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden`,`text-sidebar-foreground ring-sidebar-ring`,`transition-[background-color,color,opacity]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`peer-hover/menu-button:text-sidebar-accent-foreground`,`[&>svg]:size-4 [&>svg]:shrink-0`,`after:absolute after:-inset-2 md:after:hidden`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,n&&`peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,n&&`group-focus-within/menu-item:opacity-100`,n&&`group-hover/menu-item:opacity-100`,n&&`data-[state=open]:opacity-100 md:opacity-0`,e),...r})}function m({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`sidebar-menu-badge`,"data-sidebar":`menu-badge`,className:(0,i.cn)(`pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors`,`peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground`,`peer-data-[size=sm]/menu-button:top-1`,`peer-data-[size=default]/menu-button:top-1.5`,`peer-data-[size=lg]/menu-button:top-2.5`,`group-data-[collapsible=icon]:hidden`,e),...t})}function h({className:t,showIcon:n=!1,...o}){let s=(0,r.useMemo)(()=>`${Math.floor(Math.random()*40)+50}%`,[]);return(0,a.jsxs)(`div`,{"data-slot":`sidebar-menu-skeleton`,"data-sidebar":`menu-skeleton`,className:(0,i.cn)(`flex h-8 items-center gap-2 rounded-md px-2`,t),...o,children:[n&&(0,a.jsx)(e.Skeleton,{className:`size-4 rounded-md`,"data-sidebar":`menu-skeleton-icon`}),(0,a.jsx)(e.Skeleton,{className:`h-4 max-w-(--skeleton-width) flex-1`,"data-sidebar":`menu-skeleton-text`,style:{"--skeleton-width":s}})]})}function g({className:e,...t}){return(0,a.jsx)(`ul`,{"data-slot":`sidebar-menu-sub`,"data-sidebar":`menu-sub`,className:(0,i.cn)(`mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5`,`group-data-[collapsible=icon]:hidden`,e),...t})}function _({className:e,...t}){return(0,a.jsx)(`li`,{"data-slot":`sidebar-menu-sub-item`,"data-sidebar":`menu-sub-item`,className:(0,i.cn)(`group/menu-sub-item relative`,e),...t})}function v({asChild:e=!1,size:t=`md`,isActive:n=!1,className:r,...s}){return(0,a.jsx)(e?o.Slot.Slot:`a`,{"data-slot":`sidebar-menu-sub-button`,"data-sidebar":`menu-sub-button`,"data-size":t,"data-active":n,className:(0,i.cn)(`text-sidebar-foreground ring-sidebar-ring`,`flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden`,`transition-[background-color,color]`,`hover:bg-sidebar-accent hover:text-sidebar-accent-foreground`,`active:bg-sidebar-accent active:text-sidebar-accent-foreground`,`focus-visible:ring-2`,`disabled:pointer-events-none disabled:opacity-50`,`aria-disabled:pointer-events-none aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:hidden`,`[&>span:last-child]:truncate`,`[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground`,t===`sm`&&`text-xs`,t===`md`&&`text-sm`,r),...s})}function y({className:e,...t}){return(0,a.jsx)(n.Separator,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:(0,i.cn)(`mx-2 w-auto bg-sidebar-border`,e),...t})}exports.DetailDialogSidebarContent=t.t,exports.DetailDialogSidebarFooter=t.n,exports.DetailDialogSidebarGroup=l,exports.DetailDialogSidebarGroupAction=d,exports.DetailDialogSidebarGroupContent=f,exports.DetailDialogSidebarGroupLabel=u,exports.DetailDialogSidebarHeader=t.r,exports.DetailDialogSidebarMenu=t.i,exports.DetailDialogSidebarMenuAction=p,exports.DetailDialogSidebarMenuBadge=m,exports.DetailDialogSidebarMenuButton=t.a,exports.DetailDialogSidebarMenuItem=t.o,exports.DetailDialogSidebarMenuSkeleton=h,exports.DetailDialogSidebarMenuSub=g,exports.DetailDialogSidebarMenuSubButton=v,exports.DetailDialogSidebarMenuSubItem=_,exports.DetailDialogSidebarRail=s,exports.DetailDialogSidebarSeparator=y,exports.DetailDialogSidebarTrigger=t.s,exports.SIDEBAR_COOKIE_MAX_AGE=t.c,exports.SIDEBAR_COOKIE_NAME=t.l,exports.SIDEBAR_KEYBOARD_SHORTCUT=t.u,exports.SIDEBAR_WIDTH=t.d,exports.SIDEBAR_WIDTH_ICON=t.f,exports.Sidebar=t.p,exports.SidebarContext=t.m,exports.SidebarInset=c,exports.SidebarProvider=t.h,exports.useSidebar=t.g,exports.useSidebarState=t._;
 //# sourceMappingURL=sidebar.cjs.map

package/dist/dialogs/detail-dialog/components/sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.cjs","names":["useSidebar","SlotPrimitive","Skeleton","Separator"],"sources":["../../../../packages/components/dialogs/detail-dialog/components/sidebar-extras.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Separator } from '@/components/ui/separator';\nimport { Skeleton } from '@/components/ui/skeleton';\n\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { useSidebar } from './sidebar-core';\n\n/**\n * Extended sidebar sub-components not used by `DetailDialog` itself — column-group layout,\n * submenus, a standalone skeleton, and the desktop drag rail. Split out of `./sidebar-core` so\n * `DetailDialog`'s own bundle doesn't pay for these; still re-exported in full from `./sidebar.tsx`\n * for direct standalone use.\n */\nfunction DetailDialogSidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex',\n        'after:absolute after:inset-y-0 after:left-1/2 after:w-0.5',\n        'hover:after:bg-sidebar-border',\n        'group-data-[side=left]:-right-4 group-data-[side=right]:left-0',\n        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        'hover:group-data-[collapsible=offcanvas]:bg-sidebar',\n        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        'relative flex w-full flex-1 flex-col bg-background',\n        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0',\n        'md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',\n        'md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full min-w-0 flex-col p-2', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2',\n        '[&>svg]:size-4 [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform]',\n        'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        'focus-visible:ring-2',\n        '[&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden',\n        'text-sidebar-foreground ring-sidebar-ring',\n        'transition-[background-color,color,opacity]',\n        'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        'focus-visible:ring-2',\n        'peer-hover/menu-button:text-sidebar-accent-foreground',\n        '[&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        showOnHover && 'group-focus-within/menu-item:opacity-100',\n        showOnHover && 'group-hover/menu-item:opacity-100',\n        showOnHover && 'data-[state=open]:opacity-100 md:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarMenuSkeleton({ className, showIcon = false, ...props }: React.ComponentProps<'div'> & { showIcon?: boolean }) {\n  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n  return (\n    <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={{ '--skeleton-width': width } as React.CSSProperties}\n      />\n    </div>\n  );\n}\n\nfunction DetailDialogSidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarMenuSubButton({\n  asChild = false,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n  size?: 'sm' | 'md';\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'a';\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring',\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden',\n        'transition-[background-color,color]',\n        'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n        'focus-visible:ring-2',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        'group-data-[collapsible=icon]:hidden',\n        '[&>span:last-child]:truncate',\n        '[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n}\n\nexport {\n  DetailDialogSidebarGroup,\n  DetailDialogSidebarGroupAction,\n  DetailDialogSidebarGroupContent,\n  DetailDialogSidebarGroupLabel,\n  DetailDialogSidebarMenuAction,\n  DetailDialogSidebarMenuBadge,\n  DetailDialogSidebarMenuSkeleton,\n  DetailDialogSidebarMenuSub,\n  DetailDialogSidebarMenuSubButton,\n  DetailDialogSidebarMenuSubItem,\n  DetailDialogSidebarRail,\n  DetailDialogSidebarSeparator,\n  SidebarInset,\n};\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.cjs","names":["useSidebar","SlotPrimitive","Skeleton","Separator"],"sources":["../../../../packages/components/dialogs/detail-dialog/components/sidebar-extras.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Separator } from '@/components/ui/separator';\nimport { Skeleton } from '@/components/ui/skeleton';\n\nimport { Slot as SlotPrimitive } from 'radix-ui';\nimport { useSidebar } from './sidebar-core';\n\n/**\n * Extended sidebar sub-components not used by `DetailDialog` itself — column-group layout,\n * submenus, a standalone skeleton, and the desktop drag rail. Split out of `./sidebar-core` so\n * `DetailDialog`'s own bundle doesn't pay for these; still re-exported in full from `./sidebar.tsx`\n * for direct standalone use.\n */\nfunction DetailDialogSidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n  const { toggleSidebar } = useSidebar();\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex',\n        'after:absolute after:inset-y-0 after:left-1/2 after:w-0.5',\n        'hover:after:bg-sidebar-border',\n        'group-data-[side=left]:-right-4 group-data-[side=right]:left-0',\n        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {\n  return <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col bg-background', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full min-w-0 flex-col p-2', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'div';\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2',\n        '[&>svg]:size-4 [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform]',\n        'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        'focus-visible:ring-2',\n        '[&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  showOnHover?: boolean;\n}) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'button';\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden',\n        'text-sidebar-foreground ring-sidebar-ring',\n        'transition-[background-color,color,opacity]',\n        'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        'focus-visible:ring-2',\n        'peer-hover/menu-button:text-sidebar-accent-foreground',\n        '[&>svg]:size-4 [&>svg]:shrink-0',\n        // Increases the hit area of the button on mobile.\n        'after:absolute after:-inset-2 md:after:hidden',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        showOnHover && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        showOnHover && 'group-focus-within/menu-item:opacity-100',\n        showOnHover && 'group-hover/menu-item:opacity-100',\n        showOnHover && 'data-[state=open]:opacity-100 md:opacity-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n        'peer-data-[size=sm]/menu-button:top-1',\n        'peer-data-[size=default]/menu-button:top-1.5',\n        'peer-data-[size=lg]/menu-button:top-2.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarMenuSkeleton({ className, showIcon = false, ...props }: React.ComponentProps<'div'> & { showIcon?: boolean }) {\n  const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n  return (\n    <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n      {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={{ '--skeleton-width': width } as React.CSSProperties}\n      />\n    </div>\n  );\n}\n\nfunction DetailDialogSidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5',\n        'group-data-[collapsible=icon]:hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n  return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction DetailDialogSidebarMenuSubButton({\n  asChild = false,\n  size = 'md',\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<'a'> & {\n  asChild?: boolean;\n  size?: 'sm' | 'md';\n  isActive?: boolean;\n}) {\n  const Comp = asChild ? SlotPrimitive.Slot : 'a';\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        'text-sidebar-foreground ring-sidebar-ring',\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden',\n        'transition-[background-color,color]',\n        'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n        'focus-visible:ring-2',\n        'disabled:pointer-events-none disabled:opacity-50',\n        'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n        'group-data-[collapsible=icon]:hidden',\n        '[&>span:last-child]:truncate',\n        '[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n        size === 'sm' && 'text-xs',\n        size === 'md' && 'text-sm',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DetailDialogSidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n}\n\nexport {\n  DetailDialogSidebarGroup,\n  DetailDialogSidebarGroupAction,\n  DetailDialogSidebarGroupContent,\n  DetailDialogSidebarGroupLabel,\n  DetailDialogSidebarMenuAction,\n  DetailDialogSidebarMenuBadge,\n  DetailDialogSidebarMenuSkeleton,\n  DetailDialogSidebarMenuSub,\n  DetailDialogSidebarMenuSubButton,\n  DetailDialogSidebarMenuSubItem,\n  DetailDialogSidebarRail,\n  DetailDialogSidebarSeparator,\n  SidebarInset,\n};\n"],"mappings":"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"}

package/dist/dialogs/detail-dialog/components/sidebar.d.cts

@@ -1,71 +1,77 @@
-import { t as Button } from "../../../button-Bk4Y6_9I.cjs";
-import { n as TooltipContent } from "../../../tooltip-D4U-RhIu.cjs";
-import { t as Separator } from "../../../separator-D6_fMJtM.cjs";
+import { t as Button } from "../../../button-BnoPktln.cjs";
+import { n as TooltipContent } from "../../../tooltip-BVYKhsC2.cjs";
+import { t as Separator } from "../../../separator-Cvxkpzrj.cjs";
 import { VariantProps } from "class-variance-authority";
-
 //#region packages/components/dialogs/detail-dialog/components/sidebar-core.d.ts
+declare const SIDEBAR_COOKIE_NAME = "detail_dialog_sidebar_state";
+declare const SIDEBAR_COOKIE_MAX_AGE: number;
+declare const SIDEBAR_WIDTH = "18rem";
+declare const SIDEBAR_WIDTH_ICON = "3rem";
+declare const SIDEBAR_KEYBOARD_SHORTCUT = "p";
 type SidebarContextProps = {
-  /** Current visual state of the sidebar. */state: 'expanded' | 'collapsed'; /** Whether the sidebar is open on desktop. */
-  open: boolean; /** Setter for the desktop open state. */
-  setOpen: (open: boolean) => void; /** Whether the sidebar sheet is open on mobile. */
-  openMobile: boolean; /** Setter for the mobile open state. */
-  setOpenMobile: (open: boolean) => void; /** `true` when the viewport is considered mobile-sized. */
-  isMobile: boolean; /** Toggles the sidebar between expanded and collapsed. */
+  /** Current visual state of the sidebar. */
+  state: 'expanded' | 'collapsed';
+  /** Whether the sidebar is open. */
+  open: boolean;
+  /** Setter for the open state. */
+  setOpen: (open: boolean) => void;
+  /** Toggles the sidebar between expanded and collapsed. */
   toggleSidebar: () => void;
 };
+declare const SidebarContext: import("react").Context<SidebarContextProps | null>;
 /**
  * Reads the current sidebar open/collapsed state and toggle handler from context.
  * Also used internally by `DetailDialogSidebarRail` in `./sidebar-extras`.
  */
 declare function useSidebar(): SidebarContextProps;
 /**
- * Context provider that manages sidebar open/collapsed state and persists it via a cookie.
+ * Sidebar open/collapsed state, cookie-persisted, with a keyboard shortcut to toggle. Shared by
+ * `SidebarProvider` (below, generic/standalone) and `DetailDialogProvider` (`../components/provider`,
+ * DetailDialog's own layout shell) so the state logic lives in exactly one place.
+ */
+declare function useSidebarState({ defaultOpen, open: openProp, onOpenChange: setOpenProp }: {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}): SidebarContextProps;
+/**
+ * Generic, standalone-reusable context provider for `Sidebar` — a plain 2-column grid (sidebar |
+ * content). For `DetailDialog`'s own header/content grid shell, use `DetailDialogProvider`
+ * (`../components/provider`) instead.
  *
  * @example
  * ```tsx
- * import { SidebarProvider } from '@customafk/lunas-ui/dialogs/detail-dialog/components/sidebar';
+ * import { SidebarProvider, Sidebar } from '@customafk/lunas-ui/dialogs/detail-dialog/components/sidebar';
  *
  * <SidebarProvider defaultOpen={true}>
- *   <Sidebar collapsible="icon">{...}</Sidebar>
+ *   <Sidebar>{...}</Sidebar>
+ *   <main>{...}</main>
  * </SidebarProvider>
  * ```
  */
-declare function SidebarProvider({
-  defaultOpen,
-  open: openProp,
-  onOpenChange: setOpenProp,
-  className,
-  style,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  /** Whether the sidebar is open by default (uncontrolled). Defaults to `true`. */defaultOpen?: boolean; /** Controlled open state. When provided the component becomes controlled. */
-  open?: boolean; /** Callback fired when the open state changes in controlled mode. */
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & {
+  /** Whether the sidebar is open by default (uncontrolled). Defaults to `true`. */
+  defaultOpen?: boolean;
+  /** Controlled open state. When provided the component becomes controlled. */
+  open?: boolean;
+  /** Callback fired when the open state changes in controlled mode. */
   onOpenChange?: (open: boolean) => void;
 }): import("react").JSX.Element;
 /**
- * Responsive sidebar container that supports desktop icon-collapse and a mobile Sheet overlay.
+ * Sidebar container that collapses to an icon strip. Always rendered inline, regardless of viewport size.
  *
  * @example
  * ```tsx
  * import { Sidebar } from '@customafk/lunas-ui/dialogs/detail-dialog/components/sidebar';
  *
- * <Sidebar collapsible="icon" side="left">
+ * <Sidebar side="left">
  *   {children}
  * </Sidebar>
  * ```
  */
-declare function Sidebar({
-  side,
-  variant,
-  collapsible,
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'div'> & {
-  /** Which edge the sidebar is anchored to. Defaults to `'left'`. */side?: 'left' | 'right'; /** Visual style variant of the sidebar. Defaults to `'sidebar'`. */
-  variant?: 'sidebar' | 'floating' | 'inset'; /** Collapse behaviour — slides off-canvas, shrinks to icon strip, or stays fixed. Defaults to `'offcanvas'`. */
-  collapsible?: 'offcanvas' | 'icon' | 'none';
+declare function Sidebar({ side, className, children, ...props }: React.ComponentProps<'div'> & {
+  /** Which edge the sidebar is anchored to. Defaults to `'left'`. */
+  side?: 'left' | 'right';
 }): import("react").JSX.Element;
 /**
  * Icon button that toggles the detail-dialog sidebar open or collapsed.
@@ -77,45 +83,17 @@ declare function Sidebar({
  * <DetailDialogSidebarTrigger />
  * ```
  */
-declare function DetailDialogSidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>): import("react").JSX.Element;
-declare function DetailDialogSidebarHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarFooter({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenu({
-  className,
-  ...props
-}: React.ComponentProps<'ul'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<'li'>): import("react").JSX.Element;
+declare function DetailDialogSidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function DetailDialogSidebarHeader({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarFooter({ className, children, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
   size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function DetailDialogSidebarMenuButton({
-  asChild,
-  isActive,
-  variant,
-  size,
-  tooltip,
-  className,
-  ...props
-}: React.ComponentProps<'button'> & {
+declare function DetailDialogSidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<'button'> & {
   asChild?: boolean;
   isActive?: boolean;
   tooltip?: string | React.ComponentProps<typeof TooltipContent>;
@@ -128,79 +106,32 @@ declare function DetailDialogSidebarMenuButton({
  * `DetailDialog`'s own bundle doesn't pay for these; still re-exported in full from `./sidebar.tsx`
  * for direct standalone use.
  */
-declare function DetailDialogSidebarRail({
-  className,
-  ...props
-}: React.ComponentProps<'button'>): import("react").JSX.Element;
-declare function SidebarInset({
-  className,
-  ...props
-}: React.ComponentProps<'main'>): import("react").JSX.Element;
-declare function DetailDialogSidebarGroup({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarGroupLabel({
-  className,
-  asChild,
-  ...props
-}: React.ComponentProps<'div'> & {
+declare function DetailDialogSidebarRail({ className, ...props }: React.ComponentProps<'button'>): import("react").JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): import("react").JSX.Element;
+declare function DetailDialogSidebarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<'div'> & {
   asChild?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarGroupAction({
-  className,
-  asChild,
-  ...props
-}: React.ComponentProps<'button'> & {
+declare function DetailDialogSidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<'button'> & {
   asChild?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuAction({
-  className,
-  asChild,
-  showOnHover,
-  ...props
-}: React.ComponentProps<'button'> & {
+declare function DetailDialogSidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<'button'> & {
   asChild?: boolean;
   showOnHover?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuSkeleton({
-  className,
-  showIcon,
-  ...props
-}: React.ComponentProps<'div'> & {
+declare function DetailDialogSidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
   showIcon?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuSub({
-  className,
-  ...props
-}: React.ComponentProps<'ul'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<'li'>): import("react").JSX.Element;
-declare function DetailDialogSidebarMenuSubButton({
-  asChild,
-  size,
-  isActive,
-  className,
-  ...props
-}: React.ComponentProps<'a'> & {
+declare function DetailDialogSidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): import("react").JSX.Element;
+declare function DetailDialogSidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<'a'> & {
   asChild?: boolean;
   size?: 'sm' | 'md';
   isActive?: boolean;
 }): import("react").JSX.Element;
-declare function DetailDialogSidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
+declare function DetailDialogSidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
 //#endregion
-export { DetailDialogSidebarContent, DetailDialogSidebarFooter, DetailDialogSidebarGroup, DetailDialogSidebarGroupAction, DetailDialogSidebarGroupContent, DetailDialogSidebarGroupLabel, DetailDialogSidebarHeader, DetailDialogSidebarMenu, DetailDialogSidebarMenuAction, DetailDialogSidebarMenuBadge, DetailDialogSidebarMenuButton, DetailDialogSidebarMenuItem, DetailDialogSidebarMenuSkeleton, DetailDialogSidebarMenuSub, DetailDialogSidebarMenuSubButton, DetailDialogSidebarMenuSubItem, DetailDialogSidebarRail, DetailDialogSidebarSeparator, DetailDialogSidebarTrigger, Sidebar, SidebarInset, SidebarProvider, useSidebar };
+export { DetailDialogSidebarContent, DetailDialogSidebarFooter, DetailDialogSidebarGroup, DetailDialogSidebarGroupAction, DetailDialogSidebarGroupContent, DetailDialogSidebarGroupLabel, DetailDialogSidebarHeader, DetailDialogSidebarMenu, DetailDialogSidebarMenuAction, DetailDialogSidebarMenuBadge, DetailDialogSidebarMenuButton, DetailDialogSidebarMenuItem, DetailDialogSidebarMenuSkeleton, DetailDialogSidebarMenuSub, DetailDialogSidebarMenuSubButton, DetailDialogSidebarMenuSubItem, DetailDialogSidebarRail, DetailDialogSidebarSeparator, DetailDialogSidebarTrigger, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, Sidebar, SidebarContext, SidebarContextProps, SidebarInset, SidebarProvider, useSidebar, useSidebarState };
 //# sourceMappingURL=sidebar.d.cts.map