@customafk/lunas-ui 0.2.51 → 0.2.52

package/dist/country-BHMqKldc.d.mts

@@ -0,0 +1,22 @@
+import { n as ECountry } from "./types-UB3NE0JY.mjs";
+
+//#region packages/components/data-display/country.d.ts
+type CountryDisplayProps = {
+  /** The country enum value to display; renders "No country" when `null` or `undefined`. */
+  country?: ECountry | null;
+};
+/**
+ * Displays a country flag (SVG) alongside the country's English name, or a muted "No country" label when the value is absent.
+ *
+ * @example
+ * ```tsx
+ * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';
+ * import { ECountry } from '@customafk/lunas-ui/types';
+ *
+ * <CountryDisplay country={ECountry.VIETNAM} />
+ * ```
+ */
+declare const CountryDisplay: React.FC<CountryDisplayProps>;
+//#endregion
+export { CountryDisplay as t };
+//# sourceMappingURL=country-BHMqKldc.d.mts.map

package/dist/country-CnXNnGmY.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-350yNsax.cjs`),t=require(`./paragraph-DvTZvbzw.cjs`),n=require(`./types-BAAJEExQ.cjs`),r=require(`./flex-ld7BqXoM.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`),o=require(`react-country-flag`);o=e.n(o);const s={[n.t.VIETNAM]:`VN`,[n.t.USA]:`US`,[n.t.JAPAN]:`JP`,[n.t.CHINA]:`CN`,[n.t.KOREA]:`KR`,[n.t.SINGAPORE]:`SG`,[n.t.MALAYSIA]:`MY`,[n.t.INDONESIA]:`ID`,[n.t.TAIWAN]:`TW`,[n.t.THAILAND]:`TH`},c={[n.t.VIETNAM]:`Vietnam`,[n.t.USA]:`America`,[n.t.JAPAN]:`Japan`,[n.t.CHINA]:`China`,[n.t.KOREA]:`Korea`,[n.t.SINGAPORE]:`Singapore`,[n.t.MALAYSIA]:`Malaysia`,[n.t.INDONESIA]:`Indonesia`,[n.t.TAIWAN]:`Taiwan`,[n.t.THAILAND]:`Thailand`},l=({country:e})=>{let n=(0,i.useMemo)(()=>e?s[e]:`VN`,[e]);return e?(0,a.jsxs)(r.t,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:[(0,a.jsx)(o.default,{svg:!0,countryCode:n,className:`emojiFlag border`}),(0,a.jsx)(t.t,{variant:`sm`,children:c[e]})]}):(0,a.jsx)(r.t,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:(0,a.jsx)(t.t,{variant:`muted`,className:`line-clamp-1 text-xs`,children:`No country`})})};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});
+//# sourceMappingURL=country-CnXNnGmY.cjs.map

package/dist/country-CnXNnGmY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-CnXNnGmY.cjs","names":["COUNTRY_CODES: Record<ECountry, string>","ECountry","COUNTRY_LABELS: Record<ECountry, string>","CountryDisplay: React.FC<CountryDisplayProps>","Flex","Paragraph","ReactCountryFlag"],"sources":["../packages/components/data-display/country.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\n\nimport { ECountry } from '@/types';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\n\nconst COUNTRY_CODES: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'VN',\n  [ECountry.USA]: 'US',\n  [ECountry.JAPAN]: 'JP',\n  [ECountry.CHINA]: 'CN',\n  [ECountry.KOREA]: 'KR',\n  [ECountry.SINGAPORE]: 'SG',\n  [ECountry.MALAYSIA]: 'MY',\n  [ECountry.INDONESIA]: 'ID',\n  [ECountry.TAIWAN]: 'TW',\n  [ECountry.THAILAND]: 'TH',\n};\n\nconst COUNTRY_LABELS: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'Vietnam',\n  [ECountry.USA]: 'America',\n  [ECountry.JAPAN]: 'Japan',\n  [ECountry.CHINA]: 'China',\n  [ECountry.KOREA]: 'Korea',\n  [ECountry.SINGAPORE]: 'Singapore',\n  [ECountry.MALAYSIA]: 'Malaysia',\n  [ECountry.INDONESIA]: 'Indonesia',\n  [ECountry.TAIWAN]: 'Taiwan',\n  [ECountry.THAILAND]: 'Thailand',\n};\n\ntype CountryDisplayProps = {\n  /** The country enum value to display; renders \"No country\" when `null` or `undefined`. */\n  country?: ECountry | null;\n};\n\n/**\n * Displays a country flag (SVG) alongside the country's English name, or a muted \"No country\" label when the value is absent.\n *\n * @example\n * ```tsx\n * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';\n * import { ECountry } from '@customafk/lunas-ui/types';\n *\n * <CountryDisplay country={ECountry.VIETNAM} />\n * ```\n */\nexport const CountryDisplay: React.FC<CountryDisplayProps> = ({ country }) => {\n  const code = useMemo(() => (country ? COUNTRY_CODES[country] : 'VN'), [country]);\n\n  if (!country) {\n    return (\n      <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n        <Paragraph variant=\"muted\" className=\"line-clamp-1 text-xs\">\n          No country\n        </Paragraph>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n      <ReactCountryFlag svg countryCode={code} className=\"emojiFlag border\" />\n      <Paragraph variant=\"sm\">{COUNTRY_LABELS[country]}</Paragraph>\n    </Flex>\n  );\n};\n"],"mappings":"gPAUA,MAAMA,EAA0C,EAC7CC,EAAAA,EAAS,SAAU,MACnBA,EAAAA,EAAS,KAAM,MACfA,EAAAA,EAAS,OAAQ,MACjBA,EAAAA,EAAS,OAAQ,MACjBA,EAAAA,EAAS,OAAQ,MACjBA,EAAAA,EAAS,WAAY,MACrBA,EAAAA,EAAS,UAAW,MACpBA,EAAAA,EAAS,WAAY,MACrBA,EAAAA,EAAS,QAAS,MAClBA,EAAAA,EAAS,UAAW,KACtB,CAEKC,EAA2C,EAC9CD,EAAAA,EAAS,SAAU,WACnBA,EAAAA,EAAS,KAAM,WACfA,EAAAA,EAAS,OAAQ,SACjBA,EAAAA,EAAS,OAAQ,SACjBA,EAAAA,EAAS,OAAQ,SACjBA,EAAAA,EAAS,WAAY,aACrBA,EAAAA,EAAS,UAAW,YACpBA,EAAAA,EAAS,WAAY,aACrBA,EAAAA,EAAS,QAAS,UAClBA,EAAAA,EAAS,UAAW,WACtB,CAkBYE,GAAiD,CAAE,aAAc,CAC5E,IAAM,GAAA,EAAA,EAAA,aAAsB,EAAU,EAAc,GAAW,KAAO,CAAC,EAAQ,CAAC,CAYhF,OAVK,GAWH,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAK,YAAU,kBAAkB,QAAQ,OAAO,UAAU,kBACzD,EAAA,EAAA,KAACE,EAAAA,QAAAA,CAAiB,IAAA,GAAI,YAAa,EAAM,UAAU,oBAAqB,EACxE,EAAA,EAAA,KAACD,EAAAA,EAAAA,CAAU,QAAQ,cAAM,EAAe,IAAqB,CAAA,EACxD,EAZL,EAAA,EAAA,KAACD,EAAAA,EAAAA,CAAK,YAAU,kBAAkB,QAAQ,OAAO,UAAU,iBACzD,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAU,QAAQ,QAAQ,UAAU,gCAAuB,cAEhD,EACP"}

