@customafk/lunas-ui 0.2.53 → 0.2.55

package/dist/layouts/flex.d.mts

@@ -1,2 +1,114 @@
-import { t as Flex } from "../flex-BSTiMh2t.mjs";
-export { Flex };
+import { VariantProps } from "class-variance-authority";
+
+//#region packages/components/layouts/flex.d.ts
+declare const flexVariants: (props?: ({
+  vertical?: boolean | null | undefined;
+  width?: "full" | "auto" | "fit" | "screen" | "min" | "max" | "null" | null | undefined;
+  wrap?: boolean | null | undefined;
+  margin?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | null | undefined;
+  align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type Props = {
+  /** Additional Tailwind classes merged on top of the variant-generated classes. */className?: string;
+  /**
+   * Stacks children vertically (`flex-col`) when `true`, horizontally (`flex-row`) when `false`.
+   * @default false
+   */
+  vertical?: boolean;
+  /**
+   * Controls the width of the flex container.
+   * - `'full'` — `w-full`
+   * - `'auto'` — `w-auto`
+   * - `'fit'`  — `w-fit` (default)
+   * - `'screen'` — `w-screen`
+   * - `'min'` — `w-min`
+   * - `'max'` — `w-max`
+   * - `'null'` — no width utility applied
+   * @default 'fit'
+   */
+  width?: 'full' | 'auto' | 'fit' | 'screen' | 'min' | 'max' | 'null';
+  /**
+   * Allows children to wrap onto multiple lines when `true`.
+   * @default true
+   */
+  wrap?: boolean;
+  /**
+   * Uniform margin applied to the container.
+   * - `'none'` — `m-0` (default)
+   * - `'sm'` — `m-2`
+   * - `'md'` — `m-4`
+   * - `'lg'` — `m-6`
+   * - `'xl'` — `m-8`
+   * @default 'none'
+   */
+  margin?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Uniform padding applied to the container.
+   * - `'none'` — `p-0`
+   * - `'sm'`  — `p-2` (default)
+   * - `'md'`  — `p-4`
+   * - `'lg'`  — `p-6`
+   * - `'xl'`  — `p-8`
+   * @default 'sm'
+   */
+  padding?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Gap between child elements.
+   * - `'none'` — `gap-0`
+   * - `'xs'`  — `gap-1` (default)
+   * - `'sm'`  — `gap-2`
+   * - `'md'`  — `gap-4`
+   * - `'lg'`  — `gap-6`
+   * - `'xl'`  — `gap-8`
+   * @default 'xs'
+   */
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+  /**
+   * Justification of children along the main axis (`justify-content`).
+   * @default 'start'
+   */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
+  /**
+   * Alignment of children along the cross axis (`align-items`).
+   * @default 'center'
+   */
+  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+} & VariantProps<typeof flexVariants>;
+/**
+ * A flexible, variant-driven flex container built on CVA and TailwindCSS.
+ *
+ * @example
+ * ```tsx
+ * import { Flex } from '@customafk/lunas-ui/layouts/flex';
+ *
+ * // Horizontal row with centered children and a medium gap
+ * <Flex gap="md" justify="between" align="center">
+ *   <span>Left</span>
+ *   <span>Right</span>
+ * </Flex>
+ *
+ * // Vertical stack that fills parent width
+ * <Flex vertical width="full" gap="sm" padding="md">
+ *   <p>First item</p>
+ *   <p>Second item</p>
+ * </Flex>
+ * ```
+ */
+declare const Flex: import("react").MemoExoticComponent<({
+  vertical,
+  wrap,
+  width,
+  margin,
+  padding,
+  gap,
+  justify,
+  align,
+  className,
+  children
+}: React.PropsWithChildren<Props>) => import("react").JSX.Element>;
+//#endregion
+export { Flex };
+//# sourceMappingURL=flex.d.mts.map

package/dist/layouts/flex.mjs

@@ -1 +1,2 @@
-"use client";import{t as e}from"../flex-Bx9Nmr53.mjs";export{e as Flex};
+"use client";import{memo as e}from"react";import{cn as t}from"@customafk/react-toolkit/utils";import{cva as n}from"class-variance-authority";import{jsx as r}from"react/jsx-runtime";const i=n([`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`}}),a=e(({vertical:e,wrap:n,width:a,margin:o,padding:s,gap:c,justify:l,align:u,className:d,children:f})=>r(`div`,{className:t(i({vertical:e,width:a,wrap:n,margin:o,padding:s,gap:c,justify:l,align:u,className:d})),children:f}));a.displayName=`Flex`;export{a as Flex};
+//# sourceMappingURL=flex.mjs.map

package/dist/layouts/flex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.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":"qLAOA,MAAM,EAAe,EAAI,CAAC,gBAAiB,SAAS,EAAG,CACrD,SAAU,CACR,SAAU,CACR,KAAM,WACN,MAAO,UACT,EACA,MAAO,CACL,KAAM,SACN,KAAM,SACN,IAAK,QACL,OAAQ,WACR,IAAK,QACL,IAAK,QACL,KAAM,EACR,EACA,KAAM,CACJ,KAAM,YACN,MAAO,aACT,EACA,OAAQ,CACN,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,KACR,EACA,QAAS,CACP,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,KAAM,KACR,EACA,IAAK,CACH,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,OACR,EACA,QAAS,CACP,MAAO,gBACP,OAAQ,iBACR,IAAK,cACL,QAAS,kBACT,OAAQ,iBACR,OAAQ,iBACR,QAAS,iBACX,EACA,MAAO,CACL,MAAO,cACP,OAAQ,eACR,IAAK,YACL,SAAU,iBACV,QAAS,eACX,CACF,EACA,gBAAiB,CACf,SAAU,GACV,KAAM,GACN,MAAO,MACP,OAAQ,OACR,QAAS,KACT,IAAK,KACL,QAAS,QACT,MAAO,QACT,CACF,CAAC,EA0FY,EAAO,GAAM,CAAE,WAAU,OAAM,QAAO,SAAQ,UAAS,MAAK,UAAS,QAAO,YAAW,cAEhG,EAAC,MAAD,CACE,UAAW,EACT,EAAa,CACX,WACA,QACA,OACA,SACA,UACA,MACA,UACA,QACA,WACF,CAAC,CACH,EAEC,UACE,CAAA,CAER,EACD,EAAK,YAAc"}

package/dist/layouts/grid.cjs

@@ -1 +1,2 @@
-"use client";const e=require(`../grid-BXJ2x1oD.cjs`);exports.Grid=e.t;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@customafk/react-toolkit/utils"),t=require("react/jsx-runtime");const n=({children:n})=>(0,t.jsx)(`div`,{className:`@container size-full`,children:(0,t.jsx)(`div`,{className:(0,e.cn)(`grid grid-cols-1 gap-4`,`@3xs:grid-cols-1`,`@2xs:grid-cols-1`,`@xs:grid-cols-1`,`@sm:grid-cols-1`,`@md:grid-cols-2`,`@lg:grid-cols-2`,`@xl:grid-cols-2`,`@2xl:grid-cols-2`,`@3xl:grid-cols-3`,`@4xl:grid-cols-3`,`@5xl:grid-cols-4`,`@6xl:grid-cols-4`,`@7xl:grid-cols-5`,`@8xl:grid-cols-6`,`@9xl:grid-cols-7`,`@10xl:grid-cols-8`),children:n})});exports.Grid=n;
+//# sourceMappingURL=grid.cjs.map

package/dist/layouts/grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.cjs","names":[],"sources":["../../packages/components/layouts/grid.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\n/**\n * A responsive, container-query-driven grid that automatically adjusts column count based on available width.\n *\n * @example\n * ```tsx\n * import { Grid } from '@customafk/lunas-ui/layouts/grid';\n *\n * <Grid>\n *   <Card />\n *   <Card />\n *   <Card />\n * </Grid>\n * ```\n */\nexport const Grid: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <div className=\"@container size-full\">\n      <div\n        className={cn(\n          'grid grid-cols-1 gap-4',\n          '@3xs:grid-cols-1',\n          '@2xs:grid-cols-1',\n          '@xs:grid-cols-1',\n          '@sm:grid-cols-1',\n          '@md:grid-cols-2',\n          '@lg:grid-cols-2',\n          '@xl:grid-cols-2',\n          '@2xl:grid-cols-2',\n          '@3xl:grid-cols-3',\n          '@4xl:grid-cols-3',\n          '@5xl:grid-cols-4',\n          '@6xl:grid-cols-4',\n          '@7xl:grid-cols-5',\n          '@8xl:grid-cols-6',\n          '@9xl:grid-cols-7',\n          '@10xl:grid-cols-8'\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"+JAkBA,MAAa,GAA2C,CAAE,eAEtD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,iCACb,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,WAAA,EAAA,EAAA,GAAA,CACE,yBACA,mBACA,mBACA,kBACA,kBACA,kBACA,kBACA,kBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACF,EAEC,UACE,CAAA,CACF,CAAA"}

package/dist/layouts/grid.d.cts

@@ -1,2 +1,19 @@
-import { t as Grid } from "../grid-BOqzD6m6.cjs";
-export { Grid };
+//#region packages/components/layouts/grid.d.ts
+/**
+ * A responsive, container-query-driven grid that automatically adjusts column count based on available width.
+ *
+ * @example
+ * ```tsx
+ * import { Grid } from '@customafk/lunas-ui/layouts/grid';
+ *
+ * <Grid>
+ *   <Card />
+ *   <Card />
+ *   <Card />
+ * </Grid>
+ * ```
+ */
+declare const Grid: React.FC<React.PropsWithChildren>;
+//#endregion
+export { Grid };
+//# sourceMappingURL=grid.d.cts.map

package/dist/layouts/grid.d.mts

@@ -1,2 +1,19 @@
-import { t as Grid } from "../grid-Dw7tBNxf.mjs";
-export { Grid };
+//#region packages/components/layouts/grid.d.ts
+/**
+ * A responsive, container-query-driven grid that automatically adjusts column count based on available width.
+ *
+ * @example
+ * ```tsx
+ * import { Grid } from '@customafk/lunas-ui/layouts/grid';
+ *
+ * <Grid>
+ *   <Card />
+ *   <Card />
+ *   <Card />
+ * </Grid>
+ * ```
+ */
+declare const Grid: React.FC<React.PropsWithChildren>;
+//#endregion
+export { Grid };
+//# sourceMappingURL=grid.d.mts.map

package/dist/layouts/grid.mjs

@@ -1 +1,2 @@
-"use client";import{t as e}from"../grid-C4ogfMWr.mjs";export{e as Grid};
+"use client";import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t}from"react/jsx-runtime";const n=({children:n})=>t(`div`,{className:`@container size-full`,children:t(`div`,{className:e(`grid grid-cols-1 gap-4`,`@3xs:grid-cols-1`,`@2xs:grid-cols-1`,`@xs:grid-cols-1`,`@sm:grid-cols-1`,`@md:grid-cols-2`,`@lg:grid-cols-2`,`@xl:grid-cols-2`,`@2xl:grid-cols-2`,`@3xl:grid-cols-3`,`@4xl:grid-cols-3`,`@5xl:grid-cols-4`,`@6xl:grid-cols-4`,`@7xl:grid-cols-5`,`@8xl:grid-cols-6`,`@9xl:grid-cols-7`,`@10xl:grid-cols-8`),children:n})});export{n as Grid};
+//# sourceMappingURL=grid.mjs.map

package/dist/layouts/grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.mjs","names":[],"sources":["../../packages/components/layouts/grid.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\n/**\n * A responsive, container-query-driven grid that automatically adjusts column count based on available width.\n *\n * @example\n * ```tsx\n * import { Grid } from '@customafk/lunas-ui/layouts/grid';\n *\n * <Grid>\n *   <Card />\n *   <Card />\n *   <Card />\n * </Grid>\n * ```\n */\nexport const Grid: React.FC<React.PropsWithChildren> = ({ children }) => {\n  return (\n    <div className=\"@container size-full\">\n      <div\n        className={cn(\n          'grid grid-cols-1 gap-4',\n          '@3xs:grid-cols-1',\n          '@2xs:grid-cols-1',\n          '@xs:grid-cols-1',\n          '@sm:grid-cols-1',\n          '@md:grid-cols-2',\n          '@lg:grid-cols-2',\n          '@xl:grid-cols-2',\n          '@2xl:grid-cols-2',\n          '@3xl:grid-cols-3',\n          '@4xl:grid-cols-3',\n          '@5xl:grid-cols-4',\n          '@6xl:grid-cols-4',\n          '@7xl:grid-cols-5',\n          '@8xl:grid-cols-6',\n          '@9xl:grid-cols-7',\n          '@10xl:grid-cols-8'\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"yGAkBA,MAAa,GAA2C,CAAE,cAEtD,EAAC,MAAD,CAAK,UAAU,gCACb,EAAC,MAAD,CACE,UAAW,EACT,yBACA,mBACA,mBACA,kBACA,kBACA,kBACA,kBACA,kBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACA,mBACF,EAEC,UACE,CAAA,CACF,CAAA"}

package/dist/layouts/payment-layout/index.cjs

@@ -1 +1 @@
-require(`../../button.variants-4kw6plrv.cjs`),require(`../../button-C--DAN1D.cjs`),require(`../../paragraph-DvTZvbzw.cjs`),require(`../../skeleton-BuscPZgb.cjs`),require(`../../flex-ld7BqXoM.cjs`),require(`../../tooltip-KEOJcYl8.cjs`),require(`../../avatar-CVRRoJ05.cjs`),require(`../../separator-BRoS5sU8.cjs`),require(`../../sheet-E5cMUzxr.cjs`),require(`../../dropdown-menu-CtJ_OM19.cjs`),require(`../../input-BatF2xqI.cjs`);const e=require(`../../payment-layout-neLk_obm.cjs`);exports.PaymentLayout=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../payment-layout-DfxNDF8G.cjs");exports.PaymentLayout=e.t;

package/dist/layouts/payment-layout/index.d.cts

@@ -1,2 +1,59 @@
-import { n as PaymentLayoutUser, t as PaymentLayout } from "../../index-BWLHjQ6S.cjs";
-export { PaymentLayout, PaymentLayoutUser };
+//#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. */
+  avatar?: string;
+};
+/**
+ * Full-page payment application shell with a collapsible inset sidebar and a fixed header.
+ * On mobile, the sidebar is replaced by a bottom navigation bar (up to 5 items).
+ *
+ * @example
+ * ```tsx
+ * import { PaymentLayout } from '@customafk/lunas-ui/layouts/payment-layout';
+ * import { CreditCardIcon } from 'lucide-react';
+ *
+ * <PaymentLayout
+ *   activeNavItemId="transactions"
+ *   sidebar={{
+ *     groupcontent: [
+ *       {
+ *         id: 'payment',
+ *         label: 'Payment',
+ *         items: [
+ *           { id: 'transactions', label: 'Transactions', icon: <CreditCardIcon />, onClick: () => router.push('/transactions') },
+ *         ],
+ *       },
+ *     ],
+ *   }}
+ *   user={{ fullname: 'Nguyen Van A', email: 'a@example.com' }}
+ *   onLogin={() => setLoginOpen(true)}
+ *   onLogout={() => authService.logout()}
+ * >
+ *   <TransactionsPage />
+ * </PaymentLayout>
+ * ```
+ */
+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. */
+  sidebar?: {
+    groupcontent: {
+      /** 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. */
+        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. */
+  onLogout?: () => void;
+}>>;
+//#endregion
+export { PaymentLayout, PaymentLayoutUser };
+//# sourceMappingURL=index.d.cts.map

package/dist/layouts/payment-layout/index.d.mts

@@ -1,2 +1,59 @@
-import { n as PaymentLayoutUser, t as PaymentLayout } from "../../index-DYnzFF0T.mjs";
-export { PaymentLayout, PaymentLayoutUser };
+//#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. */
+  avatar?: string;
+};
+/**
+ * Full-page payment application shell with a collapsible inset sidebar and a fixed header.
+ * On mobile, the sidebar is replaced by a bottom navigation bar (up to 5 items).
+ *
+ * @example
+ * ```tsx
+ * import { PaymentLayout } from '@customafk/lunas-ui/layouts/payment-layout';
+ * import { CreditCardIcon } from 'lucide-react';
+ *
+ * <PaymentLayout
+ *   activeNavItemId="transactions"
+ *   sidebar={{
+ *     groupcontent: [
+ *       {
+ *         id: 'payment',
+ *         label: 'Payment',
+ *         items: [
+ *           { id: 'transactions', label: 'Transactions', icon: <CreditCardIcon />, onClick: () => router.push('/transactions') },
+ *         ],
+ *       },
+ *     ],
+ *   }}
+ *   user={{ fullname: 'Nguyen Van A', email: 'a@example.com' }}
+ *   onLogin={() => setLoginOpen(true)}
+ *   onLogout={() => authService.logout()}
+ * >
+ *   <TransactionsPage />
+ * </PaymentLayout>
+ * ```
+ */
+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. */
+  sidebar?: {
+    groupcontent: {
+      /** 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. */
+        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. */
+  onLogout?: () => void;
+}>>;
+//#endregion
+export { PaymentLayout, PaymentLayoutUser };
+//# sourceMappingURL=index.d.mts.map

package/dist/layouts/payment-layout/index.mjs

@@ -1 +1 @@
-import"../../button.variants-DkMqWB8G.mjs";import"../../button-CCVJTHBI.mjs";import"../../paragraph-DYLaQtTV.mjs";import"../../skeleton-teVJKfpX.mjs";import"../../flex-Bx9Nmr53.mjs";import"../../tooltip-BBEcyuAE.mjs";import"../../avatar-tjgTFpVU.mjs";import"../../separator-BjRgoiEx.mjs";import"../../sheet-Bk6mK6TN.mjs";import"../../dropdown-menu-DhKquziD.mjs";import"../../input-CFsouxvo.mjs";import{t as e}from"../../payment-layout-BTYaI9Mr.mjs";export{e as PaymentLayout};
+import{t as e}from"../../payment-layout-CG_l7Es-.mjs";export{e as PaymentLayout};

package/dist/pages/FeatureDeveloping.cjs

@@ -1 +1,2 @@
-Object.defineProperty(exports,`__esModule`,{value:!0}),require(`../button.variants-4kw6plrv.cjs`),require(`../button-C--DAN1D.cjs`);const e=require(`../FeatureDeveloping-CVFrndc_.cjs`);exports.FeatureDeveloping=e.t,exports.default=e.n;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../ui/button.cjs");let t=require("lucide-react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime");const i=({title:i=`Tính năng đang phát triển`,subtitle:a=`Chúng tôi đang phát triển tính năng này. Vui lòng quay lại sau.`,buttonText:o=`Quay lại`,onButtonClick:s=()=>window.history.back(),className:c,iconClassName:l})=>(0,r.jsxs)(`div`,{className:(0,n.cn)(`flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full`,c),children:[(0,r.jsxs)(`div`,{className:`flex flex-col items-center gap-2`,children:[(0,r.jsx)(t.Construction,{className:(0,n.cn)(`size-16 sm:size-24 text-yellow-500`,l)}),(0,r.jsx)(`div`,{className:`text-3xl sm:text-5xl font-bold text-yellow-500`})]}),(0,r.jsx)(`h1`,{className:`text-xl sm:text-2xl font-semibold mt-2`,children:i}),(0,r.jsx)(`p`,{className:`text-muted-foreground max-w-md text-sm sm:text-base`,children:a}),(0,r.jsx)(e.Button,{onClick:s,variant:`default`,className:`mt-2`,size:`sm`,children:o})]});exports.FeatureDeveloping=i,exports.default=i;
+//# sourceMappingURL=FeatureDeveloping.cjs.map

package/dist/pages/FeatureDeveloping.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureDeveloping.cjs","names":["Construction","Button"],"sources":["../../packages/components/pages/FeatureDeveloping.tsx"],"sourcesContent":["import { Construction } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '../ui/button';\n\nexport interface FeatureDevelopingProps {\n  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Construction` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is still under active development.\n *\n * @example\n * ```tsx\n * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';\n *\n * <FeatureDeveloping\n *   title=\"Coming Soon\"\n *   subtitle=\"This feature is not ready yet.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureDeveloping = ({\n  title = 'Tính năng đang phát triển',\n  subtitle = 'Chúng tôi đang phát triển tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureDevelopingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <div className=\"flex flex-col items-center gap-2\">\n        <Construction className={cn('size-16 sm:size-24 text-yellow-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-yellow-500\">{/* This text shows the feature is in development */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureDeveloping;\n"],"mappings":"4OAoCA,MAAa,GAAqB,CAChC,QAAQ,4BACR,WAAW,kEACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,WAA3I,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,aAAD,CAAc,WAAA,EAAA,EAAA,GAAA,CAAc,qCAAsC,CAAa,CAAI,CAAA,GACnF,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gDAA2G,CAAA,CACvH,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}

package/dist/pages/FeatureDeveloping.d.cts

@@ -1,2 +1,41 @@
-import { n as FeatureDevelopingProps, t as FeatureDeveloping } from "../FeatureDeveloping-Bpmk3ZyS.cjs";
-export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };
+//#region packages/components/pages/FeatureDeveloping.d.ts
+interface FeatureDevelopingProps {
+  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */
+  title?: string;
+  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */
+  subtitle?: string;
+  /** Label for the action button. Defaults to `'Quay lại'`. */
+  buttonText?: string;
+  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */
+  onButtonClick?: () => void;
+  /** Additional class names applied to the root container element. */
+  className?: string;
+  /** Additional class names applied to the `Construction` icon. */
+  iconClassName?: string;
+}
+/**
+ * Full-page placeholder displayed when a feature is still under active development.
+ *
+ * @example
+ * ```tsx
+ * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';
+ *
+ * <FeatureDeveloping
+ *   title="Coming Soon"
+ *   subtitle="This feature is not ready yet."
+ *   buttonText="Go Back"
+ *   onButtonClick={() => router.back()}
+ * />
+ * ```
+ */
+declare const FeatureDeveloping: ({
+  title,
+  subtitle,
+  buttonText,
+  onButtonClick,
+  className,
+  iconClassName
+}: FeatureDevelopingProps) => import("react").JSX.Element;
+//#endregion
+export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };
+//# sourceMappingURL=FeatureDeveloping.d.cts.map

package/dist/pages/FeatureDeveloping.d.mts

@@ -1,2 +1,41 @@
-import { n as FeatureDevelopingProps, t as FeatureDeveloping } from "../FeatureDeveloping-oS433qZK.mjs";
-export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };
+//#region packages/components/pages/FeatureDeveloping.d.ts
+interface FeatureDevelopingProps {
+  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */
+  title?: string;
+  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */
+  subtitle?: string;
+  /** Label for the action button. Defaults to `'Quay lại'`. */
+  buttonText?: string;
+  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */
+  onButtonClick?: () => void;
+  /** Additional class names applied to the root container element. */
+  className?: string;
+  /** Additional class names applied to the `Construction` icon. */
+  iconClassName?: string;
+}
+/**
+ * Full-page placeholder displayed when a feature is still under active development.
+ *
+ * @example
+ * ```tsx
+ * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';
+ *
+ * <FeatureDeveloping
+ *   title="Coming Soon"
+ *   subtitle="This feature is not ready yet."
+ *   buttonText="Go Back"
+ *   onButtonClick={() => router.back()}
+ * />
+ * ```
+ */
+declare const FeatureDeveloping: ({
+  title,
+  subtitle,
+  buttonText,
+  onButtonClick,
+  className,
+  iconClassName
+}: FeatureDevelopingProps) => import("react").JSX.Element;
+//#endregion
+export { FeatureDeveloping, FeatureDeveloping as default, FeatureDevelopingProps };
+//# sourceMappingURL=FeatureDeveloping.d.mts.map

