@azmr/ui 0.0.1 → 0.2.0

package/dist/responsive-YJBnvsjt.d.ts

@@ -0,0 +1,69 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** A gap step (Tailwind's 4px scale), or `density` to follow the `data-density` token. */
+declare const GAP_CLASSES: {
+    readonly 0: "gap-0";
+    readonly 1: "gap-1";
+    readonly 2: "gap-2";
+    readonly 3: "gap-3";
+    readonly 4: "gap-4";
+    readonly 5: "gap-5";
+    readonly 6: "gap-6";
+    readonly 8: "gap-8";
+    readonly 10: "gap-10";
+    readonly 12: "gap-12";
+    readonly density: "gap-(--density-gap)";
+};
+type Gap = keyof typeof GAP_CLASSES;
+declare const ALIGN_ITEMS_CLASSES: {
+    readonly start: "items-start";
+    readonly center: "items-center";
+    readonly end: "items-end";
+    readonly stretch: "items-stretch";
+    readonly baseline: "items-baseline";
+};
+type AlignItems = keyof typeof ALIGN_ITEMS_CLASSES;
+declare const JUSTIFY_CONTENT_CLASSES: {
+    readonly start: "justify-start";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly between: "justify-between";
+    readonly around: "justify-around";
+    readonly evenly: "justify-evenly";
+};
+type JustifyContent = keyof typeof JUSTIFY_CONTENT_CLASSES;
+declare const JUSTIFY_ITEMS_CLASSES: {
+    readonly start: "justify-items-start";
+    readonly center: "justify-items-center";
+    readonly end: "justify-items-end";
+    readonly stretch: "justify-items-stretch";
+};
+type JustifyItems = keyof typeof JUSTIFY_ITEMS_CLASSES;
+/** Elements a layout box may render as. */
+type LayoutElement = "div" | "section" | "article" | "aside" | "nav" | "header" | "footer" | "main" | "ul" | "ol" | "form" | "fieldset";
+
+declare const CONTAINER_SIZE_CLASSES: {
+    readonly sm: "max-w-2xl";
+    readonly md: "max-w-4xl";
+    readonly lg: "max-w-6xl";
+    readonly xl: "max-w-7xl";
+    readonly "2xl": "max-w-[96rem]";
+    readonly full: "max-w-none";
+};
+type ContainerSize = keyof typeof CONTAINER_SIZE_CLASSES;
+interface ContainerProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The widest the content gets (42, 56, 72, 80, 96rem); `full` removes the limit. Default `lg`. */
+    size?: ContainerSize;
+    /** Horizontal padding that grows with the screen. Default true. */
+    gutters?: boolean;
+    as?: LayoutElement;
+    children?: ReactNode;
+}
+/** Centres content and limits its width. Server-safe. */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLElement>>;
+
+declare const BREAKPOINTS: readonly ["base", "sm", "md", "lg", "xl", "2xl"];
+type Breakpoint = (typeof BREAKPOINTS)[number];
+
+export { type AlignItems as A, type Breakpoint as B, Container as C, type Gap as G, type JustifyItems as J, type LayoutElement as L, type JustifyContent as a, type ContainerProps as b, type ContainerSize as c };

package/dist/scroll-area.d.ts

@@ -0,0 +1,30 @@
+import { ForwardRefExoticComponent, Ref, ReactNode, ComponentPropsWithoutRef, RefAttributes } from 'react';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+
+interface ScrollAreaOwnProps {
+    /** Which scrollbars to show. Default `vertical`. */
+    orientation?: "vertical" | "horizontal" | "both";
+    /**
+     * `hover` (default) fades the scrollbar in on hover and while scrolling, like the desktop
+     * platforms; `always` keeps it visible.
+     */
+    scrollbar?: "always" | "hover";
+    /** Keep the scrollbars in the DOM even when nothing overflows, so layout never jumps. */
+    keepMounted?: boolean;
+    /** Classes for the scrollable viewport (padding, for example); `className` styles the root. */
+    viewportClassName?: string;
+    /** A ref to the scrollable element, to read or set the scroll position. */
+    viewportRef?: Ref<HTMLDivElement>;
+    className?: string;
+    children?: ReactNode;
+}
+/** A scrollable region is focusable, so it needs a name: a label or the id of a heading. */
+type Named = {
+    "aria-label": string;
+} | {
+    "aria-labelledby": string;
+};
+type ScrollAreaProps = ScrollAreaOwnProps & Named & Omit<ComponentPropsWithoutRef<typeof ScrollArea$1.Root>, keyof ScrollAreaOwnProps | "aria-label" | "aria-labelledby">;
+declare const ScrollArea: ForwardRefExoticComponent<ScrollAreaProps & RefAttributes<HTMLDivElement>>;
+
+export { ScrollArea, type ScrollAreaOwnProps, type ScrollAreaProps };

