@robr0/design-system 0.2.0 → 0.4.0

package/components/FileInput/FileInput.css

@@ -14,19 +14,6 @@
    LABEL
    ============================================ */
 
-.ds-file-input__label {
-  font-family: var(--font-paragraph-em-family);
-  font-size: var(--font-paragraph-em-size);
-  font-weight: var(--font-paragraph-em-weight);
-  line-height: var(--font-paragraph-em-line-height);
-  letter-spacing: var(--font-paragraph-em-letter-spacing);
-  color: var(--color-text-primary);
-}
-
-.ds-file-input__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    DROPZONE
    ============================================ */
@@ -237,16 +224,6 @@
    HELPER TEXT
    ============================================ */
 
-.ds-file-input__helper {
-  font-family: var(--font-paragraph-sm-family);
-  font-size: var(--font-paragraph-sm-size);
-  font-weight: var(--font-paragraph-sm-weight);
-  line-height: var(--font-paragraph-sm-line-height);
-  letter-spacing: var(--font-paragraph-sm-letter-spacing);
-  color: var(--color-text-tertiary);
-  margin: 0;
-}
-
 /* ============================================
    ERROR STATE
    ============================================ */
@@ -255,18 +232,10 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-file-input--error .ds-file-input__helper {
-  color: var(--color-status-error-border);
-}
-
 /* ============================================
    DISABLED STATE
    ============================================ */
 
-.ds-file-input--disabled .ds-file-input__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-file-input--disabled .ds-file-input__dropzone {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
@@ -287,11 +256,6 @@
   padding: var(--padding-lg); /* 20px */
 }
 
-.ds-file-input--compact .ds-file-input__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}
-
 .ds-file-input--compact .ds-file-input__dropzone-icon {
   --icon-size: var(--icon-size-sm);
 }

package/components/FileInput/FileInput.d.ts