package/dist/country-DUD_q-yS.d.cts

@@ -0,0 +1,22 @@
+import { n as ECountry } from "./types-B-SuhI6Z.cjs";
+
+//#region packages/components/data-display/country.d.ts
+type CountryDisplayProps = {
+  /** The country enum value to display; renders "No country" when `null` or `undefined`. */
+  country?: ECountry | null;
+};
+/**
+ * Displays a country flag (SVG) alongside the country's English name, or a muted "No country" label when the value is absent.
+ *
+ * @example
+ * ```tsx
+ * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';
+ * import { ECountry } from '@customafk/lunas-ui/types';
+ *
+ * <CountryDisplay country={ECountry.VIETNAM} />
+ * ```
+ */
+declare const CountryDisplay: React.FC<CountryDisplayProps>;
+//#endregion
+export { CountryDisplay as t };
+//# sourceMappingURL=country-DUD_q-yS.d.cts.map

package/dist/country-lc1l_viY.mjs

@@ -0,0 +1,2 @@
+import{t as e}from"./paragraph-DYLaQtTV.mjs";import{t}from"./types-DodCf0NQ.mjs";import{t as n}from"./flex-Bx9Nmr53.mjs";import{useMemo as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import o from"react-country-flag";const s={[t.VIETNAM]:`VN`,[t.USA]:`US`,[t.JAPAN]:`JP`,[t.CHINA]:`CN`,[t.KOREA]:`KR`,[t.SINGAPORE]:`SG`,[t.MALAYSIA]:`MY`,[t.INDONESIA]:`ID`,[t.TAIWAN]:`TW`,[t.THAILAND]:`TH`},c={[t.VIETNAM]:`Vietnam`,[t.USA]:`America`,[t.JAPAN]:`Japan`,[t.CHINA]:`China`,[t.KOREA]:`Korea`,[t.SINGAPORE]:`Singapore`,[t.MALAYSIA]:`Malaysia`,[t.INDONESIA]:`Indonesia`,[t.TAIWAN]:`Taiwan`,[t.THAILAND]:`Thailand`},l=({country:t})=>{let l=r(()=>t?s[t]:`VN`,[t]);return t?a(n,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:[i(o,{svg:!0,countryCode:l,className:`emojiFlag border`}),i(e,{variant:`sm`,children:c[t]})]}):i(n,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:i(e,{variant:`muted`,className:`line-clamp-1 text-xs`,children:`No country`})})};export{l as t};
+//# sourceMappingURL=country-lc1l_viY.mjs.map