package/dist/scroll-area.js

@@ -0,0 +1,80 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/scroll-area/scroll-area.tsx
+import {
+  forwardRef
+} from "react";
+
+// src/primitives/scroll-area.ts
+import { ScrollArea } from "@base-ui/react/scroll-area";
+
+// src/components/scroll-area/scroll-area.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Scrollbar({
+  orientation,
+  always,
+  keepMounted
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollArea.Scrollbar,
+    {
+      orientation,
+      keepMounted,
+      className: cn(
+        "flex touch-none select-none p-px transition-opacity duration-(--motion-duration-fast) ease-standard",
+        orientation === "vertical" ? "h-full w-2.5" : "h-2.5 flex-col",
+        !always && "opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100"
+      ),
+      children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-border" })
+    }
+  );
+}
+var ScrollAreaImpl = forwardRef(function ScrollArea2({
+  orientation = "vertical",
+  scrollbar = "hover",
+  keepMounted = false,
+  viewportClassName,
+  viewportRef,
+  className,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}, ref) {
+  const always = scrollbar === "always";
+  return /* @__PURE__ */ jsxs(
+    ScrollArea.Root,
+    {
+      ref,
+      className: cn("relative overflow-hidden rounded-md", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollArea.Viewport,
+          {
+            ref: viewportRef,
+            role: "region",
+            tabIndex: 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            className: cn(
+              "size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              viewportClassName
+            ),
+            children: /* @__PURE__ */ jsx(ScrollArea.Content, { children })
+          }
+        ),
+        orientation !== "horizontal" && /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical", always, keepMounted }),
+        orientation !== "vertical" && /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal", always, keepMounted }),
+        orientation === "both" && /* @__PURE__ */ jsx(ScrollArea.Corner, {})
+      ]
+    }
+  );
+});
+var ScrollArea3 = ScrollAreaImpl;
+export {
+  ScrollArea3 as ScrollArea
+};

package/dist/shared-Fkx-sjPt.d.ts

@@ -0,0 +1,15 @@
+type Side = "top" | "right" | "bottom" | "left" | "inline-start" | "inline-end";
+type Align = "start" | "center" | "end";
+/** Where a floating surface sits relative to its trigger. */
+interface PositionProps {
+    /** The side of the trigger to open on. It flips to the opposite side when there is no room. */
+    side?: Side;
+    /** Alignment along that side. */
+    align?: Align;
+    /** Gap between the trigger and the surface, in px. Default 6. */
+    sideOffset?: number;
+    /** Minimum distance kept from the viewport edge, in px. Default 8. */
+    collisionPadding?: number;
+}
+
+export type { Align as A, PositionProps as P, Side as S };

package/dist/spinner.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+interface SpinnerProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Accessible name. When set the spinner is announced as a status ("Loading customers");
+     * when omitted it is decorative and hidden from assistive technology (use that when the
+     * surrounding control already says it is busy, as `Button loading` does).
+     */
+    label?: string;
+}
+/**
+ * An indeterminate progress indicator. It keeps spinning under `prefers-reduced-motion`
+ * (`data-motion="essential"`) because a frozen spinner reads as a hung page.
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<SVGSVGElement>>;
+
+export { Spinner, type SpinnerProps };

package/dist/spinner.js

@@ -0,0 +1,39 @@
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/spinner/spinner.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Spinner = forwardRef(function Spinner2({ label, className, ...props }, ref) {
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: decorative (aria-hidden) by default, or role="status" with an aria-label when `label` is set; both paths are covered by axe tests
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "data-motion": "essential",
+        className: cn("size-4 animate-spin", className),
+        ...label ? { role: "status", "aria-label": label } : { "aria-hidden": true },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "3" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M22 12a10 10 0 0 0-10-10",
+              stroke: "currentColor",
+              strokeWidth: "3",
+              strokeLinecap: "round"
+            }
+          )
+        ]
+      }
+    )
+  );
+});
+export {
+  Spinner
+};

package/dist/split-button.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ButtonProps } from '@base-ui/react/button';
+import { B as ButtonOwnProps } from './button-CYt2Zw3D.js';
+import 'class-variance-authority';
+import 'class-variance-authority/types';
+
+interface SplitButtonProps extends Omit<ButtonProps, "className" | "children" | "type" | "render" | "nativeButton"> {
+    /** The primary action's label. */
+    children: ReactNode;
+    /** The extra actions: `DropdownMenuItem`s (and groups, separators, and so on). */
+    menu: ReactNode;
+    /** Names the arrow button ("More save options"). Required: the arrow has no text. */
+    menuLabel: string;
+    variant?: ButtonOwnProps["variant"];
+    size?: "sm" | "md" | "lg";
+    /** Shows a spinner on the primary button and ignores it. The menu stays usable. */
+    loading?: boolean;
+    loadingText?: ReactNode;
+    startIcon?: ReactNode;
+    className?: string;
+}
+/**
+ * A primary action with a menu of related ones attached: "Save", and a menu with "Save as…".
+ *
+ * Keyboard: Tab visits the primary button, then the arrow button; Enter or Space on the primary
+ * runs it; ArrowDown, Enter or Space on the arrow opens the menu (see `DropdownMenu` for the keys
+ * inside it), and Escape closes it and returns focus to the arrow.
+ */
+declare const SplitButton: react.ForwardRefExoticComponent<Omit<SplitButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+export { SplitButton, type SplitButtonProps };

