@cloudgrid-io/ui 0.27.0 → 0.27.2

package/dist/ui/radio-group.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "../lib/cloudgrid-cn.js";
+/**
+ * One of a set. `RadioGroup` is the set, `Radio` is the control, and
+ * `RadioOption` is the row the visibility editor is built out of: control,
+ * label, one line of description, and a slot that appears only while that
+ * option is the selected one (#226).
+ *
+ * ## Why this is Base UI's radio and not a styled input
+ *
+ * A radio group has ONE tab stop and roving focus: arrows move the selection,
+ * Space selects, Tab leaves the group. A column of `<input type="radio">`
+ * elements with the same `name` gets that from the browser; a column of styled
+ * divs does not, and the difference is invisible in a screenshot and in review.
+ * `OnboardingQuestion` (#119) already made this argument for its `single` mode
+ * and reached for the same primitive.
+ *
+ * ## The option row, and the name it must NOT have
+ *
+ * `RadioOption` wraps the control and both lines of text in a `<label>`, which
+ * is what makes the whole row clickable rather than the 16px circle.
+ *
+ * It then passes `aria-labelledby` and `aria-describedby` EXPLICITLY, and that
+ * is the load-bearing part. Base UI names a `role="radio"` span by looking for
+ * an associated `<label>` and using its id, which is right for its own demo
+ * where the label holds one word. Here the label holds the description too, so
+ * the fallback would announce "These spaces. Members of the spaces you choose."
+ * as the option's NAME on every row. The name is the label, the description is a
+ * description, and nothing goes red if they are collapsed into one.
+ *
+ * ## The child slot is a sibling, so the group has to carry its value
+ *
+ * The nested space list in the frame sits UNDER its option, indented, not inside
+ * the control. So neither `Radio.Root`'s state-function `className` nor its
+ * `render` prop can reach it, and Base UI does not export the group's context.
+ *
+ * `RadioGroup` mirrors the selected value into a context of its own for that one
+ * question: is this option the selected one. The Base UI group stays the source
+ * of truth in both directions — pass `value` for a controlled group,
+ * `defaultValue` for an uncontrolled one — so the mirror never becomes a second
+ * place the answer lives. Same shape `OnboardingQuestion` uses for its Continue
+ * button.
+ *
+ * The slot is not rendered at all when the option is unselected, rather than
+ * rendered and hidden. A hidden slot keeps its checkboxes in the tab order,
+ * which is a set of controls a keyboard can reach and a reader cannot see.
+ *
+ * ## Tokens, and the one utility this deliberately does not copy
+ *
+ * `checkbox.tsx` grows its hit area with `after:-inset-x-3 after:-inset-y-2`.
+ * That is right for a checkbox sitting on its own and wrong here: the rows in
+ * this frame are about 37px apart, so a 32px invisible overlay per control
+ * overlaps its neighbour and a click near the boundary selects the wrong option.
+ * The row is the target instead, and it is wider and taller than any overlay.
+ *
+ * Colour comes from `--primary` through the shadcn bridge, which is declared per
+ * surface scope, so the selected ring and dot are brand purple on the page and
+ * brand lime on both dark grounds. Selection is never colour alone: the dot is a
+ * shape that is either there or not.
+ */
+/**
+ * The selected value, for `RadioOption`'s slot and nothing else.
+ *
+ * `undefined` means "no RadioGroup above me", which is also what "nothing
+ * selected" looks like. Both answer `false` to every option, which is the
+ * correct behaviour for a `Radio` used outside a group.
+ */
+const RadioGroupValueContext = React.createContext(undefined);
+function RadioGroup({ className, value, defaultValue, onValueChange, ...props }) {
+    // The mirror. Initialised from `defaultValue` and updated on every change, so
+    // an uncontrolled group can still answer the slot's question. A controlled
+    // group ignores it entirely: `value` is read first.
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const selected = value !== undefined ? value : uncontrolled;
+    return (_jsx(RadioGroupValueContext.Provider, { value: selected, children: _jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn("grid gap-3", className), value: value, defaultValue: defaultValue, onValueChange: (next, details) => {
+                setUncontrolled(next);
+                onValueChange?.(next, details);
+            }, ...props }) }));
+}
+function Radio({ className, ...props }) {
+    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio", className: cn("peer flex size-4 shrink-0 items-center justify-center rounded-pill border border-input p-0 transition-colors outline-none group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:border-primary data-checked:text-primary data-disabled:cursor-not-allowed data-disabled:opacity-50", className), ...props, children: _jsx(RadioPrimitive.Indicator, { "data-slot": "radio-indicator", className: "size-2 shrink-0 rounded-pill bg-current" }) }));
+}
+function RadioOption({ value, label, description, disabled, className, children, ...props }) {
+    const selected = React.useContext(RadioGroupValueContext);
+    const checked = selected === value;
+    const id = React.useId();
+    const labelId = `${id}-label`;
+    const descriptionId = `${id}-description`;
+    return (_jsxs("div", { "data-slot": "radio-option", "data-checked": checked ? "" : undefined, "data-disabled": disabled ? "" : undefined, className: cn("grid gap-1.5", className), ...props, children: [_jsxs("label", { className: cn("flex cursor-pointer items-start gap-2.5 select-none", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(Radio, { value: value, disabled: disabled, "aria-labelledby": labelId, "aria-describedby": description ? descriptionId : undefined, 
+                        // Optically centred on the label's first line rather than its box.
+                        className: "mt-0.5" }), _jsxs("span", { className: "grid gap-0.5", children: [_jsx("span", { id: labelId, "data-slot": "radio-option-label", className: "text-body-sm text-ink", children: label }), description ? (_jsx("span", { id: descriptionId, "data-slot": "radio-option-description", className: "text-caption text-faint", children: description })) : null] })] }), children && checked ? (_jsx("div", { "data-slot": "radio-option-detail", 
+                // Indented to the label's edge: the control is 16px and the gap is
+                // 10px, so the text column starts at 26px.
+                className: "grid gap-2 ps-[26px]", children: children })) : null] }));
+}
+export { Radio, RadioGroup, RadioOption };
+//# sourceMappingURL=radio-group.js.map

