@clef-sh/ui 0.1.20 → 0.1.21

package/src/client/primitives/Toolbar.test.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Toolbar } from "./Toolbar";
+
+describe("Toolbar", () => {
+  it("renders title, subtitle, and actions", () => {
+    render(
+      <Toolbar data-testid="toolbar">
+        <div>
+          <Toolbar.Title>Secret Matrix</Toolbar.Title>
+          <Toolbar.Subtitle>3 namespaces</Toolbar.Subtitle>
+        </div>
+        <Toolbar.Actions>
+          <button>Lint All</button>
+        </Toolbar.Actions>
+      </Toolbar>,
+    );
+    expect(screen.getByTestId("toolbar")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: "Secret Matrix" })).toBeInTheDocument();
+    expect(screen.getByText("3 namespaces")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Lint All" })).toBeInTheDocument();
+  });
+
+  it("title uses upgraded type tier classes", () => {
+    render(
+      <Toolbar>
+        <Toolbar.Title>Hello</Toolbar.Title>
+      </Toolbar>,
+    );
+    const heading = screen.getByRole("heading", { name: "Hello" });
+    expect(heading.className).toContain("text-[20px]");
+    expect(heading.className).toContain("font-semibold");
+    expect(heading.className).toContain("text-bone");
+  });
+
+  it("actions wrapper applies flex gap classes", () => {
+    render(
+      <Toolbar>
+        <Toolbar.Actions data-testid="acts">
+          <button>a</button>
+          <button>b</button>
+        </Toolbar.Actions>
+      </Toolbar>,
+    );
+    const wrap = screen.getByTestId("acts");
+    expect(wrap.className).toContain("flex");
+    expect(wrap.className).toContain("gap-2");
+  });
+});