@@ -31,7 +31,11 @@ type FileInputOwnProps = {
     onFileRemove?: (id: string) => void;
     /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface FileInputProps extends FileInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof FileInputOwnProps | 'type'> {

package/components/FileInput/FileInput.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId } from "react";
+import { Field } from "../Field/Field.js";
 import "./FileInput.css";
 import "../../fonts/material-symbols.css";
 const formatBytes = (bytes) => {
@@ -80,114 +81,121 @@ const FileInput = React.forwardRef(
       isDragging ? `${baseClass}--dragging` : "",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-      label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        className: classes,
         label,
-        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
-          " ",
-          "*"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `${baseClass}__dropzone`,
-          role: "button",
-          tabIndex: disabled ? -1 : 0,
-          "aria-label": ariaLabel || rest["aria-label"] || placeholder,
-          "aria-describedby": helperText ? `${inputId}-helper` : void 0,
-          "aria-disabled": disabled || void 0,
-          onClick: openPicker,
-          onKeyDown: handleKeyDown,
-          onDrop: handleDrop,
-          onDragOver: handleDragOver,
-          onDragLeave: handleDragLeave,
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `${baseClass}__dropzone-icon material-symbols-rounded`,
-                "aria-hidden": "true",
-                children: "upload_file"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: `${baseClass}__dropzone-text`, children: placeholder }),
-            accept && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dropzone-hint`, children: [
-              "Accepts ",
-              accept
-            ] }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ...rest,
-                ref: setInputRef,
-                id: inputId,
-                name,
-                type: "file",
-                className: `${baseClass}__native`,
-                accept,
-                multiple,
-                disabled,
-                required,
-                tabIndex: -1,
-                onChange: handleChange
-              }
-            )
-          ]
-        }
-      ),
-      files.length > 0 && /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, children: files.map((file) => /* @__PURE__ */ jsxs(
-        "li",
-        {
-          className: [`${baseClass}__file`, file.error ? `${baseClass}__file--error` : ""].filter(Boolean).join(" "),
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: `${baseClass}__file-icon material-symbols-rounded`,
-                "aria-hidden": "true",
-                children: file.error ? "error" : "description"
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { className: `${baseClass}__file-details`, children: [
-              /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-name`, children: file.name }),
-              file.error ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-error`, children: file.error }) : file.size !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-size`, children: formatBytes(file.size) }),
-              file.error === void 0 && file.progress !== void 0 && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `${baseClass}__progress`,
-                  role: "progressbar",
-                  "aria-valuenow": file.progress,
-                  "aria-valuemin": 0,
-                  "aria-valuemax": 100,
-                  "aria-label": `Uploading ${file.name}`,
-                  children: /* @__PURE__ */ jsx(
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${baseClass}__dropzone`,
+              role: "button",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": ariaLabel || rest["aria-label"] || placeholder,
+              "aria-describedby": helperText ? `${inputId}-helper` : void 0,
+              "aria-invalid": error || void 0,
+              "aria-disabled": disabled || void 0,
+              onClick: openPicker,
+              onKeyDown: handleKeyDown,
+              onDrop: handleDrop,
+              onDragOver: handleDragOver,
+              onDragLeave: handleDragLeave,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__dropzone-icon material-symbols-rounded`,
+                    "aria-hidden": "true",
+                    children: "upload_file"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__dropzone-text`, children: placeholder }),
+                accept && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dropzone-hint`, children: [
+                  "Accepts ",
+                  accept
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref: setInputRef,
+              id: inputId,
+              name,
+              type: "file",
+              className: `${baseClass}__native`,
+              accept,
+              multiple,
+              disabled,
+              required,
+              tabIndex: -1,
+              "aria-label": label ? void 0 : ariaLabel || rest["aria-label"] || placeholder,
+              onChange: handleChange
+            }
+          ),
+          files.length > 0 && /* @__PURE__ */ jsx("ul", { className: `${baseClass}__list`, children: files.map((file) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: [`${baseClass}__file`, file.error ? `${baseClass}__file--error` : ""].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__file-icon material-symbols-rounded`,
+                    "aria-hidden": "true",
+                    children: file.error ? "error" : "description"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: `${baseClass}__file-details`, children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-name`, children: file.name }),
+                  file.error ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-error`, children: file.error }) : file.size !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__file-size`, children: formatBytes(file.size) }),
+                  file.error === void 0 && file.progress !== void 0 && /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: `${baseClass}__progress-fill`,
-                      style: { width: `${Math.min(100, Math.max(0, file.progress))}%` }
+                      className: `${baseClass}__progress`,
+                      role: "progressbar",
+                      "aria-valuenow": file.progress,
+                      "aria-valuemin": 0,
+                      "aria-valuemax": 100,
+                      "aria-label": `Uploading ${file.name}`,
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${baseClass}__progress-fill`,
+                          style: { width: `${Math.min(100, Math.max(0, file.progress))}%` }
+                        }
+                      )
                     }
                   )
-                }
-              )
-            ] }),
-            onFileRemove && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: `${baseClass}__file-remove`,
-                onClick: () => onFileRemove(file.id),
-                disabled,
-                "aria-label": `Remove ${file.name}`,
-                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
-              }
-            )
-          ]
-        },
-        file.id
-      )) }),
-      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-    ] });
+                ] }),
+                onFileRemove && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${baseClass}__file-remove`,
+                    onClick: () => onFileRemove(file.id),
+                    disabled,
+                    "aria-label": `Remove ${file.name}`,
+                    children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+                  }
+                )
+              ]
+            },
+            file.id
+          )) })
+        ]
+      }
+    );
   }
 );
 FileInput.displayName = "FileInput";

package/components/Input/Input.css

@@ -10,23 +10,6 @@
   width: 100%;
 }
 
-/* ============================================
-   LABEL
-   ============================================ */
-
-.ds-input__label {
-  font-family: var(--font-paragraph-em-family);
-  font-size: var(--font-paragraph-em-size);
-  font-weight: var(--font-paragraph-em-weight);
-  line-height: var(--font-paragraph-em-line-height);
-  letter-spacing: var(--font-paragraph-em-letter-spacing);
-  color: var(--color-text-primary);
-}
-
-.ds-input__required {
-  color: var(--color-core-accent-coral);
-}
-
 /* ============================================
    FIELD WRAPPER
    ============================================ */
@@ -103,20 +86,6 @@
   padding-right: calc(var(--padding-md) + 24px + var(--gap-sm)); /* 16px + 24px icon + 8px gap */
 }
 
