h2o-library 1.8.0 → 2.0.1

package/dist/esm/components/src/skeleton/skeleton.d.ts

@@ -0,0 +1,15 @@
+import "./skeleton.css";
+import type { HTMLAttributes } from "react";
+type SkeletonVariant = "text" | "rectangular" | "circular";
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    variant?: SkeletonVariant;
+    width?: string | number;
+    height?: string | number;
+    size?: "sm" | "md" | "lg";
+    animate?: boolean;
+}
+/**
+ * Placeholder block with a muted surface and a subtle shimmer aligned to the design tokens.
+ */
+export declare const Skeleton: ({ variant, width, height, size, animate, className, style, role, "aria-label": ariaLabel, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/skeleton/skeleton.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../../../node_modules/tslib/tslib.es6.mjs.js";import{jsx as t}from"react/jsx-runtime";import"./skeleton.css";import{cn as i}from"../../../utils/src/cn.js";function s(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}const a=a=>{var{variant:r="text",width:l,height:o,size:n="md",animate:m=!0,className:c,style:h,role:d="status","aria-label":u="Loading"}=a,f=e(a,["variant","width","height","size","animate","className","style","role","aria-label"]);const b=s(l),p=s(o),g=Object.assign({},h);if(b&&(g.width=b),p&&(g.height=p),"circular"===r)if(b&&!p)g.height=b;else if(p&&!b)g.width=p;else if(!b&&!p){const e="40px";g.width=e,g.height=e}return t("div",Object.assign({},f,{role:d,"aria-busy":"true","aria-live":"polite","aria-label":u,className:i("skeleton",`skeleton--${r}`,`skeleton--${n}`,!m&&"skeleton--static",c),style:g}))};export{a as Skeleton};
+//# sourceMappingURL=skeleton.js.map

package/dist/esm/components/src/slider/slider.css

@@ -0,0 +1,211 @@
+.slider-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  width: 100%;
+  --slider-track-h: 6px;
+  --slider-thumb: 18px;
+}
+
+.slider-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.slider-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.slider-value-readout {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: hsl(var(--muted-200));
+}
+
+.slider-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-block: 0.35rem;
+}
+
+.slider-wrapper.slider-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.slider-wrapper.slider-error .slider-track {
+  background-color: hsl(var(--destructive-bg) / 0.35);
+}
+
+.slider-track-shell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: calc(var(--slider-thumb) + 8px);
+  touch-action: none;
+}
+
+.slider-track {
+  position: relative;
+  width: 100%;
+  height: var(--slider-track-h);
+  border-radius: var(--radius-full);
+  background-color: hsl(var(--muted) / 0.35);
+  cursor: pointer;
+}
+
+.slider-range-fill {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  border-radius: var(--radius-full);
+  background-color: hsl(var(--primary));
+  pointer-events: none;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: var(--slider-thumb);
+  height: var(--slider-thumb);
+  margin-left: calc(var(--slider-thumb) / -2);
+  border-radius: var(--radius-full);
+  border: 2.5px solid hsl(var(--primary));
+  background-color: hsl(var(--popover));
+  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.08);
+  cursor: grab;
+  padding: 0;
+  transform: translate(0, -50%);
+  transition:
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
+  z-index: 2;
+}
+
+.slider-thumb:hover:not(:disabled) {
+  border-color: hsl(var(--primary-200));
+  box-shadow: 0 2px 6px hsl(var(--primary) / 0.25);
+}
+
+.slider-thumb:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px hsl(var(--background)),
+    0 0 0 4px hsl(var(--primary));
+}
+
+.slider-thumb:active:not(:disabled) {
+  cursor: grabbing;
+}
+
+.slider-thumb-disabled {
+  cursor: not-allowed;
+}
+
+.slider-thumb-active {
+  z-index: 3;
+  border-color: hsl(var(--primary-200));
+}
+
+/* Floating value tooltip */
+.slider-tooltip {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: hsl(var(--primary-foreground));
+  background-color: hsl(var(--primary));
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.12);
+  z-index: 4;
+}
+
+.slider-tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: hsl(var(--primary));
+}
+
+/* Min / max labels */
+.slider-extents {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-200));
+  font-variant-numeric: tabular-nums;
+  margin-top: -0.15rem;
+}
+
+/* Marks */
+.slider-marks {
+  position: relative;
+  width: 100%;
+  height: 1rem;
+  margin-top: 0.15rem;
+}
+
+.slider-mark {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+  pointer-events: none;
+}
+
+.slider-mark-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: var(--radius-full);
+  background-color: hsl(var(--muted-200) / 0.9);
+}
+
+.slider-mark-label {
+  font-size: 0.65rem;
+  color: hsl(var(--muted-200));
+  white-space: nowrap;
+}
+
+.slider-note {
+  font-size: 0.8125rem;
+  color: hsl(var(--muted-200));
+}
+
+.slider-error {
+  font-size: 0.8125rem;
+  color: hsl(var(--destructive));
+}
+
+.slider-output-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/esm/components/src/slider/slider.d.ts