package/dist/country-lc1l_viY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-lc1l_viY.mjs","names":["COUNTRY_CODES: Record<ECountry, string>","COUNTRY_LABELS: Record<ECountry, string>","CountryDisplay: React.FC<CountryDisplayProps>"],"sources":["../packages/components/data-display/country.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport ReactCountryFlag from 'react-country-flag';\n\nimport { ECountry } from '@/types';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\n\nconst COUNTRY_CODES: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'VN',\n  [ECountry.USA]: 'US',\n  [ECountry.JAPAN]: 'JP',\n  [ECountry.CHINA]: 'CN',\n  [ECountry.KOREA]: 'KR',\n  [ECountry.SINGAPORE]: 'SG',\n  [ECountry.MALAYSIA]: 'MY',\n  [ECountry.INDONESIA]: 'ID',\n  [ECountry.TAIWAN]: 'TW',\n  [ECountry.THAILAND]: 'TH',\n};\n\nconst COUNTRY_LABELS: Record<ECountry, string> = {\n  [ECountry.VIETNAM]: 'Vietnam',\n  [ECountry.USA]: 'America',\n  [ECountry.JAPAN]: 'Japan',\n  [ECountry.CHINA]: 'China',\n  [ECountry.KOREA]: 'Korea',\n  [ECountry.SINGAPORE]: 'Singapore',\n  [ECountry.MALAYSIA]: 'Malaysia',\n  [ECountry.INDONESIA]: 'Indonesia',\n  [ECountry.TAIWAN]: 'Taiwan',\n  [ECountry.THAILAND]: 'Thailand',\n};\n\ntype CountryDisplayProps = {\n  /** The country enum value to display; renders \"No country\" when `null` or `undefined`. */\n  country?: ECountry | null;\n};\n\n/**\n * Displays a country flag (SVG) alongside the country's English name, or a muted \"No country\" label when the value is absent.\n *\n * @example\n * ```tsx\n * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';\n * import { ECountry } from '@customafk/lunas-ui/types';\n *\n * <CountryDisplay country={ECountry.VIETNAM} />\n * ```\n */\nexport const CountryDisplay: React.FC<CountryDisplayProps> = ({ country }) => {\n  const code = useMemo(() => (country ? COUNTRY_CODES[country] : 'VN'), [country]);\n\n  if (!country) {\n    return (\n      <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n        <Paragraph variant=\"muted\" className=\"line-clamp-1 text-xs\">\n          No country\n        </Paragraph>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex data-slot=\"country-display\" padding=\"none\" className=\"px-1\">\n      <ReactCountryFlag svg countryCode={code} className=\"emojiFlag border\" />\n      <Paragraph variant=\"sm\">{COUNTRY_LABELS[country]}</Paragraph>\n    </Flex>\n  );\n};\n"],"mappings":"6OAUA,MAAMA,EAA0C,EAC7C,EAAS,SAAU,MACnB,EAAS,KAAM,MACf,EAAS,OAAQ,MACjB,EAAS,OAAQ,MACjB,EAAS,OAAQ,MACjB,EAAS,WAAY,MACrB,EAAS,UAAW,MACpB,EAAS,WAAY,MACrB,EAAS,QAAS,MAClB,EAAS,UAAW,KACtB,CAEKC,EAA2C,EAC9C,EAAS,SAAU,WACnB,EAAS,KAAM,WACf,EAAS,OAAQ,SACjB,EAAS,OAAQ,SACjB,EAAS,OAAQ,SACjB,EAAS,WAAY,aACrB,EAAS,UAAW,YACpB,EAAS,WAAY,aACrB,EAAS,QAAS,UAClB,EAAS,UAAW,WACtB,CAkBYC,GAAiD,CAAE,aAAc,CAC5E,IAAM,EAAO,MAAe,EAAU,EAAc,GAAW,KAAO,CAAC,EAAQ,CAAC,CAYhF,OAVK,EAWH,EAAC,EAAA,CAAK,YAAU,kBAAkB,QAAQ,OAAO,UAAU,iBACzD,EAAC,EAAA,CAAiB,IAAA,GAAI,YAAa,EAAM,UAAU,oBAAqB,CACxE,EAAC,EAAA,CAAU,QAAQ,cAAM,EAAe,IAAqB,CAAA,EACxD,CAZL,EAAC,EAAA,CAAK,YAAU,kBAAkB,QAAQ,OAAO,UAAU,gBACzD,EAAC,EAAA,CAAU,QAAQ,QAAQ,UAAU,gCAAuB,cAEhD,EACP"}

package/dist/data-display/country.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-350yNsax.cjs`),t=require(`../paragraph-DvTZvbzw.cjs`),n=require(`../types-BD1t0Bj8.cjs`),r=require(`../flex-DmWmOBn5.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`),o=require(`react-country-flag`);o=e.n(o);const s={[n.t.VIETNAM]:`VN`,[n.t.USA]:`US`,[n.t.JAPAN]:`JP`,[n.t.CHINA]:`CN`,[n.t.KOREA]:`KR`,[n.t.SINGAPORE]:`SG`,[n.t.MALAYSIA]:`MY`,[n.t.INDONESIA]:`ID`,[n.t.TAIWAN]:`TW`,[n.t.THAILAND]:`TH`},c={[n.t.VIETNAM]:`Vietnam`,[n.t.USA]:`America`,[n.t.JAPAN]:`Japan`,[n.t.CHINA]:`China`,[n.t.KOREA]:`Korea`,[n.t.SINGAPORE]:`Singapore`,[n.t.MALAYSIA]:`Malaysia`,[n.t.INDONESIA]:`Indonesia`,[n.t.TAIWAN]:`Taiwan`,[n.t.THAILAND]:`Thailand`},l=({country:e})=>{let n=(0,i.useMemo)(()=>e?s[e]:`VN`,[e]);return e?(0,a.jsxs)(r.t,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:[(0,a.jsx)(o.default,{svg:!0,countryCode:n,className:`emojiFlag border`}),(0,a.jsx)(t.t,{variant:`sm`,children:c[e]})]}):(0,a.jsx)(r.t,{"data-slot":`country-display`,padding:`none`,className:`px-1`,children:(0,a.jsx)(t.t,{variant:`muted`,className:`line-clamp-1 text-xs`,children:`No country`})})};exports.CountryDisplay=l;
-//# sourceMappingURL=country.cjs.map
+"use client";require(`../paragraph-DvTZvbzw.cjs`),require(`../flex-ld7BqXoM.cjs`);const e=require(`../country-CnXNnGmY.cjs`);exports.CountryDisplay=e.t;

package/dist/data-display/country.d.cts

@@ -1,22 +1,2 @@
-import { n as ECountry } from "../types-Cc_mLRAn.cjs";
-
-//#region packages/components/data-display/country.d.ts
-type CountryDisplayProps = {
-  /** The country enum value to display; renders "No country" when `null` or `undefined`. */
-  country?: ECountry | null;
-};
-/**
- * Displays a country flag (SVG) alongside the country's English name, or a muted "No country" label when the value is absent.
- *
- * @example
- * ```tsx
- * import { CountryDisplay } from '@customafk/lunas-ui/data-display/country';
- * import { ECountry } from '@customafk/lunas-ui/types';
- *
- * <CountryDisplay country={ECountry.VIETNAM} />
- * ```
- */
-declare const CountryDisplay: React.FC<CountryDisplayProps>;
-//#endregion
-export { CountryDisplay };
-//# sourceMappingURL=country.d.cts.map
+import { t as CountryDisplay } from "../country-DUD_q-yS.cjs";
+export { CountryDisplay };

package/dist/data-display/country.d.mts

@@ -0,0 +1,2 @@
+import { t as CountryDisplay } from "../country-BHMqKldc.mjs";
+export { CountryDisplay };

package/dist/data-display/country.mjs

@@ -0,0 +1 @@
+"use client";import"../paragraph-DYLaQtTV.mjs";import"../flex-Bx9Nmr53.mjs";import{t as e}from"../country-lc1l_viY.mjs";export{e as CountryDisplay};

package/dist/data-display/data-list.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-350yNsax.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`react/jsx-runtime`);const r=({children:e,className:r})=>(0,n.jsx)(`div`,{"data-slot":`data-list`,className:(0,t.cn)(`flex w-full flex-col gap-4`,r),children:e}),i=({label:e,value:r,minLabelWidth:i=`120px`,className:a})=>(0,n.jsxs)(`div`,{"data-slot":`data-list-item`,className:(0,t.cn)(`flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4`,a),children:[(0,n.jsx)(`span`,{"data-slot":`data-list-label`,style:{minWidth:i},className:`text-sm text-text-positive-weak`,children:e}),(0,n.jsx)(`span`,{"data-slot":`data-list-value`,className:`text-sm text-text-positive`,children:r})]});exports.DataList=r,exports.DataListItem=i;
-//# sourceMappingURL=data-list.cjs.map
+"use client";const e=require(`../data-list-BGmCL71V.cjs`);exports.DataList=e.t,exports.DataListItem=e.n;

package/dist/data-display/data-list.d.cts

@@ -1,43 +1,2 @@
-//#region packages/components/data-display/data-list.d.ts
-type DataListProps = {
-  /** Additional CSS classes applied to the wrapping container. */
-  className?: string;
-};
-/**
- * A vertical container that stacks `DataListItem` rows with consistent spacing.
- *
- * @example
- * ```tsx
- * import { DataList, DataListItem } from '@customafk/lunas-ui/data-display/data-list';
- *
- * <DataList>
- *   <DataListItem label="Status" value="Active" />
- *   <DataListItem label="Created" value="2024-01-15" />
- * </DataList>
- * ```
- */
-declare const DataList: React.FC<React.PropsWithChildren<DataListProps>>;
-type DataListItemProps = {
-  /** Descriptive label shown to the left of (or above, on mobile) the value. */
-  label: string;
-  /** The value to display; accepts strings, numbers, or arbitrary React nodes. */
-  value: string | number | React.ReactNode;
-  /** Minimum width applied to the label column. Defaults to `'120px'`. */
-  minLabelWidth?: string;
-  /** Additional CSS classes applied to the row container. */
-  className?: string;
-};
-/**
- * A single label–value row inside a `DataList`, responsive to mobile (stacks vertically) and desktop (inline) layouts.
- *
- * @example
- * ```tsx
- * import { DataListItem } from '@customafk/lunas-ui/data-display/data-list';
- *
- * <DataListItem label="Email" value="user@example.com" />
- * ```
- */
-declare const DataListItem: React.FC<DataListItemProps>;
-//#endregion
-export { DataList, DataListItem };
-//# sourceMappingURL=data-list.d.cts.map
+import { n as DataListItem, t as DataList } from "../data-list-DwyNusTs.cjs";
+export { DataList, DataListItem };

package/dist/data-display/data-list.d.mts

@@ -0,0 +1,2 @@
+import { n as DataListItem, t as DataList } from "../data-list-Chl3KU5n.mjs";
+export { DataList, DataListItem };

package/dist/data-display/data-list.mjs

@@ -0,0 +1 @@
+"use client";import{n as e,t}from"../data-list-CXWcUFU1.mjs";export{t as DataList,e as DataListItem};

package/dist/data-display/date-tooltip.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-350yNsax.cjs`),t=require(`../date-D4NVl6C9.cjs`),n=require(`../badge-KW7xu5Ca.cjs`),r=require(`../tooltip-CBdoIzoM.cjs`);let i=require(`react/jsx-runtime`);const a=({date:e})=>(0,i.jsx)(r.r,{children:(0,i.jsxs)(r.t,{children:[(0,i.jsx)(r.i,{asChild:!0,children:(0,i.jsx)(n.t,{"data-slot":`date-tooltip-trigger`,className:`h-fit`,children:(0,i.jsx)(t.t,{date:e,format:`medium`,className:`text-xs font-normal text-text-negative`})})}),(0,i.jsx)(r.n,{"data-slot":`date-tooltip-content`,children:(0,i.jsx)(t.t,{date:e,format:`full`,showTime:!0,className:`font-[Inter]! font-medium`})})]})});exports.DateTooltip=a;
-//# sourceMappingURL=date-tooltip.cjs.map
+"use client";require(`../date-BBBx-rIM.cjs`),require(`../badge-7bcsD0vA.cjs`),require(`../tooltip-KEOJcYl8.cjs`);const e=require(`../date-tooltip-BdVWCJlg.cjs`);exports.DateTooltip=e.t;

