@epilot/zenith-react 0.1.0-next.0

package/dist/components/command/command.js

@@ -0,0 +1,376 @@
+import { jsx as a, jsxs as R } from "react/jsx-runtime";
+import * as s from "react";
+import { Command as p } from "../../vendor/.bun/cmdk@1.1.1_2b23df507bdda662/vendor/cmdk/dist/index.js";
+import { mergeClasses as i, SLOT_ATTR as m, shorthands as c } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as N } from "../../styles/make-styles.js";
+import { spacingElement3 as u, spacingElement2 as r, fontWeightMedium as S, grayA11 as h, leadingXs as v, textXs as T, accentA3 as L, grayA12 as y, leadingSm as C, textSm as x, spacingElement1 as f, semGraySoft as q, semFocusRing as I, body as B, radiusSm as D, radiusMd as b, grayA3 as E } from "../../tokens/index.js";
+import { Dialog as W, DialogHeader as X, DialogTitle as A, DialogDescription as H, DialogContent as z } from "../dialog/dialog.js";
+const Y = (d) => /* @__PURE__ */ a(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 -960 960 960",
+    width: "24px",
+    fill: "currentColor",
+    ...d,
+    children: /* @__PURE__ */ a("path", { d: "M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" })
+  }
+), l = N({
+  root: {
+    backgroundColor: B,
+    color: y,
+    display: "flex",
+    height: "100%",
+    width: "100%",
+    flexDirection: "column",
+    overflowX: "hidden",
+    overflowY: "hidden",
+    ...c.borderRadius(b)
+  },
+  inputWrapper: {
+    display: "flex",
+    alignItems: "center",
+    ...c.gap(r),
+    ...c.borderBottom("1px", "solid", E),
+    paddingLeft: u,
+    paddingRight: u
+  },
+  searchIcon: {
+    width: "1.25rem",
+    height: "1.25rem",
+    flexShrink: 0,
+    opacity: 0.5
+  },
+  input: {
+    height: "3rem",
+    display: "flex",
+    width: "100%",
+    ...c.borderRadius(b),
+    backgroundColor: "transparent",
+    paddingTop: u,
+    paddingBottom: u,
+    fontSize: x,
+    lineHeight: C,
+    outlineStyle: "none",
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      // Inset (negative), not the outward +2px every other audited control uses: this input sits
+      // flush against the top edge of the Command root, which clips overflow for its rounded
+      // corners. An outward ring's top 4px (width + offset) render outside that clip box and are
+      // cut off — confirmed by measuring the rendered outline rect against the clipping ancestor's
+      // rect (second a11y review, §2). Insetting keeps the ring's outer edge at the input's own
+      // border edge, so it doesn't extend past this ancestor's clip box in this layout (it is not
+      // a universal guarantee against every possible ancestor — an ancestor that clips the input's
+      // OWN box, not just what extends beyond it, would still hide it). No layout change either
+      // way: outline never affects box model regardless of sign.
+      outlineOffset: "-2px",
+      outlineColor: I
+    },
+    "::placeholder": {
+      color: h
+    },
+    ":disabled": {
+      cursor: "not-allowed",
+      opacity: 0.5
+    }
+  },
+  list: {
+    overflowX: "hidden",
+    overflowY: "auto",
+    scrollPaddingTop: f,
+    scrollPaddingBottom: f
+  },
+  empty: {
+    paddingTop: "1.5rem",
+    paddingBottom: "1.5rem",
+    textAlign: "center",
+    fontSize: x,
+    lineHeight: C,
+    color: h
+  },
+  group: {
+    color: y,
+    overflowX: "hidden",
+    overflowY: "hidden",
+    ...c.padding(f),
+    "& [cmdk-group-heading]": {
+      color: h,
+      paddingLeft: r,
+      paddingRight: r,
+      paddingTop: "0.375rem",
+      paddingBottom: "0.375rem",
+      fontSize: T,
+      lineHeight: v,
+      fontWeight: S
+    }
+  },
+  separator: {
+    backgroundColor: q,
+    marginLeft: `calc(-1 * ${f})`,
+    marginRight: `calc(-1 * ${f})`,
+    height: "1px"
+  },
+  item: {
+    position: "relative",
+    display: "flex",
+    cursor: "default",
+    alignItems: "center",
+    ...c.gap(r),
+    ...c.borderRadius(D),
+    paddingLeft: r,
+    paddingRight: r,
+    paddingTop: "0.375rem",
+    paddingBottom: "0.375rem",
+    fontSize: x,
+    lineHeight: C,
+    outlineStyle: "none",
+    userSelect: "none",
+    color: y,
+    "&[data-selected='true'], &[aria-selected='true']": {
+      backgroundColor: L
+    },
+    ":hover": {
+      backgroundColor: L
+    },
+    "&[data-disabled='true'], &[aria-disabled='true']": {
+      pointerEvents: "none",
+      opacity: 0.5
+    },
+    "& svg": {
+      pointerEvents: "none",
+      flexShrink: 0,
+      width: "1rem",
+      height: "1rem"
+    },
+    "& svg:not([class*='text-'])": {
+      color: h
+    }
+  },
+  shortcut: {
+    color: h,
+    marginLeft: "auto",
+    fontSize: T,
+    lineHeight: v,
+    letterSpacing: "0.1em"
+  },
+  loading: {
+    color: h
+  },
+  dialogContent: {
+    overflowX: "hidden",
+    overflowY: "hidden",
+    ...c.padding(0)
+  },
+  dialogCommand: {
+    "& [cmdk-group-heading]": {
+      color: h,
+      paddingLeft: r,
+      paddingRight: r,
+      fontWeight: S
+    },
+    [`& [${m}="command-input-wrapper"]`]: {
+      height: "3rem"
+    },
+    "& [cmdk-group]": {
+      paddingLeft: r,
+      paddingRight: r
+    },
+    "& [cmdk-item]": {
+      paddingLeft: r,
+      paddingRight: r,
+      paddingTop: u,
+      paddingBottom: u
+    },
+    "& [cmdk-item] svg": {
+      width: "1.25rem",
+      height: "1.25rem"
+    },
+    "& [cmdk-input-wrapper] svg": {
+      width: "1.25rem",
+      height: "1.25rem"
+    },
+    "& [cmdk-input]": {
+      height: "3rem"
+    }
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    marginTop: "-1px",
+    marginBottom: "-1px",
+    marginLeft: "-1px",
+    marginRight: "-1px",
+    overflowX: "hidden",
+    overflowY: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    ...c.borderWidth(0)
+  }
+}), G = s.forwardRef(function({ className: t, "data-slot": o = "command", ...e }, n) {
+  const g = l();
+  return /* @__PURE__ */ a(
+    p,
+    {
+      ref: n,
+      "data-slot": o,
+      [m]: o,
+      className: i(g.root, t),
+      ...e
+    }
+  );
+});
+s.forwardRef(
+  function({
+    title: t = "Command Palette",
+    description: o = "Search for a command to run...",
+    children: e,
+    className: n,
+    showCloseButton: g = !0,
+    ...k
+  }, O) {
+    const w = l();
+    return /* @__PURE__ */ R(W, { ...k, children: [
+      /* @__PURE__ */ R(X, { className: w.srOnly, children: [
+        /* @__PURE__ */ a(A, { children: t }),
+        /* @__PURE__ */ a(H, { children: o })
+      ] }),
+      /* @__PURE__ */ a(
+        z,
+        {
+          className: i(w.dialogContent, n),
+          showCloseButton: g,
+          children: /* @__PURE__ */ a(G, { className: w.dialogCommand, children: e })
+        }
+      )
+    ] });
+  }
+);
+const F = s.forwardRef(function({ className: t, wrapperClassName: o, ...e }, n) {
+  const g = l();
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      [m]: "command-input-wrapper",
+      className: i(g.inputWrapper, o),
+      children: [
+        /* @__PURE__ */ a(Y, { className: g.searchIcon }),
+        /* @__PURE__ */ a(
+          p.Input,
+          {
+            ref: n,
+            "data-slot": "command-input",
+            [m]: "command-input",
+            className: i(g.input, t),
+            ...e
+          }
+        )
+      ]
+    }
+  );
+}), J = s.forwardRef(function({ className: t, ...o }, e) {
+  const n = l();
+  return /* @__PURE__ */ a(
+    p.List,
+    {
+      ref: e,
+      "data-slot": "command-list",
+      [m]: "command-list",
+      className: i(n.list, t),
+      ...o
+    }
+  );
+}), K = s.forwardRef(function({ className: t, ...o }, e) {
+  const n = l();
+  return /* @__PURE__ */ a(
+    p.Empty,
+    {
+      ref: e,
+      "data-slot": "command-empty",
+      [m]: "command-empty",
+      className: i(n.empty, t),
+      ...o
+    }
+  );
+}), Q = s.forwardRef(function({ className: t, ...o }, e) {
+  const n = l();
+  return /* @__PURE__ */ a(
+    p.Group,
+    {
+      ref: e,
+      "data-slot": "command-group",
+      [m]: "command-group",
+      className: i(n.group, t),
+      ...o
+    }
+  );
+}), U = s.forwardRef(function({ className: t, ...o }, e) {
+  const n = l();
+  return /* @__PURE__ */ a(
+    p.Separator,
+    {
+      ref: e,
+      "data-slot": "command-separator",
+      [m]: "command-separator",
+      className: i(n.separator, t),
+      ...o
+    }
+  );
+}), V = s.forwardRef(function({ className: t, ...o }, e) {
+  const n = l();
+  return /* @__PURE__ */ a(
+    p.Item,
+    {
+      ref: e,
+      "data-slot": "command-item",
+      [m]: "command-item",
+      className: i(n.item, t),
+      ...o
+    }
+  );
+});
+s.forwardRef(function({ className: t, ...o }, e) {
+  const n = l();
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      ref: e,
+      "data-slot": "command-shortcut",
+      [m]: "command-shortcut",
+      className: i(n.shortcut, t),
+      ...o
+    }
+  );
+});
+const oo = s.forwardRef(function({ className: t, ...o }, e) {
+  const n = l();
+  return /* @__PURE__ */ a(
+    p.Loading,
+    {
+      ref: e,
+      "data-slot": "command-loading",
+      [m]: "command-loading",
+      className: i(n.loading, t),
+      ...o
+    }
+  );
+});
+export {
+  G as Command,
+  K as CommandEmpty,
+  Q as CommandGroup,
+  F as CommandInput,
+  V as CommandItem,
+  J as CommandList,
+  oo as CommandLoading,
+  G as CommandRoot,
+  U as CommandSeparator
+};
+//# sourceMappingURL=command.js.map

