@bacon-pos/ui 0.15.1 → 0.16.0

package/lib/module/components/SegmentedButton/SegmentedButton.test.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { SegmentedButton } from "./SegmentedButton.js";
+import { ThemeProvider } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function renderWithTheme(ui) {
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    children: ui
+  }));
+}
+const OPTS = [{
+  label: 'One',
+  value: '1'
+}, {
+  label: 'Two',
+  value: '2'
+}, {
+  label: 'Three',
+  value: '3'
+}];
+describe('SegmentedButton', () => {
+  it('renders one segment per option', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(SegmentedButton, {
+      options: OPTS
+    }));
+    expect(screen.getByText('One')).toBeTruthy();
+    expect(screen.getByText('Two')).toBeTruthy();
+    expect(screen.getByText('Three')).toBeTruthy();
+  });
+  it('selects the first option by default (uncontrolled) and reports changes', () => {
+    const onChange = jest.fn();
+    renderWithTheme(/*#__PURE__*/_jsx(SegmentedButton, {
+      options: OPTS,
+      onChange: onChange
+    }));
+    expect(screen.getByTestId('segment-1').props.accessibilityState.selected).toBe(true);
+    fireEvent.press(screen.getByText('Two'));
+    expect(onChange).toHaveBeenCalledWith('2');
+    expect(screen.getByTestId('segment-2').props.accessibilityState.selected).toBe(true);
+  });
+  it('honors defaultValue', () => {
+    renderWithTheme(/*#__PURE__*/_jsx(SegmentedButton, {
+      options: OPTS,
+      defaultValue: "3"
+    }));
+    expect(screen.getByTestId('segment-3').props.accessibilityState.selected).toBe(true);
+  });
+  it('respects a controlled value and does not self-update', () => {
+    const onChange = jest.fn();
+    renderWithTheme(/*#__PURE__*/_jsx(SegmentedButton, {
+      options: OPTS,
+      value: "2",
+      onChange: onChange
+    }));
+    expect(screen.getByTestId('segment-2').props.accessibilityState.selected).toBe(true);
+    fireEvent.press(screen.getByText('Three'));
+    expect(onChange).toHaveBeenCalledWith('3');
+    // value prop still "2" → stays selected
+    expect(screen.getByTestId('segment-2').props.accessibilityState.selected).toBe(true);
+  });
+  it('does not fire when the whole control is disabled', () => {
+    const onChange = jest.fn();
+    renderWithTheme(/*#__PURE__*/_jsx(SegmentedButton, {
+      options: OPTS,
+      disabled: true,
+      onChange: onChange
+    }));
+    fireEvent.press(screen.getByText('Two'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  it('does not fire for a disabled segment but works for others', () => {
+    const onChange = jest.fn();
+    const opts = [{
+      label: 'A',
+      value: 'a'
+    }, {
+      label: 'B',
+      value: 'b',
+      disabled: true
+    }, {
+      label: 'C',
+      value: 'c'
+    }];
+    renderWithTheme(/*#__PURE__*/_jsx(SegmentedButton, {
+      options: opts,
+      onChange: onChange
+    }));
+    fireEvent.press(screen.getByText('B'));
+    expect(onChange).not.toHaveBeenCalled();
+    fireEvent.press(screen.getByText('C'));
+    expect(onChange).toHaveBeenCalledWith('c');
+  });
+});
+//# sourceMappingURL=SegmentedButton.test.js.map

package/lib/module/components/SegmentedButton/SegmentedButton.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","render","screen","fireEvent","SegmentedButton","ThemeProvider","jsx","_jsx","renderWithTheme","ui","children","OPTS","label","value","describe","it","options","expect","getByText","toBeTruthy","onChange","jest","fn","getByTestId","props","accessibilityState","selected","toBe","press","toHaveBeenCalledWith","defaultValue","disabled","not","toHaveBeenCalled","opts"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/SegmentedButton/SegmentedButton.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/SegmentedButton/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { SegmentedButton } from "./SegmentedButton.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/SegmentedButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SegmentedButton"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/SegmentedButton/index.ts"],"mappings":";;AAAA,SACEA,eAAe,QAKV,sBAAmB","ignoreList":[]}

