@colixsystems/widget-sdk 0.244.0 → 0.246.0

package/dist/radio-group-tokens.js

@@ -0,0 +1,62 @@
+// The values `<RadioGroup>` paints with. Its list and card variants are the
+// form controls' own `muted` scope (`resolveFormControlTokens`); the segmented
+// one is the `tabs` scope's segmented strip. Platform-free.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { CHECKBOX_SIZE, resolveFormControlTokens } from "./form-control-tokens.js";
+import { resolveTabsTokens } from "./tabs-tokens.js";
+
+export const RADIO_DOT_SIZE = 8;
+// Narrow enough for two cards side by side in a phone-width panel.
+export const RADIO_CARD_MIN_WIDTH = 140;
+
+/**
+ * Resolve one radio group from the workspace theme.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ */
+export function resolveRadioGroupTokens(theme) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const colors = base.colors || DEFAULT_THEME_TOKENS.colors;
+  const spacing = base.spacing || DEFAULT_THEME_TOKENS.spacing;
+  const typography = base.typography || DEFAULT_THEME_TOKENS.typography;
+  const field = resolveFormControlTokens(base);
+  return {
+    ...field,
+    // A picked row lifts out of the muted panel onto the surface.
+    pickedBackground: colors.surface,
+    descriptionColor: colors.onSurfaceMuted,
+    descriptionSize: typography.sizes.sm,
+    optionGap: spacing.sm,
+    cardPadding: spacing.md,
+    segmented: resolveTabsTokens(base, { style: "segmented" }),
+  };
+}
+
+/**
+ * The round mark of one option: the input surface, filled with the accent
+ * and a dot when picked, so it reads as the `<Checkbox>` box's sibling.
+ *
+ * @param {object} t — resolved radio group tokens.
+ * @param {{checked: boolean, invalid?: boolean}} state
+ */
+export function radioMarkStyles(t, { checked, invalid = false }) {
+  return {
+    ring: {
+      width: CHECKBOX_SIZE,
+      height: CHECKBOX_SIZE,
+      borderRadius: CHECKBOX_SIZE / 2,
+      borderWidth: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      borderColor: checked ? t.accent : invalid ? t.errorColor : t.borderColor,
+      backgroundColor: checked ? t.accent : t.background,
+    },
+    dot: {
+      width: RADIO_DOT_SIZE,
+      height: RADIO_DOT_SIZE,
+      borderRadius: RADIO_DOT_SIZE / 2,
+      backgroundColor: t.onAccent,
+    },
+  };
+}

package/dist/radio-group-view.js