package/dist/data-display/date-tooltip.d.cts

@@ -1,19 +1,2 @@
-//#region packages/components/data-display/date-tooltip.d.ts
-type DateTooltipProps = {
-  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */
-  date: Date | string | number;
-};
-/**
- * Displays a date as a badge; hovering reveals a tooltip with the full Vietnamese weekday and time.
- *
- * @example
- * ```tsx
- * import { DateTooltip } from '@customafk/lunas-ui/data-display/date-tooltip';
- *
- * <DateTooltip date="2024-03-15T14:30:00Z" />
- * ```
- */
-declare const DateTooltip: React.FC<DateTooltipProps>;
-//#endregion
-export { DateTooltip };
-//# sourceMappingURL=date-tooltip.d.cts.map
+import { t as DateTooltip } from "../date-tooltip-DZ3NlfdZ.cjs";
+export { DateTooltip };

package/dist/data-display/date-tooltip.d.mts

@@ -0,0 +1,2 @@
+import { t as DateTooltip } from "../date-tooltip-CoPcr3Ju.mjs";
+export { DateTooltip };

package/dist/data-display/date-tooltip.mjs

@@ -0,0 +1 @@
+"use client";import"../date-88lk-VJF.mjs";import"../badge-CG6dbI29.mjs";import"../tooltip-BBEcyuAE.mjs";import{t as e}from"../date-tooltip-OPAmlgBg.mjs";export{e as DateTooltip};

package/dist/data-display/date.cjs

@@ -1 +1 @@
-"use client";const e=require(`../date-D4NVl6C9.cjs`);exports.DateDisplay=e.t;
+"use client";const e=require(`../date-BBBx-rIM.cjs`);exports.DateDisplay=e.t;

package/dist/data-display/date.d.cts

