@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/client/components/ui/switch-v01.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const switchV01Variants = cva("switch-v01 font-mazzardSoft", {
+  variants: {
+    textDirection: {
+      right: "switch-v01--text-right",
+      left: "switch-v01--text-left",
+    },
+  },
+  defaultVariants: {
+    textDirection: "right",
+  },
+});
+
+export type SwitchV01TextDirection = NonNullable<
+  VariantProps<typeof switchV01Variants>["textDirection"]
+>;
+
+export interface SwitchV01Props
+  extends Omit<
+      React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
+      "children"
+    >,
+    VariantProps<typeof switchV01Variants> {
+  label?: React.ReactNode;
+  showText?: boolean;
+}
+
+const SwitchV01 = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  SwitchV01Props
+>(
+  (
+    {
+      className,
+      textDirection = "right",
+      label = "Label",
+      showText = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const toggle = (
+      <SwitchPrimitives.Root ref={ref} className="switch-v01-toggle" {...props}>
+        <SwitchPrimitives.Thumb className="switch-v01-thumb" />
+      </SwitchPrimitives.Root>
+    );
+
+    if (!showText || label == null || label === "") {
+      return (
+        <span className={cn(switchV01Variants({ textDirection }), className)}>
+          {toggle}
+        </span>
+      );
+    }
+
+    return (
+      <label className={cn(switchV01Variants({ textDirection }), className)}>
+        {toggle}
+        <span className="switch-v01-label overline-medium">{label}</span>
+      </label>
+    );
+  },
+);
+SwitchV01.displayName = "SwitchV01";
+
+export { SwitchV01, switchV01Variants };

package/client/components/ui/system-bar.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ─── SystemBar Root ───────────────────────────────────────────────────────────
+
+export interface SystemBarProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Background color — any CSS color or var() token.
+   * When set, text and icons automatically switch to white for contrast.
+   */
+  color?: string;
+  /**
+   * Window mode: renders a desktop-style title bar with
+   * message indicator on the left and window controls on the right.
+   */
+  window?: boolean;
+  /** Height of the bar in px (default 24 for status bar, 32 for window) */
+  height?: number;
+}
+
+const SystemBar = React.forwardRef<HTMLElement, SystemBarProps>(
+  (
+    {
+      className,
+      children,
+      color,
+      window: isWindow = false,
+      height,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const barHeight = height ?? (isWindow ? 32 : 24);
+
+    return (
+      <header
+        ref={ref}
+        role="banner"
+        style={{
+          height: barHeight,
+          backgroundColor: color,
+          ...style,
+        }}
+        className={cn(
+          "system-bar",
+          isWindow && "system-bar--window",
+          color && "system-bar--colored",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </header>
+    );
+  }
+);
+SystemBar.displayName = "SystemBar";
+
+// ─── SystemBarSpacer ──────────────────────────────────────────────────────────
+// Pushes content to the right (flex: 1).
+
+export interface SystemBarSpacerProps
+  extends React.HTMLAttributes<HTMLSpanElement> {}
+
+const SystemBarSpacer = React.forwardRef<HTMLSpanElement, SystemBarSpacerProps>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn("system-bar-spacer", className)}
+      {...props}
+    />
+  )
+);
+SystemBarSpacer.displayName = "SystemBarSpacer";
+
+// ─── SystemBarIcon ────────────────────────────────────────────────────────────
+// Thin wrapper so icon children pick up the right size + color.
+
+export interface SystemBarIconProps
+  extends React.HTMLAttributes<HTMLSpanElement> {}
+
+const SystemBarIcon = React.forwardRef<HTMLSpanElement, SystemBarIconProps>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn("system-bar-icon", className)}
+      {...props}
+    />
+  )
+);
+SystemBarIcon.displayName = "SystemBarIcon";
+
+// ─── SystemBarAction ──────────────────────────────────────────────────────────
+// Icon button used in window mode (minimise / maximise / close).
+
+export interface SystemBarActionProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  "aria-label": string;
+}
+
+const SystemBarAction = React.forwardRef<
+  HTMLButtonElement,
+  SystemBarActionProps
+>(({ className, children, ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    className={cn("system-bar-action", className)}
+    {...props}
+  >
+    {children}
+  </button>
+));
+SystemBarAction.displayName = "SystemBarAction";
+
+// ─── Exports ─────────────────────────────────────────────────────────────────
+
+export { SystemBar, SystemBarSpacer, SystemBarIcon, SystemBarAction };

package/client/components/ui/table-v01.tsx

@@ -0,0 +1,230 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Table — built from the Figma component set `Table component` (node 12176:414).
+ *
+ * Figma models a single *cell* with four properties and ~135 variants. Two of
+ * them are structural rather than authored:
+ *
+ * - `Alignment` (Left / Center / Right) is really the cell's **column
+ *   position**: it selects which borders and which corner radius the cell
+ *   carries, not how the text sits. `Center` carries all four, so every column
+ *   is divided; that grid is derived here from the cell order.
+ * - `Placement` (Header / Intermediate / Bottom) is the **row position**.
+ *   Header is its own element; Intermediate vs Bottom is derived from
+ *   `tr:last-child`.
+ *
+ * `Content type` (Text / Text + Tag / Text + Action / Tag / Action) collapses
+ * into composition — a cell renders whatever children it is given, with the
+ * 10px gap Figma specifies.
+ *
+ * That leaves `density` as the one real variant, and it is the cell's *vertical*
+ * padding only — 16 / 20 / 24, all on the `--space-*` scale. Horizontal padding
+ * stays 16 at every density. Cell heights then follow from the content, matching
+ * Figma's 40/48/56 for headers, 43/51/59 for text rows and 64/72/80 for tag and
+ * action rows.
+ */
+type TableV01Density = "compact" | "balanced" | "spacious";
+type TableV01Align = "left" | "center" | "right";
+
+// ---------------------------------------------------------------------------
+// Root
+// ---------------------------------------------------------------------------
+
+interface TableV01Props extends React.TableHTMLAttributes<HTMLTableElement> {
+  /** Figma `Density`. Sets the cell's vertical padding; heights follow. Default `compact`. */
+  density?: TableV01Density;
+  /** Wrapper class, for width or overflow handling. */
+  containerClassName?: string;
+}
+
+const TableV01 = React.forwardRef<HTMLTableElement, TableV01Props>(
+  ({ className, containerClassName, density = "compact", ...props }, ref) => (
+    <div className={cn("table-v01-wrapper", containerClassName)}>
+      <table
+        ref={ref}
+        data-density={density}
+        className={cn("table-v01", className)}
+        {...props}
+      />
+    </div>
+  ),
+);
+TableV01.displayName = "TableV01";
+
+// ---------------------------------------------------------------------------
+// Sections and rows
+// ---------------------------------------------------------------------------
+
+const TableV01Header = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("table-v01-header", className)} {...props} />
+));
+TableV01Header.displayName = "TableV01Header";
+
+const TableV01Body = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("table-v01-body", className)} {...props} />
+));
+TableV01Body.displayName = "TableV01Body";
+
+/**
+ * Figma's `Placement=Bottom` is the last row of the table. As a section it also
+ * takes over the bottom corner radii from the body.
+ */
+const TableV01Footer = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn("table-v01-footer", className)} {...props} />
+));
+TableV01Footer.displayName = "TableV01Footer";
+
+const TableV01Row = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn("table-v01-row", className)} {...props} />
+));
+TableV01Row.displayName = "TableV01Row";
+
+// ---------------------------------------------------------------------------
+// Cells
+// ---------------------------------------------------------------------------
+
+/**
+ * Figma's code/strategy tag (instance `code_strategy_*`): emerald tint with a
+ * 1.5px tinted border and tabular figures.
+ */
+interface TableV01TagProps extends React.HTMLAttributes<HTMLSpanElement> {}
+
+const TableV01Tag = React.forwardRef<HTMLSpanElement, TableV01TagProps>(
+  ({ className, ...props }, ref) => (
+    <span ref={ref} className={cn("table-v01-tag", className)} {...props} />
+  ),
+);
+TableV01Tag.displayName = "TableV01Tag";
+
+interface TableV01CellProps
+  extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  /**
+   * Text alignment within the cell. Figma's `Alignment` property is column
+   * position, not text alignment, so this is additive — tables need it for
+   * numeric columns.
+   */
+  align?: TableV01Align;
+  /** The column label. Figma sets it uppercase in the overline ramp. */
+  label?: React.ReactNode;
+}
+
+/** Figma `Placement=Header`: cyan/50 fill, uppercase overline label in cyan/800. */
+const TableV01HeaderCell = React.forwardRef<
+  HTMLTableCellElement,
+  TableV01CellProps
+>(({ className, align = "left", label, children, ...props }, ref) => (
+  <th
+    ref={ref}
+    scope="col"
+    data-align={align}
+    className={cn("table-v01-header-cell", className)}
+    {...props}
+  >
+    <span className="table-v01-cell-inner overline-medium">
+      {label}
+      {children}
+    </span>
+  </th>
+));
+TableV01HeaderCell.displayName = "TableV01HeaderCell";
+
+/**
+ * Figma `Placement=Intermediates | Bottom`: white fill, Mazzard Medium 16/21.
+ *
+ * Figma's `Content type` axis is expressed as content props rather than an
+ * enum: pass any of `text`, `tag` and `action` and the cell renders them in
+ * Figma's order with the 10px gap. `children` still works for anything the
+ * props cannot express (a link, two lines, a custom control).
+ */
+interface TableV01BodyCellProps
+  extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /** Text alignment within the cell. Additive to Figma. */
+  align?: TableV01Align;
+  /** Figma `Content type=Text …`: Mazzard Medium 16/21 in gray/800. */
+  text?: React.ReactNode;
+  /** Figma `Content type=… + Tag`: wrapped in the code/strategy tag. */
+  tag?: React.ReactNode;
+  /** Figma `Content type=… + Action`: pass one or more `TableV01Action`. */
+  action?: React.ReactNode;
+}
+
+const TableV01Cell = React.forwardRef<
+  HTMLTableCellElement,
+  TableV01BodyCellProps
+>(
+  (
+    { className, align = "left", text, tag, action, children, ...props },
+    ref,
+  ) => (
+    <td
+      ref={ref}
+      data-align={align}
+      className={cn("table-v01-cell", className)}
+      {...props}
+    >
+      <span className="table-v01-cell-inner">
+        {text}
+        {tag != null ? <TableV01Tag>{tag}</TableV01Tag> : null}
+        {action}
+        {children}
+      </span>
+    </td>
+  ),
+);
+TableV01Cell.displayName = "TableV01Cell";
+
+// ---------------------------------------------------------------------------
+// Cell content — the pieces Figma's `Content type` composes
+// ---------------------------------------------------------------------------
+
+/**
+ * Figma's `button_icon_*`: a 32px white circle with a gray/100 border holding a
+ * 14px icon. Pass the icon as children.
+ */
+const TableV01Action = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, type = "button", ...props }, ref) => (
+  <button
+    ref={ref}
+    type={type}
+    className={cn("table-v01-action", className)}
+    {...props}
+  />
+));
+TableV01Action.displayName = "TableV01Action";
+
+export {
+  TableV01,
+  TableV01Header,
+  TableV01Body,
+  TableV01Footer,
+  TableV01Row,
+  TableV01HeaderCell,
+  TableV01Cell,
+  TableV01Tag,
+  TableV01Action,
+};
+
+export type {
+  TableV01Props,
+  TableV01CellProps,
+  TableV01BodyCellProps,
+  TableV01Density,
+  TableV01Align,
+};

