@customafk/lunas-ui 0.2.4 → 0.2.6

package/dist/typography/paragraph.d.mts

@@ -1,28 +1,48 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
+import { ComponentPropsWithoutRef } from "react";
+import * as react_jsx_runtime69 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types4 from "class-variance-authority/types";
 
 //#region packages/components/typography/paragraph.d.ts
-type Props = {
-  /**
-   * The variant of the paragraph. It can be one of the following:
-   * - `p`: The default paragraph style. It has a normal font weight and is used for regular text content.
-   * - `muted`: The muted paragraph style. It has a lighter color to indicate less emphasis and is often used for secondary information.
-   * - `lead`: The lead paragraph style. It is typically used to introduce the content of a section and has a larger font size and stronger text color.
-   * - `sm`: The small paragraph style. It is used for less important text and has a smaller font size.
-   * - `lg`: The large paragraph style. It is used for more emphasis and visibility, with a larger font size.
-   */
-  variant?: 'p' | 'muted' | 'lead' | 'sm' | 'lg' | 'xs';
-  className?: string;
-  children?: React.ReactNode;
-};
 declare const paragraphVariants: (props?: ({
-  variant?: "xs" | "sm" | "lg" | "lead" | "p" | "muted" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
+  variant?: "xs" | "sm" | "lg" | "muted" | "lead" | "p" | null | undefined;
+} & class_variance_authority_types4.ClassProp) | undefined) => string;
+/**
+ * Props for the {@link Paragraph} component.
+ *
+ * Extends all native `<p>` HTML attributes plus the CVA variant.
+ *
+ * @property variant - Visual style variant.
+ *   - `'lead'` — large, medium-weight introductory text (default size `text-base` / `md:text-lg`)
+ *   - `'lg'`  — large normal-weight text
+ *   - `'p'`   — standard body text (default)
+ *   - `'sm'`  — small normal-weight text with tighter leading
+ *   - `'muted'` — subdued colour, standard body size
+ *   - `'xs'`  — extra-small text in a muted colour
+ */
+type ParagraphProps = ComponentPropsWithoutRef<'p'> & VariantProps<typeof paragraphVariants>;
+/**
+ * A styled `<p>` element with semantic size and weight variants for body text.
+ *
+ * @example
+ * ```tsx
+ * import { Paragraph } from '@customafk/lunas-ui/typography/paragraph';
+ *
+ * // Default body paragraph
+ * <Paragraph>This is body text.</Paragraph>
+ *
+ * // Lead paragraph with larger, medium-weight text
+ * <Paragraph variant="lead">Introducing our new feature.</Paragraph>
+ *
+ * // Muted helper text
+ * <Paragraph variant="muted">Last updated 3 days ago.</Paragraph>
+ * ```
+ */
 declare const Paragraph: ({
   variant,
   className,
-  children
-}: Props) => react_jsx_runtime2.JSX.Element;
+  ...props
+}: ParagraphProps) => react_jsx_runtime69.JSX.Element;
 //#endregion
-export { Paragraph, paragraphVariants };
+export { Paragraph, ParagraphProps, paragraphVariants };
 //# sourceMappingURL=paragraph.d.mts.map

package/dist/typography/paragraph.mjs

@@ -1 +1 @@
-"use client";import{n as e,t}from"../paragraph-moBSTPmT.mjs";export{t as Paragraph,e as paragraphVariants};
+"use client";import{n as e,t}from"../paragraph-Ch5TvEqL.mjs";export{t as Paragraph,e as paragraphVariants};

package/dist/typography/title.cjs

@@ -1,2 +1,2 @@
-const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`class-variance-authority`),r=require(`react/jsx-runtime`);const i=(0,n.cva)(`scroll-m-20 text-text-positive-strong tracking-tight`,{variants:{level:{1:`text-center text-4xl font-extrabold text-balance`,2:`border-b pb-2 text-3xl font-semibold first:mt-0`,3:`text-2xl font-semibold`,4:`text-xl font-semibold`,5:`text-lg font-semibold`,6:`text-base font-semibold`},default:{level:1}}}),a=({level:e=1,className:n,children:a})=>(0,r.jsx)(`h${e}`,{className:(0,t.cn)(i({level:e}),n),children:a});exports.Title=a;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`react/jsx-runtime`),n=require(`@customafk/react-toolkit/utils`),r=require(`class-variance-authority`);const i=(0,r.cva)(`scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors`,{variants:{level:{1:`text-3xl leading-tight font-bold md:text-4xl`,2:`text-2xl leading-tight font-semibold md:text-3xl`,3:`text-xl leading-snug font-semibold md:text-2xl`,4:`text-lg leading-snug font-semibold md:text-xl`,5:`text-base leading-normal font-semibold md:text-lg`,6:`text-sm leading-normal font-semibold md:text-base`}},defaultVariants:{level:1}}),a=({level:e=1,className:r,children:a})=>(0,t.jsx)(`h`+e,{"data-slot":`title`,className:(0,n.cn)(i({level:e}),r),children:a});exports.Title=a;
 //# sourceMappingURL=title.cjs.map

package/dist/typography/title.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"title.cjs","names":[],"sources":["../../packages/components/typography/title.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva } from 'class-variance-authority';\n\nconst titleVariants = cva('scroll-m-20 text-text-positive-strong tracking-tight', {\n  variants: {\n    level: {\n      1: 'text-center text-4xl font-extrabold text-balance',\n      2: 'border-b pb-2 text-3xl font-semibold first:mt-0',\n      3: 'text-2xl font-semibold',\n      4: 'text-xl font-semibold',\n      5: 'text-lg font-semibold',\n      6: 'text-base font-semibold',\n    },\n    default: {\n      level: 1,\n    },\n  },\n});\n\ntype Props = {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Title = ({ level = 1, className, children }: Props) => {\n  const Comp = `h${level}` as keyof JSX.IntrinsicElements;\n  return <Comp className={cn(titleVariants({ level }), className)}>{children}</Comp>;\n};\n"],"mappings":"8JAKA,MAAM,GAAA,EAAA,EAAA,KAAoB,uDAAwD,CAChF,SAAU,CACR,MAAO,CACL,EAAG,mDACH,EAAG,kDACH,EAAG,yBACH,EAAG,wBACH,EAAG,wBACH,EAAG,0BACJ,CACD,QAAS,CACP,MAAO,EACR,CACF,CACF,CAAC,CAQW,GAAS,CAAE,QAAQ,EAAG,YAAW,eAErC,EAAA,EAAA,KADM,IAAI,IAAA,CACJ,WAAA,EAAA,EAAA,IAAc,EAAc,CAAE,QAAO,CAAC,CAAE,EAAU,CAAG,YAAgB"}
+{"version":3,"file":"title.cjs","names":[],"sources":["../../packages/components/typography/title.tsx"],"sourcesContent":["'use client';\n\nimport type { JSX, ReactNode } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { cva } from 'class-variance-authority';\n\nconst titleVariants = cva('scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors', {\n  variants: {\n    level: {\n      1: 'text-3xl leading-tight font-bold md:text-4xl',\n      2: 'text-2xl leading-tight font-semibold md:text-3xl',\n      3: 'text-xl leading-snug font-semibold md:text-2xl',\n      4: 'text-lg leading-snug font-semibold md:text-xl',\n      5: 'text-base leading-normal font-semibold md:text-lg',\n      6: 'text-sm leading-normal font-semibold md:text-base',\n    },\n  },\n  defaultVariants: {\n    level: 1,\n  },\n});\n\nexport type TitleProps = {\n  /**\n   * Heading level that maps to the rendered HTML tag (`h1`–`h6`) and the corresponding\n   * typographic scale variant.\n   * - `1` — `text-3xl / md:text-4xl`, bold (default)\n   * - `2` — `text-2xl / md:text-3xl`, semibold\n   * - `3` — `text-xl / md:text-2xl`, semibold\n   * - `4` — `text-lg / md:text-xl`, semibold\n   * - `5` — `text-base / md:text-lg`, semibold\n   * - `6` — `text-sm / md:text-base`, semibold\n   * @default 1\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Additional Tailwind classes merged with the variant classes. */\n  className?: string;\n  /** Content rendered inside the heading element. */\n  children?: ReactNode;\n};\n\n/**\n * A semantic heading component that renders the correct `h1`–`h6` element and applies a matched typographic scale.\n *\n * @example\n * ```tsx\n * import { Title } from '@customafk/lunas-ui/typography/title';\n *\n * // Page-level heading (renders <h1>)\n * <Title level={1}>Welcome to Lunas</Title>\n *\n * // Section sub-heading (renders <h3>)\n * <Title level={3}>Account Settings</Title>\n * ```\n */\nexport const Title = ({ level = 1, className, children }: TitleProps) => {\n  const Comp = ('h' + level) as keyof JSX.IntrinsicElements;\n  return (\n    <Comp data-slot=\"title\" className={cn(titleVariants({ level }), className)}>\n      {children}\n    </Comp>\n  );\n};\n"],"mappings":"2KAMA,MAAM,GAAA,EAAA,EAAA,KAAoB,iGAAkG,CAC1H,SAAU,CACR,MAAO,CACL,EAAG,+CACH,EAAG,mDACH,EAAG,iDACH,EAAG,gDACH,EAAG,oDACH,EAAG,oDACJ,CACF,CACD,gBAAiB,CACf,MAAO,EACR,CACF,CAAC,CAmCW,GAAS,CAAE,QAAQ,EAAG,YAAW,eAG1C,EAAA,EAAA,KAFY,IAAM,EAAA,CAEZ,YAAU,QAAQ,WAAA,EAAA,EAAA,IAAc,EAAc,CAAE,QAAO,CAAC,CAAE,EAAU,CACvE,YACI"}

