@customafk/lunas-ui 0.2.65 → 0.2.67

package/dist/dialogs/loading-dialog.d.cts

@@ -1,19 +1,2 @@
-//#region packages/components/dialogs/loading-dialog.d.ts
-type LoadingDialogProps = {
-  /** Controls whether the dialog is open. */open?: boolean; /** Callback invoked when the dialog open state changes. */
-  onOpenChange?: (open: boolean) => void;
-};
-/**
- * Displays a transparent, pointer-events-disabled modal overlay with a centered loading spinner.
- *
- * @example
- * ```tsx
- * import { LoadingDialog } from '@customafk/lunas-ui/dialogs/loading-dialog';
- *
- * <LoadingDialog open={isLoading} onOpenChange={setIsLoading} />
- * ```
- */
-declare const LoadingDialog: React.FC<LoadingDialogProps>;
-//#endregion
-export { LoadingDialog, LoadingDialogProps };
-//# sourceMappingURL=loading-dialog.d.cts.map
+import { n as LoadingDialogProps, t as LoadingDialog } from "../loading-dialog-C73EJx9s.cjs";
+export { LoadingDialog, LoadingDialogProps };

package/dist/dialogs/loading-dialog.d.mts

@@ -1,19 +1,2 @@
-//#region packages/components/dialogs/loading-dialog.d.ts
-type LoadingDialogProps = {
-  /** Controls whether the dialog is open. */open?: boolean; /** Callback invoked when the dialog open state changes. */
-  onOpenChange?: (open: boolean) => void;
-};
-/**
- * Displays a transparent, pointer-events-disabled modal overlay with a centered loading spinner.
- *
- * @example
- * ```tsx
- * import { LoadingDialog } from '@customafk/lunas-ui/dialogs/loading-dialog';
- *
- * <LoadingDialog open={isLoading} onOpenChange={setIsLoading} />
- * ```
- */
-declare const LoadingDialog: React.FC<LoadingDialogProps>;
-//#endregion
-export { LoadingDialog, LoadingDialogProps };
-//# sourceMappingURL=loading-dialog.d.mts.map
+import { n as LoadingDialogProps, t as LoadingDialog } from "../loading-dialog-C73EJx9s.mjs";
+export { LoadingDialog, LoadingDialogProps };

package/dist/donut-chart-CsPPKy0G.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=e=>e.key||e.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),s=({data:s,centerLabel:c,centerValueFormatter:l=e.formatCompactNumber,totalValue:u,showLegend:d=!0,showCenterTotal:f=!0,className:p,animate:m=!0,height:h})=>{let{chartData:g,config:_,total:v}=(0,n.useMemo)(()=>{let t=s.map((t,n)=>({...t,key:o(t),fill:t.color||e.getChartColor(n)}));return{chartData:t,config:Object.fromEntries(t.map(e=>[e.key,{label:e.name,color:e.fill}])),total:u??s.reduce((e,t)=>e+t.value,0)}},[s,u]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`donut-chart`,config:_,className:(0,r.cn)(`mx-auto`,h===void 0&&`aspect-square`,p),style:h===void 0?void 0:{height:h,aspectRatio:`auto`},children:(0,i.jsxs)(a.PieChart,{children:[(0,i.jsx)(t.ChartTooltip,{cursor:!1,content:(0,i.jsx)(t.ChartTooltipContent,{nameKey:`key`,hideLabel:!0})}),(0,i.jsx)(a.Pie,{data:g,dataKey:`value`,nameKey:`key`,innerRadius:`60%`,strokeWidth:5,isAnimationActive:m,children:f&&(0,i.jsx)(a.Label,{content:({viewBox:e})=>!e||!(`cx`in e)||!(`cy`in e)?null:(0,i.jsxs)(`text`,{x:e.cx,y:e.cy,textAnchor:`middle`,dominantBaseline:`middle`,children:[(0,i.jsx)(`tspan`,{x:e.cx,y:e.cy,className:`fill-text-positive-strong font-number text-2xl font-bold`,children:l(v)}),c&&(0,i.jsx)(`tspan`,{x:e.cx,y:(e.cy||0)+22,className:`fill-muted text-xs`,children:c})]})})}),d&&(0,i.jsx)(t.ChartLegend,{content:(0,i.jsx)(t.ChartLegendContent,{nameKey:`key`})})]})})};exports.DonutChart=s;
+//# sourceMappingURL=donut-chart-CsPPKy0G.cjs.map

package/dist/donut-chart-CsPPKy0G.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart-CsPPKy0G.cjs","names":["formatCompactNumber","getChartColor","ChartContainer","PieChart","ChartTooltip","ChartTooltipContent","Pie","Label","ChartLegend","ChartLegendContent"],"sources":["../packages/components/features/charts/components/donut-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Label, Pie, PieChart } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, getChartColor } from '../utils';\n\nexport type DonutChartSegment = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type DonutChartProps = BaseChartProps & {\n  data: DonutChartSegment[];\n  /** Text under the center total, e.g. `'Total sales'`. */\n  centerLabel?: string;\n  /** Formats the center total. Defaults to compact notation. */\n  centerValueFormatter?: (total: number) => string;\n  /** Overrides the computed segment sum shown in the center. */\n  totalValue?: number;\n  showLegend?: boolean;\n  showCenterTotal?: boolean;\n};\n\nconst toKey = (segment: DonutChartSegment): string => segment.key || segment.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');\n\n/**\n * A donut breakdown chart with a center total — category sales, traffic sources, payment methods.\n *\n * @example\n * ```tsx\n * import { DonutChart } from '@customafk/lunas-ui/features/charts';\n *\n * <DonutChart\n *   data={[\n *     { name: 'Fashion', value: 12400 },\n *     { name: 'Electronics', value: 8200 },\n *   ]}\n *   centerLabel=\"Total sales\"\n * />\n * ```\n */\nexport const DonutChart = ({\n  data,\n  centerLabel,\n  centerValueFormatter = formatCompactNumber,\n  totalValue,\n  showLegend = true,\n  showCenterTotal = true,\n  className,\n  animate = true,\n  height,\n}: DonutChartProps) => {\n  const { chartData, config, total } = useMemo(() => {\n    const entries = data.map((segment, index) => ({\n      ...segment,\n      key: toKey(segment),\n      fill: segment.color || getChartColor(index),\n    }));\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return {\n      chartData: entries,\n      config: chartConfig,\n      total: totalValue ?? data.reduce((sum, segment) => sum + segment.value, 0),\n    };\n  }, [data, totalValue]);\n\n  return (\n    <ChartContainer\n      data-slot=\"donut-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <PieChart>\n        <ChartTooltip cursor={false} content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Pie data={chartData} dataKey=\"value\" nameKey=\"key\" innerRadius=\"60%\" strokeWidth={5} isAnimationActive={animate}>\n          {showCenterTotal && (\n            <Label\n              content={({ viewBox }) => {\n                if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n                return (\n                  <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                    <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-2xl font-bold\">\n                      {centerValueFormatter(total)}\n                    </tspan>\n                    {centerLabel && (\n                      <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 22} className=\"fill-muted text-xs\">\n                        {centerLabel}\n                      </tspan>\n                    )}\n                  </text>\n                );\n              }}\n            />\n          )}\n        </Pie>\n        {showLegend && <ChartLegend content={<ChartLegendContent nameKey=\"key\" />} />}\n      </PieChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMA8BA,MAAM,EAAS,GAAuC,EAAQ,KAAO,EAAQ,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EAkB7G,GAAc,CACzB,OACA,cACA,uBAAuBA,EAAAA,oBACvB,aACA,aAAa,GACb,kBAAkB,GAClB,YACA,UAAU,GACV,YACqB,CACrB,GAAM,CAAE,YAAW,SAAQ,UAAA,EAAA,EAAA,QAAA,KAAwB,CACjD,IAAM,EAAU,EAAK,KAAK,EAAS,KAAW,CAC5C,GAAG,EACH,IAAK,EAAM,CAAO,EAClB,KAAM,EAAQ,OAASC,EAAAA,cAAc,CAAK,CAC5C,EAAE,EAEF,MAAO,CACL,UAAW,EACX,OAH+B,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAG1G,EAClB,MAAO,GAAc,EAAK,QAAQ,EAAK,IAAY,EAAM,EAAQ,MAAO,CAAC,CAC3E,CACF,EAAG,CAAC,EAAM,CAAU,CAAC,EAErB,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,cACF,SACR,WAAA,EAAA,EAAA,GAAA,CAAc,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,GACxF,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,KAAM,EAAW,QAAQ,QAAQ,QAAQ,MAAM,YAAY,MAAM,YAAa,EAAG,kBAAmB,WACtG,IACC,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,MAE/D,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,kBAAzE,EACE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,oEAC5C,EAAqB,CAAK,CACtB,CAAA,EACN,IACC,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,8BACxD,CACI,CAAA,CAEL,GAGX,CAAA,CAEA,CAAA,EACJ,IAAc,EAAA,EAAA,IAAA,CAACC,EAAAA,YAAD,CAAa,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,mBAAD,CAAoB,QAAQ,KAAO,CAAA,CAAI,CAAA,CACpE,CAAA,CAAA,CACI,CAAA,CAEpB"}