@@ -1,39 +1,2 @@
-//#region packages/components/data-display/date.d.ts
-interface DateDisplayProps {
-  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */
-  date: Date | string | number;
-  /**
-   * Controls how the date is formatted.
-   * - `'short'`    — `15/03/24`
-   * - `'medium'`   — `15/03/2024` (default)
-   * - `'long'`     — `15 tháng 3, 2024`
-   * - `'full'`     — `Thứ Sáu, ngày 15 tháng 3 năm 2024`
-   * - `'relative'` — `2 giờ trước`
-   * - `'datetime'` — `15/03/2024 14:30`
-   * - `'time'`     — `14:30`
-   * - `'smart'`    — auto-selects the most human-readable format based on recency
-   */
-  format?: 'short' | 'medium' | 'long' | 'full' | 'relative' | 'datetime' | 'time' | 'smart';
-  /** When `true`, appends any recognised Vietnamese public holiday name to the formatted date. Defaults to `false`. */
-  showHoliday?: boolean;
-  /** When `true`, appends the time component to the formatted output. Defaults to `false`. */
-  showTime?: boolean;
-  /** Additional CSS classes applied to the `<time>` element. */
-  className?: string;
-  /** Custom HTML `title` attribute; defaults to the full ISO datetime string. */
-  title?: string;
-}
-/**
- * Renders a formatted date using Vietnamese locale conventions inside a semantic `<time>` element.
- *
- * @example
- * ```tsx
- * import { DateDisplay } from '@customafk/lunas-ui/data-display/date';
- *
- * <DateDisplay date="2024-03-15T14:30:00Z" format="medium" showTime />
- * ```
- */
-declare const DateDisplay: React.FC<DateDisplayProps>;
-//#endregion
-export { DateDisplay };
-//# sourceMappingURL=date.d.cts.map
+import { t as DateDisplay } from "../date-xQIXRJ71.cjs";
+export { DateDisplay };

package/dist/data-display/date.d.mts

@@ -0,0 +1,2 @@
+import { t as DateDisplay } from "../date-viiYGAtR.mjs";
+export { DateDisplay };

package/dist/data-display/date.mjs

@@ -0,0 +1 @@
+"use client";import{t as e}from"../date-88lk-VJF.mjs";export{e as DateDisplay};

package/dist/data-display/empty.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-350yNsax.cjs`);let t=require(`lucide-react`),n=require(`@customafk/react-toolkit/utils`),r=require(`react/jsx-runtime`);const i=({label:e=`No data to display.`,className:i})=>(0,r.jsxs)(`div`,{"data-slot":`empty-display`,className:(0,n.cn)(`flex size-full flex-col items-center justify-center gap-2 text-text-positive-muted`,i),children:[(0,r.jsx)(t.PackageOpenIcon,{size:52,strokeWidth:1}),(0,r.jsx)(`p`,{className:`text-sm`,children:e})]});exports.EmptyDisplay=i;
-//# sourceMappingURL=empty.cjs.map
+"use client";const e=require(`../empty-CmIJYhmV.cjs`);exports.EmptyDisplay=e.t;

package/dist/data-display/empty.d.cts

@@ -1,21 +1,2 @@
-//#region packages/components/data-display/empty.d.ts
-type EmptyDisplayProps = {
-  /** Message shown below the empty-state icon. Defaults to `'No data to display.'`. */
-  label?: string;
-  /** Additional CSS classes applied to the wrapping container. */
-  className?: string;
-};
-/**
- * A full-area empty-state placeholder with a package icon and a configurable message.
- *
- * @example
- * ```tsx
- * import { EmptyDisplay } from '@customafk/lunas-ui/data-display/empty';
- *
- * <EmptyDisplay label="No results found." />
- * ```
- */
-declare const EmptyDisplay: React.FC<EmptyDisplayProps>;
-//#endregion
-export { EmptyDisplay };
-//# sourceMappingURL=empty.d.cts.map
+import { t as EmptyDisplay } from "../empty-z1Ft5uT1.cjs";
+export { EmptyDisplay };

package/dist/data-display/empty.d.mts

@@ -0,0 +1,2 @@
+import { t as EmptyDisplay } from "../empty-OVsSwbVn.mjs";
+export { EmptyDisplay };

package/dist/data-display/empty.mjs

@@ -0,0 +1 @@
+"use client";import{t as e}from"../empty-CoKfJtGD.mjs";export{e as EmptyDisplay};

package/dist/data-display/name.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-350yNsax.cjs`),t=require(`../paragraph-DvTZvbzw.cjs`),n=require(`../tooltip-CBdoIzoM.cjs`);let r=require(`react/jsx-runtime`);const i=({name:e})=>(0,r.jsxs)(n.t,{children:[(0,r.jsx)(n.i,{"data-slot":`name-display`,children:(0,r.jsx)(t.t,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:e})}),(0,r.jsx)(n.n,{align:`start`,className:`max-w-80 whitespace-pre-line text-wrap break-keep`,children:e})]});exports.NameDisplay=i;
-//# sourceMappingURL=name.cjs.map
+"use client";require(`../paragraph-DvTZvbzw.cjs`),require(`../tooltip-KEOJcYl8.cjs`);const e=require(`../name-D7oldyH4.cjs`);exports.NameDisplay=e.t;

package/dist/data-display/name.d.cts

@@ -1,19 +1,2 @@
-//#region packages/components/data-display/name.d.ts
-type NameDisplayProps = {
-  /** The full name string to display; shown truncated inline and in full via tooltip. */
-  name: string;
-};
-/**
- * Renders a clamped, truncated name with a tooltip that reveals the complete text on hover.
- *
- * @example
- * ```tsx
- * import { NameDisplay } from '@customafk/lunas-ui/data-display/name';
- *
- * <NameDisplay name="Nguyễn Văn An" />
- * ```
- */
-declare const NameDisplay: React.FC<NameDisplayProps>;
-//#endregion
-export { NameDisplay };
-//# sourceMappingURL=name.d.cts.map
+import { t as NameDisplay } from "../name-r1ATxwPZ.cjs";
+export { NameDisplay };

package/dist/data-display/name.d.mts

@@ -0,0 +1,2 @@
+import { t as NameDisplay } from "../name-2FXVOGc1.mjs";
+export { NameDisplay };

package/dist/data-display/name.mjs

@@ -0,0 +1 @@
+"use client";import"../paragraph-DYLaQtTV.mjs";import"../tooltip-BBEcyuAE.mjs";import{t as e}from"../name-EKzKeq0g.mjs";export{e as NameDisplay};

