@customafk/lunas-ui 0.2.65 → 0.2.67

package/dist/tooltip-DVK6xfZ1.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-DVK6xfZ1.cjs","names":["Input","SearchIcon","ArrowRightIcon","useUITableContext","useUITableAnalysisContext","CirclePlus","RefreshCwIcon","DownloadIcon","BarChart2Icon"],"sources":["../packages/components/features/tables/utils/csv.ts","../packages/components/features/tables/components/table/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport type { CsvCell } from '../types';\n\nfunction formatCell(value: CsvCell['value']): string {\n  if (value === null || value === undefined) return '';\n  if (typeof value === 'number') return String(value);\n  if (typeof value === 'boolean') return value ? 'true' : 'false';\n  const str = String(value);\n  if (str.includes(',') || str.includes('\"') || str.includes('\\n') || str.includes('\\r')) {\n    return `\"${str.replace(/\"/g, '\"\"')}\"`;\n  }\n  return str;\n}\n\nexport function buildCsvContent(rows: CsvCell[][]): string {\n  if (rows.length === 0) return '';\n  const headers = rows[0].map(cell => formatCell(cell.label));\n  const dataRows = rows.map(row => row.map(cell => formatCell(cell.value)).join(','));\n  return [headers.join(','), ...dataRows].join('\\n');\n}\n\nexport function downloadCsv(rows: CsvCell[][], fileName: string): void {\n  const content = buildCsvContent(rows);\n  if (!content) return;\n  const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement('a');\n  link.href = url;\n  link.download = `${fileName}.csv`;\n  link.click();\n  URL.revokeObjectURL(url);\n}\n","/**\n * @file tooltip.tsx\n * Toolbar components rendered above the table: a debounced search input,\n * an action button group (create / refresh / download), and the outer\n * toolbar shell that displays the table title.\n */\nimport { useCallback } from 'react';\n\nimport { ArrowRightIcon, BarChart2Icon, CirclePlus, DownloadIcon, RefreshCwIcon, SearchIcon } from 'lucide-react';\n\nimport { useDebounceCallback } from '@customafk/react-toolkit/hooks/useDebounceCallback';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useUITableAnalysisContext, useUITableContext } from '../../hooks/use-context';\nimport { downloadCsv } from '../../utils/csv';\n\n/**\n * Debounced search input rendered inside the table toolbar.\n *\n * Fires `onSearch` 500 ms after the user stops typing and delegates all other\n * native input events via the spread `props`.\n *\n * @example\n * ```tsx\n * import { UITableTooltipFilter } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipFilter\n *   placeholder=\"Search users…\"\n *   onSearch={value => setQuery(value)}\n * />\n * ```\n */\nexport const UITableTooltipFilter: React.FC<\n  Omit<React.ComponentProps<typeof Input>, 'className'> & {\n    onSearch?: (value: string) => void;\n  }\n> = ({ onSearch, onChange, ...props }) => {\n  const debouncedSearch = useDebounceCallback((value: string) => {\n    onSearch?.(value);\n  }, 500);\n  return (\n    <div className=\"relative w-full max-w-80 flex-1\">\n      <Input\n        {...props}\n        size=\"lg\"\n        type=\"search\"\n        placeholder=\"Tìm kiếm...\"\n        className=\"flex-1 ps-9 pe-9\"\n        onChange={e => {\n          onChange?.(e);\n          debouncedSearch(e.target.value ?? '');\n        }}\n      />\n      <div className=\"pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n        <SearchIcon size={16} />\n      </div>\n      <button\n        className=\"absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        aria-label=\"Submit search\"\n        type=\"submit\"\n      >\n        <ArrowRightIcon size={16} aria-hidden=\"true\" />\n      </button>\n    </div>\n  );\n};\n\nconst ActionButton: React.FC<React.PropsWithChildren<React.ComponentProps<'button'>>> = ({ children, disabled, onClick, className, ...props }) => {\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      className={cn(\n        'flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive disabled:pointer-events-none disabled:cursor-default disabled:opacity-60 [&_svg]:size-3.5',\n        className\n      )}\n      onClick={onClick}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\n/**\n * Grouped action buttons (create, refresh, download) displayed in the table\n * toolbar.\n *\n * Each button is disabled automatically when the corresponding handler prop is\n * omitted, so only the actions relevant to a given table need to be provided.\n *\n * @example\n * ```tsx\n * import { UITableTooltipActions } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipActions\n *   onCreate={() => setOpenCreate(true)}\n *   onRefresh={() => refetch()}\n * />\n * ```\n */\nexport const UITableTooltipActions: React.FC<{\n  onCreate?: () => void;\n  onRefresh?: () => void;\n  onDownload?: () => void;\n}> = ({ onCreate, onDownload, onRefresh }) => {\n  const { table, csvData, csvFileName, title, showAnalysisPanel } = useUITableContext();\n  const { isOpen: isAnalysisOpen, toggle: toggleAnalysis } = useUITableAnalysisContext();\n\n  const handleDownload = useCallback(() => {\n    if (onDownload) {\n      onDownload();\n      return;\n    }\n    if (!csvData || csvData.length === 0) return;\n    const selectedRows = table.getSelectedRowModel().flatRows;\n    const rows = selectedRows.length > 0 ? selectedRows.map(row => csvData[row.index]).filter(Boolean) : csvData;\n    downloadCsv(rows, csvFileName || title);\n  }, [onDownload, csvData, csvFileName, table, title]);\n\n  const isDownloadEnabled = !!(onDownload || (csvData && csvData.length > 0));\n\n  return (\n    <div className=\"flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\">\n      <ActionButton\n        disabled={!onCreate}\n        onClick={e => {\n          onCreate?.();\n          e.stopPropagation();\n          e.preventDefault();\n        }}\n      >\n        <CirclePlus />\n      </ActionButton>\n      <ActionButton\n        disabled={!onRefresh}\n        onClick={e => {\n          onRefresh?.();\n          e.stopPropagation();\n          e.preventDefault();\n        }}\n      >\n        <RefreshCwIcon />\n      </ActionButton>\n      <ActionButton\n        disabled={!isDownloadEnabled}\n        onClick={e => {\n          handleDownload();\n          e.stopPropagation();\n          e.preventDefault();\n        }}\n      >\n        <DownloadIcon />\n      </ActionButton>\n      {showAnalysisPanel && (\n        <ActionButton\n          onClick={e => {\n            toggleAnalysis();\n            e.stopPropagation();\n            e.preventDefault();\n          }}\n          aria-pressed={isAnalysisOpen}\n          className={isAnalysisOpen ? 'bg-muted-muted text-text-positive' : undefined}\n        >\n          <BarChart2Icon />\n        </ActionButton>\n      )}\n    </div>\n  );\n};\n\n/**\n * Outer toolbar shell for the UITable component.\n *\n * Reads the table `title` from `UITableContext` and renders it as a heading\n * above the `children` slot, which typically contains a\n * `UITableTooltipFilter` and/or `UITableTooltipActions`.\n *\n * @example\n * ```tsx\n * import {\n *   UITableTooltip,\n *   UITableTooltipFilter,\n *   UITableTooltipActions,\n * } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltip>\n *   <UITableTooltipFilter onSearch={setQuery} />\n *   <UITableTooltipActions onCreate={handleCreate} onRefresh={refetch} />\n * </UITableTooltip>\n * ```\n */\nexport const UITableTooltip: React.FC<React.PropsWithChildren> = ({ children }) => {\n  const { title, description, headerActions } = useUITableContext();\n  return (\n    <div data-slot=\"table-tooltip\" className=\"relative flex w-full flex-col gap-2 px-2 py-0 text-sm\">\n      <div className=\"flex w-full items-start justify-between gap-4\">\n        <div className=\"flex flex-col gap-0.5\">\n          <h3 className=\"font-semibold text-base text-text-positive\">{title}</h3>\n          {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n        </div>\n        {headerActions && <div className=\"flex items-center gap-2 shrink-0\">{headerActions}</div>}\n      </div>\n      <div className=\"flex w-full flex-1 justify-between gap-x-2\">{children}</div>\n    </div>\n  );\n};\nUITableTooltip.displayName = 'TableTooltip';\n"],"mappings":"iQAIA,SAAS,EAAW,EAAiC,CACnD,GAAI,GAAU,KAA6B,MAAO,GAClD,GAAI,OAAO,GAAU,SAAU,OAAO,OAAO,CAAK,EAClD,GAAI,OAAO,GAAU,UAAW,OAAO,EAAQ,OAAS,QACxD,IAAM,EAAM,OAAO,CAAK,EAIxB,OAHI,EAAI,SAAS,GAAG,GAAK,EAAI,SAAS,GAAG,GAAK,EAAI,SAAS;CAAI,GAAK,EAAI,SAAS,IAAI,EAC5E,IAAI,EAAI,QAAQ,KAAM,IAAI,EAAE,GAE9B,CACT,CAEA,SAAgB,EAAgB,EAA2B,CACzD,GAAI,EAAK,SAAW,EAAG,MAAO,GAC9B,IAAM,EAAU,EAAK,EAAE,CAAC,IAAI,GAAQ,EAAW,EAAK,KAAK,CAAC,EACpD,EAAW,EAAK,IAAI,GAAO,EAAI,IAAI,GAAQ,EAAW,EAAK,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,EAClF,MAAO,CAAC,EAAQ,KAAK,GAAG,EAAG,GAAG,CAAQ,CAAC,CAAC,KAAK;CAAI,CACnD,CAEA,SAAgB,EAAY,EAAmB,EAAwB,CACrE,IAAM,EAAU,EAAgB,CAAI,EACpC,GAAI,CAAC,EAAS,OACd,IAAM,EAAO,IAAI,KAAK,CAAC,CAAO,EAAG,CAAE,KAAM,yBAA0B,CAAC,EAC9D,EAAM,IAAI,gBAAgB,CAAI,EAC9B,EAAO,SAAS,cAAc,GAAG,EACvC,EAAK,KAAO,EACZ,EAAK,SAAW,GAAG,EAAS,MAC5B,EAAK,MAAM,EACX,IAAI,gBAAgB,CAAG,CACzB,CCEA,MAAa,GAIR,CAAE,WAAU,WAAU,GAAG,KAAY,CACxC,IAAM,GAAA,EAAA,EAAA,oBAAA,CAAuC,GAAkB,CAC7D,IAAW,CAAK,CAClB,EAAG,GAAG,EACN,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2CAAf,EACE,EAAA,EAAA,IAAA,CAACA,EAAAA,MAAD,CACE,GAAI,EACJ,KAAK,KACL,KAAK,SACL,YAAY,cACZ,UAAU,mBACV,SAAU,GAAK,CACb,IAAW,CAAC,EACZ,EAAgB,EAAE,OAAO,OAAS,EAAE,CACtC,CACD,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,oJACb,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAY,KAAM,EAAK,CAAA,CACpB,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,8XACV,aAAW,gBACX,KAAK,mBAEL,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,KAAM,GAAI,cAAY,MAAQ,CAAA,CACxC,CAAA,CACL,GAET,EAEM,GAAmF,CAAE,WAAU,WAAU,UAAS,YAAW,GAAG,MAElI,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACK,WACV,WAAA,EAAA,EAAA,GAAA,CACE,uYACA,CACF,EACS,UACT,GAAI,EAEH,UACK,CAAA,EAqBC,GAIP,CAAE,WAAU,aAAY,eAAgB,CAC5C,GAAM,CAAE,QAAO,UAAS,cAAa,QAAO,qBAAsBC,EAAAA,EAAkB,EAC9E,CAAE,OAAQ,EAAgB,OAAQ,GAAmBC,EAAAA,EAA0B,EAE/E,GAAA,EAAA,EAAA,YAAA,KAAmC,CACvC,GAAI,EAAY,CACd,EAAW,EACX,MACF,CACA,GAAI,CAAC,GAAW,EAAQ,SAAW,EAAG,OACtC,IAAM,EAAe,EAAM,oBAAoB,CAAC,CAAC,SAEjD,EADa,EAAa,OAAS,EAAI,EAAa,IAAI,GAAO,EAAQ,EAAI,MAAM,CAAC,CAAC,OAAO,OAAO,EAAI,EACnF,GAAe,CAAK,CACxC,EAAG,CAAC,EAAY,EAAS,EAAa,EAAO,CAAK,CAAC,EAE7C,EAAoB,CAAC,EAAE,GAAe,GAAW,EAAQ,OAAS,GAExE,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gIAAf,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,SAAU,CAAC,EACX,QAAS,GAAK,CACZ,IAAW,EACX,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,YAEA,EAAA,EAAA,IAAA,CAACC,EAAAA,WAAD,CAAa,CAAA,CACD,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,SAAU,CAAC,EACX,QAAS,GAAK,CACZ,IAAY,EACZ,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,YAEA,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAgB,CAAA,CACJ,CAAA,GACd,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,SAAU,CAAC,EACX,QAAS,GAAK,CACZ,EAAe,EACf,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,YAEA,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAe,CAAA,CACH,CAAA,EACb,IACC,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,QAAS,GAAK,CACZ,EAAe,EACf,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,EACA,eAAc,EACd,UAAW,EAAiB,oCAAsC,IAAA,aAElE,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAgB,CAAA,CACJ,CAAA,CAEb,GAET,EAuBa,GAAqD,CAAE,cAAe,CACjF,GAAM,CAAE,QAAO,cAAa,iBAAkBL,EAAAA,EAAkB,EAChE,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,gBAAgB,UAAU,iEAAzC,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,yDAAf,EACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,EACE,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,sDAA8C,CAAU,CAAA,EACrE,IAAe,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,yCAAiC,CAAe,CAAA,CAC1E,IACJ,IAAiB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,4CAAoC,CAAmB,CAAA,CACrF,KACL,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,6CAA8C,UAAc,CAAA,CACxE,GAET,EACA,EAAe,YAAc"}

