@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/fundamental/skeleton.js

@@ -0,0 +1,158 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import * as d from "react";
+import { cn as m } from "../../lib/utils.js";
+import { cva as b } from "class-variance-authority";
+const g = b(
+  "animate-pulse bg-[var(--grey-alpha-50)] rounded",
+  {
+    variants: {
+      variant: {
+        default: "",
+        circle: "rounded-full",
+        rectangular: "rounded-s"
+      },
+      size: {
+        s: "h-4",
+        m: "h-6",
+        l: "h-8",
+        xl: "h-12"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "m"
+    }
+  }
+), o = /* @__PURE__ */ d.forwardRef(
+  ({
+    className: s,
+    variant: t,
+    size: a,
+    width: r,
+    height: l,
+    randomWidth: n = !1,
+    lines: i = 1,
+    style: u,
+    ...f
+  }, y) => {
+    const h = d.useMemo(() => n ? `${Math.floor(Math.random() * 40) + 50}%` : void 0, [n]), w = d.useMemo(() => {
+      const c = { ...u };
+      return r !== void 0 ? c.width = typeof r == "number" ? `${r}px` : r : h && (c.width = h), l !== void 0 && (c.height = typeof l == "number" ? `${l}px` : l), c;
+    }, [u, r, l, h]);
+    return i > 1 ? /* @__PURE__ */ e(
+      "div",
+      {
+        ref: y,
+        className: m("space-y-[var(--space-s)]", s),
+        ...f,
+        children: Array.from({ length: i }).map((c, v) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: m(
+              g({ variant: t, size: a }),
+              "w-full",
+              // Last line is often shorter in real text
+              v === i - 1 && n && "max-w-[75%]"
+            ),
+            style: v === i - 1 && n ? { width: `${Math.floor(Math.random() * 25) + 50}%` } : n ? { width: h } : w,
+            "aria-hidden": "true"
+          },
+          v
+        ))
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        ref: y,
+        className: m(g({ variant: t, size: a }), "w-full", s),
+        style: w,
+        "aria-hidden": "true",
+        ...f
+      }
+    );
+  }
+);
+o.displayName = "Skeleton";
+const N = /* @__PURE__ */ d.forwardRef(({ size: s = "m", className: t, ...a }, r) => /* @__PURE__ */ e(
+  o,
+  {
+    ref: r,
+    variant: "circle",
+    className: m({
+      s: "h-8 w-8",
+      m: "h-10 w-10",
+      l: "h-12 w-12",
+      xl: "h-16 w-16"
+    }[s], t),
+    ...a
+  }
+));
+N.displayName = "SkeletonAvatar";
+const S = /* @__PURE__ */ d.forwardRef(({ size: s = "m", className: t, ...a }, r) => /* @__PURE__ */ e(
+  o,
+  {
+    ref: r,
+    variant: "rectangular",
+    className: m({
+      s: "h-9 w-20",
+      m: "h-10 w-24",
+      l: "h-11 w-28"
+    }[s], t),
+    ...a
+  }
+));
+S.displayName = "SkeletonButton";
+const k = /* @__PURE__ */ d.forwardRef(({ className: s, ...t }, a) => /* @__PURE__ */ p(
+  "div",
+  {
+    ref: a,
+    className: m(
+      "rounded-l border border-[var(--color-border-primary-subtle)] p-[var(--space-l)] space-y-[var(--space-m)]",
+      s
+    ),
+    ...t,
+    children: [
+      /* @__PURE__ */ p("div", { className: "space-y-[var(--space-s)]", children: [
+        /* @__PURE__ */ e(o, { height: 20, width: "60%" }),
+        /* @__PURE__ */ e(o, { lines: 2, size: "s", randomWidth: !0 })
+      ] }),
+      /* @__PURE__ */ p("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ p("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+          /* @__PURE__ */ e(N, { size: "s" }),
+          /* @__PURE__ */ e(o, { height: 16, width: "80px" })
+        ] }),
+        /* @__PURE__ */ e(S, { size: "s" })
+      ] })
+    ]
+  }
+));
+k.displayName = "SkeletonCard";
+const $ = /* @__PURE__ */ d.forwardRef(({ className: s, rows: t = 5, columns: a = 4, ...r }, l) => /* @__PURE__ */ p(
+  "div",
+  {
+    ref: l,
+    className: m("space-y-[var(--space-m)]", s),
+    ...r,
+    children: [
+      /* @__PURE__ */ e("div", { className: "grid gap-[var(--space-m)]", style: { gridTemplateColumns: `repeat(${a}, 1fr)` }, children: Array.from({ length: a }).map((n, i) => /* @__PURE__ */ e(o, { height: 20, width: "70%" }, `header-${i}`)) }),
+      Array.from({ length: t }).map((n, i) => /* @__PURE__ */ e(
+        "div",
+        {
+          className: "grid gap-[var(--space-m)]",
+          style: { gridTemplateColumns: `repeat(${a}, 1fr)` },
+          children: Array.from({ length: a }).map((u, f) => /* @__PURE__ */ e(o, { height: 16, randomWidth: !0 }, `cell-${i}-${f}`))
+        },
+        `row-${i}`
+      ))
+    ]
+  }
+));
+$.displayName = "SkeletonTable";
+export {
+  o as Skeleton,
+  N as SkeletonAvatar,
+  S as SkeletonButton,
+  k as SkeletonCard,
+  $ as SkeletonTable,
+  g as skeletonVariants
+};