package/dist/components/command/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","sources":["../../../src/components/command/command.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"../dialog/dialog\"\n\nconst SearchIcon = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    height=\"24px\"\n    viewBox=\"0 -960 960 960\"\n    width=\"24px\"\n    fill=\"currentColor\"\n    {...props}\n  >\n    <path d=\"M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    display: \"flex\",\n    height: \"100%\",\n    width: \"100%\",\n    flexDirection: \"column\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n  },\n  inputWrapper: {\n    display: \"flex\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderBottom(\"1px\", \"solid\", tokens.grayA3),\n    paddingLeft: tokens.spacingElement3,\n    paddingRight: tokens.spacingElement3,\n  },\n  searchIcon: {\n    width: \"1.25rem\",\n    height: \"1.25rem\",\n    flexShrink: 0,\n    opacity: 0.5,\n  },\n  input: {\n    height: \"3rem\",\n    display: \"flex\",\n    width: \"100%\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    backgroundColor: \"transparent\",\n    paddingTop: tokens.spacingElement3,\n    paddingBottom: tokens.spacingElement3,\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    outlineStyle: \"none\",\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      // Inset (negative), not the outward +2px every other audited control uses: this input sits\n      // flush against the top edge of the Command root, which clips overflow for its rounded\n      // corners. An outward ring's top 4px (width + offset) render outside that clip box and are\n      // cut off — confirmed by measuring the rendered outline rect against the clipping ancestor's\n      // rect (second a11y review, §2). Insetting keeps the ring's outer edge at the input's own\n      // border edge, so it doesn't extend past this ancestor's clip box in this layout (it is not\n      // a universal guarantee against every possible ancestor — an ancestor that clips the input's\n      // OWN box, not just what extends beyond it, would still hide it). No layout change either\n      // way: outline never affects box model regardless of sign.\n      outlineOffset: \"-2px\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"::placeholder\": {\n      color: tokens.grayA11,\n    },\n    \":disabled\": {\n      cursor: \"not-allowed\",\n      opacity: 0.5,\n    },\n  },\n  list: {\n    overflowX: \"hidden\",\n    overflowY: \"auto\",\n    scrollPaddingTop: tokens.spacingElement1,\n    scrollPaddingBottom: tokens.spacingElement1,\n  },\n  empty: {\n    paddingTop: \"1.5rem\",\n    paddingBottom: \"1.5rem\",\n    textAlign: \"center\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    color: tokens.grayA11,\n  },\n  group: {\n    color: tokens.grayA12,\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.padding(tokens.spacingElement1),\n    \"& [cmdk-group-heading]\": {\n      color: tokens.grayA11,\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      paddingTop: \"0.375rem\",\n      paddingBottom: \"0.375rem\",\n      fontSize: tokens.textXs,\n      lineHeight: tokens.leadingXs,\n      fontWeight: tokens.fontWeightMedium,\n    },\n  },\n  separator: {\n    backgroundColor: tokens.semGraySoft,\n    marginLeft: `calc(-1 * ${tokens.spacingElement1})`,\n    marginRight: `calc(-1 * ${tokens.spacingElement1})`,\n    height: \"1px\",\n  },\n  item: {\n    position: \"relative\",\n    display: \"flex\",\n    cursor: \"default\",\n    alignItems: \"center\",\n    ...shorthands.gap(tokens.spacingElement2),\n    ...shorthands.borderRadius(tokens.radiusSm),\n    paddingLeft: tokens.spacingElement2,\n    paddingRight: tokens.spacingElement2,\n    paddingTop: \"0.375rem\",\n    paddingBottom: \"0.375rem\",\n    fontSize: tokens.textSm,\n    lineHeight: tokens.leadingSm,\n    outlineStyle: \"none\",\n    userSelect: \"none\",\n    color: tokens.grayA12,\n    \"&[data-selected='true'], &[aria-selected='true']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \":hover\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-disabled='true'], &[aria-disabled='true']\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      pointerEvents: \"none\",\n      flexShrink: 0,\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n    \"& svg:not([class*='text-'])\": {\n      color: tokens.grayA11,\n    },\n  },\n  shortcut: {\n    color: tokens.grayA11,\n    marginLeft: \"auto\",\n    fontSize: tokens.textXs,\n    lineHeight: tokens.leadingXs,\n    letterSpacing: \"0.1em\",\n  },\n  loading: {\n    color: tokens.grayA11,\n  },\n  dialogContent: {\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    ...shorthands.padding(0),\n  },\n  dialogCommand: {\n    \"& [cmdk-group-heading]\": {\n      color: tokens.grayA11,\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      fontWeight: tokens.fontWeightMedium,\n    },\n    [`& [${SLOT_ATTR}=\"command-input-wrapper\"]`]: {\n      height: \"3rem\",\n    },\n    \"& [cmdk-group]\": {\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n    },\n    \"& [cmdk-item]\": {\n      paddingLeft: tokens.spacingElement2,\n      paddingRight: tokens.spacingElement2,\n      paddingTop: tokens.spacingElement3,\n      paddingBottom: tokens.spacingElement3,\n    },\n    \"& [cmdk-item] svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n    \"& [cmdk-input-wrapper] svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n    \"& [cmdk-input]\": {\n      height: \"3rem\",\n    },\n  },\n  srOnly: {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    paddingTop: 0,\n    paddingBottom: 0,\n    paddingLeft: 0,\n    paddingRight: 0,\n    marginTop: \"-1px\",\n    marginBottom: \"-1px\",\n    marginLeft: \"-1px\",\n    marginRight: \"-1px\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n    ...shorthands.borderWidth(0),\n  },\n})\n\n/**\n * @internal not part of the 0.1 public API. Command is fully implemented and tested, but the barrel\n * never exported it and its only consumer is `field/field-combobox.tsx`, which builds its listbox\n * out of these pieces.\n *\n * This was a decision, not an oversight: a public Command is a surface nobody has reviewed as\n * public API, and exporting it after 0.1 is additive and non-breaking, whereas un-exporting it\n * would not be. Marked here rather than left unexported and unexplained so that\n * `public-surface.test.ts` records the classification instead of reporting the family as a gap, and\n * so the a11y and visual gates stop asking an internal for consumer-facing coverage.\n *\n * To make it public: delete this marker and export the family from `src/index.ts`. The gates will\n * then require a family test with an accessible query and a visual specimen, which is the review\n * this deferred.\n */\nexport type CommandProps = React.ComponentProps<typeof CommandPrimitive> & {\n  \"data-slot\"?: string\n}\n\nexport const Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  CommandProps\n>(function Command(\n  { className, \"data-slot\": dataSlot = \"command\", ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive\n      ref={ref}\n      data-slot={dataSlot}\n      {...{ [SLOT_ATTR]: dataSlot }}\n      className={mergeClasses(styles.root, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandDialogProps = Omit<\n  React.ComponentProps<typeof Dialog>,\n  \"children\"\n> & {\n  children?: React.ReactNode\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}\n\nexport const CommandDialog = React.forwardRef<HTMLElement, CommandDialogProps>(\n  function CommandDialog(\n    {\n      title = \"Command Palette\",\n      description = \"Search for a command to run...\",\n      children,\n      className,\n      showCloseButton = true,\n      ...props\n    },\n    _ref\n  ) {\n    const styles = useStyles()\n\n    return (\n      <Dialog {...props}>\n        <DialogHeader className={styles.srOnly}>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <DialogContent\n          className={mergeClasses(styles.dialogContent, className)}\n          showCloseButton={showCloseButton}\n        >\n          <Command className={styles.dialogCommand}>{children}</Command>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n)\n\nexport type CommandInputProps = React.ComponentProps<\n  typeof CommandPrimitive.Input\n> & {\n  wrapperClassName?: string\n}\n\nexport const CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  CommandInputProps\n>(function CommandInput({ className, wrapperClassName, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      {...{ [SLOT_ATTR]: \"command-input-wrapper\" }}\n      className={mergeClasses(styles.inputWrapper, wrapperClassName)}\n    >\n      <SearchIcon className={styles.searchIcon} />\n      <CommandPrimitive.Input\n        ref={ref}\n        data-slot=\"command-input\"\n        {...{ [SLOT_ATTR]: \"command-input\" }}\n        className={mergeClasses(styles.input, className)}\n        {...props}\n      />\n    </div>\n  )\n})\n\nexport type CommandListProps = React.ComponentProps<\n  typeof CommandPrimitive.List\n>\n\nexport const CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  CommandListProps\n>(function CommandList({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      data-slot=\"command-list\"\n      {...{ [SLOT_ATTR]: \"command-list\" }}\n      className={mergeClasses(styles.list, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandEmptyProps = React.ComponentProps<\n  typeof CommandPrimitive.Empty\n>\n\nexport const CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  CommandEmptyProps\n>(function CommandEmpty({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      data-slot=\"command-empty\"\n      {...{ [SLOT_ATTR]: \"command-empty\" }}\n      className={mergeClasses(styles.empty, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandGroupProps = React.ComponentProps<\n  typeof CommandPrimitive.Group\n>\n\nexport const CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  CommandGroupProps\n>(function CommandGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      data-slot=\"command-group\"\n      {...{ [SLOT_ATTR]: \"command-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandSeparatorProps = React.ComponentProps<\n  typeof CommandPrimitive.Separator\n>\n\nexport const CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  CommandSeparatorProps\n>(function CommandSeparator({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Separator\n      ref={ref}\n      data-slot=\"command-separator\"\n      {...{ [SLOT_ATTR]: \"command-separator\" }}\n      className={mergeClasses(styles.separator, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandItemProps = React.ComponentProps<\n  typeof CommandPrimitive.Item\n>\n\nexport const CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  CommandItemProps\n>(function CommandItem({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      data-slot=\"command-item\"\n      {...{ [SLOT_ATTR]: \"command-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandShortcutProps = React.ComponentProps<\"span\">\n\nexport const CommandShortcut = React.forwardRef<\n  HTMLSpanElement,\n  CommandShortcutProps\n>(function CommandShortcut({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"command-shortcut\"\n      {...{ [SLOT_ATTR]: \"command-shortcut\" }}\n      className={mergeClasses(styles.shortcut, className)}\n      {...props}\n    />\n  )\n})\n\nexport type CommandLoadingProps = React.ComponentProps<\n  typeof CommandPrimitive.Loading\n>\n\nexport const CommandLoading = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Loading>,\n  CommandLoadingProps\n>(function CommandLoading({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <CommandPrimitive.Loading\n      ref={ref}\n      data-slot=\"command-loading\"\n      {...{ [SLOT_ATTR]: \"command-loading\" }}\n      className={mergeClasses(styles.loading, className)}\n      {...props}\n    />\n  )\n})\n\nexport { Command as CommandRoot }\n"],"names":["SearchIcon","props","jsx","useStyles","makeZenithStyles","tokens.body","tokens.grayA12","shorthands","tokens.radiusMd","tokens.spacingElement2","tokens.grayA3","tokens.spacingElement3","tokens.textSm","tokens.leadingSm","tokens.semFocusRing","tokens.grayA11","tokens.spacingElement1","tokens.textXs","tokens.leadingXs","tokens.fontWeightMedium","tokens.semGraySoft","tokens.radiusSm","tokens.accentA3","SLOT_ATTR","Command","React","className","dataSlot","ref","styles","CommandPrimitive","mergeClasses","title","description","children","showCloseButton","_ref","jsxs","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","CommandInput","wrapperClassName","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandLoading"],"mappings":"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"}

