@wecareu/select 0.1.0

package/README.md

@@ -0,0 +1,165 @@
+# @wecareu/select
+
+Controlled select component for the WeCareU Design System. Supports single and multiple selection with modal bottom sheet, search, chips display, and full validation feedback.
+
+## Installation
+
+```bash
+npm install @wecareu/select
+# or
+yarn add @wecareu/select
+```
+
+### Peer Dependencies
+
+```bash
+npm install @wecareu/icons @wecareu/theme @wecareu/tokens react react-native
+```
+
+## Usage
+
+### Single Select
+
+```tsx
+import { Select } from '@wecareu/select'
+
+const GENDER_OPTIONS = [
+  { label: 'Female', value: 'F' },
+  { label: 'Male', value: 'M' },
+  { label: 'Prefer not to say', value: 'X' }
+]
+
+function GenderPicker() {
+  const [gender, setGender] = React.useState<string | null>(null)
+
+  return (
+    <Select
+      options={GENDER_OPTIONS}
+      value={gender}
+      onChange={setGender}
+      placeholder="Select gender"
+      clearable
+    />
+  )
+}
+```
+
+### Single Select with Search (large list)
+
+```tsx
+import { Select } from '@wecareu/select'
+
+function CountryPicker() {
+  const [country, setCountry] = React.useState<string | null>(null)
+
+  return (
+    <Select
+      options={countries}
+      value={country}
+      onChange={setCountry}
+      placeholder="Select country"
+      searchable
+      clearable
+    />
+  )
+}
+```
+
+### Multiple Select
+
+```tsx
+import { Select } from '@wecareu/select'
+
+function TagsPicker() {
+  const [tags, setTags] = React.useState<string[]>([])
+
+  return (
+    <Select
+      multiple
+      options={tagOptions}
+      value={tags}
+      onChange={setTags}
+      placeholder="Select tags"
+      clearable
+    />
+  )
+}
+```
+
+### With Validation
+
+```tsx
+import { Select } from '@wecareu/select'
+
+function ValidatedSelect() {
+  const [value, setValue] = React.useState<string | null>(null)
+  const [isValid, setIsValid] = React.useState(true)
+
+  return (
+    <Select
+      options={options}
+      value={value}
+      onChange={setValue}
+      required
+      inputError={!isValid}
+      errorMessage="This field is required"
+      onValidation={setIsValid}
+      placeholder="Select an option"
+    />
+  )
+}
+```
+
+## Props
+
+### SelectOption
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `value` | `string \| number` | Yes | Unique identifier for the option |
+| `label` | `string` | Yes | Display text |
+| `description` | `string` | No | Secondary text shown below label |
+| `icon` | `IconName` | No | Icon from @wecareu/icons |
+| `disabled` | `boolean` | No | Prevents selection |
+
+### Select (Single)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string \| number \| null` | — | Selected value |
+| `onChange` | `(value: string \| number \| null) => void` | — | Called on selection change |
+| `options` | `SelectOption[]` | — | List of options |
+| `placeholder` | `string` | `'Select...'` | Placeholder text |
+| `clearable` | `boolean` | `false` | Shows clear button |
+| `searchable` | `boolean` | `false` | Enables search inside dropdown |
+| `disabled` | `boolean` | `false` | Blocks interaction |
+| `readonly` | `boolean` | `false` | Blocks interaction (read-only visual) |
+| `required` | `boolean` | `false` | Enables required validation |
+| `inputError` | `boolean` | `false` | Forces error state with shake animation |
+| `errorMessage` | `string` | — | Message shown in error state |
+| `onValidation` | `(isValid: boolean) => void` | — | Validation callback |
+| `leftIcon` | `SelectIconProps` | — | Icon on the left side |
+| `style` | `StyleProp<ViewStyle>` | — | Container style override |
+| `testID` | `string` | — | Test identifier |
+
+### Select (Multiple)
+
+Same as single select, plus:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `multiple` | `true` | — | Enables multiple selection |
+| `value` | `Array<string \| number>` | — | Selected values |
+| `onChange` | `(values: Array<string \| number>) => void` | — | Called on selection change |
+
+## Accessibility
+
+- `accessibilityRole="combobox"` on the field
+- `accessibilityState={{ disabled, expanded }}` reflects open state
+- Each option has `accessibilityRole="option"` with `selected` state
+- Modal has `accessibilityViewIsModal` set
+- Chips have accessible remove buttons
+
+## Theme Integration
+
+The component uses `@wecareu/theme` tokens for all colors, spacing, radius, and typography. It supports both light and dark modes automatically through `useTheme()`.

package/lib/commonjs/Select.js