package/dist/es/components/fundamental/slider.js

@@ -0,0 +1,35 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import * as c from "react";
+import * as r from "@radix-ui/react-slider";
+import { cn as b } from "../../lib/utils.js";
+const u = /* @__PURE__ */ c.forwardRef(({ className: l, value: a, defaultValue: e, ...s }, d) => {
+  const i = (a || e || [0]).length;
+  return /* @__PURE__ */ n(
+    r.Root,
+    {
+      ref: d,
+      className: b(
+        "relative flex w-full touch-none select-none items-center",
+        "[&[data-disabled]]:!cursor-not-allowed [&[data-disabled]_*]:!cursor-not-allowed",
+        l
+      ),
+      value: a,
+      defaultValue: e,
+      ...s,
+      children: [
+        /* @__PURE__ */ o(r.Track, { className: "relative h-[var(--size-3xs)] w-full grow overflow-hidden rounded-full bg-[var(--color-background-neutral-default)] data-[disabled]:!cursor-not-allowed z-0", children: /* @__PURE__ */ o(r.Range, { className: "absolute h-full bg-[var(--color-background-blue-bold)] data-[disabled]:bg-[var(--grey-300)] data-[disabled]:!cursor-not-allowed" }) }),
+        Array.from({ length: i }).map((f, t) => /* @__PURE__ */ o(
+          r.Thumb,
+          {
+            className: "block h-[var(--size-xs)] w-[var(--size-xs)] rounded-full border border-[var(--color-border-brand-bold)] bg-[var(--color-surface-primary)] shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-primary)] data-[disabled]:!cursor-not-allowed data-[disabled]:pointer-events-auto data-[disabled]:border-[var(--grey-300)] data-[disabled]:ring-0 z-10 relative"
+          },
+          t
+        ))
+      ]
+    }
+  );
+});
+u.displayName = r.Root.displayName;
+export {
+  u as Slider
+};

package/dist/es/components/fundamental/spinner.js

