@studio-piot/native-ui 0.2.2 → 0.2.3

package/README.md

@@ -10,7 +10,7 @@ The package is the native counterpart of `@studio-piot/ui`. Apps own their palet
 npm install @studio-piot/native-ui
 ```
 
-`Select` peers `@gorhom/bottom-sheet`, `react-native-reanimated`, `react-native-gesture-handler`, and `react-native-screens` (iOS `FullWindowOverlay` so the sheet appears above React Navigation modals). `Slider` peers `@react-native-community/slider`.
+`Select` peers `@gorhom/bottom-sheet`, `react-native-reanimated`, `react-native-gesture-handler`, and `react-native-screens` (iOS `FullWindowOverlay` so the sheet appears above React Navigation modals). `SegmentedControl` uses that same `react-native-reanimated` peer to slide the selection fill. `Slider` peers `@react-native-community/slider`.
 
 ## Docs
 
@@ -20,6 +20,7 @@ npm install @studio-piot/native-ui
 - [Form usage](./docs/components/form.md)
 - [RadioField usage](./docs/components/radio-field.md)
 - [Select usage](./docs/components/select.md)
+- [SegmentedControl usage](./docs/components/segmented-control.md)
 - [Slider usage](./docs/components/slider.md)
 - [Design: theme provider and Button](./docs/superpowers/specs/2026-09-24-theme-provider-button-design.md)
 - [Design: LinkBlocks](./docs/superpowers/specs/2026-09-24-link-blocks-design.md)

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,3 @@
+import type { SegmentedControlProps } from "./types";
+export declare function SegmentedControl<T extends string = string>({ value, onChange, options, label, radius, disabled, backgroundColor: backgroundColorProp, borderColor: borderColorProp, selectedBackgroundColor: selectedBackgroundColorProp, labelColor: labelColorProp, selectedLabelColor: selectedLabelColorProp, titleColor: titleColorProp, style, }: SegmentedControlProps<T>): import("react").JSX.Element | null;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/components/SegmentedControl/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAIrD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC1D,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAa,EACb,QAAgB,EAChB,eAAe,EAAE,mBAAmB,EACpC,WAAW,EAAE,eAAe,EAC5B,uBAAuB,EAAE,2BAA2B,EACpD,UAAU,EAAE,cAAc,EAC1B,kBAAkB,EAAE,sBAAsB,EAC1C,UAAU,EAAE,cAAc,EAC1B,KAAK,GACN,EAAE,qBAAqB,CAAC,CAAC,CAAC,sCAuJ1B"}

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,181 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedControl = SegmentedControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const buttonRadius_1 = require("../Button/buttonRadius");
+const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
+const segmentIndicatorFrame_1 = require("./segmentIndicatorFrame");
+const segmentThemeRoles_1 = require("./segmentThemeRoles");
+const SLIDE_MS = 220;
+function SegmentedControl({ value, onChange, options, label, radius = "lg", disabled = false, backgroundColor: backgroundColorProp, borderColor: borderColorProp, selectedBackgroundColor: selectedBackgroundColorProp, labelColor: labelColorProp, selectedLabelColor: selectedLabelColorProp, titleColor: titleColorProp, style, }) {
+    const backgroundColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(backgroundColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.backgroundColor);
+    const borderColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(borderColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.borderColor);
+    const selectedBackgroundColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(selectedBackgroundColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.selectedBackgroundColor);
+    const labelColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(labelColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.labelColor);
+    const selectedLabelColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(selectedLabelColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.selectedLabelColor);
+    const titleColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(titleColorProp, segmentThemeRoles_1.SEGMENTED_THEME_ROLES.titleColor);
+    const index = (0, segmentIndicatorFrame_1.resolveSegmentIndex)(value, options);
+    const trackWidth = (0, react_1.useRef)(0);
+    const laidOut = (0, react_1.useRef)(false);
+    const indexSV = (0, react_native_reanimated_1.useSharedValue)(0);
+    const widthSV = (0, react_native_reanimated_1.useSharedValue)(0);
+    const opacitySV = (0, react_native_reanimated_1.useSharedValue)(0);
+    const borderRadius = (0, buttonRadius_1.buttonRadiusValue)(radius);
+    const pillRadius = Math.max(0, borderRadius - segmentIndicatorFrame_1.SEGMENT_INSET);
+    const applyTrackWidth = (nextWidth, count) => {
+        trackWidth.current = nextWidth;
+        const frame = (0, segmentIndicatorFrame_1.segmentIndicatorFrame)(0, count, nextWidth, segmentIndicatorFrame_1.SEGMENT_INSET);
+        widthSV.value = frame?.width ?? 0;
+    };
+    (0, react_1.useEffect)(() => {
+        if (trackWidth.current > 0) {
+            applyTrackWidth(trackWidth.current, options.length);
+        }
+    }, [options.length, widthSV]);
+    (0, react_1.useEffect)(() => {
+        if (!laidOut.current) {
+            return;
+        }
+        if (index < 0) {
+            opacitySV.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 160 });
+            return;
+        }
+        opacitySV.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 160 });
+        indexSV.value = (0, react_native_reanimated_1.withTiming)(index, {
+            duration: SLIDE_MS,
+            easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+        });
+    }, [index, indexSV, opacitySV]);
+    const indicatorStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        width: widthSV.value,
+        opacity: opacitySV.value,
+        transform: [{ translateX: segmentIndicatorFrame_1.SEGMENT_INSET + indexSV.value * widthSV.value }],
+    }));
+    if (options.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.group, disabled && styles.blocked, style], children: [label ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, { color: titleColor }], children: label })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: label, accessibilityRole: "radiogroup", style: [
+                    styles.track,
+                    { backgroundColor, borderColor, borderRadius },
+                ], children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
+                            styles.indicator,
+                            indicatorStyle,
+                            {
+                                backgroundColor: selectedBackgroundColor,
+                                borderRadius: pillRadius,
+                            },
+                        ] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: (event) => {
+                            const nextWidth = event.nativeEvent.layout.width;
+                            if (nextWidth <= 0) {
+                                return;
+                            }
+                            applyTrackWidth(nextWidth, options.length);
+                            if (!laidOut.current) {
+                                indexSV.value = index < 0 ? 0 : index;
+                                opacitySV.value = index < 0 ? 0 : 1;
+                                laidOut.current = true;
+                            }
+                        }, style: styles.row, children: options.map((option) => {
+                            const selected = value === option.value;
+                            const blocked = disabled || !!option.disabled;
+                            return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: option.label, accessibilityRole: "radio", accessibilityState: {
+                                    selected,
+                                    checked: selected,
+                                    disabled: blocked,
+                                }, disabled: blocked, onPress: () => onChange(option.value), style: ({ pressed }) => [
+                                    styles.segment,
+                                    pressed && !blocked && styles.pressed,
+                                    option.disabled && styles.segmentBlocked,
+                                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                                        styles.label,
+                                        {
+                                            color: selected ? selectedLabelColor : labelColor,
+                                            fontWeight: selected ? "600" : "500",
+                                        },
+                                    ], children: option.label }) }, option.value));
+                        }) })] })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    group: {
+        width: "100%",
+        gap: 8,
+    },
+    blocked: {
+        opacity: 0.4,
+    },
+    title: {
+        fontSize: 13,
+        fontWeight: "600",
+        paddingHorizontal: 4,
+    },
+    track: {
+        width: "100%",
+        borderWidth: 1,
+        padding: segmentIndicatorFrame_1.SEGMENT_INSET,
+        overflow: "hidden",
+    },
+    indicator: {
+        position: "absolute",
+        top: segmentIndicatorFrame_1.SEGMENT_INSET,
+        bottom: segmentIndicatorFrame_1.SEGMENT_INSET,
+        left: 0,
+    },
+    row: {
+        flexDirection: "row",
+    },
+    segment: {
+        flex: 1,
+        minHeight: 36,
+        paddingVertical: 8,
+        paddingHorizontal: 8,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    pressed: {
+        opacity: 0.65,
+    },
+    segmentBlocked: {
+        opacity: 0.4,
+    },
+    label: {
+        fontSize: 15,
+        textAlign: "center",
+    },
+});
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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"}

package/dist/components/SegmentedControl/index.d.ts

@@ -0,0 +1,4 @@
+export { SegmentedControl } from "./SegmentedControl";
+export { SEGMENTED_THEME_ROLES, type SegmentedThemeColorProp, } from "./segmentThemeRoles";
+export type { SegmentedOption, SegmentedControlProps } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SegmentedControl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EACL,qBAAqB,EACrB,KAAK,uBAAuB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/SegmentedControl/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SEGMENTED_THEME_ROLES = exports.SegmentedControl = void 0;
+var SegmentedControl_1 = require("./SegmentedControl");
+Object.defineProperty(exports, "SegmentedControl", { enumerable: true, get: function () { return SegmentedControl_1.SegmentedControl; } });
+var segmentThemeRoles_1 = require("./segmentThemeRoles");
+Object.defineProperty(exports, "SEGMENTED_THEME_ROLES", { enumerable: true, get: function () { return segmentThemeRoles_1.SEGMENTED_THEME_ROLES; } });
+//# sourceMappingURL=index.js.map

package/dist/components/SegmentedControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.ts"],"names":[],"mappings":";;;AAAA,uDAAsD;AAA7C,oHAAA,gBAAgB,OAAA;AACzB,yDAG6B;AAF3B,0HAAA,qBAAqB,OAAA"}

package/dist/components/SegmentedControl/segmentIndicatorFrame.d.ts

@@ -0,0 +1,16 @@
+/** Gap between the track edge and the sliding selection fill. */
+export declare const SEGMENT_INSET = 3;
+export declare function resolveSegmentIndex<T extends string>(value: T | null, options: readonly {
+    value: T;
+}[]): number;
+/**
+ * Equal-width selection fill for a segment row.
+ * `segmentRowWidth` is the row already inset from the track edge.
+ * `inset` is that same gap, applied on the leading side (and, by symmetry, the trailing side).
+ * `index` 0 is the leading segment. Returns null when there is nothing to draw.
+ */
+export declare function segmentIndicatorFrame(index: number, count: number, segmentRowWidth: number, inset?: number): {
+    x: number;
+    width: number;
+} | null;
+//# sourceMappingURL=segmentIndicatorFrame.d.ts.map

package/dist/components/SegmentedControl/segmentIndicatorFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmentIndicatorFrame.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentIndicatorFrame.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,EAClD,KAAK,EAAE,CAAC,GAAG,IAAI,EACf,OAAO,EAAE,SAAS;IAAE,KAAK,EAAE,CAAC,CAAA;CAAE,EAAE,GAC/B,MAAM,CAKR;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,MAAM,EACvB,KAAK,GAAE,MAAsB,GAC5B;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAMrC"}

package/dist/components/SegmentedControl/segmentIndicatorFrame.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SEGMENT_INSET = void 0;
+exports.resolveSegmentIndex = resolveSegmentIndex;
+exports.segmentIndicatorFrame = segmentIndicatorFrame;
+/** Gap between the track edge and the sliding selection fill. */
+exports.SEGMENT_INSET = 3;
+function resolveSegmentIndex(value, options) {
+    if (value == null) {
+        return -1;
+    }
+    return options.findIndex((option) => option.value === value);
+}
+/**
+ * Equal-width selection fill for a segment row.
+ * `segmentRowWidth` is the row already inset from the track edge.
+ * `inset` is that same gap, applied on the leading side (and, by symmetry, the trailing side).
+ * `index` 0 is the leading segment. Returns null when there is nothing to draw.
+ */
+function segmentIndicatorFrame(index, count, segmentRowWidth, inset = exports.SEGMENT_INSET) {
+    if (index < 0 || count < 1 || segmentRowWidth <= 0) {
+        return null;
+    }
+    const width = segmentRowWidth / count;
+    return { x: inset + index * width, width };
+}
+//# sourceMappingURL=segmentIndicatorFrame.js.map

package/dist/components/SegmentedControl/segmentIndicatorFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmentIndicatorFrame.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentIndicatorFrame.ts"],"names":[],"mappings":";;;AAGA,kDAQC;AAQD,sDAWC;AA9BD,iEAAiE;AACpD,QAAA,aAAa,GAAG,CAAC,CAAC;AAE/B,SAAgB,mBAAmB,CACjC,KAAe,EACf,OAAgC;IAEhC,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QAClB,OAAO,CAAC,CAAC,CAAC;IACZ,CAAC;IACD,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;AAC/D,CAAC;AAED;;;;;GAKG;AACH,SAAgB,qBAAqB,CACnC,KAAa,EACb,KAAa,EACb,eAAuB,EACvB,QAAgB,qBAAa;IAE7B,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,IAAI,eAAe,IAAI,CAAC,EAAE,CAAC;QACnD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,KAAK,GAAG,eAAe,GAAG,KAAK,CAAC;IACtC,OAAO,EAAE,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC;AAC7C,CAAC"}

package/dist/components/SegmentedControl/segmentThemeRoles.d.ts

@@ -0,0 +1,10 @@
+export declare const SEGMENTED_THEME_ROLES: {
+    readonly backgroundColor: "fieldBackground";
+    readonly borderColor: "fieldBorder";
+    readonly selectedBackgroundColor: "fieldRadioSelected";
+    readonly labelColor: "fieldText";
+    readonly selectedLabelColor: "fieldBackground";
+    readonly titleColor: "fieldLabel";
+};
+export type SegmentedThemeColorProp = keyof typeof SEGMENTED_THEME_ROLES;
+//# sourceMappingURL=segmentThemeRoles.d.ts.map

package/dist/components/SegmentedControl/segmentThemeRoles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmentThemeRoles.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentThemeRoles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB;;;;;;;CAOxB,CAAC;AAEX,MAAM,MAAM,uBAAuB,GAAG,MAAM,OAAO,qBAAqB,CAAC"}

package/dist/components/SegmentedControl/segmentThemeRoles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SEGMENTED_THEME_ROLES = void 0;
+exports.SEGMENTED_THEME_ROLES = {
+    backgroundColor: "fieldBackground",
+    borderColor: "fieldBorder",
+    selectedBackgroundColor: "fieldRadioSelected",
+    labelColor: "fieldText",
+    selectedLabelColor: "fieldBackground",
+    titleColor: "fieldLabel",
+};
+//# sourceMappingURL=segmentThemeRoles.js.map

package/dist/components/SegmentedControl/segmentThemeRoles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmentThemeRoles.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmentThemeRoles.ts"],"names":[],"mappings":";;;AAAa,QAAA,qBAAqB,GAAG;IACnC,eAAe,EAAE,iBAAiB;IAClC,WAAW,EAAE,aAAa;IAC1B,uBAAuB,EAAE,oBAAoB;IAC7C,UAAU,EAAE,WAAW;IACvB,kBAAkB,EAAE,iBAAiB;IACrC,UAAU,EAAE,YAAY;CAChB,CAAC"}

package/dist/components/SegmentedControl/types.d.ts

@@ -0,0 +1,23 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonRadius } from "../Button/buttonRadius";
+export type SegmentedOption<T extends string = string> = {
+    value: T;
+    label: string;
+    disabled?: boolean;
+};
+export type SegmentedControlProps<T extends string = string> = {
+    value: T | null;
+    onChange: (value: T) => void;
+    options: SegmentedOption<T>[];
+    label?: string;
+    radius?: ButtonRadius;
+    disabled?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    selectedBackgroundColor?: string;
+    labelColor?: string;
+    selectedLabelColor?: string;
+    titleColor?: string;
+    style?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/SegmentedControl/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACvD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC7D,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

package/dist/components/SegmentedControl/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/SegmentedControl/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/types.ts"],"names":[],"mappings":""}

package/dist/components/index.d.ts

@@ -4,5 +4,6 @@ export { FieldText, FieldTextarea, FIELD_THEME_ROLES, type FieldThemeColorProp,
 export { Form, FormCloseButton, type FormProps } from "./Form";
 export { RadioField, RADIO_THEME_ROLES, type RadioThemeColorProp, type RadioOption, type RadioFieldProps, } from "./RadioField";
 export { Select, SelectCloseButton, SELECT_THEME_ROLES, DEFAULT_SELECT_DETENTS, DEFAULT_SELECT_INITIAL_DETENT, detentsToSnapPoints, resolveSelectDetentIndex, type SelectThemeColorProp, type SelectCloseButtonSlot, type SelectOption, type SelectProps, } from "./Select";
+export { SegmentedControl, SEGMENTED_THEME_ROLES, type SegmentedThemeColorProp, type SegmentedOption, type SegmentedControlProps, } from "./SegmentedControl";
 export { Slider, SLIDER_THEME_ROLES, type SliderThemeColorProp, type SliderProps, } from "./Slider";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,iBAAiB,EACjB,KAAK,YAAY,GAClB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC/D,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,MAAM,EACN,kBAAkB,EAClB,KAAK,oBAAoB,EACzB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,iBAAiB,EACjB,KAAK,YAAY,GAClB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC/D,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,MAAM,EACN,kBAAkB,EAClB,KAAK,oBAAoB,EACzB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC"}

package/dist/components/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SLIDER_THEME_ROLES = exports.Slider = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = void 0;
+exports.SLIDER_THEME_ROLES = exports.Slider = exports.SEGMENTED_THEME_ROLES = exports.SegmentedControl = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = void 0;
 var Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
 Object.defineProperty(exports, "buttonRadiusValue", { enumerable: true, get: function () { return Button_1.buttonRadiusValue; } });
@@ -25,6 +25,9 @@ Object.defineProperty(exports, "DEFAULT_SELECT_DETENTS", { enumerable: true, get
 Object.defineProperty(exports, "DEFAULT_SELECT_INITIAL_DETENT", { enumerable: true, get: function () { return Select_1.DEFAULT_SELECT_INITIAL_DETENT; } });
 Object.defineProperty(exports, "detentsToSnapPoints", { enumerable: true, get: function () { return Select_1.detentsToSnapPoints; } });
 Object.defineProperty(exports, "resolveSelectDetentIndex", { enumerable: true, get: function () { return Select_1.resolveSelectDetentIndex; } });
+var SegmentedControl_1 = require("./SegmentedControl");
+Object.defineProperty(exports, "SegmentedControl", { enumerable: true, get: function () { return SegmentedControl_1.SegmentedControl; } });
+Object.defineProperty(exports, "SEGMENTED_THEME_ROLES", { enumerable: true, get: function () { return SegmentedControl_1.SEGMENTED_THEME_ROLES; } });
 var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
 Object.defineProperty(exports, "SLIDER_THEME_ROLES", { enumerable: true, get: function () { return Slider_1.SLIDER_THEME_ROLES; } });

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,mCAKkB;AAJhB,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,2CAMsB;AALpB,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,iCAQiB;AAPf,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,+BAA+D;AAAtD,4FAAA,IAAI,OAAA;AAAE,uGAAA,eAAe,OAAA;AAC9B,2CAMsB;AALpB,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,mCAYkB;AAXhB,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,mCAKkB;AAJhB,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,mCAKkB;AAJhB,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,2CAMsB;AALpB,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,iCAQiB;AAPf,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,+BAA+D;AAAtD,4FAAA,IAAI,OAAA;AAAE,uGAAA,eAAe,OAAA;AAC9B,2CAMsB;AALpB,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,mCAYkB;AAXhB,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,uDAM4B;AAL1B,oHAAA,gBAAgB,OAAA;AAChB,yHAAA,qBAAqB,OAAA;AAKvB,mCAKkB;AAJhB,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "0.2.2";
+export declare const version = "0.2.3";
 export * from "./theme";
 export { Button, type ButtonProps, buttonRadiusValue, type ButtonRadius, } from "./components/Button";
 export { LinkBlocks, filterLinkBlockGroups, type LinkBlockGroup, type LinkBlockItem, type LinkBlocksProps, } from "./components/LinkBlocks";
@@ -6,6 +6,7 @@ export { FieldText, FieldTextarea, FIELD_THEME_ROLES, type FieldThemeColorProp,
 export { Form, FormCloseButton, type FormProps, } from "./components/Form";
 export { RadioField, RADIO_THEME_ROLES, type RadioThemeColorProp, type RadioOption, type RadioFieldProps, } from "./components/RadioField";
 export { Select, SelectCloseButton, SELECT_THEME_ROLES, DEFAULT_SELECT_DETENTS, DEFAULT_SELECT_INITIAL_DETENT, detentsToSnapPoints, resolveSelectDetentIndex, type SelectThemeColorProp, type SelectCloseButtonSlot, type SelectOption, type SelectProps, } from "./components/Select";
+export { SegmentedControl, SEGMENTED_THEME_ROLES, type SegmentedThemeColorProp, type SegmentedOption, type SegmentedControlProps, } from "./components/SegmentedControl";
 export { Slider, SLIDER_THEME_ROLES, type SliderThemeColorProp, type SliderProps, } from "./components/Slider";
 export * as components from "./components";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC;AAE/B,cAAc,SAAS,CAAC;AACxB,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,iBAAiB,EACjB,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,IAAI,EACJ,eAAe,EACf,KAAK,SAAS,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,MAAM,EACN,kBAAkB,EAClB,KAAK,oBAAoB,EACzB,KAAK,WAAW,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAU,CAAC;AAE/B,cAAc,SAAS,CAAC;AACxB,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,iBAAiB,EACjB,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,UAAU,EACV,qBAAqB,EACrB,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,kBAAkB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,IAAI,EACJ,eAAe,EACf,KAAK,SAAS,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,MAAM,EACN,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,WAAW,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,qBAAqB,GAC3B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,MAAM,EACN,kBAAkB,EAClB,KAAK,oBAAoB,EACzB,KAAK,WAAW,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -36,8 +36,8 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.components = exports.SLIDER_THEME_ROLES = exports.Slider = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = exports.version = void 0;
-exports.version = "0.2.2";
+exports.components = exports.SLIDER_THEME_ROLES = exports.Slider = exports.SEGMENTED_THEME_ROLES = exports.SegmentedControl = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.buttonRadiusValue = exports.Button = exports.version = void 0;
+exports.version = "0.2.3";
 __exportStar(require("./theme"), exports);
 var Button_1 = require("./components/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
@@ -63,6 +63,9 @@ Object.defineProperty(exports, "DEFAULT_SELECT_DETENTS", { enumerable: true, get
 Object.defineProperty(exports, "DEFAULT_SELECT_INITIAL_DETENT", { enumerable: true, get: function () { return Select_1.DEFAULT_SELECT_INITIAL_DETENT; } });
 Object.defineProperty(exports, "detentsToSnapPoints", { enumerable: true, get: function () { return Select_1.detentsToSnapPoints; } });
 Object.defineProperty(exports, "resolveSelectDetentIndex", { enumerable: true, get: function () { return Select_1.resolveSelectDetentIndex; } });
+var SegmentedControl_1 = require("./components/SegmentedControl");
+Object.defineProperty(exports, "SegmentedControl", { enumerable: true, get: function () { return SegmentedControl_1.SegmentedControl; } });
+Object.defineProperty(exports, "SEGMENTED_THEME_ROLES", { enumerable: true, get: function () { return SegmentedControl_1.SEGMENTED_THEME_ROLES; } });
 var Slider_1 = require("./components/Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
 Object.defineProperty(exports, "SLIDER_THEME_ROLES", { enumerable: true, get: function () { return Slider_1.SLIDER_THEME_ROLES; } });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa,QAAA,OAAO,GAAG,OAAO,CAAC;AAE/B,0CAAwB;AACxB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,4CAQ4B;AAP1B,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,0CAI2B;AAHzB,4FAAA,IAAI,OAAA;AACJ,uGAAA,eAAe,OAAA;AAGjB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,8CAY6B;AAX3B,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA;AAIpB,2DAA2C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa,QAAA,OAAO,GAAG,OAAO,CAAC;AAE/B,0CAAwB;AACxB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AAEN,2GAAA,iBAAiB,OAAA;AAGnB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,4CAQ4B;AAP1B,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,0CAI2B;AAHzB,4FAAA,IAAI,OAAA;AACJ,uGAAA,eAAe,OAAA;AAGjB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,8CAY6B;AAX3B,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,kEAMuC;AALrC,oHAAA,gBAAgB,OAAA;AAChB,yHAAA,qBAAqB,OAAA;AAKvB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA;AAIpB,2DAA2C"}

package/docs/components/segmented-control.md

@@ -0,0 +1,95 @@
+# SegmentedControl — usage
+
+Presentational controlled choice shown as a row of pressable segments. One selection fill sits behind the selected segment and slides to the next choice. It is a radio group: one value, `onChange` with the next value. Colours default from `ThemeProvider`; pass props only to override. Your app owns form state.
+
+React Native has no segmented control. iOS `UISegmentedControl` and Android Material segmented buttons are separate platform widgets, and they do not use this package’s theme roles. This control draws the row itself and moves the selection fill with `react-native-reanimated`, which is already a peer (used by `Select`).
+
+## SegmentedControl
+
+`SegmentedControl` is controlled only (`value` + `onChange`). When colour props are omitted, colours resolve from fixed theme roles (see below). Explicit colour props always win. `ThemeProvider` is required when at least one colour prop is omitted. Full width of the parent is fixed. An empty `options` array renders nothing. `value={null}` shows the track with no selection fill.
+
+```tsx
+import { SegmentedControl } from "@studio-piot/native-ui";
+import { useState } from "react";
+
+type DipslideStatus = "ON" | "OFF";
+
+const statusOptions = [
+  { value: "ON" as const, label: "On" },
+  { value: "OFF" as const, label: "Off" },
+];
+
+export function DipslideStatusField() {
+  const [status, setStatus] = useState<DipslideStatus>("ON");
+
+  return (
+    <SegmentedControl
+      label="Dipslide status"
+      value={status}
+      onChange={setStatus}
+      options={statusOptions}
+    />
+  );
+}
+```
+
+No new theme keys. The selection fill reuses `fieldRadioSelected`. Selected label text reuses `fieldBackground`, which contrasts with that fill in the same light and dark maps.
+
+### Colour props (optional overrides)
+
+| Prop | Default theme role | Role |
+|---|---|---|
+| `backgroundColor` | `fieldBackground` | Track fill |
+| `borderColor` | `fieldBorder` | Track border |
+| `selectedBackgroundColor` | `fieldRadioSelected` | Sliding selection fill |
+| `labelColor` | `fieldText` | Unselected label |
+| `selectedLabelColor` | `fieldBackground` | Label on the selection fill |
+| `titleColor` | `fieldLabel` | Group label above the track |
+
+### Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `value` | `T \| null` | — | Required. Controlled selection; `null` = none selected |
+| `onChange` | `(value: T) => void` | — | Required |
+| `options` | `SegmentedOption<T>[]` | — | Required. Empty list → renders nothing |
+| `label` | `string` | — | Optional caption above the track |
+| `radius` | `ButtonRadius` | `"lg"` | Same steps as `Button` (8px) |
+| `disabled` | `boolean` | `false` | Whole control at 40% opacity; not selectable |
+| `backgroundColor` | `string` | theme `fieldBackground` | Optional override |
+| `borderColor` | `string` | theme `fieldBorder` | Optional override |
+| `selectedBackgroundColor` | `string` | theme `fieldRadioSelected` | Optional override |
+| `labelColor` | `string` | theme `fieldText` | Optional override |
+| `selectedLabelColor` | `string` | theme `fieldBackground` | Optional override |
+| `titleColor` | `string` | theme `fieldLabel` | Optional override |
+| `style` | view style | — | Outer column |
+
+### SegmentedOption
+
+| Prop | Type | Notes |
+|---|---|---|
+| `value` | `T` | Stable string id |
+| `label` | `string` | Segment title |
+| `disabled` | `boolean` | Segment at 40% opacity; not selectable |
+
+### Layout
+
+Segments share the track width equally. The selection fill is inset by 3px on every side: the same gap above and below it, before the first segment, and after the last. It translates to the selected index over 220ms. Track radius defaults to `"lg"` (8). See the [Button radius table](./button.md#radius).
+
+### Accessibility
+
+The track uses `accessibilityRole="radiogroup"`. Each segment is `accessibilityRole="radio"` with `accessibilityState` including `selected`, `checked` (same as selected; required for Android TalkBack radio semantics), and `disabled`. The sliding fill is decorative.
+
+## Imports
+
+```ts
+import {
+  SegmentedControl,
+  SEGMENTED_THEME_ROLES,
+  type SegmentedOption,
+  type SegmentedControlProps,
+} from "@studio-piot/native-ui";
+
+// Or components only:
+import { SegmentedControl } from "@studio-piot/native-ui/components";
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-piot/native-ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Shared React Native components for Studio Piot apps.",
   "homepage": "https://github.com/Studio-Piot/studio-native-ui#readme",
   "bugs": {

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,234 @@
+import { useEffect, useRef } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { buttonRadiusValue } from "../Button/buttonRadius";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import {
+  resolveSegmentIndex,
+  SEGMENT_INSET,
+  segmentIndicatorFrame,
+} from "./segmentIndicatorFrame";
+import { SEGMENTED_THEME_ROLES } from "./segmentThemeRoles";
+import type { SegmentedControlProps } from "./types";
+
+const SLIDE_MS = 220;
+
+export function SegmentedControl<T extends string = string>({
+  value,
+  onChange,
+  options,
+  label,
+  radius = "lg",
+  disabled = false,
+  backgroundColor: backgroundColorProp,
+  borderColor: borderColorProp,
+  selectedBackgroundColor: selectedBackgroundColorProp,
+  labelColor: labelColorProp,
+  selectedLabelColor: selectedLabelColorProp,
+  titleColor: titleColorProp,
+  style,
+}: SegmentedControlProps<T>) {
+  const backgroundColor = useResolvedFieldColor(
+    backgroundColorProp,
+    SEGMENTED_THEME_ROLES.backgroundColor,
+  );
+  const borderColor = useResolvedFieldColor(
+    borderColorProp,
+    SEGMENTED_THEME_ROLES.borderColor,
+  );
+  const selectedBackgroundColor = useResolvedFieldColor(
+    selectedBackgroundColorProp,
+    SEGMENTED_THEME_ROLES.selectedBackgroundColor,
+  );
+  const labelColor = useResolvedFieldColor(
+    labelColorProp,
+    SEGMENTED_THEME_ROLES.labelColor,
+  );
+  const selectedLabelColor = useResolvedFieldColor(
+    selectedLabelColorProp,
+    SEGMENTED_THEME_ROLES.selectedLabelColor,
+  );
+  const titleColor = useResolvedFieldColor(
+    titleColorProp,
+    SEGMENTED_THEME_ROLES.titleColor,
+  );
+
+  const index = resolveSegmentIndex(value, options);
+  const trackWidth = useRef(0);
+  const laidOut = useRef(false);
+  const indexSV = useSharedValue(0);
+  const widthSV = useSharedValue(0);
+  const opacitySV = useSharedValue(0);
+
+  const borderRadius = buttonRadiusValue(radius);
+  const pillRadius = Math.max(0, borderRadius - SEGMENT_INSET);
+
+  const applyTrackWidth = (nextWidth: number, count: number) => {
+    trackWidth.current = nextWidth;
+    const frame = segmentIndicatorFrame(0, count, nextWidth, SEGMENT_INSET);
+    widthSV.value = frame?.width ?? 0;
+  };
+
+  useEffect(() => {
+    if (trackWidth.current > 0) {
+      applyTrackWidth(trackWidth.current, options.length);
+    }
+  }, [options.length, widthSV]);
+
+  useEffect(() => {
+    if (!laidOut.current) {
+      return;
+    }
+    if (index < 0) {
+      opacitySV.value = withTiming(0, { duration: 160 });
+      return;
+    }
+    opacitySV.value = withTiming(1, { duration: 160 });
+    indexSV.value = withTiming(index, {
+      duration: SLIDE_MS,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [index, indexSV, opacitySV]);
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: widthSV.value,
+    opacity: opacitySV.value,
+    transform: [{ translateX: SEGMENT_INSET + indexSV.value * widthSV.value }],
+  }));
+
+  if (options.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.group, disabled && styles.blocked, style]}>
+      {label ? (
+        <Text style={[styles.title, { color: titleColor }]}>{label}</Text>
+      ) : null}
+      <View
+        accessibilityLabel={label}
+        accessibilityRole="radiogroup"
+        style={[
+          styles.track,
+          { backgroundColor, borderColor, borderRadius },
+        ]}
+      >
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            styles.indicator,
+            indicatorStyle,
+            {
+              backgroundColor: selectedBackgroundColor,
+              borderRadius: pillRadius,
+            },
+          ]}
+        />
+        <View
+          onLayout={(event) => {
+            const nextWidth = event.nativeEvent.layout.width;
+            if (nextWidth <= 0) {
+              return;
+            }
+            applyTrackWidth(nextWidth, options.length);
+            if (!laidOut.current) {
+              indexSV.value = index < 0 ? 0 : index;
+              opacitySV.value = index < 0 ? 0 : 1;
+              laidOut.current = true;
+            }
+          }}
+          style={styles.row}
+        >
+          {options.map((option) => {
+            const selected = value === option.value;
+            const blocked = disabled || !!option.disabled;
+            return (
+              <Pressable
+                key={option.value}
+                accessibilityLabel={option.label}
+                accessibilityRole="radio"
+                accessibilityState={{
+                  selected,
+                  checked: selected,
+                  disabled: blocked,
+                }}
+                disabled={blocked}
+                onPress={() => onChange(option.value)}
+                style={({ pressed }) => [
+                  styles.segment,
+                  pressed && !blocked && styles.pressed,
+                  option.disabled && styles.segmentBlocked,
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.label,
+                    {
+                      color: selected ? selectedLabelColor : labelColor,
+                      fontWeight: selected ? "600" : "500",
+                    },
+                  ]}
+                >
+                  {option.label}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: {
+    width: "100%",
+    gap: 8,
+  },
+  blocked: {
+    opacity: 0.4,
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: "600",
+    paddingHorizontal: 4,
+  },
+  track: {
+    width: "100%",
+    borderWidth: 1,
+    padding: SEGMENT_INSET,
+    overflow: "hidden",
+  },
+  indicator: {
+    position: "absolute",
+    top: SEGMENT_INSET,
+    bottom: SEGMENT_INSET,
+    left: 0,
+  },
+  row: {
+    flexDirection: "row",
+  },
+  segment: {
+    flex: 1,
+    minHeight: 36,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  pressed: {
+    opacity: 0.65,
+  },
+  segmentBlocked: {
+    opacity: 0.4,
+  },
+  label: {
+    fontSize: 15,
+    textAlign: "center",
+  },
+});

package/src/components/SegmentedControl/index.ts

@@ -0,0 +1,6 @@
+export { SegmentedControl } from "./SegmentedControl";
+export {
+  SEGMENTED_THEME_ROLES,
+  type SegmentedThemeColorProp,
+} from "./segmentThemeRoles";
+export type { SegmentedOption, SegmentedControlProps } from "./types";

package/src/components/SegmentedControl/segmentIndicatorFrame.test.ts

@@ -0,0 +1,39 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  resolveSegmentIndex,
+  segmentIndicatorFrame,
+  SEGMENT_INSET,
+} from "./segmentIndicatorFrame.ts";
+
+describe("resolveSegmentIndex", () => {
+  const options = [{ value: "on" }, { value: "off" }, { value: "auto" }];
+
+  it("returns the matching option index", () => {
+    assert.equal(resolveSegmentIndex("off", options), 1);
+  });
+
+  it("returns -1 when nothing is selected", () => {
+    assert.equal(resolveSegmentIndex(null, options), -1);
+    assert.equal(resolveSegmentIndex("missing", options), -1);
+  });
+});
+
+describe("segmentIndicatorFrame", () => {
+  it("keeps the same inset before the first segment and after the last", () => {
+    const rowWidth = 300;
+    const first = segmentIndicatorFrame(0, 3, rowWidth, SEGMENT_INSET);
+    const last = segmentIndicatorFrame(2, 3, rowWidth, SEGMENT_INSET);
+    assert.deepEqual(first, { x: SEGMENT_INSET, width: 100 });
+    assert.deepEqual(last, { x: 203, width: 100 });
+    assert.ok(last);
+    const trackInnerWidth = rowWidth + SEGMENT_INSET * 2;
+    assert.equal(trackInnerWidth - (last.x + last.width), SEGMENT_INSET);
+  });
+
+  it("returns null when there is no segment to highlight", () => {
+    assert.equal(segmentIndicatorFrame(-1, 3, 300), null);
+    assert.equal(segmentIndicatorFrame(0, 0, 300), null);
+    assert.equal(segmentIndicatorFrame(0, 2, 0), null);
+  });
+});

package/src/components/SegmentedControl/segmentIndicatorFrame.ts

@@ -0,0 +1,31 @@
+/** Gap between the track edge and the sliding selection fill. */
+export const SEGMENT_INSET = 3;
+
+export function resolveSegmentIndex<T extends string>(
+  value: T | null,
+  options: readonly { value: T }[],
+): number {
+  if (value == null) {
+    return -1;
+  }
+  return options.findIndex((option) => option.value === value);
+}
+
+/**
+ * Equal-width selection fill for a segment row.
+ * `segmentRowWidth` is the row already inset from the track edge.
+ * `inset` is that same gap, applied on the leading side (and, by symmetry, the trailing side).
+ * `index` 0 is the leading segment. Returns null when there is nothing to draw.
+ */
+export function segmentIndicatorFrame(
+  index: number,
+  count: number,
+  segmentRowWidth: number,
+  inset: number = SEGMENT_INSET,
+): { x: number; width: number } | null {
+  if (index < 0 || count < 1 || segmentRowWidth <= 0) {
+    return null;
+  }
+  const width = segmentRowWidth / count;
+  return { x: inset + index * width, width };
+}

package/src/components/SegmentedControl/segmentThemeRoles.test.ts

@@ -0,0 +1,17 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { SEGMENTED_THEME_ROLES } from "./segmentThemeRoles.ts";
+
+describe("SEGMENTED_THEME_ROLES", () => {
+  it("maps colour props onto existing Field and radio roles", () => {
+    assert.equal(SEGMENTED_THEME_ROLES.backgroundColor, "fieldBackground");
+    assert.equal(SEGMENTED_THEME_ROLES.borderColor, "fieldBorder");
+    assert.equal(
+      SEGMENTED_THEME_ROLES.selectedBackgroundColor,
+      "fieldRadioSelected",
+    );
+    assert.equal(SEGMENTED_THEME_ROLES.labelColor, "fieldText");
+    assert.equal(SEGMENTED_THEME_ROLES.selectedLabelColor, "fieldBackground");
+    assert.equal(SEGMENTED_THEME_ROLES.titleColor, "fieldLabel");
+  });
+});

package/src/components/SegmentedControl/segmentThemeRoles.ts

@@ -0,0 +1,10 @@
+export const SEGMENTED_THEME_ROLES = {
+  backgroundColor: "fieldBackground",
+  borderColor: "fieldBorder",
+  selectedBackgroundColor: "fieldRadioSelected",
+  labelColor: "fieldText",
+  selectedLabelColor: "fieldBackground",
+  titleColor: "fieldLabel",
+} as const;
+
+export type SegmentedThemeColorProp = keyof typeof SEGMENTED_THEME_ROLES;

package/src/components/SegmentedControl/types.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonRadius } from "../Button/buttonRadius";
+
+export type SegmentedOption<T extends string = string> = {
+  value: T;
+  label: string;
+  disabled?: boolean;
+};
+
+export type SegmentedControlProps<T extends string = string> = {
+  value: T | null;
+  onChange: (value: T) => void;
+  options: SegmentedOption<T>[];
+  label?: string;
+  radius?: ButtonRadius;
+  disabled?: boolean;
+  backgroundColor?: string;
+  borderColor?: string;
+  selectedBackgroundColor?: string;
+  labelColor?: string;
+  selectedLabelColor?: string;
+  titleColor?: string;
+  style?: StyleProp<ViewStyle>;
+};

package/src/components/index.ts

@@ -41,6 +41,13 @@ export {
   type SelectOption,
   type SelectProps,
 } from "./Select";
+export {
+  SegmentedControl,
+  SEGMENTED_THEME_ROLES,
+  type SegmentedThemeColorProp,
+  type SegmentedOption,
+  type SegmentedControlProps,
+} from "./SegmentedControl";
 export {
   Slider,
   SLIDER_THEME_ROLES,

package/src/index.ts

@@ -1,4 +1,4 @@
-export const version = "0.2.2";
+export const version = "0.2.3";
 
 export * from "./theme";
 export {
@@ -48,6 +48,13 @@ export {
   type SelectOption,
   type SelectProps,
 } from "./components/Select";
+export {
+  SegmentedControl,
+  SEGMENTED_THEME_ROLES,
+  type SegmentedThemeColorProp,
+  type SegmentedOption,
+  type SegmentedControlProps,
+} from "./components/SegmentedControl";
 export {
   Slider,
   SLIDER_THEME_ROLES,