@tensor_1/react 2.0.0

package/dist/chart.cjs

@@ -0,0 +1,127 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/chart.ts
+var chart_exports = {};
+__export(chart_exports, {
+  Chart: () => Chart,
+  uixChartPalette: () => uixChartPalette
+});
+module.exports = __toCommonJS(chart_exports);
+
+// src/components/Chart.tsx
+var import_react = require("react");
+var echarts = __toESM(require("echarts"), 1);
+
+// src/cx.ts
+function cx(...args) {
+  return args.filter(Boolean).join(" ");
+}
+
+// src/components/Chart.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function readToken(name) {
+  if (typeof getComputedStyle === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function uixChartPalette() {
+  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
+}
+function Chart({
+  option,
+  title,
+  subtitle,
+  height = 280,
+  className,
+  style,
+  ariaLabel,
+  tableData,
+  tableHeaders,
+  onReady,
+  header
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const chartRef = (0, import_react.useRef)(null);
+  const tableId = (0, import_react.useId)();
+  (0, import_react.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const chart = echarts.init(el, null, { renderer: "svg" });
+    chartRef.current = chart;
+    chart.setOption(option);
+    onReady?.(chart);
+    const ro = new ResizeObserver(() => chart.resize());
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      chart.dispose();
+      chartRef.current = null;
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    chartRef.current?.setOption(option, { notMerge: false });
+  }, [option]);
+  const heightVal = typeof height === "number" ? `${height}px` : height;
+  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const hasTable = tableData && tableData.length > 0 && tableHeaders && tableHeaders.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
+    (title != null || subtitle != null || header != null) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      header,
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        style: { height: heightVal },
+        role: "img",
+        "aria-label": effectiveAriaLabel,
+        "aria-describedby": hasTable ? tableId : void 0
+      }
+    ),
+    hasTable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "table",
+      {
+        id: tableId,
+        className: "sr-only",
+        "aria-label": `${effectiveAriaLabel} \u2014 data table`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: h }, h)) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[h] }, h)) }, i)) })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chart,
+  uixChartPalette
+});

package/dist/chart.d.cts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { EChartsOption, ECharts } from 'echarts';
+
+declare function uixChartPalette(): string[];
+interface ChartTableRow {
+    [key: string]: string | number;
+}
+interface ChartProps {
+    option: EChartsOption;
+    title?: string;
+    subtitle?: string;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+    tableData?: ChartTableRow[];
+    tableHeaders?: string[];
+    onReady?: (chart: ECharts) => void;
+    header?: ReactNode;
+}
+declare function Chart({ option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, }: ChartProps): react.JSX.Element;
+
+export { Chart, type ChartProps, type ChartTableRow, uixChartPalette };

package/dist/chart.d.ts

@@ -0,0 +1,3 @@
+export { Chart, ChartProps, ChartTableRow, uixChartPalette } from './components/Chart.js';
+import 'react';
+import 'echarts';

package/dist/chart.js

@@ -0,0 +1,5 @@
+import { Chart, uixChartPalette } from "./components/Chart.js";
+export {
+  Chart,
+  uixChartPalette
+};

package/dist/components/Alert.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type AlertTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    tone?: AlertTone;
+    title?: ReactNode;
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+declare function Alert({ tone, title, icon, children, className, ...props }: AlertProps): react.JSX.Element;
+
+export { Alert, type AlertProps, type AlertTone };

package/dist/components/Alert.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Alert({ tone, title, icon, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "uix-alert__icon", children: icon }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      title && /* @__PURE__ */ jsx("div", { className: "uix-alert__title", children: title }),
+      children && /* @__PURE__ */ jsx("div", { className: "uix-alert__body", children })
+    ] })
+  ] });
+}
+export {
+  Alert
+};