@@ -0,0 +1,225 @@
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import * as d from "react";
+import { cn as c } from "../../lib/utils.js";
+import { cva as b } from "class-variance-authority";
+import { Icon as v } from "./icon.js";
+const x = b(
+  "animate-spin",
+  {
+    variants: {
+      size: {
+        xs: "h-3 w-3",
+        s: "h-4 w-4",
+        m: "h-5 w-5",
+        l: "h-6 w-6",
+        xl: "h-8 w-8",
+        "2xl": "h-10 w-10"
+      },
+      variant: {
+        default: "text-[var(--color-text-primary)]",
+        primary: "text-[var(--color-text-brand-bold)]",
+        secondary: "text-[var(--color-text-secondary)]",
+        tertiary: "text-[var(--color-text-tertiary)]",
+        inverse: "text-[var(--color-text-on-action)]",
+        success: "text-[var(--color-text-success-bold)]",
+        warning: "text-[var(--color-text-warning-bold)]",
+        error: "text-[var(--color-text-error-bold)]",
+        disabled: "text-[var(--color-text-disabled)]"
+      },
+      speed: {
+        slow: "animate-[spin_2s_linear_infinite]",
+        normal: "animate-spin",
+        fast: "animate-[spin_0.5s_linear_infinite]"
+      }
+    },
+    defaultVariants: {
+      size: "m",
+      variant: "default",
+      speed: "normal"
+    }
+  }
+), p = /* @__PURE__ */ d.forwardRef(
+  ({
+    className: o,
+    size: r,
+    variant: e,
+    speed: s,
+    label: a,
+    showLabel: n = !1,
+    loadingText: t = "Loading...",
+    ...i
+  }, u) => /* @__PURE__ */ f(
+    "div",
+    {
+      ref: u,
+      className: c("inline-flex items-center gap-2", o),
+      role: "status",
+      "aria-label": a || t,
+      ...i,
+      children: [
+        /* @__PURE__ */ l(
+          v,
+          {
+            name: "loader-2",
+            className: c(x({ size: r, variant: e, speed: s }))
+          }
+        ),
+        n && /* @__PURE__ */ l("span", { className: "text-body-sm text-[var(--color-text-secondary)]", children: a || t }),
+        /* @__PURE__ */ l("span", { className: "sr-only", children: a || t })
+      ]
+    }
+  )
+);
+p.displayName = "Spinner";
+const y = /* @__PURE__ */ d.forwardRef(
+  ({
+    className: o,
+    visible: r,
+    message: e = "Loading...",
+    spinnerSize: s = "l",
+    opacity: a = "medium",
+    children: n,
+    ...t
+  }, i) => {
+    if (!r) return null;
+    const u = {
+      light: "bg-[var(--color-surface-primary)]/60",
+      medium: "bg-[var(--color-surface-primary)]/80",
+      heavy: "bg-[var(--color-surface-primary)]/95"
+    }[a];
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        ref: i,
+        className: c(
+          "absolute inset-0 z-50 flex flex-col items-center justify-center",
+          u,
+          o
+        ),
+        ...t,
+        children: [
+          /* @__PURE__ */ l(p, { size: s, variant: "primary" }),
+          /* @__PURE__ */ l("p", { className: "mt-3 text-body-sm text-[var(--color-text-secondary)]", children: e }),
+          n
+        ]
+      }
+    );
+  }
+);
+y.displayName = "LoadingOverlay";
+const g = /* @__PURE__ */ d.forwardRef(
+  ({
+    className: o,
+    width: r,
+    height: e = "1rem",
+    radius: s = "m",
+    animate: a = !0,
+    ...n
+  }, t) => {
+    const i = {
+      none: "rounded-none",
+      s: "rounded-s",
+      m: "rounded",
+      l: "rounded-l",
+      full: "rounded-full"
+    }[s];
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: t,
+        className: c(
+          "bg-[var(--color-background-neutral-subtlest)]",
+          i,
+          a && "animate-pulse",
+          o
+        ),
+        style: {
+          width: typeof r == "number" ? `${r}px` : r,
+          height: typeof e == "number" ? `${e}px` : e
+        },
+        "aria-hidden": "true",
+        ...n
+      }
+    );
+  }
+);
+g.displayName = "Skeleton";
+const w = /* @__PURE__ */ d.forwardRef(
+  ({
+    className: o,
+    variant: r = "primary",
+    size: e = "m",
+    ...s
+  }, a) => {
+    const n = {
+      default: "bg-[var(--color-background-neutral-default)]",
+      primary: "bg-[var(--color-background-blue-bold)]",
+      success: "bg-[var(--color-background-success-subtle)]",
+      warning: "bg-[var(--color-background-warning-subtle)]",
+      error: "bg-[var(--color-background-error-subtle)]"
+    }[r], t = {
+      s: "h-2 w-2",
+      m: "h-3 w-3",
+      l: "h-4 w-4"
+    }[e];
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: a,
+        className: c(
+          "rounded-full animate-pulse",
+          n,
+          t,
+          o
+        ),
+        ...s
+      }
+    );
+  }
+);
+w.displayName = "Pulse";
+const h = /* @__PURE__ */ d.forwardRef(
+  ({
+    className: o,
+    total: r,
+    current: e,
+    size: s = "m",
+    animate: a = !0,
+    ...n
+  }, t) => {
+    const i = {
+      s: "h-1.5 w-1.5",
+      m: "h-2 w-2",
+      l: "h-3 w-3"
+    }[s];
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: t,
+        className: c("flex items-center gap-2", o),
+        ...n,
+        children: Array.from({ length: r }, (u, m) => /* @__PURE__ */ l(
+          "div",
+          {
+            className: c(
+              "rounded-full transition-colors duration-200",
+              i,
+              m === e ? "bg-[var(--color-background-blue-bold)]" : "bg-[var(--color-background-neutral-subtlest)]",
+              a && "transition-all duration-300"
+            )
+          },
+          m
+        ))
+      }
+    );
+  }
+);
+h.displayName = "ProgressDots";
+export {
+  y as LoadingOverlay,
+  h as ProgressDots,
+  w as Pulse,
+  g as Skeleton,
+  p as Spinner,
+  x as spinnerVariants
+};

