@combinedk/ui 3.0.0-beta.11

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./index2.cjs`),t=require(`./index3.cjs`),n=require(`./index4.cjs`),r=require(`./index5.cjs`),i=require(`./index6.cjs`),a=require(`./index7.cjs`),o=require(`./index8.cjs`),s=require(`./index9.cjs`),c=require(`./index10.cjs`),l=require(`./index11.cjs`),u=require(`./index12.cjs`),d=require(`./index13.cjs`),f=require(`./index14.cjs`),p=require(`./index15.cjs`),m=require(`./index16.cjs`),h=require(`./index17.cjs`),g=require(`./index18.cjs`),_=require(`./index19.cjs`);exports.Badge=t.Badge,exports.Button=e.Button,exports.Card=r.Card,exports.Checkbox=h.Checkbox,exports.Combobox=m.Combobox,exports.ConfirmDialog=p.ConfirmDialog,exports.DropdownMenu=f.DropdownMenu,exports.EmptyState=l.EmptyState,exports.Field=g.Field,exports.Input=a.Input,exports.Modal=s.Modal,exports.MultiSelect=m.MultiSelect,exports.PageHeader=o.PageHeader,exports.PreviewBadge=_.PreviewBadge,exports.PreviewHeader=_.PreviewHeader,exports.Radio=h.Radio,exports.SegmentedControl=g.SegmentedControl,exports.Select=m.Select,exports.Skeleton=u.Skeleton,exports.SkeletonCard=u.SkeletonCard,exports.SkeletonTable=u.SkeletonTable,exports.SkeletonTableRow=u.SkeletonTableRow,exports.SkeletonText=u.SkeletonText,exports.StatusPill=n.StatusPill,exports.Switch=h.Switch,exports.Table=c.Table,exports.Tag=i.Tag,exports.Textarea=g.Textarea,exports.ToastProvider=d.ToastProvider,exports.useToast=d.useToast;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/index.js

@@ -0,0 +1,19 @@
+import { Button as e } from "./index2.js";
+import { Badge as t } from "./index3.js";
+import { StatusPill as n } from "./index4.js";
+import { Card as r } from "./index5.js";
+import { Tag as i } from "./index6.js";
+import { Input as a } from "./index7.js";
+import { PageHeader as o } from "./index8.js";
+import { Modal as s } from "./index9.js";
+import { Table as c } from "./index10.js";
+import { EmptyState as l } from "./index11.js";
+import { Skeleton as u, SkeletonCard as d, SkeletonTable as f, SkeletonTableRow as p, SkeletonText as m } from "./index12.js";
+import { ToastProvider as h, useToast as g } from "./index13.js";
+import { DropdownMenu as _ } from "./index14.js";
+import { ConfirmDialog as v } from "./index15.js";
+import { Combobox as y, MultiSelect as b, Select as x } from "./index16.js";
+import { Checkbox as S, Radio as C, Switch as w } from "./index17.js";
+import { Field as T, SegmentedControl as E, Textarea as D } from "./index18.js";
+import { PreviewBadge as O, PreviewHeader as k } from "./index19.js";
+export { t as Badge, e as Button, r as Card, S as Checkbox, y as Combobox, v as ConfirmDialog, _ as DropdownMenu, l as EmptyState, T as Field, a as Input, s as Modal, b as MultiSelect, o as PageHeader, O as PreviewBadge, k as PreviewHeader, C as Radio, E as SegmentedControl, x as Select, u as Skeleton, d as SkeletonCard, f as SkeletonTable, p as SkeletonTableRow, m as SkeletonText, n as StatusPill, w as Switch, c as Table, i as Tag, D as Textarea, h as ToastProvider, g as useToast };

package/dist/index10.cjs

@@ -0,0 +1,2 @@
+let e=require(`react`),t=require(`react/jsx-runtime`);function n(e,t,n){let r=e??``,i=t??``,a=String(r).localeCompare(String(i),void 0,{numeric:!0,sensitivity:`base`});return n===`asc`?a:-a}function r({columns:r,data:a,keyField:o,selectable:s=!1,selected:c,onSelectionChange:l,onRowClick:u,emptyMessage:d=`No results.`,totalCount:f,page:p,pageSize:m,onPageChange:h,bulkActions:g,expandable:_}){let[v,y]=(0,e.useState)(null),[b,x]=(0,e.useState)(new Set),[S,C]=(0,e.useState)(new Set),w=e=>{C(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},T=c!==void 0,E=T?c:b,D=e=>{T||x(e),l?.(e)},O=v?[...a].sort((e,t)=>n(e[v.key],t[v.key],v.dir)):a,k=e=>{y(t=>t?.key===e?{key:e,dir:t.dir===`asc`?`desc`:`asc`}:{key:e,dir:`asc`})},A=e=>String(e[o]),j=O.length>0&&O.every(e=>E.has(A(e))),M=O.some(e=>E.has(A(e)))&&!j,N=e=>{let t=new Set(E);t.has(e)?t.delete(e):t.add(e),D(t)},P=()=>{D(j?new Set:new Set(O.map(A)))},F=f!==void 0&&m?Math.ceil(f/m):void 0,I=p??1,L=a.length,R=f??a.length;return(0,t.jsxs)(`div`,{children:[(0,t.jsx)(`div`,{style:{border:`1px solid var(--c-border)`,borderRadius:10,overflow:`hidden`},children:(0,t.jsxs)(`table`,{style:{width:`100%`,borderCollapse:`collapse`,fontSize:13,fontFamily:`var(--font-sans)`},children:[(0,t.jsx)(`thead`,{children:(0,t.jsxs)(`tr`,{style:{background:`var(--c-elevated)`,borderBottom:`1px solid var(--c-border)`},children:[_&&(0,t.jsx)(`th`,{style:{padding:`10px 6px 10px 14px`,width:28}}),s&&(0,t.jsx)(`th`,{style:{padding:`10px 14px`,width:36},children:(0,t.jsx)(`input`,{type:`checkbox`,checked:j,ref:e=>{e&&(e.indeterminate=M)},onChange:P,style:{accentColor:`var(--c-contrast)`,cursor:`pointer`}})}),r.map(e=>{let n=v?.key===e.key;return(0,t.jsxs)(`th`,{onClick:e.sortable?()=>k(e.key):void 0,style:{padding:`10px 14px`,textAlign:`left`,fontWeight:700,fontSize:10.5,textTransform:`uppercase`,letterSpacing:`0.05em`,color:n?`var(--c-text)`:`var(--c-text-subtle)`,cursor:e.sortable?`pointer`:`default`,userSelect:`none`,whiteSpace:`nowrap`,width:e.width},children:[e.label,n&&(0,t.jsx)(`span`,{style:{color:`var(--c-amber)`,marginLeft:4},children:v?.dir===`asc`?`↑`:`↓`})]},e.key)}),(0,t.jsx)(`th`,{style:{width:36}})]})}),(0,t.jsx)(`tbody`,{children:O.length===0?(0,t.jsx)(`tr`,{children:(0,t.jsx)(`td`,{colSpan:r.length+(s?2:1)+ +!!_,style:{padding:40,textAlign:`center`,color:`var(--c-text-subtle)`,fontSize:12},children:d})}):O.map((n,i)=>{let a=A(n),o=E.has(a),c=S.has(a);return(0,t.jsxs)(e.Fragment,{children:[(0,t.jsxs)(`tr`,{onClick:()=>{_&&w(a),u?.(n)},style:{borderTop:i>0?`1px solid var(--color-neutral-100)`:`none`,background:o?`#fff8e5`:`var(--c-surface)`,cursor:u||_?`pointer`:`default`,transition:`background 120ms`},onMouseEnter:e=>{o||(e.currentTarget.style.background=`var(--c-elevated)`)},onMouseLeave:e=>{o||(e.currentTarget.style.background=`var(--c-surface)`)},children:[_&&(0,t.jsx)(`td`,{style:{padding:`11px 6px 11px 14px`,width:28,color:`var(--c-text-subtle)`},children:(0,t.jsx)(`span`,{style:{display:`inline-block`,transform:c?`rotate(90deg)`:`rotate(0deg)`,transition:`transform 140ms`,fontSize:12},children:`›`})}),s&&(0,t.jsx)(`td`,{style:{padding:`11px 14px`},children:(0,t.jsx)(`input`,{type:`checkbox`,checked:o,onChange:()=>N(a),onClick:e=>e.stopPropagation(),style:{accentColor:`var(--c-amber)`,cursor:`pointer`}})}),r.map(e=>(0,t.jsx)(`td`,{style:{padding:`11px 14px`,color:`var(--c-text)`},children:e.render?e.render(n):String(n[e.key]??``)},e.key)),(0,t.jsx)(`td`,{style:{padding:`11px 14px`,color:`var(--c-text-subtle)`,fontSize:16,textAlign:`right`}})]}),_&&c&&(0,t.jsx)(`tr`,{style:{background:`var(--c-elevated)`,borderTop:`1px solid var(--color-neutral-100)`},children:(0,t.jsx)(`td`,{colSpan:r.length+(s?2:1)+1,style:{padding:`14px 20px 18px`},children:_(n)})})]},a)})})]})}),(F!==void 0||R>0)&&(0,t.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,marginTop:10,fontSize:11.5,color:`var(--c-text-secondary)`},children:[(0,t.jsxs)(`span`,{children:[L,` of `,R]}),(0,t.jsx)(`div`,{style:{flex:1}}),F!==void 0&&h&&F>1&&(0,t.jsxs)(`div`,{style:{display:`flex`,gap:4},children:[(0,t.jsx)(i,{label:`‹`,disabled:I<=1,onClick:()=>h(I-1)}),Array.from({length:F},(e,t)=>t+1).map(e=>(0,t.jsx)(i,{label:String(e),active:e===I,onClick:()=>h(e)},e)),(0,t.jsx)(i,{label:`›`,disabled:I>=F,onClick:()=>h(I+1)})]})]}),s&&E.size>0&&g&&(0,t.jsxs)(`div`,{style:{position:`sticky`,bottom:12,marginTop:12,background:`var(--c-contrast)`,color:`#fff`,borderRadius:10,padding:`10px 14px`,display:`flex`,alignItems:`center`,gap:12,boxShadow:`0 8px 24px rgba(47,56,67,0.28)`},children:[(0,t.jsxs)(`span`,{style:{fontSize:12.5,fontWeight:600},children:[E.size,` selected`]}),(0,t.jsx)(`div`,{style:{flex:1}}),g(E,()=>D(new Set)),(0,t.jsx)(`button`,{onClick:()=>D(new Set),style:{background:`transparent`,color:`rgba(255,255,255,0.75)`,border:`none`,padding:`5px 8px`,fontSize:12,cursor:`pointer`,fontFamily:`var(--font-sans)`},children:`Cancel`})]})]})}function i({label:e,active:n,disabled:r,onClick:i}){return(0,t.jsx)(`button`,{onClick:i,disabled:r,style:{padding:`4px 10px`,border:`1px solid ${n?`var(--c-contrast)`:`var(--c-border)`}`,background:n?`var(--c-contrast)`:`var(--c-surface)`,color:n?`#fff`:r?`var(--c-text-muted)`:`var(--c-text-secondary)`,borderRadius:5,fontSize:11.5,cursor:r?`default`:`pointer`,fontFamily:`var(--font-sans)`},children:e})}exports.Table=r;
+//# sourceMappingURL=index10.cjs.map