@@ -0,0 +1,272 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = Select;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _theme = require("@wecareu/theme");
+var _shake = require("./animations/shake");
+var _SelectChip = require("./SelectChip");
+var _SelectDropdown = require("./SelectDropdown");
+var _SelectErrorMessage = require("./SelectErrorMessage");
+var _SelectIcon = require("./SelectIcon");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Select(props) {
+  const theme = (0, _theme.useTheme)();
+  const styles = _react.default.useMemo(() => createStyles(theme), [theme]);
+  const {
+    clearable = false,
+    disabled = false,
+    errorMessage,
+    inputError = false,
+    labels,
+    leftIcon,
+    multiple,
+    onValidation,
+    options,
+    placeholder,
+    readonly = false,
+    required = false,
+    searchable = false,
+    style,
+    testID,
+    value
+  } = props;
+  if (!options || options.length === 0) {
+    console.error('[Select] The "options" prop must be a non-empty array. Received:', options);
+    return null;
+  }
+  const isInteractive = !(disabled || readonly);
+  const [isOpen, setIsOpen] = _react.default.useState(false);
+  const [touched, setTouched] = _react.default.useState(false);
+  const {
+    animatedStyle,
+    triggerShake
+  } = (0, _shake.useShakeAnimation)({
+    distance: theme.spacing.sm
+  });
+  const isEmpty = multiple ? value.length === 0 : value === null || value === undefined;
+  const internalHasError = _react.default.useMemo(() => {
+    if (!required || !touched) {
+      return false;
+    }
+    return isEmpty;
+  }, [isEmpty, required, touched]);
+  _react.default.useEffect(() => {
+    if (!required || !touched) {
+      return;
+    }
+    onValidation?.(!internalHasError);
+  }, [internalHasError, onValidation, required, touched]);
+  const shouldShowError = inputError || internalHasError;
+  const requiredErrorMessage = labels?.requiredError ?? 'This field is required';
+  const effectiveErrorMessage = inputError ? errorMessage : internalHasError ? requiredErrorMessage : undefined;
+  const previousErrorRef = _react.default.useRef(false);
+  _react.default.useEffect(() => {
+    if (shouldShowError && !previousErrorRef.current) {
+      triggerShake();
+    }
+    previousErrorRef.current = shouldShowError;
+  }, [shouldShowError, triggerShake]);
+  const selectedValues = _react.default.useMemo(() => {
+    if (multiple) {
+      return value ?? [];
+    }
+    if (value !== null && value !== undefined) {
+      return [value];
+    }
+    return [];
+  }, [multiple, value]);
+  const selectedOptions = _react.default.useMemo(() => options.filter(o => selectedValues.includes(o.value)), [options, selectedValues]);
+  const singleLabel = _react.default.useMemo(() => {
+    if (multiple || isEmpty) {
+      return null;
+    }
+    return options.find(o => o.value === value)?.label ?? null;
+  }, [isEmpty, multiple, options, value]);
+  const handleOpen = _react.default.useCallback(() => {
+    if (!isInteractive) {
+      return;
+    }
+    setTouched(true);
+    setIsOpen(true);
+  }, [isInteractive]);
+  const handleClose = _react.default.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleToggleOption = _react.default.useCallback(option => {
+    if (multiple) {
+      const multiProps = props;
+      const current = multiProps.value;
+      const isSelected = current.includes(option.value);
+      const next = isSelected ? current.filter(v => v !== option.value) : [...current, option.value];
+      multiProps.onChange(next);
+    } else {
+      const singleProps = props;
+      singleProps.onChange(option.value);
+      setIsOpen(false);
+    }
+  }, [multiple, props]);
+  const handleClear = _react.default.useCallback(() => {
+    if (multiple) {
+      const multiProps = props;
+      multiProps.onChange([]);
+    } else {
+      const singleProps = props;
+      singleProps.onChange(null);
+    }
+  }, [multiple, props]);
+  const handleRemoveChip = _react.default.useCallback(optionValue => {
+    if (!multiple) {
+      return;
+    }
+    const multiProps = props;
+    multiProps.onChange(multiProps.value.filter(v => v !== optionValue));
+  }, [multiple, props]);
+  const showClearButton = clearable && !isEmpty && isInteractive;
+  const renderFieldContent = () => {
+    if (multiple && selectedOptions.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+        horizontal: true,
+        keyboardShouldPersistTaps: "handled",
+        showsHorizontalScrollIndicator: false,
+        style: styles.chipsScroll,
+        contentContainerStyle: styles.chipsContainer
+      }, selectedOptions.map(opt => /*#__PURE__*/_react.default.createElement(_SelectChip.SelectChip, {
+        key: String(opt.value),
+        disabled: disabled,
+        label: opt.label,
+        onRemove: () => handleRemoveChip(opt.value)
+      })));
+    }
+    if (!isEmpty && singleLabel) {
+      return /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        numberOfLines: 1,
+        style: styles.selectedLabel
+      }, singleLabel);
+    }
+    return /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      numberOfLines: 1,
+      style: styles.placeholder
+    }, placeholder ?? 'Select...');
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    accessible: false,
+    style: [styles.container, !isInteractive && styles.containerDisabled, shouldShowError && styles.containerError, animatedStyle, style],
+    testID: testID
+  }, leftIcon ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.iconLeft
+  }, /*#__PURE__*/_react.default.createElement(_SelectIcon.SelectIcon, leftIcon)) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    accessibilityHint: placeholder,
+    accessibilityLabel: singleLabel ?? placeholder ?? 'Select option',
+    accessibilityRole: "combobox",
+    accessibilityState: {
+      disabled: !isInteractive,
+      expanded: isOpen
+    },
+    disabled: !isInteractive,
+    onPress: handleOpen,
+    style: styles.fieldPressable
+  }, renderFieldContent()), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.rightIcons
+  }, showClearButton ? /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    accessibilityLabel: "Clear selection",
+    accessibilityRole: "button",
+    hitSlop: 8,
+    onPress: handleClear
+  }, /*#__PURE__*/_react.default.createElement(_SelectIcon.SelectIcon, {
+    color: theme.colors.text.tertiary,
+    name: "close",
+    size: theme.spacing.md
+  })) : /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    accessibilityLabel: isOpen ? 'Close options' : 'Open options',
+    accessibilityRole: "button",
+    disabled: !isInteractive,
+    hitSlop: 8,
+    onPress: handleOpen
+  }, /*#__PURE__*/_react.default.createElement(_SelectIcon.SelectIcon, {
+    color: theme.colors.text.tertiary,
+    name: isOpen ? 'chevronUp' : 'chevronDown',
+    size: theme.spacing.md
+  })))), /*#__PURE__*/_react.default.createElement(_SelectErrorMessage.SelectErrorMessage, {
+    message: shouldShowError ? effectiveErrorMessage : undefined,
+    testID: effectiveErrorMessage ? `${testID ?? 'select'}-error` : undefined
+  }), /*#__PURE__*/_react.default.createElement(_SelectDropdown.SelectDropdown, {
+    isMulti: multiple,
+    isOpen: isOpen,
+    onClose: handleClose,
+    onToggleOption: handleToggleOption,
+    options: options,
+    searchable: searchable,
+    selectedValues: selectedValues
+  }));
+}
+function createStyles(theme) {
+  return _reactNative.StyleSheet.create({
+    chipsContainer: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: theme.spacing.xs,
+      paddingVertical: 2
+    },
+    chipsScroll: {
+      flex: 1
+    },
+    container: {
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.brand.primary,
+      borderRadius: theme.radius.xxl,
+      borderWidth: 1,
+      flexDirection: 'row',
+      minHeight: 48,
+      paddingHorizontal: theme.spacing.xl,
+      paddingVertical: theme.spacing.xs,
+      width: '100%'
+    },
+    containerDisabled: {
+      backgroundColor: theme.colors.surface.disabled,
+      borderColor: theme.colors.border.disabled
+    },
+    containerError: {
+      borderColor: theme.colors.status.error
+    },
+    fieldPressable: {
+      alignItems: 'center',
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      minHeight: 32
+    },
+    iconLeft: {
+      marginRight: theme.spacing.xs
+    },
+    placeholder: {
+      color: theme.colors.text.tertiary,
+      flex: 1,
+      fontFamily: theme.typography.fontFamily.body,
+      lineHeight: theme.typography.lineHeight.bodySmall,
+      textAlign: 'center'
+    },
+    rightIcons: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      marginLeft: theme.spacing.xs
+    },
+    selectedLabel: {
+      color: theme.colors.text.primary,
+      flex: 1,
+      fontFamily: theme.typography.fontFamily.body,
+      lineHeight: theme.typography.lineHeight.bodySmall,
+      textAlign: 'center'
+    },
+    wrapper: {
+      width: '100%'
+    }
+  });
+}
+//# sourceMappingURL=Select.js.map