-/* ============================================
-   HELPER TEXT
-   ============================================ */
-
-.ds-input__helper {
-  font-family: var(--font-paragraph-sm-family);
-  font-size: var(--font-paragraph-sm-size);
-  font-weight: var(--font-paragraph-sm-weight);
-  line-height: var(--font-paragraph-sm-line-height);
-  letter-spacing: var(--font-paragraph-sm-letter-spacing);
-  color: var(--color-text-tertiary);
-  margin: 0;
-}
-
 /* ============================================
    ERROR STATE
    ============================================ */
@@ -129,18 +98,10 @@
   border-color: var(--color-status-error-border);
 }
 
-.ds-input--error .ds-input__helper {
-  color: var(--color-status-error-border);
-}
-
 /* ============================================
    DISABLED STATE
    ============================================ */
 
-.ds-input--disabled .ds-input__label {
-  color: var(--color-input-text-disabled);
-}
-
 .ds-input--disabled .ds-input__field {
   background-color: var(--color-input-bg-disabled);
   border-color: var(--color-input-border-disabled);
@@ -187,7 +148,3 @@
   padding-right: calc(var(--padding-sm-md) + 20px + var(--gap-sm)); /* 12px + 20px icon + 8px gap */
 }
 
-.ds-input--compact .ds-input__label {
-  font-size: var(--font-paragraph-sm-size);
-  line-height: var(--font-paragraph-sm-line-height);
-}

package/components/Input/Input.d.ts

@@ -25,7 +25,11 @@ type InputOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface InputProps extends InputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof InputOwnProps> {

package/components/Input/Input.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { Field } from "../Field/Field.js";
 import "./Input.css";
 import "../../fonts/material-symbols.css";
 const Input = React.forwardRef(
@@ -38,53 +39,57 @@ const Input = React.forwardRef(
       onValueChange?.(e.target.value);
     };
     const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
-    return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-      label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, htmlFor: inputId, children: [
+    const describedBy = helperText ? `${inputId}-helper` : rest["aria-describedby"];
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
         label,
-        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
-          " ",
-          "*"
+        helperText,
+        error,
+        required,
+        disabled,
+        size,
+        id: inputId,
+        children: /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field-wrapper`, children: [
+          iconLeft && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__icon ${baseClass}__icon--left material-symbols-rounded`,
+              "aria-hidden": "true",
+              children: iconLeft
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref,
+              className: `${baseClass}__field`,
+              type,
+              id: inputId,
+              name,
+              value,
+              placeholder,
+              disabled,
+              required,
+              "aria-label": ariaLabel || rest["aria-label"] || label,
+              "aria-invalid": error,
+              "aria-describedby": describedBy,
+              onChange: handleChange
+            }
+          ),
+          iconRight && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${baseClass}__icon ${baseClass}__icon--right material-symbols-rounded`,
+              "aria-hidden": "true",
+              children: iconRight
+            }
+          )
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__field-wrapper`, children: [
-        iconLeft && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `${baseClass}__icon ${baseClass}__icon--left material-symbols-rounded`,
-            "aria-hidden": "true",
-            children: iconLeft
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ...rest,
-            ref,
-            className: `${baseClass}__field`,
-            type,
-            id: inputId,
-            name,
-            value,
-            placeholder,
-            disabled,
-            required,
-            "aria-label": ariaLabel || rest["aria-label"] || label,
-            "aria-invalid": error,
-            "aria-describedby": helperText ? `${inputId}-helper` : rest["aria-describedby"],
-            onChange: handleChange
-          }
-        ),
-        iconRight && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `${baseClass}__icon ${baseClass}__icon--right material-symbols-rounded`,
-            "aria-hidden": "true",
-            children: iconRight
-          }
-        )
-      ] }),
-      helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: `${inputId}-helper`, children: helperText })
-    ] });
+      }
+    );
   }
 );
 Input.displayName = "Input";

package/components/Kbd/Kbd.css