package/dist/index10.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index10.cjs","names":[],"sources":["../src/components/Table.tsx"],"sourcesContent":["import { Fragment, useState, type ReactNode } from 'react'\n\nexport interface TableColumn<T> {\n  key:       string\n  label:     string\n  sortable?: boolean\n  width?:    number | string\n  render?:   (row: T) => ReactNode\n}\n\ninterface TableProps<T extends Record<string, unknown>> {\n  columns:            TableColumn<T>[]\n  data:               T[]\n  keyField:           keyof T\n  selectable?:        boolean\n  selected?:          Set<string>\n  onSelectionChange?: (next: Set<string>) => void\n  onRowClick?:        (row: T) => void\n  emptyMessage?:      string\n  // pagination\n  totalCount?:        number\n  page?:              number\n  pageSize?:          number\n  onPageChange?:      (page: number) => void\n  // bulk action bar (shown when rows are selected)\n  bulkActions?:       (selected: Set<string>, clearSelection: () => void) => ReactNode\n  // expandable row content — when present, a chevron toggle column is shown on the left\n  expandable?:        (row: T) => ReactNode\n}\n\ntype SortDir = 'asc' | 'desc'\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDir): number {\n  const av = a ?? ''\n  const bv = b ?? ''\n  const cmp = String(av).localeCompare(String(bv), undefined, { numeric: true, sensitivity: 'base' })\n  return dir === 'asc' ? cmp : -cmp\n}\n\nexport function Table<T extends Record<string, unknown>>({\n  columns,\n  data,\n  keyField,\n  selectable = false,\n  selected: externalSelected,\n  onSelectionChange,\n  onRowClick,\n  emptyMessage = 'No results.',\n  totalCount,\n  page,\n  pageSize,\n  onPageChange,\n  bulkActions,\n  expandable,\n}: TableProps<T>) {\n  const [internalSort, setInternalSort] = useState<{ key: string; dir: SortDir } | null>(null)\n  const [internalSelected, setInternalSelected] = useState<Set<string>>(new Set())\n  const [expanded, setExpanded] = useState<Set<string>>(new Set())\n\n  const toggleExpanded = (id: string) => {\n    setExpanded(prev => {\n      const next = new Set(prev)\n      next.has(id) ? next.delete(id) : next.add(id)\n      return next\n    })\n  }\n\n  const controlled = externalSelected !== undefined\n  const sel = controlled ? externalSelected : internalSelected\n  const setSel = (next: Set<string>) => {\n    if (!controlled) setInternalSelected(next)\n    onSelectionChange?.(next)\n  }\n\n  // Sort\n  const sorted = internalSort\n    ? [...data].sort((a, b) => compareValues(a[internalSort.key], b[internalSort.key], internalSort.dir))\n    : data\n\n  const toggleSort = (key: string) => {\n    setInternalSort(prev =>\n      prev?.key === key\n        ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' }\n        : { key, dir: 'asc' }\n    )\n  }\n\n  // Selection helpers\n  const rowKey = (row: T) => String(row[keyField])\n  const allSelected = sorted.length > 0 && sorted.every(r => sel.has(rowKey(r)))\n  const someSelected = sorted.some(r => sel.has(rowKey(r))) && !allSelected\n\n  const toggleRow = (id: string) => {\n    const next = new Set(sel)\n    next.has(id) ? next.delete(id) : next.add(id)\n    setSel(next)\n  }\n\n  const toggleAll = () => {\n    setSel(allSelected ? new Set() : new Set(sorted.map(rowKey)))\n  }\n\n  // Pagination\n  const totalPages = totalCount !== undefined && pageSize ? Math.ceil(totalCount / pageSize) : undefined\n  const currentPage = page ?? 1\n  const shownCount = data.length\n  const total = totalCount ?? data.length\n\n  return (\n    <div>\n      {/* Table container */}\n      <div style={{ border: '1px solid var(--c-border)', borderRadius: 10, overflow: 'hidden' }}>\n        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, fontFamily: 'var(--font-sans)' }}>\n          <thead>\n            <tr style={{ background: 'var(--c-elevated)', borderBottom: '1px solid var(--c-border)' }}>\n              {expandable && <th style={{ padding: '10px 6px 10px 14px', width: 28 }} />}\n              {selectable && (\n                <th style={{ padding: '10px 14px', width: 36 }}>\n                  <input\n                    type=\"checkbox\"\n                    checked={allSelected}\n                    ref={el => { if (el) el.indeterminate = someSelected }}\n                    onChange={toggleAll}\n                    style={{ accentColor: 'var(--c-contrast)', cursor: 'pointer' }}\n                  />\n                </th>\n              )}\n              {columns.map(col => {\n                const isActive = internalSort?.key === col.key\n                return (\n                  <th\n                    key={col.key}\n                    onClick={col.sortable ? () => toggleSort(col.key) : undefined}\n                    style={{\n                      padding:       '10px 14px',\n                      textAlign:     'left',\n                      fontWeight:    700,\n                      fontSize:      10.5,\n                      textTransform: 'uppercase',\n                      letterSpacing: '0.05em',\n                      color:         isActive ? 'var(--c-text)' : 'var(--c-text-subtle)',\n                      cursor:        col.sortable ? 'pointer' : 'default',\n                      userSelect:    'none',\n                      whiteSpace:    'nowrap',\n                      width:         col.width,\n                    }}\n                  >\n                    {col.label}\n                    {isActive && (\n                      <span style={{ color: 'var(--c-amber)', marginLeft: 4 }}>\n                        {internalSort?.dir === 'asc' ? '↑' : '↓'}\n                      </span>\n                    )}\n                  </th>\n                )\n              })}\n              <th style={{ width: 36 }} />\n            </tr>\n          </thead>\n          <tbody>\n            {sorted.length === 0 ? (\n              <tr>\n                <td\n                  colSpan={columns.length + (selectable ? 2 : 1) + (expandable ? 1 : 0)}\n                  style={{ padding: 40, textAlign: 'center', color: 'var(--c-text-subtle)', fontSize: 12 }}\n                >\n                  {emptyMessage}\n                </td>\n              </tr>\n            ) : (\n              sorted.map((row, i) => {\n                const id = rowKey(row)\n                const isSelected = sel.has(id)\n                const isExpanded = expanded.has(id)\n                return (\n                  <Fragment key={id}>\n                    <tr\n                      onClick={() => {\n                        if (expandable) toggleExpanded(id)\n                        onRowClick?.(row)\n                      }}\n                      style={{\n                        borderTop:  i > 0 ? '1px solid var(--color-neutral-100)' : 'none',\n                        background: isSelected ? '#fff8e5' : 'var(--c-surface)',\n                        cursor:     (onRowClick || expandable) ? 'pointer' : 'default',\n                        transition: 'background 120ms',\n                      }}\n                      onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--c-elevated)' }}\n                      onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'var(--c-surface)' }}\n                    >\n                      {expandable && (\n                        <td style={{ padding: '11px 6px 11px 14px', width: 28, color: 'var(--c-text-subtle)' }}>\n                          <span style={{\n                            display: 'inline-block',\n                            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',\n                            transition: 'transform 140ms',\n                            fontSize: 12,\n                          }}>›</span>\n                        </td>\n                      )}\n                      {selectable && (\n                        <td style={{ padding: '11px 14px' }}>\n                          <input\n                            type=\"checkbox\"\n                            checked={isSelected}\n                            onChange={() => toggleRow(id)}\n                            onClick={e => e.stopPropagation()}\n                            style={{ accentColor: 'var(--c-amber)', cursor: 'pointer' }}\n                          />\n                        </td>\n                      )}\n                      {columns.map(col => (\n                        <td key={col.key} style={{ padding: '11px 14px', color: 'var(--c-text)' }}>\n                          {col.render ? col.render(row) : String(row[col.key] ?? '')}\n                        </td>\n                      ))}\n                      {/* Row action slot — empty by default, consumers can use onRowClick */}\n                      <td style={{ padding: '11px 14px', color: 'var(--c-text-subtle)', fontSize: 16, textAlign: 'right' }} />\n                    </tr>\n                    {expandable && isExpanded && (\n                      <tr style={{ background: 'var(--c-elevated)', borderTop: '1px solid var(--color-neutral-100)' }}>\n                        <td colSpan={columns.length + (selectable ? 2 : 1) + 1} style={{ padding: '14px 20px 18px' }}>\n                          {expandable(row)}\n                        </td>\n                      </tr>\n                    )}\n                  </Fragment>\n                )\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Pagination footer */}\n      {(totalPages !== undefined || total > 0) && (\n        <div style={{ display: 'flex', alignItems: 'center', marginTop: 10, fontSize: 11.5, color: 'var(--c-text-secondary)' }}>\n          <span>{shownCount} of {total}</span>\n          <div style={{ flex: 1 }} />\n          {totalPages !== undefined && onPageChange && totalPages > 1 && (\n            <div style={{ display: 'flex', gap: 4 }}>\n              <PaginationBtn\n                label=\"‹\"\n                disabled={currentPage <= 1}\n                onClick={() => onPageChange(currentPage - 1)}\n              />\n              {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (\n                <PaginationBtn\n                  key={p}\n                  label={String(p)}\n                  active={p === currentPage}\n                  onClick={() => onPageChange(p)}\n                />\n              ))}\n              <PaginationBtn\n                label=\"›\"\n                disabled={currentPage >= totalPages}\n                onClick={() => onPageChange(currentPage + 1)}\n              />\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Bulk action bar */}\n      {selectable && sel.size > 0 && bulkActions && (\n        <div style={{\n          position:   'sticky',\n          bottom:     12,\n          marginTop:  12,\n          background: 'var(--c-contrast)',\n          color:      '#fff',\n          borderRadius: 10,\n          padding:    '10px 14px',\n          display:    'flex',\n          alignItems: 'center',\n          gap:        12,\n          boxShadow:  '0 8px 24px rgba(47,56,67,0.28)',\n        }}>\n          <span style={{ fontSize: 12.5, fontWeight: 600 }}>{sel.size} selected</span>\n          <div style={{ flex: 1 }} />\n          {bulkActions(sel, () => setSel(new Set()))}\n          <button\n            onClick={() => setSel(new Set())}\n            style={{ background: 'transparent', color: 'rgba(255,255,255,0.75)', border: 'none', padding: '5px 8px', fontSize: 12, cursor: 'pointer', fontFamily: 'var(--font-sans)' }}\n          >\n            Cancel\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction PaginationBtn({ label, active, disabled, onClick }: { label: string; active?: boolean; disabled?: boolean; onClick: () => void }) {\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        padding:    '4px 10px',\n        border:     `1px solid ${active ? 'var(--c-contrast)' : 'var(--c-border)'}`,\n        background: active ? 'var(--c-contrast)' : 'var(--c-surface)',\n        color:      active ? '#fff' : disabled ? 'var(--c-text-muted)' : 'var(--c-text-secondary)',\n        borderRadius: 5,\n        fontSize:   11.5,\n        cursor:     disabled ? 'default' : 'pointer',\n        fontFamily: 'var(--font-sans)',\n      }}\n    >\n      {label}\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/index10.js

@@ -0,0 +1,289 @@
+import { Fragment as e, useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Table.tsx
+function i(e, t, n) {
+	let r = e ?? "", i = t ?? "", a = String(r).localeCompare(String(i), void 0, {
+		numeric: !0,
+		sensitivity: "base"
+	});
+	return n === "asc" ? a : -a;
+}
+function a({ columns: a, data: s, keyField: c, selectable: l = !1, selected: u, onSelectionChange: d, onRowClick: f, emptyMessage: p = "No results.", totalCount: m, page: h, pageSize: g, onPageChange: _, bulkActions: v, expandable: y }) {
+	let [b, x] = t(null), [S, C] = t(/* @__PURE__ */ new Set()), [w, T] = t(/* @__PURE__ */ new Set()), E = (e) => {
+		T((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, D = u !== void 0, O = D ? u : S, k = (e) => {
+		D || C(e), d?.(e);
+	}, A = b ? [...s].sort((e, t) => i(e[b.key], t[b.key], b.dir)) : s, j = (e) => {
+		x((t) => t?.key === e ? {
+			key: e,
+			dir: t.dir === "asc" ? "desc" : "asc"
+		} : {
+			key: e,
+			dir: "asc"
+		});
+	}, M = (e) => String(e[c]), N = A.length > 0 && A.every((e) => O.has(M(e))), P = A.some((e) => O.has(M(e))) && !N, F = (e) => {
+		let t = new Set(O);
+		t.has(e) ? t.delete(e) : t.add(e), k(t);
+	}, I = () => {
+		k(N ? /* @__PURE__ */ new Set() : new Set(A.map(M)));
+	}, L = m !== void 0 && g ? Math.ceil(m / g) : void 0, R = h ?? 1, z = s.length, B = m ?? s.length;
+	return /* @__PURE__ */ r("div", { children: [
+		/* @__PURE__ */ n("div", {
+			style: {
+				border: "1px solid var(--c-border)",
+				borderRadius: 10,
+				overflow: "hidden"
+			},
+			children: /* @__PURE__ */ r("table", {
+				style: {
+					width: "100%",
+					borderCollapse: "collapse",
+					fontSize: 13,
+					fontFamily: "var(--font-sans)"
+				},
+				children: [/* @__PURE__ */ n("thead", { children: /* @__PURE__ */ r("tr", {
+					style: {
+						background: "var(--c-elevated)",
+						borderBottom: "1px solid var(--c-border)"
+					},
+					children: [
+						y && /* @__PURE__ */ n("th", { style: {
+							padding: "10px 6px 10px 14px",
+							width: 28
+						} }),
+						l && /* @__PURE__ */ n("th", {
+							style: {
+								padding: "10px 14px",
+								width: 36
+							},
+							children: /* @__PURE__ */ n("input", {
+								type: "checkbox",
+								checked: N,
+								ref: (e) => {
+									e && (e.indeterminate = P);
+								},
+								onChange: I,
+								style: {
+									accentColor: "var(--c-contrast)",
+									cursor: "pointer"
+								}
+							})
+						}),
+						a.map((e) => {
+							let t = b?.key === e.key;
+							return /* @__PURE__ */ r("th", {
+								onClick: e.sortable ? () => j(e.key) : void 0,
+								style: {
+									padding: "10px 14px",
+									textAlign: "left",
+									fontWeight: 700,
+									fontSize: 10.5,
+									textTransform: "uppercase",
+									letterSpacing: "0.05em",
+									color: t ? "var(--c-text)" : "var(--c-text-subtle)",
+									cursor: e.sortable ? "pointer" : "default",
+									userSelect: "none",
+									whiteSpace: "nowrap",
+									width: e.width
+								},
+								children: [e.label, t && /* @__PURE__ */ n("span", {
+									style: {
+										color: "var(--c-amber)",
+										marginLeft: 4
+									},
+									children: b?.dir === "asc" ? "↑" : "↓"
+								})]
+							}, e.key);
+						}),
+						/* @__PURE__ */ n("th", { style: { width: 36 } })
+					]
+				}) }), /* @__PURE__ */ n("tbody", { children: A.length === 0 ? /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", {
+					colSpan: a.length + (l ? 2 : 1) + +!!y,
+					style: {
+						padding: 40,
+						textAlign: "center",
+						color: "var(--c-text-subtle)",
+						fontSize: 12
+					},
+					children: p
+				}) }) : A.map((t, i) => {
+					let o = M(t), s = O.has(o), c = w.has(o);
+					return /* @__PURE__ */ r(e, { children: [/* @__PURE__ */ r("tr", {
+						onClick: () => {
+							y && E(o), f?.(t);
+						},
+						style: {
+							borderTop: i > 0 ? "1px solid var(--color-neutral-100)" : "none",
+							background: s ? "#fff8e5" : "var(--c-surface)",
+							cursor: f || y ? "pointer" : "default",
+							transition: "background 120ms"
+						},
+						onMouseEnter: (e) => {
+							s || (e.currentTarget.style.background = "var(--c-elevated)");
+						},
+						onMouseLeave: (e) => {
+							s || (e.currentTarget.style.background = "var(--c-surface)");
+						},
+						children: [
+							y && /* @__PURE__ */ n("td", {
+								style: {
+									padding: "11px 6px 11px 14px",
+									width: 28,
+									color: "var(--c-text-subtle)"
+								},
+								children: /* @__PURE__ */ n("span", {
+									style: {
+										display: "inline-block",
+										transform: c ? "rotate(90deg)" : "rotate(0deg)",
+										transition: "transform 140ms",
+										fontSize: 12
+									},
+									children: "›"
+								})
+							}),
+							l && /* @__PURE__ */ n("td", {
+								style: { padding: "11px 14px" },
+								children: /* @__PURE__ */ n("input", {
+									type: "checkbox",
+									checked: s,
+									onChange: () => F(o),
+									onClick: (e) => e.stopPropagation(),
+									style: {
+										accentColor: "var(--c-amber)",
+										cursor: "pointer"
+									}
+								})
+							}),
+							a.map((e) => /* @__PURE__ */ n("td", {
+								style: {
+									padding: "11px 14px",
+									color: "var(--c-text)"
+								},
+								children: e.render ? e.render(t) : String(t[e.key] ?? "")
+							}, e.key)),
+							/* @__PURE__ */ n("td", { style: {
+								padding: "11px 14px",
+								color: "var(--c-text-subtle)",
+								fontSize: 16,
+								textAlign: "right"
+							} })
+						]
+					}), y && c && /* @__PURE__ */ n("tr", {
+						style: {
+							background: "var(--c-elevated)",
+							borderTop: "1px solid var(--color-neutral-100)"
+						},
+						children: /* @__PURE__ */ n("td", {
+							colSpan: a.length + (l ? 2 : 1) + 1,
+							style: { padding: "14px 20px 18px" },
+							children: y(t)
+						})
+					})] }, o);
+				}) })]
+			})
+		}),
+		(L !== void 0 || B > 0) && /* @__PURE__ */ r("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				marginTop: 10,
+				fontSize: 11.5,
+				color: "var(--c-text-secondary)"
+			},
+			children: [
+				/* @__PURE__ */ r("span", { children: [
+					z,
+					" of ",
+					B
+				] }),
+				/* @__PURE__ */ n("div", { style: { flex: 1 } }),
+				L !== void 0 && _ && L > 1 && /* @__PURE__ */ r("div", {
+					style: {
+						display: "flex",
+						gap: 4
+					},
+					children: [
+						/* @__PURE__ */ n(o, {
+							label: "‹",
+							disabled: R <= 1,
+							onClick: () => _(R - 1)
+						}),
+						Array.from({ length: L }, (e, t) => t + 1).map((e) => /* @__PURE__ */ n(o, {
+							label: String(e),
+							active: e === R,
+							onClick: () => _(e)
+						}, e)),
+						/* @__PURE__ */ n(o, {
+							label: "›",
+							disabled: R >= L,
+							onClick: () => _(R + 1)
+						})
+					]
+				})
+			]
+		}),
+		l && O.size > 0 && v && /* @__PURE__ */ r("div", {
+			style: {
+				position: "sticky",
+				bottom: 12,
+				marginTop: 12,
+				background: "var(--c-contrast)",
+				color: "#fff",
+				borderRadius: 10,
+				padding: "10px 14px",
+				display: "flex",
+				alignItems: "center",
+				gap: 12,
+				boxShadow: "0 8px 24px rgba(47,56,67,0.28)"
+			},
+			children: [
+				/* @__PURE__ */ r("span", {
+					style: {
+						fontSize: 12.5,
+						fontWeight: 600
+					},
+					children: [O.size, " selected"]
+				}),
+				/* @__PURE__ */ n("div", { style: { flex: 1 } }),
+				v(O, () => k(/* @__PURE__ */ new Set())),
+				/* @__PURE__ */ n("button", {
+					onClick: () => k(/* @__PURE__ */ new Set()),
+					style: {
+						background: "transparent",
+						color: "rgba(255,255,255,0.75)",
+						border: "none",
+						padding: "5px 8px",
+						fontSize: 12,
+						cursor: "pointer",
+						fontFamily: "var(--font-sans)"
+					},
+					children: "Cancel"
+				})
+			]
+		})
+	] });
+}
+function o({ label: e, active: t, disabled: r, onClick: i }) {
+	return /* @__PURE__ */ n("button", {
+		onClick: i,
+		disabled: r,
+		style: {
+			padding: "4px 10px",
+			border: `1px solid ${t ? "var(--c-contrast)" : "var(--c-border)"}`,
+			background: t ? "var(--c-contrast)" : "var(--c-surface)",
+			color: t ? "#fff" : r ? "var(--c-text-muted)" : "var(--c-text-secondary)",
+			borderRadius: 5,
+			fontSize: 11.5,
+			cursor: r ? "default" : "pointer",
+			fontFamily: "var(--font-sans)"
+		},
+		children: e
+	});
+}
+//#endregion
+export { a as Table };
+
+//# sourceMappingURL=index10.js.map