package/dist/data-display/phone-number.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-350yNsax.cjs`),t=require(`../tooltip-CBdoIzoM.cjs`);let n=require(`react/jsx-runtime`);const r=({value:e})=>(0,n.jsxs)(t.t,{children:[(0,n.jsx)(t.i,{asChild:!0,children:(0,n.jsx)(`p`,{"data-slot":`phone-number-display`,className:`cursor-default font-number text-sm text-text-positive tabular-nums transition-colors`,children:e.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),(0,n.jsx)(t.n,{align:`start`,children:(0,n.jsx)(`p`,{children:e.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`(00) (+84) ($1) $2-$3`)})})]});exports.PhoneNumberDisplay=r;
-//# sourceMappingURL=phone-number.cjs.map
+"use client";require(`../tooltip-KEOJcYl8.cjs`);const e=require(`../phone-number-CdfMUTj2.cjs`);exports.PhoneNumberDisplay=e.t;

package/dist/data-display/phone-number.d.cts

@@ -1,19 +1,2 @@
-//#region packages/components/data-display/phone-number.d.ts
-type PhoneNumberDisplayProps = {
-  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */
-  value: string;
-};
-/**
- * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.
- *
- * @example
- * ```tsx
- * import { PhoneNumberDisplay } from '@customafk/lunas-ui/data-display/phone-number';
- *
- * <PhoneNumberDisplay value="0901234567" />
- * ```
- */
-declare const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>;
-//#endregion
-export { PhoneNumberDisplay };
-//# sourceMappingURL=phone-number.d.cts.map
+import { t as PhoneNumberDisplay } from "../phone-number-BAqPxJ5z.cjs";
+export { PhoneNumberDisplay };

package/dist/data-display/phone-number.d.mts

@@ -0,0 +1,2 @@
+import { t as PhoneNumberDisplay } from "../phone-number-CUjSdoHG.mjs";
+export { PhoneNumberDisplay };

package/dist/data-display/phone-number.mjs

@@ -0,0 +1 @@
+"use client";import"../tooltip-BBEcyuAE.mjs";import{t as e}from"../phone-number-CkxEaxxg.mjs";export{e as PhoneNumberDisplay};

package/dist/data-display/role-badge.cjs

@@ -1,2 +1 @@
-"use client";const e=require(`../chunk-350yNsax.cjs`),t=require(`../types-BD1t0Bj8.cjs`),n=require(`../badge-KW7xu5Ca.cjs`);let r=require(`react/jsx-runtime`);const i={[t.n.ADMIN]:`primary`,[t.n.SUPER_ADMIN]:`danger`,[t.n.MODERATOR]:`info`,[t.n.STAFF]:`accent`,[t.n.USER]:`muted`},a={[t.n.SUPER_ADMIN]:`Super Admin`,[t.n.ADMIN]:`Admin`,[t.n.MODERATOR]:`Moderator`,[t.n.STAFF]:`Staff`,[t.n.USER]:`User`},o=({status:e})=>(0,r.jsx)(n.t,{"data-slot":`role-badge`,color:i[e],className:`min-w-24 justify-center`,children:a[e]});exports.RoleBadge=o;
-//# sourceMappingURL=role-badge.cjs.map
+"use client";require(`../badge-7bcsD0vA.cjs`);const e=require(`../role-badge-BwOEEepo.cjs`);exports.RoleBadge=e.t;

package/dist/data-display/role-badge.d.cts

@@ -1,22 +1,2 @@
-import { r as ERole } from "../types-Cc_mLRAn.cjs";
-
-//#region packages/components/data-display/role-badge.d.ts
-type RoleBadgeProps = {
-  /** The user role enum value that determines the badge label and colour. */
-  status: ERole;
-};
-/**
- * Renders a colour-coded badge for a user role (e.g. Admin, Staff, User).
- *
- * @example
- * ```tsx
- * import { RoleBadge } from '@customafk/lunas-ui/data-display/role-badge';
- * import { ERole } from '@customafk/lunas-ui/types';
- *
- * <RoleBadge status={ERole.ADMIN} />
- * ```
- */
-declare const RoleBadge: React.FC<RoleBadgeProps>;
-//#endregion
-export { RoleBadge };
-//# sourceMappingURL=role-badge.d.cts.map
+import { t as RoleBadge } from "../role-badge-CBZdPHUc.cjs";
+export { RoleBadge };

package/dist/data-display/role-badge.d.mts

@@ -0,0 +1,2 @@
+import { t as RoleBadge } from "../role-badge-DeofJ2ep.mjs";
+export { RoleBadge };

package/dist/data-display/role-badge.mjs

@@ -0,0 +1 @@
+"use client";import"../badge-CG6dbI29.mjs";import{t as e}from"../role-badge-BIgdiY5P.mjs";export{e as RoleBadge};

package/dist/data-display/statistic.cjs

@@ -1 +1 @@
-"use client";const e=require(`../statistic-DDXilD7q.cjs`);exports.Statistic=e.t;
+"use client";const e=require(`../statistic-BGynCEWL.cjs`);exports.Statistic=e.t;

package/dist/data-display/statistic.d.cts

@@ -1,57 +1,2 @@
-import * as react4 from "react";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
-import { VariantProps } from "class-variance-authority";
-
-//#region packages/components/data-display/statistic.d.ts
-declare const statisticVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-  trend?: "neutral" | "up" | "down" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
-type StatisticProps = VariantProps<typeof statisticVariants> & {
-  /** Character used to separate the decimal part. Defaults to `'.'`. */
-  decimalSeparator?: string;
-  /** Character used to separate thousands groups. Defaults to `','`. */
-  groupSeparator?: string;
-  /** Optional node rendered before the numeric value (e.g. a currency symbol). */
-  prefix?: React.ReactNode;
-  /** Optional node rendered after the numeric value (e.g. a unit label). */
-  suffix?: React.ReactNode;
-  /** Number of decimal digits to display; omit to show all significant digits. */
-  precision?: number;
-  /** Rounding strategy applied before formatting. Defaults to `'round'`. */
-  roundingMode?: 'round' | 'floor' | 'ceil';
-  /** When `true`, pads the decimal part with trailing zeros up to `precision`. Defaults to `false`. */
-  showTrailingZeros?: boolean;
-  /** The numeric (or numeric-string) value to format and display. */
-  value: number | string;
-  /** Additional CSS classes applied to the wrapper element. */
-  className?: string;
-  /** Colour trend indicator: `'neutral'` (default), `'up'` (green), or `'down'` (red). */
-  trend?: 'neutral' | 'up' | 'down';
-};
-/**
- * A memoised numeric display component with locale-aware formatting, optional prefix/suffix, trend colouring, and configurable rounding.
- *
- * @example
- * ```tsx
- * import { Statistic } from '@customafk/lunas-ui/data-display/statistic';
- *
- * <Statistic value={1234567.89} precision={2} prefix="$" trend="up" size="lg" />
- * ```
- */
-declare const Statistic: react4.MemoExoticComponent<({
-  decimalSeparator,
-  groupSeparator,
-  prefix: Prefix,
-  suffix: Suffix,
-  precision,
-  roundingMode,
-  showTrailingZeros,
-  size,
-  trend,
-  value,
-  className
-}: StatisticProps) => react4.JSX.Element>;
-//#endregion
-export { Statistic, StatisticProps };
-//# sourceMappingURL=statistic.d.cts.map
+import { n as StatisticProps, t as Statistic } from "../statistic-C7jb2YxN.cjs";
+export { Statistic, StatisticProps };

package/dist/data-display/statistic.d.mts

@@ -0,0 +1,2 @@
+import { n as StatisticProps, t as Statistic } from "../statistic-DbQG1ymc.mjs";
+export { Statistic, StatisticProps };

package/dist/data-display/statistic.mjs

@@ -0,0 +1 @@
+"use client";import{t as e}from"../statistic-fawLJa99.mjs";export{e as Statistic};

package/dist/data-display/user.cjs

@@ -1 +1 @@
-"use client";require(`../paragraph-DvTZvbzw.cjs`),require(`../flex-DmWmOBn5.cjs`),require(`../avatar-TyOphzGo.cjs`);const e=require(`../user-ii4FBhO1.cjs`);exports.UserDataDisplay=e.t;
+"use client";require(`../paragraph-DvTZvbzw.cjs`),require(`../flex-ld7BqXoM.cjs`),require(`../avatar-CVRRoJ05.cjs`);const e=require(`../user-B2Pml0ly.cjs`);exports.UserDataDisplay=e.t;

package/dist/data-display/user.d.cts

@@ -1,23 +1,2 @@
-//#region packages/components/data-display/user.d.ts
-type UserDataDisplayProps = {
-  /** Unique identifier used to deterministically generate the avatar background colour. */
-  uuid: string;
-  /** Display name rendered as the primary line of the user card. */
-  username: string;
-  /** Email address rendered as the secondary, muted line below the username. */
-  email: string;
-};
-/**
- * Displays a user identity card with a colour-hashed avatar, username, and email address.
- *
- * @example
- * ```tsx
- * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';
- *
- * <UserDataDisplay uuid="abc-123" username="Nguyễn Văn An" email="an@example.com" />
- * ```
- */
-declare const UserDataDisplay: React.FC<UserDataDisplayProps>;
-//#endregion
-export { UserDataDisplay };
-//# sourceMappingURL=user.d.cts.map
+import { t as UserDataDisplay } from "../user-B5efjaOf.cjs";
+export { UserDataDisplay };

package/dist/data-display/user.d.mts

@@ -0,0 +1,2 @@
+import { t as UserDataDisplay } from "../user-Cl4BdxFy.mjs";
+export { UserDataDisplay };

package/dist/data-display/user.mjs

@@ -0,0 +1 @@
+"use client";import"../paragraph-DYLaQtTV.mjs";import"../flex-Bx9Nmr53.mjs";import"../avatar-tjgTFpVU.mjs";import{t as e}from"../user-DpBhqdvd.mjs";export{e as UserDataDisplay};

package/dist/data-list-BGmCL71V.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-350yNsax.cjs`);let t=require(`@customafk/react-toolkit/utils`),n=require(`react/jsx-runtime`);const r=({children:e,className:r})=>(0,n.jsx)(`div`,{"data-slot":`data-list`,className:(0,t.cn)(`flex w-full flex-col gap-4`,r),children:e}),i=({label:e,value:r,minLabelWidth:i=`120px`,className:a})=>(0,n.jsxs)(`div`,{"data-slot":`data-list-item`,className:(0,t.cn)(`flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4`,a),children:[(0,n.jsx)(`span`,{"data-slot":`data-list-label`,style:{minWidth:i},className:`text-sm text-text-positive-weak`,children:e}),(0,n.jsx)(`span`,{"data-slot":`data-list-value`,className:`text-sm text-text-positive`,children:r})]});Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});
+//# sourceMappingURL=data-list-BGmCL71V.cjs.map