package/dist/pages/FeatureDeveloping.mjs

@@ -1 +1,2 @@
-import"../button.variants-DkMqWB8G.mjs";import"../button-CCVJTHBI.mjs";import{n as e,t}from"../FeatureDeveloping-k_14m44U.mjs";export{t as FeatureDeveloping,e as default};
+import{Button as e}from"../ui/button.mjs";import{Construction as t}from"lucide-react";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({title:a=`Tính năng đang phát triển`,subtitle:o=`Chúng tôi đang phát triển tính năng này. Vui lòng quay lại sau.`,buttonText:s=`Quay lại`,onButtonClick:c=()=>window.history.back(),className:l,iconClassName:u})=>i(`div`,{className:n(`flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full`,l),children:[i(`div`,{className:`flex flex-col items-center gap-2`,children:[r(t,{className:n(`size-16 sm:size-24 text-yellow-500`,u)}),r(`div`,{className:`text-3xl sm:text-5xl font-bold text-yellow-500`})]}),r(`h1`,{className:`text-xl sm:text-2xl font-semibold mt-2`,children:a}),r(`p`,{className:`text-muted-foreground max-w-md text-sm sm:text-base`,children:o}),r(e,{onClick:c,variant:`default`,className:`mt-2`,size:`sm`,children:s})]});export{a as FeatureDeveloping,a as default};
+//# sourceMappingURL=FeatureDeveloping.mjs.map

