@ecohouse/ui 0.1.22 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +6 -2
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +6 -2
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/SegmentedToggle/SegmentedToggle.tsx +10 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ecohouse/ui",
3
- "version": "0.1.22",
3
+ "version": "0.1.24",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",
package/src/components/SegmentedToggle/SegmentedToggle.tsx CHANGED
@@ -37,6 +37,7 @@ export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "childre
37
37
  const ICON_SIZE = 20;
38
38
  const ANIMATION_DURATION = 200;
39
39
  const OPTION_HORIZONTAL_PADDING = 16;
40
+ const OPTION_MIN_WIDTH = 97;
40
41
 
41
42
  export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedToggleProps>(
42
43
  function SegmentedToggle(
@@ -71,7 +72,9 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
71
72
  const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
72
73
  const widestContentWidth = Math.max(...contentWidths);
73
74
  const contentBasedOptionWidth =
74
- widestContentWidth > 0 ? widestContentWidth + OPTION_HORIZONTAL_PADDING * 2 : 0;
75
+ widestContentWidth > 0
76
+ ? Math.max(OPTION_MIN_WIDTH, widestContentWidth + OPTION_HORIZONTAL_PADDING * 2)
77
+ : 0;
75
78
  const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
76
79
  const indicatorTranslateX = progress.interpolate({
77
80
  inputRange: [0, 1],
@@ -142,7 +145,9 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
142
145
  accessibilityState={{ selected, disabled }}
143
146
  style={[
144
147
  styles.option,
145
- fullWidth ? styles.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth },
148
+ fullWidth
149
+ ? styles.optionFullWidth
150
+ : [styles.optionContentWidth, optionWidth > 0 && { width: optionWidth }],
146
151
  ]}
147
152
  >
148
153
  <View
@@ -208,6 +213,9 @@ const styles = StyleSheet.create({
208
213
  flex: 1,
209
214
  minWidth: 0,
210
215
  },
216
+ optionContentWidth: {
217
+ minWidth: OPTION_MIN_WIDTH,
218
+ },
211
219
  activeIndicator: {
212
220
  position: "absolute",
213
221
  top: 4,