@customafk/lunas-ui 0.2.5 → 0.2.7

package/dist/data-display/country.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"country.mjs","names":["CountryDisplay: React.FC<React.PropsWithChildren<Props>>"],"sources":["../../packages/components/data-display/country.tsx"],"sourcesContent":["import { 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\ntype Props = {\n  country?: ECountry | null;\n};\nexport const CountryDisplay: React.FC<React.PropsWithChildren<Props>> = ({ country }) => {\n  const code = useMemo(() => {\n    return {\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  }, []);\n  if (!country) {\n    return (\n      <Flex padding=\"none\" className=\"h-4 px-1\">\n        <Paragraph variant=\"muted\" className=\"line-clamp-1 text-xs\">\n          No country\n        </Paragraph>\n      </Flex>\n    );\n  }\n  return (\n    <Flex padding=\"none\" className=\"h-4 px-1\">\n      <ReactCountryFlag svg countryCode={country ? code[country] : 'VN'} className=\"emojiFlag border\" />\n      <Paragraph variant=\"sm\">\n        {country === ECountry.VIETNAM && 'Vietnam'}\n        {country === ECountry.USA && 'America'}\n        {country === ECountry.JAPAN && 'Japan'}\n        {country === ECountry.CHINA && 'China'}\n        {country === ECountry.KOREA && 'Korea'}\n        {country === ECountry.SINGAPORE && 'Singapore'}\n        {country === ECountry.MALAYSIA && 'Malaysia'}\n        {country === ECountry.INDONESIA && 'Indonesia'}\n        {country === ECountry.TAIWAN && 'Taiwan'}\n        {country === ECountry.THAILAND && 'Thailand'}\n      </Paragraph>\n    </Flex>\n  );\n};\n"],"mappings":"gPAWA,MAAaA,GAA4D,CAAE,aAAc,CACvF,IAAM,EAAO,OACJ,EACJ,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,EACA,EAAE,CAAC,CAUN,OATK,EAUH,EAAC,EAAA,CAAK,QAAQ,OAAO,UAAU,qBAC7B,EAAC,EAAA,CAAiB,IAAA,GAAI,YAAa,EAAU,EAAK,GAAW,KAAM,UAAU,oBAAqB,CAClG,EAAC,EAAA,CAAU,QAAQ,eAChB,IAAY,EAAS,SAAW,UAChC,IAAY,EAAS,KAAO,UAC5B,IAAY,EAAS,OAAS,QAC9B,IAAY,EAAS,OAAS,QAC9B,IAAY,EAAS,OAAS,QAC9B,IAAY,EAAS,WAAa,YAClC,IAAY,EAAS,UAAY,WACjC,IAAY,EAAS,WAAa,YAClC,IAAY,EAAS,QAAU,SAC/B,IAAY,EAAS,UAAY,aACxB,CAAA,EACP,CAtBL,EAAC,EAAA,CAAK,QAAQ,OAAO,UAAU,oBAC7B,EAAC,EAAA,CAAU,QAAQ,QAAQ,UAAU,gCAAuB,cAEhD,EACP"}
+{"version":3,"file":"country.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":"6PAUA,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/data-list.cjs

@@ -1,2 +1,2 @@
-const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../flex-BsoSgWFN.cjs`);let n=require(`react/jsx-runtime`);const r=({children:e})=>(0,n.jsx)(t.t,{vertical:!0,padding:`none`,gap:`md`,width:`full`,children:e}),i=({label:e,value:r,minLabelWidth:i=`120px`})=>(0,n.jsxs)(t.t,{align:`center`,justify:`start`,width:`full`,padding:`none`,gap:`md`,className:`flex-col items-start gap-1 md:flex-row md:items-center md:gap-4`,children:[(0,n.jsx)(`div`,{style:{minWidth:i},className:`text-muted-foreground text-sm`,children:e}),(0,n.jsx)(`div`,{className:`text-secondary-foreground text-sm`,children:r})]});exports.DataList=r,exports.DataListItem=i;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`react/jsx-runtime`),n=require(`@customafk/react-toolkit/utils`);const r=({children:e,className:r})=>(0,t.jsx)(`div`,{"data-slot":`data-list`,className:(0,n.cn)(`flex w-full flex-col gap-4`,r),children:e}),i=({label:e,value:r,minLabelWidth:i=`120px`,className:a})=>(0,t.jsxs)(`div`,{"data-slot":`data-list-item`,className:(0,n.cn)(`flex w-full flex-col items-start gap-1 md:flex-row md:items-center md:gap-4`,a),children:[(0,t.jsx)(`span`,{"data-slot":`data-list-label`,style:{minWidth:i},className:`text-sm text-text-positive-weak`,children:e}),(0,t.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

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

@@ -1 +1 @@
-{"version":3,"file":"data-list.cjs","names":["DataList: React.FC<React.PropsWithChildren<DataListProps>>","Flex","DataListItem: React.FC<React.PropsWithChildren<DataListItemProps>>"],"sources":["../../packages/components/data-display/data-list.tsx"],"sourcesContent":["import { Flex } from '@/components/layouts/flex';\n\ntype DataListProps = {\n  title?: string;\n};\nexport const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({ children }) => {\n  return (\n    <Flex vertical padding=\"none\" gap=\"md\" width=\"full\">\n      {children}\n    </Flex>\n  );\n};\n\ntype DataListItemProps = {\n  label: string;\n  value: string | number | React.ReactNode;\n  minLabelWidth?: string;\n};\n\nexport const DataListItem: React.FC<React.PropsWithChildren<DataListItemProps>> = ({ label, value, minLabelWidth = '120px' }) => {\n  return (\n    <Flex align=\"center\" justify=\"start\" width=\"full\" padding=\"none\" gap=\"md\" className=\"flex-col items-start gap-1 md:flex-row md:items-center md:gap-4\">\n      <div style={{ minWidth: minLabelWidth }} className=\"text-muted-foreground text-sm\">\n        {label}\n      </div>\n      <div className=\"text-secondary-foreground text-sm\">{value}</div>\n    </Flex>\n  );\n};\n"],"mappings":"8GAKA,MAAaA,GAA8D,CAAE,eAEzE,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,KAAK,MAAM,OAC1C,YACI,CAUEC,GAAsE,CAAE,QAAO,QAAO,gBAAgB,YAE/G,EAAA,EAAA,MAACD,EAAAA,EAAAA,CAAK,MAAM,SAAS,QAAQ,QAAQ,MAAM,OAAO,QAAQ,OAAO,IAAI,KAAK,UAAU,6EAClF,EAAA,EAAA,KAAC,MAAA,CAAI,MAAO,CAAE,SAAU,EAAe,CAAE,UAAU,yCAChD,GACG,EACN,EAAA,EAAA,KAAC,MAAA,CAAI,UAAU,6CAAqC,GAAY,CAAA,EAC3D"}
+{"version":3,"file":"data-list.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":"qIAsBA,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-display/data-list.d.cts

@@ -1,14 +1,43 @@
 //#region packages/components/data-display/data-list.d.ts
 type DataListProps = {
-  title?: string;
+  /** 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;
 };
-declare const DataListItem: React.FC<React.PropsWithChildren<DataListItemProps>>;
+/**
+ * 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

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

@@ -1,14 +1,43 @@
 //#region packages/components/data-display/data-list.d.ts
 type DataListProps = {
-  title?: string;
+  /** 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;
 };
-declare const DataListItem: React.FC<React.PropsWithChildren<DataListItemProps>>;
+/**
+ * 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.mts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"data-list.mjs","names":["DataList: React.FC<React.PropsWithChildren<DataListProps>>","DataListItem: React.FC<React.PropsWithChildren<DataListItemProps>>"],"sources":["../../packages/components/data-display/data-list.tsx"],"sourcesContent":["import { Flex } from '@/components/layouts/flex';\n\ntype DataListProps = {\n  title?: string;\n};\nexport const DataList: React.FC<React.PropsWithChildren<DataListProps>> = ({ children }) => {\n  return (\n    <Flex vertical padding=\"none\" gap=\"md\" width=\"full\">\n      {children}\n    </Flex>\n  );\n};\n\ntype DataListItemProps = {\n  label: string;\n  value: string | number | React.ReactNode;\n  minLabelWidth?: string;\n};\n\nexport const DataListItem: React.FC<React.PropsWithChildren<DataListItemProps>> = ({ label, value, minLabelWidth = '120px' }) => {\n  return (\n    <Flex align=\"center\" justify=\"start\" width=\"full\" padding=\"none\" gap=\"md\" className=\"flex-col items-start gap-1 md:flex-row md:items-center md:gap-4\">\n      <div style={{ minWidth: minLabelWidth }} className=\"text-muted-foreground text-sm\">\n        {label}\n      </div>\n      <div className=\"text-secondary-foreground text-sm\">{value}</div>\n    </Flex>\n  );\n};\n"],"mappings":"2FAKA,MAAaA,GAA8D,CAAE,cAEzE,EAAC,EAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,KAAK,MAAM,OAC1C,YACI,CAUEC,GAAsE,CAAE,QAAO,QAAO,gBAAgB,WAE/G,EAAC,EAAA,CAAK,MAAM,SAAS,QAAQ,QAAQ,MAAM,OAAO,QAAQ,OAAO,IAAI,KAAK,UAAU,4EAClF,EAAC,MAAA,CAAI,MAAO,CAAE,SAAU,EAAe,CAAE,UAAU,yCAChD,GACG,CACN,EAAC,MAAA,CAAI,UAAU,6CAAqC,GAAY,CAAA,EAC3D"}
+{"version":3,"file":"data-list.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":"mHAsBA,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-display/date-tooltip.cjs

@@ -1,2 +1,2 @@
-const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../date-WraHGsbb.cjs`),n=require(`../badge-cvLJyaCA.cjs`),r=require(`../tooltip-DC6i1A25.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,{className:`h-fit`,children:(0,i.jsx)(t.t,{date:e,format:`medium`,className:`font-normal text-white text-xs`})})}),(0,i.jsx)(r.n,{children:(0,i.jsx)(t.t,{date:e,format:`full`,showTime:!0,className:`font-[Inter]! font-medium`})})]})});exports.DateTooltip=a;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../date-a3RI5Pwo.cjs`),n=require(`../badge-uQ0pIZbQ.cjs`),r=require(`../tooltip-itUmYz9k.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

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

@@ -1 +1 @@
-{"version":3,"file":"date-tooltip.cjs","names":["DateTooltip: React.FC<Props>","TooltipProvider","Tooltip","TooltipTrigger","Badge","DateDisplay","TooltipContent"],"sources":["../../packages/components/data-display/date-tooltip.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from './date';\n\ntype Props = {\n  date: Date | string | number;\n};\nexport const DateTooltip: React.FC<Props> = ({ date }) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"font-normal text-white text-xs\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent>\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-[Inter]! font-medium\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"sLAQA,MAAaA,GAAgC,CAAE,WAE3C,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAM,UAAU,kBACf,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAkB,OAAM,OAAO,SAAS,UAAU,kCAAmC,EAChF,EACO,EACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACD,EAAAA,EAAAA,CAAkB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,6BAA8B,CAAA,CACzE,CAAA,CAAA,CACT,CAAA,CACM"}
+{"version":3,"file":"date-tooltip.cjs","names":["DateTooltip: React.FC<DateTooltipProps>","TooltipProvider","Tooltip","TooltipTrigger","Badge","DateDisplay","TooltipContent"],"sources":["../../packages/components/data-display/date-tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from './date';\n\ntype DateTooltipProps = {\n  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */\n  date: Date | string | number;\n};\n\n/**\n * Displays a date as a badge; hovering reveals a tooltip with the full Vietnamese weekday and time.\n *\n * @example\n * ```tsx\n * import { DateTooltip } from '@customafk/lunas-ui/data-display/date-tooltip';\n *\n * <DateTooltip date=\"2024-03-15T14:30:00Z\" />\n * ```\n */\nexport const DateTooltip: React.FC<DateTooltipProps> = ({ date }) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge data-slot=\"date-tooltip-trigger\" className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"text-xs font-normal text-text-negative\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent data-slot=\"date-tooltip-content\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-[Inter]! font-medium\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"mMAsBA,MAAaA,GAA2C,CAAE,WAEtD,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAM,YAAU,uBAAuB,UAAU,kBAChD,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAkB,OAAM,OAAO,SAAS,UAAU,0CAA2C,EACxF,EACO,EACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,YAAU,iCACxB,EAAA,EAAA,KAACD,EAAAA,EAAAA,CAAkB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,6BAA8B,EACzE,CAAA,CAAA,CACT,CAAA,CACM"}

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

@@ -1,8 +1,19 @@
 //#region packages/components/data-display/date-tooltip.d.ts
-type Props = {
+type DateTooltipProps = {
+  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */
   date: Date | string | number;
 };
-declare const DateTooltip: React.FC<Props>;
+/**
+ * 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

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

@@ -1,8 +1,19 @@
 //#region packages/components/data-display/date-tooltip.d.ts
-type Props = {
+type DateTooltipProps = {
+  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */
   date: Date | string | number;
 };
-declare const DateTooltip: React.FC<Props>;
+/**
+ * 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.mts.map

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

@@ -1,2 +1,2 @@
-import{t as e}from"../date-uVTm7J09.mjs";import{t}from"../badge-B4Fa7-J3.mjs";import{i as n,n as r,r as i,t as a}from"../tooltip-B3dTcgcc.mjs";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({date:c})=>o(i,{children:s(a,{children:[o(n,{asChild:!0,children:o(t,{className:`h-fit`,children:o(e,{date:c,format:`medium`,className:`font-normal text-white text-xs`})})}),o(r,{children:o(e,{date:c,format:`full`,showTime:!0,className:`font-[Inter]! font-medium`})})]})});export{c as DateTooltip};
+"use client";import{t as e}from"../date-CVz9xdCg.mjs";import{t}from"../badge-B8bw2UEY.mjs";import{i as n,n as r,r as i,t as a}from"../tooltip-Bj0iOG4s.mjs";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({date:c})=>o(i,{children:s(a,{children:[o(n,{asChild:!0,children:o(t,{"data-slot":`date-tooltip-trigger`,className:`h-fit`,children:o(e,{date:c,format:`medium`,className:`text-xs font-normal text-text-negative`})})}),o(r,{"data-slot":`date-tooltip-content`,children:o(e,{date:c,format:`full`,showTime:!0,className:`font-[Inter]! font-medium`})})]})});export{c as DateTooltip};
 //# sourceMappingURL=date-tooltip.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"date-tooltip.mjs","names":["DateTooltip: React.FC<Props>"],"sources":["../../packages/components/data-display/date-tooltip.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from './date';\n\ntype Props = {\n  date: Date | string | number;\n};\nexport const DateTooltip: React.FC<Props> = ({ date }) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"font-normal text-white text-xs\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent>\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-[Inter]! font-medium\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"iMAQA,MAAaA,GAAgC,CAAE,UAE3C,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAe,QAAA,YACd,EAAC,EAAA,CAAM,UAAU,iBACf,EAAC,EAAA,CAAkB,OAAM,OAAO,SAAS,UAAU,kCAAmC,EAChF,EACO,CACjB,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAkB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,6BAA8B,CAAA,CACzE,CAAA,CAAA,CACT,CAAA,CACM"}
+{"version":3,"file":"date-tooltip.mjs","names":["DateTooltip: React.FC<DateTooltipProps>"],"sources":["../../packages/components/data-display/date-tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from './date';\n\ntype DateTooltipProps = {\n  /** The date value to display; accepts a `Date` object, an ISO string, or a Unix timestamp (ms). */\n  date: Date | string | number;\n};\n\n/**\n * Displays a date as a badge; hovering reveals a tooltip with the full Vietnamese weekday and time.\n *\n * @example\n * ```tsx\n * import { DateTooltip } from '@customafk/lunas-ui/data-display/date-tooltip';\n *\n * <DateTooltip date=\"2024-03-15T14:30:00Z\" />\n * ```\n */\nexport const DateTooltip: React.FC<DateTooltipProps> = ({ date }) => {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Badge data-slot=\"date-tooltip-trigger\" className=\"h-fit\">\n            <DateDisplay date={date} format=\"medium\" className=\"text-xs font-normal text-text-negative\" />\n          </Badge>\n        </TooltipTrigger>\n        <TooltipContent data-slot=\"date-tooltip-content\">\n          <DateDisplay date={date} format=\"full\" showTime className=\"font-[Inter]! font-medium\" />\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"],"mappings":"8MAsBA,MAAaA,GAA2C,CAAE,UAEtD,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAe,QAAA,YACd,EAAC,EAAA,CAAM,YAAU,uBAAuB,UAAU,iBAChD,EAAC,EAAA,CAAkB,OAAM,OAAO,SAAS,UAAU,0CAA2C,EACxF,EACO,CACjB,EAAC,EAAA,CAAe,YAAU,gCACxB,EAAC,EAAA,CAAkB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,6BAA8B,EACzE,CAAA,CAAA,CACT,CAAA,CACM"}

