@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/data-display/chip/chip.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode, MouseEvent } from 'react';
+import { Size } from '../../../theme/size-tokens';
+import { ColorVariant } from '../../../theme/tokens';
+export type ChipProps = {
+    /** Content to display inside the chip */
+    children: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Color variant for the chip (neutral, primary, success, warning, error) */
+    variant?: ColorVariant;
+    /** Size - uses unified size system */
+    size?: Size;
+    /** Callback when the remove/delete button is clicked */
+    onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** Icon name to display at the start of the chip */
+    icon?: string;
+    /** Whether the chip is disabled */
+    disabled?: boolean;
+    /** Whether the chip is clickable */
+    clickable?: boolean;
+    /** Callback when the chip is clicked (requires clickable=true) */
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+};
+/**
+ * Chip - Compact element for tags, filters, and selections
+ *
+ * Features:
+ * - Color variants (neutral, primary, success, warning, error)
+ * - Sizes (sm, md, lg)
+ * - Optional remove button
+ * - Optional icon
+ * - Clickable state
+ * - Disabled state
+ *
+ * Similar to Badge but with interaction (remove, click)
+ */
+declare function Chip({ children, className, variant, size, onRemove, icon, disabled, clickable, onClick }: Readonly<ChipProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Chip {
+    var displayName: string;
+}
+export default Chip;
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/data-display/chip/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAa,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAiB,MAAM,uBAAuB,CAAC;AAEpE,MAAM,MAAM,SAAS,GAAG;IACtB,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kEAAkE;IAClE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,SAAc,EACd,OAAmB,EACnB,IAAW,EACX,QAAQ,EACR,IAAI,EACJ,QAAgB,EAChB,SAAiB,EACjB,OAAO,EACR,EAAE,QAAQ,CAAC,SAAS,CAAC,2CA8ErB;kBAxFQ,IAAI;;;AA4Fb,eAAe,IAAI,CAAC"}

package/dist/components/data-display/chip/chip.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Icon } from "../../system/icon/icon.js";
+import { chipSizes } from "../../../theme/size-tokens.js";
+import { colorVariants } from "../../../theme/tokens.js";
+function Chip({
+  children,
+  className = "",
+  variant = "neutral",
+  size = "md",
+  onRemove,
+  icon,
+  disabled = false,
+  clickable = false,
+  onClick
+}) {
+  const sizeClasses = chipSizes[size].classes;
+  const interactiveClasses = clickable && !disabled ? "cursor-pointer hover:opacity-80 active:opacity-60 transition-opacity" : "";
+  const disabledClasses = disabled ? "opacity-50 cursor-not-allowed" : "";
+  const handleClick = (e) => {
+    if (!disabled && clickable && onClick) {
+      onClick(e);
+    }
+  };
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    if (!disabled && onRemove) {
+      onRemove(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `
+        inline-flex items-center justify-center
+        rounded-full font-medium
+        ${sizeClasses}
+        ${colorVariants.badge[variant]}
+        ${interactiveClasses}
+        ${disabledClasses}
+        ${className}
+      `,
+      onClick: handleClick,
+      role: clickable ? "button" : void 0,
+      tabIndex: clickable && !disabled ? 0 : void 0,
+      onKeyDown: clickable && !disabled ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.(e);
+        }
+      } : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center", children: /* @__PURE__ */ jsx(Icon, { name: icon, size }) }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleRemove,
+            disabled,
+            className: `
+            shrink-0 flex items-center justify-center
+            rounded-full hover:bg-foreground/10
+            transition-colors
+            ${size === "sm" ? "w-3 h-3" : size === "md" ? "w-4 h-4" : "w-5 h-5"}
+            ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
+          `,
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size })
+          }
+        )
+      ]
+    }
+  );
+}
+Chip.displayName = "Chip";
+export {
+  Chip as default
+};
+//# sourceMappingURL=chip.js.map