package/dist/index10.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index10.js","names":[],"sources":["../src/components/Table.tsx"],"sourcesContent":["import { Fragment, useState, type ReactNode } from 'react'\n\nexport interface TableColumn<T> {\n  key:       string\n  label:     string\n  sortable?: boolean\n  width?:    number | string\n  render?:   (row: T) => ReactNode\n}\n\ninterface TableProps<T extends Record<string, unknown>> {\n  columns:            TableColumn<T>[]\n  data:               T[]\n  keyField:           keyof T\n  selectable?:        boolean\n  selected?:          Set<string>\n  onSelectionChange?: (next: Set<string>) => void\n  onRowClick?:        (row: T) => void\n  emptyMessage?:      string\n  // pagination\n  totalCount?:        number\n  page?:              number\n  pageSize?:          number\n  onPageChange?:      (page: number) => void\n  // bulk action bar (shown when rows are selected)\n  bulkActions?:       (selected: Set<string>, clearSelection: () => void) => ReactNode\n  // expandable row content — when present, a chevron toggle column is shown on the left\n  expandable?:        (row: T) => ReactNode\n}\n\ntype SortDir = 'asc' | 'desc'\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDir): number {\n  const av = a ?? ''\n  const bv = b ?? ''\n  const cmp = String(av).localeCompare(String(bv), undefined, { numeric: true, sensitivity: 'base' })\n  return dir === 'asc' ? cmp : -cmp\n}\n\nexport function Table<T extends Record<string, unknown>>({\n  columns,\n  data,\n  keyField,\n  selectable = false,\n  selected: externalSelected,\n  onSelectionChange,\n  onRowClick,\n  emptyMessage = 'No results.',\n  totalCount,\n  page,\n  pageSize,\n  onPageChange,\n  bulkActions,\n  expandable,\n}: TableProps<T>) {\n  const [internalSort, setInternalSort] = useState<{ key: string; dir: SortDir } | null>(null)\n  const [internalSelected, setInternalSelected] = useState<Set<string>>(new Set())\n  const [expanded, setExpanded] = useState<Set<string>>(new Set())\n\n  const toggleExpanded = (id: string) => {\n    setExpanded(prev => {\n      const next = new Set(prev)\n      next.has(id) ? next.delete(id) : next.add(id)\n      return next\n    })\n  }\n\n  const controlled = externalSelected !== undefined\n  const sel = controlled ? externalSelected : internalSelected\n  const setSel = (next: Set<string>) => {\n    if (!controlled) setInternalSelected(next)\n    onSelectionChange?.(next)\n  }\n\n  // Sort\n  const sorted = internalSort\n    ? [...data].sort((a, b) => compareValues(a[internalSort.key], b[internalSort.key], internalSort.dir))\n    : data\n\n  const toggleSort = (key: string) => {\n    setInternalSort(prev =>\n      prev?.key === key\n        ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' }\n        : { key, dir: 'asc' }\n    )\n  }\n\n  // Selection helpers\n  const rowKey = (row: T) => String(row[keyField])\n  const allSelected = sorted.length > 0 && sorted.every(r => sel.has(rowKey(r)))\n  const someSelected = sorted.some(r => sel.has(rowKey(r))) && !allSelected\n\n  const toggleRow = (id: string) => {\n    const next = new Set(sel)\n    next.has(id) ? next.delete(id) : next.add(id)\n    setSel(next)\n  }\n\n  const toggleAll = () => {\n    setSel(allSelected ? new Set() : new Set(sorted.map(rowKey)))\n  }\n\n  // Pagination\n  const totalPages = totalCount !== undefined && pageSize ? Math.ceil(totalCount / pageSize) : undefined\n  const currentPage = page ?? 1\n  const shownCount = data.length\n  const total = totalCount ?? data.length\n\n  return (\n    <div>\n      {/* Table container */}\n      <div style={{ border: '1px solid var(--c-border)', borderRadius: 10, overflow: 'hidden' }}>\n        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, fontFamily: 'var(--font-sans)' }}>\n          <thead>\n            <tr style={{ background: 'var(--c-elevated)', borderBottom: '1px solid var(--c-border)' }}>\n              {expandable && <th style={{ padding: '10px 6px 10px 14px', width: 28 }} />}\n              {selectable && (\n                <th style={{ padding: '10px 14px', width: 36 }}>\n                  <input\n                    type=\"checkbox\"\n                    checked={allSelected}\n                    ref={el => { if (el) el.indeterminate = someSelected }}\n                    onChange={toggleAll}\n                    style={{ accentColor: 'var(--c-contrast)', cursor: 'pointer' }}\n                  />\n                </th>\n              )}\n              {columns.map(col => {\n                const isActive = internalSort?.key === col.key\n                return (\n                  <th\n                    key={col.key}\n                    onClick={col.sortable ? () => toggleSort(col.key) : undefined}\n                    style={{\n                      padding:       '10px 14px',\n                      textAlign:     'left',\n                      fontWeight:    700,\n                      fontSize:      10.5,\n                      textTransform: 'uppercase',\n                      letterSpacing: '0.05em',\n                      color:         isActive ? 'var(--c-text)' : 'var(--c-text-subtle)',\n                      cursor:        col.sortable ? 'pointer' : 'default',\n                      userSelect:    'none',\n                      whiteSpace:    'nowrap',\n                      width:         col.width,\n                    }}\n                  >\n                    {col.label}\n                    {isActive && (\n                      <span style={{ color: 'var(--c-amber)', marginLeft: 4 }}>\n                        {internalSort?.dir === 'asc' ? '↑' : '↓'}\n                      </span>\n                    )}\n                  </th>\n                )\n              })}\n              <th style={{ width: 36 }} />\n            </tr>\n          </thead>\n          <tbody>\n            {sorted.length === 0 ? (\n              <tr>\n                <td\n                  colSpan={columns.length + (selectable ? 2 : 1) + (expandable ? 1 : 0)}\n                  style={{ padding: 40, textAlign: 'center', color: 'var(--c-text-subtle)', fontSize: 12 }}\n                >\n                  {emptyMessage}\n                </td>\n              </tr>\n            ) : (\n              sorted.map((row, i) => {\n                const id = rowKey(row)\n                const isSelected = sel.has(id)\n                const isExpanded = expanded.has(id)\n                return (\n                  <Fragment key={id}>\n                    <tr\n                      onClick={() => {\n                        if (expandable) toggleExpanded(id)\n                        onRowClick?.(row)\n                      }}\n                      style={{\n                        borderTop:  i > 0 ? '1px solid var(--color-neutral-100)' : 'none',\n                        background: isSelected ? '#fff8e5' : 'var(--c-surface)',\n                        cursor:     (onRowClick || expandable) ? 'pointer' : 'default',\n                        transition: 'background 120ms',\n                      }}\n                      onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--c-elevated)' }}\n                      onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'var(--c-surface)' }}\n                    >\n                      {expandable && (\n                        <td style={{ padding: '11px 6px 11px 14px', width: 28, color: 'var(--c-text-subtle)' }}>\n                          <span style={{\n                            display: 'inline-block',\n                            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',\n                            transition: 'transform 140ms',\n                            fontSize: 12,\n                          }}>›</span>\n                        </td>\n                      )}\n                      {selectable && (\n                        <td style={{ padding: '11px 14px' }}>\n                          <input\n                            type=\"checkbox\"\n                            checked={isSelected}\n                            onChange={() => toggleRow(id)}\n                            onClick={e => e.stopPropagation()}\n                            style={{ accentColor: 'var(--c-amber)', cursor: 'pointer' }}\n                          />\n                        </td>\n                      )}\n                      {columns.map(col => (\n                        <td key={col.key} style={{ padding: '11px 14px', color: 'var(--c-text)' }}>\n                          {col.render ? col.render(row) : String(row[col.key] ?? '')}\n                        </td>\n                      ))}\n                      {/* Row action slot — empty by default, consumers can use onRowClick */}\n                      <td style={{ padding: '11px 14px', color: 'var(--c-text-subtle)', fontSize: 16, textAlign: 'right' }} />\n                    </tr>\n                    {expandable && isExpanded && (\n                      <tr style={{ background: 'var(--c-elevated)', borderTop: '1px solid var(--color-neutral-100)' }}>\n                        <td colSpan={columns.length + (selectable ? 2 : 1) + 1} style={{ padding: '14px 20px 18px' }}>\n                          {expandable(row)}\n                        </td>\n                      </tr>\n                    )}\n                  </Fragment>\n                )\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Pagination footer */}\n      {(totalPages !== undefined || total > 0) && (\n        <div style={{ display: 'flex', alignItems: 'center', marginTop: 10, fontSize: 11.5, color: 'var(--c-text-secondary)' }}>\n          <span>{shownCount} of {total}</span>\n          <div style={{ flex: 1 }} />\n          {totalPages !== undefined && onPageChange && totalPages > 1 && (\n            <div style={{ display: 'flex', gap: 4 }}>\n              <PaginationBtn\n                label=\"‹\"\n                disabled={currentPage <= 1}\n                onClick={() => onPageChange(currentPage - 1)}\n              />\n              {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (\n                <PaginationBtn\n                  key={p}\n                  label={String(p)}\n                  active={p === currentPage}\n                  onClick={() => onPageChange(p)}\n                />\n              ))}\n              <PaginationBtn\n                label=\"›\"\n                disabled={currentPage >= totalPages}\n                onClick={() => onPageChange(currentPage + 1)}\n              />\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Bulk action bar */}\n      {selectable && sel.size > 0 && bulkActions && (\n        <div style={{\n          position:   'sticky',\n          bottom:     12,\n          marginTop:  12,\n          background: 'var(--c-contrast)',\n          color:      '#fff',\n          borderRadius: 10,\n          padding:    '10px 14px',\n          display:    'flex',\n          alignItems: 'center',\n          gap:        12,\n          boxShadow:  '0 8px 24px rgba(47,56,67,0.28)',\n        }}>\n          <span style={{ fontSize: 12.5, fontWeight: 600 }}>{sel.size} selected</span>\n          <div style={{ flex: 1 }} />\n          {bulkActions(sel, () => setSel(new Set()))}\n          <button\n            onClick={() => setSel(new Set())}\n            style={{ background: 'transparent', color: 'rgba(255,255,255,0.75)', border: 'none', padding: '5px 8px', fontSize: 12, cursor: 'pointer', fontFamily: 'var(--font-sans)' }}\n          >\n            Cancel\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction PaginationBtn({ label, active, disabled, onClick }: { label: string; active?: boolean; disabled?: boolean; onClick: () => void }) {\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        padding:    '4px 10px',\n        border:     `1px solid ${active ? 'var(--c-contrast)' : 'var(--c-border)'}`,\n        background: active ? 'var(--c-contrast)' : 'var(--c-surface)',\n        color:      active ? '#fff' : disabled ? 'var(--c-text-muted)' : 'var(--c-text-secondary)',\n        borderRadius: 5,\n        fontSize:   11.5,\n        cursor:     disabled ? 'default' : 'pointer',\n        fontFamily: 'var(--font-sans)',\n      }}\n    >\n      {label}\n    </button>\n  )\n}\n"],"mappings":"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"}

package/dist/index11.cjs

@@ -0,0 +1,2 @@
+let e=require(`react/jsx-runtime`);function t({icon:t,title:n,body:r,action:i}){return(0,e.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:`center`,padding:`56px 24px`,textAlign:`center`,animation:`modalIn 480ms ease`},children:[t&&(0,e.jsx)(`span`,{style:{color:`var(--c-text-muted)`,display:`inline-flex`,marginBottom:16},children:t}),(0,e.jsx)(`div`,{style:{fontFamily:`var(--font-sans)`,fontSize:15,fontWeight:600,color:`var(--c-text)`,marginBottom:r?6:i?20:0,letterSpacing:`-0.01em`},children:n}),r&&(0,e.jsx)(`p`,{style:{fontFamily:`var(--font-sans)`,fontSize:13,color:`var(--c-text-secondary)`,lineHeight:1.6,maxWidth:360,margin:`0 0 ${i?20:0}px`},children:r}),i&&(0,e.jsx)(`div`,{children:i})]})}exports.EmptyState=t;
+//# sourceMappingURL=index11.cjs.map

