@lablup/ui-common 0.1.0-alpha.0

package/dist/components/BaseCard/BaseCard.d.ts

@@ -0,0 +1,57 @@
+import { default as React } from 'react';
+export type BaseCardVariant = "default" | "installed" | "available";
+export type BaseCardState = "idle" | "loading" | "active" | "disabled" | "warning";
+export type BaseCardDirection = "column" | "row";
+export interface BaseCardProps {
+    /** Card content */
+    children: React.ReactNode;
+    /** Additional CSS class names */
+    className?: string;
+    /**
+     * Inline style escape hatch. Intended for passing dynamic CSS custom
+     * properties (e.g. `{ "--corner-accent-color": brandColor }`) that cannot be
+     * expressed as a static class. Avoid using it for static layout.
+     */
+    style?: React.CSSProperties;
+    /** Click handler - also enables clickable styling */
+    onClick?: () => void;
+    /** Keyboard event handler */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    /** Whether the card should have clickable styling (auto-enabled if onClick provided) */
+    clickable?: boolean;
+    /** Card visual variant */
+    variant?: BaseCardVariant;
+    /**
+     * Flex layout direction of the card's content.
+     * Defaults to `"column"` (content stacks vertically). Pass `"row"` for a
+     * horizontal layout (icon + content, text + badge, info + actions). Without
+     * this, a horizontal layout silently collapses into a centered vertical
+     * stack because the base style forces `flex-direction: column`.
+     */
+    direction?: BaseCardDirection;
+    /** Card state for animations and visual feedback */
+    state?: BaseCardState;
+    /** Whether to show hover effects (default: true) */
+    hoverable?: boolean;
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** ARIA role override (default: "button" when clickable) */
+    role?: string;
+    /** ARIA checked state for radio/checkbox roles */
+    ariaChecked?: boolean;
+    /** Tab index for keyboard navigation */
+    tabIndex?: number;
+    /** Test ID for testing */
+    testId?: string;
+}
+/**
+ * BaseCard provides a consistent foundation for card-style UI components.
+ *
+ * Features:
+ * - Unified hover effects (lift, shadow, border)
+ * - State-based styling (loading, active, disabled)
+ * - Accessibility support (keyboard navigation, focus styles)
+ * - Reduced motion preference support
+ */
+export declare const BaseCard: React.ForwardRefExoticComponent<BaseCardProps & React.RefAttributes<HTMLDivElement>>;
+export default BaseCard;

package/dist/components/BaseCard/BaseCard2.js

@@ -0,0 +1,36 @@
+/* empty css         */
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/BaseCard/BaseCard.tsx
+var n = e(({ children: e, className: n = "", style: r, onClick: i, onKeyDown: a, clickable: o, variant: s = "default", direction: c = "column", state: l = "idle", hoverable: u = !0, ariaLabel: d, role: f, ariaChecked: p, tabIndex: m, testId: h }, g) => {
+	let _ = o ?? !!i, v = (e) => {
+		a && a(e), _ && i && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), i());
+	}, y = [
+		"base-card",
+		`base-card--${s}`,
+		c === "row" && "base-card--row",
+		u && "base-card--hoverable",
+		_ && "base-card--clickable",
+		l !== "idle" && `base-card--${l}`,
+		n
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t("div", {
+		ref: g,
+		className: y,
+		style: r,
+		onClick: i,
+		onKeyDown: v,
+		role: f ?? (_ ? "button" : void 0),
+		tabIndex: _ ? m ?? 0 : m,
+		"aria-label": d,
+		"aria-checked": p,
+		"aria-disabled": l === "disabled" || void 0,
+		"data-testid": h,
+		children: e
+	});
+});
+n.displayName = "BaseCard";
+//#endregion
+export { n as BaseCard, n as default };
+
+//# sourceMappingURL=BaseCard2.js.map

