@customafk/lunas-ui 0.2.64 → 0.2.66

package/dist/index-DJiiPHPf.d.cts

@@ -0,0 +1,59 @@
+//#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 { PaymentLayoutUser as n, PaymentLayout as t };
+//# sourceMappingURL=index-DJiiPHPf.d.cts.map

package/dist/index-DJiiPHPf.d.mts

@@ -0,0 +1,59 @@
+//#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 { PaymentLayoutUser as n, PaymentLayout as t };
+//# sourceMappingURL=index-DJiiPHPf.d.mts.map

package/dist/index-DtIL69PB.d.cts

@@ -0,0 +1,14 @@
+//#region packages/components/features/search-modal/index.d.ts
+/**
+ * A full-screen command-palette modal that wraps the internal `SearchCommand` component inside an always-open dialog.
+ *
+ * @example
+ * import { SearchModal } from '@customafk/lunas-ui/features/search-modal';
+ *
+ * // Render conditionally based on application state
+ * {isSearchOpen && <SearchModal />}
+ */
+declare const SearchModal: () => import("react").JSX.Element;
+//#endregion
+export { SearchModal as t };
+//# sourceMappingURL=index-DtIL69PB.d.cts.map

package/dist/index-DtIL69PB.d.mts

@@ -0,0 +1,14 @@
+//#region packages/components/features/search-modal/index.d.ts
+/**
+ * A full-screen command-palette modal that wraps the internal `SearchCommand` component inside an always-open dialog.
+ *
+ * @example
+ * import { SearchModal } from '@customafk/lunas-ui/features/search-modal';
+ *
+ * // Render conditionally based on application state
+ * {isSearchOpen && <SearchModal />}
+ */
+declare const SearchModal: () => import("react").JSX.Element;
+//#endregion
+export { SearchModal as t };
+//# sourceMappingURL=index-DtIL69PB.d.mts.map