package/dist/donut-chart-eKZjuzW0.mjs

@@ -0,0 +1,2 @@
+import{formatCompactNumber as e,getChartColor as t}from"./features/charts/index.mjs";import{ChartContainer as n,ChartLegend as r,ChartLegendContent as i,ChartTooltip as a,ChartTooltipContent as o}from"./ui/chart.mjs";import{useMemo as s}from"react";import{cn as c}from"@customafk/react-toolkit/utils";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{Label as d,Pie as f,PieChart as p}from"recharts";const m=e=>e.key||e.name.toLowerCase().replace(/[^a-z0-9]+/g,`-`),h=({data:h,centerLabel:g,centerValueFormatter:_=e,totalValue:v,showLegend:y=!0,showCenterTotal:b=!0,className:x,animate:S=!0,height:C})=>{let{chartData:w,config:T,total:E}=s(()=>{let e=h.map((e,n)=>({...e,key:m(e),fill:e.color||t(n)}));return{chartData:e,config:Object.fromEntries(e.map(e=>[e.key,{label:e.name,color:e.fill}])),total:v??h.reduce((e,t)=>e+t.value,0)}},[h,v]);return l(n,{"data-slot":`donut-chart`,config:T,className:c(`mx-auto`,C===void 0&&`aspect-square`,x),style:C===void 0?void 0:{height:C,aspectRatio:`auto`},children:u(p,{children:[l(a,{cursor:!1,content:l(o,{nameKey:`key`,hideLabel:!0})}),l(f,{data:w,dataKey:`value`,nameKey:`key`,innerRadius:`60%`,strokeWidth:5,isAnimationActive:S,children:b&&l(d,{content:({viewBox:e})=>!e||!(`cx`in e)||!(`cy`in e)?null:u(`text`,{x:e.cx,y:e.cy,textAnchor:`middle`,dominantBaseline:`middle`,children:[l(`tspan`,{x:e.cx,y:e.cy,className:`fill-text-positive-strong font-number text-2xl font-bold`,children:_(E)}),g&&l(`tspan`,{x:e.cx,y:(e.cy||0)+22,className:`fill-muted text-xs`,children:g})]})})}),y&&l(r,{content:l(i,{nameKey:`key`})})]})})};export{h as DonutChart};
+//# sourceMappingURL=donut-chart-eKZjuzW0.mjs.map

