@customafk/lunas-ui 0.2.75 → 0.2.77

package/dist/group-field-sVykO2JZ.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"group-field-sVykO2JZ.cjs","names":["FieldGroup","Field","FieldContent","FieldLabel","FieldDescription","FieldContentMain","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/forms/group-field.tsx"],"sourcesContent":["import {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n} from '@/components/features/tanstack-form/components/ui/field';\n\n/**\n * Renders a labeled field group with an optional description, helper text, and a bottom separator.\n *\n * @example\n * import { TanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackFieldGroup\n *   label=\"Contact Details\"\n *   description=\"Enter your contact information.\"\n *   helperText=\"All fields are required.\"\n *   orientation=\"horizontal\"\n * >\n *   <EmailField />\n * </TanStackFieldGroup>\n */\nexport const TanStackFieldGroup: React.FC<\n  React.PropsWithChildren<{\n    /** Primary label displayed above the field content. */\n    label: string;\n    /** Secondary descriptive text shown beneath the label. */\n    description?: string;\n    /** Supplementary helper note rendered below the field content. */\n    helperText?: string;\n    /** Layout orientation of the label-to-content axis. Defaults to `'responsive'`. */\n    orientation?: 'horizontal' | 'vertical' | 'responsive';\n  }>\n> = ({\n  label,\n  description,\n  helperText,\n\n  orientation = 'responsive',\n  children,\n}) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>{label}</FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          {children}\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2EA0BA,MAAa,GAWR,CACH,QACA,cACA,aAEA,cAAc,aACd,eAGE,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,uBAApB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAA,SAAa,CAAkB,CAAA,GAC/B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,CACG,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP"}
+{"version":3,"file":"group-field-sVykO2JZ.cjs","names":["FieldGroup","Field","FieldContent","FieldLabel","FieldDescription","FieldContentMain","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/forms/group-field.tsx"],"sourcesContent":["import {\n  Field,\n  FieldContent,\n  FieldContentMain,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldNote,\n  FieldSeparator,\n} from '@/components/features/tanstack-form/components/ui/field';\n\n/**\n * Renders a labeled field group with an optional description, helper text, and a bottom separator.\n *\n * @example\n * import { TanStackFieldGroup } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <TanStackFieldGroup\n *   label=\"Contact Details\"\n *   description=\"Enter your contact information.\"\n *   helperText=\"All fields are required.\"\n *   orientation=\"horizontal\"\n * >\n *   <EmailField />\n * </TanStackFieldGroup>\n */\nexport const TanStackFieldGroup: React.FC<\n  React.PropsWithChildren<{\n    /** Primary label displayed above the field content. */\n    label: string;\n    /** Secondary descriptive text shown beneath the label. */\n    description?: string;\n    /** Supplementary helper note rendered below the field content. */\n    helperText?: string;\n    /** Layout orientation of the label-to-content axis. Defaults to `'responsive'`. */\n    orientation?: 'horizontal' | 'vertical' | 'responsive';\n  }>\n> = ({\n  label,\n  description,\n  helperText,\n\n  orientation = 'responsive',\n  children,\n}) => {\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field orientation={orientation}>\n        <FieldContent>\n          <FieldLabel>{label}</FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          {children}\n          <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n        </FieldContentMain>\n      </Field>\n      <FieldSeparator />\n    </FieldGroup>\n  );\n};\n"],"mappings":"2EA0BA,MAAa,GAWR,CACH,QACA,cACA,aAEA,cAAc,aACd,eAGE,EAAA,EAAA,KAAA,CAACA,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAApB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAA,SAAa,CAAkB,CAAA,GAC/B,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,CACG,GACD,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP"}

package/dist/{hover-card-Prwm-0Q4.d.cts → hover-card-JeShfV9g.d.cts}

@@ -1,5 +1,4 @@
 import { HoverCard } from "radix-ui";
-
 //#region packages/components/ui/hover-card.d.ts
 /**
  * Root provider for the HoverCard — shows a floating card when the trigger is hovered.
@@ -16,20 +15,11 @@ import { HoverCard } from "radix-ui";
  * </HoverCard>
  * ```
  */
-declare function HoverCard$1({
-  ...props
-}: React.ComponentProps<typeof HoverCard.Root>): import("react").JSX.Element;
+declare function HoverCard$1({ ...props }: React.ComponentProps<typeof HoverCard.Root>): import("react").JSX.Element;
 /** The element that triggers the HoverCard on pointer enter. */
