@webority-technologies/mobile 0.0.15 → 0.0.20

package/lib/commonjs/components/Rating/Rating.js

@@ -87,6 +87,8 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     loading = false,
     accessibilityLabel,
     style,
+    containerStyle,
+    starContainerStyle,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
@@ -100,17 +102,31 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const handleStarLayout = (0, _react.useCallback)(e => {
     starWidthRef.current = e.nativeEvent.layout.width;
   }, []);
-  const scaleRefs = (0, _react.useRef)([]);
-  if (scaleRefs.current.length !== max) {
-    scaleRefs.current = Array.from({
-      length: max
-    }, (_, i) => scaleRefs.current[i] ?? new _reactNative.Animated.Value(1));
-  }
+  const scaleMapRef = (0, _react.useRef)(new Map());
+  const scaleRefs = (0, _react.useMemo)(() => {
+    const map = scaleMapRef.current;
+    const out = [];
+    for (let i = 0; i < max; i += 1) {
+      let v = map.get(i);
+      if (!v) {
+        v = new _reactNative.Animated.Value(1);
+        map.set(i, v);
+      }
+      out.push(v);
+    }
+    for (const key of Array.from(map.keys())) {
+      if (key >= max) map.delete(key);
+    }
+    return out;
+  }, [max]);
+  const pulseOnPress = theme.components.rating?.pulseOnPress ?? false;
+  const pulseScale = theme.components.rating?.pulseScale ?? 1.2;
+  const pressHapticEnabled = theme.components.rating?.pressHaptic ?? false;
   const pulse = (0, _react.useCallback)(idx => {
-    const v = scaleRefs.current[idx];
+    const v = scaleRefs[idx];
     if (!v) return;
     _reactNative.Animated.sequence([_reactNative.Animated.timing(v, {
-      toValue: 1.2,
+      toValue: pulseScale,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
@@ -121,14 +137,14 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       mass: theme.motion.spring.bouncy.mass,
       useNativeDriver: true
     })]).start();
-  }, [theme.motion]);
+  }, [theme.motion, pulseScale, scaleRefs]);
   const commit = (0, _react.useCallback)((next, animatedIndex) => {
     if (!interactive || !onChange) return;
     const cleaned = clampToStep(next, max, step);
-    (0, _hapticUtils.triggerHaptic)('selection');
-    if (typeof animatedIndex === 'number') pulse(animatedIndex);
+    if (pressHapticEnabled) (0, _hapticUtils.triggerHaptic)('selection');
+    if (pulseOnPress && typeof animatedIndex === 'number') pulse(animatedIndex);
     onChange(cleaned);
-  }, [interactive, onChange, max, step, pulse]);
+  }, [interactive, onChange, max, step, pulse, pressHapticEnabled, pulseOnPress]);
   const handleStarPress = (0, _react.useCallback)(index => e => {
     if (!interactive) return;
     const w = starWidthRef.current || starSize;
@@ -149,13 +165,15 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const a11yLabel = accessibilityLabel ?? label ?? valueText;
   const stars = [];
   for (let i = 0; i < max; i += 1) {
+    const scaleVal = scaleRefs[i];
+    if (!scaleVal) continue;
     const star = /*#__PURE__*/(0, _jsxRuntime.jsx)(Star, {
       index: i,
       filled: value,
       size: starSize,
       filledColor: filledColor,
       emptyColor: emptyColor,
-      scale: scaleRefs.current[i] ?? new _reactNative.Animated.Value(1)
+      scale: scaleVal
     }, i);
     stars.push(interactive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
       onPress: handleStarPress(i),
@@ -171,7 +189,7 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     }, i));
   }
   const rendered = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.wrapper, style],
+    style: [styles.wrapper, style, containerStyle],
     ref: ref,
     testID: testID,
     children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -181,7 +199,7 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       }],
       children: label
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.row,
+      style: [styles.row, starContainerStyle],
       accessible: true,
       accessibilityRole: interactive ? 'adjustable' : 'text',
       accessibilityLabel: a11yLabel,
@@ -201,15 +219,63 @@ const Rating = exports.Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     })]
   });
   if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RatingSkeleton, {
+      ...props
     });
   }
   return rendered;
 });
 Rating.displayName = 'Rating';