package/dist/split-button.js

@@ -0,0 +1,54 @@
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from "./chunk-EFHRRLAW.js";
+import "./chunk-LZMX27IZ.js";
+import {
+  Icon
+} from "./chunk-XRZHP6BD.js";
+import {
+  IconButton
+} from "./chunk-CZJZYN54.js";
+import {
+  Button
+} from "./chunk-C2HKIPLQ.js";
+import {
+  joinedClasses
+} from "./chunk-EE4V6XMB.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/split-button/split-button.tsx
+import { ChevronDown } from "lucide-react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SplitButton = forwardRef(function SplitButton2({ children, menu, menuLabel, variant = "default", size = "md", disabled, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(joinedClasses("horizontal", true), className), children: [
+    /* @__PURE__ */ jsx(Button, { ref, variant, size, disabled, ...props, children }),
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenuTrigger,
+        {
+          disabled,
+          render: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown }),
+              label: menuLabel,
+              variant,
+              size,
+              className: cn(variant !== "outline" && "border-l border-l-background/30")
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: menu })
+    ] })
+  ] });
+});
+export {
+  SplitButton
+};

package/dist/stepper.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { OlHTMLAttributes, ReactNode } from 'react';
+
+type StepStatus = "complete" | "current" | "upcoming" | "error";
+interface StepperStep {
+    label: ReactNode;
+    description?: ReactNode;
+    /** Mark this step as failed. Otherwise the status follows `current`. */
+    status?: "error";
+}
+interface StepperProps extends Omit<OlHTMLAttributes<HTMLOListElement>, "children"> {
+    steps: readonly StepperStep[];
+    /** The index (0-based) of the step in progress. Below 0 nothing has started; past the end everything is done. */
+    current: number;
+    orientation?: "horizontal" | "vertical";
+    /** The list's name. Default "Progress". */
+    label?: string;
+    /** The words spoken for each state, for translation. */
+    statusLabels?: Partial<Record<StepStatus, string>>;
+}
+/**
+ * Where someone is in a fixed sequence of steps. It is a status display, not navigation: steps are not
+ * links. Each state is also said in text (screen-reader only), never by colour alone. Server-safe.
+ */
+declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLOListElement>>;
+
+export { type StepStatus, Stepper, type StepperProps, type StepperStep };

package/dist/stepper.js

@@ -0,0 +1,104 @@
+import {
+  Icon
+} from "./chunk-Q4PPM2SU.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/stepper/stepper.tsx
+import { Check, X } from "lucide-react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STATUS_LABELS = {
+  complete: "Completed",
+  current: "Current step",
+  upcoming: "Not started",
+  error: "Error"
+};
+var INDICATOR = {
+  complete: "border-primary bg-primary text-primary-foreground",
+  current: "border-primary bg-background text-primary",
+  upcoming: "border-border bg-background text-muted-foreground",
+  error: "border-destructive bg-background text-destructive"
+};
+var Stepper = forwardRef(function Stepper2({
+  steps,
+  current,
+  orientation = "horizontal",
+  label = "Progress",
+  statusLabels,
+  className,
+  ...props
+}, ref) {
+  const words = { ...STATUS_LABELS, ...statusLabels };
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      "aria-label": label,
+      "data-orientation": orientation,
+      className: cn(horizontal ? "flex flex-row items-start" : "flex flex-col", className),
+      ...props,
+      children: steps.map((step, index) => {
+        const status = step.status === "error" ? "error" : index < current ? "complete" : index === current ? "current" : "upcoming";
+        const last = index === steps.length - 1;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-status": status,
+            "aria-current": status === "current" ? "step" : void 0,
+            className: cn(
+              "flex",
+              horizontal ? "flex-1 flex-row items-center last:flex-none" : "flex-col"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-azmr-step-indicator": "",
+                    className: cn(
+                      "flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium",
+                      INDICATOR[status]
+                    ),
+                    children: status === "complete" ? /* @__PURE__ */ jsx(Icon, { icon: Check }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { icon: X }) : index + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "grid text-left", children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: words[status] }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-sm font-medium",
+                        status === "upcoming" && "text-muted-foreground"
+                      ),
+                      children: step.label
+                    }
+                  ),
+                  step.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: step.description })
+                ] })
+              ] }),
+              !last && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-azmr-step-connector": "",
+                  "aria-hidden": "true",
+                  className: cn(
+                    index < current ? "bg-primary" : "bg-border",
+                    horizontal ? "mx-3 h-px min-w-6 flex-1" : "my-2 ml-4 min-h-6 w-px"
+                  )
+                }
+              )
+            ]
+          },
+          index
+        );
+      })
+    }
+  );
+});
+export {
+  Stepper
+};

