@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -0,0 +1,244 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SearchBar = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _useDebounce = require("../../hooks/useDebounce.js");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _mergeRefs = require("../../utils/mergeRefs.js");
+var _defaultIcons = require("../AppIcon/defaultIcons.js");
+var _slotIcon = require("../AppIcon/slotIcon.js");
+var _FieldBase = require("../FieldBase/FieldBase.js");
+var _useFloatingLabel = require("../FieldBase/useFloatingLabel.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value: rawValue,
+    onChangeText,
+    onSubmit,
+    placeholder = 'Search…',
+    autoFocus = false,
+    disabled = false,
+    onClear,
+    leftIcon,
+    debounceMs,
+    size = 'md',
+    variant: variantProp,
+    borderRadius: borderRadiusProp,
+    label,
+    labelMode = 'top',
+    labelStyle,
+    haptic,
+    style,
+    accessibilityLabel,
+    testID,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  // Resolution chain mirrors every other field-family control: caller prop →
+  // component-specific token (`components.searchBar.defaultVariant`) → shared
+  // field-family token (`components.field.defaultVariant`) → library default.
+  // Library default stays `'filled'` so SearchBar reads as the traditional
+  // pill-shaped, borderless search box when no theme opinion is expressed.
+  // `underline` is the field family's bottom-rule row: no fill, no pill, the
+  // magnifier and text flush with the rule's ends, like Input's underline.
+  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'filled';
+  const isUnderline = variant === 'underline';
+  const fieldTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
+  const sizeStyles = {
+    ...fieldTokens,
+    ...(theme.components.searchBar?.[size] ?? {})
+  };
+  const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
+    disabled
+  });
+  // A tap anywhere on the box (padding, icon, gap) focuses the input, not
+  // only a tap on its text.
+  const inputRef = (0, _react.useRef)(null);
+  const setInputRef = (0, _react.useMemo)(() => (0, _mergeRefs.mergeRefs)(inputRef, ref), [ref]);
+  const focusInput = (0, _react.useCallback)(() => {
+    if (!disabled) {
+      inputRef.current?.focus();
+    }
+  }, [disabled]);
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+
+  // Coerce nullable inputs to '' once at the top so every downstream read is
+  // a guaranteed string. Required when consumers pass `value={state}` where
+  // `state` may be `undefined` / `null` before being initialised.
+  const value = typeof rawValue === 'string' ? rawValue : '';
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [internalValue, setInternalValue] = (0, _react.useState)(value);
+  const debouncedValue = (0, _useDebounce.useDebounce)(internalValue, debounceMs ?? 0);
+
+  // Equivalent-mutant note: removing the `debounceMs === undefined` guard
+  // below cannot change observable behaviour. `internalValue` is only ever
+  // read (via `displayValue`) when `debounceMs !== undefined`; without the
+  // guard, a non-debounced instance would keep resyncing `internalValue`
+  // from `value` on every prop change, but that resynced value is never
+  // displayed or sent anywhere while non-debounced, so no test can observe
+  // the difference.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: syncs the internal draft FROM the `value` prop; adding `internalValue` would revert every keystroke while the debounce is still pending
+  (0, _react.useEffect)(() => {
+    if (debounceMs === undefined) {
+      return;
+    }
+    if (value !== internalValue) {
+      setInternalValue(value);
+    }
+  }, [value, debounceMs]);
+  const lastSentRef = (0, _react.useRef)(value);
+  (0, _react.useEffect)(() => {
+    if (debounceMs === undefined) {
+      return;
+    }
+    if (debouncedValue === lastSentRef.current) {
+      return;
+    }
+    lastSentRef.current = debouncedValue;
+    onChangeText(debouncedValue);
+  }, [debouncedValue, debounceMs, onChangeText]);
+  const handleChangeText = (0, _react.useCallback)(text => {
+    if (debounceMs !== undefined) {
+      setInternalValue(text);
+      return;
+    }
+    onChangeText(text);
+  }, [debounceMs, onChangeText]);
+  const handleClear = (0, _react.useCallback)(() => {
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _hapticUtils.triggerHaptic)(h);
+    }
+    if (debounceMs !== undefined) {
+      setInternalValue('');
+      lastSentRef.current = '';
+    }
+    onChangeText('');
+    onClear?.();
+  }, [haptic, debounceMs, onChangeText, onClear]);
+  const handleSubmit = (0, _react.useCallback)(() => {
+    onSubmit?.(debounceMs !== undefined ? internalValue : value);
+  }, [onSubmit, debounceMs, internalValue, value]);
+  const displayValue = debounceMs !== undefined ? internalValue : value;
+  const hasValue = displayValue.length > 0;
+  const leadingState = {
+    size: sizeStyles.iconSize,
+    color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary,
+    disabled
+  };
+  const leading = leftIcon ? (0, _slotIcon.renderSlotIcon)(leftIcon, leadingState) : (theme.icons?.search ?? _defaultIcons.defaultIcons.search)(leadingState);
+
+  // Floating label: rests over the text past the magnifier, rises on focus or
+  // value; the outlined pill gets the field family's notch. Static labels use
+  // FieldLabel above the row.
+  const showFloatingLabel = Boolean(label) && labelMode === 'float';
+  const floating = (0, _useFloatingLabel.useFloatingLabel)({
+    label,
+    enabled: showFloatingLabel,
+    floated: isFocused || hasValue,
+    variant,
+    sizeTokens: {
+      ...fieldTokens,
+      ...sizeStyles
+    },
+    leadingOffset: sizeStyles.iconSize + theme.spacing.md,
+    trailingOffset: hasValue ? sizeStyles.iconSize + theme.spacing.md : 0,
+    paddingLeft: isUnderline ? 0 : sizeStyles.paddingHorizontal,
+    color: theme.colors.field.label,
+    style: labelStyle
+  });
+  const trailing = hasValue && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: handleClear,
+    hitSlop: 8,
+    accessibilityRole: "button",
+    accessibilityLabel: "Clear search",
+    children: (theme.icons?.close ?? _defaultIcons.defaultIcons.close)({
+      size: sizeStyles.iconSize,
+      color: theme.colors.text.secondary
+    })
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: style,
+    testID: testID,
+    children: [label && !showFloatingLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldLabel, {
+      size: size,
+      style: labelStyle,
+      children: label
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.root,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.fieldWrap,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldBase, {
+          size: size,
+          variant: variant,
+          focused: isFocused,
+          disabled: disabled,
+          filled: hasValue,
+          minHeight: sizeStyles.minHeight,
+          paddingHorizontal: isUnderline ? 0 : sizeStyles.paddingHorizontal,
+          borderRadius: borderRadiusProp ?? sizeStyles.borderRadius,
+          leading: leading,
+          trailing: trailing,
+          topNotch: floating.topNotch,
+          onPress: focusInput,
+          pressFeedback: false,
+          accessibilityRole: "search",
+          accessibilityLabel: accessibilityLabel ?? placeholder,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            ref: setInputRef,
+            style: [styles.input, {
+              fontSize: sizeStyles.fontSize,
+              color: fieldText.color,
+              ...fieldText.weightStyle
+            }],
+            value: displayValue,
+            onChangeText: handleChangeText,
+            onSubmitEditing: handleSubmit,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            placeholder: showFloatingLabel && !(isFocused || hasValue) ? undefined : placeholder,
+            placeholderTextColor: fieldText.placeholderColor,
+            autoFocus: autoFocus,
+            editable: !disabled,
+            returnKeyType: "search",
+            selectionColor: (0, _FieldBase.resolveVariantColors)(theme, variant).borderFocusedRepresentative,
+            accessibilityLabel: accessibilityLabel ?? placeholder,
+            accessibilityState: {
+              disabled
+            },
+            ...rest
+          })
+        }), floating.node]
+      })
+    })]
+  });
+});
+SearchBar.displayName = 'SearchBar';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    position: 'relative',
+    // The floated label sits over the box's top edge.
+    overflow: 'visible'
+  },
+  fieldWrap: {
+    flex: 1,
+    position: 'relative',
+    overflow: 'visible'
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = SearchBar;
+//# sourceMappingURL=SearchBar.js.map

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

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

@@ -0,0 +1,320 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.segmentedControlTrackPadding = exports.segmentedControlSizes = exports.default = exports.SegmentedControl = void 0;
+var _react = 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 _corners = require("../../utils/corners.js");
+var _slotIcon = require("../AppIcon/slotIcon.js");
+var _SquircleFill = require("../SquircleFill/SquircleFill.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * SegmentedControl — iOS-style segmented control.
+ *
+ * Rounded container with equal-width segments and an animated thumb that
+ * springs between selected segments. Theme-aware, dark-mode friendly,
+ * fully accessible (radiogroup / radio roles + selected state).
+ *
+ * The `variant` prop borrows Tabs' other two looks: `underline` slides a bar
+ * under the selected label above a hairline divider, `pills` slides a tinted
+ * pill behind it. Both drop the filled track and its inset; the indicator is
+ * the same Animated.View as the thumb, drawn with that look's colour, corner
+ * and vertical extent. It is a look, not a semantic change: the roles stay
+ * radiogroup / radio, and screen navigation is still Tabs.
+ */
+
+/** The same three looks as `Tabs`; `segmented` is the filled track with a thumb. */
+
+/** A theme radius token or a pixel number. */
+
+/** What a segment knows about itself when it draws its icon. */
+
+/**
+ * A segment icon speaks the library's slot language: an AppIcon name
+ * (`icon: 'sun-1'`), `{ name, variant }`, a render function that gets
+ * `{ color, size, selected, disabled }`, or any node drawn as is. A name is
+ * drawn in the label's colour at the size's icon size.
+ */
+
+/**
+ * The control's sizes. Exported so `Tabs`' segmented variant draws from the
+ * same numbers and the two looks cannot drift.
+ */
+const segmentedControlSizes = exports.segmentedControlSizes = {
+  sm: {
+    height: 32,
+    fontSize: 12,
+    paddingHorizontal: 10,
+    iconSize: 14
+  },
+  md: {
+    height: 40,
+    fontSize: 14,
+    paddingHorizontal: 14,
+    iconSize: 16
+  },
+  lg: {
+    height: 48,
+    fontSize: 16,
+    paddingHorizontal: 18,
+    iconSize: 18
+  }
+};
+
+/** Inset between the track edge and the thumb; also read by `Tabs`' segmented variant. */
+const segmentedControlTrackPadding = exports.segmentedControlTrackPadding = 4;
+const sizeMap = segmentedControlSizes;
+const TRACK_PADDING = segmentedControlTrackPadding;
+const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    segments,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    size = 'md',
+    fullWidth = true,
+    disabled = false,
+    tone = 'primary',
+    variant = 'segmented',
+    radius,
+    haptic,
+    accessibilityLabel,
+    style,
+    containerStyle,
+    segmentStyle,
+    selectedIndicatorStyle,
+    textStyle,
+    labelStyle,
+    testID
+  } = props;
+  const [current, setCurrent] = (0, _index.useControllableState)({
+    value: valueProp,
+    defaultValue: defaultValue ?? segments[0]?.value,
+    onChange
+  });
+  const theme = (0, _index2.useTheme)();
+  const segTheme = theme.components.segmentedControl;
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const baseSize = sizeMap[size];
+  const sizeStyles = {
+    height: segTheme?.[size]?.height ?? baseSize.height,
+    fontSize: segTheme?.[size]?.fontSize ?? baseSize.fontSize,
+    paddingHorizontal: segTheme?.[size]?.paddingHorizontal ?? baseSize.paddingHorizontal,
+    iconSize: segTheme?.[size]?.iconSize ?? baseSize.iconSize
+  };
+  const isSegmented = variant === 'segmented';
+  const isUnderline = variant === 'underline';
+  const isPills = variant === 'pills';
+  // Only the filled track has an inset; the underline and the pill sit in a
+  // row that spans the control's full height and width.
+  const trackPadding = isSegmented ? segTheme?.trackPadding ?? TRACK_PADDING : 0;
+  const underlineHeight = segTheme?.underlineHeight ?? 2;
+  const pillInset = segTheme?.pillInset ?? 4;
+
+  // Corner radius: the prop, else the theme token, else each variant's own
+  // default (md track with an sm thumb, full pill, square underline). With a
+  // radius given, the thumb nests inside the track with a concentric corner
+  // (the track's minus the inset), never negative.
+  const chosenRadius = typeof radius === 'number' ? radius : radius ? theme.radius[radius] : segTheme?.radius;
+  const trackRadius = chosenRadius ?? theme.radius.md;
+  const thumbRadius = chosenRadius === undefined ? theme.radius.sm : Math.max(chosenRadius - trackPadding, 0);
+  const pillRadius = chosenRadius ?? theme.radius.full;
+  const underlineRadius = chosenRadius ?? 0;
+
+  // Track width is measured from onLayout. Thumb width is a regular number (not
+  // animated) — `width` cannot be driven by the native animated module, and mixing
+  // a JS-driven width with a native-driven translateX inside `Animated.parallel`
+  // sends the parallel composite into the native driver and JS setValue/timing
+  // calls on the same value then throw "moved to native". Keep width as state and
+  // only animate translateX via the native driver.
+  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+  const thumbTranslateX = (0, _react.useRef)((0, _index2.createAnimatedValue)(0)).current;
+  const activeIndex = Math.max(0, segments.findIndex(s => s.value === current));
+  const segmentWidth = trackWidth > 0 ? (trackWidth - trackPadding * 2) / Math.max(segments.length, 1) : 0;
+  const animateThumb = (0, _react.useCallback)((index, segWidth) => {
+    if (segWidth <= 0) {
+      return undefined;
+    }
+    // The thumb lives in the row inside the track's inset, so its origin is
+    // the first segment's left edge.
+    const targetX = segWidth * index;
+    const spring = theme.motion.spring.snappy;
+    // Clamped: the `snappy` preset is underdamped and would carry the thumb
+    // past the segment and back, poking it out of the track at either end.
+    // With the clamp it decelerates into the target and stops there.
+    const anim = _reactNative.Animated.spring(thumbTranslateX, {
+      toValue: targetX,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      overshootClamping: true,
+      useNativeDriver: true
+    });
+    anim.start();
+    return anim;
+  }, [theme.motion.spring.snappy, thumbTranslateX]);
+  (0, _react.useEffect)(() => {
+    if (segmentWidth > 0) {
+      const anim = animateThumb(activeIndex, segmentWidth);
+      return () => anim?.stop();
+    }
+  }, [activeIndex, segmentWidth, animateThumb]);
+  const handleTrackLayout = (0, _react.useCallback)(e => {
+    const width = e.nativeEvent.layout.width;
+    if (width !== trackWidth) {
+      setTrackWidth(width);
+    }
+  }, [trackWidth]);
+  const handlePress = (0, _react.useCallback)(segment => {
+    if (disabled) {
+      return;
+    }
+    if (segment.value === current) {
+      return;
+    }
+    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _index3.triggerHaptic)(h);
+    }
+    setCurrent(segment.value);
+  }, [disabled, setCurrent, current, haptic]);
+
+  // The indicator per look: the elevated thumb, the brand-colour bar, or the
+  // tinted pill; the same colours Tabs gives its three variants.
+  const indicatorBg = isSegmented ? theme.colors.background.elevated : isPills ? theme.colors.primaryMuted : theme.colors.primary;
+  const indicatorRadius = isSegmented ? thumbRadius : isPills ? pillRadius : underlineRadius;
+  // The selected label and icon: brand colour by default (like the active
+  // tab), the dark text colour on the neutral tone.
+  const activeTextColor = tone === 'neutral' ? theme.colors.text.primary : theme.colors.primary;
+
+  // Android smooth corners: the track's fill is drawn as an SVG squircle over
+  // a transparent host. The thumb keeps its native corner: its radius sits
+  // under the squircle floor. It is flat (no shadow), by the team's choice.
+  // The other two looks have no fill, so the hook only forwards the layout.
+  const trackFill = theme.colors.background.tertiary;
+  const squircle = (0, _SquircleFill.useSquircle)(isSegmented, trackRadius, handleTrackLayout);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: ref,
+    accessibilityRole: "radiogroup",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    style: [styles.track, {
+      height: sizeStyles.height,
+      opacity: disabled ? 0.55 : 1,
+      alignSelf: fullWidth ? 'stretch' : 'flex-start'
+    }, isSegmented ? {
+      borderRadius: trackRadius,
+      ..._corners.smoothCorners,
+      backgroundColor: squircle.active ? 'transparent' : trackFill,
+      padding: trackPadding
+    } : isUnderline ? {
+      borderBottomColor: theme.colors.border.secondary,
+      borderBottomWidth: _reactNative.StyleSheet.hairlineWidth
+    } : null, containerStyle, style],
+    onLayout: squircle.onLayout,
+    children: [squircle.active && squircle.size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SquircleFill.SquircleFill, {
+      width: squircle.size.width,
+      height: squircle.size.height,
+      radius: trackRadius,
+      fill: trackFill
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.row,
+      children: [segmentWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        pointerEvents: "none",
+        style: [styles.thumb, isSegmented ? {
+          top: 0,
+          height: sizeStyles.height - trackPadding * 2
+        } : isPills ? {
+          top: pillInset,
+          bottom: pillInset
+        } : {
+          bottom: 0,
+          height: underlineHeight
+        }, {
+          width: segmentWidth,
+          borderRadius: indicatorRadius,
+          ..._corners.smoothCorners,
+          backgroundColor: indicatorBg,
+          transform: [{
+            translateX: thumbTranslateX
+          }]
+        }, selectedIndicatorStyle]
+      }) : null, segments.map(segment => {
+        const isActive = segment.value === current;
+        const labelColor = isActive ? activeTextColor : theme.colors.text.tertiary;
+        const iconNode = (0, _slotIcon.renderSlotIcon)(segment.icon, {
+          color: labelColor,
+          size: sizeStyles.iconSize,
+          selected: isActive,
+          disabled
+        });
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+          onPress: () => handlePress(segment),
+          disabled: disabled,
+          accessibilityRole: "radio",
+          accessibilityLabel: segment.label,
+          accessibilityState: {
+            selected: isActive,
+            disabled
+          },
+          style: ({
+            pressed
+          }) => [styles.segment, {
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            opacity: pressed && !isActive ? 0.7 : 1
+          }, segmentStyle],
+          children: [iconNode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.segmentIcon,
+            children: iconNode
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.segmentLabel, {
+              color: labelColor,
+              fontSize: sizeStyles.fontSize,
+              fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
+            }, textStyle, labelStyle],
+            numberOfLines: 1,
+            children: segment.label
+          })]
+        }, String(segment.value));
+      })]
+    })]
+  });
+});
+SegmentedControl.displayName = 'SegmentedControl';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  track: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    position: 'relative'
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  thumb: {
+    position: 'absolute',
+    left: 0
+  },
+  segment: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  segmentIcon: {
+    marginRight: 6
+  },
+  segmentLabel: {
+    includeFontPadding: false
+  }
+});
+var _default = exports.default = SegmentedControl;
+//# sourceMappingURL=SegmentedControl.js.map

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

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