package/client/components/ui/tabs-v01.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type TabsV01Item = {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+};
+
+export interface TabsV01Props
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  items?: TabsV01Item[];
+  label?: React.ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+const TabsV01 = React.forwardRef<HTMLDivElement, TabsV01Props>(
+  (
+    {
+      className,
+      items = [],
+      label,
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = controlledValue !== undefined;
+    const [uncontrolled, setUncontrolled] = React.useState(
+      () => defaultValue ?? items[0]?.value,
+    );
+    const active = isControlled ? controlledValue : uncontrolled;
+
+    const select = (next: string) => {
+      if (!isControlled) setUncontrolled(next);
+      onValueChange?.(next);
+    };
+
+    const refs = React.useRef<(HTMLButtonElement | null)[]>([]);
+
+    const onKeyDown = (event: React.KeyboardEvent, index: number) => {
+      const step =
+        event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+      if (!step) return;
+      event.preventDefault();
+      const enabled = items
+        .map((item, i) => ({ item, i }))
+        .filter(({ item }) => !item.disabled);
+      const at = enabled.findIndex(({ i }) => i === index);
+      const next = enabled[(at + step + enabled.length) % enabled.length];
+      if (!next) return;
+      select(next.item.value);
+      refs.current[next.i]?.focus();
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn("tabs-v01 font-mazzardSoft", className)}
+        {...props}
+      >
+        {label != null && label !== "" ? (
+          <div className="tabs-v01-label body-large">{label}</div>
+        ) : null}
+        <div className="tabs-v01-list" role="tablist">
+          {items.map((item, index) => (
+            <button
+              key={item.value}
+              ref={(node) => {
+                refs.current[index] = node;
+              }}
+              type="button"
+              role="tab"
+              aria-selected={item.value === active}
+              tabIndex={item.value === active ? 0 : -1}
+              disabled={item.disabled}
+              data-state={item.value === active ? "active" : "inactive"}
+              className="tabs-v01-tab"
+              onClick={() => select(item.value)}
+              onKeyDown={(event) => onKeyDown(event, index)}
+            >
+              <span className="tabs-v01-tab-label overline-large">
+                {item.label}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);
+TabsV01.displayName = "TabsV01";
+
+export { TabsV01 };

package/client/components/ui/tag-v02.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { UtilityChangeType } from "@/components/icons/UtilityChangeType";
+
+const tagV02Variants = cva("tag-v02 font-mazzardSoft", {
+  variants: {
+    state: {
+      active: "tag-v02--active",
+      inactive: "tag-v02--inactive",
+    },
+  },
+  defaultVariants: {
+    state: "inactive",
+  },
+});
+
+export type TagV02State = NonNullable<
+  VariantProps<typeof tagV02Variants>["state"]
+>;
+export type TagV02ChangeType = "mild" | "medium" | "hot";
+
+export interface TagV02Props
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">,
+    VariantProps<typeof tagV02Variants> {
+  dot?: boolean;
+  change?: boolean;
+  changeType?: TagV02ChangeType;
+}
+
+const TagV02 = React.forwardRef<HTMLButtonElement, TagV02Props>(
+  (
+    {
+      className,
+      state = "inactive",
+      dot = false,
+      change = false,
+      changeType = "mild",
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={state === "active"}
+      className={cn(tagV02Variants({ state }), className)}
+      {...props}
+    >
+      <span className="tag-v02-label">{children}</span>
+      {dot ? <span className="tag-v02-dot" aria-hidden /> : null}
+      {change ? (
+        <span className="tag-v02-change-frame">
+          <UtilityChangeType
+            className={`tag-v02-change tag-v02-change--${changeType}`}
+          />
+        </span>
+      ) : null}
+    </button>
+  ),
+);
+TagV02.displayName = "TagV02";
+
+const tagStatusV02Variants = cva("tag-status-v02 font-mazzardSoft", {
+  variants: {
+    status: {
+      todo: "tag-status-v02--todo",
+      low: "tag-status-v02--low",
+      medium: "tag-status-v02--medium",
+      high: "tag-status-v02--high",
+      done: "tag-status-v02--done",
+      new: "tag-status-v02--new",
+    },
+    tone: {
+      light: "tag-status-v02--light",
+      dark: "tag-status-v02--dark",
+    },
+  },
+  defaultVariants: {
+    status: "todo",
+    tone: "light",
+  },
+});
+
+export type TagStatusV02Status = NonNullable<
+  VariantProps<typeof tagStatusV02Variants>["status"]
+>;
+export type TagStatusV02Tone = NonNullable<
+  VariantProps<typeof tagStatusV02Variants>["tone"]
+>;
+
+export interface TagStatusV02Props
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof tagStatusV02Variants> {}
+
+const TagStatusV02 = React.forwardRef<HTMLSpanElement, TagStatusV02Props>(
+  ({ className, status = "todo", tone = "light", children, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(tagStatusV02Variants({ status, tone }), className)}
+      {...props}
+    >
+      <span className="tag-status-v02-label overline-medium">
+        {children ?? status}
+      </span>
+    </span>
+  ),
+);
+TagStatusV02.displayName = "TagStatusV02";
+
+export { TagV02, tagV02Variants, TagStatusV02, tagStatusV02Variants };

package/client/components/ui/text-area-v01.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextAreaV01Props
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  focused?: boolean;
+}
+
+const TextAreaV01 = React.forwardRef<HTMLTextAreaElement, TextAreaV01Props>(
+  (
+    {
+      className,
+      focused,
+      disabled,
+      placeholder = "Tell us what you think",
+      ...props
+    },
+    ref,
+  ) => (
+    <textarea
+      ref={ref}
+      className={cn("text-area-v01 font-mazzardSoft", className)}
+      data-focus={focused ? "true" : undefined}
+      disabled={disabled}
+      placeholder={placeholder}
+      {...props}
+    />
+  ),
+);
+TextAreaV01.displayName = "TextAreaV01";
+
+export { TextAreaV01 };