@@ -0,0 +1,46 @@
+import "./slider.css";
+import type React from "react";
+import type { TooltipPosition } from "../../../types";
+export type SliderMark = {
+    value: number;
+    label?: string;
+};
+type BaseSliderProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: string;
+    tooltip?: string;
+    tooltipPosition?: TooltipPosition;
+    note?: string;
+    error?: string;
+    containerClassName?: string;
+    className?: string;
+    marks?: SliderMark[];
+    showExtents?: boolean;
+    showValue?: boolean;
+    showTooltip?: boolean;
+    name?: string;
+    formatValue?: (value: number) => string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "value">;
+type SingleSliderProps = BaseSliderProps & {
+    range?: false;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+};
+type RangeSliderProps = BaseSliderProps & {
+    range: true;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (value: [number, number]) => void;
+    minDistance?: number;
+};
+type SliderProps = SingleSliderProps | RangeSliderProps;
+/**
+ * Single-thumb or dual-thumb range slider with keyboard support, optional marks,
+ * tooltips, and field chrome (label, error, note) consistent with `Input`.
+ */
+export declare function Slider(props: SliderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/slider/slider.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as n,Fragment as t}from"react/jsx-runtime";import"./slider.css";import{useCallback as r,useId as i,useRef as a,useState as o,useEffect as l}from"react";import{Icon as s}from"../icon/icon.js";import{clamp as d}from"../../../utils/src/math.js";import{cn as c}from"../../../utils/src/cn.js";function u(e){if(!Number.isFinite(e))return 0;if(Math.floor(e)===e)return 0;const n=e.toString().toLowerCase();if(n.includes("e-")){const e=n.match(/e-(\d+)/);return e?parseInt(e[1],10):0}const t=n.indexOf(".");return-1===t?0:n.length-t-1}function m(e,n,t,r){const i=d(e,n,t);if(r<=0||!Number.isFinite(r))return i;const a=Math.max(u(r),u(n),u(t)),o=Math.round((i-n)/r);return Number(d(n+o*r,n,t).toFixed(Math.min(a,8)))}function h(e,n,t){return t===n?0:(e-n)/(t-n)*100}function p(e,n,t,r,i){let[a,o]=e.map((e=>m(e,n,t,r)));a>o&&([a,o]=[o,a]);const l=Math.max(n,t-i),s=Math.min(t,n+i);return a=d(a,n,l),o=d(o,s,t),o-a<i&&(o=d(a+i,s,t),a=d(o-i,n,l)),[a,o]}function v(e,n,t,r,i,a,o){const l=m(t,r,i,a),[s,c]=e;if(0===n){return p([d(Math.min(l,c-o),r,i),c],r,i,a,o)}return p([s,d(Math.max(l,s+o),r,i)],r,i,a,o)}function f({id:e,value:t,min:r,max:i,percent:a,disabled:o,active:l,dragging:s,showTooltip:d,formatted:u,onKeyDown:m,onPointerDown:h,onFocus:p,onBlur:v,ariaDescribedBy:f}){const b=d&&(s||l);return n("button",{id:e,type:"button",role:"slider","aria-valuemin":r,"aria-valuemax":i,"aria-valuenow":t,"aria-valuetext":u,"aria-orientation":"horizontal",disabled:o,tabIndex:o?-1:0,"aria-describedby":f,className:c("slider-thumb",o&&"slider-thumb-disabled",l&&"slider-thumb-active"),style:{left:`${a}%`},onKeyDown:m,onPointerDown:h,onFocus:p,onBlur:v,children:b&&n("span",{className:"slider-tooltip",children:u})})}function b(u){const b=!0===u.range,g=b?void 0:u.onValueChange,w=b?u.onValueChange:void 0,y=b?void 0:u.value,N=b?u.value:void 0,{min:x=0,max:D=100,step:k=1,disabled:M=!1,label:$,tooltip:P,tooltipPosition:B="top",note:E,error:T="",containerClassName:F="",className:L="",marks:V,showExtents:C=!0,showValue:K=!1,showTooltip:j=!0,name:A,formatValue:I,id:S,style:z,onBlur:R}=u,U=Math.min(x,D),X=Math.max(x,D),H=k>0?k:1,O=b&&void 0!==u.minDistance?Math.max(0,u.minDistance):H,q=r((e=>I?I(e):String(e)),[I]),G=i(),J=null!=S?S:G.replace(/:/g,""),Q=`${J}-thumb-0`,W=`${J}-thumb-1`,Y=a(null),Z=a(null),_=a([U,X]),ee=m(b||void 0===u.defaultValue?U+.5*(X-U):u.defaultValue,U,X,H),[ne,te]=o(ee),[re,ie]=o((()=>b&&void 0!==u.defaultValue?p(u.defaultValue,U,X,H,O):p(function(e,n){const t=n-e;return[e+.25*t,e+.75*t]}(U,X),U,X,H,O))),ae=b||void 0===y?ne:m(y,U,X,H),oe=b?void 0!==N?p(N,U,X,H,O):re:[U,X];b&&(_.current=oe);const[le,se]=o(null),[de,ce]=o(null),ue=r((e=>{const n=Y.current;if(!n)return U;const t=n.getBoundingClientRect(),r=d((e-t.left)/t.width,0,1);return U+r*(X-U)}),[X,U]),me=r((e=>{const n=m(e,U,X,H);void 0===y&&te(n),null==g||g(n)}),[y,X,U,g,H]),he=r((e=>{const n=p(e,U,X,H,O);_.current=n,void 0===N&&ie(n),null==w||w(n)}),[N,X,U,O,w,H]),pe=r((e=>{if(M)return;if(e.target.closest(".slider-thumb"))return;const n=ue(e.clientX);if(b){const[e,t]=_.current,r=Math.abs(n-e)<=Math.abs(n-t)?0:1;he(v([e,t],r,n,U,X,H,O)),ce(r)}else me(n)}),[ue,M,b,X,U,O,H,he,me]),ve=e=>n=>{if(M)return;const t=function(e,n,t){const r=n-e;return m(Math.max(10*t,r/8),0,r,t)||t}(U,X,H);let r=0,i=!1,a=!1;if("ArrowRight"===n.key||"ArrowUp"===n.key)r=H;else if("ArrowLeft"===n.key||"ArrowDown"===n.key)r=-H;else if("PageUp"===n.key)r=t;else if("PageDown"===n.key)r=-t;else if("Home"===n.key)i=!0;else{if("End"!==n.key)return;a=!0}if(n.preventDefault(),b){const[n,t]=_.current;he(v([n,t],e,i?0===e?U:n+O:a?1===e?X:t-O:(0===e?n:t)+r,U,X,H,O))}else{me(i?U:a?X:ae+r)}},fe=e=>n=>{M||(n.stopPropagation(),Z.current=n.currentTarget,n.currentTarget.setPointerCapture(n.pointerId),se(e),ce(e))};l((()=>{if(null===le)return;const e=e=>{const n=ue(e.clientX);if(b){const[e,t]=_.current;he(v([e,t],le,n,U,X,H,O))}else me(n)},n=e=>{var n;try{null===(n=Z.current)||void 0===n||n.releasePointerCapture(e.pointerId)}catch(e){}Z.current=null,se(null)};return document.addEventListener("pointermove",e),document.addEventListener("pointerup",n),document.addEventListener("pointercancel",n),()=>{document.removeEventListener("pointermove",e),document.removeEventListener("pointerup",n),document.removeEventListener("pointercancel",n)}}),[ue,le,b,X,U,O,H,he,me]);const be=b?{left:`${h(oe[0],U,X)}%`,width:h(oe[1],U,X)-h(oe[0],U,X)+"%"}:{left:0,width:`${h(ae,U,X)}%`},ge=b?`${q(oe[0])} – ${q(oe[1])}`:q(ae),we=e=>()=>ce(e),ye=e=>()=>ce((n=>n===e?null:n));return e("div",{id:S,style:z,className:c("slider-container",F),children:[($||K||P)&&e("div",{className:"slider-header",children:[$&&e("label",{className:"slider-label",children:[$,P&&n(s,{icon:"info",size:16,tooltip:P,className:"input-info-icon",tooltipPosition:B})]}),K&&n("span",{className:"slider-value-readout",children:ge})]}),e("div",{className:c("slider-wrapper",M&&"slider-disabled",T&&"slider-error",L),onBlur:e=>{const n=e.relatedTarget;n instanceof Node&&e.currentTarget.contains(n)||null==R||R(e)},children:[n("div",{className:"slider-track-shell",children:e("div",{ref:Y,className:"slider-track",onPointerDown:pe,role:"presentation",children:[n("div",{className:"slider-range-fill",style:be}),b?e(t,{children:[n(f,{id:Q,value:oe[0],min:U,max:X,percent:h(oe[0],U,X),disabled:M,active:0===de,dragging:0===le,showTooltip:j,formatted:q(oe[0]),onKeyDown:ve(0),onPointerDown:fe(0),onFocus:we(0),onBlur:ye(0),ariaDescribedBy:`${J}-live`}),n(f,{id:W,value:oe[1],min:U,max:X,percent:h(oe[1],U,X),disabled:M,active:1===de,dragging:1===le,showTooltip:j,formatted:q(oe[1]),onKeyDown:ve(1),onPointerDown:fe(1),onFocus:we(1),onBlur:ye(1),ariaDescribedBy:`${J}-live`})]}):n(f,{id:Q,value:ae,min:U,max:X,percent:h(ae,U,X),disabled:M,active:0===de,dragging:0===le,showTooltip:j,formatted:q(ae),onKeyDown:ve(0),onPointerDown:fe(0),onFocus:we(0),onBlur:ye(0),ariaDescribedBy:`${J}-live`})]})}),C&&e("div",{className:"slider-extents","aria-hidden":!0,children:[n("span",{children:q(U)}),n("span",{children:q(X)})]}),V&&V.length>0&&n("div",{className:"slider-marks","aria-hidden":!0,children:V.map((t=>e("div",{className:"slider-mark",style:{left:`${h(m(t.value,U,X,H),U,X)}%`},children:[n("span",{className:"slider-mark-dot"}),void 0!==t.label&&n("span",{className:"slider-mark-label",children:t.label})]},t.value)))}),!b&&A&&n("input",{type:"hidden",name:A,value:ae}),b&&A&&e(t,{children:[n("input",{type:"hidden",name:`${A}Start`,value:oe[0]}),n("input",{type:"hidden",name:`${A}End`,value:oe[1]})]}),n("span",{className:"slider-output-sr",id:`${J}-live`,"aria-live":"polite",children:ge})]}),E&&!T&&n("span",{className:"slider-note",children:E}),T&&n("span",{className:"slider-error",children:T})]})}export{b as Slider};
+//# sourceMappingURL=slider.js.map