package/dist/components/data-display/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sources":["../../../../src/components/data-display/chip/chip.tsx"],"sourcesContent":["import { ReactNode, MouseEvent } from 'react';\nimport { Icon } from '../../system/icon/icon';\n\nimport { chipSizes, Size } from '../../../theme/size-tokens';\nimport { ColorVariant, colorVariants } from '../../../theme/tokens';\n\nexport type ChipProps = {\n  /** Content to display inside the chip */\n  children: ReactNode;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Color variant for the chip (neutral, primary, success, warning, error) */\n  variant?: ColorVariant;\n  /** Size - uses unified size system */\n  size?: Size;\n  /** Callback when the remove/delete button is clicked */\n  onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Icon name to display at the start of the chip */\n  icon?: string;\n  /** Whether the chip is disabled */\n  disabled?: boolean;\n  /** Whether the chip is clickable */\n  clickable?: boolean;\n  /** Callback when the chip is clicked (requires clickable=true) */\n  onClick?: (e: MouseEvent<HTMLDivElement>) => void;\n};\n\n/**\n * Chip - Compact element for tags, filters, and selections\n *\n * Features:\n * - Color variants (neutral, primary, success, warning, error)\n * - Sizes (sm, md, lg)\n * - Optional remove button\n * - Optional icon\n * - Clickable state\n * - Disabled state\n *\n * Similar to Badge but with interaction (remove, click)\n */\nfunction Chip({\n  children,\n  className = '',\n  variant = 'neutral',\n  size = 'md',\n  onRemove,\n  icon,\n  disabled = false,\n  clickable = false,\n  onClick\n}: Readonly<ChipProps>) {\n  // Size classes from unified system\n  const sizeClasses = chipSizes[size].classes;\n\n  // Hover/active classes\n  const interactiveClasses =\n    clickable && !disabled ? 'cursor-pointer hover:opacity-80 active:opacity-60 transition-opacity' : '';\n\n  const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : '';\n\n  const handleClick = (e: MouseEvent<HTMLDivElement>) => {\n    if (!disabled && clickable && onClick) {\n      onClick(e);\n    }\n  };\n\n  const handleRemove = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation(); // Don't trigger chip onClick\n    if (!disabled && onRemove) {\n      onRemove(e);\n    }\n  };\n\n  return (\n    <div\n      className={`\n        inline-flex items-center justify-center\n        rounded-full font-medium\n        ${sizeClasses}\n        ${colorVariants.badge[variant]}\n        ${interactiveClasses}\n        ${disabledClasses}\n        ${className}\n      `}\n      onClick={handleClick}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable && !disabled ? 0 : undefined}\n      onKeyDown={\n        clickable && !disabled\n          ? (e) => {\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                onClick?.(e as unknown as MouseEvent<HTMLDivElement>);\n              }\n            }\n          : undefined\n      }\n    >\n      {/* Icon */}\n      {icon && (\n        <span className=\"shrink-0 flex items-center\">\n          <Icon name={icon} size={size} />\n        </span>\n      )}\n\n      {/* Content */}\n      <span className=\"truncate\">{children}</span>\n\n      {/* Remove button */}\n      {onRemove && (\n        <button\n          type=\"button\"\n          onClick={handleRemove}\n          disabled={disabled}\n          className={`\n            shrink-0 flex items-center justify-center\n            rounded-full hover:bg-foreground/10\n            transition-colors\n            ${size === 'sm' ? 'w-3 h-3' : size === 'md' ? 'w-4 h-4' : 'w-5 h-5'}\n            ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}\n          `}\n          aria-label=\"Remove\"\n        >\n          <Icon name=\"x\" size={size} />\n        </button>\n      )}\n    </div>\n  );\n}\n\nChip.displayName = 'Chip';\n\nexport default Chip;\n"],"names":[],"mappings":";;;;AAwCA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AACF,GAAwB;AAEtB,QAAM,cAAc,UAAU,IAAI,EAAE;AAGpC,QAAM,qBACJ,aAAa,CAAC,WAAW,yEAAyE;AAEpG,QAAM,kBAAkB,WAAW,kCAAkC;AAErE,QAAM,cAAc,CAAC,MAAkC;AACrD,QAAI,CAAC,YAAY,aAAa,SAAS;AACrC,cAAQ,CAAC;AAAA,IACX;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,MAAqC;AACzD,MAAE,gBAAA;AACF,QAAI,CAAC,YAAY,UAAU;AACzB,eAAS,CAAC;AAAA,IACZ;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,UAGP,WAAW;AAAA,UACX,cAAc,MAAM,OAAO,CAAC;AAAA,UAC5B,kBAAkB;AAAA,UAClB,eAAe;AAAA,UACf,SAAS;AAAA;AAAA,MAEb,SAAS;AAAA,MACT,MAAM,YAAY,WAAW;AAAA,MAC7B,UAAU,aAAa,CAAC,WAAW,IAAI;AAAA,MACvC,WACE,aAAa,CAAC,WACV,CAAC,MAAM;AACL,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAA;AACF,oBAAU,CAA0C;AAAA,QACtD;AAAA,MACF,IACA;AAAA,MAIL,UAAA;AAAA,QAAA,QACC,oBAAC,UAAK,WAAU,8BACd,8BAAC,MAAA,EAAK,MAAM,MAAM,KAAA,CAAY,EAAA,CAChC;AAAA,QAIF,oBAAC,QAAA,EAAK,WAAU,YAAY,SAAA,CAAS;AAAA,QAGpC,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT;AAAA,YACA,WAAW;AAAA;AAAA;AAAA;AAAA,cAIP,SAAS,OAAO,YAAY,SAAS,OAAO,YAAY,SAAS;AAAA,cACjE,WAAW,uBAAuB,gBAAgB;AAAA;AAAA,YAEtD,cAAW;AAAA,YAEX,UAAA,oBAAC,MAAA,EAAK,MAAK,KAAI,KAAA,CAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7B;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,KAAK,cAAc;"}

package/dist/components/data-display/chip/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Chip } from './chip';
+export type { ChipProps } from './chip';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/data-display/code-block/code-block.d.ts

