@protolabsai/ui 0.6.0 → 0.8.0

package/src/data.tsx

@@ -0,0 +1,126 @@
+import type {
+  HTMLAttributes,
+  ReactNode,
+  TableHTMLAttributes,
+  TdHTMLAttributes,
+  ThHTMLAttributes,
+} from "react";
+import { cx } from "./internal";
+import type { Status } from "./internal";
+
+/** Dense data table on the 4px grid. Compose with THead/TBody/Tr/Th/Td. */
+export function Table({ className, ...rest }: TableHTMLAttributes<HTMLTableElement>) {
+  return <table className={cx("pl-table", className)} {...rest} />;
+}
+export function THead(props: HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead {...props} />;
+}
+export function TBody(props: HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody {...props} />;
+}
+/** Table row. `selected` highlights; an `onClick` makes it hover-interactive. */
+export function Tr({
+  selected,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLTableRowElement> & { selected?: boolean }) {
+  return (
+    <tr
+      className={cx(selected && "pl-tr--selected", rest.onClick && "pl-tr--interactive", className)}
+      {...rest}
+    />
+  );
+}
+export function Th({ className, ...rest }: ThHTMLAttributes<HTMLTableCellElement>) {
+  return <th className={className} {...rest} />;
+}
+export function Td({ className, ...rest }: TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={className} {...rest} />;
+}
+
+/** Live/health indicator. `pulse` breathes on the 2s status cadence. */
+export function StatusDot({
+  status = "neutral",
+  pulse,
+  label,
+}: {
+  status?: Status;
+  pulse?: boolean;
+  label?: ReactNode;
+}) {
+  const dot = (
+    <span
+      className={cx("pl-dot", status !== "neutral" && `pl-dot--${status}`, pulse && "pl-dot--pulse")}
+      aria-hidden
+    />
+  );
+  if (label == null) return dot;
+  return (
+    <span className="pl-dot-row">
+      {dot}
+      <span className="pl-dot-row__label">{label}</span>
+    </span>
+  );
+}
+
+/** Indeterminate spinner (1s linear, brand-restrained). */
+export function Spinner({ size = 16, className }: { size?: number; className?: string }) {
+  return (
+    <span
+      className={cx("pl-spinner", className)}
+      style={{ width: size, height: size }}
+      role="status"
+      aria-label="Loading"
+    />
+  );
+}
+
+/** Scroll container with brand-styled thin scrollbars. Carries `min-height:0`
+ *  (so it scrolls inside flex/grid parents) + overscroll containment. Pass
+ *  `ariaLabel` to make it a keyboard-focusable, labelled scroll region. */
+export function ScrollArea({
+  ariaLabel,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & { ariaLabel?: string }) {
+  const a11y = ariaLabel != null ? { role: "region", "aria-label": ariaLabel, tabIndex: 0 } : {};
+  return <div className={cx("pl-scroll", className)} {...a11y} {...rest} />;
+}
+
+/** Shimmering content-shaped loading placeholder. `lines>1` stacks text bars
+ *  (last one short). Token-driven; static fill under reduced-motion. */
+export function Skeleton({
+  width,
+  height = 14,
+  lines,
+  className,
+  style,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & {
+  width?: number | string;
+  height?: number | string;
+  /** Stack N text-line bars instead of a single bar. */
+  lines?: number;
+}) {
+  if (lines != null && lines > 1) {
+    return (
+      <div className={cx("pl-skel-lines", className)} style={style} {...rest}>
+        {Array.from({ length: lines }, (_, i) => (
+          <div
+            key={i}
+            className="pl-skel"
+            style={{ height, width: i === lines - 1 ? "65%" : (width ?? "100%") }}
+          />
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div className={cx("pl-skel", className)} style={{ width: width ?? "100%", height, ...style }} {...rest} />
+  );
+}
+
+/** Optional wrapper to group related skeletons (shared layout gap). */
+export function SkeletonGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-skel-group", className)} {...rest} />;
+}

package/src/forms.tsx

@@ -0,0 +1,109 @@
+import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+import { cx } from "./internal";
+
+/** A labeled input/textarea bound to a string value (form fields, editors). */
+export function Field({
+  label,
+  value,
+  multiline,
+  readOnly,
+  placeholder,
+  onValueChange,
+  className,
+}: {
+  label: ReactNode;
+  value?: string;
+  multiline?: boolean;
+  readOnly?: boolean;
+  placeholder?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+}) {
+  const shared = {
+    className: "pl-field__input",
+    value,
+    readOnly,
+    placeholder,
+    onChange: (e: { target: { value: string } }) => onValueChange?.(e.target.value),
+  };
+  return (
+    <label className={cx("pl-field", className)}>
+      <span className="pl-field__label">{label}</span>
+      {multiline ? <textarea {...shared} /> : <input {...shared} />}
+    </label>
+  );
+}
+
+export function Input({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={cx("pl-input", className)} {...rest} />;
+}
+export function Textarea({ className, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return <textarea className={cx("pl-input", "pl-textarea", className)} {...rest} />;
+}
+export function Select({ className, children, ...rest }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select className={cx("pl-input", "pl-select", className)} {...rest}>
+      {children}
+    </select>
+  );
+}
+
+/** Toggle switch. Controlled via `checked` / `onCheckedChange`. */
+export function Switch({
+  checked,
+  onCheckedChange,
+  disabled,
+  label,
+  className,
+}: {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <label className={cx("pl-switch", disabled && "pl-switch--disabled", className)}>
+      <input
+        type="checkbox"
+        className="pl-switch__input"
+        checked={checked}
+        disabled={disabled}
+        onChange={(e) => onCheckedChange?.(e.target.checked)}
+      />
+      <span className="pl-switch__track" aria-hidden>
+        <span className="pl-switch__thumb" />
+      </span>
+      {label != null && <span className="pl-switch__label">{label}</span>}
+    </label>
+  );
+}
+
+/** Checkbox. Controlled via `checked` / `onCheckedChange`. */
+export function Checkbox({
+  checked,
+  onCheckedChange,
+  disabled,
+  label,
+  className,
+}: {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <label className={cx("pl-checkbox", disabled && "pl-checkbox--disabled", className)}>
+      <input
+        type="checkbox"
+        className="pl-checkbox__input"
+        checked={checked}
+        disabled={disabled}
+        onChange={(e) => onCheckedChange?.(e.target.checked)}
+      />
+      <span className="pl-checkbox__box" aria-hidden />
+      {label != null && <span className="pl-checkbox__label">{label}</span>}
+    </label>
+  );
+}

package/src/internal.ts

@@ -0,0 +1,11 @@
+/**
+ * @protolabsai/ui — package internals. NOT part of the public export surface
+ * (no `exports` map entry), so these can't be imported from outside the package.
+ */
+
+/** Join truthy class parts into a className string. */
+export const cx = (...parts: Array<string | false | undefined>) => parts.filter(Boolean).join(" ");
+
+/** Shared status tone — Badge, Callout, StatusDot, Toast, etc. Re-exported
+ *  publicly from "@protolabsai/ui/primitives". */
+export type Status = "neutral" | "success" | "warning" | "error" | "info";

package/src/layout.tsx

@@ -0,0 +1,57 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "./internal";
+
+export function Stat({ value, label }: { value: ReactNode; label: ReactNode }) {
+  return (
+    <div>
+      <div className="pl-stat__num">{value}</div>
+      <div className="pl-stat__label">{label}</div>
+    </div>
+  );
+}
+
+export function Container({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-container", className)} {...rest} />;
+}
+
+export function Section({ className, ...rest }: HTMLAttributes<HTMLElement>) {
+  return <section className={cx("pl-section", className)} {...rest} />;
+}
+
+/** Stats grid — wrap Stat children. Two columns, four at ≥640px. */
+export function Stats({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-stats", className)} {...rest} />;
+}
+
+export type RowProps = {
+  /** Left mono label / layer. */
+  label: string;
+  /** Optional mono name above the description. */
+  name?: ReactNode;
+  desc: ReactNode;
+  /** When present, the row widens to label | body | status. */
+  status?: ReactNode;
+  /** Renders as a link when set. */
+  href?: string;
+  external?: boolean;
+};
+export function Row({ label, name, desc, status, href, external }: RowProps) {
+  const cls = cx("pl-row", status != null && "pl-row--wide");
+  const inner = (
+    <>
+      <span className="pl-row__label">{label}</span>
+      <span>
+        {name != null && <div className="pl-row__name">{name}</div>}
+        <div className="pl-row__desc">{desc}</div>
+      </span>
+      {status != null && <span className="pl-row__status">{status}</span>}
+    </>
+  );
+  return href ? (
+    <a className={cls} href={href} {...(external ? { target: "_blank", rel: "noreferrer noopener" } : {})}>
+      {inner}
+    </a>
+  ) : (
+    <div className={cls}>{inner}</div>
+  );
+}

package/src/marketing.tsx

@@ -0,0 +1,95 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "./internal";
+
+/** The one gradient — the tagline word treatment. Foundation §1 + §13. */
+export function GradientText({ children }: { children: ReactNode }) {
+  return <span className="pl-gradient-text">{children}</span>;
+}
+
+/** Hero header — put an <h1> + <Lead> + <HeroActions> inside. */
+export function Hero({ className, ...rest }: HTMLAttributes<HTMLElement>) {
+  return <header className={cx("pl-hero", className)} {...rest} />;
+}
+/** Button row under the hero lead. */
+export function HeroActions({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-hero__cta", className)} {...rest} />;
+}
+
+/** Large muted intro paragraph (hero size). */
+export function Lead({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cx("pl-lead", className)} {...rest} />;
+}
+
+/** Section heading — self-contained h2 (doesn't rely on a global reset). */
+export function Heading({ className, ...rest }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cx("pl-heading", className)} {...rest} />;
+}
+
+/** Muted paragraph that introduces a section (body size). */
+export function SectionIntro({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cx("pl-section-intro", className)} {...rest} />;
+}
+
+/** Numbered process list — wrap Step children. */
+export function Steps({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-steps", className)} {...rest} />;
+}
+export function Step({ n, title, children }: { n: ReactNode; title: ReactNode; children: ReactNode }) {
+  return (
+    <div className="pl-step">
+      <div className="pl-step__num">{n}</div>
+      <div>
+        <div className="pl-step__title">{title}</div>
+        <div className="pl-step__body">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+/** Checklist — wrap Check children. The ✓ mark is rendered for you. */
+export function Checks({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-checks", className)} {...rest} />;
+}
+export function Check({ children, mark = "✓" }: { children: ReactNode; mark?: ReactNode }) {
+  return (
+    <div className="pl-check">
+      <span className="pl-check__mark" aria-hidden>
+        {mark}
+      </span>
+      <span>{children}</span>
+    </div>
+  );
+}
+
+/** Two-column deliverable cards (left-border, mono title). */
+export function Deliverables({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-deliverables", className)} {...rest} />;
+}
+export function Deliverable({ title, children }: { title: ReactNode; children: ReactNode }) {
+  return (
+    <div className="pl-deliverable">
+      <div className="pl-deliverable__title">{title}</div>
+      <div className="pl-deliverable__body">{children}</div>
+    </div>
+  );
+}
+
+/** Blog index list — wrap PostItem children. */
+export function PostList({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-post-list", className)} {...rest} />;
+}
+export type PostItemProps = { meta?: ReactNode; title: ReactNode; excerpt?: ReactNode; href: string };
+export function PostItem({ meta, title, excerpt, href }: PostItemProps) {
+  return (
+    <a className="pl-post-item" href={href}>
+      {meta != null && <div className="pl-post-item__meta">{meta}</div>}
+      <div className="pl-post-item__title">{title}</div>
+      {excerpt != null && <div className="pl-post-item__excerpt">{excerpt}</div>}
+    </a>
+  );
+}
+
+/** Long-form rich-text wrapper (blog post body, docs). */
+export function Prose({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-prose", className)} {...rest} />;
+}

package/src/menu.tsx

@@ -0,0 +1,141 @@
+// Menu / DropdownMenu — Radix owns keyboard nav, focus management, and
+// collision-aware positioning (the reason this lives in the DS rather than being
+// re-rolled per app). Styling is token-only over --pl-*. Supports a standard
+// click trigger AND imperative open-at-coordinates for right-click / context menus.
+import type { ReactNode } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useState } from "react";
+import * as RDropdown from "@radix-ui/react-dropdown-menu";
+import { cx } from "./internal";
+
+export type MenuHandle = {
+  /** Open the menu. Pass viewport coords (e.g. from a contextmenu event) to
+   *  open at a point; omit to open at the default anchor. */
+  open: (coords?: { x: number; y: number }) => void;
+  close: () => void;
+};
+
+export type MenuProps = {
+  /** Standard trigger (click to open). Omit and drive via the ref's
+   *  open({x,y}) for right-click / imperative menus. */
+  trigger?: ReactNode;
+  children: ReactNode;
+  align?: "start" | "center" | "end";
+  /** Fires on open/close — e.g. to clear the app's context state on dismiss. */
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const Menu = forwardRef<MenuHandle, MenuProps>(function Menu(
+  { trigger, children, align = "start", onOpenChange },
+  ref,
+) {
+  const [open, setOpen] = useState(false);
+  const [coords, setCoords] = useState<{ x: number; y: number } | null>(null);
+  const setOpenState = useCallback(
+    (o: boolean) => {
+      setOpen(o);
+      onOpenChange?.(o);
+    },
+    [onOpenChange],
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: (c) => {
+        setCoords(c ?? null);
+        setOpenState(true);
+      },
+      close: () => setOpenState(false),
+    }),
+    [setOpenState],
+  );
+  return (
+    <RDropdown.Root open={open} onOpenChange={setOpenState} modal={false}>
+      {trigger != null ? (
+        <RDropdown.Trigger asChild>{trigger}</RDropdown.Trigger>
+      ) : (
+        <RDropdown.Trigger asChild>
+          <span
+            aria-hidden
+            className="pl-menu__anchor"
+            style={coords ? { position: "fixed", left: coords.x, top: coords.y } : undefined}
+          />
+        </RDropdown.Trigger>
+      )}
+      <RDropdown.Portal>
+        <RDropdown.Content className="pl-menu" align={align} sideOffset={4} collisionPadding={8} loop>
+          {children}
+        </RDropdown.Content>
+      </RDropdown.Portal>
+    </RDropdown.Root>
+  );
+});
+
+export function MenuItem({
+  icon,
+  disabled,
+  destructive,
+  onSelect,
+  children,
+}: {
+  icon?: ReactNode;
+  disabled?: boolean;
+  /** Error-toned (delete, remove, etc.). */
+  destructive?: boolean;
+  onSelect?: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <RDropdown.Item
+      className={cx("pl-menu__item", destructive && "pl-menu__item--destructive")}
+      disabled={disabled}
+      onSelect={onSelect}
+    >
+      {icon != null && (
+        <span className="pl-menu__icon" aria-hidden>
+          {icon}
+        </span>
+      )}
+      <span className="pl-menu__label">{children}</span>
+    </RDropdown.Item>
+  );
+}
+
+export function MenuSeparator() {
+  return <RDropdown.Separator className="pl-menu__sep" />;
+}
+
+export function MenuLabel({ children }: { children: ReactNode }) {
+  return <RDropdown.Label className="pl-menu__group-label">{children}</RDropdown.Label>;
+}
+
+/** Nested submenu — put MenuItem/MenuSeparator children inside. */
+export function MenuSub({
+  label,
+  icon,
+  children,
+}: {
+  label: ReactNode;
+  icon?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <RDropdown.Sub>
+      <RDropdown.SubTrigger className="pl-menu__item pl-menu__subtrigger">
+        {icon != null && (
+          <span className="pl-menu__icon" aria-hidden>
+            {icon}
+          </span>
+        )}
+        <span className="pl-menu__label">{label}</span>
+        <span className="pl-menu__subarrow" aria-hidden>
+          ›
+        </span>
+      </RDropdown.SubTrigger>
+      <RDropdown.Portal>
+        <RDropdown.SubContent className="pl-menu" sideOffset={2} alignOffset={-4} collisionPadding={8}>
+          {children}
+        </RDropdown.SubContent>
+      </RDropdown.Portal>
+    </RDropdown.Sub>
+  );
+}

package/src/navigation.tsx

@@ -0,0 +1,94 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { cx } from "./internal";
+
+export type TabItem = {
+  id: string;
+  label: ReactNode;
+  /** Leading icon (e.g. a Lucide glyph). */
+  icon?: ReactNode;
+  /** Trailing badge / count (e.g. unread inbox count). */
+  badge?: ReactNode;
+  disabled?: boolean;
+  locked?: boolean;
+};
+
+/** A horizontal tab strip with optional icon/badge slots + disabled/locked
+ *  support (gated workflows). */
+export function Tabs({ items, active, onSelect }: { items: TabItem[]; active: string; onSelect: (id: string) => void }) {
+  return (
+    <div className="pl-tabs" role="tablist">
+      {items.map((t) => (
+        <button
+          key={t.id}
+          role="tab"
+          type="button"
+          aria-selected={t.id === active}
+          className={cx("pl-tab", t.id === active && "pl-tab--active")}
+          disabled={t.disabled}
+          onClick={() => onSelect(t.id)}
+        >
+          {t.icon != null && (
+            <span className="pl-tab__icon" aria-hidden>
+              {t.icon}
+            </span>
+          )}
+          <span className="pl-tab__label">{t.label}</span>
+          {t.badge != null && <span className="pl-tab__badge">{t.badge}</span>}
+          {t.locked ? (
+            <span className="pl-tab__lock" aria-hidden>
+              🔒
+            </span>
+          ) : null}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** A horizontal kanban board. Wrap BoardColumn children. */
+export function Board({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-board", className)} {...rest} />;
+}
+
+export function BoardColumn({ title, count, children }: { title: ReactNode; count?: ReactNode; children: ReactNode }) {
+  return (
+    <div className="pl-board-col">
+      <div className="pl-board-col__head">
+        <span>{title}</span>
+        {count != null ? <span className="pl-board-col__count">{count}</span> : null}
+      </div>
+      <div className="pl-board-col__body">{children}</div>
+    </div>
+  );
+}
+
+export function BoardCard({ className, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button type="button" className={cx("pl-board-card", className)} {...rest} />;
+}
+
+/** Dense operator-console panel header — title + optional kicker eyebrow +
+ *  right-aligned actions slot. `compact` tightens it for nested/secondary
+ *  panels. The most-used console composite. */
+export function PanelHeader({
+  title,
+  kicker,
+  actions,
+  compact,
+  className,
+}: {
+  title: ReactNode;
+  kicker?: ReactNode;
+  actions?: ReactNode;
+  compact?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cx("pl-panel-header", compact && "pl-panel-header--compact", className)}>
+      <div className="pl-panel-header__titles">
+        {kicker != null && <div className="pl-panel-header__kicker">{kicker}</div>}
+        <h2 className="pl-panel-header__title">{title}</h2>
+      </div>
+      {actions != null && <div className="pl-panel-header__actions">{actions}</div>}
+    </div>
+  );
+}