package/dist/styles.css

@@ -0,0 +1,24 @@
+/*
+ * @azmr/ui stylesheet: the design tokens plus the global base rules.
+ *
+ *   @import "tailwindcss";
+ *   @import "@azmr/ui/styles.css";
+ *
+ * Importing this changes the page itself: the body gets our background and text colours, and every
+ * element's default border and outline colour become our tokens. For an app that already has global
+ * styles (another UI library mid-migration, a docs site), import "@azmr/ui/tokens.css" instead:
+ * the same tokens, themes, density and utilities, without these global rules.
+ */
+@import "./tokens.css";
+
+@layer base {
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+}

package/dist/table.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { TableHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+
+type Align = "left" | "center" | "right";
+interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Names the scrolling container. When set it becomes a labelled, focusable region, so a keyboard
+     * user can scroll a table that is wider than its space. Give a wide table a label.
+     */
+    label?: string;
+    /** Classes for the scrolling container, such as a `max-h-96` so the table scrolls vertically. */
+    containerClassName?: string;
+    /** Keep the header row in view while the body scrolls. Give the container a height. */
+    stickyHeader?: boolean;
+    /** Tint every other body row. */
+    striped?: boolean;
+    /** Tint the row under the pointer. */
+    hoverable?: boolean;
+}
+/**
+ * A semantic, non-interactive table. It is a native `<table>`, so it already has the table, row and
+ * cell roles; name it with a `TableCaption`. Server-safe.
+ */
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Marks the row as selected (`data-selected`) and tints it. */
+    selected?: boolean;
+}
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Horizontal alignment. Default `left`. */
+    align?: Align;
+}
+/** A header cell. `scope="col"` by default; use `scope="row"` for the first cell of a row. */
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    align?: Align;
+    /** Right-aligns and uses tabular figures, so a column of numbers lines up. */
+    numeric?: boolean;
+}
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+    /** Hide the caption visually but keep it as the table's name. */
+    srOnly?: boolean;
+}
+/** The table's name. Prefer a visible caption; `srOnly` keeps it for assistive technology only. */
+declare const TableCaption: react.ForwardRefExoticComponent<TableCaptionProps & react.RefAttributes<HTMLTableCaptionElement>>;
+
+export { Table, TableBody, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps };

package/dist/table.js

@@ -0,0 +1,124 @@
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/table/table.tsx
+import {
+  forwardRef
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var ALIGN = { left: "text-left", center: "text-center", right: "text-right" };
+var Table = forwardRef(function Table2({ label, containerClassName, stickyHeader, striped, hoverable, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...label ? { role: "region", "aria-label": label, tabIndex: 0 } : {},
+      className: cn(
+        "relative w-full overflow-x-auto",
+        label && "rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        stickyHeader && "overflow-y-auto",
+        containerClassName
+      ),
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          ref,
+          className: cn(
+            "w-full caption-bottom border-collapse text-sm",
+            stickyHeader && "[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-background [&_thead_th]:shadow-[inset_0_-1px_0_0_var(--color-border)]",
+            striped && "[&_tbody_tr:nth-child(even)]:bg-muted/50",
+            hoverable && "[&_tbody_tr:hover]:bg-muted/50",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+});
+var TableHeader = forwardRef(function TableHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props });
+});
+var TableBody = forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props });
+});
+var TableFooter = forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      ref,
+      className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+      ...props
+    }
+  );
+});
+var TableRow = forwardRef(function TableRow2({ selected, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      "data-selected": selected ? "" : void 0,
+      className: cn(
+        "h-(--density-row-height) border-b border-border transition-colors data-[selected]:bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TableHead = forwardRef(function TableHead2({ scope = "col", align = "left", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      ref,
+      scope,
+      className: cn(
+        "px-3 text-left align-middle font-medium text-muted-foreground",
+        ALIGN[align],
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TableCell = forwardRef(function TableCell2({ align, numeric, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(
+        "px-3 py-2 align-middle",
+        numeric && "text-right tabular-nums",
+        align && ALIGN[align],
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TableCaption = forwardRef(
+  function TableCaption2({ srOnly, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "caption",
+      {
+        ref,
+        className: cn(
+          "mt-4 caption-bottom text-sm text-muted-foreground",
+          srOnly && "sr-only",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};