package/lib/commonjs/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_theme","_shake","_SelectChip","_SelectDropdown","_SelectErrorMessage","_SelectIcon","e","__esModule","default","Select","props","theme","useTheme","styles","React","useMemo","createStyles","clearable","disabled","errorMessage","inputError","labels","leftIcon","multiple","onValidation","options","placeholder","readonly","required","searchable","style","testID","value","length","console","error","isInteractive","isOpen","setIsOpen","useState","touched","setTouched","animatedStyle","triggerShake","useShakeAnimation","distance","spacing","sm","isEmpty","undefined","internalHasError","useEffect","shouldShowError","requiredErrorMessage","requiredError","effectiveErrorMessage","previousErrorRef","useRef","current","selectedValues","selectedOptions","filter","o","includes","singleLabel","find","label","handleOpen","useCallback","handleClose","handleToggleOption","option","multiProps","isSelected","next","v","onChange","singleProps","handleClear","handleRemoveChip","optionValue","showClearButton","renderFieldContent","createElement","ScrollView","horizontal","keyboardShouldPersistTaps","showsHorizontalScrollIndicator","chipsScroll","contentContainerStyle","chipsContainer","map","opt","SelectChip","key","String","onRemove","Text","numberOfLines","selectedLabel","View","wrapper","Animated","accessible","container","containerDisabled","containerError","iconLeft","SelectIcon","Pressable","accessibilityHint","accessibilityLabel","accessibilityRole","accessibilityState","expanded","onPress","fieldPressable","rightIcons","hitSlop","color","colors","text","tertiary","name","size","md","SelectErrorMessage","message","SelectDropdown","isMulti","onClose","onToggleOption","StyleSheet","create","alignItems","flexDirection","gap","xs","paddingVertical","flex","backgroundColor","borderColor","brand","primary","borderRadius","radius","xxl","borderWidth","minHeight","paddingHorizontal","xl","width","surface","border","status","justifyContent","marginRight","fontFamily","typography","body","lineHeight","bodySmall","textAlign","marginLeft"],"sourceRoot":"..\\..\\src","sources":["Select.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAGA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AACA,IAAAM,mBAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AAAyC,SAAAD,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElC,SAASG,MAAMA,CAACC,KAAkB,EAAsB;EAC7D,MAAMC,KAAK,GAAG,IAAAC,eAAQ,EAAC,CAAC;EACxB,MAAMC,MAAM,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMC,YAAY,CAACL,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEhE,MAAM;IACJM,SAAS,GAAG,KAAK;IACjBC,QAAQ,GAAG,KAAK;IAChBC,YAAY;IACZC,UAAU,GAAG,KAAK;IAClBC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,YAAY;IACZC,OAAO;IACPC,WAAW;IACXC,QAAQ,GAAG,KAAK;IAChBC,QAAQ,GAAG,KAAK;IAChBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC;EACF,CAAC,GAAGtB,KAAK;EAET,IAAI,CAACe,OAAO,IAAIA,OAAO,CAACQ,MAAM,KAAK,CAAC,EAAE;IACpCC,OAAO,CAACC,KAAK,CAAC,kEAAkE,EAAEV,OAAO,CAAC;IAC1F,OAAO,IAAI;EACb;EAEA,MAAMW,aAAa,GAAG,EAAElB,QAAQ,IAAIS,QAAQ,CAAC;EAC7C,MAAM,CAACU,MAAM,EAAEC,SAAS,CAAC,GAAGxB,cAAK,CAACyB,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG3B,cAAK,CAACyB,QAAQ,CAAC,KAAK,CAAC;EAEnD,MAAM;IAAEG,aAAa;IAAEC;EAAa,CAAC,GAAG,IAAAC,wBAAiB,EAAC;IACxDC,QAAQ,EAAElC,KAAK,CAACmC,OAAO,CAACC;EAC1B,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAGzB,QAAQ,GAAIS,KAAK,CAA4BC,MAAM,KAAK,CAAC,GAAGD,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKiB,SAAS;EAEjH,MAAMC,gBAAgB,GAAGpC,cAAK,CAACC,OAAO,CAAC,MAAM;IAC3C,IAAI,CAACa,QAAQ,IAAI,CAACY,OAAO,EAAE;MACzB,OAAO,KAAK;IACd;IACA,OAAOQ,OAAO;EAChB,CAAC,EAAE,CAACA,OAAO,EAAEpB,QAAQ,EAAEY,OAAO,CAAC,CAAC;EAEhC1B,cAAK,CAACqC,SAAS,CAAC,MAAM;IACpB,IAAI,CAACvB,QAAQ,IAAI,CAACY,OAAO,EAAE;MACzB;IACF;IACAhB,YAAY,GAAG,CAAC0B,gBAAgB,CAAC;EACnC,CAAC,EAAE,CAACA,gBAAgB,EAAE1B,YAAY,EAAEI,QAAQ,EAAEY,OAAO,CAAC,CAAC;EAEvD,MAAMY,eAAe,GAAGhC,UAAU,IAAI8B,gBAAgB;EACtD,MAAMG,oBAAoB,GAAGhC,MAAM,EAAEiC,aAAa,IAAI,wBAAwB;EAC9E,MAAMC,qBAAqB,GAAGnC,UAAU,GAAGD,YAAY,GAAG+B,gBAAgB,GAAGG,oBAAoB,GAAGJ,SAAS;EAE7G,MAAMO,gBAAgB,GAAG1C,cAAK,CAAC2C,MAAM,CAAC,KAAK,CAAC;EAE5C3C,cAAK,CAACqC,SAAS,CAAC,MAAM;IACpB,IAAIC,eAAe,IAAI,CAACI,gBAAgB,CAACE,OAAO,EAAE;MAChDf,YAAY,CAAC,CAAC;IAChB;IACAa,gBAAgB,CAACE,OAAO,GAAGN,eAAe;EAC5C,CAAC,EAAE,CAACA,eAAe,EAAET,YAAY,CAAC,CAAC;EAEnC,MAAMgB,cAAc,GAAG7C,cAAK,CAACC,OAAO,CAAyB,MAAM;IACjE,IAAIQ,QAAQ,EAAE;MACZ,OAAQS,KAAK,IAA+B,EAAE;IAChD;IACA,IAAIA,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKiB,SAAS,EAAE;MACzC,OAAO,CAACjB,KAAK,CAAoB;IACnC;IACA,OAAO,EAAE;EACX,CAAC,EAAE,CAACT,QAAQ,EAAES,KAAK,CAAC,CAAC;EAErB,MAAM4B,eAAe,GAAG9C,cAAK,CAACC,OAAO,CACnC,MAAMU,OAAO,CAACoC,MAAM,CAACC,CAAC,IAAIH,cAAc,CAACI,QAAQ,CAACD,CAAC,CAAC9B,KAAK,CAAC,CAAC,EAC3D,CAACP,OAAO,EAAEkC,cAAc,CAC1B,CAAC;EAED,MAAMK,WAAW,GAAGlD,cAAK,CAACC,OAAO,CAAC,MAAM;IACtC,IAAIQ,QAAQ,IAAIyB,OAAO,EAAE;MACvB,OAAO,IAAI;IACb;IACA,OAAOvB,OAAO,CAACwC,IAAI,CAACH,CAAC,IAAIA,CAAC,CAAC9B,KAAK,KAAMA,KAAyB,CAAC,EAAEkC,KAAK,IAAI,IAAI;EACjF,CAAC,EAAE,CAAClB,OAAO,EAAEzB,QAAQ,EAAEE,OAAO,EAAEO,KAAK,CAAC,CAAC;EAEvC,MAAMmC,UAAU,GAAGrD,cAAK,CAACsD,WAAW,CAAC,MAAM;IACzC,IAAI,CAAChC,aAAa,EAAE;MAClB;IACF;IACAK,UAAU,CAAC,IAAI,CAAC;IAChBH,SAAS,CAAC,IAAI,CAAC;EACjB,CAAC,EAAE,CAACF,aAAa,CAAC,CAAC;EAEnB,MAAMiC,WAAW,GAAGvD,cAAK,CAACsD,WAAW,CAAC,MAAM;IAC1C9B,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMgC,kBAAkB,GAAGxD,cAAK,CAACsD,WAAW,CACzCG,MAAoB,IAAK;IACxB,IAAIhD,QAAQ,EAAE;MACZ,MAAMiD,UAAU,GAAG9D,KAAyB;MAC5C,MAAMgD,OAAO,GAAGc,UAAU,CAACxC,KAAK;MAChC,MAAMyC,UAAU,GAAGf,OAAO,CAACK,QAAQ,CAACQ,MAAM,CAACvC,KAAK,CAAC;MACjD,MAAM0C,IAAI,GAAGD,UAAU,GAAGf,OAAO,CAACG,MAAM,CAACc,CAAC,IAAIA,CAAC,KAAKJ,MAAM,CAACvC,KAAK,CAAC,GAAG,CAAC,GAAG0B,OAAO,EAAEa,MAAM,CAACvC,KAAK,CAAC;MAC9FwC,UAAU,CAACI,QAAQ,CAACF,IAAI,CAAC;IAC3B,CAAC,MAAM;MACL,MAAMG,WAAW,GAAGnE,KAA0B;MAC9CmE,WAAW,CAACD,QAAQ,CAACL,MAAM,CAACvC,KAAK,CAAC;MAClCM,SAAS,CAAC,KAAK,CAAC;IAClB;EACF,CAAC,EACD,CAACf,QAAQ,EAAEb,KAAK,CAClB,CAAC;EAED,MAAMoE,WAAW,GAAGhE,cAAK,CAACsD,WAAW,CACnC,MAAM;IACJ,IAAI7C,QAAQ,EAAE;MACZ,MAAMiD,UAAU,GAAG9D,KAAyB;MAC5C8D,UAAU,CAACI,QAAQ,CAAC,EAAE,CAAC;IACzB,CAAC,MAAM;MACL,MAAMC,WAAW,GAAGnE,KAA0B;MAC9CmE,WAAW,CAACD,QAAQ,CAAC,IAAI,CAAC;IAC5B;EACF,CAAC,EACD,CAACrD,QAAQ,EAAEb,KAAK,CAClB,CAAC;EAED,MAAMqE,gBAAgB,GAAGjE,cAAK,CAACsD,WAAW,CACvCY,WAA4B,IAAK;IAChC,IAAI,CAACzD,QAAQ,EAAE;MACb;IACF;IACA,MAAMiD,UAAU,GAAG9D,KAAyB;IAC5C8D,UAAU,CAACI,QAAQ,CAACJ,UAAU,CAACxC,KAAK,CAAC6B,MAAM,CAACc,CAAC,IAAIA,CAAC,KAAKK,WAAW,CAAC,CAAC;EACtE,CAAC,EACD,CAACzD,QAAQ,EAAEb,KAAK,CAClB,CAAC;EAED,MAAMuE,eAAe,GAAGhE,SAAS,IAAI,CAAC+B,OAAO,IAAIZ,aAAa;EAE9D,MAAM8C,kBAAkB,GAAGA,CAAA,KAAM;IAC/B,IAAI3D,QAAQ,IAAIqC,eAAe,CAAC3B,MAAM,GAAG,CAAC,EAAE;MAC1C,oBACErC,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAAqF,UAAU;QACTC,UAAU;QACVC,yBAAyB,EAAC,SAAS;QACnCC,8BAA8B,EAAE,KAAM;QACtCzD,KAAK,EAAEjB,MAAM,CAAC2E,WAAY;QAC1BC,qBAAqB,EAAE5E,MAAM,CAAC6E;MAAe,GAE5C9B,eAAe,CAAC+B,GAAG,CAACC,GAAG,iBACtBhG,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACjF,WAAA,CAAA2F,UAAU;QACTC,GAAG,EAAEC,MAAM,CAACH,GAAG,CAAC5D,KAAK,CAAE;QACvBd,QAAQ,EAAEA,QAAS;QACnBgD,KAAK,EAAE0B,GAAG,CAAC1B,KAAM;QACjB8B,QAAQ,EAAEA,CAAA,KAAMjB,gBAAgB,CAACa,GAAG,CAAC5D,KAAK;MAAE,CAC7C,CACF,CACS,CAAC;IAEjB;IAEA,IAAI,CAACgB,OAAO,IAAIgB,WAAW,EAAE;MAC3B,oBACEpE,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAAkG,IAAI;QAACC,aAAa,EAAE,CAAE;QAACpE,KAAK,EAAEjB,MAAM,CAACsF;MAAc,GACjDnC,WACG,CAAC;IAEX;IAEA,oBACEpE,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAAkG,IAAI;MAACC,aAAa,EAAE,CAAE;MAACpE,KAAK,EAAEjB,MAAM,CAACa;IAAY,GAC/CA,WAAW,IAAI,WACZ,CAAC;EAEX,CAAC;EAED,oBACE9B,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAAqG,IAAI;IAACtE,KAAK,EAAEjB,MAAM,CAACwF;EAAQ,gBAC1BzG,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAAuG,QAAQ,CAACF,IAAI;IACZG,UAAU,EAAE,KAAM;IAClBzE,KAAK,EAAE,CACLjB,MAAM,CAAC2F,SAAS,EAChB,CAACpE,aAAa,IAAIvB,MAAM,CAAC4F,iBAAiB,EAC1CrD,eAAe,IAAIvC,MAAM,CAAC6F,cAAc,EACxChE,aAAa,EACbZ,KAAK,CACL;IACFC,MAAM,EAAEA;EAAO,GAEdT,QAAQ,gBACP1B,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAAqG,IAAI;IAACtE,KAAK,EAAEjB,MAAM,CAAC8F;EAAS,gBAC3B/G,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAAC9E,WAAA,CAAAuG,UAAU,EAAKtF,QAAW,CACvB,CAAC,GACL,IAAI,eAER1B,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAA8G,SAAS;IACRC,iBAAiB,EAAEpF,WAAY;IAC/BqF,kBAAkB,EAAE/C,WAAW,IAAItC,WAAW,IAAI,eAAgB;IAClEsF,iBAAiB,EAAC,UAAU;IAC5BC,kBAAkB,EAAE;MAAE/F,QAAQ,EAAE,CAACkB,aAAa;MAAE8E,QAAQ,EAAE7E;IAAO,CAAE;IACnEnB,QAAQ,EAAE,CAACkB,aAAc;IACzB+E,OAAO,EAAEhD,UAAW;IACpBrC,KAAK,EAAEjB,MAAM,CAACuG;EAAe,GAE5BlC,kBAAkB,CAAC,CACX,CAAC,eAEZtF,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAAqG,IAAI;IAACtE,KAAK,EAAEjB,MAAM,CAACwG;EAAW,GAC5BpC,eAAe,gBACdrF,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAA8G,SAAS;IACRE,kBAAkB,EAAC,iBAAiB;IACpCC,iBAAiB,EAAC,QAAQ;IAC1BM,OAAO,EAAE,CAAE;IACXH,OAAO,EAAErC;EAAY,gBAErBlF,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAAC9E,WAAA,CAAAuG,UAAU;IACTW,KAAK,EAAE5G,KAAK,CAAC6G,MAAM,CAACC,IAAI,CAACC,QAAS;IAClCC,IAAI,EAAC,OAAO;IACZC,IAAI,EAAEjH,KAAK,CAACmC,OAAO,CAAC+E;EAAG,CACxB,CACQ,CAAC,gBAEZjI,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAACpF,YAAA,CAAA8G,SAAS;IACRE,kBAAkB,EAAE1E,MAAM,GAAG,eAAe,GAAG,cAAe;IAC9D2E,iBAAiB,EAAC,QAAQ;IAC1B9F,QAAQ,EAAE,CAACkB,aAAc;IACzBkF,OAAO,EAAE,CAAE;IACXH,OAAO,EAAEhD;EAAW,gBAEpBvE,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAAC9E,WAAA,CAAAuG,UAAU;IACTW,KAAK,EAAE5G,KAAK,CAAC6G,MAAM,CAACC,IAAI,CAACC,QAAS;IAClCC,IAAI,EAAEtF,MAAM,GAAG,WAAW,GAAG,aAAc;IAC3CuF,IAAI,EAAEjH,KAAK,CAACmC,OAAO,CAAC+E;EAAG,CACxB,CACQ,CAET,CACO,CAAC,eAEhBjI,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAAC/E,mBAAA,CAAA0H,kBAAkB;IACjBC,OAAO,EAAE3E,eAAe,GAAGG,qBAAqB,GAAGN,SAAU;IAC7DlB,MAAM,EAAEwB,qBAAqB,GAAG,GAAGxB,MAAM,IAAI,QAAQ,QAAQ,GAAGkB;EAAU,CAC3E,CAAC,eAEFrD,MAAA,CAAAY,OAAA,CAAA2E,aAAA,CAAChF,eAAA,CAAA6H,cAAc;IACbC,OAAO,EAAE1G,QAAS;IAClBc,MAAM,EAAEA,MAAO;IACf6F,OAAO,EAAE7D,WAAY;IACrB8D,cAAc,EAAE7D,kBAAmB;IACnC7C,OAAO,EAAEA,OAAQ;IACjBI,UAAU,EAAEA,UAAW;IACvB8B,cAAc,EAAEA;EAAe,CAChC,CACG,CAAC;AAEX;AAEA,SAAS3C,YAAYA,CAACL,KAAY,EAAE;EAClC,OAAOyH,uBAAU,CAACC,MAAM,CAAC;IACvB3C,cAAc,EAAE;MACd4C,UAAU,EAAE,QAAQ;MACpBC,aAAa,EAAE,KAAK;MACpBC,GAAG,EAAE7H,KAAK,CAACmC,OAAO,CAAC2F,EAAE;MACrBC,eAAe,EAAE;IACnB,CAAC;IACDlD,WAAW,EAAE;MACXmD,IAAI,EAAE;IACR,CAAC;IACDnC,SAAS,EAAE;MACT8B,UAAU,EAAE,QAAQ;MACpBM,eAAe,EAAE,aAAa;MAC9BC,WAAW,EAAElI,KAAK,CAAC6G,MAAM,CAACsB,KAAK,CAACC,OAAO;MACvCC,YAAY,EAAErI,KAAK,CAACsI,MAAM,CAACC,GAAG;MAC9BC,WAAW,EAAE,CAAC;MACdZ,aAAa,EAAE,KAAK;MACpBa,SAAS,EAAE,EAAE;MACbC,iBAAiB,EAAE1I,KAAK,CAACmC,OAAO,CAACwG,EAAE;MACnCZ,eAAe,EAAE/H,KAAK,CAACmC,OAAO,CAAC2F,EAAE;MACjCc,KAAK,EAAE;IACT,CAAC;IACD9C,iBAAiB,EAAE;MACjBmC,eAAe,EAAEjI,KAAK,CAAC6G,MAAM,CAACgC,OAAO,CAACtI,QAAQ;MAC9C2H,WAAW,EAAElI,KAAK,CAAC6G,MAAM,CAACiC,MAAM,CAACvI;IACnC,CAAC;IACDwF,cAAc,EAAE;MACdmC,WAAW,EAAElI,KAAK,CAAC6G,MAAM,CAACkC,MAAM,CAACvH;IACnC,CAAC;IACDiF,cAAc,EAAE;MACdkB,UAAU,EAAE,QAAQ;MACpBK,IAAI,EAAE,CAAC;MACPJ,aAAa,EAAE,KAAK;MACpBoB,cAAc,EAAE,QAAQ;MACxBP,SAAS,EAAE;IACb,CAAC;IACDzC,QAAQ,EAAE;MACRiD,WAAW,EAAEjJ,KAAK,CAACmC,OAAO,CAAC2F;IAC7B,CAAC;IACD/G,WAAW,EAAE;MACX6F,KAAK,EAAE5G,KAAK,CAAC6G,MAAM,CAACC,IAAI,CAACC,QAAQ;MACjCiB,IAAI,EAAE,CAAC;MACPkB,UAAU,EAAElJ,KAAK,CAACmJ,UAAU,CAACD,UAAU,CAACE,IAAI;MAC5CC,UAAU,EAAErJ,KAAK,CAACmJ,UAAU,CAACE,UAAU,CAACC,SAAS;MACjDC,SAAS,EAAE;IACb,CAAC;IACD7C,UAAU,EAAE;MACViB,UAAU,EAAE,QAAQ;MACpBC,aAAa,EAAE,KAAK;MACpB4B,UAAU,EAAExJ,KAAK,CAACmC,OAAO,CAAC2F;IAC5B,CAAC;IACDtC,aAAa,EAAE;MACboB,KAAK,EAAE5G,KAAK,CAAC6G,MAAM,CAACC,IAAI,CAACsB,OAAO;MAChCJ,IAAI,EAAE,CAAC;MACPkB,UAAU,EAAElJ,KAAK,CAACmJ,UAAU,CAACD,UAAU,CAACE,IAAI;MAC5CC,UAAU,EAAErJ,KAAK,CAACmJ,UAAU,CAACE,UAAU,CAACC,SAAS;MACjDC,SAAS,EAAE;IACb,CAAC;IACD7D,OAAO,EAAE;MACPkD,KAAK,EAAE;IACT;EACF,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/commonjs/Select.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=Select.types.js.map