package/dist/components/AppShell.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    collapsed?: boolean;
+    sidebar?: ReactNode;
+    topbar?: ReactNode;
+    children?: ReactNode;
+}
+declare function AppShell({ collapsed, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
+
+export { AppShell, type AppShellProps };

package/dist/components/AppShell.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function AppShell({ collapsed, sidebar, topbar, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-shell", className), "data-collapsed": collapsed || void 0, ...props, children: [
+    sidebar && /* @__PURE__ */ jsx("div", { className: "uix-shell__sidebar", children: sidebar }),
+    topbar && /* @__PURE__ */ jsx("div", { className: "uix-shell__topbar", children: topbar }),
+    /* @__PURE__ */ jsx("main", { className: "uix-shell__main", children })
+  ] });
+}
+export {
+  AppShell
+};

package/dist/components/Avatar.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: 'sm' | 'md' | 'lg';
+    src?: string;
+    alt?: string;
+    /** Initials / fallback shown when there is no `src`. */
+    children?: ReactNode;
+    /** Online status dot. */
+    status?: boolean;
+}
+/** Avatar over `.uix-avatar`. Renders an image when `src` is set, else children (initials). */
+declare function Avatar({ size, src, alt, children, status, className, ...props }: AvatarProps): react.JSX.Element;
+interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+}
+/** Overlapping avatar stack over `.uix-avatar-group`. */
+declare function AvatarGroup({ children, className, ...props }: AvatarGroupProps): react.JSX.Element;
+interface UserChipProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Usually an `<Avatar />`. */
+    avatar?: ReactNode;
+    name?: ReactNode;
+    /** Secondary line (role, email). */
+    sub?: ReactNode;
+}
+/** Avatar + name (+ optional sub-line) over `.uix-user-chip`. */
+declare function UserChip({ avatar, name, sub, className, children, ...props }: UserChipProps): react.JSX.Element;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, UserChip, type UserChipProps };

package/dist/components/Avatar.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
+    src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "" }) : children,
+    status && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status" })
+  ] });
+}
+function AvatarGroup({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cx("uix-avatar-group", className), ...props, children });
+}
+function UserChip({ avatar, name, sub, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("uix-user-chip", className), ...props, children: [
+    avatar,
+    /* @__PURE__ */ jsxs("span", { children: [
+      name != null && /* @__PURE__ */ jsx("span", { className: "uix-user-chip__name", children: name }),
+      sub != null && /* @__PURE__ */ jsx("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
+    ] }),
+    children
+  ] });
+}
+export {
+  Avatar,
+  AvatarGroup,
+  UserChip
+};

package/dist/components/Button.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link';
+    size?: 'sm' | 'md' | 'lg';
+    icon?: boolean;
+    loading?: boolean;
+    children?: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface ButtonGroupProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function ButtonGroup({ children, className }: ButtonGroupProps): react.JSX.Element;
+
+export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps };

package/dist/components/Button.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cx } from "../cx.js";
+const Button = forwardRef(
+  ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      className: cx(
+        "uix-btn",
+        `uix-btn--${variant}`,
+        size !== "md" && `uix-btn--${size}`,
+        icon && "uix-btn--icon",
+        className
+      ),
+      disabled: disabled || loading,
+      "data-loading": loading || void 0,
+      ...props,
+      children
+    }
+  )
+);
+Button.displayName = "Button";
+function ButtonGroup({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-btn-group", className), children });
+}
+export {
+  Button,
+  ButtonGroup
+};

package/dist/components/Card.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    headerAction?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+declare function Card({ title, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
+
+export { Card, type CardProps };

package/dist/components/Card.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Card({ title, subtitle, headerAction, footer, children, className, ...props }) {
+  const hasHeader = title != null || subtitle != null || headerAction != null;
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-card", className), ...props, children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: "uix-card__header", children: [
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+        title && /* @__PURE__ */ jsx("div", { className: "uix-card__title", children: title }),
+        subtitle && /* @__PURE__ */ jsx("div", { className: "uix-card__subtitle", children: subtitle })
+      ] }),
+      headerAction
+    ] }),
+    children != null && /* @__PURE__ */ jsx("div", { className: "uix-card__body", children }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-card__footer", children: footer })
+  ] });
+}
+export {
+  Card
+};

