@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/commonjs/components/ChoiceGroup/ChoiceGroup.js

@@ -0,0 +1,336 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChoiceGroup = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../hooks/index.js");
+var _index2 = require("../../theme/index.js");
+var _index3 = require("../../utils/index.js");
+var _color = require("../../utils/color.js");
+var _corners = require("../../utils/corners.js");
+var _slotIcon = require("../AppIcon/slotIcon.js");
+var _RadioDot = require("../Radio/RadioDot.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ChoiceGroup — headless single-choice group with templated options.
+ *
+ * The component owns the BEHAVIOUR: selection state (controlled or
+ * uncontrolled), per-option press handling, haptics, radio/radiogroup a11y,
+ * and row/column/wrap layout. Each option's LOOK comes from a template:
+ *
+ *   - `card` (default): a bordered card — label (+ optional icon /
+ *     description) with a RadioDot after the content (or before it, with
+ *     `indicatorPosition="leading"`), tinted with the option's colour when
+ *     selected. The "Hot / Warm / Cold" status-picker pattern works
+ *     zero-config.
+ *   - `chip`: an icon-and-label pill that hugs its content. Selection is the
+ *     pill itself, edged and tinted in the option's colour with the label and
+ *     icon in that colour; no dot, no description. The role / filter pattern.
+ *   - `renderOption`: full custom JSX per option. Receives
+ *     `{ option, index, selected, pressed, disabled, color }`; press handling
+ *     and a11y stay managed. Embed the exported RadioDot to keep the standard
+ *     indicator inside a custom layout.
+ *
+ * Cross-option visuals (a single indicator sliding BETWEEN options, joined
+ * segments) are out of scope by design — that's SegmentedControl.
+ *
+ * Same data contract as Select: `ChoiceOption[]` by default, `getOption*`
+ * accessors for custom shapes.
+ */
+
+/** Which side of the card the radio dot sits on. */
+
+/** Everything a custom option template needs to render one option. */
+
+const sizeTokens = {
+  sm: {
+    paddingHorizontal: 10,
+    chipPaddingHorizontal: 12,
+    paddingVertical: 6,
+    fontSize: 13,
+    minHeight: 32,
+    iconSize: 14
+  },
+  md: {
+    paddingHorizontal: 12,
+    chipPaddingHorizontal: 16,
+    paddingVertical: 8,
+    fontSize: 15,
+    minHeight: 40,
+    iconSize: 16
+  },
+  lg: {
+    paddingHorizontal: 16,
+    chipPaddingHorizontal: 20,
+    paddingVertical: 11,
+    fontSize: 16,
+    minHeight: 48,
+    iconSize: 18
+  }
+};
+
+// `unknown` keeps the forwardRef signature non-generic — same pattern as
+// Select/InlineSelect; re-type at the call site via `ChoiceGroupProps<T>`.
+const ChoiceGroup = exports.ChoiceGroup = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled,
+    getOptionDescription,
+    getOptionIcon,
+    getOptionColor,
+    value,
+    defaultValue,
+    onChange,
+    renderOption,
+    variant = 'card',
+    indicatorPosition = 'trailing',
+    direction = 'row',
+    gap,
+    wrap = false,
+    fullWidth,
+    disabled = false,
+    size = 'md',
+    haptic,
+    accessibilityLabel,
+    style,
+    optionStyle,
+    testID
+  } = props;
+  const theme = (0, _index2.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const dims = sizeTokens[size];
+  const labelOf = (0, _react.useCallback)(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
+  const valueOf = (0, _react.useCallback)(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
+  const disabledOf = (0, _react.useCallback)(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
+  const descriptionOf = (0, _react.useCallback)(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
+  const iconOf = (0, _react.useCallback)(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
+  const colorOf = (0, _react.useCallback)(o => getOptionColor ? getOptionColor(o) : o.color, [getOptionColor]);
+  const [current, setCurrent] = (0, _index.useControllableState)({
+    value,
+    defaultValue: defaultValue ?? undefined,
+    onChange: onChange
+  });
+  const handleSelect = (0, _react.useCallback)(option => {
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index3.triggerHaptic)(h);
+    }
+    setCurrent(valueOf(option));
+  }, [haptic, setCurrent, valueOf]);
+  const stretch = fullWidth ?? (variant === 'card' && direction === 'row' && !wrap);
+  const selectedFillOpacity = theme.components.choiceGroup?.selectedFillOpacity ?? 0.12;
+  const cardRadius = theme.components.choiceGroup?.borderRadius ?? theme.radius.md;
+
+  /**
+   * Edge and fill of a built-in option. Disabled is painted explicitly, in
+   * the theme's disabled surface with a grey edge and no opacity on top:
+   * the disabled ink alone is the cue, and a selected option that is also
+   * disabled gives its colour up so it reads as disabled first.
+   */
+  const surfaceFor = (selected, optDisabled, color) => {
+    if (optDisabled) {
+      return {
+        borderColor: theme.colors.border.primary,
+        backgroundColor: theme.colors.surface.disabled
+      };
+    }
+    return {
+      borderColor: selected ? color : theme.colors.border.primary,
+      backgroundColor: selected ? (0, _color.tintOf)(color, selectedFillOpacity, theme.colors.surface.selected) : theme.colors.background.primary
+    };
+  };
+
+  /**
+   * The option's icon in its current ink. A bare name is drawn bold while
+   * selected, the same pairing the tab bar uses, so "selected" reads the
+   * same way everywhere in the library.
+   */
+  const renderIcon = (option, selected, color, optDisabled) => {
+    const icon = iconOf(option);
+    if (icon == null) {
+      return null;
+    }
+    const resolved = typeof icon === 'string' && selected ? {
+      name: icon,
+      variant: 'bold'
+    } : icon;
+    return (0, _slotIcon.renderSlotIcon)(resolved, {
+      color,
+      size: dims.iconSize,
+      disabled: optDisabled
+    });
+  };
+  const renderChip = state => {
+    const {
+      option,
+      selected,
+      disabled: optDisabled,
+      color
+    } = state;
+    const ink = optDisabled ? theme.colors.text.disabled : selected ? color : theme.colors.text.primary;
+    const icon = renderIcon(option, selected, ink, optDisabled);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.chip, {
+        minHeight: dims.minHeight,
+        paddingHorizontal: dims.chipPaddingHorizontal,
+        paddingVertical: dims.paddingVertical,
+        borderRadius: theme.radius.full,
+        ..._corners.smoothCorners,
+        borderWidth: theme.colors.border.width,
+        ...surfaceFor(selected, optDisabled, color),
+        columnGap: theme.spacing.xs
+      }],
+      children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: icon
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.cardLabel, {
+          color: ink,
+          fontSize: dims.fontSize,
+          ...(0, _index2.fontFor)(theme, 'medium')
+        }],
+        numberOfLines: 1,
+        children: labelOf(option)
+      })]
+    });
+  };
+  const renderDefaultCard = state => {
+    const {
+      option,
+      selected,
+      disabled: optDisabled,
+      color
+    } = state;
+    const rawColor = colorOf(option);
+    const labelColor = optDisabled ? theme.colors.text.disabled : rawColor ?? theme.colors.text.primary;
+    const description = descriptionOf(option);
+    const icon = renderIcon(option, selected, labelColor, optDisabled);
+    const dot = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioDot.RadioDot, {
+      selected: selected,
+      color: color,
+      disabled: optDisabled,
+      size: size
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.card, {
+        minHeight: dims.minHeight,
+        paddingHorizontal: dims.paddingHorizontal,
+        paddingVertical: dims.paddingVertical,
+        borderRadius: cardRadius,
+        ..._corners.smoothCorners,
+        borderWidth: theme.colors.border.width,
+        ...surfaceFor(selected, optDisabled, color),
+        columnGap: theme.spacing.sm
+      }],
+      children: [indicatorPosition === 'leading' ? dot : null, icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        children: icon
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.cardTextWrap,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cardLabel, {
+            color: labelColor,
+            fontSize: dims.fontSize,
+            ...(0, _index2.fontFor)(theme, 'medium')
+          }],
+          numberOfLines: 1,
+          children: labelOf(option)
+        }), description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cardDescription, {
+            color: theme.colors.text.tertiary,
+            fontSize: theme.typography.fontSize.xs
+          }],
+          numberOfLines: 2,
+          children: description
+        }) : null]
+      }), indicatorPosition === 'trailing' ? dot : null]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    accessibilityRole: "radiogroup",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled
+    },
+    testID: testID,
+    style: [{
+      flexDirection: direction,
+      gap: gap ?? theme.spacing.sm,
+      flexWrap: wrap ? 'wrap' : 'nowrap'
+    }, style],
+    children: options.map((option, index) => {
+      const optValue = valueOf(option);
+      const optDisabled = disabled || disabledOf(option);
+      const selected = current === optValue;
+      const color = colorOf(option) ?? theme.colors.primary;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: () => {
+          if (optDisabled) {
+            return;
+          }
+          handleSelect(option);
+        },
+        disabled: optDisabled,
+        accessibilityRole: "radio",
+        accessibilityLabel: labelOf(option),
+        accessibilityState: {
+          checked: selected,
+          disabled: optDisabled
+        },
+        style: [stretch ? styles.stretchOption : null,
+        // The built-in templates paint disabled themselves; a custom
+        // template gets the fade, since the library does not own its look.
+        {
+          opacity: optDisabled && renderOption ? 0.55 : 1
+        }, optionStyle],
+        children: ({
+          pressed
+        }) => {
+          const state = {
+            option,
+            index,
+            selected,
+            pressed: pressed && !optDisabled,
+            disabled: optDisabled,
+            color
+          };
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+            children: renderOption ? renderOption(state) : variant === 'chip' ? renderChip(state) : renderDefaultCard(state)
+          });
+        }
+      }, String(optValue));
+    })
+  });
+});
+ChoiceGroup.displayName = 'ChoiceGroup';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  stretchOption: {
+    flex: 1
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  cardTextWrap: {
+    flex: 1
+  },
+  cardLabel: {
+    includeFontPadding: false
+  },
+  cardDescription: {
+    includeFontPadding: false,
+    marginTop: 2
+  }
+});
+var _default = exports.default = ChoiceGroup;
+//# sourceMappingURL=ChoiceGroup.js.map

package/lib/commonjs/components/ChoiceGroup/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChoiceGroup", {
+  enumerable: true,
+  get: function () {
+    return _ChoiceGroup.ChoiceGroup;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ChoiceGroup.default;
+  }
+});
+var _ChoiceGroup = _interopRequireWildcard(require("./ChoiceGroup.js"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+//# sourceMappingURL=index.js.map