package/dist/index11.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index11.cjs","names":[],"sources":["../src/components/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\ninterface EmptyStateProps {\n  icon?:     ReactNode\n  title:     string\n  body?:     string\n  action?:   ReactNode\n}\n\nexport function EmptyState({ icon, title, body, action }: EmptyStateProps) {\n  return (\n    <div style={{\n      display:        'flex',\n      flexDirection:  'column',\n      alignItems:     'center',\n      justifyContent: 'center',\n      padding:        '56px 24px',\n      textAlign:      'center',\n      animation:      'modalIn 480ms ease',\n    }}>\n      {icon && (\n        <span style={{\n          color:        'var(--c-text-muted)',\n          display:      'inline-flex',\n          marginBottom: 16,\n        }}>\n          {icon}\n        </span>\n      )}\n\n      <div style={{\n        fontFamily:    'var(--font-sans)',\n        fontSize:      15,\n        fontWeight:    600,\n        color:         'var(--c-text)',\n        marginBottom:  body ? 6 : action ? 20 : 0,\n        letterSpacing: '-0.01em',\n      }}>\n        {title}\n      </div>\n\n      {body && (\n        <p style={{\n          fontFamily:   'var(--font-sans)',\n          fontSize:     13,\n          color:        'var(--c-text-secondary)',\n          lineHeight:   1.6,\n          maxWidth:     360,\n          margin:       `0 0 ${action ? 20 : 0}px`,\n        }}>\n          {body}\n        </p>\n      )}\n\n      {action && <div>{action}</div>}\n    </div>\n  )\n}\n"],"mappings":"mCASA,SAAgB,EAAW,CAAE,OAAM,QAAO,OAAM,UAA2B,CACzE,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,MAAO,CACV,QAAgB,OAChB,cAAgB,SAChB,WAAgB,SAChB,eAAgB,SAChB,QAAgB,YAChB,UAAgB,SAChB,UAAgB,qBACjB,UARD,CASG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,MAAO,CACX,MAAc,sBACd,QAAc,cACd,aAAc,GACf,UACE,EACI,CAAA,EAGT,EAAA,EAAA,KAAC,MAAD,CAAK,MAAO,CACV,WAAe,mBACf,SAAe,GACf,WAAe,IACf,MAAe,gBACf,aAAe,EAAO,EAAI,EAAS,GAAK,EACxC,cAAe,UAChB,UACE,EACG,CAAA,CAEL,IACC,EAAA,EAAA,KAAC,IAAD,CAAG,MAAO,CACR,WAAc,mBACd,SAAc,GACd,MAAc,0BACd,WAAc,IACd,SAAc,IACd,OAAc,OAAO,EAAS,GAAK,EAAE,IACtC,UACE,EACC,CAAA,CAGL,IAAU,EAAA,EAAA,KAAC,MAAD,CAAA,SAAM,EAAa,CAAA,CAC1B"}