package/dist/components/BaseCard/BaseCard2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCard2.js","names":[],"sources":["../../../src/components/BaseCard/BaseCard.tsx"],"sourcesContent":["/**\n * BaseCard Component\n *\n * Common card foundation providing unified hover, animation, and state effects.\n * Use this component to ensure consistent UI/UX across all card-style components.\n *\n * @example\n * // Basic usage\n * <BaseCard>\n *   <h3>Card Title</h3>\n *   <p>Card content</p>\n * </BaseCard>\n *\n * @example\n * // Clickable card with loading state\n * <BaseCard\n *   clickable\n *   onClick={handleClick}\n *   state=\"loading\"\n * >\n *   <CardContent />\n * </BaseCard>\n */\n\nimport React, { forwardRef } from \"react\";\nimport \"./BaseCard.css\";\n\nexport type BaseCardVariant = \"default\" | \"installed\" | \"available\";\nexport type BaseCardState = \"idle\" | \"loading\" | \"active\" | \"disabled\" | \"warning\";\nexport type BaseCardDirection = \"column\" | \"row\";\n\nexport interface BaseCardProps {\n  /** Card content */\n  children: React.ReactNode;\n  /** Additional CSS class names */\n  className?: string;\n  /**\n   * Inline style escape hatch. Intended for passing dynamic CSS custom\n   * properties (e.g. `{ \"--corner-accent-color\": brandColor }`) that cannot be\n   * expressed as a static class. Avoid using it for static layout.\n   */\n  style?: React.CSSProperties;\n  /** Click handler - also enables clickable styling */\n  onClick?: () => void;\n  /** Keyboard event handler */\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  /** Whether the card should have clickable styling (auto-enabled if onClick provided) */\n  clickable?: boolean;\n  /** Card visual variant */\n  variant?: BaseCardVariant;\n  /**\n   * Flex layout direction of the card's content.\n   * Defaults to `\"column\"` (content stacks vertically). Pass `\"row\"` for a\n   * horizontal layout (icon + content, text + badge, info + actions). Without\n   * this, a horizontal layout silently collapses into a centered vertical\n   * stack because the base style forces `flex-direction: column`.\n   */\n  direction?: BaseCardDirection;\n  /** Card state for animations and visual feedback */\n  state?: BaseCardState;\n  /** Whether to show hover effects (default: true) */\n  hoverable?: boolean;\n  /** Accessibility label */\n  ariaLabel?: string;\n  /** ARIA role override (default: \"button\" when clickable) */\n  role?: string;\n  /** ARIA checked state for radio/checkbox roles */\n  ariaChecked?: boolean;\n  /** Tab index for keyboard navigation */\n  tabIndex?: number;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * BaseCard provides a consistent foundation for card-style UI components.\n *\n * Features:\n * - Unified hover effects (lift, shadow, border)\n * - State-based styling (loading, active, disabled)\n * - Accessibility support (keyboard navigation, focus styles)\n * - Reduced motion preference support\n */\nexport const BaseCard = forwardRef<HTMLDivElement, BaseCardProps>(\n  (\n    {\n      children,\n      className = \"\",\n      style,\n      onClick,\n      onKeyDown,\n      clickable,\n      variant = \"default\",\n      direction = \"column\",\n      state = \"idle\",\n      hoverable = true,\n      ariaLabel,\n      role,\n      ariaChecked,\n      tabIndex,\n      testId,\n    },\n    ref,\n  ) => {\n    const isClickable = clickable ?? !!onClick;\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (onKeyDown) {\n        onKeyDown(e);\n      }\n      // Allow Enter or Space to trigger click for accessibility\n      if (isClickable && onClick && (e.key === \"Enter\" || e.key === \" \")) {\n        e.preventDefault();\n        onClick();\n      }\n    };\n\n    const classNames = [\n      \"base-card\",\n      `base-card--${variant}`,\n      direction === \"row\" && \"base-card--row\",\n      hoverable && \"base-card--hoverable\",\n      isClickable && \"base-card--clickable\",\n      state !== \"idle\" && `base-card--${state}`,\n      className,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    // Determine the role: explicit role > \"button\" for clickable > undefined\n    const effectiveRole = role ?? (isClickable ? \"button\" : undefined);\n\n    return (\n      <div\n        ref={ref}\n        className={classNames}\n        style={style}\n        onClick={onClick}\n        onKeyDown={handleKeyDown}\n        role={effectiveRole}\n        tabIndex={isClickable ? (tabIndex ?? 0) : tabIndex}\n        aria-label={ariaLabel}\n        aria-checked={ariaChecked}\n        aria-disabled={state === \"disabled\" ? true : undefined}\n        data-testid={testId}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nBaseCard.displayName = \"BaseCard\";\n\nexport default BaseCard;\n"],"mappings":";;;;AAmFA,IAAa,IAAW,GAEpB,EACE,aACA,eAAY,IACZ,UACA,YACA,cACA,cACA,aAAU,WACV,eAAY,UACZ,WAAQ,QACR,eAAY,IACZ,cACA,SACA,gBACA,aACA,aAEF,MACG;CACH,IAAM,IAAc,KAAa,CAAC,CAAC,GAE7B,KAAiB,MAA2B;EAKhD,AAJI,KACF,EAAU,CAAC,GAGT,KAAe,MAAY,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC5D,EAAE,eAAe,GACjB,EAAQ;CAEZ,GAEM,IAAa;EACjB;EACA,cAAc;EACd,MAAc,SAAS;EACvB,KAAa;EACb,KAAe;EACf,MAAU,UAAU,cAAc;EAClC;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAKX,OACE,kBAAC,OAAD;EACO;EACL,WAAW;EACJ;EACE;EACT,WAAW;EACX,MATkB,MAAS,IAAc,WAAW,KAAA;EAUpD,UAAU,IAAe,KAAY,IAAK;EAC1C,cAAY;EACZ,gBAAc;EACd,iBAAe,MAAU,cAAoB,KAAA;EAC7C,eAAa;EAEZ;CACE,CAAA;AAET,CACF;AAEA,EAAS,cAAc"}