package/lib/module/components/index.js

@@ -24,6 +24,7 @@ export * from "./ProductCard/index.js";
 export * from "./ProgressBar/index.js";
 export * from "./QuantityStepper/index.js";
 export * from "./Radio/index.js";
+export * from "./SegmentedButton/index.js";
 export * from "./Select/index.js";
 export * from "./Sidebar/index.js";
 export * from "./Spinner/index.js";

package/lib/module/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc;AAC5B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,uBAAc;AAC5B,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,qBAAY","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,uBAAc;AAC5B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,uBAAc;AAC5B,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,4BAAmB;AACjC,cAAc,mBAAU;AACxB,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,qBAAY;AAC1B,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,qBAAY","ignoreList":[]}

package/lib/typescript/commonjs/components/SegmentedButton/SegmentedButton.d.ts

@@ -0,0 +1,68 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icons.generated';
+export type SegmentedButtonSize = 'sm' | 'md';
+/** `default` = soft-rounded rectangle; `round` = fully rounded (pill). */
+export type SegmentedButtonShape = 'default' | 'round';
+export interface SegmentedOption {
+    /** Visible label. */
+    label: string;
+    /** Unique value reported on change. */
+    value: string;
+    /** Optional icon shown next to the label. */
+    icon?: IconName;
+    /** Icon side. Defaults to `left`. */
+    iconPosition?: 'left' | 'right';
+    /** Disable just this segment. */
+    disabled?: boolean;
+}
+export interface SegmentedButtonProps {
+    /** The segments. Two or more recommended; any count is supported. */
+    options: SegmentedOption[];
+    /** Selected value (controlled). */
+    value?: string;
+    /** Initial selected value (uncontrolled). Defaults to the first option. */
+    defaultValue?: string;
+    /** Change handler. */
+    onChange?: (value: string) => void;
+    /** Size: `sm` (16px text) or `md` (18px text, default). */
+    size?: SegmentedButtonSize;
+    /** Corner style: `default` (rounded rect) or `round` (pill). Defaults to `default`. */
+    shape?: SegmentedButtonShape;
+    /** Override the track corner radius in px (segments follow). Wins over `shape`. */
+    radius?: number;
+    /** Stretch to the container; segments share the width equally. */
+    fullWidth?: boolean;
+    /** Fixed track width in px (overrides `fullWidth`). */
+    width?: number;
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /** Show the track border. Defaults to true. */
+    bordered?: boolean;
+    /** Track background color. Defaults to `background.muted`. */
+    trackColor?: string;
+    /** Selected segment background. Defaults to `action.inverse` (dark). */
+    selectedColor?: string;
+    /** Selected segment text/icon color. Defaults to `action.inverseForeground`. */
+    selectedTextColor?: string;
+    /** Unselected text/icon color. Defaults to `text.secondary`. */
+    textColor?: string;
+    /** Icon size override. Defaults to the size preset. */
+    iconSize?: number;
+    /** Slide the selected highlight between segments. Defaults to true. */
+    animated?: boolean;
+    /** Override the track container style. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the group. */
+    accessibilityLabel?: string;
+    testID?: string;
+}
+/**
+ * SegmentedButton — faithful to the Bacon POS Figma "Segmented button". A single
+ * connected control of 2+ options where exactly one is selected: the active
+ * segment fills dark with inverse text; the rest are transparent with secondary
+ * text, all inside a rounded track. Supports `sm`/`md` sizes, `default`/`round`
+ * shapes (or a custom `radius`), hug / `fullWidth` / fixed `width` layouts, icons,
+ * per-segment disabling, and color overrides. Controlled or uncontrolled.
+ */
+export declare function SegmentedButton({ options, value, defaultValue, onChange, size, shape, radius, fullWidth, width, disabled, bordered, trackColor, selectedColor, selectedTextColor, textColor, iconSize, animated, style, accessibilityLabel, testID, }: SegmentedButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SegmentedButton.d.ts.map

package/lib/typescript/commonjs/components/SegmentedButton/SegmentedButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/SegmentedButton/SegmentedButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGxD,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,0EAA0E;AAC1E,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvD,MAAM,WAAW,eAAe;IAC9B,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,qEAAqE;IACrE,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,uFAAuF;IACvF,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yCAAyC;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAkBD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,IAAW,EACX,KAAiB,EACjB,MAAM,EACN,SAAiB,EACjB,KAAK,EACL,QAAgB,EAChB,QAAe,EACf,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACR,QAAe,EACf,KAAK,EACL,kBAAkB,EAClB,MAAM,GACP,EAAE,oBAAoB,2CAkJtB"}

package/lib/typescript/commonjs/components/SegmentedButton/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedButton, type SegmentedButtonProps, type SegmentedOption, type SegmentedButtonSize, type SegmentedButtonShape, } from './SegmentedButton';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/SegmentedButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SegmentedButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAC"}