@@ -0,0 +1,262 @@
+// The ONE implementation behind the `<RadioGroup>` SDK primitive. The platform
+// bindings (`radio-group.js` / `radio-group.native.js`) differ only in where
+// the primitives come from, so the hosts cannot drift.
+//
+// Widgets each drew their own pick-one list, marking the choice with a glyph,
+// an icon or a tab role. This one has the radio role and the app's look.
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { Icon } from "./icon.js";
+import { CHECKBOX_SIZE, CONTROL_MIN_TARGET, focusHaloStyle } from "./form-control-tokens.js";
+import {
+  errorMessage,
+  hasNote,
+  isShown,
+  isText,
+  needsFrame,
+  spaceActivates,
+  spokenLabel,
+} from "./form-control-logic.js";
+import { makeFieldFrame } from "./form-control-view.js";
+import { RADIO_CARD_MIN_WIDTH, radioMarkStyles, resolveRadioGroupTokens } from "./radio-group-tokens.js";
+import {
+  arrowTargetIndex,
+  radioGroupVariant,
+  tabStopIndex,
+} from "./radio-group-logic.js";
+import { TAB_ITEM_LAYOUT, segmentedStripStyles, tabLabelStyle } from "./tabs-tokens.js";
+
+const h = React.createElement;
+
+function groupStyle(kind, t, theme, invalid) {
+  if (kind === "segmented") {
+    const strip = segmentedStripStyles(t.segmented, theme);
+    return [
+      strip.bar,
+      strip.content,
+      // A form row's control spans the row; its segments share it evenly.
+      { flexDirection: "row", alignSelf: "stretch", borderWidth: 1, borderColor: "transparent" },
+      invalid ? { borderColor: t.errorColor } : null,
+    ];
+  }
+  if (kind === "card") return { flexDirection: "row", flexWrap: "wrap", gap: t.optionGap };
+  return {
+    borderWidth: 1,
+    borderColor: invalid ? t.errorColor : t.borderColor,
+    borderRadius: t.radius,
+    backgroundColor: t.background,
+    overflow: "hidden",
+  };
+}
+
+function optionStyle(kind, t, theme, { checked, invalid, focused, web }) {
+  if (kind === "segmented") {
+    return [
+      TAB_ITEM_LAYOUT,
+      segmentedStripStyles(t.segmented, theme).item(checked),
+      { flexGrow: 1, flexShrink: 1, flexBasis: 0 },
+      // The segment's own border is its lift, so focus draws outside it.
+      focused && web
+        ? { outlineWidth: 2, outlineStyle: "solid", outlineColor: t.focusColor, outlineOffset: 1 }
+        : null,
+    ];
+  }
+  const row = {
+    flexDirection: "row",
+    alignItems: kind === "card" ? "flex-start" : "center",
+    gap: t.optionGap,
+    minHeight: CONTROL_MIN_TARGET,
+  };
+  if (kind === "card") {
+    return [
+      row,
+      {
+        flexGrow: 1,
+        flexBasis: RADIO_CARD_MIN_WIDTH,
+        padding: t.cardPadding,
+        borderWidth: 1,
+        borderRadius: t.radius,
+        borderColor: checked ? t.accent : invalid ? t.errorColor : t.borderColor,
+        backgroundColor: checked ? t.pickedBackground : t.background,
+      },
+    ];
+  }
+  return [
+    row,
+    { paddingHorizontal: t.paddingHorizontal, paddingVertical: t.paddingVertical },
+    checked ? { backgroundColor: t.pickedBackground } : null,
+  ];
+}
+
+/**
+ * Bind the shared radio group to one platform's primitives.
+ *
+ * @param {{View: any, Text: any, Pressable: any, Platform: any}} rn
+ */
+export function makeRadioGroup(rn) {
+  const { View, Text, Pressable, Platform } = rn;
+  const FieldFrame = makeFieldFrame(rn);
+  const web = Boolean(Platform && Platform.OS === "web");
+
+  function RadioMark({ t, checked, invalid, focused }) {
+    const mark = radioMarkStyles(t, { checked, invalid });
+    return h(
+      View,
+      { style: focusHaloStyle(t, focused, CHECKBOX_SIZE / 2) },
+      h(View, { style: mark.ring }, checked ? h(View, { style: mark.dot }) : null),
+    );
+  }
+
+  function OptionText({ t, option, kind }) {
+    const label = isText(option.label)
+      ? h(
+          Text,
+          {
+            style: {
+              color: t.textColor,
+              fontFamily: t.fontFamily,
+              fontSize: t.fontSize,
+              ...(kind === "card" ? { fontWeight: "600" } : null),
+            },
+          },
+          option.label,
+        )
+      : option.label;
+    const description = isText(option.description)
+      ? h(
+          Text,
+          { style: { color: t.descriptionColor, fontFamily: t.fontFamily, fontSize: t.descriptionSize } },
+          option.description,
+        )
+      : isShown(option.description)
+        ? option.description
+        : null;
+    return h(View, { style: { flexGrow: 1, flexShrink: 1, gap: 2 } }, label, description);
+  }
+
+  function optionContent({ t, theme, kind, option, checked, invalid, focused }) {
+    if (kind === "segmented") {
+      const s = t.segmented;
+      return [
+        option.icon
+          ? h(Icon, { key: "icon", name: option.icon, size: 16, color: checked ? s.activeTextColor : s.textColor })
+          : null,
+        h(Text, { key: "label", numberOfLines: 1, style: tabLabelStyle(s, theme, checked) }, option.label),
+      ];
+    }
+    return [
+      h(RadioMark, { key: "mark", t, checked, invalid, focused }),
+      option.icon
+        ? h(Icon, { key: "icon", name: option.icon, size: 18, color: checked ? t.accent : t.descriptionColor })
+        : null,
+      h(OptionText, { key: "text", t, option, kind }),
+    ];
+  }
+
+  const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
+    const {
+      options,
+      value,
+      onValueChange,
+      variant,
+      label,
+      helper,
+      error,
+      disabled = false,
+      accessibilityLabel,
+      style,
+      containerStyle,
+      ...rest
+    } = props;
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const t = resolveRadioGroupTokens(theme);
+    const kind = radioGroupVariant(variant);
+    const list = Array.isArray(options) ? options.filter((o) => o && typeof o === "object") : [];
+    const nodes = React.useRef([]);
+    const [focusedIndex, setFocusedIndex] = React.useState(-1);
+    const noteId = React.useId();
+    const invalid = isShown(error);
+    const noted = hasNote({ helper, error });
+    const framed = needsFrame({ label, helper, error });
+    const tabStop = tabStopIndex(list, value, disabled);
+
+    const pick = (option) => {
+      if (disabled || option.disabled || option.value === value) return;
+      if (typeof onValueChange === "function") onValueChange(option.value, option);
+    };
+    const keyHandler = (option, index) => (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      const target = arrowTargetIndex(list, index, event.key);
+      if (target === -1) return spaceActivates(() => pick(option))(event);
+      event.preventDefault();
+      pick(list[target]);
+      const node = nodes.current[target];
+      if (node && typeof node.focus === "function") node.focus();
+    };
+
+    const renderOption = (option, index) => {
+      const checked = option.value === value;
+      const optionDisabled = disabled || Boolean(option.disabled);
+      const focused = focusedIndex === index;
+      return h(
+        Pressable,
+        {
+          key: String(option.value),
+          ref: (node) => {
+            nodes.current[index] = node;
+          },
+          onPress: () => pick(option),
+          ...(optionDisabled ? null : { onKeyDown: keyHandler(option, index) }),
+          onFocus: () => setFocusedIndex(index),
+          onBlur: () => setFocusedIndex((at) => (at === index ? -1 : at)),
+          disabled: optionDisabled,
+          // accessibilityRole + aria-*: the pair that announces on both hosts.
+          accessibilityRole: "radio",
+          "aria-checked": checked,
+          "aria-disabled": optionDisabled,
+          accessibilityLabel: option.accessibilityLabel,
+          testID: option.testID,
+          // One tab stop per group on the web; the arrows move between options.
+          ...(web ? { tabIndex: index === tabStop ? 0 : -1 } : null),
+          style: ({ pressed }) => [
+            optionStyle(kind, t, theme, { checked, invalid, focused, web }),
+            pressed && !optionDisabled ? { opacity: 0.7 } : null,
+            option.disabled && !disabled ? { opacity: t.disabledOpacity } : null,
+          ],
+        },
+        ...optionContent({ t, theme, kind, option, checked, invalid, focused }),
+      );
+    };
+
+    const group = h(
+      View,
+      {
+        ...rest,
+        ref,
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: spokenLabel(accessibilityLabel, label),
+        "aria-disabled": disabled,
+        ...(invalid ? { "aria-invalid": true } : null),
+        ...(noted ? { "aria-describedby": noteId } : null),
+        style: [
+          groupStyle(kind, t, theme, invalid),
+          // The frame dims a framed group as a whole.
+          disabled && !framed ? { opacity: t.disabledOpacity } : null,
+          style,
+        ],
+      },
+      ...list.map(renderOption),
+    );
+    if (!framed) return group;
+    return h(
+      FieldFrame,
+      { t, label, helper, error: errorMessage(error), disabled, noteId, style: containerStyle },
+      group,
+    );
+  });
+
+  RadioGroup.displayName = "RadioGroup";
+  return RadioGroup;
+}

