@conductor-by-89soone/react 0.1.1 → 0.2.1

package/dist/action.js

@@ -1,2 +1,3 @@
-export { Button, IconButton } from './chunk-EA2W7T64.js';
+export { Button, IconButton } from './chunk-G7TRTZRR.js';
+import './chunk-NF3ZHADJ.js';
 import './chunk-WEIMKRZV.js';

package/dist/{chunk-FBQXGRI7.js → chunk-3YDK2JBK.js}

@@ -2,7 +2,7 @@ import { cx } from './chunk-WEIMKRZV.js';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as RadixSelect from '@radix-ui/react-select';
 import * as RadixSwitch from '@radix-ui/react-switch';
-import { createContext, forwardRef, useId, cloneElement, useContext, useEffect } from 'react';
+import { createContext, forwardRef, useId, useContext, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var FieldContext = createContext(null);
@@ -33,7 +33,7 @@ var Field = forwardRef(function Field2({ children, className, description, error
       required ? /* @__PURE__ */ jsx("span", { className: "cdt-field__required", "aria-hidden": "true", children: "*" }) : null
     ] }),
     description === void 0 ? null : /* @__PURE__ */ jsx("div", { id: descriptionId, className: "cdt-field__description", children: description }),
-    required ? cloneElement(children, { required }) : children,
+    children,
     error === void 0 ? null : /* @__PURE__ */ jsx("div", { id: errorId, className: "cdt-field__error", children: error })
   ] }) });
 });