package/lib/commonjs/Select.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["Select.types.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/SelectChip.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectChip = SelectChip;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _icons = require("@wecareu/icons");
+var _theme = require("@wecareu/theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function SelectChip({
+  disabled,
+  label,
+  onRemove
+}) {
+  const theme = (0, _theme.useTheme)();
+  const styles = _react.default.useMemo(() => createStyles(theme), [theme]);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    accessibilityLabel: label,
+    accessibilityRole: "none",
+    style: [styles.chip, disabled && styles.chipDisabled]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    numberOfLines: 1,
+    style: [styles.label, disabled && styles.labelDisabled]
+  }, label), onRemove && !disabled ? /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    accessibilityHint: `Remove ${label}`,
+    accessibilityLabel: `Remove ${label}`,
+    accessibilityRole: "button",
+    hitSlop: 4,
+    onPress: onRemove,
+    style: styles.removeButton
+  }, /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+    color: theme.colors.brand.primary,
+    name: "close",
+    size: 10
+  })) : null);
+}
+function createStyles(theme) {
+  return _reactNative.StyleSheet.create({
+    chip: {
+      alignItems: 'center',
+      backgroundColor: theme.colors.surface.secondary,
+      borderColor: theme.colors.brand.primary,
+      borderRadius: theme.radius.sm,
+      borderWidth: 1,
+      flexDirection: 'row',
+      flexShrink: 1,
+      gap: 4,
+      maxWidth: 120,
+      paddingHorizontal: theme.spacing.xs,
+      paddingVertical: 2
+    },
+    chipDisabled: {
+      backgroundColor: theme.colors.surface.disabled,
+      borderColor: theme.colors.border.disabled
+    },
+    label: {
+      color: theme.colors.brand.primary,
+      flexShrink: 1,
+      fontFamily: theme.typography.fontFamily.caption,
+      fontSize: theme.typography.fontSize.xs,
+      lineHeight: theme.typography.lineHeight.labelSmall
+    },
+    labelDisabled: {
+      color: theme.colors.text.disabled
+    },
+    removeButton: {
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  });
+}
+//# sourceMappingURL=SelectChip.js.map

package/lib/commonjs/SelectChip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_icons","_theme","e","__esModule","default","SelectChip","disabled","label","onRemove","theme","useTheme","styles","React","useMemo","createStyles","createElement","View","accessibilityLabel","accessibilityRole","style","chip","chipDisabled","Text","numberOfLines","labelDisabled","Pressable","accessibilityHint","hitSlop","onPress","removeButton","Icon","color","colors","brand","primary","name","size","StyleSheet","create","alignItems","backgroundColor","surface","secondary","borderColor","borderRadius","radius","sm","borderWidth","flexDirection","flexShrink","gap","maxWidth","paddingHorizontal","spacing","xs","paddingVertical","border","fontFamily","typography","caption","fontSize","lineHeight","labelSmall","text","justifyContent"],"sourceRoot":"..\\..\\src","sources":["SelectChip.tsx"],"mappings":"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","ignoreList":[]}