package/lib/typescript/commonjs/components/index.d.ts

@@ -22,6 +22,7 @@ export * from './ProductCard';
 export * from './ProgressBar';
 export * from './QuantityStepper';
 export * from './Radio';
+export * from './SegmentedButton';
 export * from './Select';
 export * from './Sidebar';
 export * from './Spinner';

package/lib/typescript/commonjs/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/typescript/module/components/SegmentedButton/SegmentedButton.d.ts

@@ -0,0 +1,68 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icons.generated';
+export type SegmentedButtonSize = 'sm' | 'md';
+/** `default` = soft-rounded rectangle; `round` = fully rounded (pill). */
+export type SegmentedButtonShape = 'default' | 'round';
+export interface SegmentedOption {
+    /** Visible label. */
+    label: string;
+    /** Unique value reported on change. */
+    value: string;
+    /** Optional icon shown next to the label. */
+    icon?: IconName;
+    /** Icon side. Defaults to `left`. */
+    iconPosition?: 'left' | 'right';
+    /** Disable just this segment. */
+    disabled?: boolean;
+}
+export interface SegmentedButtonProps {
+    /** The segments. Two or more recommended; any count is supported. */
+    options: SegmentedOption[];
+    /** Selected value (controlled). */
+    value?: string;
+    /** Initial selected value (uncontrolled). Defaults to the first option. */
+    defaultValue?: string;
+    /** Change handler. */
+    onChange?: (value: string) => void;
+    /** Size: `sm` (16px text) or `md` (18px text, default). */
+    size?: SegmentedButtonSize;
+    /** Corner style: `default` (rounded rect) or `round` (pill). Defaults to `default`. */
+    shape?: SegmentedButtonShape;
+    /** Override the track corner radius in px (segments follow). Wins over `shape`. */
+    radius?: number;
+    /** Stretch to the container; segments share the width equally. */
+    fullWidth?: boolean;
+    /** Fixed track width in px (overrides `fullWidth`). */
+    width?: number;
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /** Show the track border. Defaults to true. */
+    bordered?: boolean;
+    /** Track background color. Defaults to `background.muted`. */
+    trackColor?: string;
+    /** Selected segment background. Defaults to `action.inverse` (dark). */
+    selectedColor?: string;
+    /** Selected segment text/icon color. Defaults to `action.inverseForeground`. */
+    selectedTextColor?: string;
+    /** Unselected text/icon color. Defaults to `text.secondary`. */
+    textColor?: string;
+    /** Icon size override. Defaults to the size preset. */
+    iconSize?: number;
+    /** Slide the selected highlight between segments. Defaults to true. */
+    animated?: boolean;
+    /** Override the track container style. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the group. */
+    accessibilityLabel?: string;
+    testID?: string;
+}
+/**
+ * SegmentedButton — faithful to the Bacon POS Figma "Segmented button". A single
+ * connected control of 2+ options where exactly one is selected: the active
+ * segment fills dark with inverse text; the rest are transparent with secondary
+ * text, all inside a rounded track. Supports `sm`/`md` sizes, `default`/`round`
+ * shapes (or a custom `radius`), hug / `fullWidth` / fixed `width` layouts, icons,
+ * per-segment disabling, and color overrides. Controlled or uncontrolled.
+ */
+export declare function SegmentedButton({ options, value, defaultValue, onChange, size, shape, radius, fullWidth, width, disabled, bordered, trackColor, selectedColor, selectedTextColor, textColor, iconSize, animated, style, accessibilityLabel, testID, }: SegmentedButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SegmentedButton.d.ts.map

package/lib/typescript/module/components/SegmentedButton/SegmentedButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/SegmentedButton/SegmentedButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGxD,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,0EAA0E;AAC1E,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvD,MAAM,WAAW,eAAe;IAC9B,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,qEAAqE;IACrE,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,uFAAuF;IACvF,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yCAAyC;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAkBD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,IAAW,EACX,KAAiB,EACjB,MAAM,EACN,SAAiB,EACjB,KAAK,EACL,QAAgB,EAChB,QAAe,EACf,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACR,QAAe,EACf,KAAK,EACL,kBAAkB,EAClB,MAAM,GACP,EAAE,oBAAoB,2CAkJtB"}

package/lib/typescript/module/components/SegmentedButton/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedButton, type SegmentedButtonProps, type SegmentedOption, type SegmentedButtonSize, type SegmentedButtonShape, } from './SegmentedButton';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/SegmentedButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SegmentedButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAC"}