package/src/client/primitives/Toolbar.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+function joinClasses(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={joinClasses(
+        "flex items-center justify-between px-7 py-5 border-b border-edge bg-ink-900",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+export interface ToolbarTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function ToolbarTitle({ className, children, ...rest }: ToolbarTitleProps) {
+  return (
+    <h1
+      className={joinClasses(
+        "text-[20px] font-semibold text-bone tracking-[-0.015em] m-0",
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </h1>
+  );
+}
+
+export interface ToolbarSubtitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function ToolbarSubtitle({ className, children, ...rest }: ToolbarSubtitleProps) {
+  return (
+    <div className={joinClasses("font-mono text-[11px] text-ash-dim", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export interface ToolbarActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function ToolbarActions({ className, children, ...rest }: ToolbarActionsProps) {
+  return (
+    <div className={joinClasses("flex gap-2", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+type ToolbarCompound = typeof ToolbarRoot & {
+  Title: typeof ToolbarTitle;
+  Subtitle: typeof ToolbarSubtitle;
+  Actions: typeof ToolbarActions;
+};
+
+const Toolbar = ToolbarRoot as ToolbarCompound;
+Toolbar.Title = ToolbarTitle;
+Toolbar.Subtitle = ToolbarSubtitle;
+Toolbar.Actions = ToolbarActions;
+
+export { Toolbar };

package/src/client/primitives/index.ts

@@ -0,0 +1,43 @@
+export { Card } from "./Card";
+export type { CardProps, CardHeaderProps, CardBodyProps } from "./Card";
+
+export { Toolbar } from "./Toolbar";
+export type {
+  ToolbarProps,
+  ToolbarTitleProps,
+  ToolbarSubtitleProps,
+  ToolbarActionsProps,
+} from "./Toolbar";
+
+export { Stat } from "./Stat";
+export type { StatProps, StatTone } from "./Stat";
+
+export { Field } from "./Field";
+export type { FieldProps, FieldLabelProps, FieldHintProps, FieldErrorProps } from "./Field";
+
+export { Input, Textarea } from "./Input";
+export type { InputProps, TextareaProps } from "./Input";
+
+export { EmptyState } from "./EmptyState";
+export type { EmptyStateProps } from "./EmptyState";
+
+export { Table } from "./Table";
+export type {
+  TableProps,
+  TableHeaderProps,
+  TableHeaderCellProps,
+  TableRowProps,
+  TableCellProps,
+} from "./Table";
+
+export { Tabs } from "./Tabs";
+export type { TabsProps, TabsListProps, TabsTabProps, TabsPanelProps } from "./Tabs";
+
+export { Dialog } from "./Dialog";
+export type { DialogProps, DialogTitleProps, DialogBodyProps, DialogFooterProps } from "./Dialog";
+
+export { ToastProvider, useToast } from "./Toast";
+export type { ToastTone, ToastOptions, ToastProviderProps } from "./Toast";
+
+export { Badge } from "./Badge";
+export type { BadgeProps, BadgeTone, BadgeVariant } from "./Badge";

package/src/client/public/clef.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent; color-scheme: light dark;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="11px" height="30px" viewBox="0 0 11 30" content="&lt;mxfile host=&quot;app.diagrams.net&quot; agent=&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36&quot; version=&quot;29.6.1&quot;&gt;&#10;  &lt;diagram name=&quot;Page-1&quot; id=&quot;wkVNsO5_5GyDIFuGEuFO&quot;&gt;&#10;    &lt;mxGraphModel dx=&quot;322&quot; dy=&quot;155&quot; grid=&quot;1&quot; gridSize=&quot;10&quot; guides=&quot;1&quot; tooltips=&quot;1&quot; connect=&quot;1&quot; arrows=&quot;1&quot; fold=&quot;1&quot; page=&quot;1&quot; pageScale=&quot;1&quot; pageWidth=&quot;850&quot; pageHeight=&quot;1100&quot; math=&quot;0&quot; shadow=&quot;0&quot;&gt;&#10;      &lt;root&gt;&#10;        &lt;mxCell id=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;1&quot; parent=&quot;0&quot; /&gt;&#10;        &lt;mxCell id=&quot;3N7BDEdEHleT6AeHqIXh-2&quot; parent=&quot;1&quot; style=&quot;shape=image;verticalLabelPosition=bottom;labelBackgroundColor=default;verticalAlign=top;aspect=fixed;imageAspect=0;editableCssRules=.*;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTUuMTg1NDg3NzQ3MTkyMzgzIiBzdHJva2U9IiNGMEE1MDAiIGZpbGw9IiNGMEE1MDAiIHZlcnNpb249IjEuMSIgaGVpZ2h0PSI0MC43NjgyMTEzNjQ3NDYwOTQiIHZpZXdCb3g9IjAuMDAwMDIyODg4MTgzNTkzNzUgLTAuMDAwNDAwMDY2Mzc1NzMyNDIxOSAxNS4xODU0ODc3NDcxOTIzODMgNDAuNzY4MjExMzY0NzQ2MDk0Ij4mI3hhOzxwYXRoIGQ9Im0xMi4wNDkgMy41Mjk2YzAuMzA1IDMuMTI2My0yLjAxOSA1LjY1NjMtNC4wNzcyIDcuNzAxNC0wLjkzNDkgMC44OTctMC4xNTUgMC4xNDgtMC42NDM3IDAuNTk0LTAuMTAyMi0wLjQ3OS0wLjI5ODYtMS43MzEtMC4yODAyLTIuMTEgMC4xMzA0LTIuNjkzOSAyLjMxOTgtNi41ODc1IDQuMjM4MS04LjAyMzYgMC4zMDkgMC41NzY3IDAuNTYzIDAuNjIzMSAwLjc2MyAxLjgzODJ6bTAuNjUxIDE2LjE0MmMtMS4yMzItMC45MDYtMi44NS0xLjE0NC00LjMzMzYtMC44ODUtMC4xOTEzLTEuMjU1LTAuMzgyNy0yLjUxLTAuNTc0LTMuNzY0IDIuMzUwNi0yLjMyOSA0LjkwNjYtNS4wMzIyIDUuMDQwNi04LjUzOTQgMC4wNTktMi4yMzItMC4yNzYtNC42NzE0LTEuNjc4LTYuNDgzNi0xLjcwMDQgMC4xMjgyMy0yLjg5OTUgMi4xNTYtMy44MDE5IDMuNDE2NS0xLjQ4ODkgMi42NzA1LTEuMTQxNCA1LjkxNjktMC41NyA4Ljc5NjUtMC44MDk0IDAuOTUyLTEuOTI5NiAxLjc0My0yLjcyNzQgMi43MzQtMi4zNTYxIDIuMzA4LTQuNDA4NSA1LjQzLTQuMDA0NiA4Ljg3OCAwLjE4MzMyIDMuMzM0IDIuNTg5NCA2LjQzNCA1Ljg3MDIgNy4yMjcgMS4yNDU3IDAuMzE1IDIuNTYzOSAwLjM0NiAzLjgyNDEgMC4wOTkgMC4yMTk5IDIuMjUgMS4wMjY2IDQuNjI5IDAuMDkyNSA2LjgxMy0wLjcwMDcgMS41OTgtMi43ODc1IDMuMDA0LTQuMzMyNSAyLjE5Mi0wLjU5OTQtMC4zMTYtMC4xMTM3LTAuMDUxLTAuNDc4LTAuMjUyIDEuMDY5OC0wLjI1NyAxLjk5OTYtMS4wMzYgMi4yNi0xLjU2NSAwLjgzNzgtMS40NjQtMC4zOTk4LTMuNjM5LTIuMTU1NC0zLjM1OC0yLjI2MiAwLjA0Ni0zLjE5MDQgMy4xNC0xLjczNTYgNC42ODUgMS4zNDY4IDEuNTIgMy44MzMgMS4zMTIgNS40MzAxIDAuMzE4IDEuODEyNS0xLjE4IDIuMDM5NS0zLjU0NCAxLjgzMjUtNS41NjItMC4wNy0wLjY3OC0wLjQwMy0yLjY3LTAuNDQ0LTMuMzg3IDAuNjk3LTAuMjQ5IDAuMjA5LTAuMDU5IDEuMTkzLTAuNDQ5IDIuNjYtMS4wNTMgNC4zNTctNC4yNTkgMy41OTQtNy4xMjItMC4zMTgtMS40NjktMS4wNDQtMi45MTQtMi4zMDItMy43OTJ6bTAuNTYxIDUuNzU3YzAuMjE0IDEuOTkxLTEuMDUzIDQuMzIxLTMuMDc5IDQuOTYtMC4xMzYtMC43OTUtMC4xNzItMS4wMTEtMC4yNjI2LTEuNDc1LTAuNDgyMi0yLjQ2LTAuNzQ0LTQuOTg3LTEuMTE2LTcuNDgxIDEuNjI0Ni0wLjE2OCAzLjQ1NzYgMC41NDMgNC4wMjI2IDIuMTg0IDAuMjQ0IDAuNTc3IDAuMzQzIDEuMTk3IDAuNDM1IDEuODEyem0tNS4xNDg2IDUuMTk2Yy0yLjU0NDEgMC4xNDEtNC45OTk1LTEuNTk1LTUuNjM0My00LjA4MS0wLjc0OS0yLjE1My0wLjUyODMtNC42MyAwLjgyMDctNi41MDQgMS4xMTUxLTEuNzAyIDIuNjA2NS0zLjEwNSA0LjAyODYtNC41NDMgMC4xODMgMS4xMjcgMC4zNjYgMi4yNTQgMC41NDkgMy4zODItMi45OTA2IDAuNzgyLTUuMDA0NiA0LjcyNS0zLjIxNSA3LjQ1MSAwLjUzMjQgMC43NjQgMS45NzY1IDIuMjIzIDIuNzY1NSAxLjYzNC0xLjEwMi0wLjY4My0yLjAwMzMtMS44NTktMS44MDk1LTMuMjI3LTAuMDgyMS0xLjI4MiAxLjM2OTktMi45MTEgMi42NTEzLTMuMTk4IDAuNDM4NCAyLjg2OSAwLjk0MTMgNi4wNzMgMS4zNzk3IDguOTQzLTAuNTA1NCAwLjEtMS4wMjExIDAuMTQzLTEuNTM2IDAuMTQzeiIvPiYjeGE7PC9zdmc+;&quot; value=&quot;&quot; vertex=&quot;1&quot;&gt;&#10;          &lt;mxGeometry height=&quot;30&quot; width=&quot;10.98&quot; x=&quot;450&quot; y=&quot;220&quot; as=&quot;geometry&quot; /&gt;&#10;        &lt;/mxCell&gt;&#10;      &lt;/root&gt;&#10;    &lt;/mxGraphModel&gt;&#10;  &lt;/diagram&gt;&#10;&lt;/mxfile&gt;&#10;"><defs/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="3N7BDEdEHleT6AeHqIXh-2"><g><image x="0" y="0" width="10.98" height="30" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTUuMTg1NDg3NzQ3MTkyMzgzIiBzdHJva2U9IiNGMEE1MDAiIGZpbGw9IiNGMEE1MDAiIHZlcnNpb249IjEuMSIgaGVpZ2h0PSI0MC43NjgyMTEzNjQ3NDYwOTQiIHZpZXdCb3g9IjAuMDAwMDIyODg4MTgzNTkzNzUgLTAuMDAwNDAwMDY2Mzc1NzMyNDIxOSAxNS4xODU0ODc3NDcxOTIzODMgNDAuNzY4MjExMzY0NzQ2MDk0Ij4mI3hhOzxwYXRoIGQ9Im0xMi4wNDkgMy41Mjk2YzAuMzA1IDMuMTI2My0yLjAxOSA1LjY1NjMtNC4wNzcyIDcuNzAxNC0wLjkzNDkgMC44OTctMC4xNTUgMC4xNDgtMC42NDM3IDAuNTk0LTAuMTAyMi0wLjQ3OS0wLjI5ODYtMS43MzEtMC4yODAyLTIuMTEgMC4xMzA0LTIuNjkzOSAyLjMxOTgtNi41ODc1IDQuMjM4MS04LjAyMzYgMC4zMDkgMC41NzY3IDAuNTYzIDAuNjIzMSAwLjc2MyAxLjgzODJ6bTAuNjUxIDE2LjE0MmMtMS4yMzItMC45MDYtMi44NS0xLjE0NC00LjMzMzYtMC44ODUtMC4xOTEzLTEuMjU1LTAuMzgyNy0yLjUxLTAuNTc0LTMuNzY0IDIuMzUwNi0yLjMyOSA0LjkwNjYtNS4wMzIyIDUuMDQwNi04LjUzOTQgMC4wNTktMi4yMzItMC4yNzYtNC42NzE0LTEuNjc4LTYuNDgzNi0xLjcwMDQgMC4xMjgyMy0yLjg5OTUgMi4xNTYtMy44MDE5IDMuNDE2NS0xLjQ4ODkgMi42NzA1LTEuMTQxNCA1LjkxNjktMC41NyA4Ljc5NjUtMC44MDk0IDAuOTUyLTEuOTI5NiAxLjc0My0yLjcyNzQgMi43MzQtMi4zNTYxIDIuMzA4LTQuNDA4NSA1LjQzLTQuMDA0NiA4Ljg3OCAwLjE4MzMyIDMuMzM0IDIuNTg5NCA2LjQzNCA1Ljg3MDIgNy4yMjcgMS4yNDU3IDAuMzE1IDIuNTYzOSAwLjM0NiAzLjgyNDEgMC4wOTkgMC4yMTk5IDIuMjUgMS4wMjY2IDQuNjI5IDAuMDkyNSA2LjgxMy0wLjcwMDcgMS41OTgtMi43ODc1IDMuMDA0LTQuMzMyNSAyLjE5Mi0wLjU5OTQtMC4zMTYtMC4xMTM3LTAuMDUxLTAuNDc4LTAuMjUyIDEuMDY5OC0wLjI1NyAxLjk5OTYtMS4wMzYgMi4yNi0xLjU2NSAwLjgzNzgtMS40NjQtMC4zOTk4LTMuNjM5LTIuMTU1NC0zLjM1OC0yLjI2MiAwLjA0Ni0zLjE5MDQgMy4xNC0xLjczNTYgNC42ODUgMS4zNDY4IDEuNTIgMy44MzMgMS4zMTIgNS40MzAxIDAuMzE4IDEuODEyNS0xLjE4IDIuMDM5NS0zLjU0NCAxLjgzMjUtNS41NjItMC4wNy0wLjY3OC0wLjQwMy0yLjY3LTAuNDQ0LTMuMzg3IDAuNjk3LTAuMjQ5IDAuMjA5LTAuMDU5IDEuMTkzLTAuNDQ5IDIuNjYtMS4wNTMgNC4zNTctNC4yNTkgMy41OTQtNy4xMjItMC4zMTgtMS40NjktMS4wNDQtMi45MTQtMi4zMDItMy43OTJ6bTAuNTYxIDUuNzU3YzAuMjE0IDEuOTkxLTEuMDUzIDQuMzIxLTMuMDc5IDQuOTYtMC4xMzYtMC43OTUtMC4xNzItMS4wMTEtMC4yNjI2LTEuNDc1LTAuNDgyMi0yLjQ2LTAuNzQ0LTQuOTg3LTEuMTE2LTcuNDgxIDEuNjI0Ni0wLjE2OCAzLjQ1NzYgMC41NDMgNC4wMjI2IDIuMTg0IDAuMjQ0IDAuNTc3IDAuMzQzIDEuMTk3IDAuNDM1IDEuODEyem0tNS4xNDg2IDUuMTk2Yy0yLjU0NDEgMC4xNDEtNC45OTk1LTEuNTk1LTUuNjM0My00LjA4MS0wLjc0OS0yLjE1My0wLjUyODMtNC42MyAwLjgyMDctNi41MDQgMS4xMTUxLTEuNzAyIDIuNjA2NS0zLjEwNSA0LjAyODYtNC41NDMgMC4xODMgMS4xMjcgMC4zNjYgMi4yNTQgMC41NDkgMy4zODItMi45OTA2IDAuNzgyLTUuMDA0NiA0LjcyNS0zLjIxNSA3LjQ1MSAwLjUzMjQgMC43NjQgMS45NzY1IDIuMjIzIDIuNzY1NSAxLjYzNC0xLjEwMi0wLjY4My0yLjAwMzMtMS44NTktMS44MDk1LTMuMjI3LTAuMDgyMS0xLjI4MiAxLjM2OTktMi45MTEgMi42NTEzLTMuMTk4IDAuNDM4NCAyLjg2OSAwLjk0MTMgNi4wNzMgMS4zNzk3IDguOTQzLTAuNTA1NCAwLjEtMS4wMjExIDAuMTQzLTEuNTM2IDAuMTQzeiIvPiYjeGE7PC9zdmc+" preserveAspectRatio="none"/></g></g></g></g></g></svg>