package/dist/index11.js

@@ -0,0 +1,52 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/EmptyState.tsx
+function n({ icon: n, title: r, body: i, action: a }) {
+	return /* @__PURE__ */ t("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			padding: "56px 24px",
+			textAlign: "center",
+			animation: "modalIn 480ms ease"
+		},
+		children: [
+			n && /* @__PURE__ */ e("span", {
+				style: {
+					color: "var(--c-text-muted)",
+					display: "inline-flex",
+					marginBottom: 16
+				},
+				children: n
+			}),
+			/* @__PURE__ */ e("div", {
+				style: {
+					fontFamily: "var(--font-sans)",
+					fontSize: 15,
+					fontWeight: 600,
+					color: "var(--c-text)",
+					marginBottom: i ? 6 : a ? 20 : 0,
+					letterSpacing: "-0.01em"
+				},
+				children: r
+			}),
+			i && /* @__PURE__ */ e("p", {
+				style: {
+					fontFamily: "var(--font-sans)",
+					fontSize: 13,
+					color: "var(--c-text-secondary)",
+					lineHeight: 1.6,
+					maxWidth: 360,
+					margin: `0 0 ${a ? 20 : 0}px`
+				},
+				children: i
+			}),
+			a && /* @__PURE__ */ e("div", { children: a })
+		]
+	});
+}
+//#endregion
+export { n as EmptyState };
+
+//# sourceMappingURL=index11.js.map