package/dist/data-display/date.cjs

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

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

@@ -1,13 +1,39 @@
 //#region packages/components/data-display/date.d.ts
-interface Props {
+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;
 }
-declare const DateDisplay: React.FC<Props>;
+/**
+ * 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

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

@@ -1,13 +1,39 @@
 //#region packages/components/data-display/date.d.ts
-interface Props {
+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;
 }
-declare const DateDisplay: React.FC<Props>;
+/**
+ * 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.mts.map

package/dist/data-display/date.mjs

@@ -1 +1 @@
-import{t as e}from"../date-uVTm7J09.mjs";export{e as DateDisplay};
+"use client";import{t as e}from"../date-CVz9xdCg.mjs";export{e as DateDisplay};

package/dist/data-display/empty.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../flex-BsoSgWFN.cjs`);let n=require(`react/jsx-runtime`),r=require(`lucide-react`);const i=()=>(0,n.jsxs)(t.t,{vertical:!0,justify:`center`,align:`center`,gap:`sm`,className:`text-text-positive-muted size-full`,children:[(0,n.jsx)(r.PackageOpenIcon,{size:52,strokeWidth:1}),(0,n.jsx)(`p`,{className:`text-sm`,children:`Không có dữ liệu nào để hiển thị.`})]});exports.EmptyDisplay=i;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`lucide-react`),n=require(`react/jsx-runtime`),r=require(`@customafk/react-toolkit/utils`);const i=({label:e=`No data to display.`,className:i})=>(0,n.jsxs)(`div`,{"data-slot":`empty-display`,className:(0,r.cn)(`flex size-full flex-col items-center justify-center gap-2 text-text-positive-muted`,i),children:[(0,n.jsx)(t.PackageOpenIcon,{size:52,strokeWidth:1}),(0,n.jsx)(`p`,{className:`text-sm`,children:e})]});exports.EmptyDisplay=i;
 //# sourceMappingURL=empty.cjs.map

package/dist/data-display/empty.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty.cjs","names":["Flex","PackageOpenIcon"],"sources":["../../packages/components/data-display/empty.tsx"],"sourcesContent":["'use client';\nimport { PackageOpenIcon } from 'lucide-react';\n\nimport { Flex } from '../layouts/flex';\n\nexport const EmptyDisplay = () => {\n  return (\n    <Flex vertical justify=\"center\" align=\"center\" gap=\"sm\" className=\"text-text-positive-muted size-full\">\n      <PackageOpenIcon size={52} strokeWidth={1} />\n      <p className=\"text-sm\">Không có dữ liệu nào để hiển thị.</p>\n    </Flex>\n  );\n};\n"],"mappings":"qJAKA,MAAa,OAET,EAAA,EAAA,MAACA,EAAAA,EAAAA,CAAK,SAAA,GAAS,QAAQ,SAAS,MAAM,SAAS,IAAI,KAAK,UAAU,gDAChE,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,KAAM,GAAI,YAAa,GAAK,EAC7C,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,mBAAU,qCAAqC,CAAA,EACvD"}
+{"version":3,"file":"empty.cjs","names":["EmptyDisplay: React.FC<EmptyDisplayProps>","PackageOpenIcon"],"sources":["../../packages/components/data-display/empty.tsx"],"sourcesContent":["'use client';\n\nimport { PackageOpenIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype EmptyDisplayProps = {\n  /** Message shown below the empty-state icon. Defaults to `'No data to display.'`. */\n  label?: string;\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A full-area empty-state placeholder with a package icon and a configurable message.\n *\n * @example\n * ```tsx\n * import { EmptyDisplay } from '@customafk/lunas-ui/data-display/empty';\n *\n * <EmptyDisplay label=\"No results found.\" />\n * ```\n */\nexport const EmptyDisplay: React.FC<EmptyDisplayProps> = ({ label = 'No data to display.', className }) => {\n  return (\n    <div data-slot=\"empty-display\" className={cn('flex size-full flex-col items-center justify-center gap-2 text-text-positive-muted', className)}>\n      <PackageOpenIcon size={52} strokeWidth={1} />\n      <p className=\"text-sm\">{label}</p>\n    </div>\n  );\n};\n"],"mappings":"+JAuBA,MAAaA,GAA6C,CAAE,QAAQ,sBAAuB,gBAEvF,EAAA,EAAA,MAAC,MAAA,CAAI,YAAU,gBAAgB,WAAA,EAAA,EAAA,IAAc,qFAAsF,EAAU,YAC3I,EAAA,EAAA,KAACC,EAAAA,gBAAAA,CAAgB,KAAM,GAAI,YAAa,GAAK,EAC7C,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,mBAAW,GAAU,CAAA,EAC9B"}

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