package/dist/pages/FeatureDeveloping.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureDeveloping.mjs","names":[],"sources":["../../packages/components/pages/FeatureDeveloping.tsx"],"sourcesContent":["import { Construction } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '../ui/button';\n\nexport interface FeatureDevelopingProps {\n  /** Main heading shown beneath the construction icon. Defaults to `'Tính năng đang phát triển'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese message asking the user to check back later. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Construction` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is still under active development.\n *\n * @example\n * ```tsx\n * import { FeatureDeveloping } from '@customafk/lunas-ui/pages/FeatureDeveloping';\n *\n * <FeatureDeveloping\n *   title=\"Coming Soon\"\n *   subtitle=\"This feature is not ready yet.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureDeveloping = ({\n  title = 'Tính năng đang phát triển',\n  subtitle = 'Chúng tôi đang phát triển tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureDevelopingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <div className=\"flex flex-col items-center gap-2\">\n        <Construction className={cn('size-16 sm:size-24 text-yellow-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-yellow-500\">{/* This text shows the feature is in development */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureDeveloping;\n"],"mappings":"4LAoCA,MAAa,GAAqB,CAChC,QAAQ,4BACR,WAAW,kEACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,mBAGE,EAAC,MAAD,CAAK,UAAW,EAAG,8GAA+G,CAAS,WAA3I,CACE,EAAC,MAAD,CAAK,UAAU,4CAAf,CACE,EAAC,EAAD,CAAc,UAAW,EAAG,qCAAsC,CAAa,CAAI,CAAA,EACnF,EAAC,MAAD,CAAK,UAAU,gDAA2G,CAAA,CACvH,IAEL,EAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,EAElE,EAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,EAEhF,EAAC,EAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}

