@webority/mobile-ui 0.0.38 → 0.1.0

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

@@ -1,336 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ChoiceGroup=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_RadioDot=require("../Radio/RadioDot.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,i){if("function"==typeof WeakMap)var t=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,i){if(!i&&e&&e.__esModule)return e;var o,n,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(o=i?r:t){if(o.has(e))return o.get(e);o.set(e,a)}for(const i in e)"default"!==i&&{}.hasOwnProperty.call(e,i)&&((n=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,i))&&(n.get||n.set)?o(a,i,n):a[i]=e[i]);return a})(e,i)}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}},ChoiceGroup=exports.ChoiceGroup=(0,_react.forwardRef)((e,i)=>{const{options:t,getOptionLabel:r,getOptionValue:o,getOptionDisabled:n,getOptionDescription:a,getOptionIcon:l,getOptionColor:c,renderOption:s,variant:d="card",indicatorPosition:u="trailing",direction:p="row",gap:_,wrap:x=!1,fullWidth:g,disabled:b=!1,size:m="md",haptic:f,accessibilityLabel:h,style:y,optionStyle:j,testID:v}=e,z=(0,_index2.useTheme)(),R=(0,_react.useMemo)(()=>buildStyles(z),[z]),C=sizeTokens[m],S=(0,_react.useCallback)(e=>r?r(e):e.label??"",[r]),H=(0,_react.useCallback)(e=>o?o(e):e.value,[o]),w=(0,_react.useCallback)(e=>n?n(e):!0===e.disabled,[n]),O=(0,_react.useCallback)(e=>a?a(e):e.description,[a]),k=(0,_react.useCallback)(e=>l?l(e):e.icon,[l]),V=(0,_react.useCallback)(e=>c?c(e):e.color,[c]),D="multiple"===e.selectionMode,{min:q,max:N}=e,[P,W]=(0,_index.useControllableState)({value:e.value,defaultValue:e.defaultValue??(D?[]:void 0),onChange:e.onChange}),G=Array.isArray(P)?P:[],I=(0,_react.useCallback)(e=>{const i=H(e);if(D){const e=G.includes(i);if(e&&null!=q&&G.length<=q)return;if(!e&&null!=N&&G.length>=N)return;const t=(0,_index3.resolveHaptic)(f,"selection");return t&&(0,_index3.triggerHaptic)(t),void W(e?G.filter(e=>e!==i):[...G,i])}const t=(0,_index3.resolveHaptic)(f,"selection");t&&(0,_index3.triggerHaptic)(t),W(i)},[f,D,q,N,G,W,H]),L=g??("card"===d&&"row"===p&&!x),T=z.components.choiceGroup?.selectedFillOpacity??.12,M=z.components.choiceGroup?.borderRadius??z.radius.md,surfaceFor=(e,i,t)=>i?{borderColor:z.colors.border.primary,backgroundColor:z.colors.surface.disabled}:{borderColor:e?t:z.colors.border.primary,backgroundColor:e?(0,_color.tintOf)(t,T,z.colors.surface.selected):z.colors.background.primary},renderIcon=(e,i,t,r)=>{const o=k(e);if(null==o)return null;const n="string"==typeof o&&i?{name:o,variant:"bold"}:o;return(0,_slotIcon.renderSlotIcon)(n,{color:t,size:C.iconSize,disabled:r})},renderChip=e=>{const{option:i,selected:t,disabled:r,color:o}=e,n=r?z.colors.text.disabled:t?o:z.colors.text.primary,a=renderIcon(i,t,n,r);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[R.chip,{minHeight:C.minHeight,paddingHorizontal:C.chipPaddingHorizontal,paddingVertical:C.paddingVertical,borderRadius:z.radius.full,..._corners.smoothCorners,borderWidth:z.colors.border.width,...surfaceFor(t,r,o),columnGap:z.spacing.xs}],children:[a?(0,_jsxRuntime.jsx)(_reactNative.View,{children:a}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[R.cardLabel,{color:n,fontSize:C.fontSize,...(0,_index2.fontFor)(z,"medium")}],numberOfLines:1,children:S(i)})]})},renderDefaultCard=e=>{const{option:i,selected:t,disabled:r,color:o}=e,n=V(i),a=r?z.colors.text.disabled:n??z.colors.text.primary,l=O(i),c=renderIcon(i,t,a,r),s=(0,_jsxRuntime.jsx)(_RadioDot.RadioDot,{selected:t,color:o,disabled:r,size:m});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[R.card,{minHeight:C.minHeight,paddingHorizontal:C.paddingHorizontal,paddingVertical:C.paddingVertical,borderRadius:M,..._corners.smoothCorners,borderWidth:z.colors.border.width,...surfaceFor(t,r,o),columnGap:z.spacing.sm}],children:["leading"===u?s:null,c?(0,_jsxRuntime.jsx)(_reactNative.View,{children:c}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:R.cardTextWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[R.cardLabel,{color:a,fontSize:C.fontSize,...(0,_index2.fontFor)(z,"medium")}],numberOfLines:1,children:S(i)}),l?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[R.cardDescription,{color:z.colors.text.tertiary,fontSize:z.typography.fontSize.xs}],numberOfLines:2,children:l}):null]}),"trailing"===u?s:null]})};return(0,_jsxRuntime.jsx)(_reactNative.View,{ref:i,accessibilityRole:D?void 0:"radiogroup",accessibilityLabel:h,accessibilityState:{disabled:b},testID:v,style:[{flexDirection:p,gap:_??z.spacing.sm,flexWrap:x?"wrap":"nowrap"},y],children:t.map((e,i)=>{const t=H(e),r=D?G.includes(t):P===t,o=D&&null!=N&&!r&&G.length>=N,n=b||o||w(e),a=V(e)??z.colors.primary;return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>{n||I(e)},disabled:n,accessibilityRole:D?"checkbox":"radio",accessibilityLabel:S(e),accessibilityState:{checked:r,disabled:n},style:[L?R.stretchOption:null,{opacity:n&&s?.55:1},j],children:({pressed:t})=>{const o={option:e,index:i,selected:r,pressed:t&&!n,disabled:n,color:a};return(0,_jsxRuntime.jsx)(_jsxRuntime.Fragment,{children:s?s(o):"chip"===d?renderChip(o):renderDefaultCard(o)})}},String(t))})})});ChoiceGroup.displayName="ChoiceGroup";const buildStyles=e=>_reactNative.StyleSheet.create({stretchOption:{flex:1},card:{flexDirection:"row",alignItems:"center"},chip:{flexDirection:"row",alignItems:"center",justifyContent:"center"},cardTextWrap:{flex:1},cardLabel:{includeFontPadding:!1},cardDescription:{includeFontPadding:!1,marginTop:2}});var _default=exports.default=ChoiceGroup;

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

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