@@ -63,24 +63,30 @@ var TextArea = forwardRef(function TextArea2({ "aria-describedby": ariaDescribed
   return /* @__PURE__ */ jsx("textarea", { ...props, ref, id: ownId ?? (field === null ? void 0 : control.id), rows, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": control.describedBy, "aria-invalid": ariaInvalid ?? (control.invalid || void 0), required: required ?? control.required, className: cx("cdt-textarea", variant === "glass" && "cdt-textarea--glass", control.invalid && "cdt-textarea--invalid", className) });
 });
 TextArea.displayName = "TextArea";
-var SelectTrigger = forwardRef(function SelectTrigger2({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className, id: ownId, invalid, size = "md", ...props }, ref) {
+var SelectTrigger = forwardRef(function SelectTrigger2({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className, id: ownId, invalid, size = "md", ...props }, ref) {
   const field = useContext(FieldContext);
   const control = useFieldControl(invalid, ariaDescribedBy);
-  return /* @__PURE__ */ jsx(RadixSelect.Trigger, { ...props, ref, id: ownId ?? (field === null ? void 0 : control.id), "aria-describedby": control.describedBy, "aria-invalid": ariaInvalid ?? (control.invalid || void 0), className: cx("cdt-select__trigger", size === "sm" && "cdt-select__trigger--sm", control.invalid && "cdt-select__trigger--invalid", className) });
+  const requiredAttribute = ariaRequired ?? (control.required ? true : void 0);
+  return /* @__PURE__ */ jsx(RadixSelect.Trigger, { ...props, ref, id: ownId ?? (field === null ? void 0 : control.id), "aria-describedby": control.describedBy, "aria-invalid": ariaInvalid ?? (control.invalid || void 0), ...requiredAttribute === void 0 ? {} : { "aria-required": requiredAttribute }, className: cx("cdt-select__trigger", size === "sm" && "cdt-select__trigger--sm", control.invalid && "cdt-select__trigger--invalid", className) });
 });
 SelectTrigger.displayName = "Select.Trigger";
 var SelectContent = forwardRef(function SelectContent2({ children, className, ...props }, ref) {
   return /* @__PURE__ */ jsx(RadixSelect.Portal, { children: /* @__PURE__ */ jsx(RadixSelect.Content, { ...props, ref, className: cx("cdt-select__content", className), children: /* @__PURE__ */ jsx(RadixSelect.Viewport, { children }) }) });
 });
 SelectContent.displayName = "Select.Content";
-var SelectItem = forwardRef(function SelectItem2({ children, className, ...props }, ref) {
+var SelectItem = forwardRef(function SelectItem2({ children, className, indicator = "\u2713", ...props }, ref) {
   return /* @__PURE__ */ jsxs(RadixSelect.Item, { ...props, ref, className: cx("cdt-select__item", className), children: [
     /* @__PURE__ */ jsx(RadixSelect.ItemText, { children }),
-    /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { className: "cdt-select__indicator", "aria-hidden": "true", children: "\u2713" })
+    /* @__PURE__ */ jsx(RadixSelect.ItemIndicator, { className: "cdt-select__indicator", "aria-hidden": "true", children: indicator })
   ] });
 });
 SelectItem.displayName = "Select.Item";
-var Select = { Root: RadixSelect.Root, Trigger: SelectTrigger, Value: RadixSelect.Value, Content: SelectContent, Item: SelectItem, Group: RadixSelect.Group, Label: RadixSelect.Label };
+function SelectRoot({ required, ...props }) {
+  const field = useContext(FieldContext);
+  return /* @__PURE__ */ jsx(RadixSelect.Root, { ...props, required: required ?? field?.required });
+}
+SelectRoot.displayName = "Select.Root";
+var Select = { Root: SelectRoot, Trigger: SelectTrigger, Value: RadixSelect.Value, Content: SelectContent, Item: SelectItem, Group: RadixSelect.Group, Label: RadixSelect.Label };
 var Switch = forwardRef(function Switch2({ className, ...props }, ref) {
   const field = useContext(FieldContext);
   const control = useFieldControl(void 0, props["aria-describedby"]);

package/dist/{chunk-PXSSKHWF.js → chunk-535YGQAR.js}

@@ -1,4 +1,5 @@
 import { cx } from './chunk-WEIMKRZV.js';
+import { STATUS_ICONS, SEVERITY_ICONS } from '@conductor-by-89soone/tokens';
 import { forwardRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -15,14 +16,14 @@ var StatusBadge = forwardRef(function StatusBadge2({ className, icon, label, sta
   const statusClass = status === "neutralEnd" ? "neutral-end" : status;
   return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-badge", "cdt-status-badge", `cdt-status-badge--${statusClass}`, className), children: [
     isMarker ? /* @__PURE__ */ jsx("span", { className: cx("cdt-status-badge__marker", status === "neutralEnd" && "cdt-status-badge__marker--neutral-end"), "aria-hidden": "true" }) : null,
-    /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", "data-cdt-icon": STATUS_ICONS[status], children: icon }),
     label
   ] });
 });
 StatusBadge.displayName = "StatusBadge";
 var SeverityTag = forwardRef(function SeverityTag2({ className, icon, label, severity, ...props }, ref) {
   return /* @__PURE__ */ jsxs("span", { ...props, ref, className: cx("cdt-badge", "cdt-severity-tag", `cdt-severity-tag--${severity}`, className), children: [
-    /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "cdt-badge__icon", "aria-hidden": "true", "data-cdt-icon": SEVERITY_ICONS[severity], children: icon }),
     label
   ] });
 });

package/dist/{chunk-EA2W7T64.js → chunk-G7TRTZRR.js}

@@ -1,3 +1,4 @@
+import { Spinner } from './chunk-NF3ZHADJ.js';
 import { cx } from './chunk-WEIMKRZV.js';
 import { forwardRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -33,7 +34,7 @@ var Button = forwardRef(function Button2({ blockedReason, className, disabled, i
         onClick?.(event);
       },
       children: [
-        iconStart === void 0 ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconStart }),
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "", "aria-hidden": "true" }) : iconStart === void 0 ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconStart }),
         children,
         iconEnd === void 0 ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: iconEnd })
       ]
@@ -42,7 +43,17 @@ var Button = forwardRef(function Button2({ blockedReason, className, disabled, i
 });
 Button.displayName = "Button";
 var IconButton = forwardRef(function IconButton2({ icon, size, ...props }, ref) {
-  return /* @__PURE__ */ jsx(Button, { ...props, ref, size, className: cx("cdt-btn--icon", size === "sm" && "cdt-btn--icon-sm", props.className), children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: icon }) });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      ref,
+      size,
+      iconStart: icon,
+      className: cx("cdt-btn--icon", props.className),
+      children: null
+    }
+  );
 });
 IconButton.displayName = "IconButton";
 

package/dist/{chunk-VLBBY4MW.js → chunk-R5BLKHR2.js}

@@ -8,6 +8,7 @@ var AppShell = forwardRef(function AppShell2({
   className,
   mainId = "cdt-main",
   nav,
+  navCloseLabel = "Close navigation",
   navOpen,
   onNavOpenChange,
   skipLinkLabel,
@@ -36,7 +37,7 @@ var AppShell = forwardRef(function AppShell2({
       ] })
     ] }),
     /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