package/dist/donut-chart-eKZjuzW0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart-eKZjuzW0.mjs","names":[],"sources":["../packages/components/features/charts/components/donut-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Label, Pie, PieChart } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber, getChartColor } from '../utils';\n\nexport type DonutChartSegment = NamedValue & {\n  /** Config key; derived from `name` when omitted. */\n  key?: string;\n  color?: string;\n};\n\nexport type DonutChartProps = BaseChartProps & {\n  data: DonutChartSegment[];\n  /** Text under the center total, e.g. `'Total sales'`. */\n  centerLabel?: string;\n  /** Formats the center total. Defaults to compact notation. */\n  centerValueFormatter?: (total: number) => string;\n  /** Overrides the computed segment sum shown in the center. */\n  totalValue?: number;\n  showLegend?: boolean;\n  showCenterTotal?: boolean;\n};\n\nconst toKey = (segment: DonutChartSegment): string => segment.key || segment.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');\n\n/**\n * A donut breakdown chart with a center total — category sales, traffic sources, payment methods.\n *\n * @example\n * ```tsx\n * import { DonutChart } from '@customafk/lunas-ui/features/charts';\n *\n * <DonutChart\n *   data={[\n *     { name: 'Fashion', value: 12400 },\n *     { name: 'Electronics', value: 8200 },\n *   ]}\n *   centerLabel=\"Total sales\"\n * />\n * ```\n */\nexport const DonutChart = ({\n  data,\n  centerLabel,\n  centerValueFormatter = formatCompactNumber,\n  totalValue,\n  showLegend = true,\n  showCenterTotal = true,\n  className,\n  animate = true,\n  height,\n}: DonutChartProps) => {\n  const { chartData, config, total } = useMemo(() => {\n    const entries = data.map((segment, index) => ({\n      ...segment,\n      key: toKey(segment),\n      fill: segment.color || getChartColor(index),\n    }));\n    const chartConfig: ChartConfig = Object.fromEntries(entries.map(entry => [entry.key, { label: entry.name, color: entry.fill }]));\n    return {\n      chartData: entries,\n      config: chartConfig,\n      total: totalValue ?? data.reduce((sum, segment) => sum + segment.value, 0),\n    };\n  }, [data, totalValue]);\n\n  return (\n    <ChartContainer\n      data-slot=\"donut-chart\"\n      config={config}\n      className={cn('mx-auto', height === undefined && 'aspect-square', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <PieChart>\n        <ChartTooltip cursor={false} content={<ChartTooltipContent nameKey=\"key\" hideLabel />} />\n        <Pie data={chartData} dataKey=\"value\" nameKey=\"key\" innerRadius=\"60%\" strokeWidth={5} isAnimationActive={animate}>\n          {showCenterTotal && (\n            <Label\n              content={({ viewBox }) => {\n                if (!viewBox || !('cx' in viewBox) || !('cy' in viewBox)) return null;\n                return (\n                  <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\" dominantBaseline=\"middle\">\n                    <tspan x={viewBox.cx} y={viewBox.cy} className=\"fill-text-positive-strong font-number text-2xl font-bold\">\n                      {centerValueFormatter(total)}\n                    </tspan>\n                    {centerLabel && (\n                      <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 22} className=\"fill-muted text-xs\">\n                        {centerLabel}\n                      </tspan>\n                    )}\n                  </text>\n                );\n              }}\n            />\n          )}\n        </Pie>\n        {showLegend && <ChartLegend content={<ChartLegendContent nameKey=\"key\" />} />}\n      </PieChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"uZA8BA,MAAM,EAAS,GAAuC,EAAQ,KAAO,EAAQ,KAAK,YAAY,CAAC,CAAC,QAAQ,cAAe,GAAG,EAkB7G,GAAc,CACzB,OACA,cACA,uBAAuB,EACvB,aACA,aAAa,GACb,kBAAkB,GAClB,YACA,UAAU,GACV,YACqB,CACrB,GAAM,CAAE,YAAW,SAAQ,SAAU,MAAc,CACjD,IAAM,EAAU,EAAK,KAAK,EAAS,KAAW,CAC5C,GAAG,EACH,IAAK,EAAM,CAAO,EAClB,KAAM,EAAQ,OAAS,EAAc,CAAK,CAC5C,EAAE,EAEF,MAAO,CACL,UAAW,EACX,OAH+B,OAAO,YAAY,EAAQ,IAAI,GAAS,CAAC,EAAM,IAAK,CAAE,MAAO,EAAM,KAAM,MAAO,EAAM,IAAK,CAAC,CAAC,CAG1G,EAClB,MAAO,GAAc,EAAK,QAAQ,EAAK,IAAY,EAAM,EAAQ,MAAO,CAAC,CAC3E,CACF,EAAG,CAAC,EAAM,CAAU,CAAC,EAErB,OACE,EAAC,EAAD,CACE,YAAU,cACF,SACR,UAAW,EAAG,UAAW,IAAW,IAAA,IAAa,gBAAiB,CAAS,EAC3E,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAc,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,QAAQ,MAAM,UAAA,EAAW,CAAA,CAAI,CAAA,EACxF,EAAC,EAAD,CAAK,KAAM,EAAW,QAAQ,QAAQ,QAAQ,MAAM,YAAY,MAAM,YAAa,EAAG,kBAAmB,WACtG,GACC,EAAC,EAAD,CACE,SAAU,CAAE,aACN,CAAC,GAAW,EAAE,OAAQ,IAAY,EAAE,OAAQ,GAAiB,KAE/D,EAAC,OAAD,CAAM,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,WAAW,SAAS,iBAAiB,kBAAzE,CACE,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,EAAG,EAAQ,GAAI,UAAU,oEAC5C,EAAqB,CAAK,CACtB,CAAA,EACN,GACC,EAAC,QAAD,CAAO,EAAG,EAAQ,GAAI,GAAI,EAAQ,IAAM,GAAK,GAAI,UAAU,8BACxD,CACI,CAAA,CAEL,GAGX,CAAA,CAEA,CAAA,EACJ,GAAc,EAAC,EAAD,CAAa,QAAS,EAAC,EAAD,CAAoB,QAAQ,KAAO,CAAA,CAAI,CAAA,CACpE,CAAA,CAAA,CACI,CAAA,CAEpB"}

package/dist/drawer-Dwx99ff3.d.cts

@@ -0,0 +1,70 @@
+import { Drawer } from "vaul";
+
+//#region packages/components/ui/drawer.d.ts
+/**
+ * Root provider for the Drawer — a vaul-powered slide-in panel supporting top, bottom, left, and right directions.
+ *
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@customafk/lunas-ui/ui/drawer';
+ *
+ * <Drawer>
+ *   <DrawerTrigger>Open Drawer</DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>Confirm action</DrawerTitle>
+ *       <DrawerDescription>This action cannot be undone.</DrawerDescription>
+ *     </DrawerHeader>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+declare function Drawer$1({
+  ...props
+}: React.ComponentProps<typeof Drawer.Root>): import("react").JSX.Element;
+/** Element that opens the Drawer when activated. */
+declare function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof Drawer.Trigger>): import("react").JSX.Element;
+/** Portals Drawer content outside the current DOM tree. */
+declare function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof Drawer.Portal>): import("react").JSX.Element;
+/** Button that programmatically closes the Drawer. */
+declare function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof Drawer.Close>): import("react").JSX.Element;
+/** Dimmed backdrop rendered behind the Drawer panel. */
+declare function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof Drawer.Overlay>): import("react").JSX.Element;
+/** The main Drawer panel; automatically positions itself based on the direction set on the root. */
+declare function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Drawer.Content>): import("react").JSX.Element;
+/** Padded header section at the top of the Drawer for the title and description. */
+declare function DrawerHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Footer section pinned to the bottom of the Drawer, typically used for action buttons. */
+declare function DrawerFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Accessible title element for the Drawer, announced by screen readers on open. */
+declare function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof Drawer.Title>): import("react").JSX.Element;
+/** Accessible description element for the Drawer, providing supplemental context to the title. */
+declare function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof Drawer.Description>): import("react").JSX.Element;
+//#endregion
+export { DrawerFooter as a, DrawerPortal as c, DrawerDescription as i, DrawerTitle as l, DrawerClose as n, DrawerHeader as o, DrawerContent as r, DrawerOverlay as s, Drawer$1 as t, DrawerTrigger as u };
+//# sourceMappingURL=drawer-Dwx99ff3.d.cts.map

package/dist/drawer-Dwx99ff3.d.mts