-declare function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCard.Trigger>): import("react").JSX.Element;
+declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCard.Trigger>): import("react").JSX.Element;
 /** The floating card panel displayed when the trigger is hovered. */
-declare function HoverCardContent({
-  className,
-  align,
-  sideOffset,
-  ...props
-}: React.ComponentProps<typeof HoverCard.Content>): import("react").JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCard.Content>): import("react").JSX.Element;
 //#endregion
 export { HoverCardContent as n, HoverCardTrigger as r, HoverCard$1 as t };
-//# sourceMappingURL=hover-card-Prwm-0Q4.d.cts.map
+//# sourceMappingURL=hover-card-JeShfV9g.d.cts.map

package/dist/{hover-card-Prwm-0Q4.d.mts → hover-card-JeShfV9g.d.mts}

@@ -1,5 +1,4 @@
 import { HoverCard } from "radix-ui";
-
 //#region packages/components/ui/hover-card.d.ts
 /**
  * Root provider for the HoverCard — shows a floating card when the trigger is hovered.
@@ -16,20 +15,11 @@ import { HoverCard } from "radix-ui";
  * </HoverCard>
  * ```
  */
-declare function HoverCard$1({
-  ...props
-}: React.ComponentProps<typeof HoverCard.Root>): import("react").JSX.Element;
+declare function HoverCard$1({ ...props }: React.ComponentProps<typeof HoverCard.Root>): import("react").JSX.Element;
 /** The element that triggers the HoverCard on pointer enter. */
-declare function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCard.Trigger>): import("react").JSX.Element;
+declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCard.Trigger>): import("react").JSX.Element;
 /** The floating card panel displayed when the trigger is hovered. */
-declare function HoverCardContent({
-  className,
-  align,
-  sideOffset,
-  ...props
-}: React.ComponentProps<typeof HoverCard.Content>): import("react").JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCard.Content>): import("react").JSX.Element;
 //#endregion
 export { HoverCardContent as n, HoverCardTrigger as r, HoverCard$1 as t };
-//# sourceMappingURL=hover-card-Prwm-0Q4.d.mts.map
+//# sourceMappingURL=hover-card-JeShfV9g.d.mts.map

package/dist/image-BvDGi_G7.d.cts

@@ -0,0 +1,36 @@
+//#region packages/components/ui/image.d.ts
+/** Props for the Image component. */
+type Props = {
+  /** URL of the image to display. */
+  src?: string;
+  /** Accessible alt text for the image. */
+  alt?: string;
+  /** Width of the image container (number treated as pixels). */
+  width?: number | string;
+  /** Height of the image container (number treated as pixels). */
+  height?: number | string;
+  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */
+  maxRetries?: number;
+  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */
+  retryDelay?: number;
+  /** Class name applied to the outer container div. */
+  className?: string;
+  /** Class name applied to the `<img>` element. */
+  imageClassName?: string;
+  /** Click handler for the image container. */
+  onClick?: () => void;
+};
+/**
+ * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.
+ *
+ * @example
+ * ```tsx
+ * import { Image } from '@customafk/lunas-ui/ui/image';
+ *
+ * <Image src="/hero.jpg" alt="Hero" width={400} height={300} maxRetries={3} />
+ * ```
+ */
+declare const Image: React.FC<Props>;
+//#endregion
+export { Image as t };
+//# sourceMappingURL=image-BvDGi_G7.d.cts.map

package/dist/image-BvDGi_G7.d.mts

@@ -0,0 +1,36 @@
+//#region packages/components/ui/image.d.ts
+/** Props for the Image component. */
+type Props = {
+  /** URL of the image to display. */
+  src?: string;
+  /** Accessible alt text for the image. */
+  alt?: string;
+  /** Width of the image container (number treated as pixels). */
+  width?: number | string;
+  /** Height of the image container (number treated as pixels). */
+  height?: number | string;
+  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */
+  maxRetries?: number;
+  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */
+  retryDelay?: number;
+  /** Class name applied to the outer container div. */
+  className?: string;
+  /** Class name applied to the `<img>` element. */
+  imageClassName?: string;
+  /** Click handler for the image container. */
+  onClick?: () => void;
+};
+/**
+ * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.
+ *
+ * @example
+ * ```tsx
+ * import { Image } from '@customafk/lunas-ui/ui/image';
+ *
+ * <Image src="/hero.jpg" alt="Hero" width={400} height={300} maxRetries={3} />
+ * ```
+ */
+declare const Image: React.FC<Props>;
+//#endregion
+export { Image as t };
+//# sourceMappingURL=image-BvDGi_G7.d.mts.map