@@ -1,7 +1,21 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region packages/components/data-display/empty.d.ts
-declare const EmptyDisplay: () => react_jsx_runtime0.JSX.Element;
+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

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

@@ -1,7 +1,21 @@
-import * as react_jsx_runtime152 from "react/jsx-runtime";
-
 //#region packages/components/data-display/empty.d.ts
-declare const EmptyDisplay: () => react_jsx_runtime152.JSX.Element;
+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.mts.map

package/dist/data-display/empty.mjs

@@ -1,2 +1,2 @@
-"use client";import{t as e}from"../flex-CeizYtXs.mjs";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{PackageOpenIcon as r}from"lucide-react";const i=()=>n(e,{vertical:!0,justify:`center`,align:`center`,gap:`sm`,className:`text-text-positive-muted size-full`,children:[t(r,{size:52,strokeWidth:1}),t(`p`,{className:`text-sm`,children:`Không có dữ liệu nào để hiển thị.`})]});export{i as EmptyDisplay};
+"use client";import{PackageOpenIcon as e}from"lucide-react";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{cn as r}from"@customafk/react-toolkit/utils";const i=({label:i=`No data to display.`,className:a})=>n(`div`,{"data-slot":`empty-display`,className:r(`flex size-full flex-col items-center justify-center gap-2 text-text-positive-muted`,a),children:[t(e,{size:52,strokeWidth:1}),t(`p`,{className:`text-sm`,children:i})]});export{i as EmptyDisplay};
 //# sourceMappingURL=empty.mjs.map

