@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Table/index.mjs

@@ -1,7 +1,580 @@
-export { Cell, Column, Row, Table, TableBody, TableCaption, TableFooter, TableHeader, cellVariants, columnVariants, rowVariants, tableCaptionVariants, tableContainerVariants, tableFooterVariants, tableHeaderVariants, tableVariants } from '../../chunk-6S25NMOT.mjs';
-import '../../chunk-UTW3QX2A.mjs';
-import '../../chunk-HK46BT5U.mjs';
-import '../../chunk-E2KQFV3O.mjs';
-import '../../chunk-5SVLJN2C.mjs';
+"use client";
+import { forwardRef, createContext, useContext, isValidElement, cloneElement } from 'react';
+import { Checkbox as Checkbox$1, Table as Table$1, Column as Column$1, Cell as Cell$1, useTableOptions, TableHeader as TableHeader$1, Collection, TableBody as TableBody$1, Row as Row$1 } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+
+// src/elements/Table/Table.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// 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 = 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 = 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 = 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__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function MinusIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 3,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    }
+  );
+}
+var Checkbox = 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__ */ jsx(
+          MinusIcon,
+          {
+            className: iconClassName,
+            "data-selected": dataSelected,
+            "data-indeterminate": dataIndeterminate
+          }
+        );
+      }
+      if (selectedIcon && isChecked) {
+        if (isValidElement(selectedIcon)) {
+          const iconElement = selectedIcon;
+          return cloneElement(iconElement, {
+            className: cn(iconClassName, iconElement.props.className),
+            "data-selected": dataSelected
+          });
+        }
+        return /* @__PURE__ */ jsx("span", { className: iconClassName, "data-selected": dataSelected, children: selectedIcon });
+      }
+      return /* @__PURE__ */ jsx(
+        CheckmarkIcon,
+        {
+          className: iconClassName,
+          "data-selected": dataSelected,
+          "data-indeterminate": dataIndeterminate
+        }
+      );
+    };
+    return /* @__PURE__ */ jsx(
+      Checkbox$1,
+      {
+        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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--content-foreground)]", children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--menu-muted)]", children: description })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var TableContext = createContext({
+  variant: "default",
+  size: "default",
+  selectionMode: "none",
+  stickyHeader: false
+});
+var tableContainerVariants = cva(["relative w-full overflow-auto"]);
+var tableVariants = 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 = cva(["[&_tr]:border-b"], {
+  variants: {
+    sticky: {
+      true: "sticky top-0 z-10 bg-[var(--content-background)]",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    sticky: false
+  }
+});
+var tableFooterVariants = cva([
+  "border-t border-[var(--border)]",
+  "bg-[var(--accent-background)]/50",
+  "font-medium",
+  "[&>tr]:last:border-b-0"
+]);
+var tableCaptionVariants = cva([
+  "mt-4 text-sm text-[var(--menu-muted)]"
+]);
+var columnVariants = 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 = 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 = 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 = 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__ */ jsx(TableContext.Provider, { value: { variant, size, selectionMode, stickyHeader }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(tableContainerVariants(), className),
+        "data-testid": "table-container",
+        children: /* @__PURE__ */ jsx(
+          Table$1,
+          {
+            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 } = useContext(TableContext);
+  const { allowsDragging } = useTableOptions();
+  return /* @__PURE__ */ jsxs(
+    TableHeader$1,
+    {
+      ref,
+      className: cn(tableHeaderVariants({ sticky: stickyHeader }), className),
+      "data-testid": "table-header",
+      ...props,
+      children: [
+        selectionMode === "multiple" && /* @__PURE__ */ jsx(Column$1, { className: cn(columnVariants({ size }), "w-12"), children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", "aria-label": "Select all", size }) }),
+        allowsDragging && /* @__PURE__ */ jsx(Column$1, {}),
+        columns ? /* @__PURE__ */ jsx(Collection, { items: columns, children }) : children
+      ]
+    }
+  );
+}
+var TableHeader = forwardRef(TableHeaderInner);
+TableHeader.displayName = "TableHeader";
+function TableBodyInner({ className, children, items, renderEmptyState, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    TableBody$1,
+    {
+      ref,
+      className: cn(className),
+      items,
+      renderEmptyState: renderEmptyState ? () => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 99, className: "text-center p-8", children: renderEmptyState() }) }) : void 0,
+      "data-testid": "table-body",
+      ...props,
+      children
+    }
+  );
+}
+var TableBody = forwardRef(TableBodyInner);
+TableBody.displayName = "TableBody";
+var TableFooter = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "tfoot",
+      {
+        ref,
+        className: cn(tableFooterVariants(), className),
+        "data-testid": "table-footer",
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableFooter.displayName = "TableFooter";
+var TableCaption = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "caption",
+      {
+        ref,
+        className: cn(tableCaptionVariants(), className),
+        "data-testid": "table-caption",
+        ...props,
+        children
+      }
+    );
+  }
+);
+TableCaption.displayName = "TableCaption";
+var Column = forwardRef(
+  ({
+    className,
+    children,
+    isRowHeader = false,
+    allowsSorting = false,
+    align = "start",
+    width,
+    minWidth,
+    maxWidth,
+    ...props
+  }, ref) => {
+    const { size } = useContext(TableContext);
+    return /* @__PURE__ */ jsx(
+      Column$1,
+      {
+        ref,
+        isRowHeader,
+        allowsSorting,
+        width,
+        minWidth,
+        maxWidth,
+        className: cn(columnVariants({ allowsSorting, align, size }), className),
+        ...props,
+        children: ({ allowsSorting: canSort, sortDirection }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("span", { children }),
+          canSort && sortDirection && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-sort-direction": sortDirection, children: sortDirection === "ascending" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
+        ] })
+      }
+    );
+  }
+);
+Column.displayName = "Column";
+function RowInner({ className, children, columns, href, isDisabled, ...props }, ref) {
+  const { variant, size, selectionMode } = useContext(TableContext);
+  const { allowsDragging } = useTableOptions();
+  return /* @__PURE__ */ jsxs(
+    Row$1,
+    {
+      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__ */ jsx(Cell$1, { className: cn(cellVariants({ size }), "w-12"), children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", "aria-label": "Select row", size }) }),
+        allowsDragging && /* @__PURE__ */ jsx(Cell$1, {}),
+        columns ? /* @__PURE__ */ jsx(Collection, { items: columns, children }) : children
+      ]
+    }
+  );
+}
+var Row = forwardRef(RowInner);
+Row.displayName = "Row";
+var Cell = forwardRef(
+  ({ className, children, align = "start", colSpan: _colSpan, ...props }, ref) => {
+    const { size } = useContext(TableContext);
+    return /* @__PURE__ */ jsx(
+      Cell$1,
+      {
+        ref,
+        className: cn(cellVariants({ align, size }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Cell.displayName = "Cell";
+
+export { Cell, Column, Row, Table, TableBody, TableCaption, TableFooter, TableHeader, cellVariants, columnVariants, rowVariants, tableCaptionVariants, tableContainerVariants, tableFooterVariants, tableHeaderVariants, tableVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map