package/dist/esm/components/src/table/table-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isInteractiveElement: (element: HTMLElement | null) => boolean;
+export declare const hasInteractiveParent: (element: HTMLElement | null, stopAt: HTMLElement | null) => boolean;

package/dist/esm/components/src/table/table-utils.js

@@ -0,0 +1,2 @@
+const t=["button","a","input","select","textarea","label"],e=["button","link","checkbox","menuitem","tab","switch"],n=n=>{if(!n)return!1;const r=n.tagName.toLowerCase();if(t.includes(r))return!0;const a=n.getAttribute("role");return!(!a||!e.includes(a))||(!(!n.hasAttribute("onclick")&&!n.hasAttribute("data-clickable"))||!!n.classList.contains("clickable"))},r=(t,e)=>{let r=t;for(;r&&r!==e;){if(n(r))return!0;r=r.parentElement}return!1};export{r as hasInteractiveParent,n as isInteractiveElement};
+//# sourceMappingURL=table-utils.js.map

package/dist/{css/src → esm/components/src/table}/table.css

@@ -1,4 +1,3 @@
-
 .table-container {
   width: 100%;
   display: flex;
@@ -85,10 +84,6 @@
   border-bottom: none;
 }
 
-/* .table tbody tr:hover {
-  background-color: hsl(var(--muted-200));
-} */
-
 .table-loading,
 .table-empty {
   text-align: center;
@@ -126,6 +121,7 @@
 }
 
 /* Edit Columns Popover */
