@customafk/lunas-ui 0.2.37 → 0.2.38

package/dist/{flex-BAcvp4lB.mjs.map → flex-B6YSJzGe.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"flex-BAcvp4lB.mjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  /** Additional Tailwind classes merged on top of the variant-generated classes. */\n  className?: string;\n  /**\n   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.\n   * @default false\n   */\n  vertical?: boolean;\n  /**\n   * Controls the width of the flex container.\n   * - `'full'` — `w-full`\n   * - `'auto'` — `w-auto`\n   * - `'fit'`  — `w-fit` (default)\n   * - `'screen'` — `w-screen`\n   * - `'min'` — `w-min`\n   * - `'max'` — `w-max`\n   * - `'null'` — no width utility applied\n   * @default 'fit'\n   */\n  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';\n  /**\n   * Allows children to wrap onto multiple lines when `true`.\n   * @default true\n   */\n  wrap?: boolean;\n  /**\n   * Uniform margin applied to the container.\n   * - `'none'` — `m-0` (default)\n   * - `'sm'` — `m-2`\n   * - `'md'` — `m-4`\n   * - `'lg'` — `m-6`\n   * - `'xl'` — `m-8`\n   * @default 'none'\n   */\n  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Uniform padding applied to the container.\n   * - `'none'` — `p-0`\n   * - `'sm'`  — `p-2` (default)\n   * - `'md'`  — `p-4`\n   * - `'lg'`  — `p-6`\n   * - `'xl'`  — `p-8`\n   * @default 'sm'\n   */\n  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Gap between child elements.\n   * - `'none'` — `gap-0`\n   * - `'xs'`  — `gap-1` (default)\n   * - `'sm'`  — `gap-2`\n   * - `'md'`  — `gap-4`\n   * - `'lg'`  — `gap-6`\n   * - `'xl'`  — `gap-8`\n   * @default 'xs'\n   */\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Justification of children along the main axis (`justify-content`).\n   * @default 'start'\n   */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';\n  /**\n   * Alignment of children along the cross axis (`align-items`).\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';\n} & VariantProps<typeof flexVariants>;\n\n/**\n * A flexible, variant-driven flex container built on CVA and TailwindCSS.\n *\n * @example\n * ```tsx\n * import { Flex } from '@customafk/lunas-ui/layouts/flex';\n *\n * // Horizontal row with centered children and a medium gap\n * <Flex gap=\"md\" justify=\"between\" align=\"center\">\n *   <span>Left</span>\n *   <span>Right</span>\n * </Flex>\n *\n * // Vertical stack that fills parent width\n * <Flex vertical width=\"full\" gap=\"sm\" padding=\"md\">\n *   <p>First item</p>\n *   <p>Second item</p>\n * </Flex>\n * ```\n */\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"wKAOA,MAAM,EAAe,EAAI,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CA0FW,EAAO,GAAM,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,cAEhG,EAAC,MAAA,CACC,UAAW,EACT,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}
+{"version":3,"file":"flex-B6YSJzGe.mjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  /** Additional Tailwind classes merged on top of the variant-generated classes. */\n  className?: string;\n  /**\n   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.\n   * @default false\n   */\n  vertical?: boolean;\n  /**\n   * Controls the width of the flex container.\n   * - `'full'` — `w-full`\n   * - `'auto'` — `w-auto`\n   * - `'fit'`  — `w-fit` (default)\n   * - `'screen'` — `w-screen`\n   * - `'min'` — `w-min`\n   * - `'max'` — `w-max`\n   * - `'null'` — no width utility applied\n   * @default 'fit'\n   */\n  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';\n  /**\n   * Allows children to wrap onto multiple lines when `true`.\n   * @default true\n   */\n  wrap?: boolean;\n  /**\n   * Uniform margin applied to the container.\n   * - `'none'` — `m-0` (default)\n   * - `'sm'` — `m-2`\n   * - `'md'` — `m-4`\n   * - `'lg'` — `m-6`\n   * - `'xl'` — `m-8`\n   * @default 'none'\n   */\n  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Uniform padding applied to the container.\n   * - `'none'` — `p-0`\n   * - `'sm'`  — `p-2` (default)\n   * - `'md'`  — `p-4`\n   * - `'lg'`  — `p-6`\n   * - `'xl'`  — `p-8`\n   * @default 'sm'\n   */\n  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Gap between child elements.\n   * - `'none'` — `gap-0`\n   * - `'xs'`  — `gap-1` (default)\n   * - `'sm'`  — `gap-2`\n   * - `'md'`  — `gap-4`\n   * - `'lg'`  — `gap-6`\n   * - `'xl'`  — `gap-8`\n   * @default 'xs'\n   */\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Justification of children along the main axis (`justify-content`).\n   * @default 'start'\n   */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';\n  /**\n   * Alignment of children along the cross axis (`align-items`).\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';\n} & VariantProps<typeof flexVariants>;\n\n/**\n * A flexible, variant-driven flex container built on CVA and TailwindCSS.\n *\n * @example\n * ```tsx\n * import { Flex } from '@customafk/lunas-ui/layouts/flex';\n *\n * // Horizontal row with centered children and a medium gap\n * <Flex gap=\"md\" justify=\"between\" align=\"center\">\n *   <span>Left</span>\n *   <span>Right</span>\n * </Flex>\n *\n * // Vertical stack that fills parent width\n * <Flex vertical width=\"full\" gap=\"sm\" padding=\"md\">\n *   <p>First item</p>\n *   <p>Second item</p>\n * </Flex>\n * ```\n */\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"wKAOA,MAAM,EAAe,EAAI,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CA0FW,EAAO,GAAM,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,cAEhG,EAAC,MAAA,CACC,UAAW,EACT,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}

package/dist/{flex-DYh2t8ft.cjs → flex-DmWmOBn5.cjs}