package/dist/typography/title.d.cts

@@ -1,16 +1,44 @@
-import * as react_jsx_runtime33 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
+import { ReactNode } from "react";
 
 //#region packages/components/typography/title.d.ts
-type Props = {
+type TitleProps = {
+  /**
+   * Heading level that maps to the rendered HTML tag (`h1`–`h6`) and the corresponding
+   * typographic scale variant.
+   * - `1` — `text-3xl / md:text-4xl`, bold (default)
+   * - `2` — `text-2xl / md:text-3xl`, semibold
+   * - `3` — `text-xl / md:text-2xl`, semibold
+   * - `4` — `text-lg / md:text-xl`, semibold
+   * - `5` — `text-base / md:text-lg`, semibold
+   * - `6` — `text-sm / md:text-base`, semibold
+   * @default 1
+   */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Additional Tailwind classes merged with the variant classes. */
   className?: string;
-  children?: React.ReactNode;
+  /** Content rendered inside the heading element. */
+  children?: ReactNode;
 };
+/**
+ * A semantic heading component that renders the correct `h1`–`h6` element and applies a matched typographic scale.
+ *
+ * @example
+ * ```tsx
+ * import { Title } from '@customafk/lunas-ui/typography/title';
+ *
+ * // Page-level heading (renders <h1>)
+ * <Title level={1}>Welcome to Lunas</Title>
+ *
+ * // Section sub-heading (renders <h3>)
+ * <Title level={3}>Account Settings</Title>
+ * ```
+ */
 declare const Title: ({
   level,
   className,
   children
-}: Props) => react_jsx_runtime33.JSX.Element;
+}: TitleProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
-export { Title };
+export { Title, TitleProps };
 //# sourceMappingURL=title.d.cts.map

package/dist/typography/title.d.mts

@@ -1,16 +1,44 @@
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import { ReactNode } from "react";
+import * as react_jsx_runtime164 from "react/jsx-runtime";
 
 //#region packages/components/typography/title.d.ts
-type Props = {
+type TitleProps = {
+  /**
+   * Heading level that maps to the rendered HTML tag (`h1`–`h6`) and the corresponding
+   * typographic scale variant.
+   * - `1` — `text-3xl / md:text-4xl`, bold (default)
+   * - `2` — `text-2xl / md:text-3xl`, semibold
+   * - `3` — `text-xl / md:text-2xl`, semibold
+   * - `4` — `text-lg / md:text-xl`, semibold
+   * - `5` — `text-base / md:text-lg`, semibold
+   * - `6` — `text-sm / md:text-base`, semibold
+   * @default 1
+   */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Additional Tailwind classes merged with the variant classes. */
   className?: string;
-  children?: React.ReactNode;
+  /** Content rendered inside the heading element. */
+  children?: ReactNode;
 };
+/**
+ * A semantic heading component that renders the correct `h1`–`h6` element and applies a matched typographic scale.
+ *
+ * @example
+ * ```tsx
+ * import { Title } from '@customafk/lunas-ui/typography/title';
+ *
+ * // Page-level heading (renders <h1>)
+ * <Title level={1}>Welcome to Lunas</Title>
+ *
+ * // Section sub-heading (renders <h3>)
+ * <Title level={3}>Account Settings</Title>
+ * ```
+ */
 declare const Title: ({
   level,
   className,
   children
-}: Props) => react_jsx_runtime26.JSX.Element;
+}: TitleProps) => react_jsx_runtime164.JSX.Element;
 //#endregion
-export { Title };
+export { Title, TitleProps };
 //# sourceMappingURL=title.d.mts.map

package/dist/typography/title.mjs

@@ -1,2 +1,2 @@
-import{cn as e}from"@customafk/react-toolkit/utils";import{cva as t}from"class-variance-authority";import{jsx as n}from"react/jsx-runtime";const r=t(`scroll-m-20 text-text-positive-strong tracking-tight`,{variants:{level:{1:`text-center text-4xl font-extrabold text-balance`,2:`border-b pb-2 text-3xl font-semibold first:mt-0`,3:`text-2xl font-semibold`,4:`text-xl font-semibold`,5:`text-lg font-semibold`,6:`text-base font-semibold`},default:{level:1}}}),i=({level:t=1,className:i,children:a})=>n(`h${t}`,{className:e(r({level:t}),i),children:a});export{i as Title};
+"use client";import{jsx as e}from"react/jsx-runtime";import{cn as t}from"@customafk/react-toolkit/utils";import{cva as n}from"class-variance-authority";const r=n(`scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors`,{variants:{level:{1:`text-3xl leading-tight font-bold md:text-4xl`,2:`text-2xl leading-tight font-semibold md:text-3xl`,3:`text-xl leading-snug font-semibold md:text-2xl`,4:`text-lg leading-snug font-semibold md:text-xl`,5:`text-base leading-normal font-semibold md:text-lg`,6:`text-sm leading-normal font-semibold md:text-base`}},defaultVariants:{level:1}}),i=({level:n=1,className:i,children:a})=>e(`h`+n,{"data-slot":`title`,className:t(r({level:n}),i),children:a});export{i as Title};
 //# sourceMappingURL=title.mjs.map

