npm - @customafk/lunas-ui - Versions diffs - 0.2.82 → 0.2.83 - Mend

@customafk/lunas-ui 0.2.82 → 0.2.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (273) hide show

package/dist/layouts/ui-grid.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ui-grid.cjs","names":["Suspense"],"sources":["../../packages/components/layouts/ui-grid.tsx"],"sourcesContent":["'use client';\nimport { memo, Suspense } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\n/*\n Container-query breakpoint keys used by `UIGrid`'s `cols` and `UIGridItem`'s\n * `span`, resolved against the nearest ancestor `@container/ui-grid` (i.e. the\n * grid's own rendered width, not the viewport). These match Tailwind v4's default\n * container-query scale exactly:\n * - `'base'` — always applied, no minimum width (the fallback/mobile-first value).\n * - `'sm'` — applies from 384px (`24rem`) and up.\n * - `'md'` — applies from 448px (`28rem`) and up.\n * - `'lg'` — applies from 512px (`32rem`) and up.\n * - `'xl'` — applies from 576px (`36rem`) and up.\n * - `'2xl'` — applies from 672px (`42rem`) and up.\n * - `'3xl'` — applies from 768px (`48rem`) and up.\n \n Whichever breakpoint's minimum width is currently satisfied (in ascending\n * order) wins, same cascade behavior as Tailwind's ordinary `sm:`/`md:`/`lg:`\n * responsive classes.\n /\nexport type TUIGridBreakpoint = 'base' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl';\nexport type TUIGridCols = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\nexport type TUIGridColsConfig = TUIGridCols \| Partial<Record<TUIGridBreakpoint, TUIGridCols>>;\n\n/\n Every `grid-cols-N` class this component can emit, per breakpoint, written out\n * literally so Tailwind's JIT scanner can find each one as static text — a\n * dynamically interpolated string (e.g. `` `@${bp}/ui-grid:grid-cols-${n}` ``) would\n * never be picked up and would silently compile to nothing (the exact bug the\n * previous `Grid` component had with its `@8xl`/`@9xl`/`@10xl` classes, which don't\n * exist in Tailwind's default container-query scale).\n /\nconst COLS_CLASS_MAP: Record<TUIGridBreakpoint, Record<TUIGridCols, string>> = {\n base: {\n 1: 'grid-cols-1',\n 2: 'grid-cols-2',\n 3: 'grid-cols-3',\n 4: 'grid-cols-4',\n 5: 'grid-cols-5',\n 6: 'grid-cols-6',\n 7: 'grid-cols-7',\n 8: 'grid-cols-8',\n 9: 'grid-cols-9',\n 10: 'grid-cols-10',\n 11: 'grid-cols-11',\n 12: 'grid-cols-12',\n },\n sm: {\n 1: '@sm/ui-grid:grid-cols-1',\n 2: '@sm/ui-grid:grid-cols-2',\n 3: '@sm/ui-grid:grid-cols-3',\n 4: '@sm/ui-grid:grid-cols-4',\n 5: '@sm/ui-grid:grid-cols-5',\n 6: '@sm/ui-grid:grid-cols-6',\n 7: '@sm/ui-grid:grid-cols-7',\n 8: '@sm/ui-grid:grid-cols-8',\n 9: '@sm/ui-grid:grid-cols-9',\n 10: '@sm/ui-grid:grid-cols-10',\n 11: '@sm/ui-grid:grid-cols-11',\n 12: '@sm/ui-grid:grid-cols-12',\n },\n md: {\n 1: '@md/ui-grid:grid-cols-1',\n 2: '@md/ui-grid:grid-cols-2',\n 3: '@md/ui-grid:grid-cols-3',\n 4: '@md/ui-grid:grid-cols-4',\n 5: '@md/ui-grid:grid-cols-5',\n 6: '@md/ui-grid:grid-cols-6',\n 7: '@md/ui-grid:grid-cols-7',\n 8: '@md/ui-grid:grid-cols-8',\n 9: '@md/ui-grid:grid-cols-9',\n 10: '@md/ui-grid:grid-cols-10',\n 11: '@md/ui-grid:grid-cols-11',\n 12: '@md/ui-grid:grid-cols-12',\n },\n lg: {\n 1: '@lg/ui-grid:grid-cols-1',\n 2: '@lg/ui-grid:grid-cols-2',\n 3: '@lg/ui-grid:grid-cols-3',\n 4: '@lg/ui-grid:grid-cols-4',\n 5: '@lg/ui-grid:grid-cols-5',\n 6: '@lg/ui-grid:grid-cols-6',\n 7: '@lg/ui-grid:grid-cols-7',\n 8: '@lg/ui-grid:grid-cols-8',\n 9: '@lg/ui-grid:grid-cols-9',\n 10: '@lg/ui-grid:grid-cols-10',\n 11: '@lg/ui-grid:grid-cols-11',\n 12: '@lg/ui-grid:grid-cols-12',\n },\n xl: {\n 1: '@xl/ui-grid:grid-cols-1',\n 2: '@xl/ui-grid:grid-cols-2',\n 3: '@xl/ui-grid:grid-cols-3',\n 4: '@xl/ui-grid:grid-cols-4',\n 5: '@xl/ui-grid:grid-cols-5',\n 6: '@xl/ui-grid:grid-cols-6',\n 7: '@xl/ui-grid:grid-cols-7',\n 8: '@xl/ui-grid:grid-cols-8',\n 9: '@xl/ui-grid:grid-cols-9',\n 10: '@xl/ui-grid:grid-cols-10',\n 11: '@xl/ui-grid:grid-cols-11',\n 12: '@xl/ui-grid:grid-cols-12',\n },\n '2xl': {\n 1: '@2xl/ui-grid:grid-cols-1',\n 2: '@2xl/ui-grid:grid-cols-2',\n 3: '@2xl/ui-grid:grid-cols-3',\n 4: '@2xl/ui-grid:grid-cols-4',\n 5: '@2xl/ui-grid:grid-cols-5',\n 6: '@2xl/ui-grid:grid-cols-6',\n 7: '@2xl/ui-grid:grid-cols-7',\n 8: '@2xl/ui-grid:grid-cols-8',\n 9: '@2xl/ui-grid:grid-cols-9',\n 10: '@2xl/ui-grid:grid-cols-10',\n 11: '@2xl/ui-grid:grid-cols-11',\n 12: '@2xl/ui-grid:grid-cols-12',\n },\n '3xl': {\n 1: '@3xl/ui-grid:grid-cols-1',\n 2: '@3xl/ui-grid:grid-cols-2',\n 3: '@3xl/ui-grid:grid-cols-3',\n 4: '@3xl/ui-grid:grid-cols-4',\n 5: '@3xl/ui-grid:grid-cols-5',\n 6: '@3xl/ui-grid:grid-cols-6',\n 7: '@3xl/ui-grid:grid-cols-7',\n 8: '@3xl/ui-grid:grid-cols-8',\n 9: '@3xl/ui-grid:grid-cols-9',\n 10: '@3xl/ui-grid:grid-cols-10',\n 11: '@3xl/ui-grid:grid-cols-11',\n 12: '@3xl/ui-grid:grid-cols-12',\n },\n};\n\nconst GAP_CLASS = {\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} as const;\n\nfunction resolveGridColsClasses(cols: TUIGridColsConfig): string[] {\n if (typeof cols === 'number') return [COLS_CLASS_MAP.base[cols]];\n\n return (Object.entries(cols) as [TUIGridBreakpoint, TUIGridCols][]).map(([breakpoint, value]) => COLS_CLASS_MAP[breakpoint][value]);\n}\n\ntype UIGridProps = React.PropsWithChildren<{\n /* Additional Tailwind classes merged on top of the generated classes. /\n className?: string;\n /\n Number of base grid columns (`1`–`12`). Every `UIGridItem`'s `span` is\n * expressed against this same column count at every container width.\n * - A plain number fixes the column count at every width.\n * - An object varies the column count as the grid's own rendered width crosses\n * each container-query breakpoint (see {@link TUIGridBreakpoint} for the\n * exact pixel value of each key) — e.g. \"narrow container → 4 columns, wide\n * container → 12 columns\".\n * @default 12\n * @example\n * ```tsx\n * // 4 cols below 448px, 8 cols from 448px, 12 cols from 512px up\n * <UIGrid cols={{ base: 4, md: 8, lg: 12 }} />\n * ```\n /\n cols?: TUIGridColsConfig;\n /\n Gap between grid cells, reusing the same scale as `Flex`'s `gap` prop.\n * - `'none'` — `gap-0`\n * - `'xs'` — `gap-1`\n * - `'sm'` — `gap-2`\n * - `'md'` — `gap-4` (default)\n * - `'lg'` — `gap-6`\n * - `'xl'` — `gap-8`\n * @default 'md'\n /\n gap?: keyof typeof GAP_CLASS;\n}>;\n\n/\n A 12-column CSS Grid container with a named `@container` context, so both its\n * own column count and its `UIGridItem` children's `span` can vary based on the\n * grid's own rendered width instead of the viewport.\n \n @example\n * ```tsx\n * import { UIGrid, UIGridItem } from '@customafk/lunas-ui/layouts/ui-grid';\n \n <UIGrid gap=\"md\" cols={{ base: 4, md: 12 }}>\n * <UIGridItem span={6}>Left</UIGridItem>\n * <UIGridItem span={6}>Right</UIGridItem>\n * </UIGrid>\n * ```\n /\nexport const UIGrid = memo(({ cols = 12, gap = 'md', className, children }: UIGridProps) => {\n // A container-query subject can never be the same element that establishes the\n // container — `@container/ui-grid` must live on an ancestor of whatever reads\n // `@sm/ui-grid:` etc., so the responsive `cols` classes need their own inner\n // element, separate from the one that declares the named container.\n return (\n <div data-slot=\"ui-grid\" className=\"@container/ui-grid w-full\">\n <div data-slot=\"ui-grid-columns\" className={cn('grid w-full', resolveGridColsClasses(cols), GAP_CLASS[gap], className)}>\n {children}\n </div>\n </div>\n );\n});\nUIGrid.displayName = 'UIGrid';\n\nexport type TUIGridSpan = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\nexport type TUIGridItemSpan = TUIGridSpan \| Partial<Record<TUIGridBreakpoint, TUIGridSpan>>;\n\n/\n Every `col-span-N` class this component can emit, per breakpoint — same\n * literal-lookup-table reasoning as `COLS_CLASS_MAP` above.\n /\nconst SPAN_CLASS_MAP: Record<TUIGridBreakpoint, Record<TUIGridSpan, string>> = {\n base: {\n 1: 'col-span-1',\n 2: 'col-span-2',\n 3: 'col-span-3',\n 4: 'col-span-4',\n 5: 'col-span-5',\n 6: 'col-span-6',\n 7: 'col-span-7',\n 8: 'col-span-8',\n 9: 'col-span-9',\n 10: 'col-span-10',\n 11: 'col-span-11',\n 12: 'col-span-12',\n },\n sm: {\n 1: '@sm/ui-grid:col-span-1',\n 2: '@sm/ui-grid:col-span-2',\n 3: '@sm/ui-grid:col-span-3',\n 4: '@sm/ui-grid:col-span-4',\n 5: '@sm/ui-grid:col-span-5',\n 6: '@sm/ui-grid:col-span-6',\n 7: '@sm/ui-grid:col-span-7',\n 8: '@sm/ui-grid:col-span-8',\n 9: '@sm/ui-grid:col-span-9',\n 10: '@sm/ui-grid:col-span-10',\n 11: '@sm/ui-grid:col-span-11',\n 12: '@sm/ui-grid:col-span-12',\n },\n md: {\n 1: '@md/ui-grid:col-span-1',\n 2: '@md/ui-grid:col-span-2',\n 3: '@md/ui-grid:col-span-3',\n 4: '@md/ui-grid:col-span-4',\n 5: '@md/ui-grid:col-span-5',\n 6: '@md/ui-grid:col-span-6',\n 7: '@md/ui-grid:col-span-7',\n 8: '@md/ui-grid:col-span-8',\n 9: '@md/ui-grid:col-span-9',\n 10: '@md/ui-grid:col-span-10',\n 11: '@md/ui-grid:col-span-11',\n 12: '@md/ui-grid:col-span-12',\n },\n lg: {\n 1: '@lg/ui-grid:col-span-1',\n 2: '@lg/ui-grid:col-span-2',\n 3: '@lg/ui-grid:col-span-3',\n 4: '@lg/ui-grid:col-span-4',\n 5: '@lg/ui-grid:col-span-5',\n 6: '@lg/ui-grid:col-span-6',\n 7: '@lg/ui-grid:col-span-7',\n 8: '@lg/ui-grid:col-span-8',\n 9: '@lg/ui-grid:col-span-9',\n 10: '@lg/ui-grid:col-span-10',\n 11: '@lg/ui-grid:col-span-11',\n 12: '@lg/ui-grid:col-span-12',\n },\n xl: {\n 1: '@xl/ui-grid:col-span-1',\n 2: '@xl/ui-grid:col-span-2',\n 3: '@xl/ui-grid:col-span-3',\n 4: '@xl/ui-grid:col-span-4',\n 5: '@xl/ui-grid:col-span-5',\n 6: '@xl/ui-grid:col-span-6',\n 7: '@xl/ui-grid:col-span-7',\n 8: '@xl/ui-grid:col-span-8',\n 9: '@xl/ui-grid:col-span-9',\n 10: '@xl/ui-grid:col-span-10',\n 11: '@xl/ui-grid:col-span-11',\n 12: '@xl/ui-grid:col-span-12',\n },\n '2xl': {\n 1: '@2xl/ui-grid:col-span-1',\n 2: '@2xl/ui-grid:col-span-2',\n 3: '@2xl/ui-grid:col-span-3',\n 4: '@2xl/ui-grid:col-span-4',\n 5: '@2xl/ui-grid:col-span-5',\n 6: '@2xl/ui-grid:col-span-6',\n 7: '@2xl/ui-grid:col-span-7',\n 8: '@2xl/ui-grid:col-span-8',\n 9: '@2xl/ui-grid:col-span-9',\n 10: '@2xl/ui-grid:col-span-10',\n 11: '@2xl/ui-grid:col-span-11',\n 12: '@2xl/ui-grid:col-span-12',\n },\n '3xl': {\n 1: '@3xl/ui-grid:col-span-1',\n 2: '@3xl/ui-grid:col-span-2',\n 3: '@3xl/ui-grid:col-span-3',\n 4: '@3xl/ui-grid:col-span-4',\n 5: '@3xl/ui-grid:col-span-5',\n 6: '@3xl/ui-grid:col-span-6',\n 7: '@3xl/ui-grid:col-span-7',\n 8: '@3xl/ui-grid:col-span-8',\n 9: '@3xl/ui-grid:col-span-9',\n 10: '@3xl/ui-grid:col-span-10',\n 11: '@3xl/ui-grid:col-span-11',\n 12: '@3xl/ui-grid:col-span-12',\n },\n};\n\nfunction resolveItemSpanClasses(span: TUIGridItemSpan): string[] {\n if (typeof span === 'number') return [SPAN_CLASS_MAP.base[span]];\n\n return (Object.entries(span) as [TUIGridBreakpoint, TUIGridSpan][]).map(([breakpoint, value]) => SPAN_CLASS_MAP[breakpoint][value]);\n}\n\ntype UIGridItemProps = React.PropsWithChildren<{\n /* Additional Tailwind classes merged on top of the span classes. /\n className?: string;\n /\n Number of the grid's columns this item should occupy (`1`–`12`).\n * - A plain number fixes the span at every container width.\n * - An object varies the span as the grid's own rendered width crosses each\n * container-query breakpoint (see {@link TUIGridBreakpoint} for the exact\n * pixel value of each key), not the viewport.\n * @default 12\n * @example\n * ```tsx\n * <UIGridItem span={6} />\n * // full-width below 384px, half from 384px, a third from 448px up\n * <UIGridItem span={{ base: 12, sm: 6, md: 4 }} />\n * ```\n /\n span?: TUIGridItemSpan;\n /\n Wraps `children` in a `Suspense` boundary so a lazy-loaded cell (e.g. a\n * `React.lazy()` component) doesn't block sibling items from rendering.\n * @default true\n /\n suspense?: boolean;\n /\n Fallback UI shown while suspended children are loading. Only relevant when\n * `suspense` is `true`.\n * @default null\n /\n fallback?: React.ReactNode;\n}>;\n\n/\n A single cell inside a `UIGrid`. Spans `12` of the grid's columns by default\n * (a full-width row) and can vary its span per container-query breakpoint.\n \n @example\n * ```tsx\n * import { UIGrid, UIGridItem } from '@customafk/lunas-ui/layouts/ui-grid';\n \n <UIGrid>\n * <UIGridItem span={{ base: 12, md: 6 }} suspense fallback={<Skeleton />}>\n * <LazyWidget />\n * </UIGridItem>\n * </UIGrid>\n * ```\n */\nexport const UIGridItem = memo(({ span = 12, className, children, suspense = true, fallback = null }: UIGridItemProps) => {\n const content = suspense ? <Suspense fallback={fallback}>{children}</Suspense> : children;\n return (\n <div data-slot=\"ui-grid-item\" className={cn(resolveItemSpanClasses(span), className)}>\n {content}\n </div>\n );\n});\nUIGridItem.displayName = 'UIGridItem';\n"],"mappings":"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"}
1	+ {"version":3,"file":"ui-grid.cjs","names":["Suspense"],"sources":["../../packages/components/layouts/ui-grid.tsx"],"sourcesContent":["'use client';\nimport { memo, Suspense } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\n/*\n Container-query breakpoint keys used by `UIGrid`'s `cols` and `UIGridItem`'s\n * `span`, resolved against the nearest ancestor `@container/ui-grid` (i.e. the\n * grid's own rendered width, not the viewport). These match Tailwind v4's default\n * container-query scale exactly:\n * - `'base'` — always applied, no minimum width (the fallback/mobile-first value).\n * - `'sm'` — applies from 384px (`24rem`) and up.\n * - `'md'` — applies from 448px (`28rem`) and up.\n * - `'lg'` — applies from 512px (`32rem`) and up.\n * - `'xl'` — applies from 576px (`36rem`) and up.\n * - `'2xl'` — applies from 672px (`42rem`) and up.\n * - `'3xl'` — applies from 768px (`48rem`) and up.\n \n Whichever breakpoint's minimum width is currently satisfied (in ascending\n * order) wins, same cascade behavior as Tailwind's ordinary `sm:`/`md:`/`lg:`\n * responsive classes.\n /\nexport type TUIGridBreakpoint = 'base' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl';\nexport type TUIGridCols = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\nexport type TUIGridColsConfig = TUIGridCols \| Partial<Record<TUIGridBreakpoint, TUIGridCols>>;\n\n/\n Every `grid-cols-N` class this component can emit, per breakpoint, written out\n * literally so Tailwind's JIT scanner can find each one as static text — a\n * dynamically interpolated string (e.g. `` `@${bp}/ui-grid:grid-cols-${n}` ``) would\n * never be picked up and would silently compile to nothing (the exact bug the\n * previous `Grid` component had with its `@8xl`/`@9xl`/`@10xl` classes, which don't\n * exist in Tailwind's default container-query scale).\n /\nconst COLS_CLASS_MAP: Record<TUIGridBreakpoint, Record<TUIGridCols, string>> = {\n base: {\n 1: 'grid-cols-1',\n 2: 'grid-cols-2',\n 3: 'grid-cols-3',\n 4: 'grid-cols-4',\n 5: 'grid-cols-5',\n 6: 'grid-cols-6',\n 7: 'grid-cols-7',\n 8: 'grid-cols-8',\n 9: 'grid-cols-9',\n 10: 'grid-cols-10',\n 11: 'grid-cols-11',\n 12: 'grid-cols-12',\n },\n sm: {\n 1: '@sm/ui-grid:grid-cols-1',\n 2: '@sm/ui-grid:grid-cols-2',\n 3: '@sm/ui-grid:grid-cols-3',\n 4: '@sm/ui-grid:grid-cols-4',\n 5: '@sm/ui-grid:grid-cols-5',\n 6: '@sm/ui-grid:grid-cols-6',\n 7: '@sm/ui-grid:grid-cols-7',\n 8: '@sm/ui-grid:grid-cols-8',\n 9: '@sm/ui-grid:grid-cols-9',\n 10: '@sm/ui-grid:grid-cols-10',\n 11: '@sm/ui-grid:grid-cols-11',\n 12: '@sm/ui-grid:grid-cols-12',\n },\n md: {\n 1: '@md/ui-grid:grid-cols-1',\n 2: '@md/ui-grid:grid-cols-2',\n 3: '@md/ui-grid:grid-cols-3',\n 4: '@md/ui-grid:grid-cols-4',\n 5: '@md/ui-grid:grid-cols-5',\n 6: '@md/ui-grid:grid-cols-6',\n 7: '@md/ui-grid:grid-cols-7',\n 8: '@md/ui-grid:grid-cols-8',\n 9: '@md/ui-grid:grid-cols-9',\n 10: '@md/ui-grid:grid-cols-10',\n 11: '@md/ui-grid:grid-cols-11',\n 12: '@md/ui-grid:grid-cols-12',\n },\n lg: {\n 1: '@lg/ui-grid:grid-cols-1',\n 2: '@lg/ui-grid:grid-cols-2',\n 3: '@lg/ui-grid:grid-cols-3',\n 4: '@lg/ui-grid:grid-cols-4',\n 5: '@lg/ui-grid:grid-cols-5',\n 6: '@lg/ui-grid:grid-cols-6',\n 7: '@lg/ui-grid:grid-cols-7',\n 8: '@lg/ui-grid:grid-cols-8',\n 9: '@lg/ui-grid:grid-cols-9',\n 10: '@lg/ui-grid:grid-cols-10',\n 11: '@lg/ui-grid:grid-cols-11',\n 12: '@lg/ui-grid:grid-cols-12',\n },\n xl: {\n 1: '@xl/ui-grid:grid-cols-1',\n 2: '@xl/ui-grid:grid-cols-2',\n 3: '@xl/ui-grid:grid-cols-3',\n 4: '@xl/ui-grid:grid-cols-4',\n 5: '@xl/ui-grid:grid-cols-5',\n 6: '@xl/ui-grid:grid-cols-6',\n 7: '@xl/ui-grid:grid-cols-7',\n 8: '@xl/ui-grid:grid-cols-8',\n 9: '@xl/ui-grid:grid-cols-9',\n 10: '@xl/ui-grid:grid-cols-10',\n 11: '@xl/ui-grid:grid-cols-11',\n 12: '@xl/ui-grid:grid-cols-12',\n },\n '2xl': {\n 1: '@2xl/ui-grid:grid-cols-1',\n 2: '@2xl/ui-grid:grid-cols-2',\n 3: '@2xl/ui-grid:grid-cols-3',\n 4: '@2xl/ui-grid:grid-cols-4',\n 5: '@2xl/ui-grid:grid-cols-5',\n 6: '@2xl/ui-grid:grid-cols-6',\n 7: '@2xl/ui-grid:grid-cols-7',\n 8: '@2xl/ui-grid:grid-cols-8',\n 9: '@2xl/ui-grid:grid-cols-9',\n 10: '@2xl/ui-grid:grid-cols-10',\n 11: '@2xl/ui-grid:grid-cols-11',\n 12: '@2xl/ui-grid:grid-cols-12',\n },\n '3xl': {\n 1: '@3xl/ui-grid:grid-cols-1',\n 2: '@3xl/ui-grid:grid-cols-2',\n 3: '@3xl/ui-grid:grid-cols-3',\n 4: '@3xl/ui-grid:grid-cols-4',\n 5: '@3xl/ui-grid:grid-cols-5',\n 6: '@3xl/ui-grid:grid-cols-6',\n 7: '@3xl/ui-grid:grid-cols-7',\n 8: '@3xl/ui-grid:grid-cols-8',\n 9: '@3xl/ui-grid:grid-cols-9',\n 10: '@3xl/ui-grid:grid-cols-10',\n 11: '@3xl/ui-grid:grid-cols-11',\n 12: '@3xl/ui-grid:grid-cols-12',\n },\n};\n\nconst GAP_CLASS = {\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} as const;\n\nfunction resolveGridColsClasses(cols: TUIGridColsConfig): string[] {\n if (typeof cols === 'number') return [COLS_CLASS_MAP.base[cols]];\n\n return (Object.entries(cols) as [TUIGridBreakpoint, TUIGridCols][]).map(([breakpoint, value]) => COLS_CLASS_MAP[breakpoint][value]);\n}\n\ntype UIGridProps = React.PropsWithChildren<{\n /* Additional Tailwind classes merged on top of the generated classes. /\n className?: string;\n /\n Number of base grid columns (`1`–`12`). Every `UIGridItem`'s `span` is\n * expressed against this same column count at every container width.\n * - A plain number fixes the column count at every width.\n * - An object varies the column count as the grid's own rendered width crosses\n * each container-query breakpoint (see {@link TUIGridBreakpoint} for the\n * exact pixel value of each key) — e.g. \"narrow container → 4 columns, wide\n * container → 12 columns\".\n * @default 12\n * @example\n * ```tsx\n * // 4 cols below 448px, 8 cols from 448px, 12 cols from 512px up\n * <UIGrid cols={{ base: 4, md: 8, lg: 12 }} />\n * ```\n /\n cols?: TUIGridColsConfig;\n /\n Gap between grid cells, reusing the same scale as `Flex`'s `gap` prop.\n * - `'none'` — `gap-0`\n * - `'xs'` — `gap-1`\n * - `'sm'` — `gap-2`\n * - `'md'` — `gap-4` (default)\n * - `'lg'` — `gap-6`\n * - `'xl'` — `gap-8`\n * @default 'md'\n /\n gap?: keyof typeof GAP_CLASS;\n}> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'className'>;\n\n/\n A 12-column CSS Grid container with a named `@container` context, so both its\n * own column count and its `UIGridItem` children's `span` can vary based on the\n * grid's own rendered width instead of the viewport.\n \n @example\n * ```tsx\n * import { UIGrid, UIGridItem } from '@customafk/lunas-ui/layouts/ui-grid';\n \n <UIGrid gap=\"md\" cols={{ base: 4, md: 12 }}>\n * <UIGridItem span={6}>Left</UIGridItem>\n * <UIGridItem span={6}>Right</UIGridItem>\n * </UIGrid>\n * ```\n /\nexport const UIGrid = memo(({ cols = 12, gap = 'md', className, children, ...rest }: UIGridProps) => {\n // A container-query subject can never be the same element that establishes the\n // container — `@container/ui-grid` must live on an ancestor of whatever reads\n // `@sm/ui-grid:` etc., so the responsive `cols` classes need their own inner\n // element, separate from the one that declares the named container.\n return (\n <div data-slot=\"ui-grid\" className=\"@container/ui-grid w-full\">\n <div data-slot=\"ui-grid-columns\" {...rest} className={cn('grid w-full', resolveGridColsClasses(cols), GAP_CLASS[gap], className)}>\n {children}\n </div>\n </div>\n );\n});\nUIGrid.displayName = 'UIGrid';\n\nexport type TUIGridSpan = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\nexport type TUIGridItemSpan = TUIGridSpan \| Partial<Record<TUIGridBreakpoint, TUIGridSpan>>;\n\n/\n Every `col-span-N` class this component can emit, per breakpoint — same\n * literal-lookup-table reasoning as `COLS_CLASS_MAP` above.\n /\nconst SPAN_CLASS_MAP: Record<TUIGridBreakpoint, Record<TUIGridSpan, string>> = {\n base: {\n 1: 'col-span-1',\n 2: 'col-span-2',\n 3: 'col-span-3',\n 4: 'col-span-4',\n 5: 'col-span-5',\n 6: 'col-span-6',\n 7: 'col-span-7',\n 8: 'col-span-8',\n 9: 'col-span-9',\n 10: 'col-span-10',\n 11: 'col-span-11',\n 12: 'col-span-12',\n },\n sm: {\n 1: '@sm/ui-grid:col-span-1',\n 2: '@sm/ui-grid:col-span-2',\n 3: '@sm/ui-grid:col-span-3',\n 4: '@sm/ui-grid:col-span-4',\n 5: '@sm/ui-grid:col-span-5',\n 6: '@sm/ui-grid:col-span-6',\n 7: '@sm/ui-grid:col-span-7',\n 8: '@sm/ui-grid:col-span-8',\n 9: '@sm/ui-grid:col-span-9',\n 10: '@sm/ui-grid:col-span-10',\n 11: '@sm/ui-grid:col-span-11',\n 12: '@sm/ui-grid:col-span-12',\n },\n md: {\n 1: '@md/ui-grid:col-span-1',\n 2: '@md/ui-grid:col-span-2',\n 3: '@md/ui-grid:col-span-3',\n 4: '@md/ui-grid:col-span-4',\n 5: '@md/ui-grid:col-span-5',\n 6: '@md/ui-grid:col-span-6',\n 7: '@md/ui-grid:col-span-7',\n 8: '@md/ui-grid:col-span-8',\n 9: '@md/ui-grid:col-span-9',\n 10: '@md/ui-grid:col-span-10',\n 11: '@md/ui-grid:col-span-11',\n 12: '@md/ui-grid:col-span-12',\n },\n lg: {\n 1: '@lg/ui-grid:col-span-1',\n 2: '@lg/ui-grid:col-span-2',\n 3: '@lg/ui-grid:col-span-3',\n 4: '@lg/ui-grid:col-span-4',\n 5: '@lg/ui-grid:col-span-5',\n 6: '@lg/ui-grid:col-span-6',\n 7: '@lg/ui-grid:col-span-7',\n 8: '@lg/ui-grid:col-span-8',\n 9: '@lg/ui-grid:col-span-9',\n 10: '@lg/ui-grid:col-span-10',\n 11: '@lg/ui-grid:col-span-11',\n 12: '@lg/ui-grid:col-span-12',\n },\n xl: {\n 1: '@xl/ui-grid:col-span-1',\n 2: '@xl/ui-grid:col-span-2',\n 3: '@xl/ui-grid:col-span-3',\n 4: '@xl/ui-grid:col-span-4',\n 5: '@xl/ui-grid:col-span-5',\n 6: '@xl/ui-grid:col-span-6',\n 7: '@xl/ui-grid:col-span-7',\n 8: '@xl/ui-grid:col-span-8',\n 9: '@xl/ui-grid:col-span-9',\n 10: '@xl/ui-grid:col-span-10',\n 11: '@xl/ui-grid:col-span-11',\n 12: '@xl/ui-grid:col-span-12',\n },\n '2xl': {\n 1: '@2xl/ui-grid:col-span-1',\n 2: '@2xl/ui-grid:col-span-2',\n 3: '@2xl/ui-grid:col-span-3',\n 4: '@2xl/ui-grid:col-span-4',\n 5: '@2xl/ui-grid:col-span-5',\n 6: '@2xl/ui-grid:col-span-6',\n 7: '@2xl/ui-grid:col-span-7',\n 8: '@2xl/ui-grid:col-span-8',\n 9: '@2xl/ui-grid:col-span-9',\n 10: '@2xl/ui-grid:col-span-10',\n 11: '@2xl/ui-grid:col-span-11',\n 12: '@2xl/ui-grid:col-span-12',\n },\n '3xl': {\n 1: '@3xl/ui-grid:col-span-1',\n 2: '@3xl/ui-grid:col-span-2',\n 3: '@3xl/ui-grid:col-span-3',\n 4: '@3xl/ui-grid:col-span-4',\n 5: '@3xl/ui-grid:col-span-5',\n 6: '@3xl/ui-grid:col-span-6',\n 7: '@3xl/ui-grid:col-span-7',\n 8: '@3xl/ui-grid:col-span-8',\n 9: '@3xl/ui-grid:col-span-9',\n 10: '@3xl/ui-grid:col-span-10',\n 11: '@3xl/ui-grid:col-span-11',\n 12: '@3xl/ui-grid:col-span-12',\n },\n};\n\nfunction resolveItemSpanClasses(span: TUIGridItemSpan): string[] {\n if (typeof span === 'number') return [SPAN_CLASS_MAP.base[span]];\n\n return (Object.entries(span) as [TUIGridBreakpoint, TUIGridSpan][]).map(([breakpoint, value]) => SPAN_CLASS_MAP[breakpoint][value]);\n}\n\ntype UIGridItemProps = React.PropsWithChildren<{\n /* Additional Tailwind classes merged on top of the span classes. /\n className?: string;\n /\n Number of the grid's columns this item should occupy (`1`–`12`).\n * - A plain number fixes the span at every container width.\n * - An object varies the span as the grid's own rendered width crosses each\n * container-query breakpoint (see {@link TUIGridBreakpoint} for the exact\n * pixel value of each key), not the viewport.\n * @default 12\n * @example\n * ```tsx\n * <UIGridItem span={6} />\n * // full-width below 384px, half from 384px, a third from 448px up\n * <UIGridItem span={{ base: 12, sm: 6, md: 4 }} />\n * ```\n /\n span?: TUIGridItemSpan;\n /\n Wraps `children` in a `Suspense` boundary so a lazy-loaded cell (e.g. a\n * `React.lazy()` component) doesn't block sibling items from rendering.\n * @default true\n /\n suspense?: boolean;\n /\n Fallback UI shown while suspended children are loading. Only relevant when\n * `suspense` is `true`.\n * @default null\n /\n fallback?: React.ReactNode;\n}> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'className'>;\n\n/\n A single cell inside a `UIGrid`. Spans `12` of the grid's columns by default\n * (a full-width row) and can vary its span per container-query breakpoint.\n \n @example\n * ```tsx\n * import { UIGrid, UIGridItem } from '@customafk/lunas-ui/layouts/ui-grid';\n \n <UIGrid>\n * <UIGridItem span={{ base: 12, md: 6 }} suspense fallback={<Skeleton />}>\n * <LazyWidget />\n * </UIGridItem>\n * </UIGrid>\n * ```\n */\nexport const UIGridItem = memo(({ span = 12, className, children, suspense = true, fallback = null, ...rest }: UIGridItemProps) => {\n const content = suspense ? <Suspense fallback={fallback}>{children}</Suspense> : children;\n return (\n <div data-slot=\"ui-grid-item\" {...rest} className={cn(resolveItemSpanClasses(span), className)}>\n {content}\n </div>\n );\n});\nUIGridItem.displayName = 'UIGridItem';\n"],"mappings":"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"}

package/dist/layouts/ui-grid.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as TUIGridSpan, i as TUIGridItemSpan, n as TUIGridCols, o as UIGrid, r as TUIGridColsConfig, s as UIGridItem, t as TUIGridBreakpoint } from "../ui-grid-CzL5J7cm.cjs";
+import { a as TUIGridSpan, i as TUIGridItemSpan, n as TUIGridCols, o as UIGrid, r as TUIGridColsConfig, s as UIGridItem, t as TUIGridBreakpoint } from "../ui-grid-D1-Ponqs.cjs";
 export { TUIGridBreakpoint, TUIGridCols, TUIGridColsConfig, TUIGridItemSpan, TUIGridSpan, UIGrid, UIGridItem };