package/dist/data-display/empty.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty.mjs","names":[],"sources":["../../packages/components/data-display/empty.tsx"],"sourcesContent":["'use client';\nimport { PackageOpenIcon } from 'lucide-react';\n\nimport { Flex } from '../layouts/flex';\n\nexport const EmptyDisplay = () => {\n  return (\n    <Flex vertical justify=\"center\" align=\"center\" gap=\"sm\" className=\"text-text-positive-muted size-full\">\n      <PackageOpenIcon size={52} strokeWidth={1} />\n      <p className=\"text-sm\">Không có dữ liệu nào để hiển thị.</p>\n    </Flex>\n  );\n};\n"],"mappings":"uJAKA,MAAa,MAET,EAAC,EAAA,CAAK,SAAA,GAAS,QAAQ,SAAS,MAAM,SAAS,IAAI,KAAK,UAAU,+CAChE,EAAC,EAAA,CAAgB,KAAM,GAAI,YAAa,GAAK,CAC7C,EAAC,IAAA,CAAE,UAAU,mBAAU,qCAAqC,CAAA,EACvD"}
+{"version":3,"file":"empty.mjs","names":["EmptyDisplay: React.FC<EmptyDisplayProps>"],"sources":["../../packages/components/data-display/empty.tsx"],"sourcesContent":["'use client';\n\nimport { PackageOpenIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\ntype EmptyDisplayProps = {\n  /** Message shown below the empty-state icon. Defaults to `'No data to display.'`. */\n  label?: string;\n  /** Additional CSS classes applied to the wrapping container. */\n  className?: string;\n};\n\n/**\n * A full-area empty-state placeholder with a package icon and a configurable message.\n *\n * @example\n * ```tsx\n * import { EmptyDisplay } from '@customafk/lunas-ui/data-display/empty';\n *\n * <EmptyDisplay label=\"No results found.\" />\n * ```\n */\nexport const EmptyDisplay: React.FC<EmptyDisplayProps> = ({ label = 'No data to display.', className }) => {\n  return (\n    <div data-slot=\"empty-display\" className={cn('flex size-full flex-col items-center justify-center gap-2 text-text-positive-muted', className)}>\n      <PackageOpenIcon size={52} strokeWidth={1} />\n      <p className=\"text-sm\">{label}</p>\n    </div>\n  );\n};\n"],"mappings":"kKAuBA,MAAaA,GAA6C,CAAE,QAAQ,sBAAuB,eAEvF,EAAC,MAAA,CAAI,YAAU,gBAAgB,UAAW,EAAG,qFAAsF,EAAU,WAC3I,EAAC,EAAA,CAAgB,KAAM,GAAI,YAAa,GAAK,CAC7C,EAAC,IAAA,CAAE,UAAU,mBAAW,GAAU,CAAA,EAC9B"}