package/dist/typography/title.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"title.mjs","names":[],"sources":["../../packages/components/typography/title.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva } from 'class-variance-authority';\n\nconst titleVariants = cva('scroll-m-20 text-text-positive-strong tracking-tight', {\n  variants: {\n    level: {\n      1: 'text-center text-4xl font-extrabold text-balance',\n      2: 'border-b pb-2 text-3xl font-semibold first:mt-0',\n      3: 'text-2xl font-semibold',\n      4: 'text-xl font-semibold',\n      5: 'text-lg font-semibold',\n      6: 'text-base font-semibold',\n    },\n    default: {\n      level: 1,\n    },\n  },\n});\n\ntype Props = {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Title = ({ level = 1, className, children }: Props) => {\n  const Comp = `h${level}` as keyof JSX.IntrinsicElements;\n  return <Comp className={cn(titleVariants({ level }), className)}>{children}</Comp>;\n};\n"],"mappings":"2IAKA,MAAM,EAAgB,EAAI,uDAAwD,CAChF,SAAU,CACR,MAAO,CACL,EAAG,mDACH,EAAG,kDACH,EAAG,yBACH,EAAG,wBACH,EAAG,wBACH,EAAG,0BACJ,CACD,QAAS,CACP,MAAO,EACR,CACF,CACF,CAAC,CAQW,GAAS,CAAE,QAAQ,EAAG,YAAW,cAErC,EADM,IAAI,IAAA,CACJ,UAAW,EAAG,EAAc,CAAE,QAAO,CAAC,CAAE,EAAU,CAAG,YAAgB"}
+{"version":3,"file":"title.mjs","names":[],"sources":["../../packages/components/typography/title.tsx"],"sourcesContent":["'use client';\n\nimport type { JSX, ReactNode } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { cva } from 'class-variance-authority';\n\nconst titleVariants = cva('scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors', {\n  variants: {\n    level: {\n      1: 'text-3xl leading-tight font-bold md:text-4xl',\n      2: 'text-2xl leading-tight font-semibold md:text-3xl',\n      3: 'text-xl leading-snug font-semibold md:text-2xl',\n      4: 'text-lg leading-snug font-semibold md:text-xl',\n      5: 'text-base leading-normal font-semibold md:text-lg',\n      6: 'text-sm leading-normal font-semibold md:text-base',\n    },\n  },\n  defaultVariants: {\n    level: 1,\n  },\n});\n\nexport type TitleProps = {\n  /**\n   * Heading level that maps to the rendered HTML tag (`h1`–`h6`) and the corresponding\n   * typographic scale variant.\n   * - `1` — `text-3xl / md:text-4xl`, bold (default)\n   * - `2` — `text-2xl / md:text-3xl`, semibold\n   * - `3` — `text-xl / md:text-2xl`, semibold\n   * - `4` — `text-lg / md:text-xl`, semibold\n   * - `5` — `text-base / md:text-lg`, semibold\n   * - `6` — `text-sm / md:text-base`, semibold\n   * @default 1\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Additional Tailwind classes merged with the variant classes. */\n  className?: string;\n  /** Content rendered inside the heading element. */\n  children?: ReactNode;\n};\n\n/**\n * A semantic heading component that renders the correct `h1`–`h6` element and applies a matched typographic scale.\n *\n * @example\n * ```tsx\n * import { Title } from '@customafk/lunas-ui/typography/title';\n *\n * // Page-level heading (renders <h1>)\n * <Title level={1}>Welcome to Lunas</Title>\n *\n * // Section sub-heading (renders <h3>)\n * <Title level={3}>Account Settings</Title>\n * ```\n */\nexport const Title = ({ level = 1, className, children }: TitleProps) => {\n  const Comp = ('h' + level) as keyof JSX.IntrinsicElements;\n  return (\n    <Comp data-slot=\"title\" className={cn(titleVariants({ level }), className)}>\n      {children}\n    </Comp>\n  );\n};\n"],"mappings":"wJAMA,MAAM,EAAgB,EAAI,iGAAkG,CAC1H,SAAU,CACR,MAAO,CACL,EAAG,+CACH,EAAG,mDACH,EAAG,iDACH,EAAG,gDACH,EAAG,oDACH,EAAG,oDACJ,CACF,CACD,gBAAiB,CACf,MAAO,EACR,CACF,CAAC,CAmCW,GAAS,CAAE,QAAQ,EAAG,YAAW,cAG1C,EAFY,IAAM,EAAA,CAEZ,YAAU,QAAQ,UAAW,EAAG,EAAc,CAAE,QAAO,CAAC,CAAE,EAAU,CACvE,YACI"}