package/dist/index11.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index11.js","names":[],"sources":["../src/components/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\ninterface EmptyStateProps {\n  icon?:     ReactNode\n  title:     string\n  body?:     string\n  action?:   ReactNode\n}\n\nexport function EmptyState({ icon, title, body, action }: EmptyStateProps) {\n  return (\n    <div style={{\n      display:        'flex',\n      flexDirection:  'column',\n      alignItems:     'center',\n      justifyContent: 'center',\n      padding:        '56px 24px',\n      textAlign:      'center',\n      animation:      'modalIn 480ms ease',\n    }}>\n      {icon && (\n        <span style={{\n          color:        'var(--c-text-muted)',\n          display:      'inline-flex',\n          marginBottom: 16,\n        }}>\n          {icon}\n        </span>\n      )}\n\n      <div style={{\n        fontFamily:    'var(--font-sans)',\n        fontSize:      15,\n        fontWeight:    600,\n        color:         'var(--c-text)',\n        marginBottom:  body ? 6 : action ? 20 : 0,\n        letterSpacing: '-0.01em',\n      }}>\n        {title}\n      </div>\n\n      {body && (\n        <p style={{\n          fontFamily:   'var(--font-sans)',\n          fontSize:     13,\n          color:        'var(--c-text-secondary)',\n          lineHeight:   1.6,\n          maxWidth:     360,\n          margin:       `0 0 ${action ? 20 : 0}px`,\n        }}>\n          {body}\n        </p>\n      )}\n\n      {action && <div>{action}</div>}\n    </div>\n  )\n}\n"],"mappings":";;AASA,SAAgB,EAAW,EAAE,SAAM,UAAO,SAAM,aAA2B;AACzE,QACE,kBAAC,OAAD;EAAK,OAAO;GACV,SAAgB;GAChB,eAAgB;GAChB,YAAgB;GAChB,gBAAgB;GAChB,SAAgB;GAChB,WAAgB;GAChB,WAAgB;GACjB;YARD;GASG,KACC,kBAAC,QAAD;IAAM,OAAO;KACX,OAAc;KACd,SAAc;KACd,cAAc;KACf;cACE;IACI,CAAA;GAGT,kBAAC,OAAD;IAAK,OAAO;KACV,YAAe;KACf,UAAe;KACf,YAAe;KACf,OAAe;KACf,cAAe,IAAO,IAAI,IAAS,KAAK;KACxC,eAAe;KAChB;cACE;IACG,CAAA;GAEL,KACC,kBAAC,KAAD;IAAG,OAAO;KACR,YAAc;KACd,UAAc;KACd,OAAc;KACd,YAAc;KACd,UAAc;KACd,QAAc,OAAO,IAAS,KAAK,EAAE;KACtC;cACE;IACC,CAAA;GAGL,KAAU,kBAAC,OAAD,EAAA,UAAM,GAAa,CAAA;GAC1B"}