package/lib/typescript/module/components/index.d.ts

@@ -22,6 +22,7 @@ export * from './ProductCard';
 export * from './ProgressBar';
 export * from './QuantityStepper';
 export * from './Radio';
+export * from './SegmentedButton';
 export * from './Select';
 export * from './Sidebar';
 export * from './Spinner';

package/lib/typescript/module/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bacon-pos/ui",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "description": "Bacon POS design system — React Native component library",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",

package/src/components/SegmentedButton/SegmentedButton.tsx

@@ -0,0 +1,269 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  Pressable,
+  View,
+  type LayoutChangeEvent,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+import type { RadiusToken } from '../../theme/spacing';
+import type { TypographyVariant } from '../../theme/typography';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+export type SegmentedButtonSize = 'sm' | 'md';
+/** `default` = soft-rounded rectangle; `round` = fully rounded (pill). */
+export type SegmentedButtonShape = 'default' | 'round';
+
+export interface SegmentedOption {
+  /** Visible label. */
+  label: string;
+  /** Unique value reported on change. */
+  value: string;
+  /** Optional icon shown next to the label. */
+  icon?: IconName;
+  /** Icon side. Defaults to `left`. */
+  iconPosition?: 'left' | 'right';
+  /** Disable just this segment. */
+  disabled?: boolean;
+}
+
+export interface SegmentedButtonProps {
+  /** The segments. Two or more recommended; any count is supported. */
+  options: SegmentedOption[];
+  /** Selected value (controlled). */
+  value?: string;
+  /** Initial selected value (uncontrolled). Defaults to the first option. */
+  defaultValue?: string;
+  /** Change handler. */
+  onChange?: (value: string) => void;
+  /** Size: `sm` (16px text) or `md` (18px text, default). */
+  size?: SegmentedButtonSize;
+  /** Corner style: `default` (rounded rect) or `round` (pill). Defaults to `default`. */
+  shape?: SegmentedButtonShape;
+  /** Override the track corner radius in px (segments follow). Wins over `shape`. */
+  radius?: number;
+  /** Stretch to the container; segments share the width equally. */
+  fullWidth?: boolean;
+  /** Fixed track width in px (overrides `fullWidth`). */
+  width?: number;
+  /** Disable the whole control. */
+  disabled?: boolean;
+  /** Show the track border. Defaults to true. */
+  bordered?: boolean;
+  /** Track background color. Defaults to `background.muted`. */
+  trackColor?: string;
+  /** Selected segment background. Defaults to `action.inverse` (dark). */
+  selectedColor?: string;
+  /** Selected segment text/icon color. Defaults to `action.inverseForeground`. */
+  selectedTextColor?: string;
+  /** Unselected text/icon color. Defaults to `text.secondary`. */
+  textColor?: string;
+  /** Icon size override. Defaults to the size preset. */
+  iconSize?: number;
+  /** Slide the selected highlight between segments. Defaults to true. */
+  animated?: boolean;
+  /** Override the track container style. */
+  style?: StyleProp<ViewStyle>;
+  /** Accessibility label for the group. */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+const SIZES: Record<
+  SegmentedButtonSize,
+  {
+    paddingH: number;
+    paddingV: number;
+    gap: number;
+    trackPadding: number;
+    text: TypographyVariant;
+    icon: number;
+    radius: RadiusToken;
+  }
+> = {
+  sm: { paddingH: 12, paddingV: 10, gap: 6, trackPadding: 4, text: 'bodyMedium', icon: 18, radius: 'md' },
+  md: { paddingH: 16, paddingV: 12, gap: 8, trackPadding: 5, text: 'bodyLarge', icon: 20, radius: 'lg' },
+};
+
+/**
+ * SegmentedButton — faithful to the Bacon POS Figma "Segmented button". A single
+ * connected control of 2+ options where exactly one is selected: the active
+ * segment fills dark with inverse text; the rest are transparent with secondary
+ * text, all inside a rounded track. Supports `sm`/`md` sizes, `default`/`round`
+ * shapes (or a custom `radius`), hug / `fullWidth` / fixed `width` layouts, icons,
+ * per-segment disabling, and color overrides. Controlled or uncontrolled.
+ */
+export function SegmentedButton({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  size = 'md',
+  shape = 'default',
+  radius,
+  fullWidth = false,
+  width,
+  disabled = false,
+  bordered = true,
+  trackColor,
+  selectedColor,
+  selectedTextColor,
+  textColor,
+  iconSize,
+  animated = true,
+  style,
+  accessibilityLabel,
+  testID,
+}: SegmentedButtonProps) {
+  const theme = useTheme();
+  const cfg = SIZES[size];
+
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? options[0]?.value ?? '');
+  const selected = isControlled ? value : uncontrolled;
+
+  const select = (next: string) => {
+    if (!isControlled) setUncontrolled(next);
+    onChange?.(next);
+  };
+
+  // Sliding highlight (thumb): we measure each segment's position/size and glide
+  // an absolutely-positioned fill to the selected one.
+  const layouts = useRef<Record<string, { x: number; width: number }>>({});
+  const thumbX = useRef(new Animated.Value(0)).current;
+  const thumbW = useRef(new Animated.Value(0)).current;
+  const placed = useRef(false);
+  const [measured, setMeasured] = useState(false);
+
+  const placeThumb = (x: number, width: number, withAnim: boolean) => {
+    if (withAnim && animated) {
+      Animated.parallel([
+        Animated.timing(thumbX, { toValue: x, duration: 200, easing: Easing.out(Easing.cubic), useNativeDriver: false }),
+        Animated.timing(thumbW, { toValue: width, duration: 200, easing: Easing.out(Easing.cubic), useNativeDriver: false }),
+      ]).start();
+    } else {
+      thumbX.setValue(x);
+      thumbW.setValue(width);
+    }
+  };
+
+  // Animate to the selected segment when it changes (once layouts are known).
+  useEffect(() => {
+    const l = layouts.current[selected];
+    if (!l) return;
+    placeThumb(l.x, l.width, placed.current);
+    if (!placed.current) {
+      placed.current = true;
+      setMeasured(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, animated]);
+
+  const onSegmentLayout = (value: string) => (e: LayoutChangeEvent) => {
+    const { x, width } = e.nativeEvent.layout;
+    layouts.current[value] = { x, width };
+    // Place/keep the thumb aligned with the selected segment (initial mount and
+    // on relayout/resize) without animating.
+    if (value === selected) {
+      placeThumb(x, width, false);
+      if (!placed.current) {
+        placed.current = true;
+        setMeasured(true);
+      }
+    }
+  };
+
+  const trackRadius = radius ?? (shape === 'round' ? theme.radii.pill : theme.radii.xl);
+  const segmentRadius =
+    shape === 'round'
+      ? theme.radii.pill
+      : radius != null
+        ? Math.max(radius - cfg.trackPadding, 0)
+        : theme.radii[cfg.radius];
+
+  const selectedBg = selectedColor ?? theme.colors.action.inverse;
+  const selectedFg = selectedTextColor ?? theme.colors.action.inverseForeground;
+  const restFg = textColor ?? theme.colors.text.secondary;
+  const resolvedIconSize = iconSize ?? cfg.icon;
+
+  return (
+    <View
+      testID={testID}
+      accessibilityRole="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        {
+          padding: cfg.trackPadding,
+          borderRadius: trackRadius,
+          borderWidth: bordered ? 1 : 0,
+          borderColor: theme.colors.border.default,
+          backgroundColor: trackColor ?? theme.colors.background.muted,
+          alignSelf: fullWidth && width == null ? 'stretch' : 'flex-start',
+          width: width ?? (fullWidth ? '100%' : undefined),
+          opacity: disabled ? 0.5 : 1,
+        },
+        style,
+      ]}
+    >
+      {/* Inner row: shares an unpadded coordinate space with the thumb so the
+          measured segment x/width line up exactly. */}
+      <View style={{ flexDirection: 'row', alignItems: 'stretch', gap: cfg.gap, position: 'relative' }}>
+        <Animated.View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: thumbX,
+            width: thumbW,
+            borderRadius: segmentRadius,
+            backgroundColor: selectedBg,
+            opacity: measured ? 1 : 0,
+          }}
+        />
+        {options.map((opt) => {
+          const isSelected = opt.value === selected;
+          const isDisabled = disabled || opt.disabled;
+          const fg = isSelected ? selectedFg : restFg;
+          const iconNode = opt.icon ? <Icon name={opt.icon} size={resolvedIconSize} color={fg} /> : null;
+          const iconRight = opt.iconPosition === 'right';
+          return (
+            <Pressable
+              key={opt.value}
+              onLayout={onSegmentLayout(opt.value)}
+              onPress={isDisabled ? undefined : () => select(opt.value)}
+              disabled={isDisabled}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isSelected, disabled: isDisabled }}
+              accessibilityLabel={opt.label}
+              testID={`segment-${opt.value}`}
+              style={({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => ({
+                flex: fullWidth || width != null ? 1 : undefined,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: cfg.gap,
+                paddingHorizontal: cfg.paddingH,
+                paddingVertical: cfg.paddingV,
+                borderRadius: segmentRadius,
+                opacity: opt.disabled ? 0.5 : pressed && !isSelected ? 0.6 : 1,
+              })}
+            >
+              {iconNode && !iconRight ? iconNode : null}
+              <Text variant={cfg.text} weight="medium" color={fg} numberOfLines={1}>
+                {opt.label}
+              </Text>
+              {iconNode && iconRight ? iconNode : null}
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/components/SegmentedButton/index.ts

@@ -0,0 +1,7 @@
+export {
+  SegmentedButton,
+  type SegmentedButtonProps,
+  type SegmentedOption,
+  type SegmentedButtonSize,
+  type SegmentedButtonShape,
+} from './SegmentedButton';

package/src/components/index.ts

@@ -22,6 +22,7 @@ export * from './ProductCard';
 export * from './ProgressBar';
 export * from './QuantityStepper';
 export * from './Radio';
+export * from './SegmentedButton';
 export * from './Select';
 export * from './Sidebar';
 export * from './Spinner';