@robr0/design-system 0.2.0 → 0.3.0

package/components/Field/Field.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+/** Props owned by Field itself — everything else falls through to the wrapper. */
+type FieldOwnProps = {
+    /** Label text rendered above the control */
+    label?: string;
+    /** The form control this field labels */
+    children?: React.ReactNode;
+    /** Helper or error message rendered below the control */
+    helperText?: string;
+    /**
+     * Optional content rendered opposite the helper text — a character counter,
+     * a unit, a "0/280". Present only when supplied; without it the helper sits
+     * directly in the field's column and no extra wrapper is introduced.
+     */
+    aside?: React.ReactNode;
+    /** Error state — recolours the helper text and marks the control invalid */
+    error?: boolean;
+    /** Marks the field required and renders the required marker */
+    required?: boolean;
+    /** Whether the control is disabled — dims the label */
+    disabled?: boolean;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /**
+     * id for the control. Generated when omitted, so the label/control/helper
+     * association works with no configuration.
+     */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface FieldProps extends FieldOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FieldOwnProps> {
+}
+/**
+ * Field owns the scaffolding shared by every labelled form control: the label
+ * and its `htmlFor`, the required marker, the helper/error message, the ids
+ * that tie them together, and the `aria-describedby` / `aria-invalid` wiring.
+ *
+ * Controls compose inside it and read the wiring through `useField()` rather
+ * than deriving ids themselves — which is what keeps accessibility correct
+ * systemically instead of one component at a time.
+ *
+ * ```tsx
+ * <Field label="Email" helperText="We never share it." required>
+ *   <MyControl />
+ * </Field>
+ * ```
+ */
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Field/Field.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useId } from "react";
+import { FieldContext } from "./FieldContext.js";
+import "./Field.css";
+const Field = React.forwardRef(
+  ({
+    label,
+    children,
+    helperText,
+    aside,
+    error = false,
+    required = false,
+    disabled = false,
+    size = "default",
+    id,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-field";
+    const generatedId = useId();
+    const controlId = id || generatedId;
+    const describedBy = helperText ? `${controlId}-helper` : void 0;
+    const labelId = label ? `${controlId}-label` : void 0;
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const context = {
+      controlId,
+      labelId,
+      describedBy,
+      invalid: error,
+      required,
+      disabled
+    };
+    return /* @__PURE__ */ jsx(FieldContext.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      label && /* @__PURE__ */ jsxs("label", { className: `${baseClass}__label`, id: labelId, htmlFor: controlId, children: [
+        label,
+        required && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__required`, "aria-hidden": "true", children: [
+          " ",
+          "*"
+        ] })
+      ] }),
+      children,
+      aside ? /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+        helperText ? /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: describedBy, children: helperText }) : /* @__PURE__ */ jsx("span", {}),
+        aside
+      ] }) : helperText && /* @__PURE__ */ jsx("p", { className: `${baseClass}__helper`, id: describedBy, children: helperText })
+    ] }) });
+  }
+);
+Field.displayName = "Field";
+export {
+  Field
+};

package/components/Field/FieldContext.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+/**
+ * Everything a labelled form control needs to be announced correctly.
+ * Derived once by `Field`; read by a control via `useField()`.
+ *
+ * Lives in its own module so `Field.tsx` exports only a component — the
+ * react-refresh lint rule that keeps Fast Refresh working.
+ */
+export interface FieldContextValue {
+    /** id for the control itself — the label's `htmlFor` points at it */
+    controlId: string;
+    /**
+     * id of the rendered `<label>`, or undefined when there is no label.
+     *
+     * `htmlFor` only associates with *labelable* elements (input, select,
+     * textarea, button…). A composite widget built from a `div` — a
+     * `role="combobox"` trigger, for instance — is not labelable, so it must
+     * point `aria-labelledby` at this id instead.
+     */
+    labelId: string | undefined;
+    /** id of the helper/error text, or undefined when there is none */
+    describedBy: string | undefined;
+    /** whether the control should report itself invalid */
+    invalid: boolean;
+    /** whether the control is required */
+    required: boolean;
+    /** whether the control is disabled */
+    disabled: boolean;
+}
+export declare const FieldContext: React.Context<FieldContextValue | null>;
+/**
+ * Read the wiring `Field` derived.
+ *
+ * Returns `null` outside a `Field`, so a control that uses it still renders
+ * standalone — always optional-chain the result.
+ *
+ * ```tsx
+ * const field = useField();
+ * <input id={field?.controlId} aria-describedby={field?.describedBy} />
+ * ```
+ */
+export declare const useField: () => FieldContextValue | null;

package/components/Field/FieldContext.js

@@ -0,0 +1,7 @@
+import React from "react";
+const FieldContext = React.createContext(null);
+const useField = () => React.useContext(FieldContext);
+export {
+  FieldContext,
+  useField
+};

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.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.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);
+}