@@ -1,2 +1,2 @@
-const e=require(`./chunk-Bmb41Sf3.cjs`);let t=require(`react`),n=require(`@customafk/react-toolkit/utils`),r=require(`class-variance-authority`),i=require(`react/jsx-runtime`);const a=(0,r.cva)([`relative flex`,`text-sm`],{variants:{vertical:{true:`flex-col`,false:`flex-row`},width:{full:`w-full`,auto:`w-auto`,fit:`w-fit`,screen:`w-screen`,min:`w-min`,max:`w-max`,null:``},wrap:{true:`flex-wrap`,false:`flex-nowrap`},margin:{sm:`m-2`,md:`m-4`,lg:`m-6`,xl:`m-8`,none:`m-0`},padding:{sm:`p-2`,md:`p-4`,lg:`p-6`,xl:`p-8`,none:`p-0`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`},justify:{start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`,stretch:`justify-stretch`},align:{start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`,stretch:`items-stretch`}},defaultVariants:{vertical:!1,wrap:!0,width:`fit`,margin:`none`,padding:`sm`,gap:`xs`,justify:`start`,align:`center`}}),o=(0,t.memo)(({vertical:e,wrap:t,width:r,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>(0,i.jsx)(`div`,{className:(0,n.cn)(a({vertical:e,width:r,wrap:t,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));o.displayName=`Flex`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
-//# sourceMappingURL=flex-DYh2t8ft.cjs.map
+const e=require(`./chunk-350yNsax.cjs`);let t=require(`react`),n=require(`@customafk/react-toolkit/utils`),r=require(`class-variance-authority`),i=require(`react/jsx-runtime`);const a=(0,r.cva)([`relative flex`,`text-sm`],{variants:{vertical:{true:`flex-col`,false:`flex-row`},width:{full:`w-full`,auto:`w-auto`,fit:`w-fit`,screen:`w-screen`,min:`w-min`,max:`w-max`,null:``},wrap:{true:`flex-wrap`,false:`flex-nowrap`},margin:{sm:`m-2`,md:`m-4`,lg:`m-6`,xl:`m-8`,none:`m-0`},padding:{sm:`p-2`,md:`p-4`,lg:`p-6`,xl:`p-8`,none:`p-0`},gap:{xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`},justify:{start:`justify-start`,center:`justify-center`,end:`justify-end`,between:`justify-between`,around:`justify-around`,evenly:`justify-evenly`,stretch:`justify-stretch`},align:{start:`items-start`,center:`items-center`,end:`items-end`,baseline:`items-baseline`,stretch:`items-stretch`}},defaultVariants:{vertical:!1,wrap:!0,width:`fit`,margin:`none`,padding:`sm`,gap:`xs`,justify:`start`,align:`center`}}),o=(0,t.memo)(({vertical:e,wrap:t,width:r,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>(0,i.jsx)(`div`,{className:(0,n.cn)(a({vertical:e,width:r,wrap:t,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));o.displayName=`Flex`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+//# sourceMappingURL=flex-DmWmOBn5.cjs.map

package/dist/{flex-DYh2t8ft.cjs.map → flex-DmWmOBn5.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"flex-DYh2t8ft.cjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  /** Additional Tailwind classes merged on top of the variant-generated classes. */\n  className?: string;\n  /**\n   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.\n   * @default false\n   */\n  vertical?: boolean;\n  /**\n   * Controls the width of the flex container.\n   * - `'full'` — `w-full`\n   * - `'auto'` — `w-auto`\n   * - `'fit'`  — `w-fit` (default)\n   * - `'screen'` — `w-screen`\n   * - `'min'` — `w-min`\n   * - `'max'` — `w-max`\n   * - `'null'` — no width utility applied\n   * @default 'fit'\n   */\n  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';\n  /**\n   * Allows children to wrap onto multiple lines when `true`.\n   * @default true\n   */\n  wrap?: boolean;\n  /**\n   * Uniform margin applied to the container.\n   * - `'none'` — `m-0` (default)\n   * - `'sm'` — `m-2`\n   * - `'md'` — `m-4`\n   * - `'lg'` — `m-6`\n   * - `'xl'` — `m-8`\n   * @default 'none'\n   */\n  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Uniform padding applied to the container.\n   * - `'none'` — `p-0`\n   * - `'sm'`  — `p-2` (default)\n   * - `'md'`  — `p-4`\n   * - `'lg'`  — `p-6`\n   * - `'xl'`  — `p-8`\n   * @default 'sm'\n   */\n  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Gap between child elements.\n   * - `'none'` — `gap-0`\n   * - `'xs'`  — `gap-1` (default)\n   * - `'sm'`  — `gap-2`\n   * - `'md'`  — `gap-4`\n   * - `'lg'`  — `gap-6`\n   * - `'xl'`  — `gap-8`\n   * @default 'xs'\n   */\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Justification of children along the main axis (`justify-content`).\n   * @default 'start'\n   */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';\n  /**\n   * Alignment of children along the cross axis (`align-items`).\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';\n} & VariantProps<typeof flexVariants>;\n\n/**\n * A flexible, variant-driven flex container built on CVA and TailwindCSS.\n *\n * @example\n * ```tsx\n * import { Flex } from '@customafk/lunas-ui/layouts/flex';\n *\n * // Horizontal row with centered children and a medium gap\n * <Flex gap=\"md\" justify=\"between\" align=\"center\">\n *   <span>Left</span>\n *   <span>Right</span>\n * </Flex>\n *\n * // Vertical stack that fills parent width\n * <Flex vertical width=\"full\" gap=\"sm\" padding=\"md\">\n *   <p>First item</p>\n *   <p>Second item</p>\n * </Flex>\n * ```\n */\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"gLAOA,MAAM,GAAA,EAAA,EAAA,KAAmB,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CA0FW,GAAA,EAAA,EAAA,OAAa,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,eAEhG,EAAA,EAAA,KAAC,MAAA,CACC,WAAA,EAAA,EAAA,IACE,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}
+{"version":3,"file":"flex-DmWmOBn5.cjs","names":[],"sources":["../packages/components/layouts/flex.tsx"],"sourcesContent":["'use client';\nimport { memo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst flexVariants = cva(['relative flex', 'text-sm'], {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    width: {\n      full: 'w-full',\n      auto: 'w-auto',\n      fit: 'w-fit',\n      screen: 'w-screen',\n      min: 'w-min',\n      max: 'w-max',\n      null: '',\n    },\n    wrap: {\n      true: 'flex-wrap',\n      false: 'flex-nowrap',\n    },\n    margin: {\n      sm: 'm-2',\n      md: 'm-4',\n      lg: 'm-6',\n      xl: 'm-8',\n      none: 'm-0',\n    },\n    padding: {\n      sm: 'p-2',\n      md: 'p-4',\n      lg: 'p-6',\n      xl: 'p-8',\n      none: 'p-0',\n    },\n    gap: {\n      xs: 'gap-1',\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n      xl: 'gap-8',\n      none: 'gap-0',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n      evenly: 'justify-evenly',\n      stretch: 'justify-stretch',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    wrap: true,\n    width: 'fit',\n    margin: 'none',\n    padding: 'sm',\n    gap: 'xs',\n    justify: 'start',\n    align: 'center',\n  },\n});\n\ntype Props = {\n  /** Additional Tailwind classes merged on top of the variant-generated classes. */\n  className?: string;\n  /**\n   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.\n   * @default false\n   */\n  vertical?: boolean;\n  /**\n   * Controls the width of the flex container.\n   * - `'full'` — `w-full`\n   * - `'auto'` — `w-auto`\n   * - `'fit'`  — `w-fit` (default)\n   * - `'screen'` — `w-screen`\n   * - `'min'` — `w-min`\n   * - `'max'` — `w-max`\n   * - `'null'` — no width utility applied\n   * @default 'fit'\n   */\n  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';\n  /**\n   * Allows children to wrap onto multiple lines when `true`.\n   * @default true\n   */\n  wrap?: boolean;\n  /**\n   * Uniform margin applied to the container.\n   * - `'none'` — `m-0` (default)\n   * - `'sm'` — `m-2`\n   * - `'md'` — `m-4`\n   * - `'lg'` — `m-6`\n   * - `'xl'` — `m-8`\n   * @default 'none'\n   */\n  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Uniform padding applied to the container.\n   * - `'none'` — `p-0`\n   * - `'sm'`  — `p-2` (default)\n   * - `'md'`  — `p-4`\n   * - `'lg'`  — `p-6`\n   * - `'xl'`  — `p-8`\n   * @default 'sm'\n   */\n  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Gap between child elements.\n   * - `'none'` — `gap-0`\n   * - `'xs'`  — `gap-1` (default)\n   * - `'sm'`  — `gap-2`\n   * - `'md'`  — `gap-4`\n   * - `'lg'`  — `gap-6`\n   * - `'xl'`  — `gap-8`\n   * @default 'xs'\n   */\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';\n  /**\n   * Justification of children along the main axis (`justify-content`).\n   * @default 'start'\n   */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';\n  /**\n   * Alignment of children along the cross axis (`align-items`).\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';\n} & VariantProps<typeof flexVariants>;\n\n/**\n * A flexible, variant-driven flex container built on CVA and TailwindCSS.\n *\n * @example\n * ```tsx\n * import { Flex } from '@customafk/lunas-ui/layouts/flex';\n *\n * // Horizontal row with centered children and a medium gap\n * <Flex gap=\"md\" justify=\"between\" align=\"center\">\n *   <span>Left</span>\n *   <span>Right</span>\n * </Flex>\n *\n * // Vertical stack that fills parent width\n * <Flex vertical width=\"full\" gap=\"sm\" padding=\"md\">\n *   <p>First item</p>\n *   <p>Second item</p>\n * </Flex>\n * ```\n */\nexport const Flex = memo(({ vertical, wrap, width, margin, padding, gap, justify, align, className, children }: React.PropsWithChildren<Props>) => {\n  return (\n    <div\n      className={cn(\n        flexVariants({\n          vertical,\n          width,\n          wrap,\n          margin,\n          padding,\n          gap,\n          justify,\n          align,\n          className,\n        })\n      )}\n    >\n      {children}\n    </div>\n  );\n});\nFlex.displayName = 'Flex';\n"],"mappings":"gLAOA,MAAM,GAAA,EAAA,EAAA,KAAmB,CAAC,gBAAiB,UAAU,CAAE,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,WACR,CACD,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,GACP,CACD,KAAM,CACJ,KAAM,YACN,MAAO,cACR,CACD,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,MACP,CACD,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACP,CACD,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,kBACV,CACD,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,gBACV,CACF,CACD,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,SACR,CACF,CAAC,CA0FW,GAAA,EAAA,EAAA,OAAa,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,eAEhG,EAAA,EAAA,KAAC,MAAA,CACC,WAAA,EAAA,EAAA,IACE,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,YACD,CAAC,CACH,CAEA,YACG,CAER,CACF,EAAK,YAAc"}

package/dist/{heading-woRh-IC7.mjs → heading-De4Pn3mZ.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-start text-balance text-text-positive-strong tracking-tight transition-colors`,{variants:{level:{h1:`text-3xl leading-tight font-bold md:text-4xl`,h2:`text-2xl leading-tight font-semibold md:text-3xl`,h3:`text-xl leading-snug font-semibold md:text-2xl`,h4:`text-lg leading-snug font-semibold md:text-xl`,h5:`text-base leading-normal font-semibold md:text-lg`}},defaultVariants:{level:`h2`}});export{r as t};
-//# sourceMappingURL=heading-woRh-IC7.mjs.map
+//# sourceMappingURL=heading-De4Pn3mZ.mjs.map

package/dist/{heading-woRh-IC7.mjs.map → heading-De4Pn3mZ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"heading-woRh-IC7.mjs","names":[],"sources":["../packages/components/typography/heading.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { cva } from 'class-variance-authority';\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n\nexport type HeadingProps = {\n  level?: HeadingLevel;\n  className?: string;\n  children?: ReactNode;\n  as?: ElementType;\n};\n\nexport const headingVariants = cva('scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors', {\n  variants: {\n    level: {\n      h1: 'text-3xl leading-tight font-bold md:text-4xl',\n      h2: 'text-2xl leading-tight font-semibold md:text-3xl',\n      h3: 'text-xl leading-snug font-semibold md:text-2xl',\n      h4: 'text-lg leading-snug font-semibold md:text-xl',\n      h5: 'text-base leading-normal font-semibold md:text-lg',\n    },\n  },\n  defaultVariants: {\n    level: 'h2',\n  },\n});\n\nexport const Heading = ({ level = 'h3', className, as, children }: HeadingProps) => {\n  const Component = as || level;\n\n  return (\n    <Component data-slot=\"heading\" className={cn(headingVariants({ level }), className)}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"2IAeA,MAAa,EAAkB,EAAI,iGAAkG,CACnI,SAAU,CACR,MAAO,CACL,GAAI,+CACJ,GAAI,mDACJ,GAAI,iDACJ,GAAI,gDACJ,GAAI,oDACL,CACF,CACD,gBAAiB,CACf,MAAO,KACR,CACF,CAAC"}
+{"version":3,"file":"heading-De4Pn3mZ.mjs","names":[],"sources":["../packages/components/typography/heading.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { cva } from 'class-variance-authority';\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n\nexport type HeadingProps = {\n  level?: HeadingLevel;\n  className?: string;\n  children?: ReactNode;\n  as?: ElementType;\n};\n\nexport const headingVariants = cva('scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors', {\n  variants: {\n    level: {\n      h1: 'text-3xl leading-tight font-bold md:text-4xl',\n      h2: 'text-2xl leading-tight font-semibold md:text-3xl',\n      h3: 'text-xl leading-snug font-semibold md:text-2xl',\n      h4: 'text-lg leading-snug font-semibold md:text-xl',\n      h5: 'text-base leading-normal font-semibold md:text-lg',\n    },\n  },\n  defaultVariants: {\n    level: 'h2',\n  },\n});\n\nexport const Heading = ({ level = 'h3', className, as, children }: HeadingProps) => {\n  const Component = as || level;\n\n  return (\n    <Component data-slot=\"heading\" className={cn(headingVariants({ level }), className)}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"2IAeA,MAAa,EAAkB,EAAI,iGAAkG,CACnI,SAAU,CACR,MAAO,CACL,GAAI,+CACJ,GAAI,mDACJ,GAAI,iDACJ,GAAI,gDACJ,GAAI,oDACL,CACF,CACD,gBAAiB,CACf,MAAO,KACR,CACF,CAAC"}

package/dist/{heading-wUXEbicM.cjs → heading-tGTqk3pA.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-start text-balance text-text-positive-strong tracking-tight transition-colors`,{variants:{level:{h1:`text-3xl leading-tight font-bold md:text-4xl`,h2:`text-2xl leading-tight font-semibold md:text-3xl`,h3:`text-xl leading-snug font-semibold md:text-2xl`,h4:`text-lg leading-snug font-semibold md:text-xl`,h5:`text-base leading-normal font-semibold md:text-lg`}},defaultVariants:{level:`h2`}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
-//# sourceMappingURL=heading-wUXEbicM.cjs.map
+const e=require(`./chunk-350yNsax.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-start text-balance text-text-positive-strong tracking-tight transition-colors`,{variants:{level:{h1:`text-3xl leading-tight font-bold md:text-4xl`,h2:`text-2xl leading-tight font-semibold md:text-3xl`,h3:`text-xl leading-snug font-semibold md:text-2xl`,h4:`text-lg leading-snug font-semibold md:text-xl`,h5:`text-base leading-normal font-semibold md:text-lg`}},defaultVariants:{level:`h2`}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
+//# sourceMappingURL=heading-tGTqk3pA.cjs.map

package/dist/{heading-wUXEbicM.cjs.map → heading-tGTqk3pA.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"heading-wUXEbicM.cjs","names":[],"sources":["../packages/components/typography/heading.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { cva } from 'class-variance-authority';\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n\nexport type HeadingProps = {\n  level?: HeadingLevel;\n  className?: string;\n  children?: ReactNode;\n  as?: ElementType;\n};\n\nexport const headingVariants = cva('scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors', {\n  variants: {\n    level: {\n      h1: 'text-3xl leading-tight font-bold md:text-4xl',\n      h2: 'text-2xl leading-tight font-semibold md:text-3xl',\n      h3: 'text-xl leading-snug font-semibold md:text-2xl',\n      h4: 'text-lg leading-snug font-semibold md:text-xl',\n      h5: 'text-base leading-normal font-semibold md:text-lg',\n    },\n  },\n  defaultVariants: {\n    level: 'h2',\n  },\n});\n\nexport const Heading = ({ level = 'h3', className, as, children }: HeadingProps) => {\n  const Component = as || level;\n\n  return (\n    <Component data-slot=\"heading\" className={cn(headingVariants({ level }), className)}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"6JAeA,MAAa,GAAA,EAAA,EAAA,KAAsB,iGAAkG,CACnI,SAAU,CACR,MAAO,CACL,GAAI,+CACJ,GAAI,mDACJ,GAAI,iDACJ,GAAI,gDACJ,GAAI,oDACL,CACF,CACD,gBAAiB,CACf,MAAO,KACR,CACF,CAAC"}
+{"version":3,"file":"heading-tGTqk3pA.cjs","names":[],"sources":["../packages/components/typography/heading.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { cva } from 'class-variance-authority';\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n\nexport type HeadingProps = {\n  level?: HeadingLevel;\n  className?: string;\n  children?: ReactNode;\n  as?: ElementType;\n};\n\nexport const headingVariants = cva('scroll-m-20 text-start text-balance text-text-positive-strong tracking-tight transition-colors', {\n  variants: {\n    level: {\n      h1: 'text-3xl leading-tight font-bold md:text-4xl',\n      h2: 'text-2xl leading-tight font-semibold md:text-3xl',\n      h3: 'text-xl leading-snug font-semibold md:text-2xl',\n      h4: 'text-lg leading-snug font-semibold md:text-xl',\n      h5: 'text-base leading-normal font-semibold md:text-lg',\n    },\n  },\n  defaultVariants: {\n    level: 'h2',\n  },\n});\n\nexport const Heading = ({ level = 'h3', className, as, children }: HeadingProps) => {\n  const Component = as || level;\n\n  return (\n    <Component data-slot=\"heading\" className={cn(headingVariants({ level }), className)}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"6JAeA,MAAa,GAAA,EAAA,EAAA,KAAsB,iGAAkG,CACnI,SAAU,CACR,MAAO,CACL,GAAI,+CACJ,GAAI,mDACJ,GAAI,iDACJ,GAAI,gDACJ,GAAI,oDACL,CACF,CACD,gBAAiB,CACf,MAAO,KACR,CACF,CAAC"}

package/dist/image-D7OZ13Ib.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"./skeleton-C51IdOfK.mjs";import{AlertCircleIcon as t}from"lucide-react";import{useCallback as n,useRef as r,useState as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({src:c,alt:l,width:u,height:d,maxRetries:f=3,retryDelay:p=500,className:m,imageClassName:h,onClick:g})=>{let _=r(null),[v,y]=i(c),[b,x]=i(0),[S,C]=i(!1),[w,T]=i(!1),E=n(()=>{C(!0)},[]),D=n(()=>{if(b<f){T(!1);let e=b+1;x(e),setTimeout(()=>{y(c+`?retry=${Date.now()}&attempt=${e}`)},p*e);return}T(!0),C(!0),y(c)},[f,b,p,c]);return w?o(`div`,{style:{width:u,height:d},className:a(`@container relative inline-block`,m),children:s(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card`,children:[o(t,{className:`@max-[52px]:size-6 size-8 text-danger`}),o(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):s(`div`,{style:{width:u,height:d},className:a(`relative flex items-center justify-center overflow-hidden rounded`,m),onClick:g,children:[!S&&o(e,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),o(`img`,{src:v,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),o(`img`,{id:v,ref:_,src:v,alt:l,loading:`lazy`,className:a(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,S&&`opacity-100`,!S&&`pointer-events-none opacity-0`,h),onLoad:E,onError:D})]})};export{c as t};
+//# sourceMappingURL=image-D7OZ13Ib.mjs.map

package/dist/{image-D2U1SBw5.mjs.map → image-D7OZ13Ib.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"image-D2U1SBw5.mjs","names":["Image: React.FC<Props>"],"sources":["../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. */\ntype Props = {\n  /** URL of the image to display. */\n  src?: string;\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /** Width of the image container (number treated as pixels). */\n  width?: number | string;\n  /** Height of the image container (number treated as pixels). */\n  height?: number | string;\n  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */\n  maxRetries?: number;\n  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */\n  retryDelay?: number;\n  /** Class name applied to the outer container div. */\n  className?: string;\n  /** Class name applied to the `<img>` element. */\n  imageClassName?: string;\n  /** Click handler for the image container. */\n  onClick?: () => void;\n};\n\n/**\n * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n *\n * @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n *\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n */\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded-md bg-danger-muted shadow-card\">\n          <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n          <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded-md', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"+PAwCA,MAAaA,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,EAAW,EAAyB,KAAK,CACzC,CAAC,EAAY,GAAiB,EAA6B,EAAI,CAC/D,CAAC,EAAY,GAAiB,EAAiB,EAAE,CACjD,CAAC,EAAU,GAAe,EAAkB,GAAM,CAClD,CAAC,EAAU,GAAe,EAAkB,GAAM,CAElD,EAAa,MAAkB,CACnC,EAAY,GAAK,EAChB,EAAE,CAAC,CAEA,EAAc,MAAkB,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,GAAM,CAClB,IAAM,EAAgB,EAAa,EACnC,EAAc,EAAc,CAG5B,eAAiB,CAEf,EAAc,EADM,UAAU,KAAK,KAAK,CAAC,WAAW,IACpB,EAC/B,EAAa,EAAc,CAC9B,OAGF,EAAY,GAAK,CACjB,EAAY,GAAK,CACjB,EAAc,EAAI,EACjB,CAAC,EAAY,EAAY,EAAY,EAAI,CAAC,CAa7C,OAXI,EAEA,EAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,UAAW,EAAG,mCAAoC,EAAU,UACzF,EAAC,MAAA,CAAI,UAAU,+GACb,EAAC,EAAA,CAAgB,UAAU,wCAAA,CAA0C,CACrE,EAAC,OAAA,CAAK,UAAU,oEAA2D,wBAA2B,CAAA,EAClG,EACF,CAKR,EAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,UAAW,EAAG,uEAAwE,EAAU,CAAW,oBACvI,CAAC,GAAY,EAAC,EAAA,CAAS,UAAU,4EAAA,CAA8E,CAChH,EAAC,MAAA,CAAI,IAAK,EAAY,UAAU,+EAAgF,CAChH,EAAC,MAAA,CACC,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,UAAW,EACT,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,EACD,CACD,OAAQ,EACR,QAAS,GACT,GACE"}
+{"version":3,"file":"image-D7OZ13Ib.mjs","names":["Image: React.FC<Props>"],"sources":["../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. */\ntype Props = {\n  /** URL of the image to display. */\n  src?: string;\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /** Width of the image container (number treated as pixels). */\n  width?: number | string;\n  /** Height of the image container (number treated as pixels). */\n  height?: number | string;\n  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */\n  maxRetries?: number;\n  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */\n  retryDelay?: number;\n  /** Class name applied to the outer container div. */\n  className?: string;\n  /** Class name applied to the `<img>` element. */\n  imageClassName?: string;\n  /** Click handler for the image container. */\n  onClick?: () => void;\n};\n\n/**\n * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n *\n * @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n *\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n */\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card\">\n          <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n          <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"+PAwCA,MAAaA,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,EAAW,EAAyB,KAAK,CACzC,CAAC,EAAY,GAAiB,EAA6B,EAAI,CAC/D,CAAC,EAAY,GAAiB,EAAiB,EAAE,CACjD,CAAC,EAAU,GAAe,EAAkB,GAAM,CAClD,CAAC,EAAU,GAAe,EAAkB,GAAM,CAElD,EAAa,MAAkB,CACnC,EAAY,GAAK,EAChB,EAAE,CAAC,CAEA,EAAc,MAAkB,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,GAAM,CAClB,IAAM,EAAgB,EAAa,EACnC,EAAc,EAAc,CAG5B,eAAiB,CAEf,EAAc,EADM,UAAU,KAAK,KAAK,CAAC,WAAW,IACpB,EAC/B,EAAa,EAAc,CAC9B,OAGF,EAAY,GAAK,CACjB,EAAY,GAAK,CACjB,EAAc,EAAI,EACjB,CAAC,EAAY,EAAY,EAAY,EAAI,CAAC,CAa7C,OAXI,EAEA,EAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,UAAW,EAAG,mCAAoC,EAAU,UACzF,EAAC,MAAA,CAAI,UAAU,4GACb,EAAC,EAAA,CAAgB,UAAU,wCAAA,CAA0C,CACrE,EAAC,OAAA,CAAK,UAAU,oEAA2D,wBAA2B,CAAA,EAClG,EACF,CAKR,EAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,UAAW,EAAG,oEAAqE,EAAU,CAAW,oBACpI,CAAC,GAAY,EAAC,EAAA,CAAS,UAAU,4EAAA,CAA8E,CAChH,EAAC,MAAA,CAAI,IAAK,EAAY,UAAU,+EAAgF,CAChH,EAAC,MAAA,CACC,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,UAAW,EACT,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,EACD,CACD,OAAQ,EACR,QAAS,GACT,GACE"}

package/dist/image-W_Yb0xTB.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-350yNsax.cjs`),t=require(`./skeleton-CX1USu1w.cjs`);let n=require(`lucide-react`),r=require(`react`),i=require(`@customafk/react-toolkit/utils`),a=require(`react/jsx-runtime`);const o=({src:e,alt:o,width:s,height:c,maxRetries:l=3,retryDelay:u=500,className:d,imageClassName:f,onClick:p})=>{let m=(0,r.useRef)(null),[h,g]=(0,r.useState)(e),[_,v]=(0,r.useState)(0),[y,b]=(0,r.useState)(!1),[x,S]=(0,r.useState)(!1),C=(0,r.useCallback)(()=>{b(!0)},[]),w=(0,r.useCallback)(()=>{if(_<l){S(!1);let t=_+1;v(t),setTimeout(()=>{g(e+`?retry=${Date.now()}&attempt=${t}`)},u*t);return}S(!0),b(!0),g(e)},[l,_,u,e]);return x?(0,a.jsx)(`div`,{style:{width:s,height:c},className:(0,i.cn)(`@container relative inline-block`,d),children:(0,a.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card`,children:[(0,a.jsx)(n.AlertCircleIcon,{className:`@max-[52px]:size-6 size-8 text-danger`}),(0,a.jsx)(`span`,{className:`@max-[96px]:sr-only text-center text-danger-weak text-xs`,children:`Image failed to load`})]})}):(0,a.jsxs)(`div`,{style:{width:s,height:c},className:(0,i.cn)(`relative flex items-center justify-center overflow-hidden rounded`,d),onClick:p,children:[!y&&(0,a.jsx)(t.t,{className:`absolute inset-0 flex size-full animate-pulse items-center justify-center`}),(0,a.jsx)(`img`,{src:h,className:`absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60`}),(0,a.jsx)(`img`,{id:h,ref:m,src:h,alt:o,loading:`lazy`,className:(0,i.cn)(`relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300`,y&&`opacity-100`,!y&&`pointer-events-none opacity-0`,f),onLoad:C,onError:w})]})};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+//# sourceMappingURL=image-W_Yb0xTB.cjs.map

package/dist/{image-Y7gCz7uE.cjs.map → image-W_Yb0xTB.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"image-Y7gCz7uE.cjs","names":["Image: React.FC<Props>","AlertCircleIcon","Skeleton"],"sources":["../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. */\ntype Props = {\n  /** URL of the image to display. */\n  src?: string;\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /** Width of the image container (number treated as pixels). */\n  width?: number | string;\n  /** Height of the image container (number treated as pixels). */\n  height?: number | string;\n  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */\n  maxRetries?: number;\n  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */\n  retryDelay?: number;\n  /** Class name applied to the outer container div. */\n  className?: string;\n  /** Class name applied to the `<img>` element. */\n  imageClassName?: string;\n  /** Click handler for the image container. */\n  onClick?: () => void;\n};\n\n/**\n * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n *\n * @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n *\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n */\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded-md bg-danger-muted shadow-card\">\n          <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n          <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded-md', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"yMAwCA,MAAaA,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,CAAC,EAAY,IAAA,EAAA,EAAA,UAA8C,EAAI,CAC/D,CAAC,EAAY,IAAA,EAAA,EAAA,UAAkC,EAAE,CACjD,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,GAAM,CAClD,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,GAAM,CAElD,GAAA,EAAA,EAAA,iBAA+B,CACnC,EAAY,GAAK,EAChB,EAAE,CAAC,CAEA,GAAA,EAAA,EAAA,iBAAgC,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,GAAM,CAClB,IAAM,EAAgB,EAAa,EACnC,EAAc,EAAc,CAG5B,eAAiB,CAEf,EAAc,EADM,UAAU,KAAK,KAAK,CAAC,WAAW,IACpB,EAC/B,EAAa,EAAc,CAC9B,OAGF,EAAY,GAAK,CACjB,EAAY,GAAK,CACjB,EAAc,EAAI,EACjB,CAAC,EAAY,EAAY,EAAY,EAAI,CAAC,CAa7C,OAXI,GAEA,EAAA,EAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,WAAA,EAAA,EAAA,IAAc,mCAAoC,EAAU,WACzF,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,gHACb,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,UAAU,wCAAA,CAA0C,EACrE,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,oEAA2D,wBAA2B,CAAA,EAClG,EACF,EAKR,EAAA,EAAA,MAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,WAAA,EAAA,EAAA,IAAc,uEAAwE,EAAU,CAAW,oBACvI,CAAC,IAAY,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAS,UAAU,4EAAA,CAA8E,EAChH,EAAA,EAAA,KAAC,MAAA,CAAI,IAAK,EAAY,UAAU,+EAAgF,EAChH,EAAA,EAAA,KAAC,MAAA,CACC,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,WAAA,EAAA,EAAA,IACE,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,EACD,CACD,OAAQ,EACR,QAAS,GACT,GACE"}
+{"version":3,"file":"image-W_Yb0xTB.cjs","names":["Image: React.FC<Props>","AlertCircleIcon","Skeleton"],"sources":["../packages/components/ui/image.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { AlertCircleIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Skeleton } from './skeleton';\n\n/** Props for the Image component. */\ntype Props = {\n  /** URL of the image to display. */\n  src?: string;\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /** Width of the image container (number treated as pixels). */\n  width?: number | string;\n  /** Height of the image container (number treated as pixels). */\n  height?: number | string;\n  /** Maximum number of retry attempts on load failure before showing an error state. @default 3 */\n  maxRetries?: number;\n  /** Base delay in milliseconds between retry attempts (multiplied by the attempt count). @default 500 */\n  retryDelay?: number;\n  /** Class name applied to the outer container div. */\n  className?: string;\n  /** Class name applied to the `<img>` element. */\n  imageClassName?: string;\n  /** Click handler for the image container. */\n  onClick?: () => void;\n};\n\n/**\n * A lazy-loading image with an automatic retry mechanism, a blurred background placeholder, a skeleton loader, and an error fallback.\n *\n * @example\n * ```tsx\n * import { Image } from '@customafk/lunas-ui/ui/image';\n *\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={400} height={300} maxRetries={3} />\n * ```\n */\nexport const Image: React.FC<Props> = ({ src, alt, width, height, maxRetries = 3, retryDelay = 500, className, imageClassName, onClick }) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);\n  const [retryCount, setRetryCount] = useState<number>(0);\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n  const [hasError, setHasError] = useState<boolean>(false);\n\n  const handleLoad = useCallback(() => {\n    setIsLoaded(true);\n  }, []);\n\n  const handleError = useCallback(() => {\n    if (retryCount < maxRetries) {\n      // imageRef.current?.style.setProperty('display', 'none')\n      setHasError(false);\n      const newRetryCount = retryCount + 1;\n      setRetryCount(newRetryCount);\n\n      // Retry with exponential backoff and cache busting\n      setTimeout(() => {\n        const cacheBuster = `?retry=${Date.now()}&attempt=${newRetryCount}`;\n        setCurrentSrc(src + cacheBuster);\n      }, retryDelay * newRetryCount);\n      return;\n    }\n\n    setHasError(true);\n    setIsLoaded(true);\n    setCurrentSrc(src);\n  }, [maxRetries, retryCount, retryDelay, src]);\n\n  if (hasError) {\n    return (\n      <div style={{ width, height }} className={cn('@container relative inline-block', className)}>\n        <div className=\"flex size-full flex-col items-center justify-center gap-y-2 rounded bg-danger-muted shadow-card\">\n          <AlertCircleIcon className=\"@max-[52px]:size-6 size-8 text-danger\" />\n          <span className=\"@max-[96px]:sr-only text-center text-danger-weak text-xs\">Image failed to load</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ width, height }} className={cn('relative flex items-center justify-center overflow-hidden rounded', className)} onClick={onClick}>\n      {!isLoaded && <Skeleton className=\"absolute inset-0 flex size-full animate-pulse items-center justify-center\" />}\n      <img src={currentSrc} className=\"absolute inset-0 z-0 size-full scale-110 object-cover blur-xl brightness-60\" />\n      <img\n        id={currentSrc}\n        ref={imageRef}\n        src={currentSrc}\n        alt={alt}\n        loading=\"lazy\"\n        className={cn(\n          'relative h-6/5 w-auto object-cover shadow-card transition-opacity duration-300',\n          isLoaded && 'opacity-100',\n          !isLoaded && 'pointer-events-none opacity-0',\n          imageClassName\n        )}\n        onLoad={handleLoad}\n        onError={handleError}\n      />\n    </div>\n  );\n};\n"],"mappings":"yMAwCA,MAAaA,GAA0B,CAAE,MAAK,MAAK,QAAO,SAAQ,aAAa,EAAG,aAAa,IAAK,YAAW,iBAAgB,aAAc,CAC3I,IAAM,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,CAAC,EAAY,IAAA,EAAA,EAAA,UAA8C,EAAI,CAC/D,CAAC,EAAY,IAAA,EAAA,EAAA,UAAkC,EAAE,CACjD,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,GAAM,CAClD,CAAC,EAAU,IAAA,EAAA,EAAA,UAAiC,GAAM,CAElD,GAAA,EAAA,EAAA,iBAA+B,CACnC,EAAY,GAAK,EAChB,EAAE,CAAC,CAEA,GAAA,EAAA,EAAA,iBAAgC,CACpC,GAAI,EAAa,EAAY,CAE3B,EAAY,GAAM,CAClB,IAAM,EAAgB,EAAa,EACnC,EAAc,EAAc,CAG5B,eAAiB,CAEf,EAAc,EADM,UAAU,KAAK,KAAK,CAAC,WAAW,IACpB,EAC/B,EAAa,EAAc,CAC9B,OAGF,EAAY,GAAK,CACjB,EAAY,GAAK,CACjB,EAAc,EAAI,EACjB,CAAC,EAAY,EAAY,EAAY,EAAI,CAAC,CAa7C,OAXI,GAEA,EAAA,EAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,WAAA,EAAA,EAAA,IAAc,mCAAoC,EAAU,WACzF,EAAA,EAAA,MAAC,MAAA,CAAI,UAAU,6GACb,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,UAAU,wCAAA,CAA0C,EACrE,EAAA,EAAA,KAAC,OAAA,CAAK,UAAU,oEAA2D,wBAA2B,CAAA,EAClG,EACF,EAKR,EAAA,EAAA,MAAC,MAAA,CAAI,MAAO,CAAE,QAAO,SAAQ,CAAE,WAAA,EAAA,EAAA,IAAc,oEAAqE,EAAU,CAAW,oBACpI,CAAC,IAAY,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAS,UAAU,4EAAA,CAA8E,EAChH,EAAA,EAAA,KAAC,MAAA,CAAI,IAAK,EAAY,UAAU,+EAAgF,EAChH,EAAA,EAAA,KAAC,MAAA,CACC,GAAI,EACJ,IAAK,EACL,IAAK,EACA,MACL,QAAQ,OACR,WAAA,EAAA,EAAA,IACE,iFACA,GAAY,cACZ,CAAC,GAAY,gCACb,EACD,CACD,OAAQ,EACR,QAAS,GACT,GACE"}

package/dist/{index-C6nrbQ-E.d.cts → index-9eog5ilY.d.cts}

@@ -1,11 +1,33 @@
 import { t as AnyEntity } from "./types-Cc_mLRAn.cjs";
-import { t as Input } from "./input-BAr0l-oA.cjs";
+import { t as Input } from "./input-DvkEND5a.cjs";
 import * as react642 from "react";
 import { AccessorKeyColumnDef, CellContext, Column, ColumnPinningPosition, ColumnPinningState, Header, HeaderGroup, Row, RowSelectionState, Table } from "@tanstack/react-table";
 import { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 
+//#region packages/components/features/tables/components/atoms/avatar-name-display.d.ts
+/** Props for the {@link UITableAvatarNameDisplay} component. */
+type Props$8 = {
+  /** Display name shown beside the avatar. */
+  name: string;
+  /** Optional image URL for the avatar. Falls back to a color-hashed icon when absent. */
+  avatarUrl?: string;
+  /** Seed for deterministic avatar background color generation. Defaults to `name`. */
+  uuid?: string;
+};
+/**
+ * Renders a circular avatar paired with a name in a compact horizontal row.
+ * When no `avatarUrl` is provided the fallback uses a deterministic background
+ * color derived from `uuid` (or `name`) via `colorHashLight`, matching the
+ * style of `UserDataDisplay`.
+ *
+ * @example
+ * import { UITableAvatarNameDisplay } from '@customafk/lunas-ui/features/tables';
+ *
+ * <UITableAvatarNameDisplay name="Jane Smith" uuid="user-42" avatarUrl="/avatars/jane.png" />
+ */
+declare const UITableAvatarNameDisplay: React.FC<Props$8>;
+//#endregion
 //#region packages/components/features/tables/components/atoms/badge-display.d.ts
-
 /**
  * Renders a pill-shaped badge for a table cell that optionally supports a click
  * action and an inline remove button; falls back to {@link UITableEmpty} when
@@ -646,6 +668,10 @@ type TTableContext<TData extends RowData<TData>> = {
   summary?: SummaryItem[];
   /** When `true`, a toggle button appears in `UITableTooltipActions` to open `UITableAnalysisPanel`. */
   showAnalysisPanel?: boolean;
+  /** Optional subtitle rendered below the title in `UITableTooltip`. */
+  description?: string;
+  /** Optional React node rendered on the right side of the `UITableTooltip` header row (e.g. action buttons). */
+  headerActions?: React.ReactNode;
 };
 /** Context value provided by `UITableInnerWrapperProvider`. */
 type TTableInnerWrapperContext = {
@@ -778,6 +804,10 @@ type TableProviderProps<TData extends RowData<TData>, TKey extends keyof TData =
   summary?: SummaryItem[];
   /** When `true`, a toggle button appears in `UITableTooltipActions` to open `UITableAnalysisPanel`. */
   showAnalysisPanel?: boolean;
+  /** Optional subtitle rendered below the title in `UITableTooltip`. */
+  description?: string;
+  /** Optional React node rendered on the right side of the `UITableTooltip` header row (e.g. action buttons). */
+  headerActions?: React.ReactNode;
 };
 type FilterType = 'tag' | 'single-tag' | 'date-range' | 'number' | 'text' | 'boolean';
 /** A selectable option for tag/enum filters. */
@@ -986,6 +1016,8 @@ declare const UITableProvider: <TData extends RowData<TData> = RowData<AnyEntity
   onFilterChange,
   summary,
   showAnalysisPanel,
+  description,
+  headerActions,
   children
 }: React.PropsWithChildren<TableProviderProps<TData, TKey, TColumns>>) => react642.JSX.Element;
 //#endregion
@@ -1057,5 +1089,5 @@ declare const UITableTooltipActions: React.FC<{
  */
 declare const UITableTooltip: React.FC<React.PropsWithChildren>;
 //#endregion
-export { TUITableColumn as $, CsvCell as A, UITableBadgeDisplay as At, TTableAnalysisContext as B, UITableCellActions as C, UITableMoreButton as Ct, BooleanFilterValue as D, UITableDateDisplay as Dt, ActiveFilter as E, UITableDescriptionDisplay as Et, FilterValue as F, TTableInnerTableContext as G, TTableContext as H, NumberFilterValue as I, TTableVirtualizerContext as J, TTableInnerWrapperContext as K, RowData as L, FilterDefinition as M, FilterOption as N, ColumnAggregation as O, UITableCurrencyDisplay as Ot, FilterType as P, TUITableCellSelect as Q, SingleTagFilterValue as R, UITableCellSelect as S, UITableNameDisplay as St, UITableBody as T, UITableEmailDisplay as Tt, TTableFilterContext as U, TTableBodyContext as V, TTableHeadRowContext as W, TUITableCell as X, TUITableBody as Y, TUITableCellActions as Z, UITableHeadCell as _, UITableStatisticDisplay as _t, UITableProvider as a, TUITableHeadCellSelect as at, UITableFooter as b, UITablePhoneNumberDisplay as bt, UITableContainer as c, TUITableInnerWrapper as ct, UITableLoadMore as d, TUITableWrapper as dt, TUITableEmptyDisplay as et, UITableInnerWrapper as f, TableProviderProps as ft, UITableHeadCellOption as g, UITableStatusDisplay as gt, UITableHeadCellSelect as h, UITableUserDataDisplay as ht, UITableSummaryBar as i, TUITableHeadCellOption as it, DateRangeFilterValue as j, ColumnAggregationType as k, UITableBooleanDisplay as kt, UITableWrapper as l, TUITableLoadMore as lt, UITableHeadRow as m, TextFilterValue as mt, UITableTooltipActions as n, TUITableHead as nt, UITableFilter as o, TUITableHeadRow as ot, UITableInnerTable as p, TagFilterValue as pt, TTableRowContext as q, UITableTooltipFilter as r, TUITableHeadCell as rt, UITableAnalysisPanel as s, TUITableInnerTable as st, UITableTooltip as t, TUITableFooter as tt, UITableRow as u, TUITableRow as ut, UITableHead as v, UITableRemoveButton as vt, UITableCell as w, UITableListDisplay as wt, UITableEmptyDisplay as x, UITablePermalink as xt, UITableFooterRow as y, UITableProgressDisplay as yt, SummaryItem as z };
-//# sourceMappingURL=index-C6nrbQ-E.d.cts.map
+export { TUITableColumn as $, CsvCell as A, UITableBadgeDisplay as At, TTableAnalysisContext as B, UITableCellActions as C, UITableMoreButton as Ct, BooleanFilterValue as D, UITableDateDisplay as Dt, ActiveFilter as E, UITableDescriptionDisplay as Et, FilterValue as F, TTableInnerTableContext as G, TTableContext as H, NumberFilterValue as I, TTableVirtualizerContext as J, TTableInnerWrapperContext as K, RowData as L, FilterDefinition as M, FilterOption as N, ColumnAggregation as O, UITableCurrencyDisplay as Ot, FilterType as P, TUITableCellSelect as Q, SingleTagFilterValue as R, UITableCellSelect as S, UITableNameDisplay as St, UITableBody as T, UITableEmailDisplay as Tt, TTableFilterContext as U, TTableBodyContext as V, TTableHeadRowContext as W, TUITableCell as X, TUITableBody as Y, TUITableCellActions as Z, UITableHeadCell as _, UITableStatisticDisplay as _t, UITableProvider as a, TUITableHeadCellSelect as at, UITableFooter as b, UITablePhoneNumberDisplay as bt, UITableContainer as c, TUITableInnerWrapper as ct, UITableLoadMore as d, TUITableWrapper as dt, TUITableEmptyDisplay as et, UITableInnerWrapper as f, TableProviderProps as ft, UITableHeadCellOption as g, UITableStatusDisplay as gt, UITableHeadCellSelect as h, UITableUserDataDisplay as ht, UITableSummaryBar as i, TUITableHeadCellOption as it, DateRangeFilterValue as j, UITableAvatarNameDisplay as jt, ColumnAggregationType as k, UITableBooleanDisplay as kt, UITableWrapper as l, TUITableLoadMore as lt, UITableHeadRow as m, TextFilterValue as mt, UITableTooltipActions as n, TUITableHead as nt, UITableFilter as o, TUITableHeadRow as ot, UITableInnerTable as p, TagFilterValue as pt, TTableRowContext as q, UITableTooltipFilter as r, TUITableHeadCell as rt, UITableAnalysisPanel as s, TUITableInnerTable as st, UITableTooltip as t, TUITableFooter as tt, UITableRow as u, TUITableRow as ut, UITableHead as v, UITableRemoveButton as vt, UITableCell as w, UITableListDisplay as wt, UITableEmptyDisplay as x, UITablePermalink as xt, UITableFooterRow as y, UITableProgressDisplay as yt, SummaryItem as z };
+//# sourceMappingURL=index-9eog5ilY.d.cts.map

package/dist/{index-CJoz7sMc.d.mts → index-BuNzvvj3.d.mts}

@@ -1,11 +1,33 @@
 import { t as AnyEntity } from "./types-YLu40dXY.mjs";
-import { t as Input } from "./input-DXO2mTgG.mjs";
-import * as react640 from "react";
+import { t as Input } from "./input-BFtFMzRG.mjs";
+import * as react642 from "react";
 import { AccessorKeyColumnDef, CellContext, Column, ColumnPinningPosition, ColumnPinningState, Header, HeaderGroup, Row, RowSelectionState, Table } from "@tanstack/react-table";
 import { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 
+//#region packages/components/features/tables/components/atoms/avatar-name-display.d.ts
+/** Props for the {@link UITableAvatarNameDisplay} component. */
+type Props$8 = {
+  /** Display name shown beside the avatar. */
+  name: string;
+  /** Optional image URL for the avatar. Falls back to a color-hashed icon when absent. */
+  avatarUrl?: string;
+  /** Seed for deterministic avatar background color generation. Defaults to `name`. */
+  uuid?: string;
+};
+/**
+ * Renders a circular avatar paired with a name in a compact horizontal row.
+ * When no `avatarUrl` is provided the fallback uses a deterministic background
+ * color derived from `uuid` (or `name`) via `colorHashLight`, matching the
+ * style of `UserDataDisplay`.
+ *
+ * @example
+ * import { UITableAvatarNameDisplay } from '@customafk/lunas-ui/features/tables';
+ *
+ * <UITableAvatarNameDisplay name="Jane Smith" uuid="user-42" avatarUrl="/avatars/jane.png" />
+ */
+declare const UITableAvatarNameDisplay: React.FC<Props$8>;
+//#endregion
 //#region packages/components/features/tables/components/atoms/badge-display.d.ts
-
 /**
  * Renders a pill-shaped badge for a table cell that optionally supports a click
  * action and an inline remove button; falls back to {@link UITableEmpty} when
@@ -64,14 +86,14 @@ type Props$7 = {
  *
  * <UITableCurrencyDisplay value={1234.5} currency="USD" colorize />
  */
-declare const UITableCurrencyDisplay: react640.MemoExoticComponent<({
+declare const UITableCurrencyDisplay: react642.MemoExoticComponent<({
   value,
   currency,
   locale,
   display,
   size,
   colorize
-}: Props$7) => react640.JSX.Element>;
+}: Props$7) => react642.JSX.Element>;
 //#endregion
 //#region packages/components/features/tables/components/atoms/date-display.d.ts
 /** Props for the {@link UITableDateDisplay} component. */
@@ -261,12 +283,12 @@ type Props$3 = {
  *
  * <UITableProgressDisplay value={75} />
  */
-declare const UITableProgressDisplay: react640.MemoExoticComponent<({
+declare const UITableProgressDisplay: react642.MemoExoticComponent<({
   value,
   showLabel,
   successThreshold,
   warningThreshold
-}: Props$3) => react640.JSX.Element>;
+}: Props$3) => react642.JSX.Element>;
 //#endregion
 //#region packages/components/features/tables/components/atoms/remove-button.d.ts
 /**
@@ -320,7 +342,7 @@ type Props$2 = {
  *
  * <UITableStatisticDisplay value={1234567.89} precision={2} prefix="$" size="md" />
  */
-declare const UITableStatisticDisplay: react640.MemoExoticComponent<({
+declare const UITableStatisticDisplay: react642.MemoExoticComponent<({
   decimalSeparator,
   groupSeparator,
   prefix: Prefix,
@@ -330,7 +352,7 @@ declare const UITableStatisticDisplay: react640.MemoExoticComponent<({
   showTrailingZeros,
   size,
   value
-}: Props$2) => react640.JSX.Element>;
+}: Props$2) => react642.JSX.Element>;
 //#endregion
 //#region packages/components/features/tables/components/atoms/status-display.d.ts
 type BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
@@ -646,6 +668,10 @@ type TTableContext<TData extends RowData<TData>> = {
   summary?: SummaryItem[];
   /** When `true`, a toggle button appears in `UITableTooltipActions` to open `UITableAnalysisPanel`. */
   showAnalysisPanel?: boolean;
+  /** Optional subtitle rendered below the title in `UITableTooltip`. */
+  description?: string;
+  /** Optional React node rendered on the right side of the `UITableTooltip` header row (e.g. action buttons). */
+  headerActions?: React.ReactNode;
 };
 /** Context value provided by `UITableInnerWrapperProvider`. */
 type TTableInnerWrapperContext = {
@@ -778,6 +804,10 @@ type TableProviderProps<TData extends RowData<TData>, TKey extends keyof TData =
   summary?: SummaryItem[];
   /** When `true`, a toggle button appears in `UITableTooltipActions` to open `UITableAnalysisPanel`. */
   showAnalysisPanel?: boolean;
+  /** Optional subtitle rendered below the title in `UITableTooltip`. */
+  description?: string;
+  /** Optional React node rendered on the right side of the `UITableTooltip` header row (e.g. action buttons). */
+  headerActions?: React.ReactNode;
 };
 type FilterType = 'tag' | 'single-tag' | 'date-range' | 'number' | 'text' | 'boolean';
 /** A selectable option for tag/enum filters. */
@@ -843,61 +873,61 @@ type TTableFilterContext = {
 };
 //#endregion
 //#region packages/components/features/tables/components/commons/body.d.ts
-declare const UITableBody: react640.NamedExoticComponent<TUITableBody>;
+declare const UITableBody: react642.NamedExoticComponent<TUITableBody>;
 //#endregion
 //#region packages/components/features/tables/components/commons/cell.d.ts
-declare const UITableCell: react640.NamedExoticComponent<TUITableCell>;
+declare const UITableCell: react642.NamedExoticComponent<TUITableCell>;
 //#endregion
 //#region packages/components/features/tables/components/commons/cell-actions.d.ts
-declare const UITableCellActions: react640.NamedExoticComponent<TUITableCellActions>;
+declare const UITableCellActions: react642.NamedExoticComponent<TUITableCellActions>;
 //#endregion
 //#region packages/components/features/tables/components/commons/cell-select.d.ts
-declare const UITableCellSelect: react640.NamedExoticComponent<TUITableCellSelect>;
+declare const UITableCellSelect: react642.NamedExoticComponent<TUITableCellSelect>;
 //#endregion
 //#region packages/components/features/tables/components/commons/empty-display.d.ts
-declare const UITableEmptyDisplay: react640.NamedExoticComponent<TUITableEmptyDisplay>;
+declare const UITableEmptyDisplay: react642.NamedExoticComponent<TUITableEmptyDisplay>;
 //#endregion
 //#region packages/components/features/tables/components/commons/footer.d.ts
-declare const UITableFooter: react640.NamedExoticComponent<TUITableFooter>;
+declare const UITableFooter: react642.NamedExoticComponent<TUITableFooter>;
 //#endregion
 //#region packages/components/features/tables/components/commons/footer-row.d.ts
-declare const UITableFooterRow: react640.MemoExoticComponent<() => react640.JSX.Element | null>;
+declare const UITableFooterRow: react642.MemoExoticComponent<() => react642.JSX.Element | null>;
 //#endregion
 //#region packages/components/features/tables/components/commons/head.d.ts
-declare const UITableHead: react640.NamedExoticComponent<TUITableHead>;
+declare const UITableHead: react642.NamedExoticComponent<TUITableHead>;
 //#endregion
 //#region packages/components/features/tables/components/commons/head-cell.d.ts
-declare const UITableHeadCell: react640.NamedExoticComponent<TUITableHeadCell>;
+declare const UITableHeadCell: react642.NamedExoticComponent<TUITableHeadCell>;
 //#endregion
 //#region packages/components/features/tables/components/commons/head-cell-option.d.ts
-declare const UITableHeadCellOption: react640.NamedExoticComponent<TUITableHeadCellOption>;
+declare const UITableHeadCellOption: react642.NamedExoticComponent<TUITableHeadCellOption>;
 //#endregion
 //#region packages/components/features/tables/components/commons/head-cell-select.d.ts
-declare const UITableHeadCellSelect: react640.NamedExoticComponent<TUITableHeadCellSelect>;
+declare const UITableHeadCellSelect: react642.NamedExoticComponent<TUITableHeadCellSelect>;
 //#endregion
 //#region packages/components/features/tables/components/commons/head-row.d.ts
-declare const UITableHeadRow: react640.NamedExoticComponent<TUITableHeadRow>;
+declare const UITableHeadRow: react642.NamedExoticComponent<TUITableHeadRow>;
 //#endregion
 //#region packages/components/features/tables/components/commons/inner-table.d.ts
-declare const UITableInnerTable: react640.NamedExoticComponent<TUITableInnerTable>;
+declare const UITableInnerTable: react642.NamedExoticComponent<TUITableInnerTable>;
 //#endregion
 //#region packages/components/features/tables/components/commons/inner-wrapper.d.ts
-declare const UITableInnerWrapper: react640.NamedExoticComponent<TUITableInnerWrapper>;
+declare const UITableInnerWrapper: react642.NamedExoticComponent<TUITableInnerWrapper>;
 //#endregion
 //#region packages/components/features/tables/components/commons/load-more.d.ts
-declare const UITableLoadMore: react640.NamedExoticComponent<TUITableLoadMore>;
+declare const UITableLoadMore: react642.NamedExoticComponent<TUITableLoadMore>;
 //#endregion
 //#region packages/components/features/tables/components/commons/row.d.ts
-declare const UITableRow: react640.NamedExoticComponent<TUITableRow>;
+declare const UITableRow: react642.NamedExoticComponent<TUITableRow>;
 //#endregion
 //#region packages/components/features/tables/components/commons/wrapper.d.ts
-declare const UITableWrapper: react640.NamedExoticComponent<TUITableWrapper>;
+declare const UITableWrapper: react642.NamedExoticComponent<TUITableWrapper>;
 //#endregion
 //#region packages/components/features/tables/components/table.d.ts
 declare const UITableContainer: React.FC<React.PropsWithChildren>;
 //#endregion
 //#region packages/components/features/tables/components/table/analysis-panel.d.ts
-declare const UITableAnalysisPanel: react640.MemoExoticComponent<() => react640.JSX.Element>;
+declare const UITableAnalysisPanel: react642.MemoExoticComponent<() => react642.JSX.Element>;
 //#endregion
 //#region packages/components/features/tables/components/table/filter.d.ts
 /**
@@ -928,7 +958,7 @@ declare const UITableAnalysisPanel: react640.MemoExoticComponent<() => react640.
  * </UITableProvider>
  * ```
  */
-declare const UITableFilter: () => react640.JSX.Element;
+declare const UITableFilter: () => react642.JSX.Element;
 //#endregion
 //#region packages/components/features/tables/components/table/provider.d.ts
 /**
@@ -986,11 +1016,13 @@ declare const UITableProvider: <TData extends RowData<TData> = RowData<AnyEntity
   onFilterChange,
   summary,
   showAnalysisPanel,
+  description,
+  headerActions,
   children
-}: React.PropsWithChildren<TableProviderProps<TData, TKey, TColumns>>) => react640.JSX.Element;
+}: React.PropsWithChildren<TableProviderProps<TData, TKey, TColumns>>) => react642.JSX.Element;
 //#endregion
 //#region packages/components/features/tables/components/table/summary-bar.d.ts
-declare const UITableSummaryBar: react640.MemoExoticComponent<() => react640.JSX.Element | null>;
+declare const UITableSummaryBar: react642.MemoExoticComponent<() => react642.JSX.Element | null>;
 //#endregion
 //#region packages/components/features/tables/components/table/tooltip.d.ts
 /**
@@ -1057,5 +1089,5 @@ declare const UITableTooltipActions: React.FC<{
  */
 declare const UITableTooltip: React.FC<React.PropsWithChildren>;
 //#endregion
-export { TUITableColumn as $, CsvCell as A, UITableBadgeDisplay as At, TTableAnalysisContext as B, UITableCellActions as C, UITableMoreButton as Ct, BooleanFilterValue as D, UITableDateDisplay as Dt, ActiveFilter as E, UITableDescriptionDisplay as Et, FilterValue as F, TTableInnerTableContext as G, TTableContext as H, NumberFilterValue as I, TTableVirtualizerContext as J, TTableInnerWrapperContext as K, RowData as L, FilterDefinition as M, FilterOption as N, ColumnAggregation as O, UITableCurrencyDisplay as Ot, FilterType as P, TUITableCellSelect as Q, SingleTagFilterValue as R, UITableCellSelect as S, UITableNameDisplay as St, UITableBody as T, UITableEmailDisplay as Tt, TTableFilterContext as U, TTableBodyContext as V, TTableHeadRowContext as W, TUITableCell as X, TUITableBody as Y, TUITableCellActions as Z, UITableHeadCell as _, UITableStatisticDisplay as _t, UITableProvider as a, TUITableHeadCellSelect as at, UITableFooter as b, UITablePhoneNumberDisplay as bt, UITableContainer as c, TUITableInnerWrapper as ct, UITableLoadMore as d, TUITableWrapper as dt, TUITableEmptyDisplay as et, UITableInnerWrapper as f, TableProviderProps as ft, UITableHeadCellOption as g, UITableStatusDisplay as gt, UITableHeadCellSelect as h, UITableUserDataDisplay as ht, UITableSummaryBar as i, TUITableHeadCellOption as it, DateRangeFilterValue as j, ColumnAggregationType as k, UITableBooleanDisplay as kt, UITableWrapper as l, TUITableLoadMore as lt, UITableHeadRow as m, TextFilterValue as mt, UITableTooltipActions as n, TUITableHead as nt, UITableFilter as o, TUITableHeadRow as ot, UITableInnerTable as p, TagFilterValue as pt, TTableRowContext as q, UITableTooltipFilter as r, TUITableHeadCell as rt, UITableAnalysisPanel as s, TUITableInnerTable as st, UITableTooltip as t, TUITableFooter as tt, UITableRow as u, TUITableRow as ut, UITableHead as v, UITableRemoveButton as vt, UITableCell as w, UITableListDisplay as wt, UITableEmptyDisplay as x, UITablePermalink as xt, UITableFooterRow as y, UITableProgressDisplay as yt, SummaryItem as z };
-//# sourceMappingURL=index-CJoz7sMc.d.mts.map
+export { TUITableColumn as $, CsvCell as A, UITableBadgeDisplay as At, TTableAnalysisContext as B, UITableCellActions as C, UITableMoreButton as Ct, BooleanFilterValue as D, UITableDateDisplay as Dt, ActiveFilter as E, UITableDescriptionDisplay as Et, FilterValue as F, TTableInnerTableContext as G, TTableContext as H, NumberFilterValue as I, TTableVirtualizerContext as J, TTableInnerWrapperContext as K, RowData as L, FilterDefinition as M, FilterOption as N, ColumnAggregation as O, UITableCurrencyDisplay as Ot, FilterType as P, TUITableCellSelect as Q, SingleTagFilterValue as R, UITableCellSelect as S, UITableNameDisplay as St, UITableBody as T, UITableEmailDisplay as Tt, TTableFilterContext as U, TTableBodyContext as V, TTableHeadRowContext as W, TUITableCell as X, TUITableBody as Y, TUITableCellActions as Z, UITableHeadCell as _, UITableStatisticDisplay as _t, UITableProvider as a, TUITableHeadCellSelect as at, UITableFooter as b, UITablePhoneNumberDisplay as bt, UITableContainer as c, TUITableInnerWrapper as ct, UITableLoadMore as d, TUITableWrapper as dt, TUITableEmptyDisplay as et, UITableInnerWrapper as f, TableProviderProps as ft, UITableHeadCellOption as g, UITableStatusDisplay as gt, UITableHeadCellSelect as h, UITableUserDataDisplay as ht, UITableSummaryBar as i, TUITableHeadCellOption as it, DateRangeFilterValue as j, UITableAvatarNameDisplay as jt, ColumnAggregationType as k, UITableBooleanDisplay as kt, UITableWrapper as l, TUITableLoadMore as lt, UITableHeadRow as m, TextFilterValue as mt, UITableTooltipActions as n, TUITableHead as nt, UITableFilter as o, TUITableHeadRow as ot, UITableInnerTable as p, TagFilterValue as pt, TTableRowContext as q, UITableTooltipFilter as r, TUITableHeadCell as rt, UITableAnalysisPanel as s, TUITableInnerTable as st, UITableTooltip as t, TUITableFooter as tt, UITableRow as u, TUITableRow as ut, UITableHead as v, UITableRemoveButton as vt, UITableCell as w, UITableListDisplay as wt, UITableEmptyDisplay as x, UITablePermalink as xt, UITableFooterRow as y, UITableProgressDisplay as yt, SummaryItem as z };
+//# sourceMappingURL=index-BuNzvvj3.d.mts.map

package/dist/{index-DiW-62hY.d.mts → index-CG8iS6qj.d.cts}

@@ -1,7 +1,7 @@
 import * as react304 from "react";
+import * as class_variance_authority_types22 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import { Editor } from "@tiptap/react";
-import * as class_variance_authority_types21 from "class-variance-authority/types";
 
 //#region packages/components/features/text-editor/link-dialog.d.ts
 interface LinkDialogProps {
@@ -15,7 +15,7 @@ declare function LinkDialog({
 declare const textEditorVariants: (props?: ({
   variant?: "outline" | "ghost" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types21.ClassProp) | undefined) => string;
+} & class_variance_authority_types22.ClassProp) | undefined) => string;
 type TextEditorVariantProps = VariantProps<typeof textEditorVariants>;
 //#endregion
 //#region packages/components/features/text-editor/text-editor.d.ts
@@ -82,4 +82,4 @@ declare function TextEditorToolbar({
 }: TextEditorToolbarProps): react304.JSX.Element;
 //#endregion
 export { LinkDialog as a, TextEditorProps as i, TextEditorToolbarProps as n, LinkDialogProps as o, TextEditor as r, TextEditorToolbar as t };
-//# sourceMappingURL=index-DiW-62hY.d.mts.map
+//# sourceMappingURL=index-CG8iS6qj.d.cts.map

package/dist/index-Cm62M0Ft.d.mts

@@ -0,0 +1,90 @@
+//#region packages/components/layouts/cms-layout/components/header.d.ts
+type CMSLayoutUser = {
+  /** Display name shown in the header and user dropdown. */
+  name: string;
+  /** Email address shown below the name in the dropdown. */
+  email?: string;
+  /** Role or position shown as a muted label in the dropdown. */
+  role?: string;
+  /** Optional avatar image URL; falls back to a color-hashed icon. */
+  avatarUrl?: string;
+};
+//#endregion
+//#region packages/components/layouts/cms-layout/index.d.ts
+type NavItem = {
+  /** 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;
+};
+type NavGroup = {
+  /** Unique identifier for the group, used as React key. */
+  id: string;
+  /** Optional section heading rendered above the group's items. */
+  label?: string;
+  /** Navigation items that belong to this group. */
+  items: NavItem[];
+};
+type CMSLayoutProps = {
+  /** Text label used by the header for language-toggle or i18n display. */
+  i18nText?: string;
+  /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */
+  activeNavItemId?: string;
+  /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */
+  sidebar?: {
+    groupcontent: NavGroup[];
+  };
+  /** Callback fired when the logout button is clicked. */
+  onLogout?: () => void;
+  /** Callback fired when the user switches the UI locale to English. */
+  onChangeToEnLocale?: () => void;
+  /** Callback fired when the user switches the UI locale to Vietnamese. */
+  onChangeToViLocale?: () => void;
+  /**
+   * Label displayed on the logout button.
+   * @default 'Log out'
+   */
+  logoutLabel?: string;
+  /**
+   * Copyright string shown at the bottom of the sidebar.
+   * @default `Copyright © <current year>, Lunas.`
+   */
+  copyright?: string;
+  /** Authenticated user shown in the header avatar dropdown. Omit to hide the user menu. */
+  user?: CMSLayoutUser;
+};
+/**
+ * Full-page CMS application shell with a collapsible inset sidebar, header, and main content area.
+ *
+ * @example
+ * ```tsx
+ * import { CMSLayout } from '@customafk/lunas-ui/layouts/cms-layout';
+ * import { LayoutDashboardIcon } from 'lucide-react';
+ *
+ * <CMSLayout
+ *   activeNavItemId="dashboard"
+ *   sidebar={{
+ *     groupcontent: [
+ *       {
+ *         id: 'main',
+ *         label: 'Main',
+ *         items: [
+ *           { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboardIcon />, onClick: () => router.push('/') },
+ *         ],
+ *       },
+ *     ],
+ *   }}
+ *   onLogout={() => signOut()}
+ * >
+ *   <DashboardPage />
+ * </CMSLayout>
+ * ```
+ */
+declare const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>>;
+//#endregion
+export { CMSLayoutProps as n, CMSLayoutUser as r, CMSLayout as t };
+//# sourceMappingURL=index-Cm62M0Ft.d.mts.map