package/dist/components/Chart.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { EChartsOption, ECharts } from 'echarts';
+
+declare function uixChartPalette(): string[];
+interface ChartTableRow {
+    [key: string]: string | number;
+}
+interface ChartProps {
+    option: EChartsOption;
+    title?: string;
+    subtitle?: string;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+    tableData?: ChartTableRow[];
+    tableHeaders?: string[];
+    onReady?: (chart: ECharts) => void;
+    header?: ReactNode;
+}
+declare function Chart({ option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, }: ChartProps): react.JSX.Element;
+
+export { Chart, type ChartProps, type ChartTableRow, uixChartPalette };

package/dist/components/Chart.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useId } from "react";
+import * as echarts from "echarts";
+import { cx } from "../cx.js";
+function readToken(name) {
+  if (typeof getComputedStyle === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+function uixChartPalette() {
+  return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
+}
+function Chart({
+  option,
+  title,
+  subtitle,
+  height = 280,
+  className,
+  style,
+  ariaLabel,
+  tableData,
+  tableHeaders,
+  onReady,
+  header
+}) {
+  const containerRef = useRef(null);
+  const chartRef = useRef(null);
+  const tableId = useId();
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const chart = echarts.init(el, null, { renderer: "svg" });
+    chartRef.current = chart;
+    chart.setOption(option);
+    onReady?.(chart);
+    const ro = new ResizeObserver(() => chart.resize());
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      chart.dispose();
+      chartRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    chartRef.current?.setOption(option, { notMerge: false });
+  }, [option]);
+  const heightVal = typeof height === "number" ? `${height}px` : height;
+  const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
+  const hasTable = tableData && tableData.length > 0 && tableHeaders && tableHeaders.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-chart", className), style, children: [
+    (title != null || subtitle != null || header != null) && /* @__PURE__ */ jsxs("div", { children: [
+      header,
+      title && /* @__PURE__ */ jsx("div", { className: "uix-chart__title", children: title }),
+      subtitle && /* @__PURE__ */ jsx("div", { className: "uix-chart__subtitle", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: { height: heightVal },
+        role: "img",
+        "aria-label": effectiveAriaLabel,
+        "aria-describedby": hasTable ? tableId : void 0
+      }
+    ),
+    hasTable && /* @__PURE__ */ jsxs(
+      "table",
+      {
+        id: tableId,
+        className: "sr-only",
+        "aria-label": `${effectiveAriaLabel} \u2014 data table`,
+        children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ jsx("th", { scope: "col", children: h }, h)) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, i) => /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((h) => /* @__PURE__ */ jsx("td", { children: row[h] }, h)) }, i)) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Chart,
+  uixChartPalette
+};

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: ReactNode;
+    indeterminate?: boolean;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/components/Checkbox.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import { cx } from "../cx.js";
+const CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "1.5,6 4.5,9 10.5,3" }) });
+const IndeterminateIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "8", height: "2", rx: "1", fill: "currentColor" }) });
+const Checkbox = forwardRef(
+  ({ label, indeterminate, className, ...props }, forwardedRef) => {
+    const innerRef = useRef(null);
+    useEffect(() => {
+      const el = innerRef.current;
+      if (el) el.indeterminate = !!indeterminate;
+    }, [indeterminate]);
+    return /* @__PURE__ */ jsxs("label", { className: cx("uix-checkbox", className), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          ref: (node) => {
+            innerRef.current = node;
+            if (typeof forwardedRef === "function") forwardedRef(node);
+            else if (forwardedRef) forwardedRef.current = node;
+          },
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "uix-checkbox__box", children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
+      label
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
+
+interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
+    /** Props for the search input (value/onChange/placeholder wired by the consumer). */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    children?: ReactNode;
+}
+/**
+ * ⌘K command palette surface over `.uix-cmdk`. Presentational: mount it inside a
+ * Modal/Popover and wire search + keyboard selection in the consumer.
+ */
+declare function CommandPalette({ inputProps, children, className, ...props }: CommandPaletteProps): react.JSX.Element;
+interface CommandGroupProps {
+    label?: ReactNode;
+    children?: ReactNode;
+}
+/** A labeled group of command items. */
+declare function CommandGroup({ label, children }: CommandGroupProps): react.JSX.Element;
+interface CommandItemProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: ReactNode;
+    /** Trailing shortcut hint (e.g. a `.uix-kbd`). */
+    shortcut?: ReactNode;
+    active?: boolean;
+    children?: ReactNode;
+}
+/** A single command row over `.uix-cmdk__item`. */
+declare function CommandItem({ icon, shortcut, active, children, className, ...props }: CommandItemProps): react.JSX.Element;
+
+export { CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps };

package/dist/components/CommandPalette.js

@@ -0,0 +1,26 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function CommandPalette({ inputProps, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk", className), ...props, children: [
+    /* @__PURE__ */ jsx("input", { className: "uix-cmdk__input", ...inputProps }),
+    /* @__PURE__ */ jsx("div", { className: "uix-cmdk__list", children })
+  ] });
+}
+function CommandGroup({ label, children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label != null && /* @__PURE__ */ jsx("div", { className: "uix-cmdk__group", children: label }),
+    children
+  ] });
+}
+function CommandItem({ icon, shortcut, active, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
+    icon,
+    /* @__PURE__ */ jsx("span", { children }),
+    shortcut
+  ] });
+}
+export {
+  CommandGroup,
+  CommandItem,
+  CommandPalette
+};