package/dist/ui/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../src/ui/radio-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAE9E,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AAEH;;;;;;GAMG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,aAAa,CAAU,SAAS,CAAC,CAAA;AAEtE,SAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,aAAa,EACb,GAAG,KAAK,EACkB;IAC1B,8EAA8E;IAC9E,2EAA2E;IAC3E,oDAAoD;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,YAAY,CAAC,CAAA;IAC7E,MAAM,QAAQ,GAAG,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAA;IAE3D,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAC9C,KAAC,mBAAmB,iBACR,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;gBAC/B,eAAe,CAAC,IAAI,CAAC,CAAA;gBACrB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;YAChC,CAAC,KACG,KAAK,GACT,GAC8B,CACnC,CAAA;AACH,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA6B;IAC/D,OAAO,CACL,KAAC,cAAc,CAAC,IAAI,iBACR,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,2dAA2d,EAC3d,SAAS,CACV,KACG,KAAK,YAET,KAAC,cAAc,CAAC,SAAS,iBACb,iBAAiB,EAC3B,SAAS,EAAC,yCAAyC,GACnD,GACkB,CACvB,CAAA;AACH,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAcT;IACC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAA;IACzD,MAAM,OAAO,GAAG,QAAQ,KAAK,KAAK,CAAA;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,GAAG,EAAE,QAAQ,CAAA;IAC7B,MAAM,aAAa,GAAG,GAAG,EAAE,cAAc,CAAA;IAEzC,OAAO,CACL,4BACY,cAAc,kBAGV,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,mBACvB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACxC,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,KACpC,KAAK,aAET,iBACE,SAAS,EAAE,EAAE,CACX,qDAAqD,EACrD,QAAQ,IAAI,+BAA+B,CAC5C,aAED,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,qBACD,OAAO,sBACN,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;wBACzD,mEAAmE;wBACnE,SAAS,EAAC,QAAQ,GAClB,EACF,gBAAM,SAAS,EAAC,cAAc,aAC5B,eACE,EAAE,EAAE,OAAO,eACD,oBAAoB,EAC9B,SAAS,EAAC,uBAAuB,YAEhC,KAAK,GACD,EACN,WAAW,CAAC,CAAC,CAAC,CACb,eACE,EAAE,EAAE,aAAa,eACP,0BAA0B,EACpC,SAAS,EAAC,yBAAyB,YAElC,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,IACH,IACD,EAEP,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,CACrB,2BACY,qBAAqB;gBAC/B,mEAAmE;gBACnE,2CAA2C;gBAC3C,SAAS,EAAC,sBAAsB,YAE/B,QAAQ,GACL,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAA;AACH,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/ui",
-  "version": "0.27.0",
+  "version": "0.27.2",
   "description": "CloudGrid design system: React components, brand design tokens, Tailwind theme, self-hosted fonts.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",