@webority/mobile-ui 0.0.39 → 0.1.0

package/lib/module/components/ChoiceGroup/ChoiceGroup.js

@@ -1,332 +1 @@
-"use strict";
-
-/**
- * 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.
- */
-
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { useControllableState } from "../../hooks/index.js";
-import { fontFor, useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { tintOf } from "../../utils/color.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { renderSlotIcon } from "../AppIcon/slotIcon.js";
-import { RadioDot } from "../Radio/RadioDot.js";
-
-/** Which side of the card the radio dot sits on. */
-
-/** Everything a custom option template needs to render one option. */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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 = /*#__PURE__*/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 = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const dims = sizeTokens[size];
-  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : o.label ?? '', [getOptionLabel]);
-  const valueOf = useCallback(o => getOptionValue ? getOptionValue(o) : o.value, [getOptionValue]);
-  const disabledOf = useCallback(o => getOptionDisabled ? getOptionDisabled(o) : o.disabled === true, [getOptionDisabled]);
-  const descriptionOf = useCallback(o => getOptionDescription ? getOptionDescription(o) : o.description, [getOptionDescription]);
-  const iconOf = useCallback(o => getOptionIcon ? getOptionIcon(o) : o.icon, [getOptionIcon]);
-  const colorOf = useCallback(o => getOptionColor ? getOptionColor(o) : o.color, [getOptionColor]);
-  const [current, setCurrent] = useControllableState({
-    value,
-    defaultValue: defaultValue ?? undefined,
-    onChange: onChange
-  });
-  const handleSelect = useCallback(option => {
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      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 ? 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 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__*/_jsxs(View, {
-      style: [styles.chip, {
-        minHeight: dims.minHeight,
-        paddingHorizontal: dims.chipPaddingHorizontal,
-        paddingVertical: dims.paddingVertical,
-        borderRadius: theme.radius.full,
-        ...smoothCorners,
-        borderWidth: theme.colors.border.width,
-        ...surfaceFor(selected, optDisabled, color),
-        columnGap: theme.spacing.xs
-      }],
-      children: [icon ? /*#__PURE__*/_jsx(View, {
-        children: icon
-      }) : null, /*#__PURE__*/_jsx(Text, {
-        style: [styles.cardLabel, {
-          color: ink,
-          fontSize: dims.fontSize,
-          ...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__*/_jsx(RadioDot, {
-      selected: selected,
-      color: color,
-      disabled: optDisabled,
-      size: size
-    });
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.card, {
-        minHeight: dims.minHeight,
-        paddingHorizontal: dims.paddingHorizontal,
-        paddingVertical: dims.paddingVertical,
-        borderRadius: cardRadius,
-        ...smoothCorners,
-        borderWidth: theme.colors.border.width,
-        ...surfaceFor(selected, optDisabled, color),
-        columnGap: theme.spacing.sm
-      }],
-      children: [indicatorPosition === 'leading' ? dot : null, icon ? /*#__PURE__*/_jsx(View, {
-        children: icon
-      }) : null, /*#__PURE__*/_jsxs(View, {
-        style: styles.cardTextWrap,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.cardLabel, {
-            color: labelColor,
-            fontSize: dims.fontSize,
-            ...fontFor(theme, 'medium')
-          }],
-          numberOfLines: 1,
-          children: labelOf(option)
-        }), description ? /*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsx(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__*/_jsx(_Fragment, {
-            children: renderOption ? renderOption(state) : variant === 'chip' ? renderChip(state) : renderDefaultCard(state)
-          });
-        }
-      }, String(optValue));
-    })
-  });
-});
-ChoiceGroup.displayName = 'ChoiceGroup';
-const buildStyles = _theme => 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
-  }
-});
-export { ChoiceGroup };
-export default ChoiceGroup;
-//# sourceMappingURL=ChoiceGroup.js.map
+import i,{forwardRef as e,useCallback as o,useMemo as r}from"react";import{Pressable as t,StyleSheet as n,Text as l,View as a}from"react-native";import{useControllableState as d}from"../../hooks/index.js";import{fontFor as c,useTheme as s}from"../../theme/index.js";import{resolveHaptic as p,triggerHaptic as u}from"../../utils/index.js";import{tintOf as m}from"../../utils/color.js";import{smoothCorners as g}from"../../utils/corners.js";import{renderSlotIcon as b}from"../AppIcon/slotIcon.js";import{RadioDot as h}from"../Radio/RadioDot.js";import{jsx as f,jsxs as y,Fragment as x}from"react/jsx-runtime";const z={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}},H=e((i,e)=>{const{options:n,getOptionLabel:H,getOptionValue:S,getOptionDisabled:O,getOptionDescription:j,getOptionIcon:D,getOptionColor:L,renderOption:V,variant:v="card",indicatorPosition:w="trailing",direction:C="row",gap:P,wrap:I=!1,fullWidth:R,disabled:k=!1,size:W="md",haptic:G,accessibilityLabel:F,style:A,optionStyle:T,testID:M}=i,N=s(),q=r(()=>buildStyles(N),[N]),B=z[W],E=o(i=>H?H(i):i.label??"",[H]),J=o(i=>S?S(i):i.value,[S]),K=o(i=>O?O(i):!0===i.disabled,[O]),Q=o(i=>j?j(i):i.description,[j]),U=o(i=>D?D(i):i.icon,[D]),X=o(i=>L?L(i):i.color,[L]),Y="multiple"===i.selectionMode,{min:Z,max:$}=i,[_,ii]=d({value:i.value,defaultValue:i.defaultValue??(Y?[]:void 0),onChange:i.onChange}),ei=Array.isArray(_)?_:[],oi=o(i=>{const e=J(i);if(Y){const i=ei.includes(e);if(i&&null!=Z&&ei.length<=Z)return;if(!i&&null!=$&&ei.length>=$)return;const o=p(G,"selection");return o&&u(o),void ii(i?ei.filter(i=>i!==e):[...ei,e])}const o=p(G,"selection");o&&u(o),ii(e)},[G,Y,Z,$,ei,ii,J]),ri=R??("card"===v&&"row"===C&&!I),ti=N.components.choiceGroup?.selectedFillOpacity??.12,ni=N.components.choiceGroup?.borderRadius??N.radius.md,surfaceFor=(i,e,o)=>e?{borderColor:N.colors.border.primary,backgroundColor:N.colors.surface.disabled}:{borderColor:i?o:N.colors.border.primary,backgroundColor:i?m(o,ti,N.colors.surface.selected):N.colors.background.primary},renderIcon=(i,e,o,r)=>{const t=U(i);if(null==t)return null;return b("string"==typeof t&&e?{name:t,variant:"bold"}:t,{color:o,size:B.iconSize,disabled:r})},renderChip=i=>{const{option:e,selected:o,disabled:r,color:t}=i,n=r?N.colors.text.disabled:o?t:N.colors.text.primary,d=renderIcon(e,o,n,r);return y(a,{style:[q.chip,{minHeight:B.minHeight,paddingHorizontal:B.chipPaddingHorizontal,paddingVertical:B.paddingVertical,borderRadius:N.radius.full,...g,borderWidth:N.colors.border.width,...surfaceFor(o,r,t),columnGap:N.spacing.xs}],children:[d?f(a,{children:d}):null,f(l,{style:[q.cardLabel,{color:n,fontSize:B.fontSize,...c(N,"medium")}],numberOfLines:1,children:E(e)})]})},renderDefaultCard=i=>{const{option:e,selected:o,disabled:r,color:t}=i,n=X(e),d=r?N.colors.text.disabled:n??N.colors.text.primary,s=Q(e),p=renderIcon(e,o,d,r),u=f(h,{selected:o,color:t,disabled:r,size:W});return y(a,{style:[q.card,{minHeight:B.minHeight,paddingHorizontal:B.paddingHorizontal,paddingVertical:B.paddingVertical,borderRadius:ni,...g,borderWidth:N.colors.border.width,...surfaceFor(o,r,t),columnGap:N.spacing.sm}],children:["leading"===w?u:null,p?f(a,{children:p}):null,y(a,{style:q.cardTextWrap,children:[f(l,{style:[q.cardLabel,{color:d,fontSize:B.fontSize,...c(N,"medium")}],numberOfLines:1,children:E(e)}),s?f(l,{style:[q.cardDescription,{color:N.colors.text.tertiary,fontSize:N.typography.fontSize.xs}],numberOfLines:2,children:s}):null]}),"trailing"===w?u:null]})};return f(a,{ref:e,accessibilityRole:Y?void 0:"radiogroup",accessibilityLabel:F,accessibilityState:{disabled:k},testID:M,style:[{flexDirection:C,gap:P??N.spacing.sm,flexWrap:I?"wrap":"nowrap"},A],children:n.map((i,e)=>{const o=J(i),r=Y?ei.includes(o):_===o,n=Y&&null!=$&&!r&&ei.length>=$,l=k||n||K(i),a=X(i)??N.colors.primary;return f(t,{onPress:()=>{l||oi(i)},disabled:l,accessibilityRole:Y?"checkbox":"radio",accessibilityLabel:E(i),accessibilityState:{checked:r,disabled:l},style:[ri?q.stretchOption:null,{opacity:l&&V?.55:1},T],children:({pressed:o})=>{const t={option:i,index:e,selected:r,pressed:o&&!l,disabled:l,color:a};return f(x,{children:V?V(t):"chip"===v?renderChip(t):renderDefaultCard(t)})}},String(o))})})});H.displayName="ChoiceGroup";const buildStyles=i=>n.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}});export{H as ChoiceGroup};export default H;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { ChoiceGroup, default } from "./ChoiceGroup.js";
-//# sourceMappingURL=index.js.map
+export{ChoiceGroup,default}from"./ChoiceGroup.js";