@protolabsai/ui 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/Data.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Badge } from "./primitives";
-import { ScrollArea, Spinner, StatusDot, TBody, THead, Table, Td, Th, Tr } from "./data";
+import { Badge, Button } from "./primitives";
+import { Alert, Progress, ScrollArea, Spinner, StatusDot, TBody, THead, Table, Td, Th, Tr } from "./data";
 
 const meta: Meta = { title: "Components/Data" };
 export default meta;
@@ -83,3 +83,47 @@ export const Scroll: Story = {
     </ScrollArea>
   ),
 };
+
+export const Progresses: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 20, maxWidth: 360 }}>
+      <Progress value={72} label="Indexing corpus" showValue />
+      <Progress value={45} status="success" label="Upload" showValue />
+      <Progress value={88} status="warning" label="Rate-limit budget" showValue />
+      <Progress value={20} status="error" label="Failed shards" showValue />
+      <Progress indeterminate label="Connecting…" />
+    </div>
+  ),
+};
+
+export const Alerts: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(true);
+      return (
+        <div style={{ display: "grid", gap: 12, maxWidth: 520 }}>
+          <Alert status="info" title="Heads up">main is protected — every change lands via PR, admins included.</Alert>
+          <Alert status="success" title="Published">@protolabsai/ui@0.13.0 is live on npm.</Alert>
+          <Alert status="warning" title="Rate limit near">88% of the hourly budget consumed.</Alert>
+          <Alert
+            status="error"
+            title="Build failed"
+            action={
+              <Button size="sm" variant="ghost">
+                Retry
+              </Button>
+            }
+          >
+            The deps stage copied the wrong node_modules.
+          </Alert>
+          {open && (
+            <Alert status="neutral" title="Dismissible" onDismiss={() => setOpen(false)}>
+              Tap the × to dismiss this one.
+            </Alert>
+          )}
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/Forms.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Checkbox, Field, Input, Select, Switch, Textarea } from "./forms";
+import { Checkbox, Field, Input, Radio, RadioGroup, Select, Switch, Textarea } from "./forms";
 
 const meta: Meta = { title: "Components/Forms" };
 export default meta;
@@ -58,3 +58,20 @@ export const Toggles: Story = {
     return <Demo />;
   },
 };