package/dist/index12.cjs

@@ -0,0 +1,2 @@
+let e=require(`react/jsx-runtime`);function t({width:t=`100%`,height:n=12,radius:r=4,style:i}){return(0,e.jsx)(`span`,{style:{display:`inline-block`,width:t,height:n,borderRadius:r,background:`linear-gradient(90deg, var(--color-neutral-100) 0%, #f9f4f3 50%, var(--color-neutral-100) 100%)`,backgroundSize:`200% 100%`,animation:`skelShimmer 1.4s ease-in-out infinite`,flexShrink:0,...i}})}function n({cols:n=4}){let r=[`60%`,`45%`,`30%`,`20%`,`50%`,`35%`];return(0,e.jsx)(`div`,{style:{display:`flex`,alignItems:`center`,gap:16,padding:`11px 14px`,borderBottom:`1px solid var(--color-neutral-100)`},children:Array.from({length:n},(n,i)=>(0,e.jsx)(`div`,{style:{flex:i===0?`1.5`:`1`},children:(0,e.jsx)(t,{width:r[i%r.length],height:10})},i))})}function r({rows:r=5,cols:i=4}){return(0,e.jsxs)(`div`,{style:{border:`1px solid var(--c-border)`,borderRadius:10,overflow:`hidden`},children:[(0,e.jsx)(`div`,{style:{display:`flex`,gap:16,padding:`10px 14px`,background:`var(--c-elevated)`,borderBottom:`1px solid var(--c-border)`},children:Array.from({length:i},(n,r)=>(0,e.jsx)(`div`,{style:{flex:r===0?`1.5`:`1`},children:(0,e.jsx)(t,{width:`50%`,height:8})},r))}),Array.from({length:r},(t,r)=>(0,e.jsx)(n,{cols:i},r))]})}function i({lines:n=3,lastWidth:r=`60%`}){return(0,e.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:8},children:Array.from({length:n},(i,a)=>(0,e.jsx)(t,{width:a===n-1?r:`100%`,height:10},a))})}function a(){return(0,e.jsxs)(`div`,{style:{background:`var(--c-surface)`,border:`1px solid var(--c-border)`,borderRadius:`var(--radius-lg)`,padding:20,display:`flex`,flexDirection:`column`,gap:12},children:[(0,e.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:10},children:[(0,e.jsx)(t,{width:32,height:32,radius:8}),(0,e.jsxs)(`div`,{style:{flex:1,display:`flex`,flexDirection:`column`,gap:6},children:[(0,e.jsx)(t,{width:`50%`,height:11}),(0,e.jsx)(t,{width:`30%`,height:9})]}),(0,e.jsx)(t,{width:54,height:20,radius:999})]}),(0,e.jsx)(i,{lines:2,lastWidth:`70%`})]})}exports.Skeleton=t,exports.SkeletonCard=a,exports.SkeletonTable=r,exports.SkeletonTableRow=n,exports.SkeletonText=i;
+//# sourceMappingURL=index12.cjs.map