+
 .edit-columns-popover {
   width: 300px;
   background-color: hsl(var(--background));
@@ -179,18 +175,18 @@
   user-select: none;
 }
 
-.edit-columns-item-content label {
+.edit-columns-item-label {
   font-size: 14px;
 }
 
 .edit-columns-item.dragging {
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   border-color: hsl(var(--primary));
 }
 
 .drag-handle {
   cursor: grab;
-  color: hsl(var(--muted-foreground));
+  color: hsl(var(--muted-200));
 }
 
 .edit-columns-item.dragging .drag-handle {
@@ -209,4 +205,4 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-}
+}

package/dist/esm/components/src/table/table.d.ts

@@ -0,0 +1,78 @@
+import "./table.css";
+import React from "react";
+/**
+ * Sort state for a column: ascending, descending, or unsorted.
+ * @type {("asc"|"desc"|null)}
+ */
+export type SortDirection = "asc" | "desc" | null;
+/**
+ * One column: accessor `key` maps to `row[key]`, with optional `render` for custom cells.
+ * @template T - Row type.
+ * @property {string} key - Object key on each row, or a synthetic key for custom columns.
+ * @property {boolean} [sortable] - When `true` and `onSort` is provided, header is clickable.
+ * @property {function(unknown, T): React.ReactNode} [render] - If omitted, `String(row[key])` is used.
+ */
+export interface TableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    minWidth?: string;
+    maxWidth?: string;
+    width?: string;
+    render?: (value: unknown, row: T) => React.ReactNode;
+}
+/**
+ * @template T - Row object type; keys should match `TableColumn.key` where possible.
+ * Full data grid: sort, optional row selection, column edit popover (drag/drop + visibility), pagination, loading.
+ *
+ * @property {TableColumn<T>[]} columns - Column defs; can include a synthetic `__selection` for checkboxes.
+ * @property {T[]} data - Rows to render; order is preserved.
+ * @property {string} [sortKey] - **Controlled** sort column; use with `sortDirection` and `onSort`.
+ * @property {SortDirection} [sortDirection] - Current direction for `sortKey`.
+ * @property {boolean} [columnsEditable] - Enables “Edit columns” popover. Default `false`.
+ * @property {string[]} [visibleColumns] - **Controlled** list of column keys to show. Pair with `onVisibleColumnsChange`.
+ * @property {T[]} [selectedRows] - **Controlled** selected rows. Pair with `onSelectionChange` and `rowKey`.
+ * @property {keyof T} [rowKey] - Unique key field on `T` for selection identity. Often `"id"`.
+ * @property {number} [currentPage] - 1-based page index when `Pagination` is used.
+ * @property {string} [maxHeight] - Max height of the scrollable table body.
+ */
+interface TableProps<T extends Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    isLoading?: boolean;
+    className?: string;
+    containerClassName?: string;
+    rowHeight?: string;
+    sortKey?: string;
+    sortDirection?: SortDirection;
+    columnsEditable?: boolean;
+    currentPage?: number;
+    totalPages?: number;
+    perPage?: number;
+    perPageOptions?: {
+        label: string;
+        value: number;
+    }[];
+    onSort?: (key: string, direction: SortDirection) => void;
+    onPageChange?: (page: number) => void;
+    onPerPageChange?: (perPage: number) => void;
+    onVisibleColumnsChange?: (keys: string[]) => void;
+    maxHeight?: string;
+    visibleColumns?: string[];
+    maxVisibleColumns?: number;
+    defaultVisibleColumns?: string[];
+    trailingColumns?: string[];
+    selectedRows?: T[];
+    onSelectionChange?: (rows: T[]) => void;
+    rowKey?: keyof T;
+    onRowClick?: (row: T, rowIndex: number) => void;
+}
+/**
+ * Renders a full-featured table: headers, body, optional selection column, sort indicators, edit-columns popover, and pagination.
+ *
+ * @template T - Row record type.
+ * @param {object} props - Column definitions, data, and optional controlled sorting / pagination / selection.
+ * @returns {JSX.Element} The table shell, scroll region, and optional `Pagination` / `Loader`.
+ */
+export declare function Table<T extends Record<string, unknown>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, columnsEditable, containerClassName, visibleColumns, onVisibleColumnsChange, maxVisibleColumns, defaultVisibleColumns, trailingColumns, selectedRows, onSelectionChange, rowKey, onRowClick, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/table/table.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as n,Fragment as i}from"react/jsx-runtime";import"./table.css";import l,{useState as t,useMemo as s,useCallback as a}from"react";import{Icon as o}from"../icon/icon.js";import{Input as r}from"../input/input.js";import{Pagination as c}from"../pagination/pagination.js";import{Loader as d}from"../loader/loader.js";import{Button as m}from"../button/button.js";import{PopOver as h,PopOverTrigger as u,PopOverContent as g}from"../popover/popover.js";import{Checkbox as p}from"../checkbox/checkbox.js";import{hasInteractiveParent as b}from"./table-utils.js";import{useSensors as f,useSensor as v,DndContext as y,closestCenter as k,DragOverlay as C,KeyboardSensor as N,PointerSensor as w}from"../../../node_modules/@dnd-kit/core/dist/core.esm.js";import{SortableContext as x,verticalListSortingStrategy as S,useSortable as j,sortableKeyboardCoordinates as P,arrayMove as z}from"../../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";import{CSS as O}from"../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js";function W({id:i,label:l,checked:t,onToggle:s}){const{attributes:a,listeners:r,setNodeRef:c,transform:d,transition:m,isDragging:h}=j({id:i}),u={transform:O.Transform.toString(d),transition:m,zIndex:h?1:"auto",opacity:h?.5:1};return e("div",Object.assign({ref:c,style:u},a,{className:"edit-columns-item",children:[n("div",Object.assign({},r,{className:"drag-handle",children:n(o,{icon:"drag-handle",size:16})})),e("div",{className:"edit-columns-item-content",children:[n("span",{className:"edit-columns-item-label",children:l}),n(p,{checked:t,onChange:s})]})]}))}function V({onClose:i,allColumns:a,visibleKeys:c,onApply:d,maxVisibleColumns:h,defaultVisibleColumns:u,trailingColumns:g}){const[b,j]=t([...a]),[O,V]=t([...c]),[_,D]=t(""),[I,T]=t(null);l.useEffect((()=>{j([...a])}),[a]),l.useEffect((()=>{V([...c])}),[c]);const E=f(v(w),v(N,{coordinateGetter:P})),K=b.filter((e=>e.label.toLowerCase().includes(_.toLowerCase()))),R=s((()=>b.find((e=>e.key===I))),[I,b]),H=!!R&&O.includes(R.key),L=h?`Select up to ${h} columns.`:"Select columns to display.";return e("div",{className:"edit-columns-popover",children:[e("div",{className:"edit-columns-header",children:[n("h3",{className:"edit-columns-title",children:"Edit Columns"}),u&&u.length>0&&n(m,{variant:"ghost",size:"sm",onClick:()=>{u&&(d(u),i())},label:"Reset",className:"edit-columns-reset"})]}),e("div",{className:"edit-columns-content",children:[e("p",{className:"edit-columns-subtitle",children:[L," Drag to reorder."]}),n(r,{placeholder:"Search column by name...",value:_,onChange:e=>D(e.target.value),leftIcon:"search",size:"sm"}),n("div",{className:"edit-columns-list",children:e(y,{sensors:E,collisionDetection:k,onDragEnd:e=>{T(null);const{active:n,over:i}=e;i&&n.id!==i.id&&j((e=>{const l=e.findIndex((e=>e.key===n.id)),t=e.findIndex((e=>e.key===i.id));return z(e,l,t)}))},onDragStart:e=>{T(String(e.active.id))},children:[n(x,{items:K.map((e=>e.key)),strategy:S,children:K.map((e=>n(W,{id:e.key,label:e.label,checked:O.includes(e.key),onToggle:()=>{return n=e.key,void V((e=>{const i=e.includes(n),l=e.filter((e=>!g.includes(e))).length;return i?e.filter((e=>e!==n)):h&&!g.includes(n)&&l>=h?e:[...e,n]}));var n}},e.key)))}),n(C,{children:I&&R?e("div",{className:"edit-columns-item dragging",children:[n("div",{className:"drag-handle",children:n(o,{icon:"drag-handle",size:16})}),e("div",{className:"edit-columns-item-content",children:[n("span",{className:"edit-columns-item-label",children:R.label}),n(p,{checked:H})]})]}):null})]})}),e("div",{className:"edit-columns-actions",children:[n(m,{variant:"secondary",size:"sm",onClick:i,label:"cancel"}),n(m,{onClick:()=>{const e=b.map((e=>e.key)).filter((e=>O.includes(e)));d(e),i()},label:"apply",size:"sm"})]})]})]})}function _({columns:l,data:r,isLoading:f=!1,className:v="",rowHeight:y="40px",sortKey:k,sortDirection:C,onSort:N,currentPage:w,totalPages:x,perPage:S,perPageOptions:j,onPageChange:P,onPerPageChange:z,maxHeight:O,columnsEditable:W=!1,containerClassName:_="",visibleColumns:D,onVisibleColumnsChange:I,maxVisibleColumns:T,defaultVisibleColumns:E,trailingColumns:K=[],selectedRows:R,onSelectionChange:H,rowKey:L="id",onRowClick:$}){const[A,G]=t(!1),{normalColumns:Y,resolvedTrailingColumns:q}=s((()=>{const e=new Set(K);return{normalColumns:l.filter((n=>!e.has(n.key))),resolvedTrailingColumns:l.filter((n=>e.has(n.key)))}}),[l,K]),B=a((e=>{if(!H||!R)return;const n=R.some((n=>n[L]===e[L]));H(n?R.filter((n=>n[L]!==e[L])):[...R,e])}),[H,R,L]),F=a((e=>!!R&&R.some((n=>n[L]===e[L]))),[R,L]),J=s((()=>!(!R||!r.length)&&r.length===R.length),[R,r]),M=s((()=>!(!R||!r.length)&&(R.length>0&&R.length<r.length)),[R,r]),Q=s((()=>{let e;if(W&&D){const n=new Set(D),i=Y.filter((e=>n.has(e.key)));i.sort(((e,n)=>D.indexOf(e.key)-D.indexOf(n.key))),e=i}else{const n=new Set(E);e=E?Y.filter((e=>n.has(e.key))):Y}const i=[...e,...q];if(void 0!==R&&H){return[{key:"__selection",label:"",width:"48px",render:(e,i)=>n(p,{checked:F(i),onChange:()=>B(i)})},...i]}return i}),[Y,q,D,W,E,R,H,B,F]),U=e=>{if(!e.sortable)return null;const i=k===e.key;return n("div",{className:"table-sort-icon "+(i?"active":""),children:n(o,i&&C?{icon:"asc"===C?"arrow-up-narrow-wide":"arrow-down-wide-narrow",size:16,className:C}:{icon:"arrow-up-narrow-wide",size:16,className:"default"})})},X=(e,n,i)=>i.render?i.render(e,n):null==e?"":String(e);return e("div",{className:`table-container ${_}`,children:[W&&I&&n("div",{className:"table-header-actions",children:e(h,{isOpen:A,setIsOpen:G,alignment:"right",children:[n(u,{children:n(m,{variant:"ghost",icon:"dots-vertical",iconOnly:!0,size:"sm"})}),n(g,{children:n(V,{onClose:()=>G(!1),allColumns:Y,visibleKeys:D||Y.map((e=>e.key)),onApply:I,maxVisibleColumns:T,defaultVisibleColumns:E,trailingColumns:K})})]})}),n("div",{className:`table-wrapper ${v}`,style:O?{maxHeight:O,overflowY:"auto"}:{},children:e("table",{className:"table",children:[n("thead",{children:n("tr",{children:Q.map((l=>n("th",{onClick:()=>l.sortable&&(e=>{if(!N)return;let n="asc";k===e&&(n="asc"===C?"desc":"desc"===C?null:"asc"),N(e,n)})(l.key),className:l.sortable?"sortable":"",style:{minWidth:l.minWidth,maxWidth:l.maxWidth,width:l.width},children:n("div",{className:"table-header-content",children:"__selection"===l.key?n(p,{checked:J,isIndeterminate:M,onChange:e=>{return n=e.target.checked,void(H&&H(n?r:[]));var n}}):e(i,{children:[l.label,U(l)]})})},l.key)))})}),n("tbody",{children:f?n("tr",{children:n("td",{colSpan:Q.length,className:"table-loading",children:n(d,{className:"table-loader"})})}):0===r.length?n("tr",{children:n("td",{colSpan:Q.length,className:"table-empty",children:e("div",{className:"table-empty-content",children:[n(o,{icon:"info",size:32}),"No data available"]})})}):r.map(((e,i)=>n("tr",{style:{height:y,cursor:$?"pointer":void 0},onClick:n=>((e,n,i)=>{if(!$)return;const l=e.target,t=e.currentTarget;b(l,t)||$(n,i)})(n,e,i),className:$?"clickable-row":"",children:Q.map((i=>n("td",{style:{minWidth:i.minWidth,maxWidth:i.maxWidth,width:i.width},children:X(e[i.key],e,i)},i.key)))},String(e[L]))))})]})}),void 0!==w&&void 0!==x&&void 0!==S&&P&&z&&n("div",{className:"table-pagination",children:n(c,{currentPage:w,totalPages:x,perPage:S,perPageOptions:j,onPageChange:P,onPerPageChange:z})})]})}export{_ as Table};
+//# sourceMappingURL=table.js.map