package/dist/{index-DJiiPHPf.d.cts → index-BBMKb5q2.d.cts}

@@ -1,8 +1,11 @@
 //#region packages/components/layouts/payment-layout/index.d.ts
 type PaymentLayoutUser = {
-  uuid?: string; /** Display name shown in the header and dropdown. */
-  fullname: string; /** Email address shown in the user dropdown. */
-  email: string; /** Optional avatar image URL; falls back to initials when omitted. */
+  uuid?: string;
+  /** Display name shown in the header and dropdown. */
+  fullname: string;
+  /** Email address shown in the user dropdown. */
+  email: string;
+  /** Optional avatar image URL; falls back to initials when omitted. */
   avatar?: string;
 };
 /**
@@ -36,24 +39,36 @@ type PaymentLayoutUser = {
  * ```
  */
 declare const PaymentLayout: React.FC<React.PropsWithChildren<{
-  /** ID of the currently active navigation item; matched against each item's `id` to apply the active style. */activeNavItemId?: string; /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */
+  /** ID of the currently active navigation item; matched against each item's `id` to apply the active style. */
+  activeNavItemId?: string;
+  /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */
   sidebar?: {
     groupcontent: {
-      /** Unique identifier for the group, used as React key. */id: string; /** Optional section heading rendered above the group's items. */
+      /** Unique identifier for the group, used as React key. */
+      id: string;
+      /** Optional section heading rendered above the group's items. */
       label?: string;
       items: {
-        /** Unique identifier for the nav item, used as React key and for active-state comparison. */id: string; /** Human-readable label rendered inside the sidebar button. */
-        label: string; /** Optional icon element rendered to the left of the label. */
-        icon?: React.ReactNode; /** Callback fired when the sidebar button is clicked. */
+        /** Unique identifier for the nav item, used as React key and for active-state comparison. */
+        id: string;
+        /** Human-readable label rendered inside the sidebar button. */
+        label: string;
+        /** Optional icon element rendered to the left of the label. */
+        icon?: React.ReactNode;
+        /** Callback fired when the sidebar button is clicked. */
         onClick?: () => void;
       }[];
     }[];
-  }; /** Authenticated user; when provided the header shows user info and a logout option, otherwise a login button. */
-  user?: PaymentLayoutUser | null; /** When false the sidebar and bottom nav are hidden entirely (e.g. unauthenticated state). Defaults to true. */
-  isLogin?: boolean; /** Called when the login button in the header is clicked (only shown when `user` is absent). */
-  onLogin?: () => void; /** Called when the logout item in the user dropdown is clicked. */
+  };
+  /** Authenticated user; when provided the header shows user info and a logout option, otherwise a login button. */
+  user?: PaymentLayoutUser | null;
+  /** When false the sidebar and bottom nav are hidden entirely (e.g. unauthenticated state). Defaults to true. */
+  isLogin?: boolean;
+  /** Called when the login button in the header is clicked (only shown when `user` is absent). */
+  onLogin?: () => void;
+  /** Called when the logout item in the user dropdown is clicked. */
   onLogout?: () => void;
 }>>;
 //#endregion
 export { PaymentLayoutUser as n, PaymentLayout as t };
-//# sourceMappingURL=index-DJiiPHPf.d.cts.map
+//# sourceMappingURL=index-BBMKb5q2.d.cts.map

package/dist/{index-DJiiPHPf.d.mts → index-BBMKb5q2.d.mts}