package/dist/components/data-table/data-table-body.js

@@ -0,0 +1,84 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as h from "react";
+import { makeZenithStyles as D } from "../../styles/make-styles.js";
+import { grayA11 as g } from "../../tokens/index.js";
+import { TableBody as o, TableRow as B, TableCell as w } from "../table/table.js";
+import { DataTableRow as v } from "./data-table-row.js";
+import { DataTableLoading as C } from "./data-table-loading.js";
+import { useDataTable as R } from "./hooks/use-data-table.js";
+import { useDataTableContent as S } from "./hooks/use-data-table-content.js";
+import { SLOT_ATTR as l } from "@epilot/zenith-runtime/v1";
+const L = D({
+  stateCell: {
+    height: "12rem",
+    color: g
+  }
+});
+function i({
+  colSpan: b,
+  children: t
+}) {
+  const r = L();
+  return /* @__PURE__ */ a(B, { noHover: !0, children: /* @__PURE__ */ a(w, { colSpan: b, align: "center", className: r.stateCell, children: t }) });
+}
+const M = h.forwardRef(function({
+  className: t,
+  emptyState: r,
+  loadingState: f,
+  isLoading: u = !1,
+  errorState: d,
+  isError: m = !1
+}, e) {
+  const { table: c } = R(), n = S(), T = (n == null ? void 0 : n.spacerWidth) ?? 0, p = c.getRowModel().rows, s = c.getVisibleLeafColumns().length + (T > 0 ? 1 : 0);
+  return process.env.NODE_ENV !== "production" && m && !d && console.warn(
+    "DataTableBody: isError is true but no errorState was provided. Please provide an errorState prop to display error content."
+  ), m && d ? /* @__PURE__ */ a(
+    o,
+    {
+      ref: e,
+      "data-slot": "data-table-body",
+      [l]: "data-table-body",
+      "data-fs-element": "DataTable-Body",
+      "data-state": "error",
+      className: t,
+      children: /* @__PURE__ */ a(i, { colSpan: s, children: d })
+    }
+  ) : u ? /* @__PURE__ */ a(
+    o,
+    {
+      ref: e,
+      "data-slot": "data-table-body",
+      [l]: "data-table-body",
+      "data-fs-element": "DataTable-Body",
+      "data-state": "loading",
+      className: t,
+      "aria-busy": "true",
+      children: /* @__PURE__ */ a(i, { colSpan: s, children: f ?? /* @__PURE__ */ a(C, {}) })
+    }
+  ) : p.length ? /* @__PURE__ */ a(
+    o,
+    {
+      ref: e,
+      "data-slot": "data-table-body",
+      [l]: "data-table-body",
+      "data-fs-element": "DataTable-Body",
+      className: t,
+      children: p.map((y) => /* @__PURE__ */ a(v, { row: y }, y.id))
+    }
+  ) : /* @__PURE__ */ a(
+    o,
+    {
+      ref: e,
+      "data-slot": "data-table-body",
+      [l]: "data-table-body",
+      "data-fs-element": "DataTable-Body",
+      "data-state": "empty",
+      className: t,
+      children: /* @__PURE__ */ a(i, { colSpan: s, children: r })
+    }
+  );
+});
+export {
+  M as DataTableBody
+};
+//# sourceMappingURL=data-table-body.js.map