+
+/**
+ * Placeholder shape for `<Rating>`. Row of N star-shaped skeletons sized
+ * exactly like the live stars, plus an optional label line above. The
+ * footprint stays identical between loading and loaded states.
+ */
+const RatingSkeleton = ({
+  max = 5,
+  size = 'md',
+  label,
+  containerStyle,
+  starContainerStyle,
+  style
+}) => {
+  const starSize = resolveSize(size);
+  const stars = Math.max(1, max);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      alignItems: 'flex-start'
+    }, containerStyle, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: [label !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+      shape: "text",
+      width: 80,
+      height: 14,
+      style: {
+        marginBottom: 6
+      }
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [{
+        flexDirection: 'row'
+      }, starContainerStyle],
+      children: Array.from({
+        length: stars
+      }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
+        width: starSize,
+        height: starSize,
+        radius: Math.round(starSize * 0.25),
+        style: i < stars - 1 ? {
+          marginRight: 4
+        } : undefined
+      }, `sk-star-${i}`))
+    })]
+  });
+};
+RatingSkeleton.displayName = 'RatingSkeleton';
+Rating.Skeleton = RatingSkeleton;
 const starStyles = _reactNative.StyleSheet.create({
   starWrap: {
     position: 'relative',

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

@@ -9,32 +9,9 @@ var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _hapticUtils = require("../../utils/hapticUtils.js");
 var _useDebounce = require("../../hooks/useDebounce.js");
-var _index2 = require("../AppIcon/index.js");
+var _FieldBase = require("../FieldBase/FieldBase.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); }
-const sizeMap = {
-  sm: {
-    height: 36,
-    paddingHorizontal: 10,
-    fontSize: 13,
-    iconSize: 16,
-    gap: 6
-  },
-  md: {
-    height: 44,
-    paddingHorizontal: 12,
-    fontSize: 15,
-    iconSize: 18,
-    gap: 8
-  },
-  lg: {
-    height: 52,
-    paddingHorizontal: 14,
-    fontSize: 16,
-    iconSize: 20,
-    gap: 10
-  }
-};
 const CANCEL_WIDTH = 72;
 const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
@@ -50,7 +27,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     leftIcon,
     debounceMs,
     size = 'md',
-    variant = 'filled',
+    variant: variantProp,
     cancelLabel = 'Cancel',
     style,
     accessibilityLabel,
@@ -58,11 +35,21 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     ...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.
+  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'filled';
+  const fieldTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
   const sizeStyles = {
-    ...sizeMap[size],
+    ...fieldTokens,
     ...(theme.components.searchBar?.[size] ?? {})
   };
   const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
+  const fieldText = (0, _FieldBase.resolveFieldTextStyle)(theme, {
+    disabled
+  });
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
 
   // Coerce nullable inputs to '' once at the top so every downstream read is
@@ -73,15 +60,11 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
   const [internalValue, setInternalValue] = (0, _react.useState)(value);
   const debouncedValue = (0, _useDebounce.useDebounce)(internalValue, debounceMs ?? 0);
   const cancelAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-
-  // Keep internal value in sync with controlled value when debouncing.
   (0, _react.useEffect)(() => {
     if (debounceMs === undefined) return;
     if (value !== internalValue) setInternalValue(value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, debounceMs]);
-
-  // Fire debounced onChangeText when debounce is configured.
   const lastSentRef = (0, _react.useRef)(value);
   (0, _react.useEffect)(() => {
     if (debounceMs === undefined) return;
@@ -95,7 +78,6 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
       toValue: showCancelButton ? 1 : 0,
       duration: 200,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
-      // Container width / margin animates with this value, so layout-aware.
       useNativeDriver: false
     }).start();
   }, [showCancelButton, cancelAnim, theme.motion.easing.standard]);
@@ -130,81 +112,86 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
   }, [onSubmit, debounceMs, internalValue, value]);
   const displayValue = debounceMs !== undefined ? internalValue : value;
   const hasValue = displayValue.length > 0;
-  const containerBackground = variant === 'filled' ? theme.colors.background.secondary : theme.colors.background.primary;
-  const containerBorder = variant === 'outlined' ? theme.colors.border.primary : 'transparent';
-
-  // Container shrinks left to make room for cancel button on right.
   const cancelTranslateX = cancelAnim.interpolate({
     inputRange: [0, 1],
     outputRange: [cancelWidth, 0]
   });
   const cancelOpacity = cancelAnim;
+  const fieldMarginRight = cancelAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, cancelWidth + theme.spacing.sm]
+  });
+  const leading = leftIcon ? leftIcon : theme.icons?.search ? theme.icons.search({
+    size: sizeStyles.iconSize,
+    color: theme.colors.text.tertiary
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: {
+      fontSize: sizeStyles.iconSize,
+      color: theme.colors.text.tertiary
+    },
+    children: "\uD83D\uDD0D"
+  });
+  const trailing = hasValue && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: handleClear,
+    hitSlop: 8,
+    accessibilityRole: "button",
+    accessibilityLabel: "Clear search",
+    children: theme.icons?.close ? theme.icons.close({
+      size: sizeStyles.iconSize,
+      color: theme.colors.text.secondary
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: {
+        fontSize: sizeStyles.iconSize,
+        color: theme.colors.text.secondary
+      },
+      children: "\xD7"
+    })
+  }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.root, style],
     testID: testID,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-      style: [styles.searchContainer, {
-        height: sizeStyles.height,
-        paddingHorizontal: sizeStyles.paddingHorizontal,
-        backgroundColor: containerBackground,
-        borderColor: containerBorder,
-        borderWidth: variant === 'outlined' ? 1 : 0,
-        borderRadius: theme.radius.full,
-        opacity: disabled ? 0.55 : 1,
-        marginRight: cancelAnim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, cancelWidth + theme.spacing.sm]
-        })
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.fieldWrap, {
+        marginRight: fieldMarginRight
       }],
