@protolabsai/ui 0.5.0 → 0.6.0

package/package.json

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

package/src/Button.stories.tsx

@@ -5,7 +5,7 @@ const meta: Meta<typeof Button> = {
   title: "Components/Button",
   component: Button,
   args: { children: "Breakdowns" },
-  argTypes: { variant: { control: "inline-radio", options: ["default", "primary"] } },
+  argTypes: { variant: { control: "inline-radio", options: ["default", "primary", "ghost", "danger"] } },
 };
 export default meta;
 type Story = StoryObj<typeof Button>;
@@ -13,3 +13,48 @@ type Story = StoryObj<typeof Button>;
 export const Default: Story = {};
 export const Primary: Story = { args: { variant: "primary", children: "Get started" } };
 export const Disabled: Story = { args: { disabled: true, children: "Disabled" } };
+
+const Sq = () => (
+  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <path d="M8 3v10M3 8h10" strokeLinecap="round" />
+  </svg>
+);
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+      <Button>default</Button>
+      <Button variant="primary">primary</Button>
+      <Button variant="ghost">ghost</Button>
+      <Button variant="danger">danger</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+      <Button size="sm">small</Button>
+      <Button>medium</Button>
+      <Button size="sm" variant="primary">
+        small primary
+      </Button>
+    </div>
+  ),
+};
+
+export const IconOnly: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+      <Button icon aria-label="Add">
+        <Sq />
+      </Button>
+      <Button icon variant="ghost" aria-label="Add">
+        <Sq />
+      </Button>
+      <Button icon size="sm" aria-label="Add">
+        <Sq />
+      </Button>
+    </div>
+  ),
+};

package/src/Skeleton.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton, SkeletonGroup } from "./index";
+
+const meta: Meta = { title: "Components/Skeleton" };
+export default meta;
+type Story = StoryObj;
+
+export const Bars: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: 12, maxWidth: 360 }}>
+      <Skeleton />
+      <Skeleton width={200} />
+      <Skeleton width={120} height={28} />
+    </div>
+  ),
+};
+
+export const TextLines: Story = {
+  render: () => (
+    <div style={{ maxWidth: 360 }}>
+      <Skeleton lines={4} />
+    </div>
+  ),
+};
+
+export const PanelSkeleton: Story = {
+  render: () => (
+    <SkeletonGroup style={{ maxWidth: 420, padding: 16, border: "1px solid var(--pl-color-border)", borderRadius: 4 }}>
+      <Skeleton width={140} height={16} />
+      <Skeleton lines={3} />
+      <div style={{ display: "flex", gap: 8 }}>
+        <Skeleton width={80} height={28} />
+        <Skeleton width={80} height={28} />
+      </div>
+    </SkeletonGroup>
+  ),
+};

package/src/index.tsx

@@ -32,11 +32,26 @@ import "./styles.css";
 const cx = (...parts: Array<string | false | undefined>) => parts.filter(Boolean).join(" ");
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  /** "primary" reads as a stronger border, not a fill (brand restraint). */
-  variant?: "default" | "primary";
+  /** "primary"/"danger" read as a stronger border, not a fill (brand restraint);
+   *  "ghost" is transparent until hover. */
+  variant?: "default" | "primary" | "ghost" | "danger";
+  size?: "sm" | "md";
+  /** Icon-only: square, centered glyph. Pass `aria-label` for a11y. */
+  icon?: boolean;
 };