package/dist/es/components/fundamental/switch.js

@@ -0,0 +1,27 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import * as e from "@radix-ui/react-switch";
+import { cn as a } from "../../lib/utils.js";
+const c = /* @__PURE__ */ i.forwardRef(({ className: s, ...o }, r) => /* @__PURE__ */ t(
+  e.Root,
+  {
+    className: a(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full p-[2px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#669fb6] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-primary)] disabled:cursor-not-allowed data-[state=checked]:bg-[#005f85] data-[state=unchecked]:bg-[#c0c3c9] hover:data-[state=checked]:bg-[#004764] hover:data-[state=unchecked]:bg-[#9fa5ac] disabled:data-[state=checked]:bg-[#ccdfe7] disabled:data-[state=unchecked]:bg-[rgba(85,95,109,0.1)]",
+      s
+    ),
+    ...o,
+    ref: r,
+    children: /* @__PURE__ */ t(
+      e.Thumb,
+      {
+        className: a(
+          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+c.displayName = e.Root.displayName;
+export {
+  c as Switch
+};

package/dist/es/components/fundamental/table.js

@@ -0,0 +1,263 @@
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import * as d from "react";
+import { cva as c } from "class-variance-authority";
+import { cn as s } from "../../lib/utils.js";
+const u = c(
+  "w-full caption-bottom text-body-sm",
+  {
+    variants: {
+      size: {
+        s: "[&_td:not([data-section-header])]:!text-body-xsm [&_th]:!text-body-strong-xsm [&_td:not([data-section-header])]:!px-3 [&_td:not([data-section-header])]:!py-1 [&_td:not([data-section-header])]:!h-7 [&_th]:!px-3 [&_th]:!py-1 [&_td[data-section-header]]:!p-0 [&_td[data-section-header]]:!h-5",
+        m: "[&_td:not([data-section-header])]:!text-body-sm [&_th]:!text-body-strong-sm [&_td:not([data-section-header])]:!px-4 [&_td:not([data-section-header])]:!py-2 [&_td:not([data-section-header])]:!h-9 [&_th]:!px-4 [&_th]:!py-2 [&_td[data-section-header]]:!p-0 [&_td[data-section-header]]:!h-7",
+        l: "[&_td:not([data-section-header])]:!text-body-md [&_th]:!text-body-strong-md [&_td:not([data-section-header])]:!px-6 [&_td:not([data-section-header])]:!py-3 [&_td:not([data-section-header])]:!h-11 [&_th]:!px-6 [&_th]:!py-3 [&_td[data-section-header]]:!p-0 [&_td[data-section-header]]:!h-9"
+      }
+    },
+    defaultVariants: {
+      size: "m"
+    }
+  }
+), y = c(
+  "transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "",
+        zebra: "",
+        selected: "bg-[var(--blue-25)]"
+      },
+      showBorder: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      showBorder: !0
+    }
+  }
+), v = c(
+  "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+  {
+    variants: {
+      size: {
+        s: "px-3 py-1 h-7 text-body-xsm",
+        m: "px-4 py-2 h-9 text-body-sm",
+        l: "px-6 py-3 h-11 text-body-md"
+      },
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
+      },
+      verticalAlign: {
+        top: "align-top",
+        middle: "align-middle",
+        bottom: "align-bottom"
+      },
+      numeric: {
+        true: "text-right tabular-nums",
+        false: ""
+      },
+      showBorder: {
+        true: "border-r border-[var(--color-border-primary-medium)] last:border-r-0",
+        false: ""
+      },
+      showRowBorder: {
+        true: "shadow-[inset_0_-1px_0_0_var(--color-border-primary-medium)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "m",
+      align: "left",
+      verticalAlign: "middle",
+      numeric: !1,
+      showBorder: !0,
+      showRowBorder: !1
+    }
+  }
+), _ = c(
+  "align-middle font-semibold text-[var(--color-text-primary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] bg-[var(--grey-25)] border-b border-[var(--color-border-primary-medium)]",
+  {
+    variants: {
+      size: {
+        s: "px-3 py-1 text-body-strong-xsm",
+        m: "px-4 py-2 text-body-strong-sm",
+        l: "px-6 py-3 text-body-strong-md"
+      },
+      align: {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
+      },
+      numeric: {
+        true: "text-right tabular-nums",
+        false: ""
+      },
+      showBorder: {
+        true: "border-r border-[var(--color-border-primary-medium)] last:border-r-0",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "m",
+      align: "left",
+      numeric: !1,
+      showBorder: !0
+    }
+  }
+), g = /* @__PURE__ */ d.forwardRef(
+  ({ className: t, size: e, ...r }, o) => /* @__PURE__ */ a("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ a(
+    "table",
+    {
+      ref: o,
+      className: s(u({ size: e }), t),
+      ...r
+    }
+  ) })
+);
+g.displayName = "Table";
+const w = /* @__PURE__ */ d.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ a(
+  "thead",
+  {
+    ref: r,
+    className: s(
+      "[&_tr]:border-b [&_tr]:border-[var(--color-border-primary-medium)]",
+      t
+    ),
+    ...e
+  }
+));
+w.displayName = "TableHeader";
+const N = /* @__PURE__ */ d.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ a(
+  "tbody",
+  {
+    ref: r,
+    className: s("[&_tr:last-child]:border-0", t),
+    ...e
+  }
+));
+N.displayName = "TableBody";
+const T = /* @__PURE__ */ d.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ a(
+  "tfoot",
+  {
+    ref: r,
+    className: s(
+      "border-t border-[var(--color-border-primary-medium)] bg-[var(--color-background-neutral-subtlest)] font-medium [&>tr]:last:border-b-0",
+      t
+    ),
+    ...e
+  }
+));
+T.displayName = "TableFooter";
+const p = /* @__PURE__ */ d.forwardRef(
+  ({ className: t, variant: e, zebra: r = !1, zebraIndex: o = 0, showBorder: l = !0, ...n }, i) => {
+    const b = r && o % 2 === 1 ? "bg-[var(--color-background-neutral-subtlest)]" : "";
+    return /* @__PURE__ */ a(
+      "tr",
+      {
+        ref: i,
+        className: s(
+          y({ variant: e, showBorder: l }),
+          b,
+          t
+        ),
+        ...n
+      }
+    );
+  }
+);
+p.displayName = "TableRow";
+const x = /* @__PURE__ */ d.forwardRef(
+  ({ className: t, size: e, align: r, numeric: o, showBorder: l = !0, ...n }, i) => /* @__PURE__ */ a(
+    "th",
+    {
+      ref: i,
+      className: s(_({ size: e, align: r, numeric: o, showBorder: l }), t),
+      ...n
+    }
+  )
+);
+x.displayName = "TableHead";
+const h = /* @__PURE__ */ d.forwardRef(
+  ({ className: t, size: e, align: r, verticalAlign: o, numeric: l, showBorder: n = !0, showRowBorder: i = !1, ...b }, f) => /* @__PURE__ */ a(
+    "td",
+    {
+      ref: f,
+      className: s(v({ size: e, align: r, verticalAlign: o, numeric: l, showBorder: n, showRowBorder: i }), t),
+      ...b
+    }
+  )
+);
+h.displayName = "TableCell";
+const R = /* @__PURE__ */ d.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ a(
+  "caption",
+  {
+    ref: r,
+    className: s("mt-[var(--space-m)] text-body-sm text-[var(--color-text-secondary)]", t),
+    ...e
+  }
+));
+R.displayName = "TableCaption";
+const z = /* @__PURE__ */ d.forwardRef(
+  ({ className: t, sortable: e = !1, sorted: r = !1, onSort: o, children: l, ...n }, i) => /* @__PURE__ */ a(
+    x,
+    {
+      ref: i,
+      className: s(
+        e && "cursor-pointer select-none hover:text-[var(--color-text-primary)]",
+        t
+      ),
+      onClick: e ? o : void 0,
+      ...n,
+      children: /* @__PURE__ */ m("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+        l,
+        e && /* @__PURE__ */ m("div", { className: "w-[var(--size-3xs)] h-[var(--size-3xs)] flex items-center justify-center", children: [
+          r === "asc" && /* @__PURE__ */ a("div", { className: "w-0 h-0 border-l-[3px] border-r-[3px] border-b-[4px] border-l-transparent border-r-transparent border-b-current" }),
+          r === "desc" && /* @__PURE__ */ a("div", { className: "w-0 h-0 border-l-[3px] border-r-[3px] border-t-[4px] border-l-transparent border-r-transparent border-t-current" }),
+          !r && /* @__PURE__ */ m("div", { className: "w-[var(--size-3xs)] h-[var(--size-3xs)] opacity-30", children: [
+            /* @__PURE__ */ a("div", { className: "w-0 h-0 border-l-[2px] border-r-[2px] border-b-[2px] border-l-transparent border-r-transparent border-b-current mb-[1px]" }),
+            /* @__PURE__ */ a("div", { className: "w-0 h-0 border-l-[2px] border-r-[2px] border-t-[2px] border-l-transparent border-r-transparent border-t-current" })
+          ] })
+        ] })
+      ] })
+    }
+  )
+);
+z.displayName = "TableSortHeader";
+const B = /* @__PURE__ */ d.forwardRef(({ className: t, colSpan: e, children: r, ...o }, l) => /* @__PURE__ */ a(
+  p,
+  {
+    ref: l,
+    className: s(
+      "bg-[var(--color-background-neutral-subtlest)] hover:bg-[var(--color-background-neutral-subtlest)]",
+      t
+    ),
+    ...o,
+    children: /* @__PURE__ */ a(
+      h,
+      {
+        colSpan: e,
+        className: "font-medium text-[var(--color-text-primary)] py-[var(--space-s)]",
+        children: r
+      }
+    )
+  }
+));
+B.displayName = "TableGroupHeader";
+export {
+  g as Table,
+  N as TableBody,
+  R as TableCaption,
+  h as TableCell,
+  T as TableFooter,
+  B as TableGroupHeader,
+  x as TableHead,
+  w as TableHeader,
+  p as TableRow,
+  z as TableSortHeader,
+  v as tableCellVariants,
+  _ as tableHeaderVariants,
+  y as tableRowVariants,
+  u as tableVariants
+};