@@ -0,0 +1,70 @@
+import { Drawer } from "vaul";
+
+//#region packages/components/ui/drawer.d.ts
+/**
+ * Root provider for the Drawer — a vaul-powered slide-in panel supporting top, bottom, left, and right directions.
+ *
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from '@customafk/lunas-ui/ui/drawer';
+ *
+ * <Drawer>
+ *   <DrawerTrigger>Open Drawer</DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>Confirm action</DrawerTitle>
+ *       <DrawerDescription>This action cannot be undone.</DrawerDescription>
+ *     </DrawerHeader>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+declare function Drawer$1({
+  ...props
+}: React.ComponentProps<typeof Drawer.Root>): import("react").JSX.Element;
+/** Element that opens the Drawer when activated. */
+declare function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof Drawer.Trigger>): import("react").JSX.Element;
+/** Portals Drawer content outside the current DOM tree. */
+declare function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof Drawer.Portal>): import("react").JSX.Element;
+/** Button that programmatically closes the Drawer. */
+declare function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof Drawer.Close>): import("react").JSX.Element;
+/** Dimmed backdrop rendered behind the Drawer panel. */
+declare function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof Drawer.Overlay>): import("react").JSX.Element;
+/** The main Drawer panel; automatically positions itself based on the direction set on the root. */
+declare function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof Drawer.Content>): import("react").JSX.Element;
+/** Padded header section at the top of the Drawer for the title and description. */
+declare function DrawerHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Footer section pinned to the bottom of the Drawer, typically used for action buttons. */
+declare function DrawerFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): import("react").JSX.Element;
+/** Accessible title element for the Drawer, announced by screen readers on open. */
+declare function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof Drawer.Title>): import("react").JSX.Element;
+/** Accessible description element for the Drawer, providing supplemental context to the title. */
+declare function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof Drawer.Description>): import("react").JSX.Element;
+//#endregion
+export { DrawerFooter as a, DrawerPortal as c, DrawerDescription as i, DrawerTitle as l, DrawerClose as n, DrawerHeader as o, DrawerContent as r, DrawerOverlay as s, Drawer$1 as t, DrawerTrigger as u };
+//# sourceMappingURL=drawer-Dwx99ff3.d.mts.map

package/dist/dropdown-menu-CcMccVns.d.cts

@@ -0,0 +1,125 @@
+import { DropdownMenu } from "radix-ui";
+
+//#region packages/components/ui/dropdown-menu.d.ts
+/**
+ * Root provider for the DropdownMenu — wraps all sub-components and controls open state.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+ *   DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
+ * } from '@customafk/lunas-ui/ui/dropdown-menu';
+ *
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger>Options</DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem>Profile</DropdownMenuItem>
+ *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+declare function DropdownMenu$1({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Root>): import("react").JSX.Element;
+/** Portals DropdownMenu content outside the current DOM hierarchy. */
+declare function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Portal>): import("react").JSX.Element;
+/** Element that opens the DropdownMenu when activated. */
+declare function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Trigger>): import("react").JSX.Element;
+/** Animated floating panel that contains the dropdown items. */
+declare function DropdownMenuContent({
+  className,
+  sideOffset,
+  align,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Content>): import("react").JSX.Element;
+/** Groups related DropdownMenuItems under a shared logical section. */
+declare function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Group>): import("react").JSX.Element;
+/**
+ * A single clickable row inside a DropdownMenuContent.
+ *
+ * @param inset - When true, adds left padding to align with items that have icons.
+ * @param variant - Visual style: `'default'` or `'destructive'`.
+ */
+declare function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}): import("react").JSX.Element;
+/** A checkable menu item that displays a checkmark when selected. */
+declare function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.CheckboxItem>): import("react").JSX.Element;
+/** Groups DropdownMenuRadioItems so only one can be selected at a time. */
+declare function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.RadioGroup>): import("react").JSX.Element;
+/** A radio-button menu item; shows a filled circle when selected. */
+declare function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.RadioItem>): import("react").JSX.Element;
+/**
+ * Non-interactive label used to describe a group of items.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Label> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Horizontal dividing line between groups of dropdown items. */
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Separator>): import("react").JSX.Element;
+/** Displays a keyboard shortcut hint aligned to the right of a menu item. */
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+/** Root container for a nested sub-menu inside a DropdownMenu. */
+declare function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Sub>): import("react").JSX.Element;
+/**
+ * Menu item that reveals a nested DropdownMenuSubContent on hover or activation.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.SubTrigger> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Floating panel that contains the items of a nested sub-menu. */
+declare function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.SubContent>): import("react").JSX.Element;
+//#endregion
+export { DropdownMenuItem as a, DropdownMenuRadioGroup as c, DropdownMenuShortcut as d, DropdownMenuSub as f, DropdownMenuTrigger as h, DropdownMenuGroup as i, DropdownMenuRadioItem as l, DropdownMenuSubTrigger as m, DropdownMenuCheckboxItem as n, DropdownMenuLabel as o, DropdownMenuSubContent as p, DropdownMenuContent as r, DropdownMenuPortal as s, DropdownMenu$1 as t, DropdownMenuSeparator as u };
+//# sourceMappingURL=dropdown-menu-CcMccVns.d.cts.map

package/dist/dropdown-menu-CcMccVns.d.mts

@@ -0,0 +1,125 @@
+import { DropdownMenu } from "radix-ui";
+
+//#region packages/components/ui/dropdown-menu.d.ts
+/**
+ * Root provider for the DropdownMenu — wraps all sub-components and controls open state.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+ *   DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator,
+ * } from '@customafk/lunas-ui/ui/dropdown-menu';
+ *
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger>Options</DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuLabel>My Account</DropdownMenuLabel>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem>Profile</DropdownMenuItem>
+ *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+declare function DropdownMenu$1({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Root>): import("react").JSX.Element;
+/** Portals DropdownMenu content outside the current DOM hierarchy. */
+declare function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Portal>): import("react").JSX.Element;
+/** Element that opens the DropdownMenu when activated. */
+declare function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Trigger>): import("react").JSX.Element;
+/** Animated floating panel that contains the dropdown items. */
+declare function DropdownMenuContent({
+  className,
+  sideOffset,
+  align,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Content>): import("react").JSX.Element;
+/** Groups related DropdownMenuItems under a shared logical section. */
+declare function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Group>): import("react").JSX.Element;
+/**
+ * A single clickable row inside a DropdownMenuContent.
+ *
+ * @param inset - When true, adds left padding to align with items that have icons.
+ * @param variant - Visual style: `'default'` or `'destructive'`.
+ */
+declare function DropdownMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}): import("react").JSX.Element;
+/** A checkable menu item that displays a checkmark when selected. */
+declare function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.CheckboxItem>): import("react").JSX.Element;
+/** Groups DropdownMenuRadioItems so only one can be selected at a time. */
+declare function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.RadioGroup>): import("react").JSX.Element;
+/** A radio-button menu item; shows a filled circle when selected. */
+declare function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.RadioItem>): import("react").JSX.Element;
+/**
+ * Non-interactive label used to describe a group of items.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Label> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Horizontal dividing line between groups of dropdown items. */
+declare function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Separator>): import("react").JSX.Element;
+/** Displays a keyboard shortcut hint aligned to the right of a menu item. */
+declare function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>): import("react").JSX.Element;
+/** Root container for a nested sub-menu inside a DropdownMenu. */
+declare function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.Sub>): import("react").JSX.Element;
+/**
+ * Menu item that reveals a nested DropdownMenuSubContent on hover or activation.
+ *
+ * @param inset - When true, adds left padding to align with inset items.
+ */
+declare function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.SubTrigger> & {
+  inset?: boolean;
+}): import("react").JSX.Element;
+/** Floating panel that contains the items of a nested sub-menu. */
+declare function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenu.SubContent>): import("react").JSX.Element;
+//#endregion
+export { DropdownMenuItem as a, DropdownMenuRadioGroup as c, DropdownMenuShortcut as d, DropdownMenuSub as f, DropdownMenuTrigger as h, DropdownMenuGroup as i, DropdownMenuRadioItem as l, DropdownMenuSubTrigger as m, DropdownMenuCheckboxItem as n, DropdownMenuLabel as o, DropdownMenuSubContent as p, DropdownMenuContent as r, DropdownMenuPortal as s, DropdownMenu$1 as t, DropdownMenuSeparator as u };
+//# sourceMappingURL=dropdown-menu-CcMccVns.d.mts.map