package/dist/data-display/name.cjs

@@ -1,2 +1,2 @@
-const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../paragraph-Co2e-y5c.cjs`),n=require(`../tooltip-DC6i1A25.cjs`);let r=require(`react/jsx-runtime`);const i=({name:e})=>(0,r.jsxs)(n.t,{children:[(0,r.jsx)(n.i,{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;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../paragraph-DN85Huc4.cjs`),n=require(`../tooltip-itUmYz9k.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

package/dist/data-display/name.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"name.cjs","names":["NameDisplay: React.FC<React.PropsWithChildren<NameDisplayProps>>","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../../packages/components/data-display/name.tsx"],"sourcesContent":["import { Paragraph } from '../typography/paragraph';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype NameDisplayProps = {\n  name: string;\n};\n\nexport const NameDisplay: React.FC<React.PropsWithChildren<NameDisplayProps>> = ({ name }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"max-w-80 whitespace-pre-line text-wrap break-keep\">\n        {name}\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"wJAOA,MAAaA,GAAoE,CAAE,WAE/E,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAAA,UACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAU,QAAQ,KAAK,UAAU,mEAC/B,GACS,CAAA,CACG,EACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,MAAM,QAAQ,UAAU,6DACrC,GACc,CAAA,CAAA,CACT"}
+{"version":3,"file":"name.cjs","names":["NameDisplay: React.FC<NameDisplayProps>","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../../packages/components/data-display/name.tsx"],"sourcesContent":["'use client';\n\nimport { Paragraph } from '../typography/paragraph';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype NameDisplayProps = {\n  /** The full name string to display; shown truncated inline and in full via tooltip. */\n  name: string;\n};\n\n/**\n * Renders a clamped, truncated name with a tooltip that reveals the complete text on hover.\n *\n * @example\n * ```tsx\n * import { NameDisplay } from '@customafk/lunas-ui/data-display/name';\n *\n * <NameDisplay name=\"Nguyễn Văn An\" />\n * ```\n */\nexport const NameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger data-slot=\"name-display\">\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"max-w-80 whitespace-pre-line text-wrap break-keep\">\n        {name}\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"qKAoBA,MAAaA,GAA2C,CAAE,WAEtD,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,YAAU,yBACxB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAU,QAAQ,KAAK,UAAU,mEAC/B,GACS,EACG,EACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,MAAM,QAAQ,UAAU,6DACrC,GACc,CAAA,CAAA,CACT"}

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

@@ -1,8 +1,19 @@
 //#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;
 };