package/dist/components/BaseCard/index.d.ts

@@ -0,0 +1,2 @@
+export { BaseCard, default } from './BaseCard';
+export type { BaseCardProps, BaseCardVariant, BaseCardState } from './BaseCard';

package/dist/components/BaseCard/index.js

@@ -0,0 +1,2 @@
+import { BaseCard as e } from "./BaseCard2.js";
+export { e as BaseCard, e as default };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,54 @@
+export interface ButtonProps {
+    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onDoubleClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    variant?: "primary" | "secondary" | "danger" | "success" | "ghost" | "text" | "outline";
+    size?: "xsmall" | "small" | "medium" | "large";
+    shape?: "default" | "circle";
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    iconOnly?: boolean;
+    /**
+     * Inline mode (default: false). When true, the Button acts as a thin
+     * styling shell over a consumer-owned layout:
+     *
+     * - `min-height` is reset to `auto` so the host CSS controls height
+     * - the ghost-variant hover/active translate + box-shadow are
+     *   suppressed (no jitter)
+     * - children render directly inside the `<button>` element, without
+     *   being wrapped in `<span class="button__text">` — useful when the
+     *   consumer needs the icon and label to sit on the same baseline
+     *   using its own flex/grid layout
+     *
+     * Use this for compact triggers (selector trigger, badge button,
+     * inline action button) that have their own padding, height, and
+     * icon+text layout and only want Button for variant theming and
+     * accessibility wiring.
+     */
+    inline?: boolean;
+    loading?: boolean;
+    active?: boolean;
+    ariaLabel?: string;
+    title?: string;
+    role?: React.AriaRole;
+    id?: string;
+    tabIndex?: number;
+    "aria-pressed"?: boolean;
+    "aria-checked"?: boolean;
+    "aria-selected"?: boolean;
+    "aria-expanded"?: boolean;
+    "aria-haspopup"?: boolean | "menu" | "listbox" | "tree" | "grid" | "dialog";
+    "aria-controls"?: string;
+    "aria-describedby"?: string;
+    "aria-busy"?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    "data-testid"?: string;
+}
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button2.js