package/dist/radio-group.js

@@ -0,0 +1,12 @@
+// `<RadioGroup>` (web). Binds ./radio-group-view.js to react-native-web; see
+// ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makeRadioGroup } from "./radio-group-view.js";
+
+export const RadioGroup = makeRadioGroup({
+  View: ReactNative.View,
+  Text: ReactNative.Text,
+  Pressable: ReactNative.Pressable,
+  Platform: ReactNative.Platform,
+});

package/dist/radio-group.native.js

@@ -0,0 +1,7 @@
+// `<RadioGroup>` (native). Binds ./radio-group-view.js to React Native's own
+// primitives; only the import differs from ./radio-group.js.
+
+import { View, Text, Pressable, Platform } from "react-native";
+import { makeRadioGroup } from "./radio-group-view.js";
+
+export const RadioGroup = makeRadioGroup({ View, Text, Pressable, Platform });

package/dist/select-view.js

@@ -13,10 +13,9 @@ import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
 import { Icon } from "./icon.js";
 import { TEXT_FIELD_TOKEN_NAMES } from "./text-field-tokens.js";
 import {
-  CONTROL_MIN_TARGET,
   FIELD_OUTLINE_OFF,
   fieldStateStyle,
-  nextOptionIndex,
+  optionRowStyle,
   resolveFormControlTokens,
   selectedOption,
 } from "./form-control-tokens.js";