package/dist/components/Comments.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface CommentsProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/** Comment thread container over `.uix-comments`. */
+declare function Comments({ children, className, ...props }: CommentsProps): react.JSX.Element;
+interface CommentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Usually an `<Avatar />` (the grid reserves the leading column). */
+    avatar?: ReactNode;
+    author?: ReactNode;
+    meta?: ReactNode;
+    children?: ReactNode;
+}
+/** A single comment over `.uix-comment` (avatar column + body). */
+declare function Comment({ avatar, author, meta, children, className, ...props }: CommentProps): react.JSX.Element;
+
+export { Comment, type CommentProps, Comments, type CommentsProps };

package/dist/components/Comments.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Comments({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-comments", className), ...props, children });
+}
+function Comment({ avatar, author, meta, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-comment", className), ...props, children: [
+    avatar ?? /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-comment__body", children: [
+      (author != null || meta != null) && /* @__PURE__ */ jsxs("div", { className: "uix-comment__meta", children: [
+        author != null && /* @__PURE__ */ jsx("span", { className: "uix-comment__author", children: author }),
+        author != null && meta != null ? " \xB7 " : null,
+        meta
+      ] }),
+      children
+    ] })
+  ] });
+}
+export {
+  Comment,
+  Comments
+};

package/dist/components/DetailLayout.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface DetailLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /** The narrow trailing column (record meta, side panels). */
+    side?: ReactNode;
+    /** The main column content. */
+    children?: ReactNode;
+}
+/**
+ * Two-column record layout over `.uix-detail` (main + side meta).
+ * Collapses to a single column below 820px.
+ */
+declare function DetailLayout({ side, children, className, ...props }: DetailLayoutProps): react.JSX.Element;
+
+export { DetailLayout, type DetailLayoutProps };

package/dist/components/DetailLayout.js

@@ -0,0 +1,11 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function DetailLayout({ side, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-detail", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "uix-detail__main", children }),
+    side != null && /* @__PURE__ */ jsx("div", { className: "uix-detail__side", children: side })
+  ] });
+}
+export {
+  DetailLayout
+};