@@ -0,0 +1,74 @@
+/* empty css       */
+import { forwardRef as e, useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Button/Button.tsx
+var i = e(function({ children: e, onClick: i, onDoubleClick: a, onMouseDown: o, onMouseEnter: s, onKeyDown: c, type: l = "button", disabled: u = !1, variant: d = "secondary", size: f = "medium", shape: p = "default", fullWidth: m = !1, icon: h, iconPosition: g = "left", iconOnly: _ = !1, inline: v = !1, loading: y = !1, active: b = !1, ariaLabel: x, title: S, role: C, id: w, tabIndex: T, className: E = "", style: D, "aria-pressed": O, "aria-checked": k, "aria-selected": A, "aria-expanded": j, "aria-haspopup": M, "aria-controls": N, "aria-describedby": P, "aria-busy": F, "data-testid": I }, L) {
+	let R = t((e) => {
+		!u && !y && i && i(e);
+	}, [
+		u,
+		y,
+		i
+	]), z = [
+		"button",
+		`button--${d}`,
+		`button--${f}`,
+		p !== "default" && `button--${p}`,
+		m && "button--full-width",
+		_ && "button--icon-only",
+		v && "button--inline",
+		y && "button--loading",
+		b && "button--active",
+		E
+	].filter(Boolean).join(" "), B = h ?? (_ ? e : void 0), V = !_ && e, H = B && !y;
+	return /* @__PURE__ */ r("button", {
+		ref: L,
+		type: l,
+		onClick: R,
+		onDoubleClick: a,
+		onMouseDown: o,
+		onMouseEnter: s,
+		onKeyDown: c,
+		disabled: u || y,
+		className: z,
+		"aria-label": x ?? (_ && typeof e == "string" ? e : void 0),
+		title: S,
+		role: C,
+		id: w,
+		tabIndex: T,
+		style: D,
+		"aria-pressed": O,
+		"aria-checked": k,
+		"aria-selected": A,
+		"aria-expanded": j,
+		"aria-haspopup": M,
+		"aria-controls": N,
+		"aria-describedby": P,
+		"aria-busy": F,
+		"data-testid": I,
+		children: [
+			y && /* @__PURE__ */ n("span", {
+				className: "button__loading-spinner",
+				"aria-hidden": "true"
+			}),
+			H && g === "left" && /* @__PURE__ */ n("span", {
+				className: "button__icon",
+				"aria-hidden": "true",
+				children: B
+			}),
+			V && (v ? e : /* @__PURE__ */ n("span", {
+				className: "button__text",
+				children: e
+			})),
+			H && g === "right" && /* @__PURE__ */ n("span", {
+				className: "button__icon",
+				"aria-hidden": "true",
+				children: B
+			})
+		]
+	});
+});
+//#endregion
+export { i as Button };
+
+//# sourceMappingURL=Button2.js.map

package/dist/components/Button/Button2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button2.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/**\n * Button Component\n *\n * Shared button component that consolidates all button styles across the application.\n * Supports multiple variants, sizes, shapes, icons, loading and active states.\n */\n\nimport { forwardRef, useCallback } from \"react\";\nimport \"./Button.css\";\n\nexport interface ButtonProps {\n  children?: React.ReactNode;\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onDoubleClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n  type?: \"button\" | \"submit\" | \"reset\";\n  disabled?: boolean;\n\n  // Styling variants\n  variant?:\n    \"primary\" | \"secondary\" | \"danger\" | \"success\" | \"ghost\" | \"text\" | \"outline\";\n  size?: \"xsmall\" | \"small\" | \"medium\" | \"large\";\n  shape?: \"default\" | \"circle\";\n  fullWidth?: boolean;\n\n  // Icon support\n  icon?: React.ReactNode;\n  iconPosition?: \"left\" | \"right\";\n  iconOnly?: boolean;\n\n  /**\n   * Inline mode (default: false). When true, the Button acts as a thin\n   * styling shell over a consumer-owned layout:\n   *\n   * - `min-height` is reset to `auto` so the host CSS controls height\n   * - the ghost-variant hover/active translate + box-shadow are\n   *   suppressed (no jitter)\n   * - children render directly inside the `<button>` element, without\n   *   being wrapped in `<span class=\"button__text\">` — useful when the\n   *   consumer needs the icon and label to sit on the same baseline\n   *   using its own flex/grid layout\n   *\n   * Use this for compact triggers (selector trigger, badge button,\n   * inline action button) that have their own padding, height, and\n   * icon+text layout and only want Button for variant theming and\n   * accessibility wiring.\n   */\n  inline?: boolean;\n\n  // States\n  loading?: boolean;\n  active?: boolean;\n\n  // Accessibility\n  ariaLabel?: string;\n  title?: string;\n  role?: React.AriaRole;\n  id?: string;\n  tabIndex?: number;\n  \"aria-pressed\"?: boolean;\n  \"aria-checked\"?: boolean;\n  \"aria-selected\"?: boolean;\n  \"aria-expanded\"?: boolean;\n  \"aria-haspopup\"?: boolean | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\";\n  \"aria-controls\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-busy\"?: boolean;\n\n  // Additional\n  className?: string;\n  style?: React.CSSProperties;\n  \"data-testid\"?: string;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    children,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    onMouseEnter,\n    onKeyDown,\n    type = \"button\",\n    disabled = false,\n    variant = \"secondary\",\n    size = \"medium\",\n    shape = \"default\",\n    fullWidth = false,\n    icon,\n    iconPosition = \"left\",\n    iconOnly = false,\n    inline = false,\n    loading = false,\n    active = false,\n    ariaLabel,\n    title,\n    role,\n    id,\n    tabIndex,\n    className = \"\",\n    style,\n    \"aria-pressed\": ariaPressed,\n    \"aria-checked\": ariaChecked,\n    \"aria-selected\": ariaSelected,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-haspopup\": ariaHasPopup,\n    \"aria-controls\": ariaControls,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-busy\": ariaBusy,\n    \"data-testid\": dataTestId,\n  },\n  ref,\n) {\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLButtonElement>) => {\n      if (!disabled && !loading && onClick) {\n        onClick(e);\n      }\n    },\n    [disabled, loading, onClick],\n  );\n\n  const classNames = [\n    \"button\",\n    `button--${variant}`,\n    `button--${size}`,\n    shape !== \"default\" && `button--${shape}`,\n    fullWidth && \"button--full-width\",\n    iconOnly && \"button--icon-only\",\n    inline && \"button--inline\",\n    loading && \"button--loading\",\n    active && \"button--active\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  // When iconOnly but no icon prop provided, treat children as icon content\n  // This supports both patterns: icon={<Svg/>} and <Button iconOnly><Svg/></Button>\n  const iconContent = icon ?? (iconOnly ? children : undefined);\n  const hasText = !iconOnly && children;\n  const showIcon = iconContent && !loading;\n  const showLoadingSpinner = loading;\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      onClick={handleClick}\n      onDoubleClick={onDoubleClick}\n      onMouseDown={onMouseDown}\n      onMouseEnter={onMouseEnter}\n      onKeyDown={onKeyDown}\n      disabled={disabled || loading}\n      className={classNames}\n      aria-label={\n        ariaLabel ?? (iconOnly && typeof children === \"string\" ? children : undefined)\n      }\n      title={title}\n      role={role}\n      id={id}\n      tabIndex={tabIndex}\n      style={style}\n      aria-pressed={ariaPressed}\n      aria-checked={ariaChecked}\n      aria-selected={ariaSelected}\n      aria-expanded={ariaExpanded}\n      aria-haspopup={ariaHasPopup}\n      aria-controls={ariaControls}\n      aria-describedby={ariaDescribedBy}\n      aria-busy={ariaBusy}\n      data-testid={dataTestId}\n    >\n      {showLoadingSpinner && (\n        <span className=\"button__loading-spinner\" aria-hidden=\"true\" />\n      )}\n\n      {showIcon && iconPosition === \"left\" && (\n        <span className=\"button__icon\" aria-hidden=\"true\">\n          {iconContent}\n        </span>\n      )}\n\n      {hasText &&\n        (inline ? children : <span className=\"button__text\">{children}</span>)}\n\n      {showIcon && iconPosition === \"right\" && (\n        <span className=\"button__icon\" aria-hidden=\"true\">\n          {iconContent}\n        </span>\n      )}\n    </button>\n  );\n});\n"],"mappings":";;;;AA4EA,IAAa,IAAS,EAA2C,SAC/D,EACE,aACA,YACA,kBACA,gBACA,iBACA,cACA,UAAO,UACP,cAAW,IACX,aAAU,aACV,UAAO,UACP,WAAQ,WACR,eAAY,IACZ,SACA,kBAAe,QACf,cAAW,IACX,YAAS,IACT,aAAU,IACV,YAAS,IACT,cACA,UACA,SACA,OACA,aACA,eAAY,IACZ,UACA,gBAAgB,GAChB,gBAAgB,GAChB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,oBAAoB,GACpB,aAAa,GACb,eAAe,KAEjB,GACA;CACA,IAAM,IAAc,GACjB,MAA2C;EAC1C,AAAI,CAAC,KAAY,CAAC,KAAW,KAC3B,EAAQ,CAAC;CAEb,GACA;EAAC;EAAU;EAAS;CAAO,CAC7B,GAEM,IAAa;EACjB;EACA,WAAW;EACX,WAAW;EACX,MAAU,aAAa,WAAW;EAClC,KAAa;EACb,KAAY;EACZ,KAAU;EACV,KAAW;EACX,KAAU;EACV;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAIL,IAAc,MAAS,IAAW,IAAW,KAAA,IAC7C,IAAU,CAAC,KAAY,GACvB,IAAW,KAAe,CAAC;CAGjC,OACE,kBAAC,UAAD;EACO;EACC;EACN,SAAS;EACM;EACF;EACC;EACH;EACX,UAAU,KAAY;EACtB,WAAW;EACX,cACE,MAAc,KAAY,OAAO,KAAa,WAAW,IAAW,KAAA;EAE/D;EACD;EACF;EACM;EACH;EACP,gBAAc;EACd,gBAAc;EACd,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,oBAAkB;EAClB,aAAW;EACX,eAAa;EA1Bf,UAAA;GA4BG,KACC,kBAAC,QAAD;IAAM,WAAU;IAA0B,eAAY;GAAQ,CAAA;GAG/D,KAAY,MAAiB,UAC5B,kBAAC,QAAD;IAAM,WAAU;IAAe,eAAY;IACxC,UAAA;GACG,CAAA;GAGP,MACE,IAAS,IAAW,kBAAC,QAAD;IAAM,WAAU;IAAgB;GAAe,CAAA;GAErE,KAAY,MAAiB,WAC5B,kBAAC,QAAD;IAAM,WAAU;IAAe,eAAY;IACxC,UAAA;GACG,CAAA;EAEF;;AAEZ,CAAC"}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Button Component
+ */
+export { Button } from './Button';
+export type { ButtonProps } from './Button';