@@ -1,8 +1,11 @@
 //#region packages/components/layouts/payment-layout/index.d.ts
 type PaymentLayoutUser = {
-  uuid?: string; /** Display name shown in the header and dropdown. */
-  fullname: string; /** Email address shown in the user dropdown. */
-  email: string; /** Optional avatar image URL; falls back to initials when omitted. */
+  uuid?: string;
+  /** Display name shown in the header and dropdown. */
+  fullname: string;
+  /** Email address shown in the user dropdown. */
+  email: string;
+  /** Optional avatar image URL; falls back to initials when omitted. */
   avatar?: string;
 };
 /**
@@ -36,24 +39,36 @@ type PaymentLayoutUser = {
  * ```
  */
 declare const PaymentLayout: React.FC<React.PropsWithChildren<{
-  /** ID of the currently active navigation item; matched against each item's `id` to apply the active style. */activeNavItemId?: string; /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */
+  /** ID of the currently active navigation item; matched against each item's `id` to apply the active style. */
+  activeNavItemId?: string;
+  /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */
   sidebar?: {
     groupcontent: {
-      /** Unique identifier for the group, used as React key. */id: string; /** Optional section heading rendered above the group's items. */
+      /** Unique identifier for the group, used as React key. */
+      id: string;
+      /** Optional section heading rendered above the group's items. */
       label?: string;
       items: {
-        /** Unique identifier for the nav item, used as React key and for active-state comparison. */id: string; /** Human-readable label rendered inside the sidebar button. */
-        label: string; /** Optional icon element rendered to the left of the label. */
-        icon?: React.ReactNode; /** Callback fired when the sidebar button is clicked. */
+        /** Unique identifier for the nav item, used as React key and for active-state comparison. */
+        id: string;
+        /** Human-readable label rendered inside the sidebar button. */
+        label: string;
+        /** Optional icon element rendered to the left of the label. */
+        icon?: React.ReactNode;
+        /** Callback fired when the sidebar button is clicked. */
         onClick?: () => void;
       }[];
     }[];
-  }; /** Authenticated user; when provided the header shows user info and a logout option, otherwise a login button. */
-  user?: PaymentLayoutUser | null; /** When false the sidebar and bottom nav are hidden entirely (e.g. unauthenticated state). Defaults to true. */
-  isLogin?: boolean; /** Called when the login button in the header is clicked (only shown when `user` is absent). */
-  onLogin?: () => void; /** Called when the logout item in the user dropdown is clicked. */
+  };
+  /** Authenticated user; when provided the header shows user info and a logout option, otherwise a login button. */
+  user?: PaymentLayoutUser | null;
+  /** When false the sidebar and bottom nav are hidden entirely (e.g. unauthenticated state). Defaults to true. */
+  isLogin?: boolean;
+  /** Called when the login button in the header is clicked (only shown when `user` is absent). */
+  onLogin?: () => void;
+  /** Called when the logout item in the user dropdown is clicked. */
   onLogout?: () => void;
 }>>;
 //#endregion
 export { PaymentLayoutUser as n, PaymentLayout as t };
-//# sourceMappingURL=index-DJiiPHPf.d.mts.map
+//# sourceMappingURL=index-BBMKb5q2.d.mts.map

package/dist/{index-CS7oydGk.d.cts → index-BMuVmm7f.d.mts}

@@ -1,6 +1,5 @@
-import { n as BadgeProps } from "./badge-MRT40pxM.cjs";
+import { n as BadgeProps } from "./badge-BPiU1Ss2.mjs";
 import { VariantProps } from "class-variance-authority";
-
 //#region packages/components/features/descriptions/components/badge.d.ts
 type DescriptionBadgeProps = {
   label: string | number | null | undefined;
@@ -84,19 +83,7 @@ type DescriptionStatisticProps = VariantProps<typeof descriptionStatisticVariant
   value: number | string | null | undefined;
   className?: string;
 };
-declare const DescriptionStatistic: import("react").MemoExoticComponent<({
-  decimalSeparator,
-  groupSeparator,
-  prefix: Prefix,
-  suffix: Suffix,
-  precision,
-  roundingMode,
-  showTrailingZeros,
-  size,
-  trend,
-  value,
-  className
-}: DescriptionStatisticProps) => import("react").JSX.Element>;
+declare const DescriptionStatistic: import("react").MemoExoticComponent<({ decimalSeparator, groupSeparator, prefix: Prefix, suffix: Suffix, precision, roundingMode, showTrailingZeros, size, trend, value, className }: DescriptionStatisticProps) => import("react").JSX.Element>;
 //#endregion
 //#region packages/components/features/descriptions/components/status.d.ts
 type StatusColor = NonNullable<BadgeProps['color']>;
