@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/commonjs/components/Select/Select.js

@@ -0,0 +1,277 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Select = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+var _slotIcon = require("../AppIcon/slotIcon.js");
+var _Chevron = require("../FieldBase/Chevron.js");
+var _FieldBase = require("../FieldBase/FieldBase.js");
+var _OptionSheet = require("../OptionSheet/OptionSheet.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); }
+/**
+ * Select — single + multi select with bottom-sheet picker.
+ *
+ * The trigger is a FieldBase row; the picker itself is the shared OptionSheet
+ * primitive (also behind InlineSelect), so the sheet look + behaviour never
+ * drift between the two. Supports optional client-side search, theme-aware
+ * styling, full a11y, and dark-mode auto.
+ */
+
+// `unknown` here keeps the forwardRef signature non-generic — consumers who
+// pass non-`SelectOption` shapes use the accessor props; type inference is
+// preserved at the call site via the `SelectProps<T>` union.
+const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    options,
+    getOptionLabel,
+    getOptionValue,
+    getOptionDisabled,
+    getOptionDescription,
+    getOptionIcon,
+    placeholder,
+    searchable = false,
+    haptic,
+    label,
+    title,
+    required = false,
+    error,
+    disabled = false,
+    size = 'md',
+    variant: variantProp,
+    leftIcon,
+    rightIcon,
+    chevronColor,
+    chevronSize,
+    borderRadius: borderRadiusProp,
+    accessibilityLabel,
+    style,
+    triggerStyle,
+    textStyle,
+    optionStyle,
+    selectedOptionStyle,
+    optionTextStyle,
+    selectedOptionTextStyle,
+    testID
+  } = props;
+  const multi = props.multi === true;
+
+  // Accessors — fall back to SelectOption-shaped reads when unset so the
+  // default/typed call site keeps zero boilerplate.
+  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 theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const sizeTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
+  const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
+    disabled
+  });
+
+  // Variant resolution mirrors Input: caller prop → component-specific token →
+  // shared field-family token → library default. Lets a brand flip every
+  // input-style control in one place while keeping a Select-specific override.
+  const variant = variantProp ?? theme.components.select?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'outlined';
+
+  // Bridge the legacy fill-colour API (components.select.fillColors[variant])
+  // onto FieldBase's FieldVariantTokens shape — same mapping Input uses.
+  const fillOverrides = (0, _react.useMemo)(() => {
+    const legacy = theme.components.select?.fillColors?.[variant];
+    if (!legacy) {
+      return undefined;
+    }
+    const overrides = {};
+    if (legacy.idleEmpty !== undefined) {
+      overrides.backgroundIdleEmpty = legacy.idleEmpty;
+    }
+    if (legacy.idleFilled !== undefined) {
+      overrides.backgroundIdleFilled = legacy.idleFilled;
+    }
+    if (legacy.focus !== undefined) {
+      overrides.backgroundFocused = legacy.focus;
+    }
+    if (legacy.error !== undefined) {
+      overrides.backgroundError = legacy.error;
+    }
+    if (legacy.disabled !== undefined) {
+      overrides.backgroundDisabled = legacy.disabled;
+    }
+    return Object.keys(overrides).length > 0 ? overrides : undefined;
+  }, [theme.components.select?.fillColors, variant]);
+  const borderRadiusOverride = borderRadiusProp ?? theme.components.select?.borderRadius;
+  const [open, setOpen] = (0, _react.useState)(false);
+
+  // Selection helpers — typed to keep callbacks fully type-safe.
+  const isSelected = (0, _react.useCallback)(optValue => {
+    if (multi) {
+      const arr = props.value ?? [];
+      return arr.includes(optValue);
+    }
+    return props.value === optValue;
+  }, [multi, props.value]);
+  const selectedOptions = (0, _react.useMemo)(() => {
+    if (multi) {
+      const arr = props.value ?? [];
+      return options.filter(o => arr.includes(valueOf(o)));
+    }
+    const v = props.value;
+    if (v === undefined || v === null) {
+      return [];
+    }
+    const found = options.find(o => valueOf(o) === v);
+    return found ? [found] : [];
+  }, [multi, options, props.value, valueOf]);
+  const handleOpen = (0, _react.useCallback)(() => {
+    if (disabled) {
+      return;
+    }
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+    setOpen(true);
+  }, [disabled, haptic]);
+  const handleClose = (0, _react.useCallback)(() => {
+    setOpen(false);
+  }, []);
+  const handleSelect = (0, _react.useCallback)(option => {
+    if (disabledOf(option)) {
+      return;
+    }
+    const optValue = valueOf(option);
+    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index2.triggerHaptic)(h);
+    }
+    if (multi) {
+      const current = props.value ?? [];
+      const next = current.includes(optValue) ? current.filter(v => v !== optValue) : [...current, optValue];
+      props.onChange(next);
+      return;
+    }
+    props.onChange(optValue);
+    handleClose();
+  }, [multi, props, handleClose, disabledOf, valueOf, haptic]);
+
+  // Trigger label / placeholder text.
+  const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => labelOf(o)).join(', ');
+  const showingPlaceholder = selectedOptions.length === 0;
+  const hasError = typeof error === 'string' && error.length > 0;
+
+  // Named slot icons follow the field palette the way Input's do: grey at
+  // rest, dark while the sheet is open, dimmed while disabled.
+  const slotState = {
+    color: disabled ? theme.colors.field.iconDisabled : open ? theme.colors.field.iconFocused : theme.colors.field.icon,
+    size: sizeTokens.iconSize,
+    disabled,
+    focused: open,
+    error: hasError
+  };
+  const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => labelOf(o)).join(', ')}`;
+  const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldLabel, {
+      size: size,
+      required: required,
+      children: label
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      ref: ref,
+      collapsable: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldBase, {
+        size: size,
+        variant: variant,
+        disabled: disabled,
+        error: hasError,
+        filled: selectedOptions.length > 0,
+        onPress: handleOpen,
+        borderRadius: borderRadiusOverride,
+        fillOverrides: fillOverrides
+        // The underline row has no box: its text and chevron sit flush with
+        // the rule's ends, the same as Input's underline text.
+        ,
+        paddingHorizontal: variant === 'underline' ? 0 : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: {
+          disabled,
+          expanded: open
+        },
+        style: triggerStyle,
+        leading: leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          children: (0, _slotIcon.renderSlotIcon)(leftIcon, slotState)
+        }) : null,
+        trailing: rightIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          children: (0, _slotIcon.renderSlotIcon)(rightIcon, slotState)
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chevron.Chevron, {
+          color: chevronColor ?? (disabled ? theme.colors.text.disabled : theme.colors.text.tertiary),
+          size: chevronSize ?? sizeTokens.iconSize,
+          open: open,
+          style: styles.chevron
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: [styles.triggerText, {
+            color: showingPlaceholder ? fieldText.placeholderColor : fieldText.color,
+            fontSize: sizeTokens.fontSize,
+            ...fieldText.weightStyle
+          }, textStyle],
+          numberOfLines: 1,
+          children: [triggerText, showingPlaceholder && required && !label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.RequiredMark, {}) : null]
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldMessage, {
+      size: size,
+      error: true,
+      text: hasError ? error : undefined
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionSheet.OptionSheet, {
+      open: open,
+      onClose: handleClose,
+      title: title,
+      accessibilityLabel: label ?? placeholder ?? 'Options',
+      options: options,
+      labelOf: labelOf,
+      getValue: valueOf,
+      disabledOf: disabledOf,
+      descriptionOf: descriptionOf,
+      iconOf: iconOf,
+      isSelected: isSelected,
+      onSelect: handleSelect,
+      multi: multi,
+      searchable: searchable,
+      optionStyle: optionStyle,
+      selectedOptionStyle: selectedOptionStyle,
+      optionTextStyle: optionTextStyle,
+      selectedOptionTextStyle: selectedOptionTextStyle,
+      searchSelectionColor: (0, _FieldBase.resolveVariantColors)(theme, variant, fillOverrides).borderFocusedRepresentative
+    })]
+  });
+});
+Select.displayName = 'Select';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  label: {
+    includeFontPadding: false
+  },
+  triggerText: {
+    flex: 1,
+    includeFontPadding: false
+  },
+  errorText: {
+    includeFontPadding: false
+  },
+  chevron: {
+    marginLeft: 8
+  }
+});
+var _default = exports.default = Select;
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () {
+    return _Select.Select;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Select.default;
+  }
+});
+var _Select = _interopRequireWildcard(require("./Select.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

package/lib/commonjs/components/Skeleton/Skeleton.js

@@ -0,0 +1,285 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SkeletonText = exports.SkeletonCircle = exports.Skeleton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _Gradient = require("../../theme/Gradient.js");
+var _index2 = require("../../utils/index.js");
+var _corners = require("../../utils/corners.js");
+var _SkeletonClock = require("./SkeletonClock.js");
+var _SkeletonProvider = require("./SkeletonProvider.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); }
+/**
+ * Skeleton — the leaf placeholder primitive.
+ *
+ * Every Skeleton on screen reads the shared shimmer/pulse clock from
+ * `SkeletonProvider` (see SkeletonClock.tsx). One native-driver loop per
+ * provider drives every instance, so 50 placeholders on a list don't spawn
+ * 50 timers and the shimmer bands never drift out of phase.
+ *
+ * Visual:
+ *   - A View with the base color and `overflow: hidden` + radius gives the
+ *     placeholder its shape.
+ *   - For `animation: 'shimmer'`, an Animated.View carrying a 3-stop
+ *     linear gradient (transparent → highlight → transparent) translates
+ *     across the box. The radius clips it to the right outline automatically.
+ *   - For `animation: 'pulse'`, a full-fill Animated.View fades its opacity
+ *     between 0 and 0.6. Cheap and useful for tiny shapes where a sweep
+ *     would barely be visible.
+ *   - For `animation: 'none'` (or when the OS Reduce Motion preference is
+ *     on), just the base color renders.
+ *
+ * `variant` describes the SHAPE: rect (default), rounded (theme.radius.md),
+ * circle (50%), or text (small radius, slightly inset height). Set width /
+ * height directly for full control.
+ */
+
+/** Animation pattern. */
+
+/** Sweep speed for the shimmer band. Ignored for pulse / none. */
+
+/** Pre-defined shape archetype. Plays nicely with `width`/`height` overrides. */
+
+/** `theme.radius` token name or a literal pixel value. */
+
+const resolveRadius = (theme, radius) => {
+  if (typeof radius === 'number') {
+    return radius;
+  }
+  return theme.radius[radius];
+};
+const resolveWidth = width => {
+  if (width === undefined) {
+    return '100%';
+  }
+  if (typeof width === 'number') {
+    return width;
+  }
+  return width;
+};
+const radiusForShape = (theme, shape, width, height, explicit) => {
+  if (explicit !== undefined) {
+    return resolveRadius(theme, explicit);
+  }
+  switch (shape) {
+    case 'circle':
+      // Half the smallest known dimension. If width is a percentage we cannot
+      // resolve here, fall back to height/2, which is the typical caller intent
+      // (square avatars). NOT floored: an odd diameter needs the half pixel or
+      // the shape stops being a circle.
+      return typeof width === 'number' ? Math.min(width, height) / 2 : height / 2;
+    case 'rounded':
+      return theme.radius.md;
+    case 'text':
+      return theme.radius.sm;
+    case 'rect':
+    default:
+      return theme.radius.sm;
+  }
+};
+const Skeleton = ({
+  shape = 'rect',
+  width = '100%',
+  height = 16,
+  radius,
+  variant,
+  speed: _speedProp,
+  colors,
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const defaults = (0, _SkeletonProvider.useSkeletonDefaults)();
+  const clock = (0, _SkeletonClock.useSkeletonClock)();
+  const resolvedVariant = variant ?? defaults.variant ?? 'shimmer';
+  const effectiveVariant = clock.enabled ? resolvedVariant : 'none';
+  const backgroundColor = colors?.background ?? defaults.colors?.background ?? theme.colors.skeleton.background;
+  const highlightColor = colors?.highlight ?? defaults.colors?.highlight ?? theme.colors.skeleton.highlight;
+  const {
+    responsive
+  } = (0, _index2.useScreenDimensions)();
+  const styles = (0, _react.useMemo)(() => buildStyles(), []);
+  const resolvedWidth = resolveWidth(width);
+  const resolvedHeight = responsive.size(height);
+  const borderRadius = radiusForShape(theme, shape, resolvedWidth, resolvedHeight, radius);
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
+  const handleLayout = event => {
+    const next = event.nativeEvent.layout.width;
+    if (next !== containerWidth) {
+      setContainerWidth(next);
+    }
+  };
+
+  // The shimmer band is wider than the box so the gradient feathers off the
+  // edges instead of popping at them. Width = 70% of container, capped to a
+  // sensible minimum so tiny placeholders still get a visible sweep.
+  const bandWidth = (0, _react.useMemo)(() => {
+    if (containerWidth <= 0) {
+      return 0;
+    }
+    return Math.max(48, containerWidth * 0.7);
+  }, [containerWidth]);
+
+  // Interpolate the shared 0→1 clock into translateX. The band starts fully
+  // off the left edge and ends fully off the right edge, so each loop sweeps
+  // the full width regardless of how wide the placeholder is.
+  const translateX = (0, _react.useMemo)(() => {
+    if (containerWidth <= 0) {
+      return 0;
+    }
+    return clock.shimmer.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-bandWidth, containerWidth]
+    });
+  }, [clock.shimmer, bandWidth, containerWidth]);
+  const overlay = (0, _react.useMemo)(() => {
+    if (effectiveVariant === 'none') {
+      return null;
+    }
+    if (effectiveVariant === 'pulse') {
+      // Pulse fades a full-fill highlight overlay in and out. Cheaper than
+      // shimmer and visible at any size.
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        pointerEvents: "none",
+        style: [_reactNative.StyleSheet.absoluteFill, {
+          backgroundColor: highlightColor,
+          opacity: clock.pulse.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 0.55]
+          })
+        }]
+      });
+    }
+    if (containerWidth <= 0) {
+      return null;
+    }
+
+    // 3-stop gradient: transparent → highlight → transparent. Feathered
+    // edges feel premium; a solid band looks like a bug.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      pointerEvents: "none",
+      style: [styles.shimmerBand, {
+        width: bandWidth,
+        transform: [{
+          translateX
+        }],
+        experimental_backgroundImage: [(0, _Gradient.toBackgroundImage)({
+          colors: ['transparent', highlightColor, 'transparent'],
+          locations: [0, 0.5, 1],
+          start: {
+            x: 0,
+            y: 0.5
+          },
+          end: {
+            x: 1,
+            y: 0.5
+          }
+        })]
+      }]
+    });
+  }, [effectiveVariant, highlightColor, clock.pulse, containerWidth, styles.shimmerBand, bandWidth, translateX]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    onLayout: handleLayout,
+    accessible: true,
+    accessibilityLabel: "Loading",
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    accessibilityLiveRegion: "polite",
+    testID: testID,
+    style: [styles.base, {
+      width: resolvedWidth,
+      height: resolvedHeight,
+      borderRadius,
+      ..._corners.smoothCorners,
+      backgroundColor
+    }, style],
+    children: overlay
+  });
+};
+exports.Skeleton = Skeleton;
+Skeleton.displayName = 'Skeleton';
+const SkeletonCircle = ({
+  size,
+  style,
+  ...rest
+}) => {
+  // Only the WIDTH is pre-scaled: Skeleton scales the height it is given but
+  // takes a width as written, so the two would disagree and the circle would
+  // render as an ellipse. Height, border radius and the corner smoothing are
+  // left to Skeleton, which computes exactly these from the same numbers.
+  const {
+    responsive
+  } = (0, _index2.useScreenDimensions)();
+  const diameter = responsive.size(size);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+    ...rest,
+    shape: "circle",
+    width: diameter,
+    height: size,
+    style: style
+  });
+};
+exports.SkeletonCircle = SkeletonCircle;
+SkeletonCircle.displayName = 'SkeletonCircle';
+const SkeletonText = ({
+  lines = 3,
+  lastLineWidth = '60%',
+  spacing,
+  fontSize = 14,
+  variant,
+  speed,
+  radius = 'sm',
+  width = '100%',
+  style,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const gap = spacing ?? theme.spacing.xs;
+  // Passed through raw: Skeleton scales the height it is given, so scaling here
+  // too applied the factor twice and left every line short of the text it
+  // stands in for on any screen but the 390-wide reference.
+  const safeLines = Math.max(1, lines);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    testID: testID,
+    children: Array.from({
+      length: safeLines
+    }).map((_, index) => {
+      const isLast = index === safeLines - 1;
+      const lineWidth = isLast && safeLines > 1 ? lastLineWidth : width;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Skeleton, {
+        shape: "text",
+        width: lineWidth,
+        height: fontSize,
+        radius: radius,
+        variant: variant,
+        speed: speed,
+        style: index < safeLines - 1 ? {
+          marginBottom: gap
+        } : undefined
+      }, index);
+    })
+  });
+};
+exports.SkeletonText = SkeletonText;
+SkeletonText.displayName = 'SkeletonText';
+const buildStyles = () => _reactNative.StyleSheet.create({
+  base: {
+    overflow: 'hidden'
+  },
+  shimmerBand: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0
+  }
+});
+var _default = exports.default = Skeleton;
+//# sourceMappingURL=Skeleton.js.map