package/dist/components/data-table/data-table-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-body.js","sources":["../../../src/components/data-table/data-table-body.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { ReactNode } from \"react\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\nimport { TableBody, TableRow, TableCell } from \"../table/table\"\nimport { useDataTable, useDataTableContent } from \"./hooks\"\nimport { DataTableRow } from \"./data-table-row\"\nimport { DataTableLoading } from \"./data-table-loading\"\n\nconst useStyles = makeZenithStyles({\n  stateCell: {\n    height: \"12rem\",\n    color: tokens.grayA11,\n  },\n})\n\nexport type DataTableBodyProps = {\n  /** Additional class name */\n  className?: string\n  /** Custom empty state content */\n  emptyState?: ReactNode\n  /** Loading state content (shown when isLoading is true) */\n  loadingState?: ReactNode\n  /** Whether the table is in loading state */\n  isLoading?: boolean\n  /** Error state content (shown when isError is true) */\n  errorState?: ReactNode\n  /** Whether the table is in error state */\n  isError?: boolean\n}\n\n/**\n * Internal component for state display (loading/error/empty).\n */\nfunction DataTableStateDisplay({\n  colSpan,\n  children,\n}: {\n  colSpan: number\n  children?: ReactNode\n}) {\n  const styles = useStyles()\n\n  return (\n    <TableRow noHover>\n      <TableCell colSpan={colSpan} align=\"center\" className={styles.stateCell}>\n        {children}\n      </TableCell>\n    </TableRow>\n  )\n}\n\n/**\n * Renders the table body with rows.\n * Must be used within a DataTable component.\n */\nexport const DataTableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  DataTableBodyProps\n>(function DataTableBody(\n  {\n    className,\n    emptyState,\n    loadingState,\n    isLoading = false,\n    errorState,\n    isError = false,\n  },\n  ref\n) {\n  const { table } = useDataTable()\n  const contentContext = useDataTableContent()\n  const spacerWidth = contentContext?.spacerWidth ?? 0\n\n  const rows = table.getRowModel().rows\n  const visibleColumns = table.getVisibleLeafColumns()\n  const colSpan = visibleColumns.length + (spacerWidth > 0 ? 1 : 0)\n\n  // Warn if isError is true but no errorState is provided\n  if (process.env.NODE_ENV !== \"production\" && isError && !errorState) {\n    console.warn(\n      \"DataTableBody: isError is true but no errorState was provided. \" +\n        \"Please provide an errorState prop to display error content.\"\n    )\n  }\n\n  // Priority: Error > Loading > Empty > Data\n\n  // Error state\n  if (isError && errorState) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"error\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {errorState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"loading\"\n        className={className}\n        aria-busy=\"true\"\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {loadingState ?? <DataTableLoading />}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Empty state\n  if (!rows.length) {\n    return (\n      <TableBody\n        ref={ref}\n        data-slot=\"data-table-body\"\n        {...{ [SLOT_ATTR]: \"data-table-body\" }}\n        data-fs-element=\"DataTable-Body\"\n        data-state=\"empty\"\n        className={className}\n      >\n        <DataTableStateDisplay colSpan={colSpan}>\n          {emptyState}\n        </DataTableStateDisplay>\n      </TableBody>\n    )\n  }\n\n  // Standard rendering\n  return (\n    <TableBody\n      ref={ref}\n      data-slot=\"data-table-body\"\n      {...{ [SLOT_ATTR]: \"data-table-body\" }}\n      data-fs-element=\"DataTable-Body\"\n      className={className}\n    >\n      {rows.map((row) => (\n        <DataTableRow key={row.id} row={row} />\n      ))}\n    </TableBody>\n  )\n})\n"],"names":["useStyles","makeZenithStyles","tokens.grayA11","DataTableStateDisplay","colSpan","children","styles","jsx","TableRow","TableCell","DataTableBody","React","className","emptyState","loadingState","isLoading","errorState","isError","ref","table","useDataTable","contentContext","useDataTableContent","spacerWidth","rows","TableBody","SLOT_ATTR","DataTableLoading","row","DataTableRow"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,OAAOC;AAAAA,EAAO;AAElB,CAAC;AAoBD,SAASC,EAAsB;AAAA,EAC7B,SAAAC;AAAA,EACA,UAAAC;AACF,GAGG;AACD,QAAMC,IAASN,EAAA;AAEf,SACE,gBAAAO,EAACC,GAAA,EAAS,SAAO,IACf,UAAA,gBAAAD,EAACE,GAAA,EAAU,SAAAL,GAAkB,OAAM,UAAS,WAAWE,EAAO,WAC3D,UAAAD,GACH,GACF;AAEJ;AAMO,MAAMK,IAAgBC,EAAM,WAGjC,SACA;AAAA,EACE,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,GACAC,GACA;AACA,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZC,IAAiBC,EAAA,GACjBC,KAAcF,KAAA,gBAAAA,EAAgB,gBAAe,GAE7CG,IAAOL,EAAM,YAAA,EAAc,MAE3Bf,IADiBe,EAAM,sBAAA,EACE,UAAUI,IAAc,IAAI,IAAI;AAa/D,SAVI,QAAQ,IAAI,aAAa,gBAAgBN,KAAW,CAACD,KACvD,QAAQ;AAAA,IACN;AAAA,EAAA,GAQAC,KAAWD,IAEX,gBAAAT;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAW;AAAA,MACX,WAAAd;AAAA,MAEA,UAAA,gBAAAL,EAACJ,GAAA,EAAsB,SAAAC,GACpB,UAAAY,EAAA,CACH;AAAA,IAAA;AAAA,EAAA,IAMFD,IAEA,gBAAAR;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAW;AAAA,MACX,WAAAd;AAAA,MACA,aAAU;AAAA,MAEV,4BAACT,GAAA,EAAsB,SAAAC,GACpB,UAAAU,KAAgB,gBAAAP,EAACoB,KAAiB,EAAA,CACrC;AAAA,IAAA;AAAA,EAAA,IAMDH,EAAK,SAmBR,gBAAAjB;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,WAAAd;AAAA,MAEC,UAAAY,EAAK,IAAI,CAACI,wBACRC,GAAA,EAA0B,KAAAD,EAAA,GAARA,EAAI,EAAc,CACtC;AAAA,IAAA;AAAA,EAAA,IA1BD,gBAAArB;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACQ,CAAS,GAAG;AAAA,MACnB,mBAAgB;AAAA,MAChB,cAAW;AAAA,MACX,WAAAd;AAAA,MAEA,UAAA,gBAAAL,EAACJ,GAAA,EAAsB,SAAAC,GACpB,UAAAS,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAmBR,CAAC;"}

package/dist/components/data-table/data-table-column-header.js

@@ -0,0 +1,126 @@
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import * as l from "react";
+import { mergeClasses as h, SLOT_ATTR as g, shorthands as i } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as p } from "../../styles/make-styles.js";
+import { accent11 as m, accentA8 as u, semAccentSoft as w, spacingElement1 as c, radiusLg as k } from "../../tokens/index.js";
+const f = (e) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("path", { d: "m5 12 7-7 7 7" }),
+      /* @__PURE__ */ o("path", { d: "M12 19V5" })
+    ]
+  }
+), v = (e) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("path", { d: "M12 5v14" }),
+      /* @__PURE__ */ o("path", { d: "m19 12-7 7-7-7" })
+    ]
+  }
+), S = (e) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("path", { d: "m7 15 5 5 5-5" }),
+      /* @__PURE__ */ o("path", { d: "m7 9 5-5 5 5" })
+    ]
+  }
+), b = p({
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: c,
+    ...i.paddingBlock("0.125rem"),
+    ...i.paddingInline(c),
+    ...i.borderRadius(k),
+    cursor: "pointer",
+    transitionProperty: "color, background-color, border-color",
+    transitionDuration: "150ms",
+    ":hover": {
+      backgroundColor: w
+    },
+    ":focus-visible": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineOffset: "2px",
+      outlineColor: u
+    }
+  },
+  iconActive: {
+    width: "1rem",
+    height: "1rem",
+    color: m,
+    flexShrink: 0
+  },
+  iconUnsorted: {
+    width: "1rem",
+    height: "1rem",
+    opacity: 0.4,
+    flexShrink: 0
+  }
+});
+function x({ column: e, title: t, className: a }, d) {
+  const r = b();
+  return e.getCanSort() ? /* @__PURE__ */ n(
+    "span",
+    {
+      ref: d,
+      role: "button",
+      tabIndex: 0,
+      "data-slot": "data-table-column-header",
+      [g]: "data-table-column-header",
+      "data-fs-element": "DataTable-SortButton",
+      onClick: () => e.toggleSorting(),
+      onKeyDown: (s) => {
+        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), e.toggleSorting());
+      },
+      "aria-label": e.getIsSorted() === "asc" ? `${t}, sorted ascending. Click to sort descending.` : e.getIsSorted() === "desc" ? `${t}, sorted descending. Click to remove sorting.` : `${t}. Click to sort ascending.`,
+      className: h(r.button, a),
+      children: [
+        t,
+        e.getIsSorted() === "asc" && /* @__PURE__ */ o(f, { className: r.iconActive }),
+        e.getIsSorted() === "desc" && /* @__PURE__ */ o(v, { className: r.iconActive }),
+        !e.getIsSorted() && /* @__PURE__ */ o(S, { className: r.iconUnsorted })
+      ]
+    }
+  ) : /* @__PURE__ */ o("span", { ref: d, className: a, children: t });
+}
+const L = l.forwardRef(
+  x
+);
+export {
+  L as DataTableColumnHeader
+};
+//# sourceMappingURL=data-table-column-header.js.map