package/dist/pages/FeatureFixing.cjs

@@ -1 +1,2 @@
-Object.defineProperty(exports,`__esModule`,{value:!0}),require(`../button.variants-4kw6plrv.cjs`),require(`../button-C--DAN1D.cjs`);const e=require(`../FeatureFixing-CqDnOmou.cjs`);exports.FeatureFixing=e.t,exports.default=e.n;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../ui/button.cjs");let t=require("lucide-react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime");const i=({title:i=`Tính năng đang bảo trì`,subtitle:a=`Chúng tôi đang khắc phục vấn đề với tính năng này. Vui lòng quay lại sau.`,buttonText:o=`Quay lại`,onButtonClick:s=()=>window.history.back(),className:c,iconClassName:l})=>(0,r.jsxs)(`div`,{className:(0,n.cn)(`flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full`,c),children:[(0,r.jsxs)(`div`,{className:`flex flex-col items-center gap-2`,children:[(0,r.jsx)(t.Wrench,{className:(0,n.cn)(`size-16 sm:size-24 text-orange-500`,l)}),(0,r.jsx)(`div`,{className:`text-3xl sm:text-5xl font-bold text-orange-500`})]}),(0,r.jsx)(`h1`,{className:`text-xl sm:text-2xl font-semibold mt-2`,children:i}),(0,r.jsx)(`p`,{className:`text-muted-foreground max-w-md text-sm sm:text-base`,children:a}),(0,r.jsx)(e.Button,{onClick:s,variant:`default`,className:`mt-2`,size:`sm`,children:o})]});exports.FeatureFixing=i,exports.default=i;
+//# sourceMappingURL=FeatureFixing.cjs.map

