@jcsoftdev/ui 0.1.5 → 0.1.7

package/dist/containers/responsive-list/responsive-list.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUiStrings } from "../../i18n/index.js";
+import { cn } from "../../utils/cn.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow
+} from "../table/table.js";
+function ResponsiveList({
+  caption,
+  items,
+  columns,
+  rowKey,
+  renderActions,
+  actionsHeader,
+  rowClassName,
+  className
+}) {
+  const strings = useUiStrings();
+  const primary = columns.find((column) => column.primary) ?? columns[0];
+  const details = columns.filter((column) => column !== primary);
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden rounded-card border-card shadow-card surface-card md:block", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+      /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-transparent", children: [
+        columns.map((column) => /* @__PURE__ */ jsx(TableHeaderCell, { scope: "col", alignRight: column.align === "end", children: column.header }, column.key)),
+        renderActions ? /* @__PURE__ */ jsx(TableHeaderCell, { scope: "col", alignRight: true, children: actionsHeader ?? strings.actions }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: items.map((item) => /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          "data-row-key": rowKey(item),
+          className: rowClassName?.(item),
+          children: [
+            columns.map((column) => /* @__PURE__ */ jsx(TableCell, { alignRight: column.align === "end", children: column.cell(item) }, column.key)),
+            renderActions ? /* @__PURE__ */ jsx(TableCell, { alignRight: true, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-end gap-2", children: renderActions(item) }) }) : null
+          ]
+        },
+        rowKey(item)
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsx("ul", { "aria-label": caption, className: "m-0 flex list-none flex-col gap-density p-0 md:hidden", children: items.map((item) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "data-row-key": rowKey(item),
+        className: cn(
+          "flex min-w-0 flex-col gap-3 rounded-card border-card p-card shadow-card surface-card",
+          rowClassName?.(item)
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 font-semibold text-[15px] text-ink [overflow-wrap:anywhere]", children: primary?.cell(item) }),
+          details.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "m-0 flex flex-col gap-2", children: details.map((column) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-4", children: [
+            /* @__PURE__ */ jsx("dt", { className: "shrink-0 text-ink-3 text-meta", children: column.header }),
+            /* @__PURE__ */ jsx("dd", { className: "m-0 min-w-0 text-right text-body text-ink [overflow-wrap:anywhere]", children: column.cell(item) })
+          ] }, column.key)) }) : null,
+          renderActions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: renderActions(item) }) : null
+        ]
+      },
+      rowKey(item)
+    )) })
+  ] });
+}
+export {
+  ResponsiveList
+};

package/dist/forms/field/field.d.ts

@@ -7,10 +7,13 @@ interface ControlProps {
 export interface FieldProps {
     label: string;
     hint?: string;
-    error?: string;
+    /** Message under the control; `null` and `undefined` mean no error. */
+    error?: string | null;
+    /** Marks the field as optional by appending the localized marker to the label. */
+    optional?: boolean;
     id?: string;
     children: ReactElement<ControlProps>;
     className?: string;
 }
-export declare function Field({ label, hint, error, id, children, className }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, hint, error, optional, id, children, className }: FieldProps): import("react").JSX.Element;
 export {};

package/dist/forms/field/field.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement, useId } from "react";
+import { useUiStrings } from "../../i18n/index.js";
 import { cn } from "../../utils/cn.js";
 import { Label } from "../label/index.js";
-function Field({ label, hint, error, id, children, className }) {
+function Field({ label, hint, error, optional, id, children, className }) {
+  const strings = useUiStrings();
   const generatedId = useId();
   const controlId = id ?? generatedId;
   const hintId = hint ? `${controlId}-hint` : void 0;
@@ -15,7 +17,14 @@ function Field({ label, hint, error, id, children, className }) {
     "aria-invalid": error ? true : void 0
   }) : children;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-1.25", className), children: [
-    /* @__PURE__ */ jsx(Label, { htmlFor: controlId, children: label }),
+    /* @__PURE__ */ jsxs(Label, { htmlFor: controlId, children: [
+      label,
+      optional ? /* @__PURE__ */ jsxs("span", { className: "font-normal text-ink-3", children: [
+        " (",
+        strings.optional,
+        ")"
+      ] }) : null
+    ] }),
     control,
     hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: "text-meta text-ink-3", children: hint }) : null,
     error ? /* @__PURE__ */ jsx("p", { id: errorId, className: "font-semibold text-danger text-meta", role: "alert", children: error }) : null