package/dist/components/data-table/data-table-column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-header.js","sources":["../../../src/components/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from \"react\"\nimport type { SVGProps } from \"react\"\nimport type { Column } from \"@tanstack/react-table\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\n// Sort icons\nconst IconArrowUp = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m5 12 7-7 7 7\" />\n    <path d=\"M12 19V5\" />\n  </svg>\n)\n\nconst IconArrowDown = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"M12 5v14\" />\n    <path d=\"m19 12-7 7-7-7\" />\n  </svg>\n)\n\nconst IconArrowsSort = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    {...props}\n  >\n    <path d=\"m7 15 5 5 5-5\" />\n    <path d=\"m7 9 5-5 5 5\" />\n  </svg>\n)\n\nconst useStyles = makeZenithStyles({\n  button: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    gap: tokens.spacingElement1,\n    ...shorthands.paddingBlock(\"0.125rem\"),\n    ...shorthands.paddingInline(tokens.spacingElement1),\n    ...shorthands.borderRadius(tokens.radiusLg),\n    cursor: \"pointer\",\n    transitionProperty: \"color, background-color, border-color\",\n    transitionDuration: \"150ms\",\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineOffset: \"2px\",\n      outlineColor: tokens.accentA8,\n    },\n  },\n  iconActive: {\n    width: \"1rem\",\n    height: \"1rem\",\n    color: tokens.accent11,\n    flexShrink: 0,\n  },\n  iconUnsorted: {\n    width: \"1rem\",\n    height: \"1rem\",\n    opacity: 0.4,\n    flexShrink: 0,\n  },\n})\n\nexport type DataTableColumnHeaderProps<TData = unknown, TValue = unknown> = {\n  /** The column instance from Tanstack Table */\n  column: Column<TData, TValue>\n  /** The header title to display */\n  title: string\n  /** Additional class name */\n  className?: string\n}\n\nfunction DataTableColumnHeaderInner<TData, TValue>(\n  { column, title, className }: DataTableColumnHeaderProps<TData, TValue>,\n  ref: React.ForwardedRef<HTMLSpanElement>\n) {\n  const styles = useStyles()\n\n  if (!column.getCanSort()) {\n    return (\n      <span ref={ref} className={className}>\n        {title}\n      </span>\n    )\n  }\n\n  return (\n    <span\n      ref={ref}\n      role=\"button\"\n      tabIndex={0}\n      data-slot=\"data-table-column-header\"\n      {...{ [SLOT_ATTR]: \"data-table-column-header\" }}\n      data-fs-element=\"DataTable-SortButton\"\n      onClick={() => column.toggleSorting()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault()\n          column.toggleSorting()\n        }\n      }}\n      aria-label={\n        column.getIsSorted() === \"asc\"\n          ? `${title}, sorted ascending. Click to sort descending.`\n          : column.getIsSorted() === \"desc\"\n            ? `${title}, sorted descending. Click to remove sorting.`\n            : `${title}. Click to sort ascending.`\n      }\n      className={mergeClasses(styles.button, className)}\n    >\n      {title}\n      {column.getIsSorted() === \"asc\" && (\n        <IconArrowUp className={styles.iconActive} />\n      )}\n      {column.getIsSorted() === \"desc\" && (\n        <IconArrowDown className={styles.iconActive} />\n      )}\n      {!column.getIsSorted() && (\n        <IconArrowsSort className={styles.iconUnsorted} />\n      )}\n    </span>\n  )\n}\n\nexport const DataTableColumnHeader = React.forwardRef(\n  DataTableColumnHeaderInner\n) as <TData = unknown, TValue = unknown>(\n  props: DataTableColumnHeaderProps<TData, TValue> & {\n    ref?: React.Ref<HTMLSpanElement>\n  }\n) => React.ReactElement | null\n"],"names":["IconArrowUp","props","jsxs","jsx","IconArrowDown","IconArrowsSort","useStyles","makeZenithStyles","tokens.spacingElement1","shorthands","tokens.radiusLg","tokens.semAccentSoft","tokens.accentA8","tokens.accent11","DataTableColumnHeaderInner","column","title","className","ref","styles","SLOT_ATTR","e","mergeClasses","DataTableColumnHeader","React"],"mappings":"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"}