package/dist/tooltip-lvpW5dMi.mjs

@@ -0,0 +1,4 @@
+import{G as e,q as t}from"./tables-9d53sH9E.mjs";import{Input as n}from"./ui/input.mjs";import{ArrowRightIcon as r,BarChart2Icon as i,CirclePlus as a,DownloadIcon as o,RefreshCwIcon as s,SearchIcon as c}from"lucide-react";import{useCallback as l}from"react";import{cn as u}from"@customafk/react-toolkit/utils";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{useDebounceCallback as p}from"@customafk/react-toolkit/hooks/useDebounceCallback";function m(e){if(e==null)return``;if(typeof e==`number`)return String(e);if(typeof e==`boolean`)return e?`true`:`false`;let t=String(e);return t.includes(`,`)||t.includes(`"`)||t.includes(`
+`)||t.includes(`\r`)?`"${t.replace(/"/g,`""`)}"`:t}function h(e){if(e.length===0)return``;let t=e[0].map(e=>m(e.label)),n=e.map(e=>e.map(e=>m(e.value)).join(`,`));return[t.join(`,`),...n].join(`
+`)}function g(e,t){let n=h(e);if(!n)return;let r=new Blob([n],{type:`text/csv;charset=utf-8;`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`${t}.csv`,a.click(),URL.revokeObjectURL(i)}const _=({onSearch:e,onChange:t,...i})=>{let a=p(t=>{e?.(t)},500);return f(`div`,{className:`relative w-full max-w-80 flex-1`,children:[d(n,{...i,size:`lg`,type:`search`,placeholder:`Tìm kiếm...`,className:`flex-1 ps-9 pe-9`,onChange:e=>{t?.(e),a(e.target.value??``)}}),d(`div`,{className:`pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50`,children:d(c,{size:16})}),d(`button`,{className:`absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,"aria-label":`Submit search`,type:`submit`,children:d(r,{size:16,"aria-hidden":`true`})})]})},v=({children:e,disabled:t,onClick:n,className:r,...i})=>d(`button`,{type:`button`,disabled:t,className:u(`flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive disabled:pointer-events-none disabled:cursor-default disabled:opacity-60 [&_svg]:size-3.5`,r),onClick:n,...i,children:e}),y=({onCreate:n,onDownload:r,onRefresh:c})=>{let{table:u,csvData:p,csvFileName:m,title:h,showAnalysisPanel:_}=t(),{isOpen:y,toggle:b}=e(),x=l(()=>{if(r){r();return}if(!p||p.length===0)return;let e=u.getSelectedRowModel().flatRows;g(e.length>0?e.map(e=>p[e.index]).filter(Boolean):p,m||h)},[r,p,m,u,h]),S=!!(r||p&&p.length>0);return f(`div`,{className:`flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none`,children:[d(v,{disabled:!n,onClick:e=>{n?.(),e.stopPropagation(),e.preventDefault()},children:d(a,{})}),d(v,{disabled:!c,onClick:e=>{c?.(),e.stopPropagation(),e.preventDefault()},children:d(s,{})}),d(v,{disabled:!S,onClick:e=>{x(),e.stopPropagation(),e.preventDefault()},children:d(o,{})}),_&&d(v,{onClick:e=>{b(),e.stopPropagation(),e.preventDefault()},"aria-pressed":y,className:y?`bg-muted-muted text-text-positive`:void 0,children:d(i,{})})]})},b=({children:e})=>{let{title:n,description:r,headerActions:i}=t();return f(`div`,{"data-slot":`table-tooltip`,className:`relative flex w-full flex-col gap-2 px-2 py-0 text-sm`,children:[f(`div`,{className:`flex w-full items-start justify-between gap-4`,children:[f(`div`,{className:`flex flex-col gap-0.5`,children:[d(`h3`,{className:`font-semibold text-base text-text-positive`,children:n}),r&&d(`p`,{className:`text-sm text-muted-foreground`,children:r})]}),i&&d(`div`,{className:`flex items-center gap-2 shrink-0`,children:i})]}),d(`div`,{className:`flex w-full flex-1 justify-between gap-x-2`,children:e})]})};b.displayName=`TableTooltip`;export{b as UITableTooltip,y as UITableTooltipActions,_ as UITableTooltipFilter};
+//# sourceMappingURL=tooltip-lvpW5dMi.mjs.map

package/dist/tooltip-lvpW5dMi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-lvpW5dMi.mjs","names":[],"sources":["../packages/components/features/tables/utils/csv.ts","../packages/components/features/tables/components/table/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport type { CsvCell } from '../types';\n\nfunction formatCell(value: CsvCell['value']): string {\n  if (value === null || value === undefined) return '';\n  if (typeof value === 'number') return String(value);\n  if (typeof value === 'boolean') return value ? 'true' : 'false';\n  const str = String(value);\n  if (str.includes(',') || str.includes('\"') || str.includes('\\n') || str.includes('\\r')) {\n    return `\"${str.replace(/\"/g, '\"\"')}\"`;\n  }\n  return str;\n}\n\nexport function buildCsvContent(rows: CsvCell[][]): string {\n  if (rows.length === 0) return '';\n  const headers = rows[0].map(cell => formatCell(cell.label));\n  const dataRows = rows.map(row => row.map(cell => formatCell(cell.value)).join(','));\n  return [headers.join(','), ...dataRows].join('\\n');\n}\n\nexport function downloadCsv(rows: CsvCell[][], fileName: string): void {\n  const content = buildCsvContent(rows);\n  if (!content) return;\n  const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement('a');\n  link.href = url;\n  link.download = `${fileName}.csv`;\n  link.click();\n  URL.revokeObjectURL(url);\n}\n","/**\n * @file tooltip.tsx\n * Toolbar components rendered above the table: a debounced search input,\n * an action button group (create / refresh / download), and the outer\n * toolbar shell that displays the table title.\n */\nimport { useCallback } from 'react';\n\nimport { ArrowRightIcon, BarChart2Icon, CirclePlus, DownloadIcon, RefreshCwIcon, SearchIcon } from 'lucide-react';\n\nimport { useDebounceCallback } from '@customafk/react-toolkit/hooks/useDebounceCallback';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useUITableAnalysisContext, useUITableContext } from '../../hooks/use-context';\nimport { downloadCsv } from '../../utils/csv';\n\n/**\n * Debounced search input rendered inside the table toolbar.\n *\n * Fires `onSearch` 500 ms after the user stops typing and delegates all other\n * native input events via the spread `props`.\n *\n * @example\n * ```tsx\n * import { UITableTooltipFilter } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipFilter\n *   placeholder=\"Search users…\"\n *   onSearch={value => setQuery(value)}\n * />\n * ```\n */\nexport const UITableTooltipFilter: React.FC<\n  Omit<React.ComponentProps<typeof Input>, 'className'> & {\n    onSearch?: (value: string) => void;\n  }\n> = ({ onSearch, onChange, ...props }) => {\n  const debouncedSearch = useDebounceCallback((value: string) => {\n    onSearch?.(value);\n  }, 500);\n  return (\n    <div className=\"relative w-full max-w-80 flex-1\">\n      <Input\n        {...props}\n        size=\"lg\"\n        type=\"search\"\n        placeholder=\"Tìm kiếm...\"\n        className=\"flex-1 ps-9 pe-9\"\n        onChange={e => {\n          onChange?.(e);\n          debouncedSearch(e.target.value ?? '');\n        }}\n      />\n      <div className=\"pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n        <SearchIcon size={16} />\n      </div>\n      <button\n        className=\"absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n        aria-label=\"Submit search\"\n        type=\"submit\"\n      >\n        <ArrowRightIcon size={16} aria-hidden=\"true\" />\n      </button>\n    </div>\n  );\n};\n\nconst ActionButton: React.FC<React.PropsWithChildren<React.ComponentProps<'button'>>> = ({ children, disabled, onClick, className, ...props }) => {\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      className={cn(\n        'flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive disabled:pointer-events-none disabled:cursor-default disabled:opacity-60 [&_svg]:size-3.5',\n        className\n      )}\n      onClick={onClick}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n\n/**\n * Grouped action buttons (create, refresh, download) displayed in the table\n * toolbar.\n *\n * Each button is disabled automatically when the corresponding handler prop is\n * omitted, so only the actions relevant to a given table need to be provided.\n *\n * @example\n * ```tsx\n * import { UITableTooltipActions } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipActions\n *   onCreate={() => setOpenCreate(true)}\n *   onRefresh={() => refetch()}\n * />\n * ```\n */\nexport const UITableTooltipActions: React.FC<{\n  onCreate?: () => void;\n  onRefresh?: () => void;\n  onDownload?: () => void;\n}> = ({ onCreate, onDownload, onRefresh }) => {\n  const { table, csvData, csvFileName, title, showAnalysisPanel } = useUITableContext();\n  const { isOpen: isAnalysisOpen, toggle: toggleAnalysis } = useUITableAnalysisContext();\n\n  const handleDownload = useCallback(() => {\n    if (onDownload) {\n      onDownload();\n      return;\n    }\n    if (!csvData || csvData.length === 0) return;\n    const selectedRows = table.getSelectedRowModel().flatRows;\n    const rows = selectedRows.length > 0 ? selectedRows.map(row => csvData[row.index]).filter(Boolean) : csvData;\n    downloadCsv(rows, csvFileName || title);\n  }, [onDownload, csvData, csvFileName, table, title]);\n\n  const isDownloadEnabled = !!(onDownload || (csvData && csvData.length > 0));\n\n  return (\n    <div className=\"flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\">\n      <ActionButton\n        disabled={!onCreate}\n        onClick={e => {\n          onCreate?.();\n          e.stopPropagation();\n          e.preventDefault();\n        }}\n      >\n        <CirclePlus />\n      </ActionButton>\n      <ActionButton\n        disabled={!onRefresh}\n        onClick={e => {\n          onRefresh?.();\n          e.stopPropagation();\n          e.preventDefault();\n        }}\n      >\n        <RefreshCwIcon />\n      </ActionButton>\n      <ActionButton\n        disabled={!isDownloadEnabled}\n        onClick={e => {\n          handleDownload();\n          e.stopPropagation();\n          e.preventDefault();\n        }}\n      >\n        <DownloadIcon />\n      </ActionButton>\n      {showAnalysisPanel && (\n        <ActionButton\n          onClick={e => {\n            toggleAnalysis();\n            e.stopPropagation();\n            e.preventDefault();\n          }}\n          aria-pressed={isAnalysisOpen}\n          className={isAnalysisOpen ? 'bg-muted-muted text-text-positive' : undefined}\n        >\n          <BarChart2Icon />\n        </ActionButton>\n      )}\n    </div>\n  );\n};\n\n/**\n * Outer toolbar shell for the UITable component.\n *\n * Reads the table `title` from `UITableContext` and renders it as a heading\n * above the `children` slot, which typically contains a\n * `UITableTooltipFilter` and/or `UITableTooltipActions`.\n *\n * @example\n * ```tsx\n * import {\n *   UITableTooltip,\n *   UITableTooltipFilter,\n *   UITableTooltipActions,\n * } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltip>\n *   <UITableTooltipFilter onSearch={setQuery} />\n *   <UITableTooltipActions onCreate={handleCreate} onRefresh={refetch} />\n * </UITableTooltip>\n * ```\n */\nexport const UITableTooltip: React.FC<React.PropsWithChildren> = ({ children }) => {\n  const { title, description, headerActions } = useUITableContext();\n  return (\n    <div data-slot=\"table-tooltip\" className=\"relative flex w-full flex-col gap-2 px-2 py-0 text-sm\">\n      <div className=\"flex w-full items-start justify-between gap-4\">\n        <div className=\"flex flex-col gap-0.5\">\n          <h3 className=\"font-semibold text-base text-text-positive\">{title}</h3>\n          {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n        </div>\n        {headerActions && <div className=\"flex items-center gap-2 shrink-0\">{headerActions}</div>}\n      </div>\n      <div className=\"flex w-full flex-1 justify-between gap-x-2\">{children}</div>\n    </div>\n  );\n};\nUITableTooltip.displayName = 'TableTooltip';\n"],"mappings":"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"}

package/dist/top-products-bar-chart-5EJFSkeo.cjs

@@ -0,0 +1,2 @@
+const e=require("./features/charts/index.cjs"),t=require("./ui/chart.cjs");let n=require("react"),r=require("@customafk/react-toolkit/utils"),i=require("react/jsx-runtime"),a=require("recharts");const o=({data:o,label:s=`Sales`,maxItems:c=8,color:l=`var(--chart-1)`,valueFormatter:u=e.formatCompactNumber,showValueLabels:d=!0,className:f,animate:p=!0,height:m})=>{let h=(0,n.useMemo)(()=>[...o].sort((e,t)=>t.value-e.value).slice(0,c),[o,c]);return(0,i.jsx)(t.ChartContainer,{"data-slot":`top-products-bar-chart`,config:(0,n.useMemo)(()=>({value:{label:s,color:l}}),[s,l]),className:(0,r.cn)(`w-full`,f),style:m===void 0?void 0:{height:m,aspectRatio:`auto`},children:(0,i.jsxs)(a.BarChart,{data:h,layout:`vertical`,margin:{top:0,right:d?48:12,bottom:0,left:12},children:[(0,i.jsx)(a.XAxis,{type:`number`,dataKey:`value`,hide:!0}),(0,i.jsx)(a.YAxis,{type:`category`,dataKey:`name`,tickLine:!1,axisLine:!1,tickMargin:8,width:120}),(0,i.jsx)(t.ChartTooltip,{cursor:!1,content:(0,i.jsx)(t.ChartTooltipContent,{hideLabel:!0})}),(0,i.jsx)(a.Bar,{dataKey:`value`,fill:l,radius:4,isAnimationActive:p,children:d&&(0,i.jsx)(a.LabelList,{dataKey:`value`,position:`right`,offset:8,className:`fill-muted-strong`,fontSize:12,formatter:e=>u(Number(e))})})]})})};exports.TopProductsBarChart=o;
+//# sourceMappingURL=top-products-bar-chart-5EJFSkeo.cjs.map

package/dist/top-products-bar-chart-5EJFSkeo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-products-bar-chart-5EJFSkeo.cjs","names":["formatCompactNumber","ChartContainer","BarChart","XAxis","YAxis","ChartTooltip","ChartTooltipContent","Bar","LabelList"],"sources":["../packages/components/features/charts/components/top-products-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, LabelList, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber } from '../utils';\n\nexport type TopProductsBarChartProps = BaseChartProps & {\n  data: NamedValue[];\n  /** Series label. Defaults to `'Sales'`. */\n  label?: string;\n  /** Number of items shown after sorting descending. Defaults to `8`. */\n  maxItems?: number;\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  /** Value labels at the end of each bar. Defaults to `true`. */\n  showValueLabels?: boolean;\n};\n\n/**\n * A horizontal bar ranking chart — top products, best categories, top customers.\n *\n * @example\n * ```tsx\n * import { TopProductsBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <TopProductsBarChart\n *   data={[\n *     { name: 'Wireless Earbuds', value: 1245 },\n *     { name: 'Smart Watch', value: 986 },\n *   ]}\n * />\n * ```\n */\nexport const TopProductsBarChart = ({\n  data,\n  label = 'Sales',\n  maxItems = 8,\n  color = 'var(--chart-1)',\n  valueFormatter = formatCompactNumber,\n  showValueLabels = true,\n  className,\n  animate = true,\n  height,\n}: TopProductsBarChartProps) => {\n  const chartData = useMemo(() => [...data].sort((a, b) => b.value - a.value).slice(0, maxItems), [data, maxItems]);\n\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"top-products-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={chartData} layout=\"vertical\" margin={{ top: 0, right: showValueLabels ? 48 : 12, bottom: 0, left: 12 }}>\n        <XAxis type=\"number\" dataKey=\"value\" hide />\n        <YAxis type=\"category\" dataKey=\"name\" tickLine={false} axisLine={false} tickMargin={8} width={120} />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n        <Bar dataKey=\"value\" fill={color} radius={4} isAnimationActive={animate}>\n          {showValueLabels && (\n            <LabelList\n              dataKey=\"value\"\n              position=\"right\"\n              offset={8}\n              className=\"fill-muted-strong\"\n              fontSize={12}\n              formatter={(value: React.ReactNode) => valueFormatter(Number(value))}\n            />\n          )}\n        </Bar>\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"mMAuCA,MAAa,GAAuB,CAClC,OACA,QAAQ,QACR,WAAW,EACX,QAAQ,iBACR,iBAAiBA,EAAAA,oBACjB,kBAAkB,GAClB,YACA,UAAU,GACV,YAC8B,CAC9B,IAAM,GAAA,EAAA,EAAA,QAAA,KAA0B,CAAC,GAAG,CAAI,CAAC,CAAC,MAAM,EAAG,IAAM,EAAE,MAAQ,EAAE,KAAK,CAAC,CAAC,MAAM,EAAG,CAAQ,EAAG,CAAC,EAAM,CAAQ,CAAC,EAIhH,OACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CACE,YAAU,yBACV,QAAA,EAAA,EAAA,QAAA,MALuC,CAAE,MAAO,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKrE,EACb,WAAA,EAAA,EAAA,GAAA,CAAc,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,YAE5D,EAAA,EAAA,KAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,EAAW,OAAO,WAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,EAAkB,GAAK,GAAI,OAAQ,EAAG,KAAM,EAAG,WAArH,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,SAAS,QAAQ,QAAQ,KAAA,EAAM,CAAA,GAC3C,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAK,WAAW,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAM,CAAA,GACpG,EAAA,EAAA,IAAA,CAACC,EAAAA,aAAD,CAAc,OAAQ,GAAO,SAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,oBAAD,CAAqB,UAAA,EAAW,CAAA,CAAI,CAAA,GAC1E,EAAA,EAAA,IAAA,CAACC,EAAAA,IAAD,CAAK,QAAQ,QAAQ,KAAM,EAAO,OAAQ,EAAG,kBAAmB,WAC7D,IACC,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CACE,QAAQ,QACR,SAAS,QACT,OAAQ,EACR,UAAU,oBACV,SAAU,GACV,UAAY,GAA2B,EAAe,OAAO,CAAK,CAAC,CACpE,CAAA,CAEA,CAAA,CACG,GACI,CAAA,CAEpB"}

package/dist/top-products-bar-chart-CKYaOGWT.mjs

@@ -0,0 +1,2 @@
+import{formatCompactNumber as e}from"./features/charts/index.mjs";import{ChartContainer as t,ChartTooltip as n,ChartTooltipContent as r}from"./ui/chart.mjs";import{useMemo as i}from"react";import{cn as a}from"@customafk/react-toolkit/utils";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Bar as c,BarChart as l,LabelList as u,XAxis as d,YAxis as f}from"recharts";const p=({data:p,label:m=`Sales`,maxItems:h=8,color:g=`var(--chart-1)`,valueFormatter:_=e,showValueLabels:v=!0,className:y,animate:b=!0,height:x})=>{let S=i(()=>[...p].sort((e,t)=>t.value-e.value).slice(0,h),[p,h]);return o(t,{"data-slot":`top-products-bar-chart`,config:i(()=>({value:{label:m,color:g}}),[m,g]),className:a(`w-full`,y),style:x===void 0?void 0:{height:x,aspectRatio:`auto`},children:s(l,{data:S,layout:`vertical`,margin:{top:0,right:v?48:12,bottom:0,left:12},children:[o(d,{type:`number`,dataKey:`value`,hide:!0}),o(f,{type:`category`,dataKey:`name`,tickLine:!1,axisLine:!1,tickMargin:8,width:120}),o(n,{cursor:!1,content:o(r,{hideLabel:!0})}),o(c,{dataKey:`value`,fill:g,radius:4,isAnimationActive:b,children:v&&o(u,{dataKey:`value`,position:`right`,offset:8,className:`fill-muted-strong`,fontSize:12,formatter:e=>_(Number(e))})})]})})};export{p as TopProductsBarChart};
+//# sourceMappingURL=top-products-bar-chart-CKYaOGWT.mjs.map

package/dist/top-products-bar-chart-CKYaOGWT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-products-bar-chart-CKYaOGWT.mjs","names":[],"sources":["../packages/components/features/charts/components/top-products-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';\n\nimport { Bar, BarChart, LabelList, XAxis, YAxis } from 'recharts';\nimport type { BaseChartProps, NamedValue } from '../types';\nimport { formatCompactNumber } from '../utils';\n\nexport type TopProductsBarChartProps = BaseChartProps & {\n  data: NamedValue[];\n  /** Series label. Defaults to `'Sales'`. */\n  label?: string;\n  /** Number of items shown after sorting descending. Defaults to `8`. */\n  maxItems?: number;\n  color?: string;\n  valueFormatter?: (value: number) => string;\n  /** Value labels at the end of each bar. Defaults to `true`. */\n  showValueLabels?: boolean;\n};\n\n/**\n * A horizontal bar ranking chart — top products, best categories, top customers.\n *\n * @example\n * ```tsx\n * import { TopProductsBarChart } from '@customafk/lunas-ui/features/charts';\n *\n * <TopProductsBarChart\n *   data={[\n *     { name: 'Wireless Earbuds', value: 1245 },\n *     { name: 'Smart Watch', value: 986 },\n *   ]}\n * />\n * ```\n */\nexport const TopProductsBarChart = ({\n  data,\n  label = 'Sales',\n  maxItems = 8,\n  color = 'var(--chart-1)',\n  valueFormatter = formatCompactNumber,\n  showValueLabels = true,\n  className,\n  animate = true,\n  height,\n}: TopProductsBarChartProps) => {\n  const chartData = useMemo(() => [...data].sort((a, b) => b.value - a.value).slice(0, maxItems), [data, maxItems]);\n\n  const config = useMemo<ChartConfig>(() => ({ value: { label, color } }), [label, color]);\n\n  return (\n    <ChartContainer\n      data-slot=\"top-products-bar-chart\"\n      config={config}\n      className={cn('w-full', className)}\n      style={height !== undefined ? { height, aspectRatio: 'auto' } : undefined}\n    >\n      <BarChart data={chartData} layout=\"vertical\" margin={{ top: 0, right: showValueLabels ? 48 : 12, bottom: 0, left: 12 }}>\n        <XAxis type=\"number\" dataKey=\"value\" hide />\n        <YAxis type=\"category\" dataKey=\"name\" tickLine={false} axisLine={false} tickMargin={8} width={120} />\n        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n        <Bar dataKey=\"value\" fill={color} radius={4} isAnimationActive={animate}>\n          {showValueLabels && (\n            <LabelList\n              dataKey=\"value\"\n              position=\"right\"\n              offset={8}\n              className=\"fill-muted-strong\"\n              fontSize={12}\n              formatter={(value: React.ReactNode) => valueFormatter(Number(value))}\n            />\n          )}\n        </Bar>\n      </BarChart>\n    </ChartContainer>\n  );\n};\n"],"mappings":"qXAuCA,MAAa,GAAuB,CAClC,OACA,QAAQ,QACR,WAAW,EACX,QAAQ,iBACR,iBAAiB,EACjB,kBAAkB,GAClB,YACA,UAAU,GACV,YAC8B,CAC9B,IAAM,EAAY,MAAc,CAAC,GAAG,CAAI,CAAC,CAAC,MAAM,EAAG,IAAM,EAAE,MAAQ,EAAE,KAAK,CAAC,CAAC,MAAM,EAAG,CAAQ,EAAG,CAAC,EAAM,CAAQ,CAAC,EAIhH,OACE,EAAC,EAAD,CACE,YAAU,yBACV,OALW,OAA4B,CAAE,MAAO,CAAE,QAAO,OAAM,CAAE,GAAI,CAAC,EAAO,CAAK,CAKrE,EACb,UAAW,EAAG,SAAU,CAAS,EACjC,MAAO,IAAW,IAAA,GAA8C,IAAA,GAAlC,CAAE,SAAQ,YAAa,MAAO,WAE5D,EAAC,EAAD,CAAU,KAAM,EAAW,OAAO,WAAW,OAAQ,CAAE,IAAK,EAAG,MAAO,EAAkB,GAAK,GAAI,OAAQ,EAAG,KAAM,EAAG,WAArH,CACE,EAAC,EAAD,CAAO,KAAK,SAAS,QAAQ,QAAQ,KAAA,EAAM,CAAA,EAC3C,EAAC,EAAD,CAAO,KAAK,WAAW,QAAQ,OAAO,SAAU,GAAO,SAAU,GAAO,WAAY,EAAG,MAAO,GAAM,CAAA,EACpG,EAAC,EAAD,CAAc,OAAQ,GAAO,QAAS,EAAC,EAAD,CAAqB,UAAA,EAAW,CAAA,CAAI,CAAA,EAC1E,EAAC,EAAD,CAAK,QAAQ,QAAQ,KAAM,EAAO,OAAQ,EAAG,kBAAmB,WAC7D,GACC,EAAC,EAAD,CACE,QAAQ,QACR,SAAS,QACT,OAAQ,EACR,UAAU,oBACV,SAAU,GACV,UAAY,GAA2B,EAAe,OAAO,CAAK,CAAC,CACpE,CAAA,CAEA,CAAA,CACG,GACI,CAAA,CAEpB"}

package/dist/trash-BfWSqlL4.d.cts

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

package/dist/trash-BfWSqlL4.d.mts

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

package/dist/typography/paragraph.d.cts

@@ -1,46 +1,2 @@
-import { VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef } from "react";
-
-//#region packages/components/typography/paragraph.d.ts
-declare const paragraphVariants: (props?: ({
-  variant?: "xs" | "sm" | "lg" | "lead" | "p" | "muted" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * Props for the {@link Paragraph} component.
- *
- * Extends all native `<p>` HTML attributes plus the CVA variant.
- *
- * @property variant - Visual style variant.
- *   - `'lead'` — large, medium-weight introductory text (default size `text-base` / `md:text-lg`)
- *   - `'lg'`  — large normal-weight text
- *   - `'p'`   — standard body text (default)
- *   - `'sm'`  — small normal-weight text with tighter leading
- *   - `'muted'` — subdued colour, standard body size
- *   - `'xs'`  — extra-small text in a muted colour
- */
-type ParagraphProps = ComponentPropsWithoutRef<'p'> & VariantProps<typeof paragraphVariants>;
-/**
- * A styled `<p>` element with semantic size and weight variants for body text.
- *
- * @example
- * ```tsx
- * import { Paragraph } from '@customafk/lunas-ui/typography/paragraph';
- *
- * // Default body paragraph
- * <Paragraph>This is body text.</Paragraph>
- *
- * // Lead paragraph with larger, medium-weight text
- * <Paragraph variant="lead">Introducing our new feature.</Paragraph>
- *
- * // Muted helper text
- * <Paragraph variant="muted">Last updated 3 days ago.</Paragraph>
- * ```
- */
-declare const Paragraph: ({
-  variant,
-  className,
-  ...props
-}: ParagraphProps) => import("react").JSX.Element;
-//#endregion
-export { Paragraph, ParagraphProps, paragraphVariants };
-//# sourceMappingURL=paragraph.d.cts.map
+import { n as ParagraphProps, r as paragraphVariants, t as Paragraph } from "../paragraph-DbYYv0A0.cjs";
+export { Paragraph, ParagraphProps, paragraphVariants };

package/dist/typography/paragraph.d.mts

@@ -1,46 +1,2 @@
-import { ComponentPropsWithoutRef } from "react";
-import { VariantProps } from "class-variance-authority";
-
-//#region packages/components/typography/paragraph.d.ts
-declare const paragraphVariants: (props?: ({
-  variant?: "xs" | "sm" | "lg" | "lead" | "p" | "muted" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * Props for the {@link Paragraph} component.
- *
- * Extends all native `<p>` HTML attributes plus the CVA variant.
- *
- * @property variant - Visual style variant.
- *   - `'lead'` — large, medium-weight introductory text (default size `text-base` / `md:text-lg`)
- *   - `'lg'`  — large normal-weight text
- *   - `'p'`   — standard body text (default)
- *   - `'sm'`  — small normal-weight text with tighter leading
- *   - `'muted'` — subdued colour, standard body size
- *   - `'xs'`  — extra-small text in a muted colour
- */
-type ParagraphProps = ComponentPropsWithoutRef<'p'> & VariantProps<typeof paragraphVariants>;
-/**
- * A styled `<p>` element with semantic size and weight variants for body text.
- *
- * @example
- * ```tsx
- * import { Paragraph } from '@customafk/lunas-ui/typography/paragraph';
- *
- * // Default body paragraph
- * <Paragraph>This is body text.</Paragraph>
- *
- * // Lead paragraph with larger, medium-weight text
- * <Paragraph variant="lead">Introducing our new feature.</Paragraph>
- *
- * // Muted helper text
- * <Paragraph variant="muted">Last updated 3 days ago.</Paragraph>
- * ```
- */
-declare const Paragraph: ({
-  variant,
-  className,
-  ...props
-}: ParagraphProps) => import("react").JSX.Element;
-//#endregion
-export { Paragraph, ParagraphProps, paragraphVariants };
-//# sourceMappingURL=paragraph.d.mts.map
+import { n as ParagraphProps, r as paragraphVariants, t as Paragraph } from "../paragraph-BTmvVS1S.mjs";
+export { Paragraph, ParagraphProps, paragraphVariants };

package/dist/typography/title.d.cts

@@ -1,41 +1,2 @@
-import { JSX, ReactNode } from "react";
-
-//#region packages/components/typography/title.d.ts
-type TitleProps = {
-  /**
-   * Heading level that maps to the rendered HTML tag (`h1`–`h6`) and the corresponding
-   * typographic scale variant.
-   * - `1` — `text-3xl / md:text-4xl`, bold (default)
-   * - `2` — `text-2xl / md:text-3xl`, semibold
-   * - `3` — `text-xl / md:text-2xl`, semibold
-   * - `4` — `text-lg / md:text-xl`, semibold
-   * - `5` — `text-base / md:text-lg`, semibold
-   * - `6` — `text-sm / md:text-base`, semibold
-   * @default 1
-   */
-  level?: 1 | 2 | 3 | 4 | 5 | 6; /** Additional Tailwind classes merged with the variant classes. */
-  className?: string; /** Content rendered inside the heading element. */
-  children?: ReactNode;
-};
-/**
- * A semantic heading component that renders the correct `h1`–`h6` element and applies a matched typographic scale.
- *
- * @example
- * ```tsx
- * import { Title } from '@customafk/lunas-ui/typography/title';
- *
- * // Page-level heading (renders <h1>)
- * <Title level={1}>Welcome to Lunas</Title>
- *
- * // Section sub-heading (renders <h3>)
- * <Title level={3}>Account Settings</Title>
- * ```
- */
-declare const Title: ({
-  level,
-  className,
-  children
-}: TitleProps) => JSX.Element;
-//#endregion
-export { Title, TitleProps };
-//# sourceMappingURL=title.d.cts.map
+import { n as TitleProps, t as Title } from "../title-BT9guhSU.cjs";
+export { Title, TitleProps };

package/dist/typography/title.d.mts

@@ -1,41 +1,2 @@
-import { JSX, ReactNode } from "react";
-
-//#region packages/components/typography/title.d.ts
-type TitleProps = {
-  /**
-   * Heading level that maps to the rendered HTML tag (`h1`–`h6`) and the corresponding
-   * typographic scale variant.
-   * - `1` — `text-3xl / md:text-4xl`, bold (default)
-   * - `2` — `text-2xl / md:text-3xl`, semibold
-   * - `3` — `text-xl / md:text-2xl`, semibold
-   * - `4` — `text-lg / md:text-xl`, semibold
-   * - `5` — `text-base / md:text-lg`, semibold
-   * - `6` — `text-sm / md:text-base`, semibold
-   * @default 1
-   */
-  level?: 1 | 2 | 3 | 4 | 5 | 6; /** Additional Tailwind classes merged with the variant classes. */
-  className?: string; /** Content rendered inside the heading element. */
-  children?: ReactNode;
-};
-/**
- * A semantic heading component that renders the correct `h1`–`h6` element and applies a matched typographic scale.
- *
- * @example
- * ```tsx
- * import { Title } from '@customafk/lunas-ui/typography/title';
- *
- * // Page-level heading (renders <h1>)
- * <Title level={1}>Welcome to Lunas</Title>
- *
- * // Section sub-heading (renders <h3>)
- * <Title level={3}>Account Settings</Title>
- * ```
- */
-declare const Title: ({
-  level,
-  className,
-  children
-}: TitleProps) => JSX.Element;
-//#endregion
-export { Title, TitleProps };
-//# sourceMappingURL=title.d.mts.map
+import { n as TitleProps, t as Title } from "../title-BT9guhSU.mjs";
+export { Title, TitleProps };

package/dist/ui/alert-dialog.d.cts

@@ -1,88 +1,2 @@
-import { AlertDialog as AlertDialog$1 } from "radix-ui";
-
-//#region packages/components/ui/alert-dialog.d.ts
-/**
- * Accessible alert dialog built on Radix UI's AlertDialog primitives, requiring explicit user confirmation before a destructive action can proceed.
- *
- * @example
- * ```tsx
- * import {
- *   AlertDialog, AlertDialogTrigger, AlertDialogContent,
- *   AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
- *   AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
- * } from '@customafk/lunas-ui/ui/alert-dialog';
- * import { Button } from '@customafk/lunas-ui/ui/button';
- *
- * <AlertDialog>
- *   <AlertDialogTrigger asChild>
- *     <Button variant="solid" color="danger">Delete account</Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogHeader>
- *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
- *       <AlertDialogDescription>
- *         This action cannot be undone. Your account will be permanently deleted.
- *       </AlertDialogDescription>
- *     </AlertDialogHeader>
- *     <AlertDialogFooter>
- *       <AlertDialogCancel>Cancel</AlertDialogCancel>
- *       <AlertDialogAction>Continue</AlertDialogAction>
- *     </AlertDialogFooter>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Root>): import("react").JSX.Element;
-/** Element that opens the alert dialog when clicked; typically wrapped with `asChild` around a `Button`. */
-declare function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Trigger>): import("react").JSX.Element;
-/** Renders alert dialog overlay and content into a portal outside the normal React tree. */
-declare function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Portal>): import("react").JSX.Element;
-/** Semi-transparent backdrop rendered behind the alert dialog panel; pointer events are disabled to prevent accidental dismissal. */
-declare function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Overlay>): import("react").JSX.Element;
-/** Animated panel that contains the alert dialog body; renders via `AlertDialogPortal` over `AlertDialogOverlay`. */
-declare function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Content>): import("react").JSX.Element;
-/** Layout wrapper for the alert dialog title and description. */
-declare function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-/** Layout wrapper for the cancel and action buttons at the bottom of the alert dialog. */
-declare function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-/** Accessible heading for the alert dialog, styled with the h3 heading variant. */
-declare function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Title>): import("react").JSX.Element;
-/** Muted supporting text that explains the consequences of the destructive action. */
-declare function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Description>): import("react").JSX.Element;
-/** Confirm button that closes the dialog and proceeds with the action; auto-focused and styled as the primary action. */
-declare function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Action>): import("react").JSX.Element;
-/** Cancel button that closes the alert dialog without performing the destructive action. */
-declare function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Cancel>): import("react").JSX.Element;
-//#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
-//# sourceMappingURL=alert-dialog.d.cts.map
+import { a as AlertDialogDescription, c as AlertDialogOverlay, d as AlertDialogTrigger, i as AlertDialogContent, l as AlertDialogPortal, n as AlertDialogAction, o as AlertDialogFooter, r as AlertDialogCancel, s as AlertDialogHeader, t as AlertDialog, u as AlertDialogTitle } from "../alert-dialog-Cdhz7jSj.cjs";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/ui/alert-dialog.d.mts

@@ -1,88 +1,2 @@
-import { AlertDialog as AlertDialog$1 } from "radix-ui";
-
-//#region packages/components/ui/alert-dialog.d.ts
-/**
- * Accessible alert dialog built on Radix UI's AlertDialog primitives, requiring explicit user confirmation before a destructive action can proceed.
- *
- * @example
- * ```tsx
- * import {
- *   AlertDialog, AlertDialogTrigger, AlertDialogContent,
- *   AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
- *   AlertDialogFooter, AlertDialogAction, AlertDialogCancel,
- * } from '@customafk/lunas-ui/ui/alert-dialog';
- * import { Button } from '@customafk/lunas-ui/ui/button';
- *
- * <AlertDialog>
- *   <AlertDialogTrigger asChild>
- *     <Button variant="solid" color="danger">Delete account</Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogHeader>
- *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
- *       <AlertDialogDescription>
- *         This action cannot be undone. Your account will be permanently deleted.
- *       </AlertDialogDescription>
- *     </AlertDialogHeader>
- *     <AlertDialogFooter>
- *       <AlertDialogCancel>Cancel</AlertDialogCancel>
- *       <AlertDialogAction>Continue</AlertDialogAction>
- *     </AlertDialogFooter>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Root>): import("react").JSX.Element;
-/** Element that opens the alert dialog when clicked; typically wrapped with `asChild` around a `Button`. */
-declare function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Trigger>): import("react").JSX.Element;
-/** Renders alert dialog overlay and content into a portal outside the normal React tree. */
-declare function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Portal>): import("react").JSX.Element;
-/** Semi-transparent backdrop rendered behind the alert dialog panel; pointer events are disabled to prevent accidental dismissal. */
-declare function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Overlay>): import("react").JSX.Element;
-/** Animated panel that contains the alert dialog body; renders via `AlertDialogPortal` over `AlertDialogOverlay`. */
-declare function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Content>): import("react").JSX.Element;
-/** Layout wrapper for the alert dialog title and description. */
-declare function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-/** Layout wrapper for the cancel and action buttons at the bottom of the alert dialog. */
-declare function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<'div'>): import("react").JSX.Element;
-/** Accessible heading for the alert dialog, styled with the h3 heading variant. */
-declare function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Title>): import("react").JSX.Element;
-/** Muted supporting text that explains the consequences of the destructive action. */
-declare function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Description>): import("react").JSX.Element;
-/** Confirm button that closes the dialog and proceeds with the action; auto-focused and styled as the primary action. */
-declare function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Action>): import("react").JSX.Element;
-/** Cancel button that closes the alert dialog without performing the destructive action. */
-declare function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialog$1.Cancel>): import("react").JSX.Element;
-//#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
-//# sourceMappingURL=alert-dialog.d.mts.map
+import { a as AlertDialogDescription, c as AlertDialogOverlay, d as AlertDialogTrigger, i as AlertDialogContent, l as AlertDialogPortal, n as AlertDialogAction, o as AlertDialogFooter, r as AlertDialogCancel, s as AlertDialogHeader, t as AlertDialog, u as AlertDialogTitle } from "../alert-dialog-Cdhz7jSj.mjs";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/ui/aspect-ratio.d.cts