package/dist/i18n/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./strings.js";
+export * from "./ui-strings-provider.js";

package/dist/i18n/index.js

@@ -0,0 +1,2 @@
+export * from "./strings.js";
+export * from "./ui-strings-provider.js";

package/dist/i18n/strings.d.ts

@@ -0,0 +1,42 @@
+export interface UiStrings {
+    retry: string;
+    close: string;
+    loading: string;
+    optional: string;
+    cancel: string;
+    confirm: string;
+    processing: string;
+    correlationPrefix: string;
+    actionFailed: string;
+    somethingWrong: string;
+    actions: string;
+}
+export type UiLocale = "en" | "es";
+export declare const uiStrings: {
+    readonly en: {
+        readonly retry: "Retry";
+        readonly close: "Close";
+        readonly loading: "Loading";
+        readonly optional: "optional";
+        readonly cancel: "Cancel";
+        readonly confirm: "Confirm";
+        readonly processing: "Processing…";
+        readonly correlationPrefix: "ID:";
+        readonly actionFailed: "The action could not be completed. Try again.";
+        readonly somethingWrong: "Something went wrong. Try again.";
+        readonly actions: "Actions";
+    };
+    readonly es: {
+        readonly retry: "Reintentar";
+        readonly close: "Cerrar";
+        readonly loading: "Cargando";
+        readonly optional: "opcional";
+        readonly cancel: "Cancelar";
+        readonly confirm: "Confirmar";
+        readonly processing: "Procesando…";
+        readonly correlationPrefix: "ID:";
+        readonly actionFailed: "No se pudo completar la acción. Inténtalo de nuevo.";
+        readonly somethingWrong: "Algo salió mal. Inténtalo de nuevo.";
+        readonly actions: "Acciones";
+    };
+};

package/dist/i18n/strings.js

@@ -0,0 +1,31 @@
+const uiStrings = {
+  en: {
+    retry: "Retry",
+    close: "Close",
+    loading: "Loading",
+    optional: "optional",
+    cancel: "Cancel",
+    confirm: "Confirm",
+    processing: "Processing\u2026",
+    correlationPrefix: "ID:",
+    actionFailed: "The action could not be completed. Try again.",
+    somethingWrong: "Something went wrong. Try again.",
+    actions: "Actions"
+  },
+  es: {
+    retry: "Reintentar",
+    close: "Cerrar",
+    loading: "Cargando",
+    optional: "opcional",
+    cancel: "Cancelar",
+    confirm: "Confirmar",
+    processing: "Procesando\u2026",
+    correlationPrefix: "ID:",
+    actionFailed: "No se pudo completar la acci\xF3n. Int\xE9ntalo de nuevo.",
+    somethingWrong: "Algo sali\xF3 mal. Int\xE9ntalo de nuevo.",
+    actions: "Acciones"
+  }
+};
+export {
+  uiStrings
+};

package/dist/i18n/ui-strings-provider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { type UiLocale, type UiStrings } from "./strings.js";
+export interface UiStringsProviderProps {
+    /** Preset to start from. Without it the provider keeps the strings of its parent (default `en`). */
+    locale?: UiLocale;
+    /** Overrides applied on top of the preset. */
+    strings?: Partial<UiStrings>;
+    children: ReactNode;
+}
+export declare function UiStringsProvider({ locale, strings, children }: UiStringsProviderProps): import("react").JSX.Element;
+export declare function useUiStrings(): UiStrings;