package/dist/pages/FeatureFixing.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureFixing.cjs","names":["Wrench","Button"],"sources":["../../packages/components/pages/FeatureFixing.tsx"],"sourcesContent":["import { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { Wrench } from 'lucide-react';\n\nexport interface FeatureFixingProps {\n  /** Main heading shown beneath the wrench icon. Defaults to `'Tính năng đang bảo trì'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese maintenance message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Wrench` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is temporarily unavailable due to maintenance or bug fixes.\n *\n * @example\n * ```tsx\n * import { FeatureFixing } from '@customafk/lunas-ui/pages/FeatureFixing';\n *\n * <FeatureFixing\n *   title=\"Under Maintenance\"\n *   subtitle=\"We are fixing an issue. Please check back later.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureFixing = ({\n  title = 'Tính năng đang bảo trì',\n  subtitle = 'Chúng tôi đang khắc phục vấn đề với tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureFixingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <div className=\"flex flex-col items-center gap-2\">\n        <Wrench className={cn('size-16 sm:size-24 text-orange-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-orange-500\">{/* This text indicates the feature is being fixed */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureFixing;\n"],"mappings":"4OAkCA,MAAa,GAAiB,CAC5B,QAAQ,yBACR,WAAW,4EACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,oBAGE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,WAAA,EAAA,EAAA,GAAA,CAAc,8GAA+G,CAAS,WAA3I,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,4CAAf,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,OAAD,CAAQ,WAAA,EAAA,EAAA,GAAA,CAAc,qCAAsC,CAAa,CAAI,CAAA,GAC7E,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gDAA4G,CAAA,CACxH,KAEL,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,GAElE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,GAEhF,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}

package/dist/pages/FeatureFixing.d.cts

@@ -1,2 +1,41 @@
-import { n as FeatureFixingProps, t as FeatureFixing } from "../FeatureFixing-Vwb-odpJ.cjs";
-export { FeatureFixing, FeatureFixing as default, FeatureFixingProps };
+//#region packages/components/pages/FeatureFixing.d.ts
+interface FeatureFixingProps {
+  /** Main heading shown beneath the wrench icon. Defaults to `'Tính năng đang bảo trì'`. */
+  title?: string;
+  /** Supporting text shown below the title. Defaults to a Vietnamese maintenance message. */
+  subtitle?: string;
+  /** Label for the action button. Defaults to `'Quay lại'`. */
+  buttonText?: string;
+  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */
+  onButtonClick?: () => void;
+  /** Additional class names applied to the root container element. */
+  className?: string;
+  /** Additional class names applied to the `Wrench` icon. */
+  iconClassName?: string;
+}
+/**
+ * Full-page placeholder displayed when a feature is temporarily unavailable due to maintenance or bug fixes.
+ *
+ * @example
+ * ```tsx
+ * import { FeatureFixing } from '@customafk/lunas-ui/pages/FeatureFixing';
+ *
+ * <FeatureFixing
+ *   title="Under Maintenance"
+ *   subtitle="We are fixing an issue. Please check back later."
+ *   buttonText="Go Back"
+ *   onButtonClick={() => router.back()}
+ * />
+ * ```
+ */
+declare const FeatureFixing: ({
+  title,
+  subtitle,
+  buttonText,
+  onButtonClick,
+  className,
+  iconClassName
+}: FeatureFixingProps) => import("react").JSX.Element;
+//#endregion
+export { FeatureFixing, FeatureFixing as default, FeatureFixingProps };
+//# sourceMappingURL=FeatureFixing.d.cts.map

package/dist/pages/FeatureFixing.d.mts

@@ -1,2 +1,41 @@
-import { n as FeatureFixingProps, t as FeatureFixing } from "../FeatureFixing-CRTE4tkV.mjs";
-export { FeatureFixing, FeatureFixing as default, FeatureFixingProps };
+//#region packages/components/pages/FeatureFixing.d.ts
+interface FeatureFixingProps {
+  /** Main heading shown beneath the wrench icon. Defaults to `'Tính năng đang bảo trì'`. */
+  title?: string;
+  /** Supporting text shown below the title. Defaults to a Vietnamese maintenance message. */
+  subtitle?: string;
+  /** Label for the action button. Defaults to `'Quay lại'`. */
+  buttonText?: string;
+  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */
+  onButtonClick?: () => void;
+  /** Additional class names applied to the root container element. */
+  className?: string;
+  /** Additional class names applied to the `Wrench` icon. */
+  iconClassName?: string;
+}
+/**
+ * Full-page placeholder displayed when a feature is temporarily unavailable due to maintenance or bug fixes.
+ *
+ * @example
+ * ```tsx
+ * import { FeatureFixing } from '@customafk/lunas-ui/pages/FeatureFixing';
+ *
+ * <FeatureFixing
+ *   title="Under Maintenance"
+ *   subtitle="We are fixing an issue. Please check back later."
+ *   buttonText="Go Back"
+ *   onButtonClick={() => router.back()}
+ * />
+ * ```
+ */
+declare const FeatureFixing: ({
+  title,
+  subtitle,
+  buttonText,
+  onButtonClick,
+  className,
+  iconClassName
+}: FeatureFixingProps) => import("react").JSX.Element;
+//#endregion
+export { FeatureFixing, FeatureFixing as default, FeatureFixingProps };
+//# sourceMappingURL=FeatureFixing.d.mts.map

package/dist/pages/FeatureFixing.mjs

@@ -1 +1,2 @@
-import"../button.variants-DkMqWB8G.mjs";import"../button-CCVJTHBI.mjs";import{n as e,t}from"../FeatureFixing-D7qYhigu.mjs";export{t as FeatureFixing,e as default};
+import{Button as e}from"../ui/button.mjs";import{Wrench as t}from"lucide-react";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({title:a=`Tính năng đang bảo trì`,subtitle:o=`Chúng tôi đang khắc phục vấn đề với tính năng này. Vui lòng quay lại sau.`,buttonText:s=`Quay lại`,onButtonClick:c=()=>window.history.back(),className:l,iconClassName:u})=>i(`div`,{className:n(`flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full`,l),children:[i(`div`,{className:`flex flex-col items-center gap-2`,children:[r(t,{className:n(`size-16 sm:size-24 text-orange-500`,u)}),r(`div`,{className:`text-3xl sm:text-5xl font-bold text-orange-500`})]}),r(`h1`,{className:`text-xl sm:text-2xl font-semibold mt-2`,children:a}),r(`p`,{className:`text-muted-foreground max-w-md text-sm sm:text-base`,children:o}),r(e,{onClick:c,variant:`default`,className:`mt-2`,size:`sm`,children:s})]});export{a as FeatureFixing,a as default};
+//# sourceMappingURL=FeatureFixing.mjs.map

package/dist/pages/FeatureFixing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureFixing.mjs","names":[],"sources":["../../packages/components/pages/FeatureFixing.tsx"],"sourcesContent":["import { Button } from '../ui/button';\nimport { cn } from '@customafk/react-toolkit/utils';\nimport { Wrench } from 'lucide-react';\n\nexport interface FeatureFixingProps {\n  /** Main heading shown beneath the wrench icon. Defaults to `'Tính năng đang bảo trì'`. */\n  title?: string;\n  /** Supporting text shown below the title. Defaults to a Vietnamese maintenance message. */\n  subtitle?: string;\n  /** Label for the action button. Defaults to `'Quay lại'`. */\n  buttonText?: string;\n  /** Handler called when the action button is clicked. Defaults to `window.history.back()`. */\n  onButtonClick?: () => void;\n  /** Additional class names applied to the root container element. */\n  className?: string;\n  /** Additional class names applied to the `Wrench` icon. */\n  iconClassName?: string;\n}\n\n/**\n * Full-page placeholder displayed when a feature is temporarily unavailable due to maintenance or bug fixes.\n *\n * @example\n * ```tsx\n * import { FeatureFixing } from '@customafk/lunas-ui/pages/FeatureFixing';\n *\n * <FeatureFixing\n *   title=\"Under Maintenance\"\n *   subtitle=\"We are fixing an issue. Please check back later.\"\n *   buttonText=\"Go Back\"\n *   onButtonClick={() => router.back()}\n * />\n * ```\n */\nexport const FeatureFixing = ({\n  title = 'Tính năng đang bảo trì',\n  subtitle = 'Chúng tôi đang khắc phục vấn đề với tính năng này. Vui lòng quay lại sau.',\n  buttonText = 'Quay lại',\n  onButtonClick = () => window.history.back(),\n  className,\n  iconClassName,\n}: FeatureFixingProps) => {\n  return (\n    <div className={cn('flex flex-col items-center justify-center min-h-[50vh] gap-4 sm:gap-6 py-8 sm:py-10 px-4 text-center w-full', className)}>\n      <div className=\"flex flex-col items-center gap-2\">\n        <Wrench className={cn('size-16 sm:size-24 text-orange-500', iconClassName)} />\n        <div className=\"text-3xl sm:text-5xl font-bold text-orange-500\">{/* This text indicates the feature is being fixed */}</div>\n      </div>\n\n      <h1 className=\"text-xl sm:text-2xl font-semibold mt-2\">{title}</h1>\n\n      <p className=\"text-muted-foreground max-w-md text-sm sm:text-base\">{subtitle}</p>\n\n      <Button onClick={onButtonClick} variant=\"default\" className=\"mt-2\" size=\"sm\">\n        {buttonText}\n      </Button>\n    </div>\n  );\n};\n\nexport default FeatureFixing;\n"],"mappings":"sLAkCA,MAAa,GAAiB,CAC5B,QAAQ,yBACR,WAAW,4EACX,aAAa,WACb,oBAAsB,OAAO,QAAQ,KAAK,EAC1C,YACA,mBAGE,EAAC,MAAD,CAAK,UAAW,EAAG,8GAA+G,CAAS,WAA3I,CACE,EAAC,MAAD,CAAK,UAAU,4CAAf,CACE,EAAC,EAAD,CAAQ,UAAW,EAAG,qCAAsC,CAAa,CAAI,CAAA,EAC7E,EAAC,MAAD,CAAK,UAAU,gDAA4G,CAAA,CACxH,IAEL,EAAC,KAAD,CAAI,UAAU,kDAA0C,CAAU,CAAA,EAElE,EAAC,IAAD,CAAG,UAAU,+DAAuD,CAAY,CAAA,EAEhF,EAAC,EAAD,CAAQ,QAAS,EAAe,QAAQ,UAAU,UAAU,OAAO,KAAK,cACrE,CACK,CAAA,CACL"}

package/dist/pages/LoginPage.cjs

@@ -1 +1,2 @@
-"use client";require(`../button.variants-4kw6plrv.cjs`),require(`../button-C--DAN1D.cjs`),require(`../heading-tGTqk3pA.cjs`),require(`../paragraph-DvTZvbzw.cjs`),require(`../close-DYBVx-8O.cjs`),require(`../dialog-DNEUhYSv.cjs`),require(`../input-BatF2xqI.cjs`),require(`../label--hinNDHW.cjs`),require(`../alert-DDdHIRib.cjs`);const e=require(`../LoginPage-CSewNEGN.cjs`);exports.LoginPage=e.t;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../ui/button.cjs"),t=require("../ui/dialog.cjs"),n=require("../ui/input.cjs"),r=require("../ui/label.cjs"),i=require("../alert-D31c6DLq.cjs");let a=require("lucide-react"),o=require("react"),s=require("react/jsx-runtime"),c=require("zod");const l=c.z.object({email:c.z.string().min(1,`Vui lòng nhập email`).email(`Email không hợp lệ`),password:c.z.string().min(1,`Vui lòng nhập mật khẩu`)}),u=({open:c,onOpenChange:u,onLogin:d,onForgotPassword:f,onRegister:p,isLoading:m=!1,errorMessage:h,title:g=`Đăng nhập`,subtitle:_=`Nhập thông tin để tiếp tục`})=>{let v=(0,o.useId)(),y=(0,o.useId)(),[b,x]=(0,o.useState)(``),[S,C]=(0,o.useState)(``),[w,T]=(0,o.useState)(!1),[E,D]=(0,o.useState)({});return(0,s.jsx)(t.Dialog,{open:c,onOpenChange:u,children:(0,s.jsxs)(t.DialogContent,{className:`max-sm:data-[state=open]:slide-in-from-bottom max-sm:data-[state=open]:zoom-in-100 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=closed]:zoom-out-100 max-sm:top-auto max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:max-w-full max-sm:translate-x-0 max-sm:translate-y-0 max-sm:rounded-b-none sm:max-w-sm`,children:[(0,s.jsxs)(t.DialogHeader,{children:[(0,s.jsx)(t.DialogTitle,{children:g}),(0,s.jsx)(t.DialogDescription,{children:_})]}),(0,s.jsxs)(`form`,{onSubmit:async e=>{e.preventDefault();let t=l.safeParse({email:b,password:S});if(!t.success){let e=t.error.flatten().fieldErrors;D({email:e.email?.[0],password:e.password?.[0]});return}D({}),await d(b,S)},noValidate:!0,className:`flex flex-col gap-4`,children:[h&&(0,s.jsx)(i.t,{variant:`destructive`,children:(0,s.jsx)(i.n,{children:h})}),(0,s.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,s.jsx)(r.Label,{htmlFor:v,children:`Email`}),(0,s.jsx)(n.Input,{id:v,type:`email`,autoComplete:`email`,placeholder:`you@example.com`,value:b,onChange:e=>x(e.target.value),"aria-invalid":!!E.email,disabled:m}),E.email&&(0,s.jsx)(`p`,{className:`text-destructive text-xs`,children:E.email})]}),(0,s.jsxs)(`div`,{className:`flex flex-col gap-1.5`,children:[(0,s.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,s.jsx)(r.Label,{htmlFor:y,children:`Mật khẩu`}),f&&(0,s.jsx)(e.Button,{type:`button`,variant:`link`,size:`sm`,className:`h-auto p-0 text-xs`,onClick:f,children:`Quên mật khẩu?`})]}),(0,s.jsxs)(`div`,{className:`relative`,children:[(0,s.jsx)(n.Input,{id:y,type:w?`text`:`password`,autoComplete:`current-password`,placeholder:`••••••••`,value:S,onChange:e=>C(e.target.value),"aria-invalid":!!E.password,disabled:m,className:`pr-10`}),(0,s.jsx)(`button`,{type:`button`,className:`absolute inset-y-0 right-0 flex items-center px-3 text-muted-foreground hover:text-foreground`,onMouseDown:e=>{e.preventDefault(),T(e=>!e)},"aria-label":w?`Ẩn mật khẩu`:`Hiện mật khẩu`,children:w?(0,s.jsx)(a.EyeOff,{size:16}):(0,s.jsx)(a.Eye,{size:16})})]}),E.password&&(0,s.jsx)(`p`,{className:`text-destructive text-xs`,children:E.password})]}),(0,s.jsx)(e.Button,{type:`submit`,isLoading:m,className:`w-full`,children:`Đăng nhập`}),(0,s.jsx)(e.Button,{type:`button`,variant:`outline`,className:`w-full`,disabled:m,onClick:()=>u(!1),children:`Đóng hộp thoại`})]}),p&&(0,s.jsxs)(`div`,{className:`flex justify-center gap-1 text-muted-foreground text-sm`,children:[(0,s.jsx)(`span`,{children:`Chưa có tài khoản?`}),(0,s.jsx)(e.Button,{variant:`link`,size:`sm`,className:`h-auto p-0`,onClick:p,children:`Đăng ký`})]})]})})};exports.LoginPage=u;
+//# sourceMappingURL=LoginPage.cjs.map