package/dist/ui/alert-dialog.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../heading-BEm5CCSE.cjs`),n=require(`../paragraph-B72bHMf7.cjs`),r=require(`../button.variants-CS-Cmarr.cjs`);let i=require(`@customafk/react-toolkit/utils`),a=require(`react/jsx-runtime`),o=require(`radix-ui`);function s({...e}){return(0,a.jsx)(o.AlertDialog.Root,{"data-slot":`alert-dialog`,...e})}function c({...e}){return(0,a.jsx)(o.AlertDialog.Trigger,{"data-slot":`alert-dialog-trigger`,...e})}function l({...e}){return(0,a.jsx)(o.AlertDialog.Portal,{"data-slot":`alert-dialog-portal`,...e})}function u({className:e,...t}){return(0,a.jsx)(o.AlertDialog.Overlay,{"data-slot":`alert-dialog-overlay`,style:{pointerEvents:`none`},className:(0,i.cn)(`fixed inset-0 z-50 bg-black/50`,`data-[state=open]:animate-in`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=open]:fade-in-0`,e),...t})}function d({className:e,...t}){return(0,a.jsxs)(l,{children:[(0,a.jsx)(u,{}),(0,a.jsx)(o.AlertDialog.Content,{"data-slot":`alert-dialog-content`,className:(0,i.cn)(`bg-background`,`fixed z-50`,`-translate-1/2 top-1/2 left-1/2`,`grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg`,`gap-4 rounded-lg p-6 shadow-lg duration-200`,`data-[state=open]:animate-in`,`data-[state=open]:fade-in-0`,`data-[state=open]:zoom-in-95`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=closed]:zoom-out-95`,e),...t})]})}function f({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`alert-dialog-header`,className:(0,i.cn)(`flex flex-col gap-2 text-center sm:text-left`,e),...t})}function p({className:e,...t}){return(0,a.jsx)(`div`,{"data-slot":`alert-dialog-footer`,className:(0,i.cn)(`flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...t})}function m({className:e,...n}){return(0,a.jsx)(o.AlertDialog.Title,{"data-slot":`alert-dialog-title`,className:(0,i.cn)(t.t({level:`h3`}),e),...n})}function h({className:e,...t}){return(0,a.jsx)(o.AlertDialog.Description,{"data-slot":`alert-dialog-description`,className:(0,i.cn)(n.n({variant:`muted`}),`not-first:mt-0`,e),...t})}function g({className:e,...t}){return(0,a.jsx)(o.AlertDialog.Action,{className:(0,i.cn)(r.n(),`min-w-24`,e),...t,autoFocus:!0,tabIndex:1})}function _({className:e,...t}){return(0,a.jsx)(o.AlertDialog.Cancel,{className:(0,i.cn)(r.n({variant:`outline`,color:`muted`}),`min-w-24`,e),...t})}exports.AlertDialog=s,exports.AlertDialogAction=g,exports.AlertDialogCancel=_,exports.AlertDialogContent=d,exports.AlertDialogDescription=h,exports.AlertDialogFooter=p,exports.AlertDialogHeader=f,exports.AlertDialogOverlay=u,exports.AlertDialogPortal=l,exports.AlertDialogTitle=m,exports.AlertDialogTrigger=c;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../button.variants-tnhb123u.cjs`),n=require(`../heading-AKz5ewy-.cjs`),r=require(`../paragraph-DN85Huc4.cjs`);let i=require(`react/jsx-runtime`),a=require(`@customafk/react-toolkit/utils`),o=require(`radix-ui`);function s({...e}){return(0,i.jsx)(o.AlertDialog.Root,{"data-slot":`alert-dialog`,...e})}function c({...e}){return(0,i.jsx)(o.AlertDialog.Trigger,{"data-slot":`alert-dialog-trigger`,...e})}function l({...e}){return(0,i.jsx)(o.AlertDialog.Portal,{"data-slot":`alert-dialog-portal`,...e})}function u({className:e,...t}){return(0,i.jsx)(o.AlertDialog.Overlay,{"data-slot":`alert-dialog-overlay`,style:{pointerEvents:`none`},className:(0,a.cn)(`fixed inset-0 z-50 bg-black/50`,`data-[state=open]:animate-in`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=open]:fade-in-0`,e),...t})}function d({className:e,...t}){return(0,i.jsxs)(l,{children:[(0,i.jsx)(u,{}),(0,i.jsx)(o.AlertDialog.Content,{"data-slot":`alert-dialog-content`,className:(0,a.cn)(`bg-background`,`fixed z-50`,`-translate-1/2 top-1/2 left-1/2`,`grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg`,`gap-4 rounded-lg p-6 shadow-lg duration-200`,`data-[state=open]:animate-in`,`data-[state=open]:fade-in-0`,`data-[state=open]:zoom-in-95`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=closed]:zoom-out-95`,e),...t})]})}function f({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`alert-dialog-header`,className:(0,a.cn)(`flex flex-col gap-2 text-center sm:text-left`,e),...t})}function p({className:e,...t}){return(0,i.jsx)(`div`,{"data-slot":`alert-dialog-footer`,className:(0,a.cn)(`flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...t})}function m({className:e,...t}){return(0,i.jsx)(o.AlertDialog.Title,{"data-slot":`alert-dialog-title`,className:(0,a.cn)(n.t({level:`h3`}),e),...t})}function h({className:e,...t}){return(0,i.jsx)(o.AlertDialog.Description,{"data-slot":`alert-dialog-description`,className:(0,a.cn)(r.n({variant:`muted`}),`not-first:mt-0`,e),...t})}function g({className:e,...n}){return(0,i.jsx)(o.AlertDialog.Action,{className:(0,a.cn)(t.n(),`min-w-24`,e),...n,autoFocus:!0,tabIndex:1})}function _({className:e,...n}){return(0,i.jsx)(o.AlertDialog.Cancel,{className:(0,a.cn)(t.n({variant:`outline`,color:`muted`}),`min-w-24`,e),...n})}exports.AlertDialog=s,exports.AlertDialogAction=g,exports.AlertDialogCancel=_,exports.AlertDialogContent=d,exports.AlertDialogDescription=h,exports.AlertDialogFooter=p,exports.AlertDialogHeader=f,exports.AlertDialogOverlay=u,exports.AlertDialogPortal=l,exports.AlertDialogTitle=m,exports.AlertDialogTrigger=c;
 //# sourceMappingURL=alert-dialog.cjs.map

package/dist/ui/alert-dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.cjs","names":["AlertDialogPrimitive","headingVariants","paragraphVariants","buttonVariants"],"sources":["../../packages/components/ui/alert-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { AlertDialog as AlertDialogPrimitive } from 'radix-ui';\nimport { headingVariants } from '../typography/heading';\nimport { paragraphVariants } from '../typography/paragraph';\nimport { buttonVariants } from './button.variants';\n\nfunction AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      style={{ pointerEvents: 'none' }}\n      className={cn(\n        'fixed inset-0 z-50 bg-black/50',\n        'data-[state=open]:animate-in',\n        'data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0',\n        'data-[state=open]:fade-in-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          'bg-background',\n          'fixed z-50',\n          '-translate-1/2 top-1/2 left-1/2',\n          'grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg',\n          'gap-4 rounded-lg p-6 shadow-lg duration-200',\n          'data-[state=open]:animate-in',\n          'data-[state=open]:fade-in-0',\n          'data-[state=open]:zoom-in-95',\n          'data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0',\n          'data-[state=closed]:zoom-out-95',\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"alert-dialog-header\" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />;\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"alert-dialog-footer\" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />;\n}\n\nfunction AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return <AlertDialogPrimitive.Title data-slot=\"alert-dialog-title\" className={cn(headingVariants({ level: 'h3' }), className)} {...props} />;\n}\n\nfunction AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(paragraphVariants({ variant: 'muted' }), 'not-first:mt-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), 'min-w-24', className)} {...props} autoFocus tabIndex={1} />;\n}\n\nfunction AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: 'outline', color: 'muted' }), 'min-w-24', className)} {...props} />;\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n"],"mappings":"oRASA,SAAS,EAAY,CAAE,GAAG,GAAiE,CACzF,OAAO,EAAA,EAAA,KAACA,EAAAA,YAAqB,KAAA,CAAK,YAAU,eAAe,GAAI,GAAS,CAG1E,SAAS,EAAmB,CAAE,GAAG,GAAoE,CACnG,OAAO,EAAA,EAAA,KAACA,EAAAA,YAAqB,QAAA,CAAQ,YAAU,uBAAuB,GAAI,GAAS,CAGrF,SAAS,EAAkB,CAAE,GAAG,GAAmE,CACjG,OAAO,EAAA,EAAA,KAACA,EAAAA,YAAqB,OAAA,CAAO,YAAU,sBAAsB,GAAI,GAAS,CAGnF,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAoE,CAC9G,OACE,EAAA,EAAA,KAACA,EAAAA,YAAqB,QAAA,CACpB,YAAU,uBACV,MAAO,CAAE,cAAe,OAAQ,CAChC,WAAA,EAAA,EAAA,IACE,iCACA,+BACA,kCACA,iCACA,8BACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAoE,CAC9G,OACE,EAAA,EAAA,MAAC,EAAA,CAAA,SAAA,EACC,EAAA,EAAA,KAAC,EAAA,EAAA,CAAqB,EACtB,EAAA,EAAA,KAACA,EAAAA,YAAqB,QAAA,CACpB,YAAU,uBACV,WAAA,EAAA,EAAA,IACE,gBACA,aACA,kCACA,kDACA,8CACA,+BACA,8BACA,+BACA,kCACA,iCACA,kCACA,EACD,CACD,GAAI,GACJ,CAAA,CAAA,CACgB,CAIxB,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,sBAAsB,WAAA,EAAA,EAAA,IAAc,+CAAgD,EAAU,CAAE,GAAI,GAAS,CAGrI,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,sBAAsB,WAAA,EAAA,EAAA,IAAc,yDAA0D,EAAU,CAAE,GAAI,GAAS,CAG/I,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAkE,CAC1G,OAAO,EAAA,EAAA,KAACA,EAAAA,YAAqB,MAAA,CAAM,YAAU,qBAAqB,WAAA,EAAA,EAAA,IAAcC,EAAAA,EAAgB,CAAE,MAAO,KAAM,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS,CAG7I,SAAS,EAAuB,CAAE,YAAW,GAAG,GAAwE,CACtH,OACE,EAAA,EAAA,KAACD,EAAAA,YAAqB,YAAA,CACpB,YAAU,2BACV,WAAA,EAAA,EAAA,IAAcE,EAAAA,EAAkB,CAAE,QAAS,QAAS,CAAC,CAAE,iBAAkB,EAAU,CACnF,GAAI,GACJ,CAIN,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAmE,CAC5G,OAAO,EAAA,EAAA,KAACF,EAAAA,YAAqB,OAAA,CAAO,WAAA,EAAA,EAAA,IAAcG,EAAAA,GAAgB,CAAE,WAAY,EAAU,CAAE,GAAI,EAAO,UAAA,GAAU,SAAU,GAAK,CAGlI,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAmE,CAC5G,OAAO,EAAA,EAAA,KAACH,EAAAA,YAAqB,OAAA,CAAO,WAAA,EAAA,EAAA,IAAcG,EAAAA,EAAe,CAAE,QAAS,UAAW,MAAO,QAAS,CAAC,CAAE,WAAY,EAAU,CAAE,GAAI,GAAS"}
+{"version":3,"file":"alert-dialog.cjs","names":["AlertDialogPrimitive","headingVariants","paragraphVariants","buttonVariants"],"sources":["../../packages/components/ui/alert-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { AlertDialog as AlertDialogPrimitive } from 'radix-ui';\nimport { headingVariants } from '../typography/heading';\nimport { paragraphVariants } from '../typography/paragraph';\nimport { buttonVariants } from './button.variants';\n\n/**\n * Accessible alert dialog built on Radix UI's AlertDialog primitives, requiring explicit user confirmation before a destructive action can proceed.\n *\n * @example\n * ```tsx\n * import {\n *   AlertDialog, AlertDialogTrigger, AlertDialogContent,\n *   AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,\n *   AlertDialogFooter, AlertDialogAction, AlertDialogCancel,\n * } from '@customafk/lunas-ui/ui/alert-dialog';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * <AlertDialog>\n *   <AlertDialogTrigger asChild>\n *     <Button variant=\"solid\" color=\"danger\">Delete account</Button>\n *   </AlertDialogTrigger>\n *   <AlertDialogContent>\n *     <AlertDialogHeader>\n *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n *       <AlertDialogDescription>\n *         This action cannot be undone. Your account will be permanently deleted.\n *       </AlertDialogDescription>\n *     </AlertDialogHeader>\n *     <AlertDialogFooter>\n *       <AlertDialogCancel>Cancel</AlertDialogCancel>\n *       <AlertDialogAction>Continue</AlertDialogAction>\n *     </AlertDialogFooter>\n *   </AlertDialogContent>\n * </AlertDialog>\n * ```\n */\nfunction AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\n/** Element that opens the alert dialog when clicked; typically wrapped with `asChild` around a `Button`. */\nfunction AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\n/** Renders alert dialog overlay and content into a portal outside the normal React tree. */\nfunction AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\n/** Semi-transparent backdrop rendered behind the alert dialog panel; pointer events are disabled to prevent accidental dismissal. */\nfunction AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      style={{ pointerEvents: 'none' }}\n      className={cn(\n        'fixed inset-0 z-50 bg-black/50',\n        'data-[state=open]:animate-in',\n        'data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0',\n        'data-[state=open]:fade-in-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Animated panel that contains the alert dialog body; renders via `AlertDialogPortal` over `AlertDialogOverlay`. */\nfunction AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          'bg-background',\n          'fixed z-50',\n          '-translate-1/2 top-1/2 left-1/2',\n          'grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg',\n          'gap-4 rounded-lg p-6 shadow-lg duration-200',\n          'data-[state=open]:animate-in',\n          'data-[state=open]:fade-in-0',\n          'data-[state=open]:zoom-in-95',\n          'data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0',\n          'data-[state=closed]:zoom-out-95',\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\n/** Layout wrapper for the alert dialog title and description. */\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"alert-dialog-header\" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />;\n}\n\n/** Layout wrapper for the cancel and action buttons at the bottom of the alert dialog. */\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"alert-dialog-footer\" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />;\n}\n\n/** Accessible heading for the alert dialog, styled with the h3 heading variant. */\nfunction AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return <AlertDialogPrimitive.Title data-slot=\"alert-dialog-title\" className={cn(headingVariants({ level: 'h3' }), className)} {...props} />;\n}\n\n/** Muted supporting text that explains the consequences of the destructive action. */\nfunction AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(paragraphVariants({ variant: 'muted' }), 'not-first:mt-0', className)}\n      {...props}\n    />\n  );\n}\n\n/** Confirm button that closes the dialog and proceeds with the action; auto-focused and styled as the primary action. */\nfunction AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), 'min-w-24', className)} {...props} autoFocus tabIndex={1} />;\n}\n\n/** Cancel button that closes the alert dialog without performing the destructive action. */\nfunction AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: 'outline', color: 'muted' }), 'min-w-24', className)} {...props} />;\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n"],"mappings":"oRAwCA,SAAS,EAAY,CAAE,GAAG,GAAiE,CACzF,OAAO,EAAA,EAAA,KAACA,EAAAA,YAAqB,KAAA,CAAK,YAAU,eAAe,GAAI,GAAS,CAI1E,SAAS,EAAmB,CAAE,GAAG,GAAoE,CACnG,OAAO,EAAA,EAAA,KAACA,EAAAA,YAAqB,QAAA,CAAQ,YAAU,uBAAuB,GAAI,GAAS,CAIrF,SAAS,EAAkB,CAAE,GAAG,GAAmE,CACjG,OAAO,EAAA,EAAA,KAACA,EAAAA,YAAqB,OAAA,CAAO,YAAU,sBAAsB,GAAI,GAAS,CAInF,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAoE,CAC9G,OACE,EAAA,EAAA,KAACA,EAAAA,YAAqB,QAAA,CACpB,YAAU,uBACV,MAAO,CAAE,cAAe,OAAQ,CAChC,WAAA,EAAA,EAAA,IACE,iCACA,+BACA,kCACA,iCACA,8BACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAoE,CAC9G,OACE,EAAA,EAAA,MAAC,EAAA,CAAA,SAAA,EACC,EAAA,EAAA,KAAC,EAAA,EAAA,CAAqB,EACtB,EAAA,EAAA,KAACA,EAAAA,YAAqB,QAAA,CACpB,YAAU,uBACV,WAAA,EAAA,EAAA,IACE,gBACA,aACA,kCACA,kDACA,8CACA,+BACA,8BACA,+BACA,kCACA,iCACA,kCACA,EACD,CACD,GAAI,GACJ,CAAA,CAAA,CACgB,CAKxB,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,sBAAsB,WAAA,EAAA,EAAA,IAAc,+CAAgD,EAAU,CAAE,GAAI,GAAS,CAIrI,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OAAO,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,sBAAsB,WAAA,EAAA,EAAA,IAAc,yDAA0D,EAAU,CAAE,GAAI,GAAS,CAI/I,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAkE,CAC1G,OAAO,EAAA,EAAA,KAACA,EAAAA,YAAqB,MAAA,CAAM,YAAU,qBAAqB,WAAA,EAAA,EAAA,IAAcC,EAAAA,EAAgB,CAAE,MAAO,KAAM,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS,CAI7I,SAAS,EAAuB,CAAE,YAAW,GAAG,GAAwE,CACtH,OACE,EAAA,EAAA,KAACD,EAAAA,YAAqB,YAAA,CACpB,YAAU,2BACV,WAAA,EAAA,EAAA,IAAcE,EAAAA,EAAkB,CAAE,QAAS,QAAS,CAAC,CAAE,iBAAkB,EAAU,CACnF,GAAI,GACJ,CAKN,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAmE,CAC5G,OAAO,EAAA,EAAA,KAACF,EAAAA,YAAqB,OAAA,CAAO,WAAA,EAAA,EAAA,IAAcG,EAAAA,GAAgB,CAAE,WAAY,EAAU,CAAE,GAAI,EAAO,UAAA,GAAU,SAAU,GAAK,CAIlI,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAmE,CAC5G,OAAO,EAAA,EAAA,KAACH,EAAAA,YAAqB,OAAA,CAAO,WAAA,EAAA,EAAA,IAAcG,EAAAA,EAAe,CAAE,QAAS,UAAW,MAAO,QAAS,CAAC,CAAE,WAAY,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/alert-dialog.d.cts

@@ -1,48 +1,90 @@
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime33 from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "radix-ui";
 
 //#region packages/components/ui/alert-dialog.d.ts
+
+/**
+ * Accessible alert dialog built on Radix UI's AlertDialog primitives, requiring explicit user confirmation before a destructive action can proceed.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   AlertDialog, AlertDialogTrigger, AlertDialogContent,
+ *   AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
+ *   AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
+ * } from '@customafk/lunas-ui/ui/alert-dialog';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button variant="solid" color="danger">Delete account</Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         This action cannot be undone. Your account will be permanently deleted.
+ *       </AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *       <AlertDialogAction>Continue</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ */
 declare function AlertDialog({
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime33.JSX.Element;
+/** Element that opens the alert dialog when clicked; typically wrapped with `asChild` around a `Button`. */
 declare function AlertDialogTrigger({
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime33.JSX.Element;
+/** Renders alert dialog overlay and content into a portal outside the normal React tree. */
 declare function AlertDialogPortal({
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime33.JSX.Element;
+/** Semi-transparent backdrop rendered behind the alert dialog panel; pointer events are disabled to prevent accidental dismissal. */
 declare function AlertDialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime33.JSX.Element;
+/** Animated panel that contains the alert dialog body; renders via `AlertDialogPortal` over `AlertDialogOverlay`. */
 declare function AlertDialogContent({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Content>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Content>): react_jsx_runtime33.JSX.Element;
+/** Layout wrapper for the alert dialog title and description. */
 declare function AlertDialogHeader({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime33.JSX.Element;
+/** Layout wrapper for the cancel and action buttons at the bottom of the alert dialog. */
 declare function AlertDialogFooter({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime33.JSX.Element;
+/** Accessible heading for the alert dialog, styled with the h3 heading variant. */
 declare function AlertDialogTitle({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Title>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Title>): react_jsx_runtime33.JSX.Element;
+/** Muted supporting text that explains the consequences of the destructive action. */
 declare function AlertDialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime33.JSX.Element;
+/** Confirm button that closes the dialog and proceeds with the action; auto-focused and styled as the primary action. */
 declare function AlertDialogAction({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Action>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Action>): react_jsx_runtime33.JSX.Element;
+/** Cancel button that closes the alert dialog without performing the destructive action. */
 declare function AlertDialogCancel({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Cancel>): react_jsx_runtime36.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Cancel>): react_jsx_runtime33.JSX.Element;
 //#endregion
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
 //# sourceMappingURL=alert-dialog.d.cts.map

package/dist/ui/alert-dialog.d.mts

@@ -1,48 +1,90 @@
-import * as react_jsx_runtime59 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "radix-ui";
 
 //#region packages/components/ui/alert-dialog.d.ts
+
+/**
+ * Accessible alert dialog built on Radix UI's AlertDialog primitives, requiring explicit user confirmation before a destructive action can proceed.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   AlertDialog, AlertDialogTrigger, AlertDialogContent,
+ *   AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
+ *   AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
+ * } from '@customafk/lunas-ui/ui/alert-dialog';
+ * import { Button } from '@customafk/lunas-ui/ui/button';
+ *
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button variant="solid" color="danger">Delete account</Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         This action cannot be undone. Your account will be permanently deleted.
+ *       </AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *       <AlertDialogAction>Continue</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ */
 declare function AlertDialog({
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Root>): react_jsx_runtime25.JSX.Element;
+/** Element that opens the alert dialog when clicked; typically wrapped with `asChild` around a `Button`. */
 declare function AlertDialogTrigger({
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Trigger>): react_jsx_runtime25.JSX.Element;
+/** Renders alert dialog overlay and content into a portal outside the normal React tree. */
 declare function AlertDialogPortal({
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Portal>): react_jsx_runtime25.JSX.Element;
+/** Semi-transparent backdrop rendered behind the alert dialog panel; pointer events are disabled to prevent accidental dismissal. */
 declare function AlertDialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Overlay>): react_jsx_runtime25.JSX.Element;
+/** Animated panel that contains the alert dialog body; renders via `AlertDialogPortal` over `AlertDialogOverlay`. */
 declare function AlertDialogContent({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Content>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Content>): react_jsx_runtime25.JSX.Element;
+/** Layout wrapper for the alert dialog title and description. */
 declare function AlertDialogHeader({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime25.JSX.Element;
+/** Layout wrapper for the cancel and action buttons at the bottom of the alert dialog. */
 declare function AlertDialogFooter({
   className,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime25.JSX.Element;
+/** Accessible heading for the alert dialog, styled with the h3 heading variant. */
 declare function AlertDialogTitle({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Title>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Title>): react_jsx_runtime25.JSX.Element;
+/** Muted supporting text that explains the consequences of the destructive action. */
 declare function AlertDialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Description>): react_jsx_runtime25.JSX.Element;
+/** Confirm button that closes the dialog and proceeds with the action; auto-focused and styled as the primary action. */
 declare function AlertDialogAction({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Action>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Action>): react_jsx_runtime25.JSX.Element;
+/** Cancel button that closes the alert dialog without performing the destructive action. */
 declare function AlertDialogCancel({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialog$1.Cancel>): react_jsx_runtime59.JSX.Element;
+}: React.ComponentProps<typeof AlertDialog$1.Cancel>): react_jsx_runtime25.JSX.Element;
 //#endregion
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
 //# sourceMappingURL=alert-dialog.d.mts.map

package/dist/ui/alert-dialog.mjs

@@ -1,2 +1,2 @@
-"use client";import{t as e}from"../heading--VmdIi7C.mjs";import{n as t}from"../paragraph-moBSTPmT.mjs";import{n}from"../button.variants-DRWf66hR.mjs";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{AlertDialog as o}from"radix-ui";function s({...e}){return i(o.Root,{"data-slot":`alert-dialog`,...e})}function c({...e}){return i(o.Trigger,{"data-slot":`alert-dialog-trigger`,...e})}function l({...e}){return i(o.Portal,{"data-slot":`alert-dialog-portal`,...e})}function u({className:e,...t}){return i(o.Overlay,{"data-slot":`alert-dialog-overlay`,style:{pointerEvents:`none`},className:r(`fixed inset-0 z-50 bg-black/50`,`data-[state=open]:animate-in`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=open]:fade-in-0`,e),...t})}function d({className:e,...t}){return a(l,{children:[i(u,{}),i(o.Content,{"data-slot":`alert-dialog-content`,className:r(`bg-background`,`fixed z-50`,`-translate-1/2 top-1/2 left-1/2`,`grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg`,`gap-4 rounded-lg p-6 shadow-lg duration-200`,`data-[state=open]:animate-in`,`data-[state=open]:fade-in-0`,`data-[state=open]:zoom-in-95`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=closed]:zoom-out-95`,e),...t})]})}function f({className:e,...t}){return i(`div`,{"data-slot":`alert-dialog-header`,className:r(`flex flex-col gap-2 text-center sm:text-left`,e),...t})}function p({className:e,...t}){return i(`div`,{"data-slot":`alert-dialog-footer`,className:r(`flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...t})}function m({className:t,...n}){return i(o.Title,{"data-slot":`alert-dialog-title`,className:r(e({level:`h3`}),t),...n})}function h({className:e,...n}){return i(o.Description,{"data-slot":`alert-dialog-description`,className:r(t({variant:`muted`}),`not-first:mt-0`,e),...n})}function g({className:e,...t}){return i(o.Action,{className:r(n(),`min-w-24`,e),...t,autoFocus:!0,tabIndex:1})}function _({className:e,...t}){return i(o.Cancel,{className:r(n({variant:`outline`,color:`muted`}),`min-w-24`,e),...t})}export{s as AlertDialog,g as AlertDialogAction,_ as AlertDialogCancel,d as AlertDialogContent,h as AlertDialogDescription,p as AlertDialogFooter,f as AlertDialogHeader,u as AlertDialogOverlay,l as AlertDialogPortal,m as AlertDialogTitle,c as AlertDialogTrigger};
+"use client";import{n as e}from"../button.variants-DeCyas1F.mjs";import{t}from"../heading-DN67djxs.mjs";import{n}from"../paragraph-Ch5TvEqL.mjs";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{cn as a}from"@customafk/react-toolkit/utils";import{AlertDialog as o}from"radix-ui";function s({...e}){return r(o.Root,{"data-slot":`alert-dialog`,...e})}function c({...e}){return r(o.Trigger,{"data-slot":`alert-dialog-trigger`,...e})}function l({...e}){return r(o.Portal,{"data-slot":`alert-dialog-portal`,...e})}function u({className:e,...t}){return r(o.Overlay,{"data-slot":`alert-dialog-overlay`,style:{pointerEvents:`none`},className:a(`fixed inset-0 z-50 bg-black/50`,`data-[state=open]:animate-in`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=open]:fade-in-0`,e),...t})}function d({className:e,...t}){return i(l,{children:[r(u,{}),r(o.Content,{"data-slot":`alert-dialog-content`,className:a(`bg-background`,`fixed z-50`,`-translate-1/2 top-1/2 left-1/2`,`grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg`,`gap-4 rounded-lg p-6 shadow-lg duration-200`,`data-[state=open]:animate-in`,`data-[state=open]:fade-in-0`,`data-[state=open]:zoom-in-95`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=closed]:zoom-out-95`,e),...t})]})}function f({className:e,...t}){return r(`div`,{"data-slot":`alert-dialog-header`,className:a(`flex flex-col gap-2 text-center sm:text-left`,e),...t})}function p({className:e,...t}){return r(`div`,{"data-slot":`alert-dialog-footer`,className:a(`flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...t})}function m({className:e,...n}){return r(o.Title,{"data-slot":`alert-dialog-title`,className:a(t({level:`h3`}),e),...n})}function h({className:e,...t}){return r(o.Description,{"data-slot":`alert-dialog-description`,className:a(n({variant:`muted`}),`not-first:mt-0`,e),...t})}function g({className:t,...n}){return r(o.Action,{className:a(e(),`min-w-24`,t),...n,autoFocus:!0,tabIndex:1})}function _({className:t,...n}){return r(o.Cancel,{className:a(e({variant:`outline`,color:`muted`}),`min-w-24`,t),...n})}export{s as AlertDialog,g as AlertDialogAction,_ as AlertDialogCancel,d as AlertDialogContent,h as AlertDialogDescription,p as AlertDialogFooter,f as AlertDialogHeader,u as AlertDialogOverlay,l as AlertDialogPortal,m as AlertDialogTitle,c as AlertDialogTrigger};
 //# sourceMappingURL=alert-dialog.mjs.map

package/dist/ui/alert-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.mjs","names":["AlertDialogPrimitive"],"sources":["../../packages/components/ui/alert-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { AlertDialog as AlertDialogPrimitive } from 'radix-ui';\nimport { headingVariants } from '../typography/heading';\nimport { paragraphVariants } from '../typography/paragraph';\nimport { buttonVariants } from './button.variants';\n\nfunction AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      style={{ pointerEvents: 'none' }}\n      className={cn(\n        'fixed inset-0 z-50 bg-black/50',\n        'data-[state=open]:animate-in',\n        'data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0',\n        'data-[state=open]:fade-in-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          'bg-background',\n          'fixed z-50',\n          '-translate-1/2 top-1/2 left-1/2',\n          'grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg',\n          'gap-4 rounded-lg p-6 shadow-lg duration-200',\n          'data-[state=open]:animate-in',\n          'data-[state=open]:fade-in-0',\n          'data-[state=open]:zoom-in-95',\n          'data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0',\n          'data-[state=closed]:zoom-out-95',\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"alert-dialog-header\" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />;\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"alert-dialog-footer\" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />;\n}\n\nfunction AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return <AlertDialogPrimitive.Title data-slot=\"alert-dialog-title\" className={cn(headingVariants({ level: 'h3' }), className)} {...props} />;\n}\n\nfunction AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(paragraphVariants({ variant: 'muted' }), 'not-first:mt-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), 'min-w-24', className)} {...props} autoFocus tabIndex={1} />;\n}\n\nfunction AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: 'outline', color: 'muted' }), 'min-w-24', className)} {...props} />;\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n"],"mappings":"mSASA,SAAS,EAAY,CAAE,GAAG,GAAiE,CACzF,OAAO,EAACA,EAAqB,KAAA,CAAK,YAAU,eAAe,GAAI,GAAS,CAG1E,SAAS,EAAmB,CAAE,GAAG,GAAoE,CACnG,OAAO,EAACA,EAAqB,QAAA,CAAQ,YAAU,uBAAuB,GAAI,GAAS,CAGrF,SAAS,EAAkB,CAAE,GAAG,GAAmE,CACjG,OAAO,EAACA,EAAqB,OAAA,CAAO,YAAU,sBAAsB,GAAI,GAAS,CAGnF,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAoE,CAC9G,OACE,EAACA,EAAqB,QAAA,CACpB,YAAU,uBACV,MAAO,CAAE,cAAe,OAAQ,CAChC,UAAW,EACT,iCACA,+BACA,kCACA,iCACA,8BACA,EACD,CACD,GAAI,GACJ,CAIN,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAoE,CAC9G,OACE,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,EAAA,CAAqB,CACtB,EAACA,EAAqB,QAAA,CACpB,YAAU,uBACV,UAAW,EACT,gBACA,aACA,kCACA,kDACA,8CACA,+BACA,8BACA,+BACA,kCACA,iCACA,kCACA,EACD,CACD,GAAI,GACJ,CAAA,CAAA,CACgB,CAIxB,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OAAO,EAAC,MAAA,CAAI,YAAU,sBAAsB,UAAW,EAAG,+CAAgD,EAAU,CAAE,GAAI,GAAS,CAGrI,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OAAO,EAAC,MAAA,CAAI,YAAU,sBAAsB,UAAW,EAAG,yDAA0D,EAAU,CAAE,GAAI,GAAS,CAG/I,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAkE,CAC1G,OAAO,EAACA,EAAqB,MAAA,CAAM,YAAU,qBAAqB,UAAW,EAAG,EAAgB,CAAE,MAAO,KAAM,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS,CAG7I,SAAS,EAAuB,CAAE,YAAW,GAAG,GAAwE,CACtH,OACE,EAACA,EAAqB,YAAA,CACpB,YAAU,2BACV,UAAW,EAAG,EAAkB,CAAE,QAAS,QAAS,CAAC,CAAE,iBAAkB,EAAU,CACnF,GAAI,GACJ,CAIN,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAmE,CAC5G,OAAO,EAACA,EAAqB,OAAA,CAAO,UAAW,EAAG,GAAgB,CAAE,WAAY,EAAU,CAAE,GAAI,EAAO,UAAA,GAAU,SAAU,GAAK,CAGlI,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAmE,CAC5G,OAAO,EAACA,EAAqB,OAAA,CAAO,UAAW,EAAG,EAAe,CAAE,QAAS,UAAW,MAAO,QAAS,CAAC,CAAE,WAAY,EAAU,CAAE,GAAI,GAAS"}
+{"version":3,"file":"alert-dialog.mjs","names":["AlertDialogPrimitive"],"sources":["../../packages/components/ui/alert-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { AlertDialog as AlertDialogPrimitive } from 'radix-ui';\nimport { headingVariants } from '../typography/heading';\nimport { paragraphVariants } from '../typography/paragraph';\nimport { buttonVariants } from './button.variants';\n\n/**\n * Accessible alert dialog built on Radix UI's AlertDialog primitives, requiring explicit user confirmation before a destructive action can proceed.\n *\n * @example\n * ```tsx\n * import {\n *   AlertDialog, AlertDialogTrigger, AlertDialogContent,\n *   AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,\n *   AlertDialogFooter, AlertDialogAction, AlertDialogCancel,\n * } from '@customafk/lunas-ui/ui/alert-dialog';\n * import { Button } from '@customafk/lunas-ui/ui/button';\n *\n * <AlertDialog>\n *   <AlertDialogTrigger asChild>\n *     <Button variant=\"solid\" color=\"danger\">Delete account</Button>\n *   </AlertDialogTrigger>\n *   <AlertDialogContent>\n *     <AlertDialogHeader>\n *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n *       <AlertDialogDescription>\n *         This action cannot be undone. Your account will be permanently deleted.\n *       </AlertDialogDescription>\n *     </AlertDialogHeader>\n *     <AlertDialogFooter>\n *       <AlertDialogCancel>Cancel</AlertDialogCancel>\n *       <AlertDialogAction>Continue</AlertDialogAction>\n *     </AlertDialogFooter>\n *   </AlertDialogContent>\n * </AlertDialog>\n * ```\n */\nfunction AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\n/** Element that opens the alert dialog when clicked; typically wrapped with `asChild` around a `Button`. */\nfunction AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\n/** Renders alert dialog overlay and content into a portal outside the normal React tree. */\nfunction AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\n/** Semi-transparent backdrop rendered behind the alert dialog panel; pointer events are disabled to prevent accidental dismissal. */\nfunction AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      style={{ pointerEvents: 'none' }}\n      className={cn(\n        'fixed inset-0 z-50 bg-black/50',\n        'data-[state=open]:animate-in',\n        'data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0',\n        'data-[state=open]:fade-in-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Animated panel that contains the alert dialog body; renders via `AlertDialogPortal` over `AlertDialogOverlay`. */\nfunction AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          'bg-background',\n          'fixed z-50',\n          '-translate-1/2 top-1/2 left-1/2',\n          'grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg',\n          'gap-4 rounded-lg p-6 shadow-lg duration-200',\n          'data-[state=open]:animate-in',\n          'data-[state=open]:fade-in-0',\n          'data-[state=open]:zoom-in-95',\n          'data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0',\n          'data-[state=closed]:zoom-out-95',\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\n/** Layout wrapper for the alert dialog title and description. */\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"alert-dialog-header\" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />;\n}\n\n/** Layout wrapper for the cancel and action buttons at the bottom of the alert dialog. */\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"alert-dialog-footer\" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />;\n}\n\n/** Accessible heading for the alert dialog, styled with the h3 heading variant. */\nfunction AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return <AlertDialogPrimitive.Title data-slot=\"alert-dialog-title\" className={cn(headingVariants({ level: 'h3' }), className)} {...props} />;\n}\n\n/** Muted supporting text that explains the consequences of the destructive action. */\nfunction AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(paragraphVariants({ variant: 'muted' }), 'not-first:mt-0', className)}\n      {...props}\n    />\n  );\n}\n\n/** Confirm button that closes the dialog and proceeds with the action; auto-focused and styled as the primary action. */\nfunction AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), 'min-w-24', className)} {...props} autoFocus tabIndex={1} />;\n}\n\n/** Cancel button that closes the alert dialog without performing the destructive action. */\nfunction AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: 'outline', color: 'muted' }), 'min-w-24', className)} {...props} />;\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n"],"mappings":"8RAwCA,SAAS,EAAY,CAAE,GAAG,GAAiE,CACzF,OAAO,EAACA,EAAqB,KAAA,CAAK,YAAU,eAAe,GAAI,GAAS,CAI1E,SAAS,EAAmB,CAAE,GAAG,GAAoE,CACnG,OAAO,EAACA,EAAqB,QAAA,CAAQ,YAAU,uBAAuB,GAAI,GAAS,CAIrF,SAAS,EAAkB,CAAE,GAAG,GAAmE,CACjG,OAAO,EAACA,EAAqB,OAAA,CAAO,YAAU,sBAAsB,GAAI,GAAS,CAInF,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAoE,CAC9G,OACE,EAACA,EAAqB,QAAA,CACpB,YAAU,uBACV,MAAO,CAAE,cAAe,OAAQ,CAChC,UAAW,EACT,iCACA,+BACA,kCACA,iCACA,8BACA,EACD,CACD,GAAI,GACJ,CAKN,SAAS,EAAmB,CAAE,YAAW,GAAG,GAAoE,CAC9G,OACE,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,EAAA,CAAqB,CACtB,EAACA,EAAqB,QAAA,CACpB,YAAU,uBACV,UAAW,EACT,gBACA,aACA,kCACA,kDACA,8CACA,+BACA,8BACA,+BACA,kCACA,iCACA,kCACA,EACD,CACD,GAAI,GACJ,CAAA,CAAA,CACgB,CAKxB,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OAAO,EAAC,MAAA,CAAI,YAAU,sBAAsB,UAAW,EAAG,+CAAgD,EAAU,CAAE,GAAI,GAAS,CAIrI,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OAAO,EAAC,MAAA,CAAI,YAAU,sBAAsB,UAAW,EAAG,yDAA0D,EAAU,CAAE,GAAI,GAAS,CAI/I,SAAS,EAAiB,CAAE,YAAW,GAAG,GAAkE,CAC1G,OAAO,EAACA,EAAqB,MAAA,CAAM,YAAU,qBAAqB,UAAW,EAAG,EAAgB,CAAE,MAAO,KAAM,CAAC,CAAE,EAAU,CAAE,GAAI,GAAS,CAI7I,SAAS,EAAuB,CAAE,YAAW,GAAG,GAAwE,CACtH,OACE,EAACA,EAAqB,YAAA,CACpB,YAAU,2BACV,UAAW,EAAG,EAAkB,CAAE,QAAS,QAAS,CAAC,CAAE,iBAAkB,EAAU,CACnF,GAAI,GACJ,CAKN,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAmE,CAC5G,OAAO,EAACA,EAAqB,OAAA,CAAO,UAAW,EAAG,GAAgB,CAAE,WAAY,EAAU,CAAE,GAAI,EAAO,UAAA,GAAU,SAAU,GAAK,CAIlI,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAmE,CAC5G,OAAO,EAACA,EAAqB,OAAA,CAAO,UAAW,EAAG,EAAe,CAAE,QAAS,UAAW,MAAO,QAAS,CAAC,CAAE,WAAY,EAAU,CAAE,GAAI,GAAS"}

package/dist/ui/alert.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`lucide-react`);const o=(0,n.cva)([`relative grid w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm`,`grid-cols-[0_1fr]`,`has-[>svg]:grid-cols-[24px_1fr] has-[>svg]:gap-x-3`,`[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current`,`transition-colors duration-200`],{variants:{variant:{default:`bg-card text-text-positive-strong border-border`,destructive:`text-danger-strong border-danger-muted bg-card [&>svg]:text-danger *:data-[slot=alert-description]:text-danger`,warning:`text-warning-strong border-warning-muted bg-card [&>svg]:text-warning *:data-[slot=alert-description]:text-warning`,success:`text-success-strong border-success-muted bg-card [&>svg]:text-success *:data-[slot=alert-description]:text-success`,info:`text-info-strong border-info-muted bg-card [&>svg]:text-info *:data-[slot=alert-description]:text-info`}},defaultVariants:{variant:`default`}});function s({className:e,variant:n,children:s,icon:c,dismissible:l,onDismiss:u,...d}){let f=(0,r.useMemo)(()=>{if(!c)switch(n){case`destructive`:return(0,i.jsx)(a.AlertCircle,{});case`warning`:return(0,i.jsx)(a.AlertTriangle,{});case`success`:return(0,i.jsx)(a.CheckCircle,{});case`info`:return(0,i.jsx)(a.Info,{});default:return null}return c},[c,n]);return(0,i.jsxs)(`div`,{"data-slot":`alert`,role:`alert`,"data-variant":n,className:(0,t.cn)(o({variant:n}),e),...d,children:[f,s,l&&(0,i.jsx)(`button`,{type:`button`,onClick:u,"aria-label":`Close alert`,className:`absolute top-2 right-2 size-6 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100`,"data-slot":`alert-close`,children:(0,i.jsx)(a.X,{size:16})})]})}function c({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`alert-title`,className:(0,t.cn)(`col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight`,e),...n})}function l({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`alert-description`,className:(0,t.cn)(`text-text-positive-weak col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed`,e),...n})}exports.Alert=s,exports.AlertDescription=l,exports.AlertTitle=c;
-//# sourceMappingURL=alert.cjs.map
+"use client";const e=require(`../alert-DIC1_ymv.cjs`);exports.Alert=e.t,exports.AlertDescription=e.n,exports.AlertTitle=e.r;