-export function Button({ variant = "default", className, ...rest }: ButtonProps) {
-  return <button className={cx("pl-btn", variant === "primary" && "pl-btn--primary", className)} {...rest} />;
+export function Button({ variant = "default", size = "md", icon, className, ...rest }: ButtonProps) {
+  return (
+    <button
+      className={cx(
+        "pl-btn",
+        variant !== "default" && `pl-btn--${variant}`,
+        size === "sm" && "pl-btn--sm",
+        icon && "pl-btn--icon",
+        className,
+      )}
+      {...rest}
+    />
+  );
 }
 
 export type Status = "neutral" | "success" | "warning" | "error" | "info";
@@ -515,11 +530,7 @@ export function ConfirmDialog({
       footer={
         <>
           <Button onClick={onClose}>{cancelLabel}</Button>
-          <Button
-            variant="primary"
-            className={cx(destructive && "pl-btn--danger")}
-            onClick={() => onConfirm?.()}
-          >
+          <Button variant={destructive ? "danger" : "primary"} onClick={() => onConfirm?.()}>
             {confirmLabel}
           </Button>
         </>
@@ -745,9 +756,16 @@ export function Spinner({ size = 16, className }: { size?: number; className?: s
   );
 }
 
-/** Scroll container with brand-styled thin scrollbars. */
-export function ScrollArea({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("pl-scroll", className)} {...rest} />;
+/** 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} />;
 }
 
 // ── Form controls (compose with Field, or use standalone) ────────────────────
@@ -964,3 +982,43 @@ export function MenuSub({
     </RDropdown.Sub>
   );
 }
+
+// ── Skeleton (loading placeholder) ───────────────────────────────────────────
+
+/** 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/styles.css

@@ -734,6 +734,33 @@ a.pl-row:hover {
   border-color: var(--pl-color-status-error);
   color: var(--pl-color-bg);
 }
+/* Ghost — transparent until hover, for toolbars / inline actions. */
+.pl-btn--ghost {
+  border-color: transparent;
+}
+.pl-btn--ghost:hover {
+  border-color: var(--pl-color-border-strong);
+  background: var(--pl-color-bg-hover);
+}
+.pl-btn--sm {
+  padding: 0.3rem 0.6rem;
+  font-size: 12px;
+}
+/* Icon-only — square, centered glyph. */
+.pl-btn--icon {
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  justify-content: center;
+}
+.pl-btn--icon.pl-btn--sm {
+  width: 26px;
+  height: 26px;
+}
+.pl-btn--icon svg {
+  width: 16px;
+  height: 16px;
+}
 
 /* ── Drawer (slide-in sheet) ─────────────────────────────────────────────────── */
 .pl-drawer {
@@ -1007,9 +1034,18 @@ a.pl-row:hover {
 /* ── ScrollArea (thin brand scrollbars) ──────────────────────────────────────── */
 .pl-scroll {
   overflow: auto;
+  /* min-height:0 lets the region actually scroll inside a flex/grid parent
+     (the classic min-size trap) instead of overflowing it. */
+  min-height: 0;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
   scrollbar-width: thin;
   scrollbar-color: var(--pl-color-border-strong) transparent;
 }
+.pl-scroll:focus-visible {
+  outline: 1px solid var(--pl-color-fg);
+  outline-offset: -2px;
+}
 .pl-scroll::-webkit-scrollbar {
   width: 8px;
   height: 8px;
@@ -1239,6 +1275,37 @@ a.pl-row:hover {
   color: var(--pl-color-fg-muted);
 }
 
+/* ── Skeleton (loading placeholder) ──────────────────────────────────────────── */
+.pl-skel {
+  display: block;
+  border-radius: var(--pl-radius);
+  background-color: var(--pl-color-bg-subtle);
+  background-image: linear-gradient(
+    90deg,
+    var(--pl-color-bg-subtle) 25%,
+    var(--pl-color-bg-hover) 50%,
+    var(--pl-color-bg-subtle) 75%
+  );
+  background-size: 200% 100%;
+  animation: pl-skel-shimmer 1.4s var(--pl-motion-ease-in-out) infinite;
+}
+@keyframes pl-skel-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+.pl-skel-lines {
+  display: grid;
+  gap: 8px;
+}
+.pl-skel-group {
+  display: grid;
+  gap: var(--pl-space-3);
+}
+
 /* Respect reduced-motion for every animation this package introduces. */
 @media (prefers-reduced-motion: reduce) {
   .pl-drawer,
@@ -1247,4 +1314,9 @@ a.pl-row:hover {
   .pl-spinner {
     animation: none;
   }
+  /* Skeletons go static (solid fill, no shimmer). */
+  .pl-skel {
+    animation: none;
+    background-image: none;
+  }
 }