@@ -1,22 +1,2 @@
-import { AspectRatio as AspectRatio$1 } from "radix-ui";
-
-//#region packages/components/ui/aspect-ratio.d.ts
-/**
- * Constrains its child to a given aspect ratio using the Radix UI AspectRatio primitive.
- *
- * @example
- * ```tsx
- * import { AspectRatio } from '@customafk/lunas-ui/ui/aspect-ratio';
- *
- * <AspectRatio ratio={16 / 9}>
- *   <img src="/banner.jpg" alt="Banner" className="size-full object-cover" />
- * </AspectRatio>
- * ```
- */
-declare function AspectRatio({
-  className,
-  ...props
-}: React.ComponentProps<typeof AspectRatio$1.Root>): import("react").JSX.Element;
-//#endregion
-export { AspectRatio };
-//# sourceMappingURL=aspect-ratio.d.cts.map
+import { t as AspectRatio } from "../aspect-ratio-huscluwJ.cjs";
+export { AspectRatio };

package/dist/ui/aspect-ratio.d.mts

@@ -1,22 +1,2 @@
-import { AspectRatio as AspectRatio$1 } from "radix-ui";
-
-//#region packages/components/ui/aspect-ratio.d.ts
-/**
- * Constrains its child to a given aspect ratio using the Radix UI AspectRatio primitive.
- *
- * @example
- * ```tsx
- * import { AspectRatio } from '@customafk/lunas-ui/ui/aspect-ratio';
- *
- * <AspectRatio ratio={16 / 9}>
- *   <img src="/banner.jpg" alt="Banner" className="size-full object-cover" />
- * </AspectRatio>
- * ```
- */
-declare function AspectRatio({
-  className,
-  ...props
-}: React.ComponentProps<typeof AspectRatio$1.Root>): import("react").JSX.Element;
-//#endregion
-export { AspectRatio };
-//# sourceMappingURL=aspect-ratio.d.mts.map
+import { t as AspectRatio } from "../aspect-ratio-huscluwJ.mjs";
+export { AspectRatio };

