@protolabsai/ui 0.14.0 → 0.15.0

package/package.json

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

package/src/AppShell.stories.tsx

@@ -60,3 +60,31 @@ export const TabsWithSlots: Story = {
     return <Demo />;
   },
 };
+
+export const TabsResponsive: Story = {
+  name: "Tabs (responsive → dropdown)",
+  render: () => {
+    function Demo() {
+      const [active, setActive] = useState("activity");
+      const items = [
+        { id: "overview", label: "Overview", icon: <Glyph /> },
+        { id: "activity", label: "Activity", icon: <Glyph />, badge: 12 },
+        { id: "knowledge", label: "Knowledge", icon: <Glyph /> },
+        { id: "settings", label: "Settings", icon: <Glyph /> },
+      ];
+      // A container query responds to the Tabs' own width — resize these boxes (not
+      // the window) to see the wide one stay a strip and the narrow one collapse.
+      return (
+        <div style={{ display: "grid", gap: 24 }}>
+          <div style={{ width: 520, border: "1px solid var(--pl-color-border)", borderRadius: 4, padding: 8 }}>
+            <Tabs responsive ariaLabel="Section" items={items} active={active} onSelect={setActive} />
+          </div>
+          <div style={{ width: 260, border: "1px solid var(--pl-color-border)", borderRadius: 4, padding: 8 }}>
+            <Tabs responsive ariaLabel="Section" items={items} active={active} onSelect={setActive} />
+          </div>
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/navigation.tsx

@@ -15,9 +15,25 @@ export type TabItem = {
 
 /** 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">
+export function Tabs({
+  items,
+  active,
+  onSelect,
+  responsive = false,
+  ariaLabel,
+}: {
+  items: TabItem[];
+  active: string;
+  onSelect: (id: string) => void;
+  /** Collapse the strip to a `<select>` dropdown when the Tabs' *container* is narrow
+   *  (a CSS container query — responds to its own width, not the viewport, so it works
+   *  inside a narrow panel/split). Opt-in; non-responsive output is unchanged. */
+  responsive?: boolean;
+  /** Accessible name for the tablist + the collapsed select. */
+  ariaLabel?: string;
+}) {
+  const strip = (
+    <div className="pl-tabs" role="tablist" aria-label={ariaLabel}>
       {items.map((t) => (
         <button
           key={t.id}
@@ -44,6 +60,24 @@ export function Tabs({ items, active, onSelect }: { items: TabItem[]; active: st
       ))}
     </div>
   );
+  if (!responsive) return strip;
+  return (
+    <div className="pl-tabs-wrap pl-tabs-wrap--responsive">
+      {strip}
+      <select
+        className="pl-tabs__select"
+        value={active}
+        aria-label={ariaLabel ?? "Select tab"}
+        onChange={(e) => onSelect(e.target.value)}
+      >
+        {items.map((t) => (
+          <option key={t.id} value={t.id} disabled={t.disabled || t.locked}>
+            {typeof t.label === "string" ? t.label : t.id}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
 }
 
 /** A horizontal kanban board. Wrap BoardColumn children. */

package/src/styles/navigation.css

@@ -71,6 +71,32 @@
   opacity: 0.6;
 }
 
+/* Responsive Tabs (opt-in via `responsive`): below ~30rem of CONTAINER width the
+   strip collapses to a <select>. A container query responds to the Tabs' own
+   container — not the viewport — so it collapses inside a narrow panel/split too. */
+.pl-tabs-wrap--responsive {
+  container-type: inline-size;
+  width: 100%;
+}
+.pl-tabs__select {
+  display: none;
+  width: 100%;
+  padding: 6px 10px;
+  font: inherit;
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-inset);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+}
+@container (max-width: 30rem) {
+  .pl-tabs-wrap--responsive > .pl-tabs {
+    display: none;
+  }
+  .pl-tabs-wrap--responsive > .pl-tabs__select {
+    display: block;
+  }
+}
+
 /* ── Board (kanban) ────────────────────────────────────────────────────────── */
 .pl-board {
   display: flex;