@ecohouse/ui 0.1.14 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -36,6 +36,7 @@ export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "childre
 
 const ICON_SIZE = 20;
 const ANIMATION_DURATION = 200;
+const OPTION_HORIZONTAL_PADDING = 16;
 
 export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedToggleProps>(
   function SegmentedToggle(
@@ -69,7 +70,8 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     const [containerWidth, setContainerWidth] = useState(0);
     const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
     const widestContentWidth = Math.max(...contentWidths);
-    const contentBasedOptionWidth = widestContentWidth > 0 ? widestContentWidth + 24 * 2 : 0;
+    const contentBasedOptionWidth =
+      widestContentWidth > 0 ? widestContentWidth + OPTION_HORIZONTAL_PADDING * 2 : 0;
     const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
     const indicatorTranslateX = progress.interpolate({
       inputRange: [0, 1],
@@ -193,7 +195,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 24,
+    paddingHorizontal: OPTION_HORIZONTAL_PADDING,
     borderRadius: 60,
   },
   optionContent: {

package/src/theme/colors.test.ts

@@ -3,6 +3,7 @@ import { colors } from "./colors";
 import {
   buttonTypography,
   inputTypography,
+  segmentedToggleTypography,
   selectTypography,
   textareaTypography,
 } from "./typography";
@@ -20,6 +21,8 @@ describe("design tokens", () => {
     expect(colors.whiteAlpha5).toBe("#FFFFFF0D");
     expect(buttonTypography.lg.fontSize).toBe(14);
     expect(buttonTypography.lg.fontWeight).toBe("600");
+    expect(segmentedToggleTypography.fontSize).toBe(12);
+    expect(segmentedToggleTypography.lineHeight).toBe(12);
   });
 
   it("keeps Input, Select, and Textarea field text aligned", () => {

package/src/theme/typography.ts

@@ -38,12 +38,12 @@ export const statCardTypography = {
   letterSpacing: 0,
 } as const;
 
-/** Segmented toggle label — Medium 14, line-height 100%, letter-spacing 0. */
+/** Segmented toggle label — Medium 12, line-height 100%, letter-spacing 0. */
 export const segmentedToggleTypography = {
   fontFamily: fonts.sans,
-  fontSize: 14,
+  fontSize: 12,
   fontWeight: "500" as const,
-  lineHeight: 14,
+  lineHeight: 12,
   letterSpacing: 0,
 } as const;