-      accessibilityRole: "search",
-      accessibilityLabel: accessibilityLabel ?? placeholder,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.leftSlot, {
-          marginRight: sizeStyles.gap
-        }],
-        children: leftIcon ? leftIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.AppIcon, {
-          name: "search",
-          family: "feather",
-          size: sizeStyles.iconSize,
-          color: theme.colors.text.tertiary
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: ref,
-        style: [styles.input, {
-          fontSize: sizeStyles.fontSize,
-          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
-        }],
-        value: displayValue,
-        onChangeText: handleChangeText,
-        onSubmitEditing: handleSubmit,
-        onFocus: () => setIsFocused(true),
-        onBlur: () => setIsFocused(false),
-        placeholder: placeholder,
-        placeholderTextColor: theme.colors.text.tertiary,
-        autoFocus: autoFocus,
-        editable: !disabled,
-        returnKeyType: "search",
-        selectionColor: theme.colors.border.focus,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldBase.FieldBase, {
+        size: size,
+        variant: variant,
+        focused: isFocused,
+        disabled: disabled,
+        filled: hasValue,
+        minHeight: sizeStyles.minHeight,
+        paddingHorizontal: sizeStyles.paddingHorizontal,
+        borderRadius: sizeStyles.borderRadius,
+        leading: leading,
+        trailing: trailing,
+        accessibilityRole: "search",
         accessibilityLabel: accessibilityLabel ?? placeholder,
-        accessibilityState: {
-          disabled
-        },
-        ...rest
-      }), hasValue && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        onPress: handleClear,
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: "Clear search",
-        style: [styles.rightSlot, {
-          marginLeft: sizeStyles.gap
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.AppIcon, {
-          name: "x",
-          family: "feather",
-          size: sizeStyles.iconSize,
-          color: theme.colors.text.secondary
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          ref: ref,
+          style: [styles.input, {
+            fontSize: sizeStyles.fontSize,
+            color: fieldText.color,
+            ...fieldText.weightStyle
+          }],
+          value: displayValue,
+          onChangeText: handleChangeText,
+          onSubmitEditing: handleSubmit,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          placeholder: placeholder,
+          placeholderTextColor: fieldText.placeholderColor,
+          autoFocus: autoFocus,
+          editable: !disabled,
+          returnKeyType: "search",
+          selectionColor: (0, _FieldBase.resolveVariantColors)(theme, variant).borderFocused,
+          accessibilityLabel: accessibilityLabel ?? placeholder,
+          accessibilityState: {
+            disabled
+          },
+          ...rest
         })
-      }) : null]
+      })
     }), showCancel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       pointerEvents: showCancelButton ? 'auto' : 'none',
       style: [styles.cancelWrap, {
@@ -242,14 +229,8 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     position: 'relative',
     overflow: 'hidden'
   },
-  searchContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  leftSlot: {
-    alignItems: 'center',
-    justifyContent: 'center'
+  fieldWrap: {
+    flex: 1
   },
   input: {
     flex: 1,
@@ -257,10 +238,6 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     margin: 0,
     includeFontPadding: false
   },
-  rightSlot: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
   cancelWrap: {
     position: 'absolute',
     right: 0,

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

@@ -42,13 +42,24 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
     tone = 'primary',
     accessibilityLabel,
     style,
+    containerStyle,
     segmentStyle,
+    selectedIndicatorStyle,
     textStyle,
+    labelStyle,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
+  const segTheme = theme.components.segmentedControl;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const baseSize = sizeMap[size];
+  const sizeStyles = {
+    height: segTheme?.[size]?.height ?? baseSize.height,
+    fontSize: segTheme?.[size]?.fontSize ?? baseSize.fontSize,
+    paddingHorizontal: segTheme?.[size]?.paddingHorizontal ?? baseSize.paddingHorizontal
+  };
+  const trackPadding = segTheme?.trackPadding ?? TRACK_PADDING;
+  const changeHapticEnabled = segTheme?.changeHaptic ?? false;
 
   // 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
@@ -59,10 +70,10 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
   const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
   const thumbTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
-  const segmentWidth = trackWidth > 0 ? (trackWidth - TRACK_PADDING * 2) / Math.max(segments.length, 1) : 0;
+  const segmentWidth = trackWidth > 0 ? (trackWidth - trackPadding * 2) / Math.max(segments.length, 1) : 0;
   const animateThumb = (0, _react.useCallback)((index, segWidth) => {
     if (segWidth <= 0) return;
-    const targetX = TRACK_PADDING + segWidth * index;
+    const targetX = trackPadding + segWidth * index;
     const spring = theme.motion.spring.snappy;
     _reactNative.Animated.spring(thumbTranslateX, {
       toValue: targetX,
@@ -86,9 +97,9 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
   const handlePress = (0, _react.useCallback)(segment => {
     if (disabled) return;
     if (segment.value === value) return;
-    (0, _index2.triggerHaptic)('selection');
+    if (changeHapticEnabled) (0, _index2.triggerHaptic)('selection');
     onChange(segment.value);
-  }, [disabled, onChange, value]);
+  }, [disabled, onChange, value, changeHapticEnabled]);
   const thumbBg = tone === 'primary' ? theme.colors.background.elevated : theme.colors.background.elevated;
   const activeTextColor = tone === 'primary' ? theme.colors.text.primary : theme.colors.text.primary;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -100,23 +111,24 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
       height: sizeStyles.height,
       borderRadius: theme.radius.md,
       backgroundColor: theme.colors.background.tertiary,
-      padding: TRACK_PADDING,
+      padding: trackPadding,
       opacity: disabled ? 0.55 : 1,
       alignSelf: fullWidth ? 'stretch' : 'flex-start'
-    }, style],
+    }, containerStyle, style],
     onLayout: handleTrackLayout,
     children: [segmentWidth > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       pointerEvents: "none",
       style: [styles.thumb, {
+        top: trackPadding,
         width: segmentWidth,
-        height: sizeStyles.height - TRACK_PADDING * 2,
+        height: sizeStyles.height - trackPadding * 2,
         borderRadius: theme.radius.sm,
         backgroundColor: thumbBg,
         transform: [{
           translateX: thumbTranslateX
         }],
         ...theme.shadows.sm
-      }]
+      }, selectedIndicatorStyle]
     }) : null, segments.map(segment => {
       const isActive = segment.value === value;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
@@ -142,7 +154,7 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
             color: isActive ? activeTextColor : theme.colors.text.tertiary,
             fontSize: sizeStyles.fontSize,
             fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
-          }, textStyle],
+          }, textStyle, labelStyle],
           numberOfLines: 1,
           children: segment.label
         })]
@@ -159,7 +171,6 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
   },
   thumb: {
     position: 'absolute',
-    top: TRACK_PADDING,
     left: 0
   },
   segment: {