package/dist/layouts/ui-grid.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as TUIGridSpan, i as TUIGridItemSpan, n as TUIGridCols, o as UIGrid, r as TUIGridColsConfig, s as UIGridItem, t as TUIGridBreakpoint } from "../ui-grid-CzL5J7cm.mjs";
+import { a as TUIGridSpan, i as TUIGridItemSpan, n as TUIGridCols, o as UIGrid, r as TUIGridColsConfig, s as UIGridItem, t as TUIGridBreakpoint } from "../ui-grid-D1-Ponqs.mjs";
 export { TUIGridBreakpoint, TUIGridCols, TUIGridColsConfig, TUIGridItemSpan, TUIGridSpan, UIGrid, UIGridItem };

package/dist/layouts/ui-grid.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Suspense as e,memo as t}from"react";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r}from"react/jsx-runtime";const i={base:{1:`grid-cols-1`,2:`grid-cols-2`,3:`grid-cols-3`,4:`grid-cols-4`,5:`grid-cols-5`,6:`grid-cols-6`,7:`grid-cols-7`,8:`grid-cols-8`,9:`grid-cols-9`,10:`grid-cols-10`,11:`grid-cols-11`,12:`grid-cols-12`},sm:{1:`@sm/ui-grid:grid-cols-1`,2:`@sm/ui-grid:grid-cols-2`,3:`@sm/ui-grid:grid-cols-3`,4:`@sm/ui-grid:grid-cols-4`,5:`@sm/ui-grid:grid-cols-5`,6:`@sm/ui-grid:grid-cols-6`,7:`@sm/ui-grid:grid-cols-7`,8:`@sm/ui-grid:grid-cols-8`,9:`@sm/ui-grid:grid-cols-9`,10:`@sm/ui-grid:grid-cols-10`,11:`@sm/ui-grid:grid-cols-11`,12:`@sm/ui-grid:grid-cols-12`},md:{1:`@md/ui-grid:grid-cols-1`,2:`@md/ui-grid:grid-cols-2`,3:`@md/ui-grid:grid-cols-3`,4:`@md/ui-grid:grid-cols-4`,5:`@md/ui-grid:grid-cols-5`,6:`@md/ui-grid:grid-cols-6`,7:`@md/ui-grid:grid-cols-7`,8:`@md/ui-grid:grid-cols-8`,9:`@md/ui-grid:grid-cols-9`,10:`@md/ui-grid:grid-cols-10`,11:`@md/ui-grid:grid-cols-11`,12:`@md/ui-grid:grid-cols-12`},lg:{1:`@lg/ui-grid:grid-cols-1`,2:`@lg/ui-grid:grid-cols-2`,3:`@lg/ui-grid:grid-cols-3`,4:`@lg/ui-grid:grid-cols-4`,5:`@lg/ui-grid:grid-cols-5`,6:`@lg/ui-grid:grid-cols-6`,7:`@lg/ui-grid:grid-cols-7`,8:`@lg/ui-grid:grid-cols-8`,9:`@lg/ui-grid:grid-cols-9`,10:`@lg/ui-grid:grid-cols-10`,11:`@lg/ui-grid:grid-cols-11`,12:`@lg/ui-grid:grid-cols-12`},xl:{1:`@xl/ui-grid:grid-cols-1`,2:`@xl/ui-grid:grid-cols-2`,3:`@xl/ui-grid:grid-cols-3`,4:`@xl/ui-grid:grid-cols-4`,5:`@xl/ui-grid:grid-cols-5`,6:`@xl/ui-grid:grid-cols-6`,7:`@xl/ui-grid:grid-cols-7`,8:`@xl/ui-grid:grid-cols-8`,9:`@xl/ui-grid:grid-cols-9`,10:`@xl/ui-grid:grid-cols-10`,11:`@xl/ui-grid:grid-cols-11`,12:`@xl/ui-grid:grid-cols-12`},"2xl":{1:`@2xl/ui-grid:grid-cols-1`,2:`@2xl/ui-grid:grid-cols-2`,3:`@2xl/ui-grid:grid-cols-3`,4:`@2xl/ui-grid:grid-cols-4`,5:`@2xl/ui-grid:grid-cols-5`,6:`@2xl/ui-grid:grid-cols-6`,7:`@2xl/ui-grid:grid-cols-7`,8:`@2xl/ui-grid:grid-cols-8`,9:`@2xl/ui-grid:grid-cols-9`,10:`@2xl/ui-grid:grid-cols-10`,11:`@2xl/ui-grid:grid-cols-11`,12:`@2xl/ui-grid:grid-cols-12`},"3xl":{1:`@3xl/ui-grid:grid-cols-1`,2:`@3xl/ui-grid:grid-cols-2`,3:`@3xl/ui-grid:grid-cols-3`,4:`@3xl/ui-grid:grid-cols-4`,5:`@3xl/ui-grid:grid-cols-5`,6:`@3xl/ui-grid:grid-cols-6`,7:`@3xl/ui-grid:grid-cols-7`,8:`@3xl/ui-grid:grid-cols-8`,9:`@3xl/ui-grid:grid-cols-9`,10:`@3xl/ui-grid:grid-cols-10`,11:`@3xl/ui-grid:grid-cols-11`,12:`@3xl/ui-grid:grid-cols-12`}},a={xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`};function o(e){return typeof e==`number`?[i.base[e]]:Object.entries(e).map(([e,t])=>i[e][t])}const s=t(({cols:e=12,gap:t=`md`,className:i,children:s})=>r(`div`,{"data-slot":`ui-grid`,className:`@container/ui-grid w-full`,children:r(`div`,{"data-slot":`ui-grid-columns`,className:n(`grid w-full`,o(e),a[t],i),children:s})}));s.displayName=`UIGrid`;const c={base:{1:`col-span-1`,2:`col-span-2`,3:`col-span-3`,4:`col-span-4`,5:`col-span-5`,6:`col-span-6`,7:`col-span-7`,8:`col-span-8`,9:`col-span-9`,10:`col-span-10`,11:`col-span-11`,12:`col-span-12`},sm:{1:`@sm/ui-grid:col-span-1`,2:`@sm/ui-grid:col-span-2`,3:`@sm/ui-grid:col-span-3`,4:`@sm/ui-grid:col-span-4`,5:`@sm/ui-grid:col-span-5`,6:`@sm/ui-grid:col-span-6`,7:`@sm/ui-grid:col-span-7`,8:`@sm/ui-grid:col-span-8`,9:`@sm/ui-grid:col-span-9`,10:`@sm/ui-grid:col-span-10`,11:`@sm/ui-grid:col-span-11`,12:`@sm/ui-grid:col-span-12`},md:{1:`@md/ui-grid:col-span-1`,2:`@md/ui-grid:col-span-2`,3:`@md/ui-grid:col-span-3`,4:`@md/ui-grid:col-span-4`,5:`@md/ui-grid:col-span-5`,6:`@md/ui-grid:col-span-6`,7:`@md/ui-grid:col-span-7`,8:`@md/ui-grid:col-span-8`,9:`@md/ui-grid:col-span-9`,10:`@md/ui-grid:col-span-10`,11:`@md/ui-grid:col-span-11`,12:`@md/ui-grid:col-span-12`},lg:{1:`@lg/ui-grid:col-span-1`,2:`@lg/ui-grid:col-span-2`,3:`@lg/ui-grid:col-span-3`,4:`@lg/ui-grid:col-span-4`,5:`@lg/ui-grid:col-span-5`,6:`@lg/ui-grid:col-span-6`,7:`@lg/ui-grid:col-span-7`,8:`@lg/ui-grid:col-span-8`,9:`@lg/ui-grid:col-span-9`,10:`@lg/ui-grid:col-span-10`,11:`@lg/ui-grid:col-span-11`,12:`@lg/ui-grid:col-span-12`},xl:{1:`@xl/ui-grid:col-span-1`,2:`@xl/ui-grid:col-span-2`,3:`@xl/ui-grid:col-span-3`,4:`@xl/ui-grid:col-span-4`,5:`@xl/ui-grid:col-span-5`,6:`@xl/ui-grid:col-span-6`,7:`@xl/ui-grid:col-span-7`,8:`@xl/ui-grid:col-span-8`,9:`@xl/ui-grid:col-span-9`,10:`@xl/ui-grid:col-span-10`,11:`@xl/ui-grid:col-span-11`,12:`@xl/ui-grid:col-span-12`},"2xl":{1:`@2xl/ui-grid:col-span-1`,2:`@2xl/ui-grid:col-span-2`,3:`@2xl/ui-grid:col-span-3`,4:`@2xl/ui-grid:col-span-4`,5:`@2xl/ui-grid:col-span-5`,6:`@2xl/ui-grid:col-span-6`,7:`@2xl/ui-grid:col-span-7`,8:`@2xl/ui-grid:col-span-8`,9:`@2xl/ui-grid:col-span-9`,10:`@2xl/ui-grid:col-span-10`,11:`@2xl/ui-grid:col-span-11`,12:`@2xl/ui-grid:col-span-12`},"3xl":{1:`@3xl/ui-grid:col-span-1`,2:`@3xl/ui-grid:col-span-2`,3:`@3xl/ui-grid:col-span-3`,4:`@3xl/ui-grid:col-span-4`,5:`@3xl/ui-grid:col-span-5`,6:`@3xl/ui-grid:col-span-6`,7:`@3xl/ui-grid:col-span-7`,8:`@3xl/ui-grid:col-span-8`,9:`@3xl/ui-grid:col-span-9`,10:`@3xl/ui-grid:col-span-10`,11:`@3xl/ui-grid:col-span-11`,12:`@3xl/ui-grid:col-span-12`}};function l(e){return typeof e==`number`?[c.base[e]]:Object.entries(e).map(([e,t])=>c[e][t])}const u=t(({span:t=12,className:i,children:a,suspense:o=!0,fallback:s=null})=>{let c=o?r(e,{fallback:s,children:a}):a;return r(`div`,{"data-slot":`ui-grid-item`,className:n(l(t),i),children:c})});u.displayName=`UIGridItem`;export{s as UIGrid,u as UIGridItem};
+"use client";import{Suspense as e,memo as t}from"react";import{cn as n}from"@customafk/react-toolkit/utils";import{jsx as r}from"react/jsx-runtime";const i={base:{1:`grid-cols-1`,2:`grid-cols-2`,3:`grid-cols-3`,4:`grid-cols-4`,5:`grid-cols-5`,6:`grid-cols-6`,7:`grid-cols-7`,8:`grid-cols-8`,9:`grid-cols-9`,10:`grid-cols-10`,11:`grid-cols-11`,12:`grid-cols-12`},sm:{1:`@sm/ui-grid:grid-cols-1`,2:`@sm/ui-grid:grid-cols-2`,3:`@sm/ui-grid:grid-cols-3`,4:`@sm/ui-grid:grid-cols-4`,5:`@sm/ui-grid:grid-cols-5`,6:`@sm/ui-grid:grid-cols-6`,7:`@sm/ui-grid:grid-cols-7`,8:`@sm/ui-grid:grid-cols-8`,9:`@sm/ui-grid:grid-cols-9`,10:`@sm/ui-grid:grid-cols-10`,11:`@sm/ui-grid:grid-cols-11`,12:`@sm/ui-grid:grid-cols-12`},md:{1:`@md/ui-grid:grid-cols-1`,2:`@md/ui-grid:grid-cols-2`,3:`@md/ui-grid:grid-cols-3`,4:`@md/ui-grid:grid-cols-4`,5:`@md/ui-grid:grid-cols-5`,6:`@md/ui-grid:grid-cols-6`,7:`@md/ui-grid:grid-cols-7`,8:`@md/ui-grid:grid-cols-8`,9:`@md/ui-grid:grid-cols-9`,10:`@md/ui-grid:grid-cols-10`,11:`@md/ui-grid:grid-cols-11`,12:`@md/ui-grid:grid-cols-12`},lg:{1:`@lg/ui-grid:grid-cols-1`,2:`@lg/ui-grid:grid-cols-2`,3:`@lg/ui-grid:grid-cols-3`,4:`@lg/ui-grid:grid-cols-4`,5:`@lg/ui-grid:grid-cols-5`,6:`@lg/ui-grid:grid-cols-6`,7:`@lg/ui-grid:grid-cols-7`,8:`@lg/ui-grid:grid-cols-8`,9:`@lg/ui-grid:grid-cols-9`,10:`@lg/ui-grid:grid-cols-10`,11:`@lg/ui-grid:grid-cols-11`,12:`@lg/ui-grid:grid-cols-12`},xl:{1:`@xl/ui-grid:grid-cols-1`,2:`@xl/ui-grid:grid-cols-2`,3:`@xl/ui-grid:grid-cols-3`,4:`@xl/ui-grid:grid-cols-4`,5:`@xl/ui-grid:grid-cols-5`,6:`@xl/ui-grid:grid-cols-6`,7:`@xl/ui-grid:grid-cols-7`,8:`@xl/ui-grid:grid-cols-8`,9:`@xl/ui-grid:grid-cols-9`,10:`@xl/ui-grid:grid-cols-10`,11:`@xl/ui-grid:grid-cols-11`,12:`@xl/ui-grid:grid-cols-12`},"2xl":{1:`@2xl/ui-grid:grid-cols-1`,2:`@2xl/ui-grid:grid-cols-2`,3:`@2xl/ui-grid:grid-cols-3`,4:`@2xl/ui-grid:grid-cols-4`,5:`@2xl/ui-grid:grid-cols-5`,6:`@2xl/ui-grid:grid-cols-6`,7:`@2xl/ui-grid:grid-cols-7`,8:`@2xl/ui-grid:grid-cols-8`,9:`@2xl/ui-grid:grid-cols-9`,10:`@2xl/ui-grid:grid-cols-10`,11:`@2xl/ui-grid:grid-cols-11`,12:`@2xl/ui-grid:grid-cols-12`},"3xl":{1:`@3xl/ui-grid:grid-cols-1`,2:`@3xl/ui-grid:grid-cols-2`,3:`@3xl/ui-grid:grid-cols-3`,4:`@3xl/ui-grid:grid-cols-4`,5:`@3xl/ui-grid:grid-cols-5`,6:`@3xl/ui-grid:grid-cols-6`,7:`@3xl/ui-grid:grid-cols-7`,8:`@3xl/ui-grid:grid-cols-8`,9:`@3xl/ui-grid:grid-cols-9`,10:`@3xl/ui-grid:grid-cols-10`,11:`@3xl/ui-grid:grid-cols-11`,12:`@3xl/ui-grid:grid-cols-12`}},a={xs:`gap-1`,sm:`gap-2`,md:`gap-4`,lg:`gap-6`,xl:`gap-8`,none:`gap-0`};function o(e){return typeof e==`number`?[i.base[e]]:Object.entries(e).map(([e,t])=>i[e][t])}const s=t(({cols:e=12,gap:t=`md`,className:i,children:s,...c})=>r(`div`,{"data-slot":`ui-grid`,className:`@container/ui-grid w-full`,children:r(`div`,{"data-slot":`ui-grid-columns`,...c,className:n(`grid w-full`,o(e),a[t],i),children:s})}));s.displayName=`UIGrid`;const c={base:{1:`col-span-1`,2:`col-span-2`,3:`col-span-3`,4:`col-span-4`,5:`col-span-5`,6:`col-span-6`,7:`col-span-7`,8:`col-span-8`,9:`col-span-9`,10:`col-span-10`,11:`col-span-11`,12:`col-span-12`},sm:{1:`@sm/ui-grid:col-span-1`,2:`@sm/ui-grid:col-span-2`,3:`@sm/ui-grid:col-span-3`,4:`@sm/ui-grid:col-span-4`,5:`@sm/ui-grid:col-span-5`,6:`@sm/ui-grid:col-span-6`,7:`@sm/ui-grid:col-span-7`,8:`@sm/ui-grid:col-span-8`,9:`@sm/ui-grid:col-span-9`,10:`@sm/ui-grid:col-span-10`,11:`@sm/ui-grid:col-span-11`,12:`@sm/ui-grid:col-span-12`},md:{1:`@md/ui-grid:col-span-1`,2:`@md/ui-grid:col-span-2`,3:`@md/ui-grid:col-span-3`,4:`@md/ui-grid:col-span-4`,5:`@md/ui-grid:col-span-5`,6:`@md/ui-grid:col-span-6`,7:`@md/ui-grid:col-span-7`,8:`@md/ui-grid:col-span-8`,9:`@md/ui-grid:col-span-9`,10:`@md/ui-grid:col-span-10`,11:`@md/ui-grid:col-span-11`,12:`@md/ui-grid:col-span-12`},lg:{1:`@lg/ui-grid:col-span-1`,2:`@lg/ui-grid:col-span-2`,3:`@lg/ui-grid:col-span-3`,4:`@lg/ui-grid:col-span-4`,5:`@lg/ui-grid:col-span-5`,6:`@lg/ui-grid:col-span-6`,7:`@lg/ui-grid:col-span-7`,8:`@lg/ui-grid:col-span-8`,9:`@lg/ui-grid:col-span-9`,10:`@lg/ui-grid:col-span-10`,11:`@lg/ui-grid:col-span-11`,12:`@lg/ui-grid:col-span-12`},xl:{1:`@xl/ui-grid:col-span-1`,2:`@xl/ui-grid:col-span-2`,3:`@xl/ui-grid:col-span-3`,4:`@xl/ui-grid:col-span-4`,5:`@xl/ui-grid:col-span-5`,6:`@xl/ui-grid:col-span-6`,7:`@xl/ui-grid:col-span-7`,8:`@xl/ui-grid:col-span-8`,9:`@xl/ui-grid:col-span-9`,10:`@xl/ui-grid:col-span-10`,11:`@xl/ui-grid:col-span-11`,12:`@xl/ui-grid:col-span-12`},"2xl":{1:`@2xl/ui-grid:col-span-1`,2:`@2xl/ui-grid:col-span-2`,3:`@2xl/ui-grid:col-span-3`,4:`@2xl/ui-grid:col-span-4`,5:`@2xl/ui-grid:col-span-5`,6:`@2xl/ui-grid:col-span-6`,7:`@2xl/ui-grid:col-span-7`,8:`@2xl/ui-grid:col-span-8`,9:`@2xl/ui-grid:col-span-9`,10:`@2xl/ui-grid:col-span-10`,11:`@2xl/ui-grid:col-span-11`,12:`@2xl/ui-grid:col-span-12`},"3xl":{1:`@3xl/ui-grid:col-span-1`,2:`@3xl/ui-grid:col-span-2`,3:`@3xl/ui-grid:col-span-3`,4:`@3xl/ui-grid:col-span-4`,5:`@3xl/ui-grid:col-span-5`,6:`@3xl/ui-grid:col-span-6`,7:`@3xl/ui-grid:col-span-7`,8:`@3xl/ui-grid:col-span-8`,9:`@3xl/ui-grid:col-span-9`,10:`@3xl/ui-grid:col-span-10`,11:`@3xl/ui-grid:col-span-11`,12:`@3xl/ui-grid:col-span-12`}};function l(e){return typeof e==`number`?[c.base[e]]:Object.entries(e).map(([e,t])=>c[e][t])}const u=t(({span:t=12,className:i,children:a,suspense:o=!0,fallback:s=null,...c})=>{let u=o?r(e,{fallback:s,children:a}):a;return r(`div`,{"data-slot":`ui-grid-item`,...c,className:n(l(t),i),children:u})});u.displayName=`UIGridItem`;export{s as UIGrid,u as UIGridItem};
 //# sourceMappingURL=ui-grid.mjs.map

package/dist/layouts/ui-grid.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ui-grid.mjs","names":[],"sources":["../../packages/components/layouts/ui-grid.tsx"],"sourcesContent":["'use client';\nimport { memo, Suspense } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\n/*\n Container-query breakpoint keys used by `UIGrid`'s `cols` and `UIGridItem`'s\n * `span`, resolved against the nearest ancestor `@container/ui-grid` (i.e. the\n * grid's own rendered width, not the viewport). These match Tailwind v4's default\n * container-query scale exactly:\n * - `'base'` — always applied, no minimum width (the fallback/mobile-first value).\n * - `'sm'` — applies from 384px (`24rem`) and up.\n * - `'md'` — applies from 448px (`28rem`) and up.\n * - `'lg'` — applies from 512px (`32rem`) and up.\n * - `'xl'` — applies from 576px (`36rem`) and up.\n * - `'2xl'` — applies from 672px (`42rem`) and up.\n * - `'3xl'` — applies from 768px (`48rem`) and up.\n \n Whichever breakpoint's minimum width is currently satisfied (in ascending\n * order) wins, same cascade behavior as Tailwind's ordinary `sm:`/`md:`/`lg:`\n * responsive classes.\n /\nexport type TUIGridBreakpoint = 'base' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl';\nexport type TUIGridCols = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\nexport type TUIGridColsConfig = TUIGridCols \| Partial<Record<TUIGridBreakpoint, TUIGridCols>>;\n\n/\n Every `grid-cols-N` class this component can emit, per breakpoint, written out\n * literally so Tailwind's JIT scanner can find each one as static text — a\n * dynamically interpolated string (e.g. `` `@${bp}/ui-grid:grid-cols-${n}` ``) would\n * never be picked up and would silently compile to nothing (the exact bug the\n * previous `Grid` component had with its `@8xl`/`@9xl`/`@10xl` classes, which don't\n * exist in Tailwind's default container-query scale).\n /\nconst COLS_CLASS_MAP: Record<TUIGridBreakpoint, Record<TUIGridCols, string>> = {\n base: {\n 1: 'grid-cols-1',\n 2: 'grid-cols-2',\n 3: 'grid-cols-3',\n 4: 'grid-cols-4',\n 5: 'grid-cols-5',\n 6: 'grid-cols-6',\n 7: 'grid-cols-7',\n 8: 'grid-cols-8',\n 9: 'grid-cols-9',\n 10: 'grid-cols-10',\n 11: 'grid-cols-11',\n 12: 'grid-cols-12',\n },\n sm: {\n 1: '@sm/ui-grid:grid-cols-1',\n 2: '@sm/ui-grid:grid-cols-2',\n 3: '@sm/ui-grid:grid-cols-3',\n 4: '@sm/ui-grid:grid-cols-4',\n 5: '@sm/ui-grid:grid-cols-5',\n 6: '@sm/ui-grid:grid-cols-6',\n 7: '@sm/ui-grid:grid-cols-7',\n 8: '@sm/ui-grid:grid-cols-8',\n 9: '@sm/ui-grid:grid-cols-9',\n 10: '@sm/ui-grid:grid-cols-10',\n 11: '@sm/ui-grid:grid-cols-11',\n 12: '@sm/ui-grid:grid-cols-12',\n },\n md: {\n 1: '@md/ui-grid:grid-cols-1',\n 2: '@md/ui-grid:grid-cols-2',\n 3: '@md/ui-grid:grid-cols-3',\n 4: '@md/ui-grid:grid-cols-4',\n 5: '@md/ui-grid:grid-cols-5',\n 6: '@md/ui-grid:grid-cols-6',\n 7: '@md/ui-grid:grid-cols-7',\n 8: '@md/ui-grid:grid-cols-8',\n 9: '@md/ui-grid:grid-cols-9',\n 10: '@md/ui-grid:grid-cols-10',\n 11: '@md/ui-grid:grid-cols-11',\n 12: '@md/ui-grid:grid-cols-12',\n },\n lg: {\n 1: '@lg/ui-grid:grid-cols-1',\n 2: '@lg/ui-grid:grid-cols-2',\n 3: '@lg/ui-grid:grid-cols-3',\n 4: '@lg/ui-grid:grid-cols-4',\n 5: '@lg/ui-grid:grid-cols-5',\n 6: '@lg/ui-grid:grid-cols-6',\n 7: '@lg/ui-grid:grid-cols-7',\n 8: '@lg/ui-grid:grid-cols-8',\n 9: '@lg/ui-grid:grid-cols-9',\n 10: '@lg/ui-grid:grid-cols-10',\n 11: '@lg/ui-grid:grid-cols-11',\n 12: '@lg/ui-grid:grid-cols-12',\n },\n xl: {\n 1: '@xl/ui-grid:grid-cols-1',\n 2: '@xl/ui-grid:grid-cols-2',\n 3: '@xl/ui-grid:grid-cols-3',\n 4: '@xl/ui-grid:grid-cols-4',\n 5: '@xl/ui-grid:grid-cols-5',\n 6: '@xl/ui-grid:grid-cols-6',\n 7: '@xl/ui-grid:grid-cols-7',\n 8: '@xl/ui-grid:grid-cols-8',\n 9: '@xl/ui-grid:grid-cols-9',\n 10: '@xl/ui-grid:grid-cols-10',\n 11: '@xl/ui-grid:grid-cols-11',\n 12: '@xl/ui-grid:grid-cols-12',\n },\n '2xl': {\n 1: '@2xl/ui-grid:grid-cols-1',\n 2: '@2xl/ui-grid:grid-cols-2',\n 3: '@2xl/ui-grid:grid-cols-3',\n 4: '@2xl/ui-grid:grid-cols-4',\n 5: '@2xl/ui-grid:grid-cols-5',\n 6: '@2xl/ui-grid:grid-cols-6',\n 7: '@2xl/ui-grid:grid-cols-7',\n 8: '@2xl/ui-grid:grid-cols-8',\n 9: '@2xl/ui-grid:grid-cols-9',\n 10: '@2xl/ui-grid:grid-cols-10',\n 11: '@2xl/ui-grid:grid-cols-11',\n 12: '@2xl/ui-grid:grid-cols-12',\n },\n '3xl': {\n 1: '@3xl/ui-grid:grid-cols-1',\n 2: '@3xl/ui-grid:grid-cols-2',\n 3: '@3xl/ui-grid:grid-cols-3',\n 4: '@3xl/ui-grid:grid-cols-4',\n 5: '@3xl/ui-grid:grid-cols-5',\n 6: '@3xl/ui-grid:grid-cols-6',\n 7: '@3xl/ui-grid:grid-cols-7',\n 8: '@3xl/ui-grid:grid-cols-8',\n 9: '@3xl/ui-grid:grid-cols-9',\n 10: '@3xl/ui-grid:grid-cols-10',\n 11: '@3xl/ui-grid:grid-cols-11',\n 12: '@3xl/ui-grid:grid-cols-12',\n },\n};\n\nconst GAP_CLASS = {\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} as const;\n\nfunction resolveGridColsClasses(cols: TUIGridColsConfig): string[] {\n if (typeof cols === 'number') return [COLS_CLASS_MAP.base[cols]];\n\n return (Object.entries(cols) as [TUIGridBreakpoint, TUIGridCols][]).map(([breakpoint, value]) => COLS_CLASS_MAP[breakpoint][value]);\n}\n\ntype UIGridProps = React.PropsWithChildren<{\n /* Additional Tailwind classes merged on top of the generated classes. /\n className?: string;\n /\n Number of base grid columns (`1`–`12`). Every `UIGridItem`'s `span` is\n * expressed against this same column count at every container width.\n * - A plain number fixes the column count at every width.\n * - An object varies the column count as the grid's own rendered width crosses\n * each container-query breakpoint (see {@link TUIGridBreakpoint} for the\n * exact pixel value of each key) — e.g. \"narrow container → 4 columns, wide\n * container → 12 columns\".\n * @default 12\n * @example\n * ```tsx\n * // 4 cols below 448px, 8 cols from 448px, 12 cols from 512px up\n * <UIGrid cols={{ base: 4, md: 8, lg: 12 }} />\n * ```\n /\n cols?: TUIGridColsConfig;\n /\n Gap between grid cells, reusing the same scale as `Flex`'s `gap` prop.\n * - `'none'` — `gap-0`\n * - `'xs'` — `gap-1`\n * - `'sm'` — `gap-2`\n * - `'md'` — `gap-4` (default)\n * - `'lg'` — `gap-6`\n * - `'xl'` — `gap-8`\n * @default 'md'\n /\n gap?: keyof typeof GAP_CLASS;\n}>;\n\n/\n A 12-column CSS Grid container with a named `@container` context, so both its\n * own column count and its `UIGridItem` children's `span` can vary based on the\n * grid's own rendered width instead of the viewport.\n \n @example\n * ```tsx\n * import { UIGrid, UIGridItem } from '@customafk/lunas-ui/layouts/ui-grid';\n \n <UIGrid gap=\"md\" cols={{ base: 4, md: 12 }}>\n * <UIGridItem span={6}>Left</UIGridItem>\n * <UIGridItem span={6}>Right</UIGridItem>\n * </UIGrid>\n * ```\n /\nexport const UIGrid = memo(({ cols = 12, gap = 'md', className, children }: UIGridProps) => {\n // A container-query subject can never be the same element that establishes the\n // container — `@container/ui-grid` must live on an ancestor of whatever reads\n // `@sm/ui-grid:` etc., so the responsive `cols` classes need their own inner\n // element, separate from the one that declares the named container.\n return (\n <div data-slot=\"ui-grid\" className=\"@container/ui-grid w-full\">\n <div data-slot=\"ui-grid-columns\" className={cn('grid w-full', resolveGridColsClasses(cols), GAP_CLASS[gap], className)}>\n {children}\n </div>\n </div>\n );\n});\nUIGrid.displayName = 'UIGrid';\n\nexport type TUIGridSpan = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\nexport type TUIGridItemSpan = TUIGridSpan \| Partial<Record<TUIGridBreakpoint, TUIGridSpan>>;\n\n/\n Every `col-span-N` class this component can emit, per breakpoint — same\n * literal-lookup-table reasoning as `COLS_CLASS_MAP` above.\n /\nconst SPAN_CLASS_MAP: Record<TUIGridBreakpoint, Record<TUIGridSpan, string>> = {\n base: {\n 1: 'col-span-1',\n 2: 'col-span-2',\n 3: 'col-span-3',\n 4: 'col-span-4',\n 5: 'col-span-5',\n 6: 'col-span-6',\n 7: 'col-span-7',\n 8: 'col-span-8',\n 9: 'col-span-9',\n 10: 'col-span-10',\n 11: 'col-span-11',\n 12: 'col-span-12',\n },\n sm: {\n 1: '@sm/ui-grid:col-span-1',\n 2: '@sm/ui-grid:col-span-2',\n 3: '@sm/ui-grid:col-span-3',\n 4: '@sm/ui-grid:col-span-4',\n 5: '@sm/ui-grid:col-span-5',\n 6: '@sm/ui-grid:col-span-6',\n 7: '@sm/ui-grid:col-span-7',\n 8: '@sm/ui-grid:col-span-8',\n 9: '@sm/ui-grid:col-span-9',\n 10: '@sm/ui-grid:col-span-10',\n 11: '@sm/ui-grid:col-span-11',\n 12: '@sm/ui-grid:col-span-12',\n },\n md: {\n 1: '@md/ui-grid:col-span-1',\n 2: '@md/ui-grid:col-span-2',\n 3: '@md/ui-grid:col-span-3',\n 4: '@md/ui-grid:col-span-4',\n 5: '@md/ui-grid:col-span-5',\n 6: '@md/ui-grid:col-span-6',\n 7: '@md/ui-grid:col-span-7',\n 8: '@md/ui-grid:col-span-8',\n 9: '@md/ui-grid:col-span-9',\n 10: '@md/ui-grid:col-span-10',\n 11: '@md/ui-grid:col-span-11',\n 12: '@md/ui-grid:col-span-12',\n },\n lg: {\n 1: '@lg/ui-grid:col-span-1',\n 2: '@lg/ui-grid:col-span-2',\n 3: '@lg/ui-grid:col-span-3',\n 4: '@lg/ui-grid:col-span-4',\n 5: '@lg/ui-grid:col-span-5',\n 6: '@lg/ui-grid:col-span-6',\n 7: '@lg/ui-grid:col-span-7',\n 8: '@lg/ui-grid:col-span-8',\n 9: '@lg/ui-grid:col-span-9',\n 10: '@lg/ui-grid:col-span-10',\n 11: '@lg/ui-grid:col-span-11',\n 12: '@lg/ui-grid:col-span-12',\n },\n xl: {\n 1: '@xl/ui-grid:col-span-1',\n 2: '@xl/ui-grid:col-span-2',\n 3: '@xl/ui-grid:col-span-3',\n 4: '@xl/ui-grid:col-span-4',\n 5: '@xl/ui-grid:col-span-5',\n 6: '@xl/ui-grid:col-span-6',\n 7: '@xl/ui-grid:col-span-7',\n 8: '@xl/ui-grid:col-span-8',\n 9: '@xl/ui-grid:col-span-9',\n 10: '@xl/ui-grid:col-span-10',\n 11: '@xl/ui-grid:col-span-11',\n 12: '@xl/ui-grid:col-span-12',\n },\n '2xl': {\n 1: '@2xl/ui-grid:col-span-1',\n 2: '@2xl/ui-grid:col-span-2',\n 3: '@2xl/ui-grid:col-span-3',\n 4: '@2xl/ui-grid:col-span-4',\n 5: '@2xl/ui-grid:col-span-5',\n 6: '@2xl/ui-grid:col-span-6',\n 7: '@2xl/ui-grid:col-span-7',\n 8: '@2xl/ui-grid:col-span-8',\n 9: '@2xl/ui-grid:col-span-9',\n 10: '@2xl/ui-grid:col-span-10',\n 11: '@2xl/ui-grid:col-span-11',\n 12: '@2xl/ui-grid:col-span-12',\n },\n '3xl': {\n 1: '@3xl/ui-grid:col-span-1',\n 2: '@3xl/ui-grid:col-span-2',\n 3: '@3xl/ui-grid:col-span-3',\n 4: '@3xl/ui-grid:col-span-4',\n 5: '@3xl/ui-grid:col-span-5',\n 6: '@3xl/ui-grid:col-span-6',\n 7: '@3xl/ui-grid:col-span-7',\n 8: '@3xl/ui-grid:col-span-8',\n 9: '@3xl/ui-grid:col-span-9',\n 10: '@3xl/ui-grid:col-span-10',\n 11: '@3xl/ui-grid:col-span-11',\n 12: '@3xl/ui-grid:col-span-12',\n },\n};\n\nfunction resolveItemSpanClasses(span: TUIGridItemSpan): string[] {\n if (typeof span === 'number') return [SPAN_CLASS_MAP.base[span]];\n\n return (Object.entries(span) as [TUIGridBreakpoint, TUIGridSpan][]).map(([breakpoint, value]) => SPAN_CLASS_MAP[breakpoint][value]);\n}\n\ntype UIGridItemProps = React.PropsWithChildren<{\n /* Additional Tailwind classes merged on top of the span classes. /\n className?: string;\n /\n Number of the grid's columns this item should occupy (`1`–`12`).\n * - A plain number fixes the span at every container width.\n * - An object varies the span as the grid's own rendered width crosses each\n * container-query breakpoint (see {@link TUIGridBreakpoint} for the exact\n * pixel value of each key), not the viewport.\n * @default 12\n * @example\n * ```tsx\n * <UIGridItem span={6} />\n * // full-width below 384px, half from 384px, a third from 448px up\n * <UIGridItem span={{ base: 12, sm: 6, md: 4 }} />\n * ```\n /\n span?: TUIGridItemSpan;\n /\n Wraps `children` in a `Suspense` boundary so a lazy-loaded cell (e.g. a\n * `React.lazy()` component) doesn't block sibling items from rendering.\n * @default true\n /\n suspense?: boolean;\n /\n Fallback UI shown while suspended children are loading. Only relevant when\n * `suspense` is `true`.\n * @default null\n /\n fallback?: React.ReactNode;\n}>;\n\n/\n A single cell inside a `UIGrid`. Spans `12` of the grid's columns by default\n * (a full-width row) and can vary its span per container-query breakpoint.\n \n @example\n * ```tsx\n * import { UIGrid, UIGridItem } from '@customafk/lunas-ui/layouts/ui-grid';\n \n <UIGrid>\n * <UIGridItem span={{ base: 12, md: 6 }} suspense fallback={<Skeleton />}>\n * <LazyWidget />\n * </UIGridItem>\n * </UIGrid>\n * ```\n */\nexport const UIGridItem = memo(({ span = 12, className, children, suspense = true, fallback = null }: UIGridItemProps) => {\n const content = suspense ? <Suspense fallback={fallback}>{children}</Suspense> : children;\n return (\n <div data-slot=\"ui-grid-item\" className={cn(resolveItemSpanClasses(span), className)}>\n {content}\n </div>\n );\n});\nUIGridItem.displayName = 'UIGridItem';\n"],"mappings":"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"}
1	+ {"version":3,"file":"ui-grid.mjs","names":[],"sources":["../../packages/components/layouts/ui-grid.tsx"],"sourcesContent":["'use client';\nimport { memo, Suspense } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\n/*\n Container-query breakpoint keys used by `UIGrid`'s `cols` and `UIGridItem`'s\n * `span`, resolved against the nearest ancestor `@container/ui-grid` (i.e. the\n * grid's own rendered width, not the viewport). These match Tailwind v4's default\n * container-query scale exactly:\n * - `'base'` — always applied, no minimum width (the fallback/mobile-first value).\n * - `'sm'` — applies from 384px (`24rem`) and up.\n * - `'md'` — applies from 448px (`28rem`) and up.\n * - `'lg'` — applies from 512px (`32rem`) and up.\n * - `'xl'` — applies from 576px (`36rem`) and up.\n * - `'2xl'` — applies from 672px (`42rem`) and up.\n * - `'3xl'` — applies from 768px (`48rem`) and up.\n \n Whichever breakpoint's minimum width is currently satisfied (in ascending\n * order) wins, same cascade behavior as Tailwind's ordinary `sm:`/`md:`/`lg:`\n * responsive classes.\n /\nexport type TUIGridBreakpoint = 'base' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl';\nexport type TUIGridCols = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\nexport type TUIGridColsConfig = TUIGridCols \| Partial<Record<TUIGridBreakpoint, TUIGridCols>>;\n\n/\n Every `grid-cols-N` class this component can emit, per breakpoint, written out\n * literally so Tailwind's JIT scanner can find each one as static text — a\n * dynamically interpolated string (e.g. `` `@${bp}/ui-grid:grid-cols-${n}` ``) would\n * never be picked up and would silently compile to nothing (the exact bug the\n * previous `Grid` component had with its `@8xl`/`@9xl`/`@10xl` classes, which don't\n * exist in Tailwind's default container-query scale).\n /\nconst COLS_CLASS_MAP: Record<TUIGridBreakpoint, Record<TUIGridCols, string>> = {\n base: {\n 1: 'grid-cols-1',\n 2: 'grid-cols-2',\n 3: 'grid-cols-3',\n 4: 'grid-cols-4',\n 5: 'grid-cols-5',\n 6: 'grid-cols-6',\n 7: 'grid-cols-7',\n 8: 'grid-cols-8',\n 9: 'grid-cols-9',\n 10: 'grid-cols-10',\n 11: 'grid-cols-11',\n 12: 'grid-cols-12',\n },\n sm: {\n 1: '@sm/ui-grid:grid-cols-1',\n 2: '@sm/ui-grid:grid-cols-2',\n 3: '@sm/ui-grid:grid-cols-3',\n 4: '@sm/ui-grid:grid-cols-4',\n 5: '@sm/ui-grid:grid-cols-5',\n 6: '@sm/ui-grid:grid-cols-6',\n 7: '@sm/ui-grid:grid-cols-7',\n 8: '@sm/ui-grid:grid-cols-8',\n 9: '@sm/ui-grid:grid-cols-9',\n 10: '@sm/ui-grid:grid-cols-10',\n 11: '@sm/ui-grid:grid-cols-11',\n 12: '@sm/ui-grid:grid-cols-12',\n },\n md: {\n 1: '@md/ui-grid:grid-cols-1',\n 2: '@md/ui-grid:grid-cols-2',\n 3: '@md/ui-grid:grid-cols-3',\n 4: '@md/ui-grid:grid-cols-4',\n 5: '@md/ui-grid:grid-cols-5',\n 6: '@md/ui-grid:grid-cols-6',\n 7: '@md/ui-grid:grid-cols-7',\n 8: '@md/ui-grid:grid-cols-8',\n 9: '@md/ui-grid:grid-cols-9',\n 10: '@md/ui-grid:grid-cols-10',\n 11: '@md/ui-grid:grid-cols-11',\n 12: '@md/ui-grid:grid-cols-12',\n },\n lg: {\n 1: '@lg/ui-grid:grid-cols-1',\n 2: '@lg/ui-grid:grid-cols-2',\n 3: '@lg/ui-grid:grid-cols-3',\n 4: '@lg/ui-grid:grid-cols-4',\n 5: '@lg/ui-grid:grid-cols-5',\n 6: '@lg/ui-grid:grid-cols-6',\n 7: '@lg/ui-grid:grid-cols-7',\n 8: '@lg/ui-grid:grid-cols-8',\n 9: '@lg/ui-grid:grid-cols-9',\n 10: '@lg/ui-grid:grid-cols-10',\n 11: '@lg/ui-grid:grid-cols-11',\n 12: '@lg/ui-grid:grid-cols-12',\n },\n xl: {\n 1: '@xl/ui-grid:grid-cols-1',\n 2: '@xl/ui-grid:grid-cols-2',\n 3: '@xl/ui-grid:grid-cols-3',\n 4: '@xl/ui-grid:grid-cols-4',\n 5: '@xl/ui-grid:grid-cols-5',\n 6: '@xl/ui-grid:grid-cols-6',\n 7: '@xl/ui-grid:grid-cols-7',\n 8: '@xl/ui-grid:grid-cols-8',\n 9: '@xl/ui-grid:grid-cols-9',\n 10: '@xl/ui-grid:grid-cols-10',\n 11: '@xl/ui-grid:grid-cols-11',\n 12: '@xl/ui-grid:grid-cols-12',\n },\n '2xl': {\n 1: '@2xl/ui-grid:grid-cols-1',\n 2: '@2xl/ui-grid:grid-cols-2',\n 3: '@2xl/ui-grid:grid-cols-3',\n 4: '@2xl/ui-grid:grid-cols-4',\n 5: '@2xl/ui-grid:grid-cols-5',\n 6: '@2xl/ui-grid:grid-cols-6',\n 7: '@2xl/ui-grid:grid-cols-7',\n 8: '@2xl/ui-grid:grid-cols-8',\n 9: '@2xl/ui-grid:grid-cols-9',\n 10: '@2xl/ui-grid:grid-cols-10',\n 11: '@2xl/ui-grid:grid-cols-11',\n 12: '@2xl/ui-grid:grid-cols-12',\n },\n '3xl': {\n 1: '@3xl/ui-grid:grid-cols-1',\n 2: '@3xl/ui-grid:grid-cols-2',\n 3: '@3xl/ui-grid:grid-cols-3',\n 4: '@3xl/ui-grid:grid-cols-4',\n 5: '@3xl/ui-grid:grid-cols-5',\n 6: '@3xl/ui-grid:grid-cols-6',\n 7: '@3xl/ui-grid:grid-cols-7',\n 8: '@3xl/ui-grid:grid-cols-8',\n 9: '@3xl/ui-grid:grid-cols-9',\n 10: '@3xl/ui-grid:grid-cols-10',\n 11: '@3xl/ui-grid:grid-cols-11',\n 12: '@3xl/ui-grid:grid-cols-12',\n },\n};\n\nconst GAP_CLASS = {\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} as const;\n\nfunction resolveGridColsClasses(cols: TUIGridColsConfig): string[] {\n if (typeof cols === 'number') return [COLS_CLASS_MAP.base[cols]];\n\n return (Object.entries(cols) as [TUIGridBreakpoint, TUIGridCols][]).map(([breakpoint, value]) => COLS_CLASS_MAP[breakpoint][value]);\n}\n\ntype UIGridProps = React.PropsWithChildren<{\n /* Additional Tailwind classes merged on top of the generated classes. /\n className?: string;\n /\n Number of base grid columns (`1`–`12`). Every `UIGridItem`'s `span` is\n * expressed against this same column count at every container width.\n * - A plain number fixes the column count at every width.\n * - An object varies the column count as the grid's own rendered width crosses\n * each container-query breakpoint (see {@link TUIGridBreakpoint} for the\n * exact pixel value of each key) — e.g. \"narrow container → 4 columns, wide\n * container → 12 columns\".\n * @default 12\n * @example\n * ```tsx\n * // 4 cols below 448px, 8 cols from 448px, 12 cols from 512px up\n * <UIGrid cols={{ base: 4, md: 8, lg: 12 }} />\n * ```\n /\n cols?: TUIGridColsConfig;\n /\n Gap between grid cells, reusing the same scale as `Flex`'s `gap` prop.\n * - `'none'` — `gap-0`\n * - `'xs'` — `gap-1`\n * - `'sm'` — `gap-2`\n * - `'md'` — `gap-4` (default)\n * - `'lg'` — `gap-6`\n * - `'xl'` — `gap-8`\n * @default 'md'\n /\n gap?: keyof typeof GAP_CLASS;\n}> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'className'>;\n\n/\n A 12-column CSS Grid container with a named `@container` context, so both its\n * own column count and its `UIGridItem` children's `span` can vary based on the\n * grid's own rendered width instead of the viewport.\n \n @example\n * ```tsx\n * import { UIGrid, UIGridItem } from '@customafk/lunas-ui/layouts/ui-grid';\n \n <UIGrid gap=\"md\" cols={{ base: 4, md: 12 }}>\n * <UIGridItem span={6}>Left</UIGridItem>\n * <UIGridItem span={6}>Right</UIGridItem>\n * </UIGrid>\n * ```\n /\nexport const UIGrid = memo(({ cols = 12, gap = 'md', className, children, ...rest }: UIGridProps) => {\n // A container-query subject can never be the same element that establishes the\n // container — `@container/ui-grid` must live on an ancestor of whatever reads\n // `@sm/ui-grid:` etc., so the responsive `cols` classes need their own inner\n // element, separate from the one that declares the named container.\n return (\n <div data-slot=\"ui-grid\" className=\"@container/ui-grid w-full\">\n <div data-slot=\"ui-grid-columns\" {...rest} className={cn('grid w-full', resolveGridColsClasses(cols), GAP_CLASS[gap], className)}>\n {children}\n </div>\n </div>\n );\n});\nUIGrid.displayName = 'UIGrid';\n\nexport type TUIGridSpan = 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12;\nexport type TUIGridItemSpan = TUIGridSpan \| Partial<Record<TUIGridBreakpoint, TUIGridSpan>>;\n\n/\n Every `col-span-N` class this component can emit, per breakpoint — same\n * literal-lookup-table reasoning as `COLS_CLASS_MAP` above.\n /\nconst SPAN_CLASS_MAP: Record<TUIGridBreakpoint, Record<TUIGridSpan, string>> = {\n base: {\n 1: 'col-span-1',\n 2: 'col-span-2',\n 3: 'col-span-3',\n 4: 'col-span-4',\n 5: 'col-span-5',\n 6: 'col-span-6',\n 7: 'col-span-7',\n 8: 'col-span-8',\n 9: 'col-span-9',\n 10: 'col-span-10',\n 11: 'col-span-11',\n 12: 'col-span-12',\n },\n sm: {\n 1: '@sm/ui-grid:col-span-1',\n 2: '@sm/ui-grid:col-span-2',\n 3: '@sm/ui-grid:col-span-3',\n 4: '@sm/ui-grid:col-span-4',\n 5: '@sm/ui-grid:col-span-5',\n 6: '@sm/ui-grid:col-span-6',\n 7: '@sm/ui-grid:col-span-7',\n 8: '@sm/ui-grid:col-span-8',\n 9: '@sm/ui-grid:col-span-9',\n 10: '@sm/ui-grid:col-span-10',\n 11: '@sm/ui-grid:col-span-11',\n 12: '@sm/ui-grid:col-span-12',\n },\n md: {\n 1: '@md/ui-grid:col-span-1',\n 2: '@md/ui-grid:col-span-2',\n 3: '@md/ui-grid:col-span-3',\n 4: '@md/ui-grid:col-span-4',\n 5: '@md/ui-grid:col-span-5',\n 6: '@md/ui-grid:col-span-6',\n 7: '@md/ui-grid:col-span-7',\n 8: '@md/ui-grid:col-span-8',\n 9: '@md/ui-grid:col-span-9',\n 10: '@md/ui-grid:col-span-10',\n 11: '@md/ui-grid:col-span-11',\n 12: '@md/ui-grid:col-span-12',\n },\n lg: {\n 1: '@lg/ui-grid:col-span-1',\n 2: '@lg/ui-grid:col-span-2',\n 3: '@lg/ui-grid:col-span-3',\n 4: '@lg/ui-grid:col-span-4',\n 5: '@lg/ui-grid:col-span-5',\n 6: '@lg/ui-grid:col-span-6',\n 7: '@lg/ui-grid:col-span-7',\n 8: '@lg/ui-grid:col-span-8',\n 9: '@lg/ui-grid:col-span-9',\n 10: '@lg/ui-grid:col-span-10',\n 11: '@lg/ui-grid:col-span-11',\n 12: '@lg/ui-grid:col-span-12',\n },\n xl: {\n 1: '@xl/ui-grid:col-span-1',\n 2: '@xl/ui-grid:col-span-2',\n 3: '@xl/ui-grid:col-span-3',\n 4: '@xl/ui-grid:col-span-4',\n 5: '@xl/ui-grid:col-span-5',\n 6: '@xl/ui-grid:col-span-6',\n 7: '@xl/ui-grid:col-span-7',\n 8: '@xl/ui-grid:col-span-8',\n 9: '@xl/ui-grid:col-span-9',\n 10: '@xl/ui-grid:col-span-10',\n 11: '@xl/ui-grid:col-span-11',\n 12: '@xl/ui-grid:col-span-12',\n },\n '2xl': {\n 1: '@2xl/ui-grid:col-span-1',\n 2: '@2xl/ui-grid:col-span-2',\n 3: '@2xl/ui-grid:col-span-3',\n 4: '@2xl/ui-grid:col-span-4',\n 5: '@2xl/ui-grid:col-span-5',\n 6: '@2xl/ui-grid:col-span-6',\n 7: '@2xl/ui-grid:col-span-7',\n 8: '@2xl/ui-grid:col-span-8',\n 9: '@2xl/ui-grid:col-span-9',\n 10: '@2xl/ui-grid:col-span-10',\n 11: '@2xl/ui-grid:col-span-11',\n 12: '@2xl/ui-grid:col-span-12',\n },\n '3xl': {\n 1: '@3xl/ui-grid:col-span-1',\n 2: '@3xl/ui-grid:col-span-2',\n 3: '@3xl/ui-grid:col-span-3',\n 4: '@3xl/ui-grid:col-span-4',\n 5: '@3xl/ui-grid:col-span-5',\n 6: '@3xl/ui-grid:col-span-6',\n 7: '@3xl/ui-grid:col-span-7',\n 8: '@3xl/ui-grid:col-span-8',\n 9: '@3xl/ui-grid:col-span-9',\n 10: '@3xl/ui-grid:col-span-10',\n 11: '@3xl/ui-grid:col-span-11',\n 12: '@3xl/ui-grid:col-span-12',\n },\n};\n\nfunction resolveItemSpanClasses(span: TUIGridItemSpan): string[] {\n if (typeof span === 'number') return [SPAN_CLASS_MAP.base[span]];\n\n return (Object.entries(span) as [TUIGridBreakpoint, TUIGridSpan][]).map(([breakpoint, value]) => SPAN_CLASS_MAP[breakpoint][value]);\n}\n\ntype UIGridItemProps = React.PropsWithChildren<{\n /* Additional Tailwind classes merged on top of the span classes. /\n className?: string;\n /\n Number of the grid's columns this item should occupy (`1`–`12`).\n * - A plain number fixes the span at every container width.\n * - An object varies the span as the grid's own rendered width crosses each\n * container-query breakpoint (see {@link TUIGridBreakpoint} for the exact\n * pixel value of each key), not the viewport.\n * @default 12\n * @example\n * ```tsx\n * <UIGridItem span={6} />\n * // full-width below 384px, half from 384px, a third from 448px up\n * <UIGridItem span={{ base: 12, sm: 6, md: 4 }} />\n * ```\n /\n span?: TUIGridItemSpan;\n /\n Wraps `children` in a `Suspense` boundary so a lazy-loaded cell (e.g. a\n * `React.lazy()` component) doesn't block sibling items from rendering.\n * @default true\n /\n suspense?: boolean;\n /\n Fallback UI shown while suspended children are loading. Only relevant when\n * `suspense` is `true`.\n * @default null\n /\n fallback?: React.ReactNode;\n}> &\n Omit<React.ComponentPropsWithoutRef<'div'>, 'className'>;\n\n/\n A single cell inside a `UIGrid`. Spans `12` of the grid's columns by default\n * (a full-width row) and can vary its span per container-query breakpoint.\n \n @example\n * ```tsx\n * import { UIGrid, UIGridItem } from '@customafk/lunas-ui/layouts/ui-grid';\n \n <UIGrid>\n * <UIGridItem span={{ base: 12, md: 6 }} suspense fallback={<Skeleton />}>\n * <LazyWidget />\n * </UIGridItem>\n * </UIGrid>\n * ```\n */\nexport const UIGridItem = memo(({ span = 12, className, children, suspense = true, fallback = null, ...rest }: UIGridItemProps) => {\n const content = suspense ? <Suspense fallback={fallback}>{children}</Suspense> : children;\n return (\n <div data-slot=\"ui-grid-item\" {...rest} className={cn(resolveItemSpanClasses(span), className)}>\n {content}\n </div>\n );\n});\nUIGridItem.displayName = 'UIGridItem';\n"],"mappings":"oJAkCA,MAAM,EAAyE,CAC7E,KAAM,CACJ,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,EAAG,cACH,GAAI,eACJ,GAAI,eACJ,GAAI,cACN,EACA,GAAI,CACF,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,GAAI,2BACJ,GAAI,2BACJ,GAAI,0BACN,EACA,GAAI,CACF,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,GAAI,2BACJ,GAAI,2BACJ,GAAI,0BACN,EACA,GAAI,CACF,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,GAAI,2BACJ,GAAI,2BACJ,GAAI,0BACN,EACA,GAAI,CACF,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,GAAI,2BACJ,GAAI,2BACJ,GAAI,0BACN,EACA,MAAO,CACL,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,GAAI,4BACJ,GAAI,4BACJ,GAAI,2BACN,EACA,MAAO,CACL,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,EAAG,2BACH,GAAI,4BACJ,GAAI,4BACJ,GAAI,2BACN,CACF,EAEM,EAAY,CAChB,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,KAAM,OACR,EAEA,SAAS,EAAuB,EAAmC,CAGjE,OAFI,OAAO,GAAS,SAAiB,CAAC,EAAe,KAAK,EAAK,EAEvD,OAAO,QAAQ,CAAI,CAAC,CAAwC,KAAK,CAAC,EAAY,KAAW,EAAe,EAAW,CAAC,EAAM,CACpI,CAkDA,MAAa,EAAS,GAAM,CAAE,OAAO,GAAI,MAAM,KAAM,YAAW,WAAU,GAAG,KAMzE,EAAC,MAAD,CAAK,YAAU,UAAU,UAAU,4BACjC,SAAA,EAAC,MAAD,CAAK,YAAU,kBAAkB,GAAI,EAAM,UAAW,EAAG,cAAe,EAAuB,CAAI,EAAG,EAAU,GAAM,CAAS,EAC5H,UACE,CAAA,CACF,CAAA,CAER,EACD,EAAO,YAAc,SASrB,MAAM,EAAyE,CAC7E,KAAM,CACJ,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,EAAG,aACH,GAAI,cACJ,GAAI,cACJ,GAAI,aACN,EACA,GAAI,CACF,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,GAAI,0BACJ,GAAI,0BACJ,GAAI,yBACN,EACA,GAAI,CACF,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,GAAI,0BACJ,GAAI,0BACJ,GAAI,yBACN,EACA,GAAI,CACF,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,GAAI,0BACJ,GAAI,0BACJ,GAAI,yBACN,EACA,GAAI,CACF,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,GAAI,0BACJ,GAAI,0BACJ,GAAI,yBACN,EACA,MAAO,CACL,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,GAAI,2BACJ,GAAI,2BACJ,GAAI,0BACN,EACA,MAAO,CACL,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,EAAG,0BACH,GAAI,2BACJ,GAAI,2BACJ,GAAI,0BACN,CACF,EAEA,SAAS,EAAuB,EAAiC,CAG/D,OAFI,OAAO,GAAS,SAAiB,CAAC,EAAe,KAAK,EAAK,EAEvD,OAAO,QAAQ,CAAI,CAAC,CAAwC,KAAK,CAAC,EAAY,KAAW,EAAe,EAAW,CAAC,EAAM,CACpI,CAkDA,MAAa,EAAa,GAAM,CAAE,OAAO,GAAI,YAAW,WAAU,WAAW,GAAM,WAAW,KAAM,GAAG,KAA4B,CACjI,IAAM,EAAU,EAAW,EAAC,EAAD,CAAoB,WAAW,UAAmB,CAAA,EAAI,EACjF,OACE,EAAC,MAAD,CAAK,YAAU,eAAe,GAAI,EAAM,UAAW,EAAG,EAAuB,CAAI,EAAG,CAAS,EAC1F,SAAA,CACE,CAAA,CAET,CAAC,EACD,EAAW,YAAc"}

package/dist/{list-display-DLsm8uAh.mjs → list-display-4tTkV29U.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{Tooltip as e,TooltipContent as t,TooltipProvider as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-Dg3KMBKA.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({items:s,maxVisible:c=3})=>{if(!s||s.length===0)return a(i,{});let l=s.slice(0,c),u=s.slice(c);return o(`div`,{className:`flex flex-wrap gap-1`,children:[l.map((e,t)=>a(`span`,{className:`weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs`,children:e},`item-${t.toString()}`)),u.length>0&&a(n,{children:o(e,{children:[a(r,{asChild:!0,children:o(`span`,{className:`inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs`,children:[`+`,u.length,` more`]})}),a(t,{align:`start`,className:`flex max-w-64 flex-wrap gap-1 p-2`,children:u.map((e,t)=>a(`span`,{className:`inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs`,children:e},`item-${t.toString()}`))})]})})]})};export{s as UITableListDisplay};
-//# sourceMappingURL=list-display-DLsm8uAh.mjs.map
+import{Tooltip as e,TooltipContent as t,TooltipProvider as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-CuoBQNqx.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({items:s,maxVisible:c=3})=>{if(!s||s.length===0)return a(i,{});let l=s.slice(0,c),u=s.slice(c);return o(`div`,{className:`flex flex-wrap gap-1`,children:[l.map((e,t)=>a(`span`,{className:`weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs`,children:e},`item-${t.toString()}`)),u.length>0&&a(n,{children:o(e,{children:[a(r,{asChild:!0,children:o(`span`,{className:`inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs`,children:[`+`,u.length,` more`]})}),a(t,{align:`start`,className:`flex max-w-64 flex-wrap gap-1 p-2`,children:u.map((e,t)=>a(`span`,{className:`inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs`,children:e},`item-${t.toString()}`))})]})})]})};export{s as UITableListDisplay};
+//# sourceMappingURL=list-display-4tTkV29U.mjs.map

package/dist/{list-display-DLsm8uAh.mjs.map → list-display-4tTkV29U.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list-display-~~DLsm8uAh~~.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. /\ntype Props = {\n /* Array of strings or numbers to render as inline pills. /\n items: (string \| number)[] \| null \| undefined;\n /\n Maximum number of pills shown before a `+N more` overflow badge appears\n * (default: `3`).\n /\n maxVisible?: number;\n};\n\n/\n Renders an array of values as compact inline pills in a table cell. When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip. Renders {@link UITableEmpty} for empty or absent\n * arrays.\n \n @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n if (!items \|\| items.length === 0) return <UITableEmpty />;\n\n const visible = items.slice(0, maxVisible);\n const overflow = items.slice(maxVisible);\n\n return (\n <div className=\"flex flex-wrap gap-1\">\n {visible.map((item, i) => (\n <span\n key={`item-${i.toString()}`}\n className=\"weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs\"\n >\n {item}\n </span>\n ))}\n\n {overflow.length > 0 && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n +{overflow.length} more\n </span>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n {overflow.map((item, i) => (\n <span\n key={`item-${i.toString()}`}\n className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\"\n >\n {item}\n </span>\n ))}\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n );\n};\n"],"mappings":"oMA4BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAC,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,CACG,EAAQ,KAAK,EAAM,IAClB,EAAC,OAAD,CAEE,UAAU,6GAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,EAEA,EAAS,OAAS,GACjB,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,OAAD,CAAM,UAAU,qHAAhB,SAAA,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,oCACrC,SAAA,EAAS,KAAK,EAAM,IACnB,EAAC,OAAD,CAEE,UAAU,oGAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}
1	+ {"version":3,"file":"list-display-4tTkV29U.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. /\ntype Props = {\n /* Array of strings or numbers to render as inline pills. /\n items: (string \| number)[] \| null \| undefined;\n /\n Maximum number of pills shown before a `+N more` overflow badge appears\n * (default: `3`).\n /\n maxVisible?: number;\n};\n\n/\n Renders an array of values as compact inline pills in a table cell. When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip. Renders {@link UITableEmpty} for empty or absent\n * arrays.\n \n @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n if (!items \|\| items.length === 0) return <UITableEmpty />;\n\n const visible = items.slice(0, maxVisible);\n const overflow = items.slice(maxVisible);\n\n return (\n <div className=\"flex flex-wrap gap-1\">\n {visible.map((item, i) => (\n <span\n key={`item-${i.toString()}`}\n className=\"weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs\"\n >\n {item}\n </span>\n ))}\n\n {overflow.length > 0 && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n +{overflow.length} more\n </span>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n {overflow.map((item, i) => (\n <span\n key={`item-${i.toString()}`}\n className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\"\n >\n {item}\n </span>\n ))}\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n );\n};\n"],"mappings":"oMA4BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAC,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,CACG,EAAQ,KAAK,EAAM,IAClB,EAAC,OAAD,CAEE,UAAU,6GAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,EAEA,EAAS,OAAS,GACjB,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,OAAD,CAAM,UAAU,qHAAhB,SAAA,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,oCACrC,SAAA,EAAS,KAAK,EAAM,IACnB,EAAC,OAAD,CAEE,UAAU,oGAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}

package/dist/{list-display-DDeJoneW.cjs → list-display-CJvQ-wwT.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-const e=require("./ui/tooltip.cjs"),t=require("./tables-BqZ4Zs6e.cjs");let n=require("react/jsx-runtime");const r=({items:r,maxVisible:i=3})=>{if(!r||r.length===0)return(0,n.jsx)(t.Q,{});let a=r.slice(0,i),o=r.slice(i);return(0,n.jsxs)(`div`,{className:`flex flex-wrap gap-1`,children:[a.map((e,t)=>(0,n.jsx)(`span`,{className:`weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs`,children:e},`item-${t.toString()}`)),o.length>0&&(0,n.jsx)(e.TooltipProvider,{children:(0,n.jsxs)(e.Tooltip,{children:[(0,n.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,n.jsxs)(`span`,{className:`inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs`,children:[`+`,o.length,` more`]})}),(0,n.jsx)(e.TooltipContent,{align:`start`,className:`flex max-w-64 flex-wrap gap-1 p-2`,children:o.map((e,t)=>(0,n.jsx)(`span`,{className:`inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs`,children:e},`item-${t.toString()}`))})]})})]})};exports.UITableListDisplay=r;
-//# sourceMappingURL=list-display-DDeJoneW.cjs.map
+const e=require("./ui/tooltip.cjs"),t=require("./tables-DdLEj1dI.cjs");let n=require("react/jsx-runtime");const r=({items:r,maxVisible:i=3})=>{if(!r||r.length===0)return(0,n.jsx)(t.Q,{});let a=r.slice(0,i),o=r.slice(i);return(0,n.jsxs)(`div`,{className:`flex flex-wrap gap-1`,children:[a.map((e,t)=>(0,n.jsx)(`span`,{className:`weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs`,children:e},`item-${t.toString()}`)),o.length>0&&(0,n.jsx)(e.TooltipProvider,{children:(0,n.jsxs)(e.Tooltip,{children:[(0,n.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,n.jsxs)(`span`,{className:`inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs`,children:[`+`,o.length,` more`]})}),(0,n.jsx)(e.TooltipContent,{align:`start`,className:`flex max-w-64 flex-wrap gap-1 p-2`,children:o.map((e,t)=>(0,n.jsx)(`span`,{className:`inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs`,children:e},`item-${t.toString()}`))})]})})]})};exports.UITableListDisplay=r;
+//# sourceMappingURL=list-display-CJvQ-wwT.cjs.map

package/dist/{list-display-DDeJoneW.cjs.map → list-display-CJvQ-wwT.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list-display-~~DDeJoneW~~.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. /\ntype Props = {\n /* Array of strings or numbers to render as inline pills. /\n items: (string \| number)[] \| null \| undefined;\n /\n Maximum number of pills shown before a `+N more` overflow badge appears\n * (default: `3`).\n /\n maxVisible?: number;\n};\n\n/\n Renders an array of values as compact inline pills in a table cell. When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip. Renders {@link UITableEmpty} for empty or absent\n * arrays.\n \n @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n if (!items \|\| items.length === 0) return <UITableEmpty />;\n\n const visible = items.slice(0, maxVisible);\n const overflow = items.slice(maxVisible);\n\n return (\n <div className=\"flex flex-wrap gap-1\">\n {visible.map((item, i) => (\n <span\n key={`item-${i.toString()}`}\n className=\"weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs\"\n >\n {item}\n </span>\n ))}\n\n {overflow.length > 0 && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n +{overflow.length} more\n </span>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n {overflow.map((item, i) => (\n <span\n key={`item-${i.toString()}`}\n className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\"\n >\n {item}\n </span>\n ))}\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n );\n};\n"],"mappings":"0GA4BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,CACG,EAAQ,KAAK,EAAM,KAClB,EAAA,EAAA,IAAA,CAAC,OAAD,CAEE,UAAU,6GAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,EAEA,EAAS,OAAS,IACjB,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,qHAAhB,SAAA,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,oCACrC,SAAA,EAAS,KAAK,EAAM,KACnB,EAAA,EAAA,IAAA,CAAC,OAAD,CAEE,UAAU,oGAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}
1	+ {"version":3,"file":"list-display-CJvQ-wwT.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. /\ntype Props = {\n /* Array of strings or numbers to render as inline pills. /\n items: (string \| number)[] \| null \| undefined;\n /\n Maximum number of pills shown before a `+N more` overflow badge appears\n * (default: `3`).\n /\n maxVisible?: number;\n};\n\n/\n Renders an array of values as compact inline pills in a table cell. When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip. Renders {@link UITableEmpty} for empty or absent\n * arrays.\n \n @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n if (!items \|\| items.length === 0) return <UITableEmpty />;\n\n const visible = items.slice(0, maxVisible);\n const overflow = items.slice(maxVisible);\n\n return (\n <div className=\"flex flex-wrap gap-1\">\n {visible.map((item, i) => (\n <span\n key={`item-${i.toString()}`}\n className=\"weak inline-flex items-center rounded border border-border bg-white px-2 py-0.5 text-text-positive text-xs\"\n >\n {item}\n </span>\n ))}\n\n {overflow.length > 0 && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n +{overflow.length} more\n </span>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n {overflow.map((item, i) => (\n <span\n key={`item-${i.toString()}`}\n className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\"\n >\n {item}\n </span>\n ))}\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n );\n};\n"],"mappings":"0GA4BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,CACG,EAAQ,KAAK,EAAM,KAClB,EAAA,EAAA,IAAA,CAAC,OAAD,CAEE,UAAU,6GAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,EAEA,EAAS,OAAS,IACjB,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,GACd,UAAA,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,qHAAhB,SAAA,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,oCACrC,SAAA,EAAS,KAAK,EAAM,KACnB,EAAA,EAAA,IAAA,CAAC,OAAD,CAEE,UAAU,oGAET,SAAA,CACG,EAJC,QAAQ,EAAE,SAAS,GAIpB,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}

package/dist/{name-display-H5HFH1fU.mjs → name-display-BFoDcvt2.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-Dg3KMBKA.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({name:s})=>s?o(t,{children:[a(r,{children:a(e,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:s})}),a(n,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:o(`div`,{className:`flex flex-col gap-y-2`,children:[a(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:s}),o(`p`,{className:`w-full text-end`,children:[s.length,` chars`]})]})})]}):a(i,{});export{s as UITableNameDisplay};
-//# sourceMappingURL=name-display-H5HFH1fU.mjs.map
+import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-CuoBQNqx.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({name:s})=>s?o(t,{children:[a(r,{children:a(e,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:s})}),a(n,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:o(`div`,{className:`flex flex-col gap-y-2`,children:[a(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:s}),o(`p`,{className:`w-full text-end`,children:[s.length,` chars`]})]})})]}):a(i,{});export{s as UITableNameDisplay};
+//# sourceMappingURL=name-display-BFoDcvt2.mjs.map

package/dist/{name-display-H5HFH1fU.mjs.map → name-display-BFoDcvt2.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"name-display-~~H5HFH1fU~~.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. /\ntype NameDisplayProps = {\n /* The name string to display; renders an empty placeholder when falsy. /\n name?: string \| null \| undefined;\n};\n\n/\n Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n \n @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n if (!name) return <UITableEmpty />;\n return (\n <Tooltip>\n <TooltipTrigger>\n <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n {name}\n </Paragraph>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n <div className=\"flex flex-col gap-y-2\">\n <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n <p className=\"w-full text-end\">{name.length} chars</p>\n </div>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"sOAqBA,MAAa,GAAkD,CAAE,UAC1D,EAEH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,0DAC/B,SAAA,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,SAAA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACE,EAAC,IAAD,CAAG,UAAU,2CAA4C,SAAA,CAAQ,CAAA,EACjE,EAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAK,OAAO,QAAS,CAClD,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA,EAdO,EAAC,EAAD,CAAe,CAAA"}
1	+ {"version":3,"file":"name-display-BFoDcvt2.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. /\ntype NameDisplayProps = {\n /* The name string to display; renders an empty placeholder when falsy. /\n name?: string \| null \| undefined;\n};\n\n/\n Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n \n @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n if (!name) return <UITableEmpty />;\n return (\n <Tooltip>\n <TooltipTrigger>\n <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n {name}\n </Paragraph>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n <div className=\"flex flex-col gap-y-2\">\n <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n <p className=\"w-full text-end\">{name.length} chars</p>\n </div>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"sOAqBA,MAAa,GAAkD,CAAE,UAC1D,EAEH,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,0DAC/B,SAAA,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,SAAA,EAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,CACE,EAAC,IAAD,CAAG,UAAU,2CAA4C,SAAA,CAAQ,CAAA,EACjE,EAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAK,OAAO,QAAS,CAClD,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA,EAdO,EAAC,EAAD,CAAe,CAAA"}

package/dist/{name-display-CKnyugrP.cjs → name-display-Br7rcdqi.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-BqZ4Zs6e.cjs");let r=require("react/jsx-runtime");const i=({name:i})=>i?(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{children:(0,r.jsx)(e.Paragraph,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:i})}),(0,r.jsx)(t.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,r.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:i}),(0,r.jsxs)(`p`,{className:`w-full text-end`,children:[i.length,` chars`]})]})})]}):(0,r.jsx)(n.Q,{});exports.UITableNameDisplay=i;
-//# sourceMappingURL=name-display-CKnyugrP.cjs.map
+const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-DdLEj1dI.cjs");let r=require("react/jsx-runtime");const i=({name:i})=>i?(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{children:(0,r.jsx)(e.Paragraph,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:i})}),(0,r.jsx)(t.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,r.jsx)(`p`,{className:`whitespace-pre-line text-wrap break-keep`,children:i}),(0,r.jsxs)(`p`,{className:`w-full text-end`,children:[i.length,` chars`]})]})})]}):(0,r.jsx)(n.Q,{});exports.UITableNameDisplay=i;
+//# sourceMappingURL=name-display-Br7rcdqi.cjs.map

package/dist/{name-display-CKnyugrP.cjs.map → name-display-Br7rcdqi.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"name-display-~~CKnyugrP~~.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. /\ntype NameDisplayProps = {\n /* The name string to display; renders an empty placeholder when falsy. /\n name?: string \| null \| undefined;\n};\n\n/\n Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n \n @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n if (!name) return <UITableEmpty />;\n return (\n <Tooltip>\n <TooltipTrigger>\n <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n {name}\n </Paragraph>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n <div className=\"flex flex-col gap-y-2\">\n <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n <p className=\"w-full text-end\">{name.length} chars</p>\n </div>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"kJAqBA,MAAa,GAAkD,CAAE,UAC1D,GAEH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,0DAC/B,SAAA,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,2CAA4C,SAAA,CAAQ,CAAA,GACjE,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAK,OAAO,QAAS,CAClD,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA,GAdO,EAAA,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAe,CAAA"}
1	+ {"version":3,"file":"name-display-Br7rcdqi.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/name-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableNameDisplay} component. /\ntype NameDisplayProps = {\n /* The name string to display; renders an empty placeholder when falsy. /\n name?: string \| null \| undefined;\n};\n\n/\n Renders a clamped, truncated name string inside a tooltip that shows the full\n * text and character count on hover; falls back to {@link UITableEmpty} when the\n * value is absent.\n \n @example\n * import { UITableNameDisplay } from '@customafk/lunas-ui/features/tables';\n \n <UITableNameDisplay name=\"John Doe\" />\n */\nexport const UITableNameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n if (!name) return <UITableEmpty />;\n return (\n <Tooltip>\n <TooltipTrigger>\n <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n {name}\n </Paragraph>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n <div className=\"flex flex-col gap-y-2\">\n <p className=\"whitespace-pre-line text-wrap break-keep\">{name}</p>\n <p className=\"w-full text-end\">{name.length} chars</p>\n </div>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"kJAqBA,MAAa,GAAkD,CAAE,UAC1D,GAEH,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,0DAC/B,SAAA,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,+BACtC,UAAA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,2CAA4C,SAAA,CAAQ,CAAA,GACjE,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,kBAAb,SAAA,CAAgC,EAAK,OAAO,QAAS,CAClD,CAAA,CAAA,GACS,CAAA,CACT,CAAA,CAAA,GAdO,EAAA,EAAA,IAAA,CAACJ,EAAAA,EAAD,CAAe,CAAA"}

package/dist/{number-field-5INgdUUv.mjs → number-field-CR5PLX6H.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-q9hDCc0Y.mjs";import{Field as t,FieldContent as n,FieldContentMain as r,FieldDescription as i,FieldError as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-V2DoD8qL.mjs";import{t as d}from"./number-input-CJcEV9Cg.mjs";import{BanIcon as f,Loader2Icon as p}from"lucide-react";import{memo as m,useCallback as h,useId as g}from"react";import{cn as _}from"@customafk/react-toolkit/utils";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useStore as b}from"@tanstack/react-form";const x=m(({label:m,description:x,placeholder:S,tooltip:C,helperText:w,orientation:T=`responsive`,showErrorMessage:E=!0,rounding:D,decimalPlaces:O,precision:k,unit:A,required:j=!1,disabled:M=!1,allowNegative:N})=>{let P=g(),F=g(),I=e(),L=b(I.form.store,({isSubmitting:e})=>e),R=M||L,z=I.state.meta.isDirty||I.state.meta.isTouched,B=z&&!I.state.meta.isValid,V=j&&I.state.value===null,H=!!I.state.meta.errors.length,U=h(e=>{R||I.handleChange(e)},[R,I.handleChange]);return y(o,{className:`gap-y-4 px-4`,children:[y(t,{orientation:T,"data-invalid":B,children:[y(n,{children:[y(s,{htmlFor:P,"aria-required":V,children:[m,C&&v(u,{tooltip:C})]}),v(i,{children:x})]}),y(r,{children:[y(`div`,{className:`relative w-full`,children:[v(d,{id:P,value:I.state.value,"aria-invalid":B,"aria-describedby":F,placeholder:S,disabled:R,roundingRule:D,numberAfterDecimalPoint:O,precision:k,unitText:A,allowNegative:N,className:_(R&&`pointer-events-none opacity-60`),onBlur:I.handleBlur,onValueChange:U}),L&&v(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:v(p,{className:`animate-spin text-primary-strong`})}),!L&&z&&E&&H&&v(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:v(f,{})}),v(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:z&&E?v(a,{id:F,className:`flex-1`,errors:I.state.meta.errors}):v(`div`,{})})]}),v(c,{isShow:!!w,children:w})]})]}),v(l,{})]})});x.displayName=`NumberField`;export{x as NumberField};
-//# sourceMappingURL=number-field-5INgdUUv.mjs.map
+import{G as e}from"./tanstack-form-fkaBh9RO.mjs";import{Field as t,FieldContent as n,FieldContentMain as r,FieldDescription as i,FieldError as a,FieldGroup as o,FieldLabel as s,FieldNote as c,FieldSeparator as l,FieldTooltip as u}from"./field-V2DoD8qL.mjs";import{t as d}from"./number-input-CJcEV9Cg.mjs";import{BanIcon as f,Loader2Icon as p}from"lucide-react";import{memo as m,useCallback as h,useId as g}from"react";import{cn as _}from"@customafk/react-toolkit/utils";import{jsx as v,jsxs as y}from"react/jsx-runtime";import{useStore as b}from"@tanstack/react-form";const x=m(({label:m,description:x,placeholder:S,tooltip:C,helperText:w,orientation:T=`responsive`,showErrorMessage:E=!0,rounding:D,decimalPlaces:O,precision:k,unit:A,required:j=!1,disabled:M=!1,allowNegative:N})=>{let P=g(),F=g(),I=e(),L=b(I.form.store,({isSubmitting:e})=>e),R=M||L,z=I.state.meta.isDirty||I.state.meta.isTouched,B=z&&!I.state.meta.isValid,V=j&&I.state.value===null,H=!!I.state.meta.errors.length,U=h(e=>{R||I.handleChange(e)},[R,I.handleChange]);return y(o,{className:`gap-y-4 px-4`,children:[y(t,{orientation:T,"data-invalid":B,children:[y(n,{children:[y(s,{htmlFor:P,"aria-required":V,children:[m,C&&v(u,{tooltip:C})]}),v(i,{children:x})]}),y(r,{children:[y(`div`,{className:`relative w-full`,children:[v(d,{id:P,value:I.state.value,"aria-invalid":B,"aria-describedby":F,placeholder:S,disabled:R,roundingRule:D,numberAfterDecimalPoint:O,precision:k,unitText:A,allowNegative:N,className:_(R&&`pointer-events-none opacity-60`),onBlur:I.handleBlur,onValueChange:U}),L&&v(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:v(p,{className:`animate-spin text-primary-strong`})}),!L&&z&&E&&H&&v(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:v(f,{})}),v(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:z&&E?v(a,{id:F,className:`flex-1`,errors:I.state.meta.errors}):v(`div`,{})})]}),v(c,{isShow:!!w,children:w})]})]}),v(l,{})]})});x.displayName=`NumberField`;export{x as NumberField};
+//# sourceMappingURL=number-field-CR5PLX6H.mjs.map

package/dist/{number-field-5INgdUUv.mjs.map → number-field-CR5PLX6H.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-field-~~5INgdUUv~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { NumberFieldProps } from '../../types';\n\n/*\n A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n \n @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"quantity\">\n * {() => (\n * <NumberField\n * label=\"Quantity\"\n * placeholder=\"0\"\n * unit=\"pcs\"\n * decimalPlaces={2}\n * required\n * />\n * )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n ({\n label,\n description,\n placeholder,\n tooltip,\n helperText,\n orientation = 'responsive',\n showErrorMessage = true,\n rounding,\n decimalPlaces,\n precision,\n unit,\n required = false,\n disabled = false,\n allowNegative,\n }) => {\n const id = useId();\n const errorId = useId();\n\n const field = useTanStackFieldContext<number \| null>();\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _invalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _hasErrors = !!field.state.meta.errors.length;\n\n const onValueChange = useCallback(\n (value: number \| null) => {\n if (isDisabled) return;\n field.handleChange(value);\n },\n [isDisabled, field.handleChange]\n );\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation={orientation} data-invalid={_invalid}>\n <FieldContent>\n <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain>\n <div className=\"relative w-full\">\n <NumberInput\n id={id}\n value={field.state.value}\n aria-invalid={_invalid}\n aria-describedby={errorId}\n placeholder={placeholder}\n disabled={isDisabled}\n roundingRule={rounding}\n numberAfterDecimalPoint={decimalPlaces}\n precision={precision}\n unitText={unit}\n allowNegative={allowNegative}\n className={cn(isDisabled && 'pointer-events-none opacity-60')}\n onBlur={field.handleBlur}\n onValueChange={onValueChange}\n />\n {isSubmitting && (\n <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n <Loader2Icon className=\"animate-spin text-primary-strong\" />\n </div>\n )}\n {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n <BanIcon />\n </div>\n )}\n <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n </div>\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"wjBA+CA,MAAa,EAAc,GACxB,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,EAAK,EAAM,EACX,EAAU,EAAM,EAEhB,EAAQ,EAAuC,EAE/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAI,gBAAe,EAAxC,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,EAAA,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,CACE,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,UAAW,EAAG,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,GACC,EAAC,MAAD,CAAK,UAAU,4EACb,SAAA,EAAC,EAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,GAChD,EAAC,MAAD,CAAK,UAAU,gGACb,SAAA,EAAC,EAAD,CAAU,CAAA,CACP,CAAA,EAEP,EAAC,MAAD,CAAK,UAAU,uDACZ,SAAA,GAAY,EAAmB,EAAC,EAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,EAAI,EAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,CACL,CAAA,EAAA,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}
1	+ {"version":3,"file":"number-field-CR5PLX6H.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { NumberFieldProps } from '../../types';\n\n/*\n A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n \n @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"quantity\">\n * {() => (\n * <NumberField\n * label=\"Quantity\"\n * placeholder=\"0\"\n * unit=\"pcs\"\n * decimalPlaces={2}\n * required\n * />\n * )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n ({\n label,\n description,\n placeholder,\n tooltip,\n helperText,\n orientation = 'responsive',\n showErrorMessage = true,\n rounding,\n decimalPlaces,\n precision,\n unit,\n required = false,\n disabled = false,\n allowNegative,\n }) => {\n const id = useId();\n const errorId = useId();\n\n const field = useTanStackFieldContext<number \| null>();\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _invalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _hasErrors = !!field.state.meta.errors.length;\n\n const onValueChange = useCallback(\n (value: number \| null) => {\n if (isDisabled) return;\n field.handleChange(value);\n },\n [isDisabled, field.handleChange]\n );\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation={orientation} data-invalid={_invalid}>\n <FieldContent>\n <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain>\n <div className=\"relative w-full\">\n <NumberInput\n id={id}\n value={field.state.value}\n aria-invalid={_invalid}\n aria-describedby={errorId}\n placeholder={placeholder}\n disabled={isDisabled}\n roundingRule={rounding}\n numberAfterDecimalPoint={decimalPlaces}\n precision={precision}\n unitText={unit}\n allowNegative={allowNegative}\n className={cn(isDisabled && 'pointer-events-none opacity-60')}\n onBlur={field.handleBlur}\n onValueChange={onValueChange}\n />\n {isSubmitting && (\n <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n <Loader2Icon className=\"animate-spin text-primary-strong\" />\n </div>\n )}\n {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n <BanIcon />\n </div>\n )}\n <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n </div>\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"wjBA+CA,MAAa,EAAc,GACxB,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,EAAK,EAAM,EACX,EAAU,EAAM,EAEhB,EAAQ,EAAuC,EAE/C,EAAe,EAAS,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,EAAgB,EACnB,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAAI,gBAAe,EAAxC,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,EAAA,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EAEd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,CACE,EAAC,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,UAAW,EAAG,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,GACC,EAAC,MAAD,CAAK,UAAU,4EACb,SAAA,EAAC,EAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,GAChD,EAAC,MAAD,CAAK,UAAU,gGACb,SAAA,EAAC,EAAD,CAAU,CAAA,CACP,CAAA,EAEP,EAAC,MAAD,CAAK,UAAU,uDACZ,SAAA,GAAY,EAAmB,EAAC,EAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,EAAI,EAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,CACL,CAAA,EAAA,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}

package/dist/{number-field-DKZz-27X.cjs → number-field-CWDYA3La.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-BxqS40rB.cjs"),t=require("./field-BSLi-P0Q.cjs"),n=require("./number-input-CAr3JaA-.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=(0,i.memo)(({label:c,description:l,placeholder:u,tooltip:d,helperText:f,orientation:p=`responsive`,showErrorMessage:m=!0,rounding:h,decimalPlaces:g,precision:_,unit:v,required:y=!1,disabled:b=!1,allowNegative:x})=>{let S=(0,i.useId)(),C=(0,i.useId)(),w=e.G(),T=(0,s.useStore)(w.form.store,({isSubmitting:e})=>e),E=b||T,D=w.state.meta.isDirty||w.state.meta.isTouched,O=D&&!w.state.meta.isValid,k=y&&w.state.value===null,A=!!w.state.meta.errors.length,j=(0,i.useCallback)(e=>{E||w.handleChange(e)},[E,w.handleChange]);return(0,o.jsxs)(t.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(t.Field,{orientation:p,"data-invalid":O,children:[(0,o.jsxs)(t.FieldContent,{children:[(0,o.jsxs)(t.FieldLabel,{htmlFor:S,"aria-required":k,children:[c,d&&(0,o.jsx)(t.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(t.FieldDescription,{children:l})]}),(0,o.jsxs)(t.FieldContentMain,{children:[(0,o.jsxs)(`div`,{className:`relative w-full`,children:[(0,o.jsx)(n.t,{id:S,value:w.state.value,"aria-invalid":O,"aria-describedby":C,placeholder:u,disabled:E,roundingRule:h,numberAfterDecimalPoint:g,precision:_,unitText:v,allowNegative:x,className:(0,a.cn)(E&&`pointer-events-none opacity-60`),onBlur:w.handleBlur,onValueChange:j}),T&&(0,o.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:(0,o.jsx)(r.Loader2Icon,{className:`animate-spin text-primary-strong`})}),!T&&D&&m&&A&&(0,o.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:(0,o.jsx)(r.BanIcon,{})}),(0,o.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:D&&m?(0,o.jsx)(t.FieldError,{id:C,className:`flex-1`,errors:w.state.meta.errors}):(0,o.jsx)(`div`,{})})]}),(0,o.jsx)(t.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(t.FieldSeparator,{})]})});c.displayName=`NumberField`,exports.NumberField=c;
-//# sourceMappingURL=number-field-DKZz-27X.cjs.map
+const e=require("./tanstack-form-C0ab8EEl.cjs"),t=require("./field-BSLi-P0Q.cjs"),n=require("./number-input-CAr3JaA-.cjs");let r=require("lucide-react"),i=require("react"),a=require("@customafk/react-toolkit/utils"),o=require("react/jsx-runtime"),s=require("@tanstack/react-form");const c=(0,i.memo)(({label:c,description:l,placeholder:u,tooltip:d,helperText:f,orientation:p=`responsive`,showErrorMessage:m=!0,rounding:h,decimalPlaces:g,precision:_,unit:v,required:y=!1,disabled:b=!1,allowNegative:x})=>{let S=(0,i.useId)(),C=(0,i.useId)(),w=e.G(),T=(0,s.useStore)(w.form.store,({isSubmitting:e})=>e),E=b||T,D=w.state.meta.isDirty||w.state.meta.isTouched,O=D&&!w.state.meta.isValid,k=y&&w.state.value===null,A=!!w.state.meta.errors.length,j=(0,i.useCallback)(e=>{E||w.handleChange(e)},[E,w.handleChange]);return(0,o.jsxs)(t.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(t.Field,{orientation:p,"data-invalid":O,children:[(0,o.jsxs)(t.FieldContent,{children:[(0,o.jsxs)(t.FieldLabel,{htmlFor:S,"aria-required":k,children:[c,d&&(0,o.jsx)(t.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(t.FieldDescription,{children:l})]}),(0,o.jsxs)(t.FieldContentMain,{children:[(0,o.jsxs)(`div`,{className:`relative w-full`,children:[(0,o.jsx)(n.t,{id:S,value:w.state.value,"aria-invalid":O,"aria-describedby":C,placeholder:u,disabled:E,roundingRule:h,numberAfterDecimalPoint:g,precision:_,unitText:v,allowNegative:x,className:(0,a.cn)(E&&`pointer-events-none opacity-60`),onBlur:w.handleBlur,onValueChange:j}),T&&(0,o.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5`,children:(0,o.jsx)(r.Loader2Icon,{className:`animate-spin text-primary-strong`})}),!T&&D&&m&&A&&(0,o.jsx)(`div`,{className:`pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5`,children:(0,o.jsx)(r.BanIcon,{})}),(0,o.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-between gap-x-2`,children:D&&m?(0,o.jsx)(t.FieldError,{id:C,className:`flex-1`,errors:w.state.meta.errors}):(0,o.jsx)(`div`,{})})]}),(0,o.jsx)(t.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(t.FieldSeparator,{})]})});c.displayName=`NumberField`,exports.NumberField=c;
+//# sourceMappingURL=number-field-CWDYA3La.cjs.map

package/dist/{number-field-DKZz-27X.cjs.map → number-field-CWDYA3La.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-field-~~DKZz-27X~~.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","NumberInput","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { NumberFieldProps } from '../../types';\n\n/*\n A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n \n @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"quantity\">\n * {() => (\n * <NumberField\n * label=\"Quantity\"\n * placeholder=\"0\"\n * unit=\"pcs\"\n * decimalPlaces={2}\n * required\n * />\n * )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n ({\n label,\n description,\n placeholder,\n tooltip,\n helperText,\n orientation = 'responsive',\n showErrorMessage = true,\n rounding,\n decimalPlaces,\n precision,\n unit,\n required = false,\n disabled = false,\n allowNegative,\n }) => {\n const id = useId();\n const errorId = useId();\n\n const field = useTanStackFieldContext<number \| null>();\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _invalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _hasErrors = !!field.state.meta.errors.length;\n\n const onValueChange = useCallback(\n (value: number \| null) => {\n if (isDisabled) return;\n field.handleChange(value);\n },\n [isDisabled, field.handleChange]\n );\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation={orientation} data-invalid={_invalid}>\n <FieldContent>\n <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain>\n <div className=\"relative w-full\">\n <NumberInput\n id={id}\n value={field.state.value}\n aria-invalid={_invalid}\n aria-describedby={errorId}\n placeholder={placeholder}\n disabled={isDisabled}\n roundingRule={rounding}\n numberAfterDecimalPoint={decimalPlaces}\n precision={precision}\n unitText={unit}\n allowNegative={allowNegative}\n className={cn(isDisabled && 'pointer-events-none opacity-60')}\n onBlur={field.handleBlur}\n onValueChange={onValueChange}\n />\n {isSubmitting && (\n <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n <Loader2Icon className=\"animate-spin text-primary-strong\" />\n </div>\n )}\n {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n <BanIcon />\n </div>\n )}\n <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n </div>\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"yRA+CA,MAAa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,GAAA,EAAA,EAAA,MAAA,CAAgB,EAEhB,EAAQA,EAAAA,EAAuC,EAE/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAI,gBAAe,EAAxC,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GAEd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,WAAA,EAAA,EAAA,GAAA,CAAc,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,4EACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,IAChD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gGACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAU,CAAA,CACP,CAAA,GAEP,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uDACZ,SAAA,GAAY,GAAmB,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,GAAI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,CACL,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}
1	+ {"version":3,"file":"number-field-CWDYA3La.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","NumberInput","Loader2Icon","BanIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/number-field.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useCallback, useId } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { BanIcon, Loader2Icon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { NumberInput } from '@/components/ui/inputs/number-input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { NumberFieldProps } from '../../types';\n\n/*\n A TanStack Form-connected numeric input field supporting rounding rules,\n * decimal precision, unit labels, and submission-state feedback.\n \n @example\n * import { NumberField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"quantity\">\n * {() => (\n * <NumberField\n * label=\"Quantity\"\n * placeholder=\"0\"\n * unit=\"pcs\"\n * decimalPlaces={2}\n * required\n * />\n * )}\n * </form.Field>\n */\nexport const NumberField = memo<NumberFieldProps>(\n ({\n label,\n description,\n placeholder,\n tooltip,\n helperText,\n orientation = 'responsive',\n showErrorMessage = true,\n rounding,\n decimalPlaces,\n precision,\n unit,\n required = false,\n disabled = false,\n allowNegative,\n }) => {\n const id = useId();\n const errorId = useId();\n\n const field = useTanStackFieldContext<number \| null>();\n\n const isSubmitting = useStore(field.form.store, ({ isSubmitting }) => isSubmitting);\n const isDisabled = disabled \|\| isSubmitting;\n\n const _touched = field.state.meta.isDirty \|\| field.state.meta.isTouched;\n const _invalid = _touched && !field.state.meta.isValid;\n const _isEmpty = required && field.state.value === null;\n const _hasErrors = !!field.state.meta.errors.length;\n\n const onValueChange = useCallback(\n (value: number \| null) => {\n if (isDisabled) return;\n field.handleChange(value);\n },\n [isDisabled, field.handleChange]\n );\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field orientation={orientation} data-invalid={_invalid}>\n <FieldContent>\n <FieldLabel htmlFor={id} aria-required={_isEmpty}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n\n <FieldContentMain>\n <div className=\"relative w-full\">\n <NumberInput\n id={id}\n value={field.state.value}\n aria-invalid={_invalid}\n aria-describedby={errorId}\n placeholder={placeholder}\n disabled={isDisabled}\n roundingRule={rounding}\n numberAfterDecimalPoint={decimalPlaces}\n precision={precision}\n unitText={unit}\n allowNegative={allowNegative}\n className={cn(isDisabled && 'pointer-events-none opacity-60')}\n onBlur={field.handleBlur}\n onValueChange={onValueChange}\n />\n {isSubmitting && (\n <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.5 [&>svg]:size-3.5\">\n <Loader2Icon className=\"animate-spin text-primary-strong\" />\n </div>\n )}\n {!isSubmitting && _touched && showErrorMessage && _hasErrors && (\n <div className=\"pointer-events-none absolute inset-s-2 inset-y-0 top-2.75 text-danger-strong [&>svg]:size-3.5\">\n <BanIcon />\n </div>\n )}\n <div className=\"mt-1 flex w-full items-start justify-between gap-x-2\">\n {_touched && showErrorMessage ? <FieldError id={errorId} className=\"flex-1\" errors={field.state.meta.errors} /> : <div />}\n </div>\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n }\n);\n\nNumberField.displayName = 'NumberField';\n"],"mappings":"yRA+CA,MAAa,GAAA,EAAA,EAAA,KAAA,EACV,CACC,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WACA,gBACA,YACA,OACA,WAAW,GACX,WAAW,GACX,mBACI,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,GAAA,EAAA,EAAA,MAAA,CAAgB,EAEhB,EAAQA,EAAAA,EAAuC,EAE/C,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAM,KAAK,OAAQ,CAAE,kBAAmB,CAAY,EAC5E,EAAa,GAAY,EAEzB,EAAW,EAAM,MAAM,KAAK,SAAW,EAAM,MAAM,KAAK,UACxD,EAAW,GAAY,CAAC,EAAM,MAAM,KAAK,QACzC,EAAW,GAAY,EAAM,MAAM,QAAU,KAC7C,EAAa,CAAC,CAAC,EAAM,MAAM,KAAK,OAAO,OAEvC,GAAA,EAAA,EAAA,YAAA,CACH,GAAyB,CACpB,GACJ,EAAM,aAAa,CAAK,CAC1B,EACA,CAAC,EAAY,EAAM,YAAY,CACjC,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAoB,cAAa,eAAc,EAA/C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAI,gBAAe,EAAxC,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GAEd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kBAAf,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CACM,KACJ,MAAO,EAAM,MAAM,MACnB,eAAc,EACd,mBAAkB,EACL,cACb,SAAU,EACV,aAAc,EACd,wBAAyB,EACd,YACX,SAAU,EACK,gBACf,WAAA,EAAA,EAAA,GAAA,CAAc,GAAc,gCAAgC,EAC5D,OAAQ,EAAM,WACC,eAChB,CAAA,EACA,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,4EACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,UAAU,kCAAoC,CAAA,CACxD,CAAA,EAEN,CAAC,GAAgB,GAAY,GAAoB,IAChD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,gGACb,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAU,CAAA,CACP,CAAA,GAEP,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,uDACZ,SAAA,GAAY,GAAmB,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,GAAI,EAAS,UAAU,SAAS,OAAQ,EAAM,MAAM,KAAK,MAAS,CAAA,GAAI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAM,CAAA,CACrH,CAAA,CACF,CACL,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB,CACF,EAEA,EAAY,YAAc"}

package/dist/{password-field-DOIe6wTv.mjs → password-field-B2_kzss6.mjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{G as e}from"./tanstack-form-q9hDCc0Y.mjs";import{Input as t}from"./ui/input.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-V2DoD8qL.mjs";import{EyeIcon as f,EyeOffIcon as p}from"lucide-react";import{useCallback as m,useId as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{useStore as y}from"@tanstack/react-form";const b=({label:b,description:x,placeholder:S,orientation:C=`responsive`,tooltip:w,helperText:T,showErrorMessage:E=!0})=>{let D=h(),{form:O,name:k,state:A,handleBlur:j,handleChange:M}=e(),N=y(O.store,({isSubmitting:e})=>e),[P,F]=g(!1),I=A.meta.isDirty&&A.meta.isTouched&&!A.meta.isValid,L=m(()=>F(e=>!e),[]),R=m(({target:{value:e}})=>{N||M(e||null)},[N,M]);return v(s,{className:`gap-y-4 px-4`,children:[v(n,{"data-invalid":I,orientation:C,children:[v(r,{children:[v(c,{htmlFor:D,children:[b,w&&_(d,{tooltip:w})]}),_(a,{children:x})]}),v(i,{children:[_(t,{id:D,name:k,type:P?`text`:`password`,placeholder:S,value:A.value??``,"aria-invalid":I,autoComplete:`new-password`,onBlur:j,onChange:R}),_(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:L,"aria-label":P?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":P,"aria-controls":D,children:_(P?p:f,{size:16,"aria-hidden":`true`})}),_(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:E&&A.meta.isDirty&&_(o,{errors:A.meta.errors})}),_(l,{isShow:!!T,children:T})]})]}),_(u,{})]})};export{b as PasswordField};
-//# sourceMappingURL=password-field-DOIe6wTv.mjs.map
+import{Input as e}from"./ui/input.mjs";import{G as t}from"./tanstack-form-fkaBh9RO.mjs";import{Field as n,FieldContent as r,FieldContentMain as i,FieldDescription as a,FieldError as o,FieldGroup as s,FieldLabel as c,FieldNote as l,FieldSeparator as u,FieldTooltip as d}from"./field-V2DoD8qL.mjs";import{EyeIcon as f,EyeOffIcon as p}from"lucide-react";import{useCallback as m,useId as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{useStore as y}from"@tanstack/react-form";const b=({label:b,description:x,placeholder:S,orientation:C=`responsive`,tooltip:w,helperText:T,showErrorMessage:E=!0})=>{let D=h(),{form:O,name:k,state:A,handleBlur:j,handleChange:M}=t(),N=y(O.store,({isSubmitting:e})=>e),[P,F]=g(!1),I=A.meta.isDirty&&A.meta.isTouched&&!A.meta.isValid,L=m(()=>F(e=>!e),[]),R=m(({target:{value:e}})=>{N||M(e||null)},[N,M]);return v(s,{className:`gap-y-4 px-4`,children:[v(n,{"data-invalid":I,orientation:C,children:[v(r,{children:[v(c,{htmlFor:D,children:[b,w&&_(d,{tooltip:w})]}),_(a,{children:x})]}),v(i,{children:[_(e,{id:D,name:k,type:P?`text`:`password`,placeholder:S,value:A.value??``,"aria-invalid":I,autoComplete:`new-password`,onBlur:j,onChange:R}),_(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:L,"aria-label":P?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":P,"aria-controls":D,children:_(P?p:f,{size:16,"aria-hidden":`true`})}),_(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:E&&A.meta.isDirty&&_(o,{errors:A.meta.errors})}),_(l,{isShow:!!T,children:T})]})]}),_(u,{})]})};export{b as PasswordField};
+//# sourceMappingURL=password-field-B2_kzss6.mjs.map

package/dist/{password-field-DOIe6wTv.mjs.map → password-field-B2_kzss6.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"password-field-~~DOIe6wTv~~.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { PasswordFieldProps as Props } from '../../types';\n\n/*\n A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n \n @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"password\">\n * {() => (\n * <PasswordField\n * label=\"Password\"\n * placeholder=\"Enter your password\"\n * helperText=\"Must be at least 8 characters\"\n * />\n * )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n helperText,\n showErrorMessage = true,\n}) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const [isVisible, setIsVisible] = useState<boolean>(false);\n\n const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, handleChange]\n );\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field data-invalid={_invalid} orientation={orientation}>\n <FieldContent>\n <FieldLabel htmlFor={id}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n <FieldContentMain>\n <Input\n id={id}\n name={name}\n type={isVisible ? 'text' : 'password'}\n placeholder={placeholder}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n autoComplete=\"new-password\"\n onBlur={handleBlur}\n onChange={onChange}\n />\n\n <button\n className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n type=\"button\"\n onClick={toggleVisibility}\n aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n aria-pressed={isVisible}\n aria-controls={id}\n >\n {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n </button>\n\n <div className=\"mt-1 flex w-full items-start justify-start\">\n {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"8fA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAkB,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,cAA5C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAArB,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,EAAA,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,EAED,EAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EAEd,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,EAER,EAAC,MAAD,CAAK,UAAU,6CACZ,SAAA,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}
1	+ {"version":3,"file":"password-field-B2_kzss6.mjs","names":[],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { PasswordFieldProps as Props } from '../../types';\n\n/*\n A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n \n @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"password\">\n * {() => (\n * <PasswordField\n * label=\"Password\"\n * placeholder=\"Enter your password\"\n * helperText=\"Must be at least 8 characters\"\n * />\n * )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n helperText,\n showErrorMessage = true,\n}) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const [isVisible, setIsVisible] = useState<boolean>(false);\n\n const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, handleChange]\n );\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field data-invalid={_invalid} orientation={orientation}>\n <FieldContent>\n <FieldLabel htmlFor={id}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n <FieldContentMain>\n <Input\n id={id}\n name={name}\n type={isVisible ? 'text' : 'password'}\n placeholder={placeholder}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n autoComplete=\"new-password\"\n onBlur={handleBlur}\n onChange={onChange}\n />\n\n <button\n className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n type=\"button\"\n onClick={toggleVisibility}\n aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n aria-pressed={isVisible}\n aria-controls={id}\n >\n {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n </button>\n\n <div className=\"mt-1 flex w-full items-start justify-start\">\n {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"8fA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,EAAK,EAAM,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiB,EAAuC,EAEzF,EAAe,EAAS,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,GAAgB,EAAkB,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,EAAmB,MAAkB,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,EAAW,GACd,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAC,EAAD,CAAY,UAAU,eAAtB,SAAA,CACE,EAAC,EAAD,CAAO,eAAc,EAAuB,cAA5C,SAAA,CACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAY,QAAS,EAArB,SAAA,CACG,EACA,GAAW,EAAC,EAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,EAAA,EAAC,EAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,EACd,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,EAED,EAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EAEd,SAAY,EAAZ,EAAa,EAA8C,EAA/C,CAAY,KAAM,GAAI,cAAY,MAAQ,CAA2C,CAC5F,CAAA,EAER,EAAC,MAAD,CAAK,UAAU,6CACZ,SAAA,GAAoB,EAAM,KAAK,SAAW,EAAC,EAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,EACL,EAAC,EAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,EAAA,EAAC,EAAD,CAAiB,CAAA,CACP,GAEhB"}

package/dist/{password-field-BuWARi35.cjs → password-field-BHRhVyZ0.cjs} RENAMED Viewed

@@ -1,2 +1,2 @@
-const e=require("./tanstack-form-BxqS40rB.cjs"),t=require("./ui/input.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("lucide-react"),i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,description:c,placeholder:l,orientation:u=`responsive`,tooltip:d,helperText:f,showErrorMessage:p=!0})=>{let m=(0,i.useId)(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=e.G(),b=(0,o.useStore)(h.store,({isSubmitting:e})=>e),[x,S]=(0,i.useState)(!1),C=_.meta.isDirty&&_.meta.isTouched&&!_.meta.isValid,w=(0,i.useCallback)(()=>S(e=>!e),[]),T=(0,i.useCallback)(({target:{value:e}})=>{b||y(e||null)},[b,y]);return(0,a.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,a.jsxs)(n.Field,{"data-invalid":C,orientation:u,children:[(0,a.jsxs)(n.FieldContent,{children:[(0,a.jsxs)(n.FieldLabel,{htmlFor:m,children:[s,d&&(0,a.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,a.jsx)(n.FieldDescription,{children:c})]}),(0,a.jsxs)(n.FieldContentMain,{children:[(0,a.jsx)(t.Input,{id:m,name:g,type:x?`text`:`password`,placeholder:l,value:_.value??``,"aria-invalid":C,autoComplete:`new-password`,onBlur:v,onChange:T}),(0,a.jsx)(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:w,"aria-label":x?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":x,"aria-controls":m,children:x?(0,a.jsx)(r.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,a.jsx)(r.EyeIcon,{size:16,"aria-hidden":`true`})}),(0,a.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:p&&_.meta.isDirty&&(0,a.jsx)(n.FieldError,{errors:_.meta.errors})}),(0,a.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,a.jsx)(n.FieldSeparator,{})]})};exports.PasswordField=s;
-//# sourceMappingURL=password-field-BuWARi35.cjs.map
+const e=require("./ui/input.cjs"),t=require("./tanstack-form-C0ab8EEl.cjs"),n=require("./field-BSLi-P0Q.cjs");let r=require("lucide-react"),i=require("react"),a=require("react/jsx-runtime"),o=require("@tanstack/react-form");const s=({label:s,description:c,placeholder:l,orientation:u=`responsive`,tooltip:d,helperText:f,showErrorMessage:p=!0})=>{let m=(0,i.useId)(),{form:h,name:g,state:_,handleBlur:v,handleChange:y}=t.G(),b=(0,o.useStore)(h.store,({isSubmitting:e})=>e),[x,S]=(0,i.useState)(!1),C=_.meta.isDirty&&_.meta.isTouched&&!_.meta.isValid,w=(0,i.useCallback)(()=>S(e=>!e),[]),T=(0,i.useCallback)(({target:{value:e}})=>{b||y(e||null)},[b,y]);return(0,a.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,a.jsxs)(n.Field,{"data-invalid":C,orientation:u,children:[(0,a.jsxs)(n.FieldContent,{children:[(0,a.jsxs)(n.FieldLabel,{htmlFor:m,children:[s,d&&(0,a.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,a.jsx)(n.FieldDescription,{children:c})]}),(0,a.jsxs)(n.FieldContentMain,{children:[(0,a.jsx)(e.Input,{id:m,name:g,type:x?`text`:`password`,placeholder:l,value:_.value??``,"aria-invalid":C,autoComplete:`new-password`,onBlur:v,onChange:T}),(0,a.jsx)(`button`,{className:`absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,type:`button`,onClick:w,"aria-label":x?`Ẩn mật khẩu`:`Hiện mật khẩu`,"aria-pressed":x,"aria-controls":m,children:x?(0,a.jsx)(r.EyeOffIcon,{size:16,"aria-hidden":`true`}):(0,a.jsx)(r.EyeIcon,{size:16,"aria-hidden":`true`})}),(0,a.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:p&&_.meta.isDirty&&(0,a.jsx)(n.FieldError,{errors:_.meta.errors})}),(0,a.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,a.jsx)(n.FieldSeparator,{})]})};exports.PasswordField=s;
+//# sourceMappingURL=password-field-BHRhVyZ0.cjs.map

package/dist/{password-field-BuWARi35.cjs.map → password-field-BHRhVyZ0.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"password-field-~~BuWARi35~~.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","EyeOffIcon","EyeIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { PasswordFieldProps as Props } from '../../types';\n\n/*\n A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n \n @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"password\">\n * {() => (\n * <PasswordField\n * label=\"Password\"\n * placeholder=\"Enter your password\"\n * helperText=\"Must be at least 8 characters\"\n * />\n * )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n helperText,\n showErrorMessage = true,\n}) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const [isVisible, setIsVisible] = useState<boolean>(false);\n\n const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, handleChange]\n );\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field data-invalid={_invalid} orientation={orientation}>\n <FieldContent>\n <FieldLabel htmlFor={id}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n <FieldContentMain>\n <Input\n id={id}\n name={name}\n type={isVisible ? 'text' : 'password'}\n placeholder={placeholder}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n autoComplete=\"new-password\"\n onBlur={handleBlur}\n onChange={onChange}\n />\n\n <button\n className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n type=\"button\"\n onClick={toggleVisibility}\n aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n aria-pressed={isVisible}\n aria-controls={id}\n >\n {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n </button>\n\n <div className=\"mt-1 flex w-full items-start justify-start\">\n {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"gOA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAkC,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,cAA5C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAArB,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EAEd,SAAA,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,6CACZ,SAAA,GAAoB,EAAM,KAAK,UAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
1	+ {"version":3,"file":"password-field-BHRhVyZ0.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","EyeOffIcon","EyeIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/password-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useId, useState } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useTanStackFieldContext } from '../form-context';\nimport {\n Field,\n FieldContent,\n FieldContentMain,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLabel,\n FieldNote,\n FieldSeparator,\n FieldTooltip,\n} from '../ui/field';\n\nimport type { PasswordFieldProps as Props } from '../../types';\n\n/*\n A TanStack Form-connected password input field with a show/hide toggle button\n * and inline validation error display.\n \n @example\n * import { PasswordField } from '@customafk/lunas-ui/features/tanstack-form';\n \n <form.Field name=\"password\">\n * {() => (\n * <PasswordField\n * label=\"Password\"\n * placeholder=\"Enter your password\"\n * helperText=\"Must be at least 8 characters\"\n * />\n * )}\n * </form.Field>\n */\nexport const PasswordField: React.FC<Props> = ({\n label,\n description,\n placeholder,\n orientation = 'responsive',\n tooltip,\n helperText,\n showErrorMessage = true,\n}) => {\n const id = useId();\n const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string \| null>();\n\n const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n const [isVisible, setIsVisible] = useState<boolean>(false);\n\n const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n\n const toggleVisibility = useCallback(() => setIsVisible(prev => !prev), []);\n\n const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n ({ target: { value } }) => {\n if (isSubmitting) return;\n handleChange(value \|\| null);\n },\n [isSubmitting, handleChange]\n );\n\n return (\n <FieldGroup className=\"gap-y-4 px-4\">\n <Field data-invalid={_invalid} orientation={orientation}>\n <FieldContent>\n <FieldLabel htmlFor={id}>\n {label}\n {tooltip && <FieldTooltip tooltip={tooltip} />}\n </FieldLabel>\n <FieldDescription>{description}</FieldDescription>\n </FieldContent>\n <FieldContentMain>\n <Input\n id={id}\n name={name}\n type={isVisible ? 'text' : 'password'}\n placeholder={placeholder}\n value={state.value ?? ''}\n aria-invalid={_invalid}\n autoComplete=\"new-password\"\n onBlur={handleBlur}\n onChange={onChange}\n />\n\n <button\n className=\"absolute inset-e-0 inset-y-0 flex size-9 items-center justify-center rounded-e-md text-muted outline-none transition-[color,box-shadow] focus:z-10 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n type=\"button\"\n onClick={toggleVisibility}\n aria-label={isVisible ? 'Ẩn mật khẩu' : 'Hiện mật khẩu'}\n aria-pressed={isVisible}\n aria-controls={id}\n >\n {isVisible ? <EyeOffIcon size={16} aria-hidden=\"true\" /> : <EyeIcon size={16} aria-hidden=\"true\" />}\n </button>\n\n <div className=\"mt-1 flex w-full items-start justify-start\">\n {showErrorMessage && state.meta.isDirty && <FieldError errors={state.meta.errors} />}\n </div>\n <FieldNote isShow={!!helperText}>{helperText}</FieldNote>\n </FieldContentMain>\n </Field>\n <FieldSeparator />\n </FieldGroup>\n );\n};\n"],"mappings":"gOA2CA,MAAa,GAAkC,CAC7C,QACA,cACA,cACA,cAAc,aACd,UACA,aACA,mBAAmB,MACf,CACJ,IAAM,GAAA,EAAA,EAAA,MAAA,CAAW,EACX,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAkC,EAAK,EAEnD,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QAErE,GAAA,EAAA,EAAA,YAAA,KAAqC,EAAa,GAAQ,CAAC,CAAI,EAAG,CAAC,CAAC,EAEpE,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACJ,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,CAAY,CAC7B,EAEA,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,eAAtB,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,cAA5C,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAArB,SAAA,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,CACZ,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,iBAAD,CAAA,SAAmB,CAA8B,CAAA,CACrC,CAAA,CAAA,GACd,EAAA,EAAA,KAAA,CAACC,EAAAA,iBAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACM,KACE,OACN,KAAM,EAAY,OAAS,WACd,cACb,MAAO,EAAM,OAAS,GACtB,eAAc,EACd,aAAa,eACb,OAAQ,EACE,UACX,CAAA,GAED,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,kOACV,KAAK,SACL,QAAS,EACT,aAAY,EAAY,cAAgB,gBACxC,eAAc,EACd,gBAAe,EAEd,SAAA,GAAY,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,GAAI,cAAY,MAAQ,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,QAAD,CAAS,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC5F,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,6CACZ,SAAA,GAAoB,EAAM,KAAK,UAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,OAAQ,EAAM,KAAK,MAAS,CAAA,CAChF,CAAA,GACL,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,OAAQ,CAAC,CAAC,EAAa,SAAA,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,CACP,CAAA,GAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}