@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Table/index.js

@@ -1,76 +1,597 @@
+"use client";
 'use strict';
 
-var chunk4E4E2GSS_js = require('../../chunk-4E4E2GSS.js');
-require('../../chunk-Q3572X2J.js');
-require('../../chunk-B5Q4UPL6.js');
-require('../../chunk-VIREG536.js');
-require('../../chunk-T4COXKQ3.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
 
+// src/elements/Table/Table.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 
-
-Object.defineProperty(exports, "Cell", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.Cell; }
-});
-Object.defineProperty(exports, "Column", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.Column; }
-});
-Object.defineProperty(exports, "Row", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.Row; }
-});
-Object.defineProperty(exports, "Table", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.Table; }
-});
-Object.defineProperty(exports, "TableBody", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.TableBody; }
-});
-Object.defineProperty(exports, "TableCaption", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.TableCaption; }
-});
-Object.defineProperty(exports, "TableFooter", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.TableFooter; }
-});
-Object.defineProperty(exports, "TableHeader", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.TableHeader; }
+// src/styles/interaction-states.ts
+var FOCUS_STYLES = "data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2";
+var HIGH_CONTRAST_FOCUS = "hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground";
+var checkboxContainerVariants = classVarianceAuthority.cva(
+  [
+    "group inline-flex items-center gap-2 cursor-pointer",
+    "transition-colors duration-200",
+    "rtl:flex-row-reverse",
+    FOCUS_STYLES,
+    HIGH_CONTRAST_FOCUS
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "min-h-[44px] text-sm",
+        default: "min-h-[44px] text-sm",
+        lg: "min-h-[48px] text-base"
+      },
+      isDisabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      isDisabled: false
+    }
+  }
+);
+var checkboxIndicatorVariants = classVarianceAuthority.cva(
+  "flex-shrink-0 rounded-sm border-2 flex items-center justify-center transition-colors duration-200",
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-[var(--border)]",
+          "data-[selected]:border-[var(--primary)]",
+          "data-[selected]:bg-[var(--primary)]",
+          "data-[indeterminate]:border-[var(--primary)]",
+          "data-[indeterminate]:bg-[var(--primary)]"
+        ].join(" "),
+        destructive: [
+          "border-[var(--border)]",
+          "data-[selected]:border-[var(--destructive)]",
+          "data-[selected]:bg-[var(--destructive)]",
+          "data-[indeterminate]:border-[var(--destructive)]",
+          "data-[indeterminate]:bg-[var(--destructive)]"
+        ].join(" ")
+      },
+      size: {
+        sm: "h-4 w-4",
+        default: "h-5 w-5",
+        lg: "h-6 w-6"
+      },
+      isInvalid: {
+        true: "border-[var(--destructive)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      isInvalid: false
+    }
+  }
+);
+var checkmarkVariants = classVarianceAuthority.cva(
+  [
+    "transition-transform duration-200",
+    "[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]",
+    "motion-reduce:transition-none",
+    "scale-0 data-[selected]:scale-100 data-[indeterminate]:scale-100"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "text-[var(--primary-foreground)]",
+        destructive: "text-[var(--destructive-foreground)]"
+      },
+      size: {
+        sm: "h-3 w-3",
+        default: "h-3.5 w-3.5",
+        lg: "h-4 w-4"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function CheckmarkIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function MinusIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    }
+  );
+}
+var Checkbox = react.forwardRef(
+  ({
+    isSelected,
+    defaultSelected,
+    isDisabled,
+    isReadOnly,
+    isIndeterminate,
+    isInvalid = false,
+    isRequired = false,
+    onChange,
+    onFocusChange,
+    value,
+    name,
+    size = "default",
+    variant = "default",
+    label,
+    description,
+    selectedIcon,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "data-testid": dataTestId,
+    slot
+  }, ref) => {
+    const computedIsDisabled = isDisabled || void 0;
+    const computedIsReadOnly = isReadOnly || void 0;
+    const computedIsIndeterminate = isIndeterminate || void 0;
+    const renderIcon = (isChecked, isIndet) => {
+      const iconClassName = cn(checkmarkVariants({ variant, size }));
+      const dataSelected = isChecked || void 0;
+      const dataIndeterminate = isIndet || void 0;
+      if (isIndet) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          MinusIcon,
+          {
+            className: iconClassName,
+            "data-selected": dataSelected,
+            "data-indeterminate": dataIndeterminate
+          }
+        );
+      }
+      if (selectedIcon && isChecked) {
+        if (react.isValidElement(selectedIcon)) {
+          const iconElement = selectedIcon;
+          return react.cloneElement(iconElement, {
+            className: cn(iconClassName, iconElement.props.className),
+            "data-selected": dataSelected
+          });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: iconClassName, "data-selected": dataSelected, children: selectedIcon });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CheckmarkIcon,
+        {
+          className: iconClassName,
+          "data-selected": dataSelected,
+          "data-indeterminate": dataIndeterminate
+        }
+      );
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Checkbox,
+      {
+        ref,
+        id,
+        isSelected,
+        defaultSelected,
+        isDisabled: computedIsDisabled,
+        isReadOnly: computedIsReadOnly,
+        isIndeterminate: computedIsIndeterminate,
+        isInvalid,
+        isRequired,
+        onChange,
+        onFocusChange,
+        value,
+        name,
+        slot,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "data-testid": dataTestId,
+        className: (renderProps) => cn(
+          checkboxContainerVariants({
+            size,
+            isDisabled: renderProps.isDisabled
+          }),
+          className
+        ),
+        children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: checkboxIndicatorVariants({
+                variant,
+                size,
+                isInvalid: renderProps.isInvalid
+              }),
+              "data-selected": renderProps.isSelected || void 0,
+              "data-indeterminate": renderProps.isIndeterminate || void 0,
+              children: renderIcon(renderProps.isSelected, renderProps.isIndeterminate)
+            }
+          ),
+          (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-[var(--content-foreground)]", children: label }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--menu-muted)]", children: description })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var TableContext = react.createContext({
+  variant: "default",
+  size: "default",
+  selectionMode: "none",
+  stickyHeader: false
 });