@@ -25,10 +24,11 @@ import {
   hasNote,
   isShown,
   isText,
+  optionKeyDown,
   shareRef,
-  spaceActivates,
   spokenLabel,
 } from "./form-control-logic.js";
+import { popoverPanelStyle } from "./popover-tokens.js";
 import { makeFieldFrame } from "./form-control-view.js";
 import { checkboxBox } from "./checkbox-view.js";
 import {
@@ -43,7 +43,6 @@ import {
 } from "./select-logic.js";
 
 const h = React.createElement;
-const NAVIGATION_KEYS = ["ArrowDown", "ArrowUp", "Home", "End"];
 // Wide enough that no picked chip shrinks while it is measured.
 const MEASURE_SPAN = 10000;
 // A compact chip that fits the field's own line, so the trigger keeps its height.
@@ -123,33 +122,23 @@ export function makeSelect(rn) {
                     }
                   },
                   onPress: pick,
-                  onKeyDown: (event) => {
-                    if (NAVIGATION_KEYS.includes(event.key)) {
-                      event.preventDefault();
-                      focusNode(nodes.current[nextOptionIndex(options, index, event.key)]);
-                      return;
-                    }
-                    spaceActivates(pick)(event);
-                  },
+                  onKeyDown: optionKeyDown({
+                    options,
+                    index,
+                    focusAt: (next) => focusNode(nodes.current[next]),
+                    activate: pick,
+                  }),
                   disabled: option.disabled,
                   role: "option",
                   "aria-selected": selected,
                   "aria-disabled": !!option.disabled,
                   testID: option.testID,