package/dist/edit-button-0_FLZoT3.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/button.cjs"),t=require("./ui/tooltip.cjs");let n=require("lucide-react"),r=require("react"),i=require("react/jsx-runtime");const a=({title:a,onClick:o})=>(0,i.jsxs)(t.Tooltip,{children:[(0,i.jsx)(t.TooltipTrigger,{children:(0,i.jsx)(e.Button,{type:`button`,variant:`ghost`,color:`secondary`,size:`icon`,onClick:(0,r.useCallback)(async e=>{e.preventDefault(),e.stopPropagation(),await o?.()},[o]),children:(0,i.jsx)(n.PencilIcon,{})})}),(0,i.jsx)(t.TooltipContent,{children:(0,i.jsx)(`p`,{children:a||`Edit item`})})]});exports.UITableEditButton=a;
+//# sourceMappingURL=edit-button-0_FLZoT3.cjs.map

package/dist/edit-button-0_FLZoT3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-button-0_FLZoT3.cjs","names":["Tooltip","TooltipTrigger","Button","PencilIcon","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/edit-button.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { PencilIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost icon button with a pencil icon that triggers an async edit handler;\n * displays a descriptive tooltip on hover. Intended for use in table row action columns.\n *\n * @example\n * import { UITableEditButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEditButton\n *   title=\"Edit employee details\"\n *   onClick={async () => await openEditModal(rowId)}\n * />\n */\nexport const UITableEditButton: React.FC<{\n  /** Tooltip label describing what will be edited; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" onClick={handleClick}>\n          <PencilIcon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Edit item'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"iJAmBA,MAAa,GAKP,CAAE,QAAO,cAUX,EAAA,EAAA,KAAA,CAACA,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,OAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,YAAY,KAAK,OAAO,SAAA,EAAA,EAAA,YAAA,CAVxE,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKmF,YACrF,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAA,SAAI,GAAS,WAAe,CAAA,CACd,CAAA,CACT,CAAA,CAAA"}

package/dist/edit-button-DmMFMzG0.mjs

@@ -0,0 +1,2 @@
+import{Button as e}from"./ui/button.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{PencilIcon as i}from"lucide-react";import{useCallback as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({title:c,onClick:l})=>s(t,{children:[o(r,{children:o(e,{type:`button`,variant:`ghost`,color:`secondary`,size:`icon`,onClick:a(async e=>{e.preventDefault(),e.stopPropagation(),await l?.()},[l]),children:o(i,{})})}),o(n,{children:o(`p`,{children:c||`Edit item`})})]});export{c as UITableEditButton};
+//# sourceMappingURL=edit-button-DmMFMzG0.mjs.map

package/dist/edit-button-DmMFMzG0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-button-DmMFMzG0.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/edit-button.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { PencilIcon } from 'lucide-react';\n\nimport { Button } from '@/components/ui/button';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\n/**\n * A ghost icon button with a pencil icon that triggers an async edit handler;\n * displays a descriptive tooltip on hover. Intended for use in table row action columns.\n *\n * @example\n * import { UITableEditButton } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEditButton\n *   title=\"Edit employee details\"\n *   onClick={async () => await openEditModal(rowId)}\n * />\n */\nexport const UITableEditButton: React.FC<{\n  /** Tooltip label describing what will be edited; defaults to a generic message. */\n  title?: string;\n  /** Async-compatible callback invoked when the button is clicked. */\n  onClick?: () => void | Promise<void>;\n}> = ({ title, onClick }) => {\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(\n    async e => {\n      e.preventDefault();\n      e.stopPropagation();\n      await onClick?.();\n    },\n    [onClick]\n  );\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Button type=\"button\" variant=\"ghost\" color=\"secondary\" size=\"icon\" onClick={handleClick}>\n          <PencilIcon />\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{title || 'Edit item'}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"4PAmBA,MAAa,GAKP,CAAE,QAAO,aAUX,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAQ,KAAK,SAAS,QAAQ,QAAQ,MAAM,YAAY,KAAK,OAAO,QAXtD,EAClB,KAAM,IAAK,CACT,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAClB,MAAM,IAAU,CAClB,EACA,CAAC,CAAO,CAKmF,WACrF,EAAC,EAAD,CAAa,CAAA,CACP,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAA,SACE,EAAC,IAAD,CAAA,SAAI,GAAS,WAAe,CAAA,CACd,CAAA,CACT,CAAA,CAAA"}

package/dist/edit-qfS5kOtM.d.cts

@@ -0,0 +1,16 @@
+//#region packages/components/ui/buttons/edit.d.ts
+type Props = {
+  /** Callback invoked when the button is clicked. */onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+/**
+ * An icon-only ghost button that triggers an edit action, rendered with a pencil icon.
+ *
+ * @example
+ * import { EditBtn } from '@customafk/lunas-ui/ui/buttons/edit';
+ *
+ * <EditBtn onClick={() => openEditDialog(record.id)} />
+ */
+declare const EditBtn: React.FC<Props>;
+//#endregion
+export { EditBtn as t };
+//# sourceMappingURL=edit-qfS5kOtM.d.cts.map

package/dist/edit-qfS5kOtM.d.mts

@@ -0,0 +1,16 @@
+//#region packages/components/ui/buttons/edit.d.ts
+type Props = {
+  /** Callback invoked when the button is clicked. */onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+/**
+ * An icon-only ghost button that triggers an edit action, rendered with a pencil icon.
+ *
+ * @example
+ * import { EditBtn } from '@customafk/lunas-ui/ui/buttons/edit';
+ *
+ * <EditBtn onClick={() => openEditDialog(record.id)} />
+ */
+declare const EditBtn: React.FC<Props>;
+//#endregion
+export { EditBtn as t };
+//# sourceMappingURL=edit-qfS5kOtM.d.mts.map

package/dist/email-display-D6ZgA_en.cjs

@@ -0,0 +1,2 @@
+const e=require("./ui/tooltip.cjs"),t=require("./tables-B1O9qy-m.cjs");let n=require("lucide-react"),r=require("react"),i=require("react/jsx-runtime");const a=({email:a,linkable:o=!0})=>{let[s,c]=(0,r.useState)(!1);return a?(0,i.jsx)(e.TooltipProvider,{children:(0,i.jsxs)(`div`,{className:`group flex items-center gap-x-1.5`,children:[(0,i.jsx)(n.MailIcon,{size:13,className:`shrink-0 text-text-positive-weak`}),o?(0,i.jsx)(`a`,{href:`mailto:${a}`,className:`truncate text-primary text-sm underline-offset-2 hover:underline`,onClick:e=>e.stopPropagation(),children:a}):(0,i.jsx)(`span`,{className:`truncate text-text-positive text-sm`,children:a}),(0,i.jsxs)(e.Tooltip,{children:[(0,i.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,i.jsx)(`button`,{onClick:e=>{e.stopPropagation(),e.preventDefault(),navigator.clipboard.writeText(a).then(()=>{c(!0),setTimeout(()=>c(!1),1500)})},className:`shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive`,children:s?(0,i.jsx)(n.CheckIcon,{size:13,className:`text-success-strong`}):(0,i.jsx)(n.CopyIcon,{size:13})})}),(0,i.jsx)(e.TooltipContent,{children:s?`Copied!`:`Copy email`})]})]})}):(0,i.jsx)(t.Y,{})};exports.UITableEmailDisplay=a;
+//# sourceMappingURL=email-display-D6ZgA_en.cjs.map

package/dist/email-display-D6ZgA_en.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-display-D6ZgA_en.cjs","names":["UITableEmpty","TooltipProvider","MailIcon","Tooltip","TooltipTrigger","CheckIcon","CopyIcon","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/email-display.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { CheckIcon, CopyIcon, MailIcon } from 'lucide-react';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableEmailDisplay} component. */\ntype Props = {\n  /** The email address to display; `null`/`undefined`/empty renders an empty state. */\n  email: string | null | undefined;\n  /** When `true`, a `mailto:` anchor wraps the address (default: `true`). */\n  linkable?: boolean;\n};\n\n/**\n * Displays an email address in a table cell with a copy-to-clipboard button.\n * Shows a brief checkmark confirmation after copying.  Optionally wraps the\n * address in a `mailto:` link.  Renders {@link UITableEmpty} when `email` is\n * absent.\n *\n * @example\n * import { UITableEmailDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEmailDisplay email=\"jane@example.com\" />\n */\nexport const UITableEmailDisplay: React.FC<Props> = ({ email, linkable = true }) => {\n  const [copied, setCopied] = useState(false);\n\n  if (!email) return <UITableEmpty />;\n\n  const handleCopy = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    navigator.clipboard.writeText(email).then(() => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    });\n  };\n\n  return (\n    <TooltipProvider>\n      <div className=\"group flex items-center gap-x-1.5\">\n        <MailIcon size={13} className=\"shrink-0 text-text-positive-weak\" />\n\n        {linkable ? (\n          <a href={`mailto:${email}`} className=\"truncate text-primary text-sm underline-offset-2 hover:underline\" onClick={e => e.stopPropagation()}>\n            {email}\n          </a>\n        ) : (\n          <span className=\"truncate text-text-positive text-sm\">{email}</span>\n        )}\n\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              onClick={handleCopy}\n              className=\"shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive\"\n            >\n              {copied ? <CheckIcon size={13} className=\"text-success-strong\" /> : <CopyIcon size={13} />}\n            </button>\n          </TooltipTrigger>\n          <TooltipContent>{copied ? 'Copied!' : 'Copy email'}</TooltipContent>\n        </Tooltip>\n      </div>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"uJA4BA,MAAa,GAAwC,CAAE,QAAO,WAAW,MAAW,CAClF,GAAM,CAAC,EAAQ,IAAA,EAAA,EAAA,SAAA,CAAsB,EAAK,EAa1C,OAXK,GAYH,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,6CAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,GAAI,UAAU,kCAAoC,CAAA,EAEjE,GACC,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,KAAM,UAAU,IAAS,UAAU,mEAAmE,QAAS,GAAK,EAAE,gBAAgB,WACtI,CACA,CAAA,GAEH,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,+CAAuC,CAAY,CAAA,GAGrE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,QAzBQ,GAAwB,CAC1C,EAAE,gBAAgB,EAClB,EAAE,eAAe,EACjB,UAAU,UAAU,UAAU,CAAK,CAAC,CAAC,SAAW,CAC9C,EAAU,EAAI,EACd,eAAiB,EAAU,EAAK,EAAG,IAAI,CACzC,CAAC,CACH,EAmBY,UAAU,yIAET,GAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,KAAM,GAAI,UAAU,qBAAuB,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,CACnF,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,SAAiB,EAAS,UAAY,YAA6B,CAAA,CAC5D,CAAA,CAAA,CACN,GACU,CAAA,GApCA,EAAA,EAAA,IAAA,CAACP,EAAAA,EAAD,CAAe,CAAA,CAsCpC"}

package/dist/email-display-m745lUts.mjs

@@ -0,0 +1,2 @@
+import{Tooltip as e,TooltipContent as t,TooltipProvider as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Y as i}from"./tables-9d53sH9E.mjs";import{CheckIcon as a,CopyIcon as o,MailIcon as s}from"lucide-react";import{useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({email:d,linkable:f=!0})=>{let[p,m]=c(!1);return d?l(n,{children:u(`div`,{className:`group flex items-center gap-x-1.5`,children:[l(s,{size:13,className:`shrink-0 text-text-positive-weak`}),f?l(`a`,{href:`mailto:${d}`,className:`truncate text-primary text-sm underline-offset-2 hover:underline`,onClick:e=>e.stopPropagation(),children:d}):l(`span`,{className:`truncate text-text-positive text-sm`,children:d}),u(e,{children:[l(r,{asChild:!0,children:l(`button`,{onClick:e=>{e.stopPropagation(),e.preventDefault(),navigator.clipboard.writeText(d).then(()=>{m(!0),setTimeout(()=>m(!1),1500)})},className:`shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive`,children:p?l(a,{size:13,className:`text-success-strong`}):l(o,{size:13})})}),l(t,{children:p?`Copied!`:`Copy email`})]})]})}):l(i,{})};export{d as UITableEmailDisplay};
+//# sourceMappingURL=email-display-m745lUts.mjs.map

package/dist/email-display-m745lUts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-display-m745lUts.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/email-display.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { CheckIcon, CopyIcon, MailIcon } from 'lucide-react';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableEmailDisplay} component. */\ntype Props = {\n  /** The email address to display; `null`/`undefined`/empty renders an empty state. */\n  email: string | null | undefined;\n  /** When `true`, a `mailto:` anchor wraps the address (default: `true`). */\n  linkable?: boolean;\n};\n\n/**\n * Displays an email address in a table cell with a copy-to-clipboard button.\n * Shows a brief checkmark confirmation after copying.  Optionally wraps the\n * address in a `mailto:` link.  Renders {@link UITableEmpty} when `email` is\n * absent.\n *\n * @example\n * import { UITableEmailDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEmailDisplay email=\"jane@example.com\" />\n */\nexport const UITableEmailDisplay: React.FC<Props> = ({ email, linkable = true }) => {\n  const [copied, setCopied] = useState(false);\n\n  if (!email) return <UITableEmpty />;\n\n  const handleCopy = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    e.preventDefault();\n    navigator.clipboard.writeText(email).then(() => {\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    });\n  };\n\n  return (\n    <TooltipProvider>\n      <div className=\"group flex items-center gap-x-1.5\">\n        <MailIcon size={13} className=\"shrink-0 text-text-positive-weak\" />\n\n        {linkable ? (\n          <a href={`mailto:${email}`} className=\"truncate text-primary text-sm underline-offset-2 hover:underline\" onClick={e => e.stopPropagation()}>\n            {email}\n          </a>\n        ) : (\n          <span className=\"truncate text-text-positive text-sm\">{email}</span>\n        )}\n\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <button\n              onClick={handleCopy}\n              className=\"shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive\"\n            >\n              {copied ? <CheckIcon size={13} className=\"text-success-strong\" /> : <CopyIcon size={13} />}\n            </button>\n          </TooltipTrigger>\n          <TooltipContent>{copied ? 'Copied!' : 'Copy email'}</TooltipContent>\n        </Tooltip>\n      </div>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"0SA4BA,MAAa,GAAwC,CAAE,QAAO,WAAW,MAAW,CAClF,GAAM,CAAC,EAAQ,GAAa,EAAS,EAAK,EAa1C,OAXK,EAYH,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CAAK,UAAU,6CAAf,CACE,EAAC,EAAD,CAAU,KAAM,GAAI,UAAU,kCAAoC,CAAA,EAEjE,EACC,EAAC,IAAD,CAAG,KAAM,UAAU,IAAS,UAAU,mEAAmE,QAAS,GAAK,EAAE,gBAAgB,WACtI,CACA,CAAA,EAEH,EAAC,OAAD,CAAM,UAAU,+CAAuC,CAAY,CAAA,EAGrE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,SAAD,CACE,QAzBQ,GAAwB,CAC1C,EAAE,gBAAgB,EAClB,EAAE,eAAe,EACjB,UAAU,UAAU,UAAU,CAAK,CAAC,CAAC,SAAW,CAC9C,EAAU,EAAI,EACd,eAAiB,EAAU,EAAK,EAAG,IAAI,CACzC,CAAC,CACH,EAmBY,UAAU,yIAET,EAAS,EAAC,EAAD,CAAW,KAAM,GAAI,UAAU,qBAAuB,CAAA,EAAI,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,CACnF,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAA,SAAiB,EAAS,UAAY,YAA6B,CAAA,CAC5D,CAAA,CAAA,CACN,GACU,CAAA,EApCA,EAAC,EAAD,CAAe,CAAA,CAsCpC"}

package/dist/{email-field-lDd9ouFN.cjs → email-field-BErx3liY.cjs}

@@ -1,2 +1,2 @@
-const e=require("./ui/input.cjs"),t=require("./tanstack-form-DS_ZvRl8.cjs"),n=require("./field-BV5twmKA.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=({label:c,description:l,placeholder:u,tooltip:d,helperText:f,orientation:p=`responsive`,showErrorMessage:m=!0,required:h=!1,maxLength:g})=>{let{form:_,name:v,state:y,handleBlur:b,handleChange:x}=t.G(),S=(0,s.useStore)(_.store,({isSubmitting:e})=>e),C=y.meta.isDirty&&y.meta.isTouched&&!y.meta.isValid,w=h&&y.value===null,T=!S&&!!y.value,E=(0,i.useCallback)(({target:{value:e}})=>{S||g&&e.length>g||x(e||null)},[S,g,x]),D=(0,i.useCallback)(()=>{S||x(null)},[S,x]);return(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{"data-invalid":C,orientation:p,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{htmlFor:v,"aria-required":w,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(e.Input,{id:v,name:v,value:y.value===null?``:y.value,"aria-invalid":C,autoComplete:`email`,placeholder:u,className:(0,a.cn)(`pl-9`,T&&`pr-9`,S&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:b,onChange:E}),(0,o.jsx)(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,o.jsx)(r.AtSignIcon,{size:14})}),T&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:D,children:(0,o.jsx)(r.XIcon,{size:14,"aria-hidden":`true`})}),(0,o.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:m&&y.meta.isDirty&&(0,o.jsx)(n.FieldError,{errors:y.meta.errors})}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})};exports.EmailField=c;
-//# sourceMappingURL=email-field-lDd9ouFN.cjs.map
+const e=require("./tanstack-form-CNrZQZhn.cjs"),t=require("./ui/input.cjs"),n=require("./field-BV5twmKA.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=({label:c,description:l,placeholder:u,tooltip:d,helperText:f,orientation:p=`responsive`,showErrorMessage:m=!0,required:h=!1,maxLength:g})=>{let{form:_,name:v,state:y,handleBlur:b,handleChange:x}=e.G(),S=(0,s.useStore)(_.store,({isSubmitting:e})=>e),C=y.meta.isDirty&&y.meta.isTouched&&!y.meta.isValid,w=h&&y.value===null,T=!S&&!!y.value,E=(0,i.useCallback)(({target:{value:e}})=>{S||g&&e.length>g||x(e||null)},[S,g,x]),D=(0,i.useCallback)(()=>{S||x(null)},[S,x]);return(0,o.jsxs)(n.FieldGroup,{className:`gap-y-4 px-4`,children:[(0,o.jsxs)(n.Field,{"data-invalid":C,orientation:p,children:[(0,o.jsxs)(n.FieldContent,{children:[(0,o.jsxs)(n.FieldLabel,{htmlFor:v,"aria-required":w,children:[c,d&&(0,o.jsx)(n.FieldTooltip,{tooltip:d})]}),(0,o.jsx)(n.FieldDescription,{children:l})]}),(0,o.jsxs)(n.FieldContentMain,{children:[(0,o.jsx)(t.Input,{id:v,name:v,value:y.value===null?``:y.value,"aria-invalid":C,autoComplete:`email`,placeholder:u,className:(0,a.cn)(`pl-9`,T&&`pr-9`,S&&`pointer-events-none bg-muted-muted opacity-60`),onBlur:b,onChange:E}),(0,o.jsx)(`div`,{className:`absolute top-0 left-0 flex size-9 items-center justify-center text-muted`,children:(0,o.jsx)(r.AtSignIcon,{size:14})}),T&&(0,o.jsx)(`button`,{type:`button`,"aria-label":`Xóa`,className:`absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong`,onClick:D,children:(0,o.jsx)(r.XIcon,{size:14,"aria-hidden":`true`})}),(0,o.jsx)(`div`,{className:`mt-1 flex w-full items-start justify-start`,children:m&&y.meta.isDirty&&(0,o.jsx)(n.FieldError,{errors:y.meta.errors})}),(0,o.jsx)(n.FieldNote,{isShow:!!f,children:f})]})]}),(0,o.jsx)(n.FieldSeparator,{})]})};exports.EmailField=c;
+//# sourceMappingURL=email-field-BErx3liY.cjs.map

package/dist/{email-field-lDd9ouFN.cjs.map → email-field-BErx3liY.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"email-field-lDd9ouFN.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","AtSignIcon","XIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\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';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n *\n * @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"email\">\n *   {() => (\n *     <EmailField\n *       label=\"Email address\"\n *       placeholder=\"you@example.com\"\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  tooltip,\n  helperText,\n  orientation = 'responsive',\n  showErrorMessage = true,\n  required = false,\n  maxLength,\n}) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n  const _showClear = !isSubmitting && !!state.value;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  const onClear = useCallback(() => {\n    if (isSubmitting) return;\n    handleChange(null);\n  }, [isSubmitting, handleChange]);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={name}\n            name={name}\n            value={state.value === null ? '' : state.value}\n            aria-invalid={_invalid}\n            autoComplete=\"email\"\n            placeholder={placeholder}\n            className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n          <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n            <AtSignIcon size={14} />\n          </div>\n\n          {_showClear && (\n            <button\n              type=\"button\"\n              aria-label=\"Xóa\"\n              className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n              onClick={onClear}\n            >\n              <XIcon size={14} aria-hidden=\"true\" />\n            </button>\n          )}\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":"4QA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEM,GAAA,EAAA,EAAA,YAAA,KAA4B,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,uBAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,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,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,WAAA,EAAA,EAAA,GAAA,CAAc,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qFACb,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,IACC,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,YAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,GAGV,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sDACZ,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,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}
+{"version":3,"file":"email-field-BErx3liY.cjs","names":["useTanStackFieldContext","FieldGroup","Field","FieldContent","FieldLabel","FieldTooltip","FieldDescription","FieldContentMain","Input","AtSignIcon","XIcon","FieldError","FieldNote","FieldSeparator"],"sources":["../packages/components/features/tanstack-form/components/fields/email-field.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useStore } from '@tanstack/react-form';\n\nimport { AtSignIcon, XIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\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';\nimport { useTanStackFieldContext } from '../form-context';\n\nimport type { EmailFieldProps as Props } from '../../types';\n\n/**\n * A TanStack Form-connected email input field with an at-sign prefix icon,\n * optional clear button, and inline validation error display.\n *\n * @example\n * import { EmailField } from '@customafk/lunas-ui/features/tanstack-form';\n *\n * <form.Field name=\"email\">\n *   {() => (\n *     <EmailField\n *       label=\"Email address\"\n *       placeholder=\"you@example.com\"\n *       required\n *     />\n *   )}\n * </form.Field>\n */\nexport const EmailField: React.FC<Props> = ({\n  label,\n  description,\n  placeholder,\n  tooltip,\n  helperText,\n  orientation = 'responsive',\n  showErrorMessage = true,\n  required = false,\n  maxLength,\n}) => {\n  const { form, name, state, handleBlur, handleChange } = useTanStackFieldContext<string | null>();\n\n  const isSubmitting = useStore(form.store, ({ isSubmitting }) => isSubmitting);\n\n  const _invalid = state.meta.isDirty && state.meta.isTouched && !state.meta.isValid;\n  const _isEmpty = required && state.value === null;\n  const _showClear = !isSubmitting && !!state.value;\n\n  const onChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    ({ target: { value } }) => {\n      if (isSubmitting) return;\n      if (maxLength && value.length > maxLength) return;\n      handleChange(value || null);\n    },\n    [isSubmitting, maxLength, handleChange]\n  );\n\n  const onClear = useCallback(() => {\n    if (isSubmitting) return;\n    handleChange(null);\n  }, [isSubmitting, handleChange]);\n\n  return (\n    <FieldGroup className=\"gap-y-4 px-4\">\n      <Field data-invalid={_invalid} orientation={orientation}>\n        <FieldContent>\n          <FieldLabel htmlFor={name} aria-required={_isEmpty}>\n            {label}\n            {tooltip && <FieldTooltip tooltip={tooltip} />}\n          </FieldLabel>\n          <FieldDescription>{description}</FieldDescription>\n        </FieldContent>\n        <FieldContentMain>\n          <Input\n            id={name}\n            name={name}\n            value={state.value === null ? '' : state.value}\n            aria-invalid={_invalid}\n            autoComplete=\"email\"\n            placeholder={placeholder}\n            className={cn('pl-9', _showClear && 'pr-9', isSubmitting && 'pointer-events-none bg-muted-muted opacity-60')}\n            onBlur={handleBlur}\n            onChange={onChange}\n          />\n          <div className=\"absolute top-0 left-0 flex size-9 items-center justify-center text-muted\">\n            <AtSignIcon size={14} />\n          </div>\n\n          {_showClear && (\n            <button\n              type=\"button\"\n              aria-label=\"Xóa\"\n              className=\"absolute inset-e-0 inset-y-0 top-3 flex h-fit w-8 cursor-pointer items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:text-text-positive-strong\"\n              onClick={onClear}\n            >\n              <XIcon size={14} aria-hidden=\"true\" />\n            </button>\n          )}\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":"4QA4CA,MAAa,GAA+B,CAC1C,QACA,cACA,cACA,UACA,aACA,cAAc,aACd,mBAAmB,GACnB,WAAW,GACX,eACI,CACJ,GAAM,CAAE,OAAM,OAAM,QAAO,aAAY,gBAAiBA,EAAAA,EAAuC,EAEzF,GAAA,EAAA,EAAA,SAAA,CAAwB,EAAK,OAAQ,CAAE,kBAAmB,CAAY,EAEtE,EAAW,EAAM,KAAK,SAAW,EAAM,KAAK,WAAa,CAAC,EAAM,KAAK,QACrE,EAAW,GAAY,EAAM,QAAU,KACvC,EAAa,CAAC,GAAgB,CAAC,CAAC,EAAM,MAEtC,GAAA,EAAA,EAAA,YAAA,EACH,CAAE,OAAQ,CAAE,YAAc,CACrB,GACA,GAAa,EAAM,OAAS,GAChC,EAAa,GAAS,IAAI,CAC5B,EACA,CAAC,EAAc,EAAW,CAAY,CACxC,EAEM,GAAA,EAAA,EAAA,YAAA,KAA4B,CAC5B,GACJ,EAAa,IAAI,CACnB,EAAG,CAAC,EAAc,CAAY,CAAC,EAE/B,OACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,UAAU,wBAAtB,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,MAAD,CAAO,eAAc,EAAuB,uBAA5C,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,aAAD,CAAA,SAAA,EACE,EAAA,EAAA,KAAA,CAACC,EAAAA,WAAD,CAAY,QAAS,EAAM,gBAAe,WAA1C,CACG,EACA,IAAW,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAuB,SAAU,CAAA,CACnC,KACZ,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,CACE,GAAI,EACE,OACN,MAAO,EAAM,QAAU,KAAO,GAAK,EAAM,MACzC,eAAc,EACd,aAAa,QACA,cACb,WAAA,EAAA,EAAA,GAAA,CAAc,OAAQ,GAAc,OAAQ,GAAgB,+CAA+C,EAC3G,OAAQ,EACE,UACX,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,qFACb,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,EAEJ,IACC,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,aAAW,MACX,UAAU,wOACV,QAAS,YAET,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC/B,CAAA,GAGV,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,sDACZ,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,WAAa,CAAsB,CAAA,CACxC,CAAA,CAAA,CACb,KACP,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAiB,CAAA,CACP,GAEhB"}