package/dist/{css/src → esm/components/src/tabs}/tabs.css

@@ -31,3 +31,35 @@
   height: 2px;
   background-color: hsl(var(--primary));
 }
+
+/* Size variants */
+
+.tabs--sm .tab {
+  font-size: 0.75rem;
+  padding: 0.15rem;
+}
+
+.tabs--md .tab {
+  font-size: 0.875rem;
+}
+
+.tabs--lg .tab {
+  font-size: 1.125rem;
+  padding: 0.3rem;
+}
+
+.tabs--lg .tab-selected::after {
+  height: 2.5px;
+}
+
+.tabs--lg {
+  gap: 2rem;
+}
+
+/* Disabled tab */
+
+.tab-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/dist/esm/components/src/tabs/tabs.d.ts

@@ -0,0 +1,35 @@
+import "./tabs.css";
+/**
+ * One entry in a `Tabs` `tabs` list.
+ * @property {string} value - Emitted to `onChange` when the tab is activated.
+ */
+export type TabItem = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+/**
+ * **Controlled** tab strip: `selectedTab` must match a `TabItem.value` for the active state.
+ *
+ * @property {TabItem[]} tabs - Tab metadata; `disabled` items are skipped in keyboard nav.
+ * @property {string} selectedTab - Current `value` of the active tab.
+ * @property {(value: string) => void} onChange - Fires with the new tab `value` on click or keyboard.
+ * @property {"sm"|"md"|"lg"} [size] - Size token for the tab list. Default `"md"`.
+ */
+interface TabsProps {
+    tabs: TabItem[];
+    selectedTab: string;
+    onChange: (tab: string) => void;
+    ariaLabel?: string;
+    size?: "sm" | "md" | "lg";
+    tabClassName?: string;
+    className?: string;
+}
+/**
+ * Renders a `tablist` with one `button` per tab, roving tabindex, and arrow-key / Home / End support.
+ *
+ * @param {TabsProps} props - `tabs` / `selectedTab` / `onChange` plus `ariaLabel` for the list.
+ * @returns {JSX.Element} The horizontal tab list.
+ */
+export declare const Tabs: ({ tabs, selectedTab, onChange, ariaLabel, size, tabClassName, className, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/src/tabs/tabs.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import"./tabs.css";import{useRef as l}from"react";const t=({tabs:t,selectedTab:a,onChange:i,ariaLabel:n,size:o="md",tabClassName:s="",className:r=""})=>{const d=l(null);return e("div",{ref:d,role:"tablist","aria-label":n,className:`tabs tabs--${o} ${r}`,children:t.map(((l,n)=>e("button",{type:"button",role:"tab","aria-selected":a===l.value,disabled:l.disabled,onClick:()=>!l.disabled&&i(l.value),onKeyDown:e=>((e,l)=>{var a,n,o,s;const r=t.map(((e,l)=>({tab:e,i:l}))).filter((({tab:e})=>!e.disabled)),b=r.findIndex((({i:e})=>e===l));let u;if("ArrowRight"===e.key){e.preventDefault();const l=r[(b+1)%r.length];u=null==l?void 0:l.i}else if("ArrowLeft"===e.key){e.preventDefault();const l=r[(b-1+r.length)%r.length];u=null==l?void 0:l.i}else"Home"===e.key?(e.preventDefault(),u=null===(a=r[0])||void 0===a?void 0:a.i):"End"===e.key&&(e.preventDefault(),u=null===(n=r[r.length-1])||void 0===n?void 0:n.i);if(void 0!==u){const e=null===(o=d.current)||void 0===o?void 0:o.querySelectorAll('[role="tab"]');null===(s=null==e?void 0:e[u])||void 0===s||s.focus(),i(t[u].value)}})(e,n),className:`tab ${a===l.value?"tab-selected":""} ${l.disabled?"tab-disabled":""} ${s}`,children:l.label},l.value)))})};export{t as Tabs};
+//# sourceMappingURL=tabs.js.map

package/dist/{css/src → esm/components/src/tag}/tag.css

@@ -1,13 +1,28 @@
 .tag-base {
   display: flex;
   align-items: center;
-  font-size: 14px;
   justify-content: space-between;
-  padding: 0.3rem 0.3rem 0.3rem 0.6rem;
   border-radius: var(--radius-sm);
   transition: all 0.2s;
 }
 
+/* Size variants */
+
+.tag--sm {
+  font-size: 0.75rem;
+  padding: 0.15rem 0.15rem 0.15rem 0.45rem;
+}
+
+.tag--md {
+  font-size: 0.875rem;
+  padding: 0.3rem 0.3rem 0.3rem 0.6rem;
+}
+
+.tag--lg {
+  font-size: 1rem;
+  padding: 0.4rem 0.4rem 0.4rem 0.75rem;
+}
+
 .tag-primary {
   border: 1.5px solid hsl(var(--primary));
   color: hsl(var(--primary));

package/dist/esm/components/src/tag/tag.d.ts

@@ -0,0 +1,26 @@
+import "./tag.css";
+import React from "react";
+/**
+ * Removable label chip with primary/secondary styles and sizes.
+ *
+ * @property {string} label - Visible text and remove `aria-label` source.
+ * @property {"primary"|"secondary"} [variant] - Color scheme. Default `"primary"`.
+ * @property {"sm"|"md"|"lg"} [size] - Typographic and hit-target scale. Default `"md"`.
+ * @property {() => void} onRemove - Fires when the user clicks the “×” control.
+ */
+type TagProps = {
+    label: string;
+    variant?: "primary" | "secondary";
+    size?: "sm" | "md" | "lg";
+    onRemove: () => void;
+    className?: string;
+};
+/**
+ * A dismissible tag used in multi-selects and filter lists; forwards ref to the root `div`.
+ *
+ * @param {TagProps} props - `label`, `onRemove`, and presentation props.
+ * @param {React.Ref<HTMLDivElement>} ref - Root element ref.
+ * @returns {React.ReactElement} The tag row and remove button.
+ */
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/components/src/tag/tag.js

@@ -0,0 +1,2 @@
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import"./tag.css";import t from"react";import{Icon as r}from"../icon/icon.js";const o={sm:12,md:14,lg:16},i=t.forwardRef((({label:t,variant:i="primary",size:m="md",onRemove:s,className:l=""},c)=>a("div",{ref:c,className:`tag-base tag-${i} tag--${m} ${l}`,title:t,children:[e("span",{className:"tag-label",children:t}),e("button",{type:"button",onClick:s,className:"tag-remove","aria-label":`Remove ${t}`,children:e(r,{icon:"close",size:o[m]})})]})));i.displayName="Tag";export{i as Tag};
+//# sourceMappingURL=tag.js.map