-Object.defineProperty(exports, "cellVariants", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.cellVariants; }
-});
-Object.defineProperty(exports, "columnVariants", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.columnVariants; }
-});
-Object.defineProperty(exports, "rowVariants", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.rowVariants; }
-});
-Object.defineProperty(exports, "tableCaptionVariants", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.tableCaptionVariants; }
-});
-Object.defineProperty(exports, "tableContainerVariants", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.tableContainerVariants; }
-});
-Object.defineProperty(exports, "tableFooterVariants", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.tableFooterVariants; }
-});
-Object.defineProperty(exports, "tableHeaderVariants", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.tableHeaderVariants; }
-});
-Object.defineProperty(exports, "tableVariants", {
-  enumerable: true,
-  get: function () { return chunk4E4E2GSS_js.tableVariants; }
+var tableContainerVariants = classVarianceAuthority.cva(["relative w-full overflow-auto"]);
+var tableVariants = classVarianceAuthority.cva(
+  ["w-full caption-bottom text-sm", "border-collapse"],
+  {
+    variants: {
+      variant: {
+        default: "",
+        bordered: "border border-[var(--border)] rounded-md",
+        striped: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var tableHeaderVariants = classVarianceAuthority.cva(["[&_tr]:border-b"], {
+  variants: {
+    sticky: {
+      true: "sticky top-0 z-10 bg-[var(--content-background)]",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    sticky: false
+  }
 });
+var tableFooterVariants = classVarianceAuthority.cva([
+  "border-t border-[var(--border)]",
+  "bg-[var(--accent-background)]/50",
+  "font-medium",
+  "[&>tr]:last:border-b-0"
+]);
+var tableCaptionVariants = classVarianceAuthority.cva([
+  "mt-4 text-sm text-[var(--menu-muted)]"
+]);
+var columnVariants = classVarianceAuthority.cva(
+  [
+    "h-12 px-4 text-left align-middle font-medium",
+    "text-[var(--menu-muted)]",
+    "[&:has([role=checkbox])]:pr-0",
+    "select-none",
+    "focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-[var(--ring)] focus-visible:ring-inset"
+  ],
+  {
+    variants: {
+      allowsSorting: {
+        true: "cursor-pointer hover:bg-[var(--accent)]/50",
+        false: ""
+      },
+      align: {
+        start: "text-start",
+        center: "text-center",
+        end: "text-end"
+      },
+      size: {
+        sm: "h-10 px-3 text-xs",
+        default: "h-12 px-4 text-sm",
+        lg: "h-14 px-5 text-base"
+      }
+    },
+    defaultVariants: {
+      allowsSorting: false,
+      align: "start",
+      size: "default"
+    }
+  }
+);
+var rowVariants = classVarianceAuthority.cva(
+  [
+    "border-b border-[var(--border)]",
+    "transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-[var(--ring)] focus-visible:ring-inset",
+    "hover:bg-[var(--accent-background)]/50",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+  ],
+  {
+    variants: {
+      isSelected: {
+        true: "bg-[var(--accent)] data-[selected]:bg-[var(--accent)]",
+        false: ""
+      },
+      variant: {
+        default: "",
+        striped: "even:bg-[var(--accent-background)]/30"
+      }
+    },
+    defaultVariants: {
+      isSelected: false,
+      variant: "default"
+    }
+  }
+);
+var cellVariants = classVarianceAuthority.cva(
+  ["p-4 align-middle", "[&:has([role=checkbox])]:pr-0"],
+  {
+    variants: {
+      align: {
+        start: "text-start",
+        center: "text-center",
+        end: "text-end"
+      },
+      size: {
+        sm: "p-3 text-xs",
+        default: "p-4 text-sm",
+        lg: "p-5 text-base"
+      },
+      isRowHeader: {
+        true: "font-medium",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      align: "start",
+      size: "default",
+      isRowHeader: false
+    }
+  }
+);
+var Table = react.forwardRef(
+  ({
+    className,
+    variant = "default",
+    size = "default",
+    stickyHeader = false,
+    selectionMode = "none",
+    selectionBehavior = "toggle",
+    disallowEmptySelection = false,
+    disabledBehavior = "selection",
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disabledKeys,
+    sortDescriptor,
+    onSortChange,
+    onRowAction,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: { variant, size, selectionMode, stickyHeader }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(tableContainerVariants(), className),
+        "data-testid": "table-container",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Table,
+          {
+            ref,
+            className: cn(tableVariants({ variant })),
+            selectionMode,
+            selectionBehavior,
+            disallowEmptySelection,
+            disabledBehavior,
+            selectedKeys,
+            defaultSelectedKeys,
+            onSelectionChange,
+            disabledKeys,
+            sortDescriptor,
+            onSortChange,
+            onRowAction,
+            "data-testid": "table",
+            "data-variant": variant,
+            "data-size": size,
+            ...props,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+Table.displayName = "Table";
+function TableHeaderInner({ className, children, columns, ...props }, ref) {
+  const { size, selectionMode, stickyHeader } = react.useContext(TableContext);
+  const { allowsDragging } = reactAriaComponents.useTableOptions();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.TableHeader,
+    {
+      ref,
+      className: cn(tableHeaderVariants({ sticky: stickyHeader }), className),
+      "data-testid": "table-header",
+      ...props,
+      children: [
+        selectionMode === "multiple" && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, { className: cn(columnVariants({ size }), "w-12"), children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { slot: "selection", "aria-label": "Select all", size }) }),
+        allowsDragging && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Column, {}),
+        columns ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Collection, { items: columns, children }) : children
+      ]
+    }
+  );
+}
+var TableHeader = react.forwardRef(TableHeaderInner);
+TableHeader.displayName = "TableHeader";
+function TableBodyInner({ className, children, items, renderEmptyState, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.TableBody,
+    {
+      ref,
+      className: cn(className),
+      items,
+      renderEmptyState: renderEmptyState ? () => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 99, className: "text-center p-8", children: renderEmptyState() }) }) : void 0,
+      "data-testid": "table-body",
+      ...props,
+      children
+    }
+  );
+}
+var TableBody = react.forwardRef(TableBodyInner);
+TableBody.displayName = "TableBody";
+var TableFooter = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tfoot",
+      {
+        ref,
+        className: cn(tableFooterVariants(), className),
+        "data-testid": "table-footer",
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableFooter.displayName = "TableFooter";
+var TableCaption = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "caption",
+      {
+        ref,
+        className: cn(tableCaptionVariants(), className),
+        "data-testid": "table-caption",
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableCaption.displayName = "TableCaption";
+var Column = react.forwardRef(
+  ({
+    className,
+    children,
+    isRowHeader = false,
+    allowsSorting = false,
+    align = "start",
+    width,
+    minWidth,
+    maxWidth,
+    ...props
+  }, ref) => {
+    const { size } = react.useContext(TableContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Column,
+      {
+        ref,
+        isRowHeader,
+        allowsSorting,
+        width,
+        minWidth,
+        maxWidth,
+        className: cn(columnVariants({ allowsSorting, align, size }), className),
+        ...props,
+        children: ({ allowsSorting: canSort, sortDirection }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+          canSort && sortDirection && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", "data-sort-direction": sortDirection, children: sortDirection === "ascending" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" }) })
+        ] })
+      }
+    );
+  }
+);
+Column.displayName = "Column";
+function RowInner({ className, children, columns, href, isDisabled, ...props }, ref) {
+  const { variant, size, selectionMode } = react.useContext(TableContext);
+  const { allowsDragging } = reactAriaComponents.useTableOptions();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.Row,
+    {
+      ref,
+      href,
+      isDisabled,
+      className: ({ isSelected, isDisabled: disabled }) => cn(
+        rowVariants({
+          isSelected,
+          variant: variant === "striped" ? "striped" : "default"
+        }),
+        disabled && "opacity-50",
+        className
+      ),
+      "data-testid": "table-row",
+      ...props,
+      children: [
+        selectionMode === "multiple" && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Cell, { className: cn(cellVariants({ size }), "w-12"), children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { slot: "selection", "aria-label": "Select row", size }) }),
+        allowsDragging && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Cell, {}),
+        columns ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Collection, { items: columns, children }) : children
+      ]
+    }
+  );
+}
+var Row = react.forwardRef(RowInner);
+Row.displayName = "Row";
+var Cell = react.forwardRef(
+  ({ className, children, align = "start", colSpan: _colSpan, ...props }, ref) => {
+    const { size } = react.useContext(TableContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.Cell,
+      {
+        ref,
+        className: cn(cellVariants({ align, size }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Cell.displayName = "Cell";
+
+exports.Cell = Cell;
+exports.Column = Column;
+exports.Row = Row;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCaption = TableCaption;
+exports.TableFooter = TableFooter;
+exports.TableHeader = TableHeader;
+exports.cellVariants = cellVariants;
+exports.columnVariants = columnVariants;
+exports.rowVariants = rowVariants;
+exports.tableCaptionVariants = tableCaptionVariants;
+exports.tableContainerVariants = tableContainerVariants;
+exports.tableFooterVariants = tableFooterVariants;
+exports.tableHeaderVariants = tableHeaderVariants;
+exports.tableVariants = tableVariants;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map