@@ -137,7 +124,8 @@ declare const DescriptionUser: React.FC<DescriptionUserProps>;
  * </Description>
  */
 declare const DescriptionItem: React.FC<React.PropsWithChildren<{
-  /** Text displayed in the label column. */label: string;
+  /** Text displayed in the label column. */
+  label: string;
   /**
    * Number of grid columns (out of 12) allocated to the label in horizontal orientation.
    * @default 3
@@ -149,7 +137,8 @@ declare const DescriptionItem: React.FC<React.PropsWithChildren<{
    * - `'vertical'` — label sits above the value.
    * @default 'horizontal'
    */
-  orientation?: 'horizontal' | 'vertical'; /** Optional node rendered in the top-right corner of the label area (e.g. an edit action). */
+  orientation?: 'horizontal' | 'vertical';
+  /** Optional node rendered in the top-right corner of the label area (e.g. an edit action). */
   action?: React.ReactNode;
   /**
    * Horizontal alignment of the label text within its column.
@@ -168,9 +157,13 @@ declare const DescriptionItem: React.FC<React.PropsWithChildren<{
  * </Description>
  */
 declare const DescriptionHeader: React.FC<{
-  /** Primary heading text. */title: string; /** Optional secondary text rendered below the title in a smaller, muted style. */
-  description?: string; /** Optional node rendered on the right side of the header (e.g. action buttons). */
-  extra?: React.ReactNode; /** Additional CSS class names applied to the header wrapper. */
+  /** Primary heading text. */
+  title: string;
+  /** Optional secondary text rendered below the title in a smaller, muted style. */
+  description?: string;
+  /** Optional node rendered on the right side of the header (e.g. action buttons). */
+  extra?: React.ReactNode;
+  /** Additional CSS class names applied to the header wrapper. */
   className?: string;
 }>;
 /**
@@ -185,7 +178,9 @@ declare const DescriptionHeader: React.FC<{
  * </Description>
  */
 declare const DescriptionSection: React.FC<{
-  /** Optional section label rendered as uppercase small-caps text beside the divider line. */title?: string; /** Additional CSS class names applied to the section wrapper. */
+  /** Optional section label rendered as uppercase small-caps text beside the divider line. */
+  title?: string;
+  /** Additional CSS class names applied to the section wrapper. */
   className?: string;
 }>;
 /**
@@ -204,9 +199,13 @@ declare const DescriptionSection: React.FC<{
  * </Description>
  */
 declare const Description: React.FC<React.PropsWithChildren<{
-  /** Additional CSS class names applied to the root wrapper element. */className?: string; /** Strips the outer card shadow/ring and adapts sizing for embedding inside another Description. */
-  nested?: boolean; /** Replaces children with animated skeleton rows while data is loading. */
-  loading?: boolean; /** Number of skeleton rows shown when `loading` is true. @default 4 */
+  /** Additional CSS class names applied to the root wrapper element. */
+  className?: string;
+  /** Strips the outer card shadow/ring and adapts sizing for embedding inside another Description. */
+  nested?: boolean;
+  /** Replaces children with animated skeleton rows while data is loading. */
+  loading?: boolean;
+  /** Number of skeleton rows shown when `loading` is true. @default 4 */
   loadingRows?: number;
 }>>;
 /**
@@ -229,8 +228,9 @@ declare const Description: React.FC<React.PropsWithChildren<{
  * </DescriptionGroup>
  */
 declare const DescriptionGroup: React.FC<React.PropsWithChildren<{
-  /** Additional CSS class names applied to the group wrapper. */className?: string;
+  /** Additional CSS class names applied to the group wrapper. */
+  className?: string;
 }>>;
 //#endregion
 export { DescriptionDate as _, DescriptionSection as a, DescriptionBadge as b, DescriptionStatus as c, DescriptionNumberPhone as d, DescriptionName as f, DescriptionEmpty as g, DescriptionImages as h, DescriptionItem as i, DescriptionStatistic as l, DescriptionLink as m, DescriptionGroup as n, DescriptionUser as o, DescriptionLongText as p, DescriptionHeader as r, DescriptionTagList as s, Description as t, DescriptionStatisticProps as u, DescriptionCopy as v, DescriptionBoolean as y };
-//# sourceMappingURL=index-CS7oydGk.d.cts.map
+//# sourceMappingURL=index-BMuVmm7f.d.mts.map

package/dist/index-BOifmu0V.d.cts

@@ -0,0 +1,51 @@
+//#region packages/components/dialogs/detail-dialog/components/sidebar-panel.d.ts
+type DetailDialogSidebarPanelProps = {
+  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */
+  title?: string;
+  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */
+  sidebarTitle?: string;
+  /** Arbitrary content rendered inside the sidebar scrollable area. */
+  content?: React.ReactNode;
+  /** Arbitrary content rendered at the bottom of the sidebar footer. */
+  footer?: React.ReactNode;
+};
+//#endregion
+//#region packages/components/dialogs/detail-dialog/index.d.ts
+type DetailDialogProps = {
+  /** Controls whether the dialog is open. */
+  open?: boolean;
+  /** When `true`, replaces the main content area with a centered loading spinner. */
+  isLoading?: boolean;
+  /** Primary title displayed in the dialog header. */
+  title?: string;
+  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */
+  createdAt?: string | Date | number | null;
+  /** Optional sidebar configuration — title, body content, and footer content. */
+  sidebar?: DetailDialogSidebarPanelProps;
+  /** Custom content replacing the default title/date block in the header. Suspense-wrapped. */
+  headerComponent?: React.ReactNode;
+  /** Callback invoked when the dialog open state changes. */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Full-screen detail dialog with a collapsible sidebar, a header with creation date, and a scrollable content area.
+ *
+ * @example
+ * ```tsx
+ * import { DetailDialog } from '@customafk/lunas-ui/dialogs/detail-dialog';
+ *
+ * <DetailDialog
+ *   open={open}
+ *   title="Order #1234"
+ *   createdAt="2024-01-15T09:00:00Z"
+ *   sidebar={{ title: 'Navigation', content: <nav>...</nav> }}
+ *   onOpenChange={setOpen}
+ * >
+ *   <p>Detail content goes here.</p>
+ * </DetailDialog>
+ * ```
+ */
+declare const DetailDialog: React.FC<React.PropsWithChildren<DetailDialogProps>>;
+//#endregion
+export { DetailDialogProps as n, DetailDialog as t };
+//# sourceMappingURL=index-BOifmu0V.d.cts.map

package/dist/index-BOifmu0V.d.mts

@@ -0,0 +1,51 @@
+//#region packages/components/dialogs/detail-dialog/components/sidebar-panel.d.ts
+type DetailDialogSidebarPanelProps = {
+  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */
+  title?: string;
+  /** Title shown in the collapsible sidebar header. Defaults to `'Detail Dialog'`. */
+  sidebarTitle?: string;
+  /** Arbitrary content rendered inside the sidebar scrollable area. */
+  content?: React.ReactNode;
+  /** Arbitrary content rendered at the bottom of the sidebar footer. */
+  footer?: React.ReactNode;
+};
+//#endregion
+//#region packages/components/dialogs/detail-dialog/index.d.ts
+type DetailDialogProps = {
+  /** Controls whether the dialog is open. */
+  open?: boolean;
+  /** When `true`, replaces the main content area with a centered loading spinner. */
+  isLoading?: boolean;
+  /** Primary title displayed in the dialog header. */
+  title?: string;
+  /** ISO string, `Date` object, or Unix timestamp shown as a formatted creation date below the title. */
+  createdAt?: string | Date | number | null;
+  /** Optional sidebar configuration — title, body content, and footer content. */
+  sidebar?: DetailDialogSidebarPanelProps;
+  /** Custom content replacing the default title/date block in the header. Suspense-wrapped. */
+  headerComponent?: React.ReactNode;
+  /** Callback invoked when the dialog open state changes. */
+  onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Full-screen detail dialog with a collapsible sidebar, a header with creation date, and a scrollable content area.
+ *
+ * @example
+ * ```tsx
+ * import { DetailDialog } from '@customafk/lunas-ui/dialogs/detail-dialog';
+ *
+ * <DetailDialog
+ *   open={open}
+ *   title="Order #1234"
+ *   createdAt="2024-01-15T09:00:00Z"
+ *   sidebar={{ title: 'Navigation', content: <nav>...</nav> }}
+ *   onOpenChange={setOpen}
+ * >
+ *   <p>Detail content goes here.</p>
+ * </DetailDialog>
+ * ```
+ */
+declare const DetailDialog: React.FC<React.PropsWithChildren<DetailDialogProps>>;
+//#endregion
+export { DetailDialogProps as n, DetailDialog as t };
+//# sourceMappingURL=index-BOifmu0V.d.mts.map