package/dist/i18n/ui-strings-provider.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { uiStrings } from "./strings.js";
+const UiStringsContext = createContext(uiStrings.en);
+function UiStringsProvider({ locale, strings, children }) {
+  const parent = useContext(UiStringsContext);
+  const value = useMemo(
+    () => ({ ...locale ? uiStrings[locale] : parent, ...strings }),
+    [locale, strings, parent]
+  );
+  return /* @__PURE__ */ jsx(UiStringsContext.Provider, { value, children });
+}
+function useUiStrings() {
+  return useContext(UiStringsContext);
+}
+export {
+  UiStringsProvider,
+  useUiStrings
+};

package/dist/overlays/dialog/dialog.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+import { useUiStrings } from "../../i18n/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   PreviousFocusProvider,
@@ -27,7 +28,7 @@ function DialogContent({
   className,
   width = "md",
   blocking = false,
-  closeLabel = "Close",
+  closeLabel,
   container,
   children,
   onEscapeKeyDown,
@@ -37,6 +38,7 @@ function DialogContent({
   ...props
 }) {
   const previousFocusRef = usePreviousFocus();
+  const strings = useUiStrings();
   return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { container, children: [
     /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-70 bg-scrim" }),
     /* @__PURE__ */ jsxs(
@@ -69,8 +71,8 @@ function DialogContent({
           !blocking && /* @__PURE__ */ jsx(
             DialogPrimitive.Close,
             {
-              "aria-label": closeLabel,
-              className: "absolute top-3 right-3 rounded-event p-1 text-ink-3 hover:text-ink",
+              "aria-label": closeLabel ?? strings.close,
+              className: "absolute top-3 right-3 rounded-event p-1 text-ink-3 hover:text-ink in-data-[density=touch]:top-0.5 in-data-[density=touch]:right-0.5 in-data-[density=touch]:p-3.5",
               children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
             }
           )

package/dist/overlays/drawer/drawer.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+import { useUiStrings } from "../../i18n/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   PreviousFocusProvider,
@@ -23,7 +24,7 @@ const DrawerTitle = DialogPrimitive.Title;
 function DrawerContent({
   className,
   blocking = false,
-  closeLabel = "Close",
+  closeLabel,
   children,
   onEscapeKeyDown,
   onPointerDownOutside,
@@ -32,6 +33,7 @@ function DrawerContent({
   ...props
 }) {
   const previousFocusRef = usePreviousFocus();
+  const strings = useUiStrings();
   return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-70 bg-scrim" }),
     /* @__PURE__ */ jsxs(
@@ -63,8 +65,8 @@ function DrawerContent({
           !blocking && /* @__PURE__ */ jsx(
             DialogPrimitive.Close,
             {
-              "aria-label": closeLabel,
-              className: "absolute top-3 right-3 rounded-event p-1 text-ink-3 hover:text-ink",
+              "aria-label": closeLabel ?? strings.close,
+              className: "absolute top-3 right-3 rounded-event p-1 text-ink-3 hover:text-ink in-data-[density=touch]:top-0.5 in-data-[density=touch]:right-0.5 in-data-[density=touch]:p-3.5",
               children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
             }
           )

package/dist/states/error-state/error-state.d.ts

@@ -1,6 +1,11 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export interface ErrorStateProps {
-    message: ReactNode;
+    /** Short headline. Wins over `message` as the headline when both are given. */
+    title?: ReactNode;
+    /** Explanation under the headline, in plain language. */
+    description?: ReactNode;
+    /** Headline when `title` is absent (kept for source compatibility). */
+    message?: ReactNode;
     /** Correlation code for support; never a raw exception. */
     correlationId?: ReactNode;
     /** Prefix shown before the correlation id. */
@@ -9,4 +14,4 @@ export interface ErrorStateProps {
     retryLabel?: string;
     className?: string;
 }
-export declare function ErrorState({ message, correlationId, correlationLabel, onRetry, retryLabel, className, }: ErrorStateProps): import("react").JSX.Element;
+export declare function ErrorState({ title, description, message, correlationId, correlationLabel, onRetry, retryLabel, className, }: ErrorStateProps): import("react").JSX.Element;

package/dist/states/error-state/error-state.js

@@ -1,14 +1,21 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { useUiStrings } from "../../i18n/index.js";
 import { cn } from "../../utils/cn.js";
 function ErrorState({
+  title,
+  description,
   message,
   correlationId,
-  correlationLabel = "ID:",
+  correlationLabel,
   onRetry,
-  retryLabel = "Retry",
+  retryLabel,
   className
 }) {
+  const strings = useUiStrings();
+  const headline = displayable(title) ?? displayable(message) ?? strings.somethingWrong;
+  const detail = displayable(description) ?? (title === void 0 ? void 0 : displayable(message));
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -18,9 +25,10 @@ function ErrorState({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("p", { className: "max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]", children: message }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]", children: headline }),
+        detail ? /* @__PURE__ */ jsx("p", { className: "max-w-[42ch] text-[13px] text-ink-3 [overflow-wrap:anywhere]", children: detail }) : null,
         correlationId ? /* @__PURE__ */ jsxs("p", { className: "max-w-full text-[11.5px] text-ink-3 tabular-nums [overflow-wrap:anywhere]", children: [
-          correlationLabel,
+          correlationLabel ?? strings.correlationPrefix,
           " ",
           correlationId
         ] }) : null,
@@ -30,13 +38,19 @@ function ErrorState({
             type: "button",
             onClick: onRetry,
             className: "mt-2 inline-flex h-control-sm cursor-pointer items-center rounded-input border-control bg-surface-control px-3 font-semibold text-[13px] text-ink hover:bg-surface-2",
-            children: retryLabel
+            children: retryLabel ?? strings.retry
           }
         ) : null
       ]
     }
   );
 }
+function displayable(value) {
+  if (value === null || value === void 0 || typeof value === "boolean") return void 0;
+  if (typeof value === "string" || typeof value === "number") return value;
+  if (isValidElement(value) || Array.isArray(value)) return value;
+  return void 0;
+}
 export {
   ErrorState
 };

package/dist/states/skeleton/skeleton.js

@@ -1,19 +1,22 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useUiStrings } from "../../i18n/index.js";
 import { cn } from "../../utils/cn.js";
 const PLACEHOLDER_IDS = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"];
 function Skeleton({
   variant = "lines",
   lines = 3,
   rows = 4,
-  label = "Loading",
+  label,
   className
 }) {
+  const strings = useUiStrings();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "status",
       "aria-busy": "true",
-      "aria-label": label,
+      "aria-label": label ?? strings.loading,
       className: cn("animate-pulse", className),
       children: [
         variant === "lines" ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: PLACEHOLDER_IDS.slice(0, lines).map((id, index) => /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jcsoftdev/ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Token-driven React component library: React 19, Radix, Tailwind v4.",
   "author": "jcsoftdev",
   "license": "MIT",

package/scripts/build-theme.mjs

@@ -116,6 +116,13 @@ export function stylesOf(tokens) {
       throw new Error(`styles: density token "${name}" is themed`);
   }
 
+  for (const level of density.levels) {
+    for (const name of Object.keys(level.values ?? {})) {
+      if (!densityGoverned.has(name) || name === "density")
+        throw new Error(`styles: density level "${level.id}" sets "${name}", which is not scaled`);
+    }
+  }
+
   const radiusLevels = styles.radius?.levels ?? [];
   const radiusGoverned = new Set(radiusLevels.flatMap((l) => Object.keys(l.values ?? {})));
   for (const name of radiusGoverned) known(name, "radius levels");
@@ -170,11 +177,10 @@ function buildStyleBlocks(tokens) {
   }
 
   for (const level of s.density.levels) {
-    const entries = s.densityGoverned.map((name) =>
-      name === "density"
-        ? [name, String(level.density)]
-        : [name, `calc(${s.byName.get(name).value} * var(--density))`],
-    );
+    const entries = s.densityGoverned.map((name) => {
+      if (name === "density") return [name, String(level.density)];
+      return [name, level.values?.[name] ?? `calc(${s.byName.get(name).value} * var(--density))`];
+    });
     blocks.push(...variantBlocks("data-density", level.id, entries, themes));
   }
 

package/src/atoms/button/button.tsx

@@ -3,7 +3,7 @@
 import { Slot } from "@radix-ui/react-slot";
 import {
   Children,
-  type ComponentPropsWithoutRef,
+  type ComponentPropsWithRef,
   Fragment,
   isValidElement,
   type ReactNode,
@@ -11,7 +11,7 @@ import {
 import { cn } from "../../utils/cn.js";
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
-export type ButtonSize = "sm" | "md";
+export type ButtonSize = "sm" | "md" | "lg";
 
 const variantClasses: Record<ButtonVariant, string> = {
   primary: "bg-accent text-on-accent font-bold hover:bg-accent-ink",
@@ -23,12 +23,17 @@ const variantClasses: Record<ButtonVariant, string> = {
 const sizeClasses: Record<ButtonSize, string> = {
   sm: "h-control-sm px-3 text-[12.5px] [&_svg]:size-3.5",
   md: "h-control px-control-x text-[13px]",
+  lg: "h-control-lg px-control-x text-[14px]",
 };
 
-export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+export interface ButtonProps extends ComponentPropsWithRef<"button"> {
   variant?: ButtonVariant;
   size?: ButtonSize;
   loading?: boolean;
+  /** Replaces the children while `loading` and is announced to screen readers. */
+  loadingLabel?: string;
+  /** Stretch to the full width of the container. */
+  block?: boolean;
   /** Render the child element (via Radix Slot) instead of a `<button>`, e.g. a link. */
   asChild?: boolean;
 }
@@ -37,6 +42,8 @@ export function Button({
   variant = "secondary",
   size = "md",
   loading,
+  loadingLabel,
+  block,
   disabled,
   asChild,
   className,
@@ -46,8 +53,13 @@ export function Button({
   const Comp = asChild ? Slot : "button";
   // Text runs get their own truncating span so a long label ends in "…" inside a narrow
   // container instead of overflowing; icons keep their size. Slot needs its single child as is.
-  const content = asChild ? children : Children.map(children, labelRun);
-  return (
+  const showLoadingLabel = loading && loadingLabel !== undefined && !asChild;
+  const content = showLoadingLabel
+    ? labelRun(loadingLabel)
+    : asChild
+      ? children
+      : Children.map(children, labelRun);
+  const button = (
     <Comp
       {...(asChild ? {} : { type: "button" })}
       aria-busy={loading ? "true" : undefined}
@@ -56,6 +68,7 @@ export function Button({
         "inline-flex min-w-0 max-w-full cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-button pressable focus-visible:focus-ring font-[650] no-underline disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:shrink-0",
         variantClasses[variant],
         sizeClasses[size],
+        block && "flex w-full",
         className,
       )}
       {...props}
@@ -63,6 +76,15 @@ export function Button({
       {content}
     </Comp>
   );
+  if (loadingLabel === undefined) return button;
+  return (
+    <>
+      {button}
+      <span role="status" className="sr-only">
+        {loading ? loadingLabel : null}
+      </span>
+    </>
+  );
 }
 
 function labelRun(child: ReactNode): ReactNode {

package/src/atoms/checkbox/checkbox.tsx

@@ -10,10 +10,13 @@ export interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxP
 export function Checkbox({ className, ...props }: CheckboxProps) {
   return (
     <CheckboxPrimitive.Root
-      className={cn("inline-flex size-10 shrink-0 items-center justify-center", className)}
+      className={cn(
+        "group inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
+        className,
+      )}
       {...props}
     >
-      <span className="grid size-[18px] place-items-center rounded-pill border-[1.5px] border-line-strong data-[state=checked]:border-success data-[state=checked]:bg-success">
+      <span className="grid size-[18px] place-items-center rounded-pill border-[1.5px] border-line-strong group-data-[state=checked]:border-success group-data-[state=checked]:bg-success group-data-[state=indeterminate]:border-success group-data-[state=indeterminate]:bg-success">
         <CheckboxPrimitive.Indicator>
           <Check aria-hidden="true" className="size-[11px] stroke-[3] text-on-accent" />
         </CheckboxPrimitive.Indicator>

package/src/atoms/chip/chip.tsx

@@ -1,5 +1,6 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cn } from "../../utils/cn.js";
+import { type StatusTone, statusIcon } from "../internal/status-icons.js";
 
 export type ChipTone =
   | "neutral"
@@ -7,6 +8,7 @@ export type ChipTone =
   | "warning"
   | "success"
   | "accent"
+  | "info"
   | "solid"
   | "outline";
 
@@ -16,6 +18,7 @@ const toneClasses: Record<ChipTone, string> = {
   warning: "bg-warning-soft text-warning",
   success: "bg-success-soft text-success",
   accent: "bg-accent-soft text-accent-ink",
+  info: "bg-info-soft text-info",
   solid: "bg-accent text-on-accent",
   outline: "bg-transparent text-ink-2 shadow-[inset_0_0_0_1px_var(--line-strong)]",
 };
@@ -24,18 +27,40 @@ export interface ChipProps extends ComponentPropsWithoutRef<"span"> {
   tone?: ChipTone;
   /** Use the smaller chip radius instead of a full pill. */
   square?: boolean;
+  /** Leading decorative icon; wins over `statusIcon`. */
+  icon?: ReactNode;
+  /** Prefix `info`, `success`, `warning` and `danger` chips with their status glyph. */
+  statusIcon?: boolean;
 }
 
-export function Chip({ tone = "neutral", square, className, ...props }: ChipProps) {
+const statusTones = new Set<ChipTone>(["info", "success", "warning", "danger"]);
+
+export function Chip({
+  tone = "neutral",
+  square,
+  icon,
+  statusIcon: withStatusIcon,
+  className,
+  children,
+  ...props
+}: ChipProps) {
+  const leading =
+    icon ??
+    (withStatusIcon && statusTones.has(tone) ? statusIcon(tone as StatusTone, "size-3") : null);
+  const interactive = props.onClick !== undefined || props.role === "button";
   return (
     <span
       className={cn(
         "inline-flex h-6 max-w-full items-center gap-1.5 overflow-hidden whitespace-nowrap px-2.5 font-[650] text-[12px] leading-none [&_svg]:size-3",
         square ? "rounded-chip" : "rounded-badge",
         toneClasses[tone],
+        interactive && "in-data-[density=touch]:min-h-11",
         className,
       )}
       {...props}
-    />
+    >
+      {leading}
+      {children}
+    </span>
   );
 }

package/src/atoms/internal/status-icons.tsx

@@ -0,0 +1,17 @@
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import type { ReactNode } from "react";
+
+export type StatusTone = "info" | "success" | "warning" | "danger";
+
+const icons = {
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  danger: CircleAlert,
+} as const;
+
+/** Decorative glyph that pairs a status tone with a shape, so status never relies on color alone. */
+export function statusIcon(tone: StatusTone, className = "size-4"): ReactNode {
+  const Icon = icons[tone];
+  return <Icon aria-hidden="true" className={className} />;
+}

package/src/atoms/radio-group/radio-group.tsx

@@ -31,7 +31,7 @@ export function RadioGroup({ options, className, ...props }: RadioGroupProps) {
           <label
             key={option.value}
             htmlFor={id}
-            className="flex cursor-pointer items-start gap-2 rounded-control border-divider p-2.5 text-body has-[[data-state=checked]]:border-accent has-[[data-state=checked]]:shadow-[inset_0_0_0_1px_var(--accent)]"
+            className="flex cursor-pointer items-start gap-2 rounded-control border-divider p-2.5 text-body in-data-[density=touch]:min-h-11 has-[[data-state=checked]]:border-accent has-[[data-state=checked]]:shadow-[inset_0_0_0_1px_var(--accent)]"
           >
             <RadioGroupPrimitive.Item
               id={id}