@@ -0,0 +1,17 @@
+export type CodeBlockProps = {
+    /** Code content to display */
+    code: string;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Whether to show the copy-to-clipboard button */
+    showCopy?: boolean;
+};
+/**
+ * CodeBlock - Displays formatted code with syntax highlighting and copy functionality
+ */
+declare function CodeBlock({ code, className, showCopy }: Readonly<CodeBlockProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace CodeBlock {
+    var displayName: string;
+}
+export default CodeBlock;
+//# sourceMappingURL=code-block.d.ts.map

package/dist/components/data-display/code-block/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/code-block/code-block.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GAAG;IAC3B,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,iBAAS,SAAS,CAAC,EAAE,IAAI,EAAE,SAAc,EAAE,QAAe,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAkCrF;kBAlCQ,SAAS;;;AAsClB,eAAe,SAAS,CAAC"}

package/dist/components/data-display/code-block/code-block.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Button from "../../forms/button/button.js";
+function CodeBlock({ code, className = "", showCopy = true }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy code:", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `relative group ${className}`, children: [
+    showCopy && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "neutral",
+        style: "ghost",
+        size: "sm",
+        onClick: handleCopy,
+        className: "text-xs bg-background/80 hover:bg-background",
+        children: copied ? "✓ Copied" : "Copy"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("pre", { className: `bg-muted/50 border rounded-lg p-4 overflow-x-auto text-sm ${showCopy ? "pr-24" : ""}`, children: /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground", children: code }) })
+  ] });
+}
+CodeBlock.displayName = "CodeBlock";
+export {
+  CodeBlock as default
+};
+//# sourceMappingURL=code-block.js.map