@@ -0,0 +1,28 @@
+/* ============================================
+   KBD COMPONENT
+   A single keyboard key rendered as a keycap
+   ============================================ */
+
+/* Base */
+.ds-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  padding: var(--padding-xxxs) var(--padding-xs);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  border-radius: var(--radius-xs);
+  background-color: var(--color-bg-container-primary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-em-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+/* Sizes */
+.ds-kbd--compact {
+  min-width: 20px;
+  padding: var(--padding-xxxs) var(--padding-xxs);
+}

package/components/Kbd/Kbd.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+/** Props owned by Kbd itself — everything else falls through to the <kbd> element. */
+type KbdOwnProps = {
+    /** Key size */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+    /** The key legend — e.g. ⌘, K, Esc, Shift */
+    children?: React.ReactNode;
+};
+export interface KbdProps extends KbdOwnProps, Omit<React.ComponentPropsWithoutRef<'kbd'>, keyof KbdOwnProps> {
+}
+/**
+ * Kbd renders a single keyboard key as a keycap, for shortcut hints in
+ * menus and docs prose. Compose several for a chord: `<Kbd>⌘</Kbd><Kbd>K</Kbd>`.
+ * Purely presentational — safe to render from a Server Component.
+ */
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+export {};

package/components/Kbd/Kbd.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import "./Kbd.css";
+const Kbd = React.forwardRef(
+  ({ size = "default", className = "", children, ...rest }, ref) => {
+    const baseClass = "ds-kbd";
+    const classes = [baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("kbd", { ...rest, ref, className: classes, children });
+  }
+);
+Kbd.displayName = "Kbd";
+export {
+  Kbd
+};

package/components/LinkList/LinkList.d.ts

@@ -13,6 +13,7 @@ export interface LinkListItem {
     icon?: string;
 }
 export interface LinkListProps {
+    /** Links to render, in display order — each opens in a new tab */
     items: LinkListItem[];
     /** Additional CSS classes */
     className?: string;

package/components/Popover/Popover.d.ts

@@ -19,10 +19,4 @@ export interface PopoverProps {
     /** Additional CSS classes for the popover panel */
     className?: string;
 }
-/**
- * Popover component for contextual overlays.
- * Wraps a trigger element and displays content in a
- * positioned panel. Supports click and hover triggers
- * with automatic outside-click dismissal.
- */
 export declare const Popover: ({ children, content, size, position, trigger, open: controlledOpen, onOpenChange, ariaLabel, className, }: PopoverProps) => React.JSX.Element;

package/components/Popover/Popover.js

@@ -1,6 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useRef, useCallback, useEffect } from "react";
 import "./Popover.css";
+const INTERACTIVE_TAGS = /* @__PURE__ */ new Set(["button", "a", "input", "select", "textarea", "summary"]);
+const canCarryPopoverSemantics = (el) => typeof el.type === "string" ? INTERACTIVE_TAGS.has(el.type) : true;
 const Popover = ({
   children,
   content,
@@ -73,26 +75,30 @@ const Popover = ({
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__trigger`, onClick: handleClick, children: React.isValidElement(children) && canCarryPopoverSemantics(children) ? React.cloneElement(children, {
+          "aria-expanded": isOpen,
+          "aria-haspopup": "dialog",
+          ...ariaLabel ? { "aria-label": ariaLabel } : {}
+        }) : trigger === "click" ? /* @__PURE__ */ jsx(
+          "button",
           {
-            className: `${baseClass}__trigger`,
-            onClick: handleClick,
-            role: trigger === "click" ? "button" : void 0,
-            tabIndex: trigger === "click" ? 0 : void 0,
+            type: "button",
             "aria-expanded": isOpen,
-            "aria-label": ariaLabel,
             "aria-haspopup": "dialog",
-            onKeyDown: (e) => {
-              if (trigger === "click" && (e.key === "Enter" || e.key === " ")) {
-                e.preventDefault();
-                setOpen(!isOpen);
-              }
-            },
+            "aria-label": ariaLabel,
             children
           }
-        ),
-        /* @__PURE__ */ jsx("div", { className: panelClasses, role: "dialog", "aria-hidden": !isOpen, children: content })
+        ) : children }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: panelClasses,
+            role: "dialog",
+            "aria-label": ariaLabel || "Popover",
+            "aria-hidden": !isOpen,
+            children: content
+          }
+        )
       ]
     }
   );

package/components/ProgressBar/ProgressBar.js

@@ -14,7 +14,7 @@ const ProgressBar = ({
     `${baseClass}--${size}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": ariaLabel, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": ariaLabel || "Progress", children: [
     /* @__PURE__ */ jsx("div", { className: `${baseClass}__track`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__fill`, style: { width: `${clamped}%` } }) }),
     showLabel && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__label`, children: [
       clamped,