package/dist/components/Button/index.js

@@ -0,0 +1,2 @@
+import { Button as e } from "./Button2.js";
+export { e as Button };

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,133 @@
+import { ReactNode } from 'react';
+/** Direction a column is currently sorted. */
+export type SortDirection = "asc" | "desc";
+export interface DataTableColumn<T> {
+    /** Unique identifier for the column. Used for visibility + width persistence. */
+    id: string;
+    /** Header label. */
+    header: ReactNode;
+    /**
+     * Cell renderer. Receives the row and returns a React node. Pure
+     * functions are encouraged so memoization stays effective.
+     */
+    render: (row: T, index: number) => ReactNode;
+    /** Optional minimum column width in pixels. Defaults to 80. */
+    minWidth?: number;
+    /** Optional initial width in pixels (only honored on the first paint). */
+    initialWidth?: number;
+    /** When `true`, the column cannot be resized. Defaults to `false`. */
+    noResize?: boolean;
+    /** When `true`, the column cannot be hidden by the user. Defaults to `false`. */
+    alwaysVisible?: boolean;
+    /** Extra `class` for the column's `<th>` and `<td>` cells. */
+    className?: string;
+    /**
+     * When provided, the value is exposed via the `align` style on the
+     * column's cells. Useful for right-aligned numeric columns.
+     */
+    align?: "left" | "right" | "center";
+    /**
+     * When `true`, the column header renders a sort affordance and clicking
+     * (or pressing Enter / Space) cycles through ascending → descending →
+     * unsorted states. Defaults to `false`.
+     */
+    sortable?: boolean;
+    /**
+     * Extracts a primitive comparable value from a row for sorting purposes.
+     * Used when the default ascending/descending behavior is sufficient.
+     * Mutually exclusive with `sortComparator` — if both are provided,
+     * `sortComparator` takes precedence.
+     *
+     * @example
+     * ```tsx
+     * sortValueAccessor: (row) => row.name.toLowerCase()
+     * ```
+     */
+    sortValueAccessor?: (row: T) => string | number | boolean | null | undefined;
+    /**
+     * Custom comparator used for sorting. Receives two rows and the active
+     * sort direction. Return a negative number if `a` should come first, a
+     * positive number if `b` should come first, or `0` if they are equal.
+     * The table applies a stable fallback on `0` to preserve original order.
+     *
+     * @example
+     * ```tsx
+     * sortComparator: (a, b, dir) =>
+     *   dir === "asc"
+     *     ? a.createdAt - b.createdAt
+     *     : b.createdAt - a.createdAt
+     * ```
+     */
+    sortComparator?: (a: T, b: T, direction: SortDirection) => number;
+    /**
+     * The sort direction applied when this column is first activated.
+     * Defaults to `"asc"`.
+     */
+    defaultSortDirection?: SortDirection;
+}
+export interface DataTablePersistedState {
+    /** column id → user-overridden width in pixels. */
+    widths: Record<string, number>;
+    /** column id → visibility flag. Missing keys count as visible. */
+    visibility: Record<string, boolean>;
+}
+export interface DataTableProps<T> {
+    /** Column definitions, in display order. */
+    columns: DataTableColumn<T>[];
+    /** Row data. */
+    rows: T[];
+    /**
+     * Stable identifier accessor — used as the React key for each row.
+     * Must be deterministic for the lifetime of the row.
+     */
+    getRowKey: (row: T, index: number) => string;
+    /** Render this node when `rows` is empty. */
+    emptyState?: ReactNode;
+    /** Render this node when `loading` is `true`. */
+    loadingState?: ReactNode;
+    /** When `true`, the loading slot replaces the table body. */
+    loading?: boolean;
+    /**
+     * When provided, column widths and visibility settings are persisted
+     * to `localStorage` under this key. Use a stable, namespaced string
+     * (e.g. `"sessions.activeTab"`).
+     */
+    persistKey?: string;
+    /** Extra class for the table's wrapping element. */
+    className?: string;
+    /** ARIA label for the table. Defaults to "Data table". */
+    ariaLabel?: string;
+    /** Test ID for testing harnesses. */
+    testId?: string;
+    /**
+     * Callback invoked when a row is clicked. When provided, rows render
+     * with a clickable affordance (cursor: pointer + keyboard binding).
+     */
+    onRowClick?: (row: T) => void;
+    /**
+     * Controlled — the column currently being sorted. Pass `undefined` to
+     * indicate no active sort. When this prop is present, the component
+     * operates in controlled mode: the caller is responsible for updating
+     * the sort state via `onSortChange`.
+     */
+    sortColumnId?: string;
+    /**
+     * Controlled — the direction of the active sort. Ignored when
+     * `sortColumnId` is `undefined`.
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Called when the user activates a sortable column header. In
+     * controlled mode the caller must propagate this back as
+     * `sortColumnId` / `sortDirection`. In uncontrolled mode this prop is
+     * purely observational.
+     *
+     * @param columnId  The column being sorted, or `undefined` when the
+     *                  sort is cleared.
+     * @param direction The new direction.
+     */
+    onSortChange?: (columnId: string | undefined, direction: SortDirection | undefined) => void;
+}
+declare function DataTableInner<T>({ columns, rows, getRowKey, emptyState, loadingState, loading, persistKey, className, ariaLabel, testId, onRowClick, sortColumnId: controlledSortColumnId, sortDirection: controlledSortDirection, onSortChange, }: DataTableProps<T>): import("react").JSX.Element;
+export declare const DataTable: typeof DataTableInner;
+export default DataTable;