package/dist/data-list-BGmCL71V.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-BGmCL71V.cjs","names":["DataList: React.FC<React.PropsWithChildren<DataListProps>>","DataListItem: React.FC<DataListItemProps>"],"sources":["../packages/components/data-display/data-list.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype DataListProps = {\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A vertical container that stacks `DataListItem` rows with consistent spacing.\n *\n * @example\n * ```tsx\n * import { DataList, DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataList>\n *   <DataListItem label=\"Status\" value=\"Active\" />\n *   <DataListItem label=\"Created\" value=\"2024-01-15\" />\n * </DataList>\n * ```\n */\nexport const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({ children, className }) => {\n  return (\n    <div data-slot=\"data-list\" className={cn('flex w-full flex-col gap-4', className)}>\n      {children}\n    </div>\n  );\n};\n\ntype DataListItemProps = {\n  /** Descriptive label shown to the left of (or above, on mobile) the value. */\n  label: string;\n  /** The value to display; accepts strings, numbers, or arbitrary React nodes. */\n  value: string | number | React.ReactNode;\n  /** Minimum width applied to the label column. Defaults to `'120px'`. */\n  minLabelWidth?: string;\n  /** Additional CSS classes applied to the row container. */\n  className?: string;\n};\n\n/**\n * A single label–value row inside a `DataList`, responsive to mobile (stacks vertically) and desktop (inline) layouts.\n *\n * @example\n * ```tsx\n * import { DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataListItem label=\"Email\" value=\"user@example.com\" />\n * ```\n */\nexport const DataListItem: React.FC<DataListItemProps> = ({ label, value, minLabelWidth = '120px', className }) => {\n  return (\n    <div data-slot=\"data-list-item\" className={cn('flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4', className)}>\n      <span data-slot=\"data-list-label\" style={{ minWidth: minLabelWidth }} className=\"text-sm text-text-positive-weak\">\n        {label}\n      </span>\n      <span data-slot=\"data-list-value\" className=\"text-sm text-text-positive\">\n        {value}\n      </span>\n    </div>\n  );\n};\n"],"mappings":"uHAsBA,MAAaA,GAA8D,CAAE,WAAU,gBAEnF,EAAA,EAAA,KAAC,MAAA,CAAI,YAAU,YAAY,WAAA,EAAA,EAAA,IAAc,6BAA8B,EAAU,CAC9E,YACG,CAyBGC,GAA6C,CAAE,QAAO,QAAO,gBAAgB,QAAS,gBAE/F,EAAA,EAAA,MAAC,MAAA,CAAI,YAAU,iBAAiB,WAAA,EAAA,EAAA,IAAc,8EAA+E,EAAU,YACrI,EAAA,EAAA,KAAC,OAAA,CAAK,YAAU,kBAAkB,MAAO,CAAE,SAAU,EAAe,CAAE,UAAU,2CAC7E,GACI,EACP,EAAA,EAAA,KAAC,OAAA,CAAK,YAAU,kBAAkB,UAAU,sCACzC,GACI,CAAA,EACH"}

package/dist/data-list-CXWcUFU1.mjs

@@ -0,0 +1,2 @@
+import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({children:n,className:r})=>t(`div`,{"data-slot":`data-list`,className:e(`flex w-full flex-col gap-4`,r),children:n}),i=({label:r,value:i,minLabelWidth:a=`120px`,className:o})=>n(`div`,{"data-slot":`data-list-item`,className:e(`flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4`,o),children:[t(`span`,{"data-slot":`data-list-label`,style:{minWidth:a},className:`text-sm text-text-positive-weak`,children:r}),t(`span`,{"data-slot":`data-list-value`,className:`text-sm text-text-positive`,children:i})]});export{i as n,r as t};
+//# sourceMappingURL=data-list-CXWcUFU1.mjs.map

package/dist/data-list-CXWcUFU1.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-list-CXWcUFU1.mjs","names":["DataList: React.FC<React.PropsWithChildren<DataListProps>>","DataListItem: React.FC<DataListItemProps>"],"sources":["../packages/components/data-display/data-list.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype DataListProps = {\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A vertical container that stacks `DataListItem` rows with consistent spacing.\n *\n * @example\n * ```tsx\n * import { DataList, DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataList>\n *   <DataListItem label=\"Status\" value=\"Active\" />\n *   <DataListItem label=\"Created\" value=\"2024-01-15\" />\n * </DataList>\n * ```\n */\nexport const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({ children, className }) => {\n  return (\n    <div data-slot=\"data-list\" className={cn('flex w-full flex-col gap-4', className)}>\n      {children}\n    </div>\n  );\n};\n\ntype DataListItemProps = {\n  /** Descriptive label shown to the left of (or above, on mobile) the value. */\n  label: string;\n  /** The value to display; accepts strings, numbers, or arbitrary React nodes. */\n  value: string | number | React.ReactNode;\n  /** Minimum width applied to the label column. Defaults to `'120px'`. */\n  minLabelWidth?: string;\n  /** Additional CSS classes applied to the row container. */\n  className?: string;\n};\n\n/**\n * A single label–value row inside a `DataList`, responsive to mobile (stacks vertically) and desktop (inline) layouts.\n *\n * @example\n * ```tsx\n * import { DataListItem } from '@customafk/lunas-ui/data-display/data-list';\n *\n * <DataListItem label=\"Email\" value=\"user@example.com\" />\n * ```\n */\nexport const DataListItem: React.FC<DataListItemProps> = ({ label, value, minLabelWidth = '120px', className }) => {\n  return (\n    <div data-slot=\"data-list-item\" className={cn('flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4', className)}>\n      <span data-slot=\"data-list-label\" style={{ minWidth: minLabelWidth }} className=\"text-sm text-text-positive-weak\">\n        {label}\n      </span>\n      <span data-slot=\"data-list-value\" className=\"text-sm text-text-positive\">\n        {value}\n      </span>\n    </div>\n  );\n};\n"],"mappings":"sGAsBA,MAAaA,GAA8D,CAAE,WAAU,eAEnF,EAAC,MAAA,CAAI,YAAU,YAAY,UAAW,EAAG,6BAA8B,EAAU,CAC9E,YACG,CAyBGC,GAA6C,CAAE,QAAO,QAAO,gBAAgB,QAAS,eAE/F,EAAC,MAAA,CAAI,YAAU,iBAAiB,UAAW,EAAG,8EAA+E,EAAU,WACrI,EAAC,OAAA,CAAK,YAAU,kBAAkB,MAAO,CAAE,SAAU,EAAe,CAAE,UAAU,2CAC7E,GACI,CACP,EAAC,OAAA,CAAK,YAAU,kBAAkB,UAAU,sCACzC,GACI,CAAA,EACH"}

package/dist/data-list-Chl3KU5n.d.mts

@@ -0,0 +1,43 @@
+//#region packages/components/data-display/data-list.d.ts
+type DataListProps = {
+  /** Additional CSS classes applied to the wrapping container. */
+  className?: string;
+};
+/**
+ * A vertical container that stacks `DataListItem` rows with consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * import { DataList, DataListItem } from '@customafk/lunas-ui/data-display/data-list';
+ *
+ * <DataList>
+ *   <DataListItem label="Status" value="Active" />
+ *   <DataListItem label="Created" value="2024-01-15" />
+ * </DataList>
+ * ```
+ */
+declare const DataList: React.FC<React.PropsWithChildren<DataListProps>>;
+type DataListItemProps = {
+  /** Descriptive label shown to the left of (or above, on mobile) the value. */
+  label: string;
+  /** The value to display; accepts strings, numbers, or arbitrary React nodes. */
+  value: string | number | React.ReactNode;
+  /** Minimum width applied to the label column. Defaults to `'120px'`. */
+  minLabelWidth?: string;
+  /** Additional CSS classes applied to the row container. */
+  className?: string;
+};
+/**
+ * A single label–value row inside a `DataList`, responsive to mobile (stacks vertically) and desktop (inline) layouts.
+ *
+ * @example
+ * ```tsx
+ * import { DataListItem } from '@customafk/lunas-ui/data-display/data-list';
+ *
+ * <DataListItem label="Email" value="user@example.com" />
+ * ```
+ */
+declare const DataListItem: React.FC<DataListItemProps>;
+//#endregion
+export { DataListItem as n, DataList as t };
+//# sourceMappingURL=data-list-Chl3KU5n.d.mts.map