-                  style: ({ pressed }) => [
-                    {
-                      flexDirection: "row",
-                      alignItems: "center",
+                  style: ({ pressed }) =>
+                    optionRowStyle(t, {
+                      pressed,
+                      disabled: option.disabled,
                       justifyContent: multiple ? "flex-start" : "space-between",
-                      gap: t.rowGap,
-                      minHeight: CONTROL_MIN_TARGET,
-                      paddingHorizontal: t.paddingHorizontal,
-                      paddingVertical: t.paddingVertical,
-                      borderRadius: t.radius,
-                    },
-                    pressed ? { opacity: 0.7 } : null,
-                    option.disabled ? { opacity: t.disabledOpacity } : null,
-                  ],
+                    }),
                 },
                 multiple ? checkboxBox(View, t, { checked: selected }) : null,
                 h(
@@ -417,12 +406,7 @@ export function makeSelect(rn) {
           size: "sm",
           accessibilityLabel: isText(sheetTitle) ? String(sheetTitle) : name,
           ...(closeAccessibilityLabel ? { closeAccessibilityLabel } : null),
-          style: {
-            backgroundColor: t.popover.background,
-            borderWidth: 1,
-            borderColor: t.popover.borderColor,
-            padding: t.rowGap,
-          },
+          style: { ...popoverPanelStyle(t.popover, "dialog"), padding: t.rowGap },
         },
         h(OptionSheet, {
           t,

package/dist/tabs-tokens.js

@@ -67,3 +67,62 @@ export function resolveTabsTokens(theme, overrides) {
     rule: colors.border,
   };
 }
+
+const SEGMENT_INSET = 4;
+
+/**
+ * The segmented strip's surfaces: the muted bar, its inset and each segment.
+ * `<Tabs>` and a segmented `<RadioGroup>` both draw from it, so they match.
+ * A concentric outer radius keeps the inset chip's corners parallel, and the
+ * active segment is outlined as well as lifted: a shadow alone disappears on
+ * a dark theme.
+ *
+ * @param {object} t — resolved tab tokens.
+ * @param {object} theme — the resolved workspace theme.
+ */
+export function segmentedStripStyles(t, theme) {
+  const elevation = (theme && theme.elevation) || DEFAULT_THEME_TOKENS.elevation;
+  return {
+    bar: {
+      backgroundColor: t.barBackground,
+      borderRadius: t.radius + 2,
+      alignSelf: "flex-start",
+      maxWidth: "100%",
+    },
+    content: { padding: SEGMENT_INSET, gap: SEGMENT_INSET },
+    item: (active) => ({
+      borderRadius: t.radius,
+      borderWidth: 1,
+      borderColor: active ? t.rule : "transparent",
+      ...(active ? { backgroundColor: t.activeSurface, ...(elevation.sm || {}) } : null),
+    }),
+  };
+}
+
+/** One tab or segment's box, before its style's own surface. */
+export const TAB_ITEM_LAYOUT = Object.freeze({
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  minHeight: 44,
+  paddingHorizontal: 12,
+  paddingVertical: 8,
+});
+
+/**
+ * A tab or segment's label.
+ *
+ * @param {object} t — resolved tab tokens.
+ * @param {object} theme — the resolved workspace theme.
+ * @param {boolean} active
+ */
+export function tabLabelStyle(t, theme, active) {
+  const typography = (theme && theme.typography) || DEFAULT_THEME_TOKENS.typography;
+  return {
+    fontFamily: typography.fontFamily,
+    fontSize: typography.sizes.sm,
+    fontWeight: active ? "600" : "500",
+    color: active ? t.activeTextColor : t.textColor,
+  };
+}

package/dist/tabs-view.js

@@ -10,13 +10,15 @@ import React from "react";
 import { useHostTheme } from "./hooks.js";
 import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
 import { Icon } from "./icon.js";
-import { resolveTabsTokens } from "./tabs-tokens.js";
-
-const SEGMENT_INSET = 4;
+import {
+  TAB_ITEM_LAYOUT,
+  resolveTabsTokens,
+  segmentedStripStyles,
+  tabLabelStyle,
+} from "./tabs-tokens.js";
 
 function stripStyles(t, theme) {
   const spacing = theme.spacing || DEFAULT_THEME_TOKENS.spacing;
-  const elevation = theme.elevation || DEFAULT_THEME_TOKENS.elevation;
   if (t.style === "pill") {
     // An idle chip is outlined: a muted fill vanishes on a white card.
     return {
@@ -42,26 +44,7 @@ function stripStyles(t, theme) {
       }),
     };
   }
-  // A concentric outer radius keeps the inset chip's corners parallel. The
-  // bar hugs its segments, and the active one is outlined as well as lifted
-  // because a shadow alone disappears on a dark theme.
-  return {
-    bar: {
-      backgroundColor: t.barBackground,
-      borderRadius: t.radius + 2,
-      alignSelf: "flex-start",
-      maxWidth: "100%",
-    },
-    content: { padding: SEGMENT_INSET, gap: SEGMENT_INSET },
-    item: (active) => ({
-      borderRadius: t.radius,
-      borderWidth: 1,
-      borderColor: active ? t.rule : "transparent",
-      ...(active
-        ? { backgroundColor: t.activeSurface, ...(elevation.sm || {}) }
-        : null),
-    }),
-  };
+  return segmentedStripStyles(t, theme);
 }
 
 /**
@@ -98,7 +81,6 @@ export function makeTabs(rn) {
       textColor,
       radius,
     });
-    const typography = theme.typography || DEFAULT_THEME_TOKENS.typography;
     const strip = stripStyles(t, theme);
 
     return React.createElement(
@@ -130,15 +112,7 @@ export function makeTabs(rn) {
             "aria-disabled": !!item.disabled,
             testID: item.testID,
             style: [
-              {
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: 6,
-                minHeight: 44,
-                paddingHorizontal: 12,
-                paddingVertical: 8,
-              },
+              TAB_ITEM_LAYOUT,
               strip.item(active),
               item.disabled ? { opacity: 0.5 } : null,
             ],
@@ -148,15 +122,7 @@ export function makeTabs(rn) {
             : null,
           React.createElement(
             Text,
-            {
-              numberOfLines: 1,
-              style: {
-                fontFamily: typography.fontFamily,
-                fontSize: typography.sizes.sm,
-                fontWeight: active ? "600" : "500",
-                color: ink,
-              },
-            },
+            { numberOfLines: 1, style: tabLabelStyle(t, theme, active) },
             item.label,
           ),
         );