@sixthshift/design-system 0.7.0 → 0.9.0

package/src/components/Button/button.recipe.css

@@ -1,11 +1,17 @@
 /**
  * Button recipe — the component-token layer for Button.
  *
- * This is the mapping from `(variant, intent, state)` to a semantic token. It
- * used to live in `compoundVariants` inside Button.tsx, where it was compiled
- * into class-name literals and no consumer could reach it. Here it is data, so
- * a consumer can re-point a cell, scope a change to a subtree, or add a variant
- * or intent the library never shipped.
+ * This is the mapping from `(variant, state)` to a colour. It used to live in
+ * `compoundVariants` inside Button.tsx, where it was compiled into class-name
+ * literals and no consumer could reach it. Here it is data, so a consumer can
+ * re-point a cell, scope a change to a subtree, or add a variant the library
+ * never shipped.
+ *
+ * Intent does not appear here at all. Each cell below paints with the intent
+ * slots (`--intent-solid-bg`, `--intent-fg`, …) that src/theming/intents.css
+ * declares per `data-intent`, so every variant works in every intent — including
+ * one a consumer adds — and this file has one cell per variant, not one per
+ * `(variant, intent)` pair.
  *
  * The grammar is `--button-{context}[-{state}]` — the same `context` and
  * `state` words the semantic layer uses (src/theming/vocabulary.ts). Note what is
@@ -37,131 +43,42 @@
     --button-ring: var(--focus-ring);
   }
 
-  /* solid — a filled surface, with text read on top of it. The `fg-on-*`
-     partner is the pairing check-contrast.ts verifies, so these four cells
-     inherit that guarantee rather than restating it. */
-  .btn[data-variant="solid"][data-intent="brand"] {
-    --button-bg: var(--bg-brand);
-    --button-bg-hovered: var(--bg-brand-hovered);
-    --button-bg-pressed: var(--bg-brand-pressed);
-    --button-fg: var(--fg-on-brand);
-  }
-
-  /* `neutral` means *no colour family* — the grey ramp. It used to resolve to
-     the brand fill, which made `intent="neutral"` mean one thing on Button and
-     another on Badge and Message, where it was already grey. Button
-     was the outlier; this is the cell that ends that. A brand-coloured button
-     is now `intent="brand"`, which is also Button's default, so a bare
-     `<Button>` is unchanged. */
-  .btn[data-variant="solid"][data-intent="neutral"] {
-    --button-bg: var(--bg-strong);
-    --button-bg-hovered: var(--bg-strong-hovered);
-    --button-bg-pressed: var(--bg-strong-pressed);
-    --button-fg: var(--fg-on-strong);
-  }
-
-  .btn[data-variant="solid"][data-intent="danger"] {
-    --button-bg: var(--bg-danger);
-    --button-bg-hovered: var(--bg-danger-hovered);
-    --button-bg-pressed: var(--bg-danger-pressed);
-    --button-fg: var(--fg-on-danger);
-  }
-
-  .btn[data-variant="solid"][data-intent="success"] {
-    --button-bg: var(--bg-success);
-    --button-bg-hovered: var(--bg-success-hovered);
-    --button-bg-pressed: var(--bg-success-pressed);
-    --button-fg: var(--fg-on-success);
-  }
-
-  .btn[data-variant="solid"][data-intent="warning"] {
-    --button-bg: var(--bg-warning);
-    --button-bg-hovered: var(--bg-warning-hovered);
-    --button-bg-pressed: var(--bg-warning-pressed);
-    --button-fg: var(--fg-on-warning);
-  }
-
-  /* outline carries a resting surface; ghost does not. Beyond that their
-     colour recipes are identical, so the text colour and the hover/pressed wash
-     are shared per intent and only the two lines below differ. */
-  .btn[data-variant="outline"] {
-    --button-bg: var(--bg-normal);
-  }
-
-  /* `neutral` here needed no change: outline and ghost were already grey — it
-     was only the solid and link cells that read as brand. */
-  .btn[data-variant="outline"][data-intent="neutral"],
-  .btn[data-variant="ghost"][data-intent="neutral"] {
-    --button-bg-hovered: var(--bg-subtle-hovered);
-    --button-bg-pressed: var(--bg-subtle-pressed);
-    --button-fg: var(--fg-normal);
-  }
-
-  .btn[data-variant="outline"][data-intent="brand"],
-  .btn[data-variant="ghost"][data-intent="brand"] {
-    --button-bg-hovered: var(--bg-brand-subtle-hovered);
-    --button-bg-pressed: var(--bg-brand-subtle-pressed);
-    --button-fg: var(--fg-brand);
-  }
-
-  .btn[data-variant="outline"][data-intent="danger"],
-  .btn[data-variant="ghost"][data-intent="danger"] {
-    --button-bg-hovered: var(--bg-danger-subtle-hovered);
-    --button-bg-pressed: var(--bg-danger-subtle-pressed);
-    --button-fg: var(--fg-danger);
+  /* solid — a filled surface, with text read on top of it. The slot pair
+     resolves to a `bg-*` / `fg-on-*` partnership, which is the pairing
+     check-contrast.ts verifies, so this cell inherits that guarantee. For
+     `neutral`, the default, that is the grey `bg-strong` fill. */
+  .btn[data-variant="solid"] {
+    --button-bg: var(--intent-solid-bg);
+    --button-bg-hovered: var(--intent-solid-bg-hovered);
+    --button-bg-pressed: var(--intent-solid-bg-pressed);
+    --button-fg: var(--intent-solid-fg);
   }
 
-  .btn[data-variant="outline"][data-intent="success"],
-  .btn[data-variant="ghost"][data-intent="success"] {
-    --button-bg-hovered: var(--bg-success-subtle-hovered);
-    --button-bg-pressed: var(--bg-success-subtle-pressed);
-    --button-fg: var(--fg-success);
-  }
-
-  .btn[data-variant="outline"][data-intent="warning"],
-  .btn[data-variant="ghost"][data-intent="warning"] {
-    --button-bg-hovered: var(--bg-warning-subtle-hovered);
-    --button-bg-pressed: var(--bg-warning-subtle-pressed);
-    --button-fg: var(--fg-warning);
+  /* outline carries a resting surface; ghost does not. Beyond that they share
+     the family's text colour and its tint wash on hover and press. */
+  .btn[data-variant="outline"],
+  .btn[data-variant="ghost"] {
+    --button-bg-hovered: var(--intent-tint-bg-hovered);
+    --button-bg-pressed: var(--intent-tint-bg-pressed);
+    --button-fg: var(--intent-fg);
   }
 
   /* The border belongs to outline alone. Ghost has no border width, so folding
-     these into the blocks above would be invisible today — and a silent
+     this into the block above would be invisible today — and a silent
      semantic change the moment anyone gave ghost a border. A consumer who wants
      that can still say so in one line; it should be their decision, not a
-     side-effect of how this file was factored. `neutral` needs no rule: the
-     floor's `border-normal` is already right. */
-  .btn[data-variant="outline"][data-intent="brand"] {
-    --button-border: var(--border-brand);
-  }
-  .btn[data-variant="outline"][data-intent="danger"] {
-    --button-border: var(--border-danger);
-  }
-  .btn[data-variant="outline"][data-intent="success"] {
-    --button-border: var(--border-success);
-  }
-  .btn[data-variant="outline"][data-intent="warning"] {
-    --button-border: var(--border-warning);
+     side-effect of how this file was factored. */
+  .btn[data-variant="outline"] {
+    --button-bg: var(--bg-normal);
+    --button-border: var(--intent-border);
   }
 
-  /* link — no surface in any state; only the text carries colour, so the
-     floor's transparent background and its no-shift-on-hover chain both stand.
-     A link button reads as brand-coloured by default because `brand` is
-     Button's default intent — not because `neutral` was quietly redefined to
-     mean brand, which is what this cell used to do. */
-  .btn[data-variant="link"][data-intent="brand"] {
-    --button-fg: var(--fg-brand);
-  }
-  .btn[data-variant="link"][data-intent="neutral"] {
-    --button-fg: var(--fg-normal);
-  }
-  .btn[data-variant="link"][data-intent="danger"] {
-    --button-fg: var(--fg-danger);
-  }
-  .btn[data-variant="link"][data-intent="success"] {
-    --button-fg: var(--fg-success);
-  }
-  .btn[data-variant="link"][data-intent="warning"] {
-    --button-fg: var(--fg-warning);
+  /* inline — not a variant: inline text with no box (Button drops
+     `data-variant` for it, so no cell above can match). Only the text carries
+     colour, so the floor's transparent background and its no-shift-on-hover
+     chain both stand. It is brand-coloured only with `intent="brand"`;
+     `neutral`, the default, is plain text colour. */
+  .btn[data-inline="true"] {
+    --button-fg: var(--intent-fg);
   }
 }

package/src/components/Button/index.ts

@@ -5,6 +5,5 @@ export {
   type ButtonProps,
   type ButtonVariant,
   type ButtonVariantName,
-  buttonRecipe,
   buttonVariants,
 } from "./Button";

package/src/components/Card/Card.tsx

@@ -49,7 +49,7 @@ export const cardVariants = cva(
         sm: "rounded-lg p-3",
         md: "rounded-xl p-4",
         lg: "rounded-xl p-6",
-        xl: "rounded-2xl p-8",
+        xl: "rounded-xl p-8",
       },
       interactive: {
         true: "hover:border-(color:--card-border-hovered) focus-visible:outline-(color:--card-ring) cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -26,10 +26,11 @@ export type CheckboxGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onC
   onValueChange?: (value: string[]) => void;
   /** Layout orientation */
   orientation?: "vertical" | "horizontal";
-  /** Visual variant */
-  variant?: "default" | "button";
-  /** Button appearance (only applies when variant="button") */
-  appearance?: "segmented" | "separate";
+  /**
+   * How the options render: `control` (the default) is one `Checkbox` per option;
+   * `segmented` and `separate` are a row or column of buttons, joined or apart.
+   */
+  appearance?: "control" | "segmented" | "separate";
   /** Input name for form submission */
   name?: string;
   /** Disable all options */
@@ -43,17 +44,19 @@ export type CheckboxGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onC
  * selection, via the `value`/`defaultValue`/`onValueChange` triad
  * (`useControllableState`).
  *
- * `variant="default"` (the default) renders one `Checkbox` per option, each
+ * `appearance="control"` (the default) renders one `Checkbox` per option, each
  * with its own visible label, laid out in a column or row per
- * `orientation`. `variant="button"` is a separate rendering path — not a
- * re-skinned `Checkbox` — a row/column of plain buttons with
- * `role="checkbox"` and no separate label; contiguous buttons touch and
- * share borders (`appearance="segmented"`, the default) or sit apart with
- * their own rounded corners (`appearance="separate"`).
+ * `orientation`. `appearance="segmented"` or `"separate"` is a separate
+ * rendering path — not a re-skinned `Checkbox` — a row/column of plain
+ * buttons with `role="checkbox"` and no separate label; contiguous buttons
+ * touch and share borders (`segmented`) or sit apart with their own rounded
+ * corners (`separate`). One prop rather than a
+ * `variant` + `appearance` pair, so "appearance without buttons" — which
+ * used to mean nothing — cannot be written.
  *
- * Form submission only happens when `name` is set. In the default variant
+ * Form submission only happens when `name` is set. With `control`
  * that means each underlying `Checkbox` gets `name`, so one hidden native
- * checkbox input is rendered per option; in the button variant the group
+ * checkbox input is rendered per option; with the button appearances the group
  * itself renders one hidden `<input type="checkbox">` per *currently
  * selected* value.
  *
@@ -68,8 +71,7 @@ const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
       options,
       onValueChange,
       orientation = "vertical",
-      variant = "default",
-      appearance = "segmented",
+      appearance = "control",
       name,
       disabled,
       onBlur,
@@ -111,7 +113,7 @@ const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
       }
     };
 
-    if (variant === "button") {
+    if (appearance === "segmented" || appearance === "separate") {
       const isVertical = orientation === "vertical";
       const isSegmented = appearance === "segmented";
 

package/src/components/Code/Workspace/Toolbar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { HTMLAttributes, ReactNode } from "react";
-import { Button } from "../../Button";
+import { Button, type ButtonVariant } from "../../Button";
 
 export type Action = {
   id: string;
@@ -9,7 +9,7 @@ export type Action = {
   icon?: ReactNode;
   onClick: () => void;
   disabled?: boolean;
-  variant?: "solid" | "outline" | "ghost" | "link";
+  variant?: ButtonVariant;
 };
 
 export type ToolbarProps = HTMLAttributes<HTMLDivElement> & {

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { forwardRef, type HTMLAttributes, type KeyboardEvent, type ReactElement, type ReactNode, type Ref, useMemo } from "react";
+
+/**
+ * Geometry only. Every colour reads a `--data-table-*` component token whose
+ * value is decided by src/components/DataTable/data-table.recipe.css.
+ *
+ * `size` is cell density: `sm` for back-office lists scanned dozens of rows at
+ * a time, `md` for tables that are the page's main content.
+ */
+const cellVariants = cva("px-3 align-middle", {
+  variants: {
+    size: {
+      sm: "h-9 py-1.5 text-xs",
+      md: "h-11 py-2 text-sm",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export type DataTableSize = NonNullable<VariantProps<typeof cellVariants>["size"]>;
+
+export type DataTableAlign = "start" | "center" | "end";
+
+export type DataTableColumn<Row> = {
+  /** Stable key — also what `sort.columnId` refers to. */
+  id: string;
+  /** Header content. */
+  header: ReactNode;
+  /** Cell content for one row. */
+  cell: (row: Row) => ReactNode;
+  /**
+   * Makes the column sortable. The returned value is what rows are compared
+   * by — return cents, not a formatted price, and an ISO date, not "Tue 3rd".
+   */
+  sortValue?: (row: Row) => string | number;
+  /** Text alignment for header and cells. Numbers read best at `end`. */
+  align?: DataTableAlign;
+  /** A CSS width for the column, e.g. `"8rem"` or `"20%"`. */
+  width?: string;
+  /** Extra classes for this column's `<td>`s. */
+  className?: string;
+};
+
+export type DataTableSortDirection = "asc" | "desc";
+
+export type DataTableSort = {
+  columnId: string;
+  direction: DataTableSortDirection;
+};
+
+export type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> &
+  VariantProps<typeof cellVariants> & {
+    columns: readonly DataTableColumn<Row>[];
+    rows: readonly Row[];
+    /** Stable id per row, used as the React key. */
+    getRowId: (row: Row) => string;
+    /** Controlled sort. `null` is unsorted — rows in the order given. */
+    sort?: DataTableSort | null;
+    /** Initial sort in uncontrolled mode. */
+    defaultSort?: DataTableSort | null;
+    /** Called when a header is clicked: ascending, then descending, then unsorted. */
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /**
+     * Report sort changes without reordering `rows`, for data sorted where it
+     * is fetched. The headers still show the sort state.
+     */
+    manualSorting?: boolean;
+    /** Makes every row activatable by pointer, `Enter` or `Space`. */
+    onRowClick?: (row: Row) => void;
+    /** Shown in place of the body when `rows` is empty. */
+    empty?: ReactNode;
+    /** Names the table for assistive tech. Visually hidden unless `showCaption`. */
+    caption?: ReactNode;
+    showCaption?: boolean;
+    /** Keep the header row visible while the wrapper scrolls vertically. Give the wrapper a height via `className`. */
+    stickyHeader?: boolean;
+  };
+
+const alignClass: Record<DataTableAlign, string> = {
+  start: "text-start",
+  center: "text-center",
+  end: "text-end",
+};
+
+const ariaSort = { asc: "ascending", desc: "descending" } as const;
+
+function nextSort(current: DataTableSort | null, columnId: string): DataTableSort | null {
+  if (current?.columnId !== columnId) return { columnId, direction: "asc" };
+  return current.direction === "asc" ? { columnId, direction: "desc" } : null;
+}
+
+function compare(a: string | number, b: string | number): number {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: "base" });
+}
+
+/**
+ * `forwardRef` erases the generic, so the implementation takes the ref as an
+ * argument and the export below restores `<Row>` — the same arrangement
+ * Select.tsx uses for `<T>`.
+ */
+const DataTableRoot = forwardRef(function DataTableRoot<Row>(
+  {
+    className,
+    columns,
+    rows,
+    getRowId,
+    size = "md",
+    sort: controlledSort,
+    defaultSort = null,
+    onSortChange,
+    manualSorting = false,
+    onRowClick,
+    empty,
+    caption,
+    showCaption = false,
+    stickyHeader = false,
+    ...props
+  }: DataTableProps<Row>,
+  ref: Ref<HTMLDivElement>
+) {
+  const [sort, setSort] = useControllableState<DataTableSort | null>({
+    value: controlledSort,
+    defaultValue: defaultSort,
+    onChange: onSortChange,
+  });
+
+  const sortedRows = useMemo(() => {
+    if (manualSorting || sort === null) return rows;
+    const sortValue = columns.find((column) => column.id === sort.columnId)?.sortValue;
+    if (!sortValue) return rows;
+    const factor = sort.direction === "asc" ? 1 : -1;
+    // Array.prototype.sort is stable, so equal keys keep the caller's order.
+    return [...rows].sort((a, b) => factor * compare(sortValue(a), sortValue(b)));
+  }, [rows, columns, sort, manualSorting]);
+
+  const interactive = onRowClick !== undefined;
+
+  const handleRowKeyDown = (event: KeyboardEvent<HTMLTableRowElement>, row: Row) => {
+    if (event.target !== event.currentTarget) return; // a button inside the row keeps its own keys
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onRowClick?.(row);
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "data-table border-(color:--data-table-border) w-full overflow-auto rounded-lg border bg-(--data-table-bg) text-(--data-table-fg)",
+        className
+      )}
+      {...props}
+    >
+      <table className="w-full border-collapse">
+        {caption !== undefined && <caption className={cn(showCaption ? "px-3 py-2 text-start font-medium text-sm" : "sr-only")}>{caption}</caption>}
+        <thead className={cn("bg-(--data-table-header-bg)", stickyHeader && "sticky top-0 z-10")}>
+          <tr className="border-(color:--data-table-border) border-b">
+            {columns.map((column) => {
+              const align = column.align ?? "start";
+              const sorted = sort?.columnId === column.id ? sort.direction : undefined;
+              const Icon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ChevronsUpDown;
+              return (
+                <th
+                  key={column.id}
+                  scope="col"
+                  aria-sort={column.sortValue ? (sorted ? ariaSort[sorted] : "none") : undefined}
+                  style={column.width ? { width: column.width } : undefined}
+                  className={cn(cellVariants({ size }), alignClass[align], "whitespace-nowrap font-medium text-(--data-table-header-fg)")}
+                >
+                  {column.sortValue ? (
+                    <button
+                      type="button"
+                      onClick={() => setSort(nextSort(sort, column.id))}
+                      className={cn(
+                        "focus-visible:ring-(color:--data-table-ring) -mx-1 inline-flex cursor-pointer items-center gap-1 rounded-sm px-1 hover:text-(--data-table-fg) focus-visible:outline-hidden focus-visible:ring-2",
+                        align === "end" && "flex-row-reverse"
+                      )}
+                    >
+                      {column.header}
+                      <Icon aria-hidden="true" className={cn("size-3.5 shrink-0", sorted === undefined && "opacity-50")} />
+                    </button>
+                  ) : (
+                    column.header
+                  )}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {sortedRows.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length} className="px-3 py-10 text-center text-(--data-table-empty-fg) text-sm">
+                {empty ?? "Nothing to show"}
+              </td>
+            </tr>
+          ) : (
+            sortedRows.map((row) => (
+              <tr
+                key={getRowId(row)}
+                data-interactive={interactive || undefined}
+                onClick={interactive ? () => onRowClick(row) : undefined}
+                onKeyDown={interactive ? (event) => handleRowKeyDown(event, row) : undefined}
+                // A row is not a native control, but a clickable table row is the
+                // established back-office pattern. It stays a `row` so the table
+                // semantics survive, and gains a tab stop and Enter/Space like
+                // Card does when it is clickable.
+                tabIndex={interactive ? 0 : undefined}
+                className={cn(
+                  "border-(color:--data-table-border) border-b last:border-b-0",
+                  interactive &&
+                    "focus-visible:outline-(color:--data-table-ring) cursor-pointer hover:bg-(--data-table-row-bg-hovered) focus-visible:outline-2 focus-visible:-outline-offset-2"
+                )}
+              >
+                {columns.map((column) => (
+                  <td key={column.id} className={cn(cellVariants({ size }), alignClass[column.align ?? "start"], column.className)}>
+                    {column.cell(row)}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+});
+
+/**
+ * A data table for back-office lists — orders, products, customers.
+ *
+ * Props-based, per docs/component-api-design.md: rows are uniform, so they
+ * arrive as a `rows` array and a `columns` config, and each column's `cell`
+ * renders one row's content. Anything interactive in a cell — a status
+ * Badge, an action Button — is just what `cell` returns.
+ *
+ * A column with `sortValue` gets a header button cycling ascending →
+ * descending → unsorted, and `aria-sort` on its `<th>`. Sorting is
+ * client-side and stable; pass `manualSorting` to only report the change when
+ * the data is sorted where it is fetched. Sort state is controlled or
+ * uncontrolled through `sort`/`defaultSort`/`onSortChange`.
+ *
+ * `onRowClick` makes every row a tab stop activated by pointer, `Enter` or
+ * `Space` — keys pressed on a control inside the row are left to that control.
+ *
+ * The wrapper scrolls, so a wide table on a phone scrolls sideways inside its
+ * border rather than widening the page.
+ */
+export const DataTable = DataTableRoot as <Row>(props: DataTableProps<Row> & { ref?: Ref<HTMLDivElement> }) => ReactElement;
+
+export { cellVariants as dataTableCellVariants };

package/src/components/DataTable/data-table.recipe.css

@@ -0,0 +1,28 @@
+/**
+ * DataTable recipe — the component-token layer for DataTable.
+ *
+ * No variant/intent axis: status colour inside a table belongs to what the
+ * cells render (a Badge), not to the table. The table itself is the Elevated
+ * tier's container — the same surface and rule colours as card.css — through
+ * its own tokens, so a consumer can re-point one without the other.
+ *
+ * The grammar is `--data-table-[{part}-]{context}[-{state}]`. Parts are the
+ * `header` row, a `row` (only its hover, which applies only when rows are
+ * clickable), and the `empty` state's text. `--data-table-border` draws the
+ * outer frame and the rules between rows alike.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css.
+ */
+
+@layer components {
+  .data-table {
+    --data-table-bg: var(--bg-normal);
+    --data-table-fg: var(--fg-normal);
+    --data-table-border: var(--border-normal);
+    --data-table-ring: var(--focus-ring);
+    --data-table-header-bg: var(--bg-subtle);
+    --data-table-header-fg: var(--fg-subtle);
+    --data-table-row-bg-hovered: var(--bg-normal-hovered);
+    --data-table-empty-fg: var(--fg-subtle);
+  }
+}

package/src/components/DataTable/index.ts

@@ -0,0 +1,10 @@
+export {
+  DataTable,
+  type DataTableAlign,
+  type DataTableColumn,
+  type DataTableProps,
+  type DataTableSize,
+  type DataTableSort,
+  type DataTableSortDirection,
+  dataTableCellVariants,
+} from "./DataTable";