@robr0/design-system 0.1.0 → 0.3.0

package/components/Input/Input.js

@@ -1,71 +1,98 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
+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 = ({
-  label,
-  placeholder = "",
-  value,
-  type = "text",
-  size = "default",
-  disabled = false,
-  required = false,
-  error = false,
-  helperText,
-  iconLeft,
-  iconRight,
-  onChange,
-  onFocus,
-  onBlur,
-  className = "",
-  ariaLabel,
-  name,
-  id
-}) => {
-  const baseClass = "ds-input";
-  const sizeClass = size === "compact" ? `${baseClass}--compact` : "";
-  const errorClass = error ? `${baseClass}--error` : "";
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const hasLeftIcon = iconLeft ? `${baseClass}--has-icon-left` : "";
-  const hasRightIcon = iconRight ? `${baseClass}--has-icon-right` : "";
-  const classes = [baseClass, sizeClass, errorClass, disabledClass, hasLeftIcon, hasRightIcon, className].filter(Boolean).join(" ");
-  const handleChange = (e) => {
-    if (onChange) {
-      onChange(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: [
-      label,
-      required && /* @__PURE__ */ jsx("span", { className: `${baseClass}__required`, "aria-hidden": "true", 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",
-        {
-          className: `${baseClass}__field`,
-          type,
-          id: inputId,
-          name,
-          value,
-          placeholder,
-          disabled,
-          required,
-          "aria-label": ariaLabel || label,
-          "aria-invalid": error,
-          "aria-describedby": helperText ? `${inputId}-helper` : void 0,
-          onChange: handleChange,
-          onFocus,
-          onBlur
-        }
-      ),
-      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 })
-  ] });
-};
+const Input = React.forwardRef(
+  ({
+    label,
+    placeholder = "",
+    value,
+    type = "text",
+    size = "default",
+    disabled = false,
+    required = false,
+    error = false,
+    helperText,
+    iconLeft,
+    iconRight,
+    onChange,
+    onValueChange,
+    className = "",
+    ariaLabel,
+    name,
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-input";
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      error ? `${baseClass}--error` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      iconLeft ? `${baseClass}--has-icon-left` : "",
+      iconRight ? `${baseClass}--has-icon-right` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const inputId = id || name || label?.toLowerCase().replace(/\s+/g, "-");
+    const describedBy = helperText ? `${inputId}-helper` : rest["aria-describedby"];
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        className: classes,
+        label,
+        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
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 export {
   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/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,

package/components/RadioButton/RadioButton.d.ts

@@ -1,26 +1,34 @@
 import { default as React } from 'react';
-export interface RadioButtonProps {
+/** Props owned by RadioButton itself — everything else falls through to the wrapper. */
+type RadioButtonOwnProps = {
     /** Label text */
     label?: string;
     /** Whether this radio is selected */
     checked?: boolean;
     /** Whether the radio is disabled */
     disabled?: boolean;
-    /** Radio group name — groups radios together */
-    name?: string;
     /** Value for this radio option */
     value?: string;
-    /** Callback when selected */
-    onChange?: (value: string) => void;
+    /** Called with this radio's value when selected */
+    onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
-    /** Accessible label override */
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string) => void;
+    /** @deprecated Pass the native `aria-label` attribute instead. */
     ariaLabel?: string;
-    /** HTML id attribute */
-    id?: string;
+    /**
+     * @deprecated No-op. This component renders a `<div role="radio">`, not a
+     * native `<input type="radio">`, so it does not group by name or participate
+     * in native form submission — `RadioGroup` handles grouping in React state.
+     * Declared only so the attribute is not forwarded to an element that rejects it.
+     */
+    name?: string;
+};
+export interface RadioButtonProps extends RadioButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RadioButtonOwnProps> {
 }
-export declare const RadioButton: ({ label, checked, disabled, value, onChange, className, ariaLabel, }: RadioButtonProps) => React.JSX.Element;
-export interface RadioGroupProps {
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLDivElement>>;
+type RadioGroupOwnProps = {
     /** Group label */
     label?: string;
     /** Currently selected value */
@@ -35,9 +43,14 @@ export interface RadioGroupProps {
     }[];
     /** Layout direction */
     direction?: 'vertical' | 'horizontal';
-    /** Callback when selection changes */
-    onChange?: (value: string) => void;
+    /** Called with the newly selected value */
+    onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string) => void;
+};
+export interface RadioGroupProps extends RadioGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RadioGroupOwnProps> {
 }
-export declare const RadioGroup: ({ label, value, name, options, direction, onChange, className, }: RadioGroupProps) => React.JSX.Element;
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/RadioButton/RadioButton.js

@@ -1,76 +1,101 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import "react";
+import React from "react";
 import "./RadioButton.css";
-const RadioButton = ({
-  label,
-  checked = false,
-  disabled = false,
-  value = "",
-  onChange,
-  className = "",
-  ariaLabel
-}) => {
-  const baseClass = "ds-radio";
-  const checkedClass = checked ? `${baseClass}--checked` : "";
-  const disabledClass = disabled ? `${baseClass}--disabled` : "";
-  const classes = [baseClass, checkedClass, disabledClass, className].filter(Boolean).join(" ");
-  const handleClick = () => {
-    if (!disabled && onChange) {
-      onChange(value);
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      handleClick();
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classes,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      role: "radio",
-      "aria-checked": checked,
-      "aria-disabled": disabled,
-      "aria-label": ariaLabel || label,
-      tabIndex: disabled ? -1 : 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__circle`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__dot` }) }),
-        label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
-      ]
-    }
-  );
-};
-const RadioGroup = ({
-  label,
-  value,
-  name,
-  options,
-  direction = "vertical",
-  onChange,
-  className = ""
-}) => {
-  const baseClass = "ds-radio-group";
-  const directionClass = `${baseClass}--${direction}`;
-  const classes = [baseClass, directionClass, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes, role: "radiogroup", "aria-label": label, children: [
-    label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
-    /* @__PURE__ */ jsx("div", { className: `${baseClass}__options`, children: options.map((option) => /* @__PURE__ */ jsx(
-      RadioButton,
+const RadioButton = React.forwardRef(
+  ({
+    label,
+    checked = false,
+    disabled = false,
+    value = "",
+    onValueChange,
+    onChange,
+    className = "",
+    ariaLabel,
+    name: _name,
+    onClick,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-radio";
+    const classes = [
+      baseClass,
+      checked ? `${baseClass}--checked` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const select = () => {
+      if (disabled) return;
+      onValueChange?.(value);
+      onChange?.(value);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      select();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        select();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        label: option.label,
-        value: option.value,
-        name,
-        checked: value === option.value,
-        disabled: option.disabled,
-        onChange
-      },
-      option.value
-    )) })
-  ] });
-};
+        ...rest,
+        ref,
+        className: classes,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "radio",
+        "aria-checked": checked,
+        "aria-disabled": disabled,
+        "aria-label": ariaLabel || rest["aria-label"] || label,
+        tabIndex: disabled ? -1 : 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__circle`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__dot` }) }),
+          label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+        ]
+      }
+    );
+  }
+);
+RadioButton.displayName = "RadioButton";
+const RadioGroup = React.forwardRef(
+  ({
+    label,
+    value,
+    name: _name,
+    options,
+    direction = "vertical",
+    onValueChange,
+    onChange,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-radio-group";
+    const classes = [baseClass, `${baseClass}--${direction}`, className].filter(Boolean).join(" ");
+    const handleSelect = (next) => {
+      onValueChange?.(next);
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "radiogroup", "aria-label": label, children: [
+      label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__options`, children: options.map((option) => /* @__PURE__ */ jsx(
+        RadioButton,
+        {
+          label: option.label,
+          value: option.value,
+          checked: value === option.value,
+          disabled: option.disabled,
+          onValueChange: handleSelect
+        },
+        option.value
+      )) })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
 export {
   RadioButton,
   RadioGroup

package/components/SelectionCard/SelectionCard.css

@@ -232,8 +232,12 @@
 .ds-selection-card__toggle-icon {
   /* Intentionally off the --icon-size-* scale — same reason as ToggleSwitch:
      this glyph lives inside the 20x20 toggle thumb, and the smallest scale
-     step (20px) would fill it completely. */
-  font-size: 14px;
+     step (20px) would fill it completely. Sized via --icon-size, not
+     font-size, so the icon's box shrinks with the glyph (see ToggleSwitch).
+
+     ds-allow(icon-size): 14px glyph inside the 20px thumb — the smallest
+     scale step would fill it edge to edge. */
+  --icon-size: 14px;
   color: var(--color-action-primary-bg);
 }
 

package/components/SelectionCard/SelectionCard.d.ts

@@ -9,18 +9,24 @@ export interface SelectionCardOption {
     /** Whether this option is disabled */
     disabled?: boolean;
 }
-export interface SelectionCardProps {
+/** Props owned by SelectionCard itself — everything else falls through to the group. */
+type SelectionCardOwnProps = {
     /** Selection mode — radio (single), checkbox (multi), or toggle (each card is an on/off switch) */
     mode?: 'radio' | 'checkbox' | 'toggle';
     /** Available options */
     options: SelectionCardOption[];
     /** Currently selected value(s) — string for radio, string[] for checkbox */
     value?: string | string[];
-    /** Callback when selection changes — returns string for radio, string[] for checkbox */
-    onChange?: (value: string | string[]) => void;
+    /** Called with the next selection — a string in radio mode, an array otherwise */
+    onValueChange?: (value: string | string[]) => void;
     /** Group name (used for aria-label on the group) */
     name?: string;
     /** Additional CSS classes */
     className?: string;
+    /** @deprecated Use `onValueChange` instead. */
+    onChange?: (value: string | string[]) => void;
+};
+export interface SelectionCardProps extends SelectionCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SelectionCardOwnProps> {
 }
-export declare const SelectionCard: ({ mode, options, value, onChange, name, className, }: SelectionCardProps) => React.JSX.Element;
+export declare const SelectionCard: React.ForwardRefExoticComponent<SelectionCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};