package/dist/ui/avatar.d.cts

@@ -1,33 +1,2 @@
-import { Avatar as Avatar$1 } from "radix-ui";
-
-//#region packages/components/ui/avatar.d.ts
-/**
- * Circular user avatar built on Radix UI's Avatar primitives, falling back to initials or an icon when the image fails to load.
- *
- * @example
- * ```tsx
- * import { Avatar, AvatarImage, AvatarFallback } from '@customafk/lunas-ui/ui/avatar';
- *
- * <Avatar>
- *   <AvatarImage src="https://example.com/avatar.jpg" alt="Jane Doe" />
- *   <AvatarFallback>JD</AvatarFallback>
- * </Avatar>
- * ```
- */
-declare function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof Avatar$1.Root>): import("react").JSX.Element;
-/** The avatar photo; hidden automatically by Radix UI when the image fails to load, revealing `AvatarFallback`. */
-declare function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof Avatar$1.Image>): import("react").JSX.Element;
-/** Fallback content (e.g. initials) displayed inside the avatar when the image is unavailable or still loading. */
-declare function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof Avatar$1.Fallback>): import("react").JSX.Element;
-//#endregion
-export { Avatar, AvatarFallback, AvatarImage };
-//# sourceMappingURL=avatar.d.cts.map
+import { n as AvatarFallback, r as AvatarImage, t as Avatar } from "../avatar-BpeFwSkQ.cjs";
+export { Avatar, AvatarFallback, AvatarImage };