-declare const NameDisplay: React.FC<React.PropsWithChildren<NameDisplayProps>>;
+/**
+ * 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

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

@@ -1,8 +1,19 @@
 //#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;
 };
-declare const NameDisplay: React.FC<React.PropsWithChildren<NameDisplayProps>>;
+/**
+ * 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.mts.map

package/dist/data-display/name.mjs

@@ -1,2 +1,2 @@
-import{t as e}from"../paragraph-DmiXlAnE.mjs";import{i as t,n,t as r}from"../tooltip-B3dTcgcc.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({name:o})=>a(r,{children:[i(t,{children:i(e,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:o})}),i(n,{align:`start`,className:`max-w-80 whitespace-pre-line text-wrap break-keep`,children:o})]});export{o as NameDisplay};
+"use client";import{t as e}from"../paragraph-Ch5TvEqL.mjs";import{i as t,n,t as r}from"../tooltip-Bj0iOG4s.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({name:o})=>a(r,{children:[i(t,{"data-slot":`name-display`,children:i(e,{variant:`sm`,className:`line-clamp-2 w-full truncate text-wrap pb-px text-start`,children:o})}),i(n,{align:`start`,className:`max-w-80 whitespace-pre-line text-wrap break-keep`,children:o})]});export{o as NameDisplay};
 //# sourceMappingURL=name.mjs.map

package/dist/data-display/name.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"name.mjs","names":["NameDisplay: React.FC<React.PropsWithChildren<NameDisplayProps>>"],"sources":["../../packages/components/data-display/name.tsx"],"sourcesContent":["import { Paragraph } from '../typography/paragraph';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype NameDisplayProps = {\n  name: string;\n};\n\nexport const NameDisplay: React.FC<React.PropsWithChildren<NameDisplayProps>> = ({ name }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger>\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"max-w-80 whitespace-pre-line text-wrap break-keep\">\n        {name}\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"qJAOA,MAAaA,GAAoE,CAAE,UAE/E,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAA,SACC,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,mEAC/B,GACS,CAAA,CACG,CACjB,EAAC,EAAA,CAAe,MAAM,QAAQ,UAAU,6DACrC,GACc,CAAA,CAAA,CACT"}
+{"version":3,"file":"name.mjs","names":["NameDisplay: React.FC<NameDisplayProps>"],"sources":["../../packages/components/data-display/name.tsx"],"sourcesContent":["'use client';\n\nimport { Paragraph } from '../typography/paragraph';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype NameDisplayProps = {\n  /** The full name string to display; shown truncated inline and in full via tooltip. */\n  name: string;\n};\n\n/**\n * Renders a clamped, truncated name with a tooltip that reveals the complete text on hover.\n *\n * @example\n * ```tsx\n * import { NameDisplay } from '@customafk/lunas-ui/data-display/name';\n *\n * <NameDisplay name=\"Nguyễn Văn An\" />\n * ```\n */\nexport const NameDisplay: React.FC<NameDisplayProps> = ({ name }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger data-slot=\"name-display\">\n        <Paragraph variant=\"sm\" className=\"line-clamp-2 w-full truncate text-wrap pb-px text-start\">\n          {name}\n        </Paragraph>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\" className=\"max-w-80 whitespace-pre-line text-wrap break-keep\">\n        {name}\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"kKAoBA,MAAaA,GAA2C,CAAE,UAEtD,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAe,YAAU,wBACxB,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,mEAC/B,GACS,EACG,CACjB,EAAC,EAAA,CAAe,MAAM,QAAQ,UAAU,6DACrC,GACc,CAAA,CAAA,CACT"}

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

@@ -1,2 +1,2 @@
-const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../tooltip-DC6i1A25.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`,{className:`font-number text-secondary-foreground text-sm`,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;
+"use client";const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../tooltip-itUmYz9k.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

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

@@ -1 +1 @@
-{"version":3,"file":"phone-number.cjs","names":["PhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>>","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../../packages/components/data-display/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\nexport const PhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-secondary-foreground text-sm\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p>{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"iHAEA,MAAaA,GAA4E,CAAE,YAEvF,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAAC,IAAA,CAAE,UAAU,yDAAiD,EAAM,QAAQ,wBAAyB,aAAa,EAAK,EACxG,EACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,MAAM,kBACpB,EAAA,EAAA,KAAC,IAAA,CAAA,SAAG,EAAM,MAAM,EAAE,CAAC,QAAQ,wBAAyB,wBAAwB,CAAA,CAAK,EAClE,CAAA,CAAA,CACT"}
+{"version":3,"file":"phone-number.cjs","names":["PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../../packages/components/data-display/phone-number.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype PhoneNumberDisplayProps = {\n  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */\n  value: string;\n};\n\n/**\n * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.\n *\n * @example\n * ```tsx\n * import { PhoneNumberDisplay } from '@customafk/lunas-ui/data-display/phone-number';\n *\n * <PhoneNumberDisplay value=\"0901234567\" />\n * ```\n */\nexport const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p data-slot=\"phone-number-display\" className=\"cursor-default font-number text-sm text-text-positive tabular-nums transition-colors\">\n          {value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}\n        </p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p>{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"8HAmBA,MAAaA,GAAyD,CAAE,YAEpE,EAAA,EAAA,MAACC,EAAAA,EAAAA,CAAAA,SAAAA,EACC,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,QAAA,aACd,EAAA,EAAA,KAAC,IAAA,CAAE,YAAU,uBAAuB,UAAU,gGAC3C,EAAM,QAAQ,wBAAyB,aAAa,EACnD,EACW,EACjB,EAAA,EAAA,KAACC,EAAAA,EAAAA,CAAe,MAAM,kBACpB,EAAA,EAAA,KAAC,IAAA,CAAA,SAAG,EAAM,MAAM,EAAE,CAAC,QAAQ,wBAAyB,wBAAwB,CAAA,CAAK,EAClE,CAAA,CAAA,CACT"}

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

@@ -1,7 +1,19 @@
 //#region packages/components/data-display/phone-number.d.ts
-declare const PhoneNumberDisplay: React.FC<React.PropsWithChildren<{
+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

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

@@ -1,7 +1,19 @@
 //#region packages/components/data-display/phone-number.d.ts
-declare const PhoneNumberDisplay: React.FC<React.PropsWithChildren<{
+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.mts.map

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

@@ -1,2 +1,2 @@
-import{i as e,n as t,t as n}from"../tooltip-B3dTcgcc.mjs";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({value:a})=>i(n,{children:[r(e,{asChild:!0,children:r(`p`,{className:`font-number text-secondary-foreground text-sm`,children:a.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),r(t,{align:`start`,children:r(`p`,{children:a.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`(00) (+84) ($1) $2-$3`)})})]});export{a as PhoneNumberDisplay};
+"use client";import{i as e,n as t,t as n}from"../tooltip-Bj0iOG4s.mjs";import{jsx as r,jsxs as i}from"react/jsx-runtime";const a=({value:a})=>i(n,{children:[r(e,{asChild:!0,children:r(`p`,{"data-slot":`phone-number-display`,className:`cursor-default font-number text-sm text-text-positive tabular-nums transition-colors`,children:a.replace(/(\d{3})(\d{3})(\d{4})/,`($1) $2-$3`)})}),r(t,{align:`start`,children:r(`p`,{children:a.slice(1).replace(/(\d{2})(\d{3})(\d{4})/,`(00) (+84) ($1) $2-$3`)})})]});export{a as PhoneNumberDisplay};
 //# sourceMappingURL=phone-number.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"phone-number.mjs","names":["PhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>>"],"sources":["../../packages/components/data-display/phone-number.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\nexport const PhoneNumberDisplay: React.FC<React.PropsWithChildren<{ value: string }>> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p className=\"font-number text-secondary-foreground text-sm\">{value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}</p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p>{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"4GAEA,MAAaA,GAA4E,CAAE,WAEvF,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAe,QAAA,YACd,EAAC,IAAA,CAAE,UAAU,yDAAiD,EAAM,QAAQ,wBAAyB,aAAa,EAAK,EACxG,CACjB,EAAC,EAAA,CAAe,MAAM,iBACpB,EAAC,IAAA,CAAA,SAAG,EAAM,MAAM,EAAE,CAAC,QAAQ,wBAAyB,wBAAwB,CAAA,CAAK,EAClE,CAAA,CAAA,CACT"}
+{"version":3,"file":"phone-number.mjs","names":["PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps>"],"sources":["../../packages/components/data-display/phone-number.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';\n\ntype PhoneNumberDisplayProps = {\n  /** The raw phone number string (e.g. `'0901234567'`); automatically formatted as `(090) 123-4567` with a +84 tooltip. */\n  value: string;\n};\n\n/**\n * Formats and displays a Vietnamese phone number with a tooltip showing the international dialling format.\n *\n * @example\n * ```tsx\n * import { PhoneNumberDisplay } from '@customafk/lunas-ui/data-display/phone-number';\n *\n * <PhoneNumberDisplay value=\"0901234567\" />\n * ```\n */\nexport const PhoneNumberDisplay: React.FC<PhoneNumberDisplayProps> = ({ value }) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <p data-slot=\"phone-number-display\" className=\"cursor-default font-number text-sm text-text-positive tabular-nums transition-colors\">\n          {value.replace(/(\\d{3})(\\d{3})(\\d{4})/, '($1) $2-$3')}\n        </p>\n      </TooltipTrigger>\n      <TooltipContent align=\"start\">\n        <p>{value.slice(1).replace(/(\\d{2})(\\d{3})(\\d{4})/, '(00) (+84) ($1) $2-$3')}</p>\n      </TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":"yHAmBA,MAAaA,GAAyD,CAAE,WAEpE,EAAC,EAAA,CAAA,SAAA,CACC,EAAC,EAAA,CAAe,QAAA,YACd,EAAC,IAAA,CAAE,YAAU,uBAAuB,UAAU,gGAC3C,EAAM,QAAQ,wBAAyB,aAAa,EACnD,EACW,CACjB,EAAC,EAAA,CAAe,MAAM,iBACpB,EAAC,IAAA,CAAA,SAAG,EAAM,MAAM,EAAE,CAAC,QAAQ,wBAAyB,wBAAwB,CAAA,CAAK,EAClE,CAAA,CAAA,CACT"}