-      /* @__PURE__ */ jsx("div", { className: "cdt-app-shell__overlay", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "cdt-app-shell__overlay", "aria-label": navCloseLabel }) }),
       /* @__PURE__ */ jsxs(RadixDialog.Content, { className: "cdt-app-shell__nav", "data-mobile": "", children: [
         /* @__PURE__ */ jsx(RadixDialog.Title, { className: "cdt-sr-only", children: "Navigation" }),
         nav

package/dist/form.d.ts

@@ -29,15 +29,38 @@ type SelectTriggerProps = ComponentPropsWithoutRef<typeof RadixSelect.Trigger> &
     readonly size?: "sm" | "md";
     readonly invalid?: boolean;
 };
+/** `indicator` matches `Checkbox`: the check glyph is a text character unless a consumer swaps it. */
+type SelectItemProps = ComponentPropsWithoutRef<typeof RadixSelect.Item> & {
+    readonly indicator?: ReactNode;
+};
+/**
+ * `Select.Root` that carries Field's `required` into Radix (PR #8 review P1).
+ *
+ * Radix configures the hidden form control from the **root**, not the trigger. Exporting
+ * `RadixSelect.Root` unchanged left `aria-required` on the trigger as the only signal: screen
+ * readers announced the state while the owning form still submitted with no selection. The
+ * documented `<Field required><Select.Root>…` composition therefore lost the constraint it
+ * looked like it was setting.
+ *
+ * An explicit `required` on the element still wins — the context is a default, not an override,
+ * the same shape `Switch` and the other controls already use.
+ */
+type SelectRootProps = ComponentPropsWithoutRef<typeof RadixSelect.Root>;
+declare function SelectRoot({ required, ...props }: SelectRootProps): ReactElement;
+declare namespace SelectRoot {
+    var displayName: string;
+}
 declare const Select: {
-    readonly Root: react.FC<RadixSelect.SelectProps>;
+    readonly Root: typeof SelectRoot;
     readonly Trigger: react.ForwardRefExoticComponent<Omit<RadixSelect.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
         readonly size?: "sm" | "md";
         readonly invalid?: boolean;
     } & react.RefAttributes<HTMLButtonElement>>;
     readonly Value: react.ForwardRefExoticComponent<RadixSelect.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
     readonly Content: react.ForwardRefExoticComponent<Omit<RadixSelect.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    readonly Item: react.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    readonly Item: react.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        readonly indicator?: ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
     readonly Group: react.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
     readonly Label: react.ForwardRefExoticComponent<RadixSelect.SelectLabelProps & react.RefAttributes<HTMLDivElement>>;
 };
@@ -50,4 +73,4 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<RadixCheckbox.Check
     readonly indicator?: ReactNode;
 } & react.RefAttributes<HTMLButtonElement>>;
 
-export { Checkbox, type CheckboxProps, Field, type FieldProps, Select, type SelectTriggerProps, Switch, type SwitchProps, TextArea, type TextAreaProps, TextField, type TextFieldProps };
+export { Checkbox, type CheckboxProps, Field, type FieldProps, Select, type SelectItemProps, type SelectRootProps, type SelectTriggerProps, Switch, type SwitchProps, TextArea, type TextAreaProps, TextField, type TextFieldProps };

package/dist/form.js

@@ -1,2 +1,2 @@
-export { Checkbox, Field, Select, Switch, TextArea, TextField } from './chunk-FBQXGRI7.js';
+export { Checkbox, Field, Select, Switch, TextArea, TextField } from './chunk-3YDK2JBK.js';
 import './chunk-WEIMKRZV.js';

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { Card, CardGrid, CardGridProps, CardProps, Panel, PanelProps } from './s
 export { Badge, BadgeProps, Severity, SeverityTag, SeverityTagProps, Status, StatusBadge, StatusBadgeProps } from './status.js';
 export { CodeBlock, CodeBlockProps, Kbd, KbdProps, Table, TableCellProps, TableHeaderCellProps, TableProps, Timeline, TimelineProps, TimelineStepProps } from './data.js';
 export { Dialog, DialogContentProps, Drawer, DrawerContentProps, DropdownMenu, DropdownMenuItemProps, Tooltip, TooltipContentProps } from './overlay.js';
-export { Checkbox, CheckboxProps, Field, FieldProps, Select, SelectTriggerProps, Switch, SwitchProps, TextArea, TextAreaProps, TextField, TextFieldProps } from './form.js';
+export { Checkbox, CheckboxProps, Field, FieldProps, Select, SelectItemProps, SelectTriggerProps, Switch, SwitchProps, TextArea, TextAreaProps, TextField, TextFieldProps } from './form.js';
 export { Banner, BannerProps, EmptyState, EmptyStateProps, Meter, MeterProps, ProgressRing, ProgressRingProps, Spinner, SpinnerProps } from './feedback.js';
 export { AppShell, AppShellProps, NavItem, NavLinkRenderProps, NavList, NavListProps, TopBar, TopBarProps } from './shell.js';
 import 'react';