package/dist/components/data-display/code-block/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","sources":["../../../../src/components/data-display/code-block/code-block.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Button from '../../forms/button/button';\n\nexport type CodeBlockProps = {\n  /** Code content to display */\n  code: string;\n  /** Additional CSS classes to apply */\n  className?: string;\n  /** Whether to show the copy-to-clipboard button */\n  showCopy?: boolean;\n};\n\n/**\n * CodeBlock - Displays formatted code with syntax highlighting and copy functionality\n */\nfunction CodeBlock({ code, className = '', showCopy = true }: Readonly<CodeBlockProps>) {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(code);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('Failed to copy code:', err);\n    }\n  };\n\n  return (\n    <div className={`relative group ${className}`}>\n      {showCopy && (\n        <div className=\"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity\">\n          <Button\n            variant=\"neutral\"\n            style=\"ghost\"\n            size=\"sm\"\n            onClick={handleCopy}\n            className=\"text-xs bg-background/80 hover:bg-background\"\n          >\n            {copied ? '✓ Copied' : 'Copy'}\n          </Button>\n        </div>\n      )}\n      <pre className={`bg-muted/50 border rounded-lg p-4 overflow-x-auto text-sm ${showCopy ? 'pr-24' : ''}`}>\n        <code className=\"font-mono text-foreground\">{code}</code>\n      </pre>\n    </div>\n  );\n}\n\nCodeBlock.displayName = 'CodeBlock';\n\nexport default CodeBlock;\n"],"names":[],"mappings":";;;AAgBA,SAAS,UAAU,EAAE,MAAM,YAAY,IAAI,WAAW,QAAkC;AACtF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,aAAa,YAAY;AAC7B,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,IAAI;AACxC,gBAAU,IAAI;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IACzC,SAAS,KAAK;AAEZ,cAAQ,MAAM,wBAAwB,GAAG;AAAA,IAC3C;AAAA,EACF;AAEA,SACE,qBAAC,OAAA,EAAI,WAAW,kBAAkB,SAAS,IACxC,UAAA;AAAA,IAAA,YACC,oBAAC,OAAA,EAAI,WAAU,+EACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QAET,mBAAS,aAAa;AAAA,MAAA;AAAA,IAAA,GAE3B;AAAA,IAEF,oBAAC,OAAA,EAAI,WAAW,6DAA6D,WAAW,UAAU,EAAE,IAClG,UAAA,oBAAC,QAAA,EAAK,WAAU,6BAA6B,gBAAK,EAAA,CACpD;AAAA,EAAA,GACF;AAEJ;AAEA,UAAU,cAAc;"}

package/dist/components/data-display/data-table/data-table.d.ts

@@ -0,0 +1,226 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../../forms/button/button';
+import { Size } from '../../../theme/size-tokens';
+import { ColorVariant } from '../../../theme/tokens';
+export type DataTableAction<T> = {
+    /** Icon name for the action button */
+    icon: string;
+    /** Size of the icon */
+    iconSize?: Size;
+    /** Color variant for the icon */
+    iconColor?: ColorVariant;
+    /** Icon to display on hover (optional) */
+    hoverIcon?: string;
+    /** Accessible label for the action (shown in tooltip or screen readers) */
+    label: string;
+    /** Tooltip text to display on hover. If not provided, label will be used for aria-label only. */
+    tooltip?: string;
+    /** Callback when the action is clicked */
+    onClick: (row: T, index: number) => void;
+    /** Visual variant for the action button */
+    variant?: 'primary' | 'accent' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+};
+export type DataTableActionItem<T> = DataTableAction<T> | ReactNode;
+export type ColumnDef<T> = {
+    /** Key of the data property to display in this column */
+    key: keyof T;
+    /** Column header label */
+    label: string;
+    /** Whether this column can be sorted */
+    sortable?: boolean;
+    /** CSS width class or value for the column */
+    width?: string;
+    /** Text alignment for cells in this column */
+    align?: 'left' | 'center' | 'right';
+    /** Whether text should wrap instead of truncating (useful for long strings) */
+    wrapText?: boolean;
+    /** Optional priority for responsive hiding. Lower values hide first when container width shrinks. Columns without hidePriority are never hidden. */
+    hidePriority?: number;
+    /** Custom render function for cell content (use as escape hatch when config options don't cover your use case) */
+    render?: (value: T[keyof T], row: T, index: number) => ReactNode;
+    /** Pre-built formatter for common data types */
+    format?: 'date' | 'currency' | 'number' | 'percent';
+    /** Options for Intl formatters (NumberFormat or DateTimeFormat) */
+    formatOptions?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
+    /** Map values to badge variants. Unmatched values render with 'neutral' variant. Use '*' key to override the default fallback. */
+    badgeMap?: {
+        [key: string]: {
+            variant?: ColorVariant;
+            label?: string;
+        };
+    };
+    /**
+     * Render cell values as badges. When the value is an array, each item is rendered
+     * as an individual badge; for scalar values, the value is wrapped in a single badge.
+     */
+    renderAsBadges?: boolean;
+    /** Variant for badge rendering */
+    badgeVariant?: ColorVariant;
+    /** Size for badge rendering */
+    componentSize?: 'sm' | 'md' | 'lg';
+    /** Fallback value to display when cell value is null, undefined, or empty string */
+    fallback?: string;
+};
+export type DataTableProps<T> = {
+    /** Array of data objects to display in the table */
+    data: T[];
+    /** Column definitions specifying how to render each column */
+    columns: ColumnDef<T>[];
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Whether to apply striped row styling (alternating background) */
+    striped?: boolean;
+    /** Whether to show borders around the table */
+    bordered?: boolean;
+    /** Whether rows have hover effects */
+    hoverable?: boolean;
+    /** Whether to use compact spacing for dense data */
+    compact?: boolean;
+    /** Whether the table header should stick to the top on scroll */
+    stickyHeader?: boolean;
+    /** Whether columns can be sorted (can be overridden per column) */
+    sortable?: boolean;
+    /** Whether to enable client-side pagination */
+    paginated?: boolean;
+    /** Number of rows per page when pagination is enabled */
+    pageSize?: number;
+    /** Whether to show checkboxes for row selection */
+    selectable?: boolean;
+    /** Whether to enable search/filter functionality */
+    searchable?: boolean;
+    /** Specific keys to search within. If not provided, searches all fields. */
+    searchKeys?: (keyof T)[];
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Callback when search query changes */
+    onSearchChange?: (query: string) => void;
+    /** Action buttons, function returning actions based on row data, or custom render function for the actions column */
+    actions?: DataTableActionItem<T>[] | ((row: T, index: number) => DataTableActionItem<T>[] | ReactNode);
+    /** Label for the actions column header */
+    actionsLabel?: string;
+    /** CSS width class for the actions column */
+    actionsWidth?: string;
+    /** Alignment for actions in the cell: 'start'|'center'|'end' (defaults to 'end') */
+    actionsJustify?: 'start' | 'center' | 'end';
+    /** Callback when a row is clicked */
+    onRowClick?: (row: T, index: number) => void;
+    /** Callback when row selection changes (provides array of selected row indices) */
+    onSelectionChange?: (selectedIndices: number[]) => void;
+    emptyState?: {
+        /** Message to display when there is no data */
+        title?: string;
+        /** Description to display when there is no data */
+        description?: string;
+        /** Text for the button in the empty state */
+        buttonText?: string;
+        /** Click handler for the button in the empty state */
+        onButtonClick?: () => void;
+    };
+    /** Initial sort configuration */
+    initialSort?: {
+        key: keyof T;
+        direction: 'asc' | 'desc';
+    };
+    /** Title displayed above the table (left side of header) */
+    title?: string;
+    /** Header actions displayed above the table (right side of header). */
+    headerActions?: HeaderAction[];
+};
+export type HeaderAction = {
+    /** Button text; if omitted and `icon` provided, button will be icon-only */
+    label?: string;
+    /** Icon name to render inside the button (maps to library `Icon`) */
+    icon?: string;
+    /** Click handler invoked when the button is clicked */
+    onClick?: () => void;
+    /** Button variant (maps to Button `variant` prop) */
+    variant?: ButtonProps['variant'];
+    /** Button style (maps to Button `style` prop) */
+    style?: ButtonProps['style'];
+    /** Button size (maps to Button `size` prop) */
+    size?: ButtonProps['size'];
+    /** Additional className forwarded to the Button */
+    className?: string;
+};
+/**
+ * DataTable - High-level data-driven table component
+ *
+ * Features:
+ * - Generic typed data and columns
+ * - Client-side sorting
+ * - Client-side pagination
+ * - Row selection with checkboxes
+ * - Custom cell rendering
+ * - Flexible actions: simple array config OR custom render function
+ * - Empty state handling
+ * - Sticky headers
+ * - Click handlers
+ *
+ * Built on top of low-level Table primitives.
+ *
+ * @example
+ * ```tsx
+ * // Simple: Pass array of action configs (recommended)
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   title="Users"
+ *   headerActions={<Button onClick={handleCreate}>New</Button>}
+ *   actions={[
+ *     {
+ *       icon: "edit",
+ *       label: 'Edit user',
+ *       onClick: (row, index) => handleEdit(row, index),
+ *       variant: 'neutral'
+ *     },
+ *     {
+ *       icon: "trash",
+ *       label: 'Delete user',
+ *       onClick: (row, index) => handleDelete(row, index),
+ *       variant: 'error'
+ *     }
+ *   ]}
+ * />
+ *
+ * // Dynamic: Return different actions based on row data
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   actions={(row) => [
+ *     {
+ *       icon: "edit",
+ *       label: 'Edit user',
+ *       onClick: (r, i) => handleEdit(r, i),
+ *       variant: 'neutral'
+ *     },
+ *     // Conditionally include delete action
+ *     ...(!row.isDefault ? [{
+ *       icon: "trash",
+ *       label: 'Delete user',
+ *       onClick: (r, i) => handleDelete(r, i),
+ *       variant: 'error'
+ *     }] : [])
+ *   ]}
+ * />
+ *
+ * // Advanced: Custom render function for full control
+ * <DataTable
+ *   data={users}
+ *   columns={columns}
+ *   actions={(row, index) => (
+ *     <DataTableActions
+ *       row={row}
+ *       index={index}
+ *       onEdit={handleEdit}
+ *       onDelete={handleDelete}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+declare function DataTable<T>({ data, columns, className, striped, bordered, hoverable, compact, stickyHeader, sortable, paginated, pageSize, selectable, searchable, searchKeys, searchPlaceholder, onSearchChange, actions, actionsLabel, actionsWidth, actionsJustify, onRowClick, onSelectionChange, emptyState, headerActions, title, initialSort }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+export default DataTable;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-display/data-table/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-table/data-table.tsx"],"names":[],"mappings":"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"}