+
+export const Radios: Story = {
+  render: () => {
+    function Demo() {
+      const [transport, setTransport] = useState("a2a");
+      return (
+        <RadioGroup value={transport} onValueChange={setTransport} name="transport">
+          <Radio value="in-process" label="In-process" />
+          <Radio value="a2a" label="Remote A2A" />
+          <Radio value="fn" label="Function handler" />
+          <Radio value="managed" label="Managed (disabled)" disabled />
+        </RadioGroup>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/Navigation.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion, AccordionItem } from "./navigation";
+
+const meta: Meta = { title: "Components/Navigation/Accordion" };
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <div style={{ maxWidth: 480 }}>
+      <Accordion>
+        <AccordionItem title="What ships in the open core?" defaultOpen>
+          The substrate — schemas, specs, the content pipeline. MIT, free to fork.
+        </AccordionItem>
+        <AccordionItem title="How does voice context load?">
+          Per surface, via the MCP server — composed into the system prompt of any drafting call.
+        </AccordionItem>
+        <AccordionItem title="Where do the paid edges sit?">
+          Hosted version, premium features, guided courses — riding on top. The core is never paywalled.
+        </AccordionItem>
+        <AccordionItem title="Locked section (disabled)" disabled>
+          Not available.
+        </AccordionItem>
+      </Accordion>
+    </div>
+  ),
+};

package/src/data.tsx

@@ -124,3 +124,121 @@ export function Skeleton({
 export function SkeletonGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cx("pl-skel-group", className)} {...rest} />;
 }
+
+/** Determinate or indeterminate progress bar. `status` tints the fill; pass
+ *  `label` / `showValue` for a caption row. */
+export function Progress({
+  value = 0,
+  max = 100,
+  status = "neutral",
+  label,
+  showValue,
+  indeterminate,
+  className,
+}: {
+  value?: number;
+  max?: number;
+  status?: Status;
+  label?: ReactNode;
+  showValue?: boolean;
+  indeterminate?: boolean;
+  className?: string;
+}) {
+  const pct = Math.max(0, Math.min(100, (value / max) * 100));
+  return (
+    <div className={cx("pl-progress", className)}>
+      {(label != null || showValue) && (
+        <div className="pl-progress__caption">
+          {label != null && <span>{label}</span>}
+          {showValue && !indeterminate && <span className="pl-progress__value">{Math.round(pct)}%</span>}
+        </div>
+      )}
+      <div
+        className="pl-progress__track"
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={indeterminate ? undefined : value}
+      >
+        <div
+          className={cx(
+            "pl-progress__fill",
+            status !== "neutral" && `pl-progress__fill--${status}`,
+            indeterminate && "pl-progress__fill--indeterminate",
+          )}
+          style={indeterminate ? undefined : { width: `${pct}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function alertIcon(status: Status) {
+  switch (status) {
+    case "success":
+      return <path d="M3.5 8.5l2.8 2.8L12.5 5" />;
+    case "warning":
+      return (
+        <>
+          <path d="M8 2.5l5.8 10.5H2.2z" />
+          <path d="M8 6.5v3.2M8 11.6h.01" />
+        </>
+      );
+    case "error":
+      return (
+        <>
+          <circle cx="8" cy="8" r="6.2" />
+          <path d="M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8" />
+        </>
+      );
+    default:
+      return (
+        <>
+          <circle cx="8" cy="8" r="6.2" />
+          <path d="M8 7.4v3.4M8 5.2h.01" />
+        </>
+      );
+  }
+}
+
+/** Inline status banner — icon + title/body, optional `action` + dismiss. A
+ *  prominent, persistent counterpart to the transient Toast (and to the prose
+ *  Callout). `status` tints the whole surface. */
+export function Alert({
+  status = "info",
+  title,
+  children,
+  action,
+  onDismiss,
+  className,
+}: {
+  status?: Status;
+  title?: ReactNode;
+  children?: ReactNode;
+  action?: ReactNode;
+  onDismiss?: () => void;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cx("pl-alert", `pl-alert--${status}`, className)}
+      role={status === "error" || status === "warning" ? "alert" : "status"}
+    >
+      <svg className="pl-alert__icon" viewBox="0 0 16 16" aria-hidden fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
+        {alertIcon(status)}
+      </svg>
+      <div className="pl-alert__body">
+        {title != null && <div className="pl-alert__title">{title}</div>}
+        {children != null && <div className="pl-alert__text">{children}</div>}
+      </div>
+      {action != null && <div className="pl-alert__action">{action}</div>}
+      {onDismiss && (
+        <button type="button" className="pl-alert__dismiss" aria-label="Dismiss" onClick={onDismiss}>
+          <svg viewBox="0 0 16 16" aria-hidden fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+            <path d="M4 4l8 8M12 4l-8 8" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

package/src/forms.tsx

@@ -1,4 +1,5 @@
 import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from "react";
+import { createContext, useContext } from "react";
 import { cx } from "./internal";
 
 /** A labeled input/textarea bound to a string value (form fields, editors). */
@@ -105,3 +106,68 @@ export function Checkbox({
     </label>
   );
 }
+
+type RadioCtx = {
+  name?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+};
+const RadioContext = createContext<RadioCtx | null>(null);
+
+/** Groups radios — owns the selected `value`, a shared `name`, and the change
+ *  handler. Wrap Radio children. */
+export function RadioGroup({
+  value,
+  onValueChange,
+  name,
+  disabled,
+  className,
+  children,
+}: {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className={cx("pl-radiogroup", className)} role="radiogroup">
+      <RadioContext.Provider value={{ name, value, onValueChange, disabled }}>
+        {children}
+      </RadioContext.Provider>
+    </div>
+  );
+}
+
+/** A single radio option. Reads selection + name from the enclosing RadioGroup. */
+export function Radio({
+  value,
+  label,
+  disabled,
+  className,
+}: {
+  value: string;
+  label?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+}) {
+  const ctx = useContext(RadioContext);
+  const isDisabled = disabled || ctx?.disabled;
+  return (
+    <label className={cx("pl-radio", isDisabled && "pl-radio--disabled", className)}>
+      <input
+        type="radio"
+        className="pl-radio__input"
+        name={ctx?.name}
+        value={value}
+        checked={ctx?.value === value}
+        disabled={isDisabled}
+        onChange={() => ctx?.onValueChange?.(value)}
+      />
+      <span className="pl-radio__control" aria-hidden />
+      {label != null && <span className="pl-radio__label">{label}</span>}
+    </label>
+  );
+}

package/src/navigation.tsx

@@ -1,4 +1,5 @@
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { useId, useState } from "react";
 import { cx } from "./internal";
 
 export type TabItem = {
@@ -92,3 +93,60 @@ export function PanelHeader({
     </div>
   );
 }
+
+/** Vertical disclosure stack. Wrap AccordionItem children. */
+export function Accordion({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-accordion", className)} {...rest} />;
+}
+
+/** One collapsible section. Uncontrolled via `defaultOpen`, or controlled via
+ *  `open` + `onOpenChange`. */
+export function AccordionItem({
+  title,
+  children,
+  defaultOpen = false,
+  open: openProp,
+  onOpenChange,
+  disabled,
+  className,
+}: {
+  title: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}) {
+  const [openState, setOpenState] = useState(defaultOpen);
+  const open = openProp ?? openState;
+  const id = useId();
+  const toggle = () => {
+    if (disabled) return;
+    onOpenChange?.(!open);
+    if (openProp === undefined) setOpenState(!open);
+  };
+  return (
+    <div className={cx("pl-accordion__item", open && "pl-accordion__item--open", className)}>
+      <button
+        type="button"
+        id={`${id}-trigger`}
+        className="pl-accordion__trigger"
+        aria-expanded={open}
+        aria-controls={`${id}-panel`}
+        disabled={disabled}
+        onClick={toggle}
+      >
+        <span className="pl-accordion__title">{title}</span>
+        <svg className="pl-accordion__chevron" viewBox="0 0 16 16" aria-hidden fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M6 4l4 4-4 4" />
+        </svg>
+      </button>
+      {open && (
+        <div id={`${id}-panel`} className="pl-accordion__panel" role="region" aria-labelledby={`${id}-trigger`}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/styles/data.css

@@ -183,3 +183,142 @@
     background-image: none;
   }
 }
+
+/* ── Progress ─────────────────────────────────────────────────────────────────── */
+.pl-progress {
+  display: grid;
+  gap: var(--pl-space-2);
+  width: 100%;
+}
+.pl-progress__caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pl-space-2);
+  font-size: 12px;
+  color: var(--pl-color-fg-muted);
+}
+.pl-progress__value {
+  font-family: var(--pl-font-mono);
+  color: var(--pl-color-fg);
+}
+.pl-progress__track {
+  position: relative;
+  height: 6px;
+  overflow: hidden;
+  background: var(--pl-color-bg-inset);
+  border-radius: 999px;
+}
+.pl-progress__fill {
+  height: 100%;
+  background: var(--pl-color-accent);
+  border-radius: inherit;
+  transition: width var(--pl-motion-base) var(--pl-motion-ease);
+}
+.pl-progress__fill--success {
+  background: var(--pl-color-status-success);
+}
+.pl-progress__fill--warning {
+  background: var(--pl-color-status-warning);
+}
+.pl-progress__fill--error {
+  background: var(--pl-color-status-error);
+}
+.pl-progress__fill--info {
+  background: var(--pl-color-status-info);
+}
+.pl-progress__fill--indeterminate {
+  width: 40%;
+  animation: pl-progress-slide 1.1s var(--pl-motion-ease-in-out) infinite;
+}
+@keyframes pl-progress-slide {
+  0% {
+    transform: translateX(-120%);
+  }
+  100% {
+    transform: translateX(320%);
+  }
+}
+
+/* ── Alert (inline status banner) ─────────────────────────────────────────────── */
+.pl-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pl-space-3);
+  padding: var(--pl-space-3);
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-left-width: 3px;
+  border-radius: var(--pl-radius);
+  color: var(--pl-color-fg);
+}
+.pl-alert__icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+}
+.pl-alert__body {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.pl-alert__title {
+  font-weight: var(--pl-font-weight-medium);
+}
+.pl-alert__text {
+  color: var(--pl-color-fg-muted);
+}
+.pl-alert__title + .pl-alert__text {
+  margin-top: 2px;
+}
+.pl-alert__action {
+  flex-shrink: 0;
+}
+.pl-alert__dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  padding: 2px;
+  margin: -2px -2px 0 0;
+  background: none;
+  border: none;
+  border-radius: var(--pl-radius);
+  color: var(--pl-color-fg-subtle);
+  cursor: pointer;
+  transition: color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-alert__dismiss:hover {
+  color: var(--pl-color-fg);
+}
+.pl-alert__dismiss svg {
+  width: 14px;
+  height: 14px;
+}
+.pl-alert--success {
+  border-left-color: var(--pl-color-status-success);
+}
+.pl-alert--success .pl-alert__icon {
+  color: var(--pl-color-status-success);
+}
+.pl-alert--warning {
+  border-left-color: var(--pl-color-status-warning);
+}
+.pl-alert--warning .pl-alert__icon {
+  color: var(--pl-color-status-warning);
+}
+.pl-alert--error {
+  border-left-color: var(--pl-color-status-error);
+}
+.pl-alert--error .pl-alert__icon {
+  color: var(--pl-color-status-error);
+}
+.pl-alert--info {
+  border-left-color: var(--pl-color-status-info);
+}
+.pl-alert--info .pl-alert__icon {
+  color: var(--pl-color-status-info);
+}
+.pl-alert--neutral .pl-alert__icon {
+  color: var(--pl-color-fg-muted);
+}

package/src/styles/forms.css

@@ -191,3 +191,64 @@
   font-size: 13px;
   color: var(--pl-color-fg);
 }
+
+/* ── Radio ───────────────────────────────────────────────────────────────────── */
+.pl-radiogroup {
+  display: grid;
+  gap: var(--pl-space-2);
+}
+.pl-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+.pl-radio--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.pl-radio__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.pl-radio__control {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: 50%;
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    border-color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-radio__control::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 6px;
+  height: 6px;
+  margin: auto;
+  background: var(--pl-color-fg);
+  border-radius: 50%;
+  transform: scale(0);
+  transition: transform var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-radio__input:checked + .pl-radio__control {
+  border-color: var(--pl-color-fg);
+}
+.pl-radio__input:checked + .pl-radio__control::after {
+  transform: scale(1);
+}
+.pl-radio__input:focus-visible + .pl-radio__control {
+  outline: 2px solid var(--pl-color-border-strong);
+  outline-offset: 2px;
+}
+.pl-radio__label {
+  font-size: 13px;
+  color: var(--pl-color-fg);
+}

package/src/styles/navigation.css

@@ -171,3 +171,61 @@
 .pl-panel-header--compact .pl-panel-header__title {
   font-size: 13px;
 }
+
+/* ── Accordion (disclosure) ───────────────────────────────────────────────────── */
+.pl-accordion {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+}
+.pl-accordion__item + .pl-accordion__item {
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pl-space-3);
+  width: 100%;
+  padding: var(--pl-space-3);
+  background: none;
+  border: none;
+  color: var(--pl-color-fg);
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-accordion__trigger:hover {
+  background: var(--pl-color-bg-hover);
+}
+.pl-accordion__trigger:focus-visible {
+  outline: 2px solid var(--pl-color-focus);
+  outline-offset: -2px;
+}
+.pl-accordion__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.pl-accordion__title {
+  font-weight: var(--pl-font-weight-medium);
+}
+.pl-accordion__chevron {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--pl-color-fg-muted);
+  transition: transform var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-accordion__item--open .pl-accordion__chevron {
+  transform: rotate(90deg);
+}
+.pl-accordion__panel {
+  padding: 0 var(--pl-space-3) var(--pl-space-3);
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--pl-color-fg-muted);
+}