package/dist/index.js

@@ -1,11 +1,11 @@
-export { Badge, SeverityTag, StatusBadge } from './chunk-PXSSKHWF.js';
+export { Badge, SeverityTag, StatusBadge } from './chunk-535YGQAR.js';
 export { Card, CardGrid, Panel } from './chunk-TUHWL5JC.js';
-export { Button, IconButton } from './chunk-EA2W7T64.js';
+export { Button, IconButton } from './chunk-G7TRTZRR.js';
 export { CodeBlock, Kbd, Table, Timeline } from './chunk-RBD5Z2LR.js';
 export { Banner, EmptyState, Meter, ProgressRing, Spinner } from './chunk-NF3ZHADJ.js';
-export { Checkbox, Field, Select, Switch, TextArea, TextField } from './chunk-FBQXGRI7.js';
+export { Checkbox, Field, Select, Switch, TextArea, TextField } from './chunk-3YDK2JBK.js';
 export { Dialog, Drawer, DropdownMenu, Tooltip } from './chunk-MR7FIZKV.js';
-export { AppShell, NavList, TopBar } from './chunk-VLBBY4MW.js';
+export { AppShell, NavList, TopBar } from './chunk-R5BLKHR2.js';
 export { cx } from './chunk-WEIMKRZV.js';
 import { PACKAGE_NAME as PACKAGE_NAME$1, CDT_PREFIX } from '@conductor-by-89soone/tokens';
 

package/dist/shell.d.ts

@@ -7,6 +7,8 @@ interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">
     readonly navOpen?: boolean;
     readonly onNavOpenChange?: (open: boolean) => void;
     readonly skipLinkLabel: string;
+    /** Accessible name of the mobile navigation scrim, which closes the drawer. */
+    readonly navCloseLabel?: string;
     readonly mainId?: string;
     readonly children: ReactNode;
 }

package/dist/shell.js

@@ -1,2 +1,2 @@
-export { AppShell, NavList, TopBar } from './chunk-VLBBY4MW.js';
+export { AppShell, NavList, TopBar } from './chunk-R5BLKHR2.js';
 import './chunk-WEIMKRZV.js';

package/dist/status.d.ts

@@ -11,6 +11,12 @@ declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttri
 type Status = "queued" | "running" | "waiting" | "success" | "partial" | "danger" | "neutralEnd";
 interface StatusBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
     readonly status: Status;
+    /**
+     * The status icon. Required: FR-CMP-004 AC-1 renders colour, icon and text as three channels,
+     * and Conductor bundles no icon set. `STATUS_ICONS[status]` from
+     * `@conductor-by-89soone/tokens` names the icon to pass; the rendered element repeats that name
+     * as `data-cdt-icon` so the choice is checkable from the DOM.
+     */
     readonly icon: ReactNode;
     readonly label: string;
 }
@@ -18,6 +24,7 @@ declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & re
 type Severity = "read" | "write" | "destructive" | "blocked";
 interface SeverityTagProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
     readonly severity: Severity;
+    /** The severity icon. `SEVERITY_ICONS[severity]` names it; see `StatusBadgeProps.icon`. */
     readonly icon: ReactNode;
     readonly label: string;
 }

package/dist/status.js

@@ -1,2 +1,2 @@
-export { Badge, SeverityTag, StatusBadge } from './chunk-PXSSKHWF.js';
+export { Badge, SeverityTag, StatusBadge } from './chunk-535YGQAR.js';
 import './chunk-WEIMKRZV.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conductor-by-89soone/react",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Accessible React primitives for Conductor.",
   "license": "MIT",
   "homepage": "https://89sooner.github.io/design-system/",
@@ -34,8 +34,8 @@
     "@radix-ui/react-select": "2.2.5",
     "@radix-ui/react-switch": "1.2.5",
     "@radix-ui/react-tooltip": "1.2.12",
-    "@conductor-by-89soone/css": "0.1.0",
-    "@conductor-by-89soone/tokens": "0.1.0"
+    "@conductor-by-89soone/css": "0.2.1",
+    "@conductor-by-89soone/tokens": "0.2.1"
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0 <2",