package/dist/index12.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index12.cjs","names":[],"sources":["../src/components/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\n\ninterface SkeletonProps {\n  width?:  number | string\n  height?: number | string\n  radius?: number | string\n  style?:  CSSProperties\n}\n\nexport function Skeleton({ width = '100%', height = 12, radius = 4, style }: SkeletonProps) {\n  return (\n    <span style={{\n      display:         'inline-block',\n      width,\n      height,\n      borderRadius:    radius,\n      background:      'linear-gradient(90deg, var(--color-neutral-100) 0%, #f9f4f3 50%, var(--color-neutral-100) 100%)',\n      backgroundSize:  '200% 100%',\n      animation:       'skelShimmer 1.4s ease-in-out infinite',\n      flexShrink:      0,\n      ...style,\n    }} />\n  )\n}\n\n// ── Pre-built skeleton shapes ──────────────────────────────────────────────\n\nexport function SkeletonTableRow({ cols = 4 }: { cols?: number }) {\n  const widths = ['60%', '45%', '30%', '20%', '50%', '35%']\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '11px 14px', borderBottom: '1px solid var(--color-neutral-100)' }}>\n      {Array.from({ length: cols }, (_, i) => (\n        <div key={i} style={{ flex: i === 0 ? '1.5' : '1' }}>\n          <Skeleton width={widths[i % widths.length]} height={10} />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport function SkeletonTable({ rows = 5, cols = 4 }: { rows?: number; cols?: number }) {\n  return (\n    <div style={{ border: '1px solid var(--c-border)', borderRadius: 10, overflow: 'hidden' }}>\n      {/* Header */}\n      <div style={{ display: 'flex', gap: 16, padding: '10px 14px', background: 'var(--c-elevated)', borderBottom: '1px solid var(--c-border)' }}>\n        {Array.from({ length: cols }, (_, i) => (\n          <div key={i} style={{ flex: i === 0 ? '1.5' : '1' }}>\n            <Skeleton width=\"50%\" height={8} />\n          </div>\n        ))}\n      </div>\n      {Array.from({ length: rows }, (_, i) => (\n        <SkeletonTableRow key={i} cols={cols} />\n      ))}\n    </div>\n  )\n}\n\nexport function SkeletonText({ lines = 3, lastWidth = '60%' }: { lines?: number; lastWidth?: string }) {\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n      {Array.from({ length: lines }, (_, i) => (\n        <Skeleton key={i} width={i === lines - 1 ? lastWidth : '100%'} height={10} />\n      ))}\n    </div>\n  )\n}\n\nexport function SkeletonCard() {\n  return (\n    <div style={{ background: 'var(--c-surface)', border: '1px solid var(--c-border)', borderRadius: 'var(--radius-lg)', padding: 20, display: 'flex', flexDirection: 'column', gap: 12 }}>\n      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>\n        <Skeleton width={32} height={32} radius={8} />\n        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>\n          <Skeleton width=\"50%\" height={11} />\n          <Skeleton width=\"30%\" height={9} />\n        </div>\n        <Skeleton width={54} height={20} radius={999} />\n      </div>\n      <SkeletonText lines={2} lastWidth=\"70%\" />\n    </div>\n  )\n}\n"],"mappings":"mCASA,SAAgB,EAAS,CAAE,QAAQ,OAAQ,SAAS,GAAI,SAAS,EAAG,SAAwB,CAC1F,OACE,EAAA,EAAA,KAAC,OAAD,CAAM,MAAO,CACX,QAAiB,eACjB,QACA,SACA,aAAiB,EACjB,WAAiB,kGACjB,eAAiB,YACjB,UAAiB,wCACjB,WAAiB,EACjB,GAAG,EACJ,CAAI,CAAA,CAMT,SAAgB,EAAiB,CAAE,OAAO,GAAwB,CAChE,IAAM,EAAS,CAAC,MAAO,MAAO,MAAO,MAAO,MAAO,MAAM,CACzD,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,MAAO,CAAE,QAAS,OAAQ,WAAY,SAAU,IAAK,GAAI,QAAS,YAAa,aAAc,qCAAsC,UACrI,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAG,EAAG,KAChC,EAAA,EAAA,KAAC,MAAD,CAAa,MAAO,CAAE,KAAM,IAAM,EAAI,MAAQ,IAAK,WACjD,EAAA,EAAA,KAAC,EAAD,CAAU,MAAO,EAAO,EAAI,EAAO,QAAS,OAAQ,GAAM,CAAA,CACtD,CAFI,EAEJ,CACN,CACE,CAAA,CAIV,SAAgB,EAAc,CAAE,OAAO,EAAG,OAAO,GAAuC,CACtF,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,MAAO,CAAE,OAAQ,4BAA6B,aAAc,GAAI,SAAU,SAAU,UAAzF,EAEE,EAAA,EAAA,KAAC,MAAD,CAAK,MAAO,CAAE,QAAS,OAAQ,IAAK,GAAI,QAAS,YAAa,WAAY,oBAAqB,aAAc,4BAA6B,UACvI,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAG,EAAG,KAChC,EAAA,EAAA,KAAC,MAAD,CAAa,MAAO,CAAE,KAAM,IAAM,EAAI,MAAQ,IAAK,WACjD,EAAA,EAAA,KAAC,EAAD,CAAU,MAAM,MAAM,OAAQ,EAAK,CAAA,CAC/B,CAFI,EAEJ,CACN,CACE,CAAA,CACL,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAG,EAAG,KAChC,EAAA,EAAA,KAAC,EAAD,CAAgC,OAAQ,CAAjB,EAAiB,CACxC,CACE,GAIV,SAAgB,EAAa,CAAE,QAAQ,EAAG,YAAY,OAAiD,CACrG,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,MAAO,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,EAAG,UAC7D,MAAM,KAAK,CAAE,OAAQ,EAAO,EAAG,EAAG,KACjC,EAAA,EAAA,KAAC,EAAD,CAAkB,MAAO,IAAM,EAAQ,EAAI,EAAY,OAAQ,OAAQ,GAAM,CAA9D,EAA8D,CAC7E,CACE,CAAA,CAIV,SAAgB,GAAe,CAC7B,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,MAAO,CAAE,WAAY,mBAAoB,OAAQ,4BAA6B,aAAc,mBAAoB,QAAS,GAAI,QAAS,OAAQ,cAAe,SAAU,IAAK,GAAI,UAArL,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,MAAO,CAAE,QAAS,OAAQ,WAAY,SAAU,IAAK,GAAI,UAA9D,EACE,EAAA,EAAA,KAAC,EAAD,CAAU,MAAO,GAAI,OAAQ,GAAI,OAAQ,EAAK,CAAA,EAC9C,EAAA,EAAA,MAAC,MAAD,CAAK,MAAO,CAAE,KAAM,EAAG,QAAS,OAAQ,cAAe,SAAU,IAAK,EAAG,UAAzE,EACE,EAAA,EAAA,KAAC,EAAD,CAAU,MAAM,MAAM,OAAQ,GAAM,CAAA,EACpC,EAAA,EAAA,KAAC,EAAD,CAAU,MAAM,MAAM,OAAQ,EAAK,CAAA,CAC/B,IACN,EAAA,EAAA,KAAC,EAAD,CAAU,MAAO,GAAI,OAAQ,GAAI,OAAQ,IAAO,CAAA,CAC5C,IACN,EAAA,EAAA,KAAC,EAAD,CAAc,MAAO,EAAG,UAAU,MAAQ,CAAA,CACtC"}

package/dist/index12.js

@@ -0,0 +1,133 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/Skeleton.tsx
+function n({ width: t = "100%", height: n = 12, radius: r = 4, style: i }) {
+	return /* @__PURE__ */ e("span", { style: {
+		display: "inline-block",
+		width: t,
+		height: n,
+		borderRadius: r,
+		background: "linear-gradient(90deg, var(--color-neutral-100) 0%, #f9f4f3 50%, var(--color-neutral-100) 100%)",
+		backgroundSize: "200% 100%",
+		animation: "skelShimmer 1.4s ease-in-out infinite",
+		flexShrink: 0,
+		...i
+	} });
+}
+function r({ cols: t = 4 }) {
+	let r = [
+		"60%",
+		"45%",
+		"30%",
+		"20%",
+		"50%",
+		"35%"
+	];
+	return /* @__PURE__ */ e("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 16,
+			padding: "11px 14px",
+			borderBottom: "1px solid var(--color-neutral-100)"
+		},
+		children: Array.from({ length: t }, (t, i) => /* @__PURE__ */ e("div", {
+			style: { flex: i === 0 ? "1.5" : "1" },
+			children: /* @__PURE__ */ e(n, {
+				width: r[i % r.length],
+				height: 10
+			})
+		}, i))
+	});
+}
+function i({ rows: i = 5, cols: a = 4 }) {
+	return /* @__PURE__ */ t("div", {
+		style: {
+			border: "1px solid var(--c-border)",
+			borderRadius: 10,
+			overflow: "hidden"
+		},
+		children: [/* @__PURE__ */ e("div", {
+			style: {
+				display: "flex",
+				gap: 16,
+				padding: "10px 14px",
+				background: "var(--c-elevated)",
+				borderBottom: "1px solid var(--c-border)"
+			},
+			children: Array.from({ length: a }, (t, r) => /* @__PURE__ */ e("div", {
+				style: { flex: r === 0 ? "1.5" : "1" },
+				children: /* @__PURE__ */ e(n, {
+					width: "50%",
+					height: 8
+				})
+			}, r))
+		}), Array.from({ length: i }, (t, n) => /* @__PURE__ */ e(r, { cols: a }, n))]
+	});
+}
+function a({ lines: t = 3, lastWidth: r = "60%" }) {
+	return /* @__PURE__ */ e("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		},
+		children: Array.from({ length: t }, (i, a) => /* @__PURE__ */ e(n, {
+			width: a === t - 1 ? r : "100%",
+			height: 10
+		}, a))
+	});
+}
+function o() {
+	return /* @__PURE__ */ t("div", {
+		style: {
+			background: "var(--c-surface)",
+			border: "1px solid var(--c-border)",
+			borderRadius: "var(--radius-lg)",
+			padding: 20,
+			display: "flex",
+			flexDirection: "column",
+			gap: 12
+		},
+		children: [/* @__PURE__ */ t("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 10
+			},
+			children: [
+				/* @__PURE__ */ e(n, {
+					width: 32,
+					height: 32,
+					radius: 8
+				}),
+				/* @__PURE__ */ t("div", {
+					style: {
+						flex: 1,
+						display: "flex",
+						flexDirection: "column",
+						gap: 6
+					},
+					children: [/* @__PURE__ */ e(n, {
+						width: "50%",
+						height: 11
+					}), /* @__PURE__ */ e(n, {
+						width: "30%",
+						height: 9
+					})]
+				}),
+				/* @__PURE__ */ e(n, {
+					width: 54,
+					height: 20,
+					radius: 999
+				})
+			]
+		}), /* @__PURE__ */ e(a, {
+			lines: 2,
+			lastWidth: "70%"
+		})]
+	});
+}
+//#endregion
+export { n as Skeleton, o as SkeletonCard, i as SkeletonTable, r as SkeletonTableRow, a as SkeletonText };
+
+//# sourceMappingURL=index12.js.map