cpk-ui 0.5.2 → 0.5.4

package/components/uis/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,31 @@
+import React, { type ReactElement } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export type SegmentedControlSizeType = 'small' | 'medium' | 'large' | number;
+export type SegmentedControlColorType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light';
+export type SegmentedControlItem = {
+    value: string | number;
+    text: string | ReactElement;
+};
+type Styles = {
+    container?: StyleProp<ViewStyle>;
+    segment?: StyleProp<ViewStyle>;
+    selectedSegment?: StyleProp<ViewStyle>;
+    text?: StyleProp<TextStyle>;
+    selectedText?: StyleProp<TextStyle>;
+};
+export type SegmentedControlProps = {
+    testID?: string;
+    values: SegmentedControlItem[];
+    selectedValue: string | number;
+    onValueChange?: (value: string | number) => void;
+    color?: SegmentedControlColorType;
+    size?: SegmentedControlSizeType;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    styles?: Styles;
+    borderRadius?: number;
+};
+declare function SegmentedControlContainer({ testID, values, selectedValue, onValueChange, color, size, disabled, style, styles, borderRadius, }: SegmentedControlProps): ReactElement;
+export declare const SegmentedControl: React.MemoExoticComponent<typeof SegmentedControlContainer>;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAQlE,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC7E,MAAM,MAAM,yBAAyB,GACjC,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AAEZ,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,GAAG,YAAY,CAAC;CAC7B,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AA6EF,iBAAS,yBAAyB,CAAC,EACjC,MAAM,EACN,MAAM,EACN,aAAa,EACb,aAAa,EACb,KAAiB,EACjB,IAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAM,EACN,YAAgB,GACjB,EAAE,qBAAqB,GAAG,YAAY,CA0FtC;AAGD,eAAO,MAAM,gBAAgB,6DAE5B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/uis/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { styled, css } from 'kstyled';
+import { useTheme } from '../../../providers/ThemeProvider';
+import { Typography } from '../Typography/Typography';
+const Container = styled.View `
+  overflow: hidden;
+`;
+// Calculate styles based on theme and props
+const calculateStyles = ({ theme, color, size, borderRadius, styles, }) => {
+    const padding = typeof size === 'number'
+        ? `${size * 0.4}px ${size * 0.8}px`
+        : size === 'large'
+            ? '12px 16px'
+            : size === 'medium'
+                ? '8px 12px'
+                : size === 'small'
+                    ? '6px 8px'
+                    : '8px 12px';
+    return {
+        wrapper: [
+            css `
+        flex-direction: row;
+        background-color: ${theme.bg.paper};
+        border-top-color: ${theme.bg.disabled};
+        border-bottom-color: ${theme.bg.disabled};
+        border-left-color: ${theme.bg.disabled};
+        border-right-color: ${theme.bg.disabled};
+        border-width: 1px;
+        border-radius: ${borderRadius}px;
+      `,
+        ],
+        container: styles?.container,
+        segment: [
+            css `
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        padding: ${padding};
+        background-color: transparent;
+      `,
+            styles?.segment,
+        ],
+        selectedSegment: [
+            css `
+        background-color: ${theme.button[color].bg};
+      `,
+            styles?.selectedSegment,
+        ],
+        text: [
+            css `
+        color: ${theme.text.basic};
+      `,
+            styles?.text,
+        ],
+        selectedText: [
+            css `
+        color: ${theme.button[color].text};
+        font-weight: 600;
+      `,
+            styles?.selectedText,
+        ],
+    };
+};
+function SegmentedControlContainer({ testID, values, selectedValue, onValueChange, color = 'primary', size = 'medium', disabled = false, style, styles, borderRadius = 8, }) {
+    const { theme } = useTheme();
+    // Memoize styles calculation
+    const compositeStyles = useMemo(() => calculateStyles({
+        theme,
+        color,
+        size,
+        borderRadius,
+        styles,
+    }), [theme, color, size, borderRadius, styles]);
+    // Memoize segment press handler
+    const handlePress = useCallback((value) => {
+        if (!disabled) {
+            onValueChange?.(value);
+        }
+    }, [disabled, onValueChange]);
+    // Memoize segments rendering
+    const segments = useMemo(() => {
+        const cornerRadius = Math.max(borderRadius - 1, 0);
+        return values.map((item, index) => {
+            const isSelected = selectedValue === item.value;
+            const isFirst = index === 0;
+            const isLast = index === values.length - 1;
+            return (_jsx(TouchableOpacity, { testID: `segment-${index}`, activeOpacity: 0.7, disabled: disabled, onPress: () => handlePress(item.value), style: [
+                    compositeStyles.segment,
+                    isSelected && compositeStyles.selectedSegment,
+                    {
+                        borderTopLeftRadius: isFirst ? cornerRadius : 0,
+                        borderBottomLeftRadius: isFirst ? cornerRadius : 0,
+                        borderTopRightRadius: isLast ? cornerRadius : 0,
+                        borderBottomRightRadius: isLast ? cornerRadius : 0,
+                        borderRightWidth: isLast ? 0 : 1,
+                        borderRightColor: theme.bg.disabled,
+                    },
+                ], children: typeof item.text === 'string' ? (_jsx(Typography.Body2, { style: [
+                        compositeStyles.text,
+                        isSelected && compositeStyles.selectedText,
+                    ], children: item.text })) : (item.text) }, `segment-${index}`));
+        });
+    }, [
+        values,
+        selectedValue,
+        disabled,
+        handlePress,
+        compositeStyles,
+        borderRadius,
+        theme.bg.disabled,
+    ]);
+    return (_jsx(Container, { style: style, testID: testID, children: _jsx(Container, { style: [compositeStyles.wrapper, compositeStyles.container], children: segments }) }));
+}
+// Export memoized component for better performance
+export const SegmentedControl = React.memo(SegmentedControlContainer);
+export default SegmentedControl;

package/index.d.ts

@@ -16,6 +16,7 @@ export * from './components/uis/LoadingIndicator/LoadingIndicator';
 export * from './components/uis/PinchZoom/PinchZoom';
 export * from './components/uis/Rating/Rating';
 export * from './components/uis/RadioGroup/RadioGroup';
+export * from './components/uis/SegmentedControl/SegmentedControl';
 export * from './components/uis/StatusbarBrightness/StatusBarBrightness';
 export * from './components/uis/SwitchToggle/SwitchToggle';
 export * from './components/uis/Typography/Typography';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AAGtD,cAAc,iDAAiD,CAAC;AAGhE,cAAc,aAAa,CAAC;AAG5B,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wCAAwC,CAAC;AACvD,cAAc,0DAA0D,CAAC;AACzE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AAGvD,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AAGtD,cAAc,iDAAiD,CAAC;AAGhE,cAAc,aAAa,CAAC;AAG5B,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wCAAwC,CAAC;AACvD,cAAc,oDAAoD,CAAC;AACnE,cAAc,0DAA0D,CAAC;AACzE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC;AAGvD,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/index.js

@@ -20,6 +20,7 @@ export * from './components/uis/LoadingIndicator/LoadingIndicator';
 export * from './components/uis/PinchZoom/PinchZoom';
 export * from './components/uis/Rating/Rating';
 export * from './components/uis/RadioGroup/RadioGroup';
+export * from './components/uis/SegmentedControl/SegmentedControl';
 export * from './components/uis/StatusbarBrightness/StatusBarBrightness';
 export * from './components/uis/SwitchToggle/SwitchToggle';
 export * from './components/uis/Typography/Typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpk-ui",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "main": "index",
   "react-native": "index",
   "module": "index",

package/src/components/uis/RadioGroup/RadioGroup.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {type ReactElement} from 'react';
-import {View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import type {RenderAPI} from '@testing-library/react-native';
 import {act, fireEvent, render, waitFor} from '@testing-library/react-native';
 
@@ -133,12 +133,14 @@ describe('[RadioButton]', () => {
     testingLib = render(component);
 
     const circleRadio = testingLib.getByTestId('circle-radio-0');
-
     // Get initial styles before layout
-    const initialStyle = circleRadio.props.style;
-    const initialMargin = Array.isArray(initialStyle)
-      ? initialStyle.find((s: any) => s && s.margin !== undefined)?.margin
-      : initialStyle?.margin;
+    const initialStyle = StyleSheet.flatten(circleRadio.props.style) ?? {};
+    const initialMargin =
+      initialStyle.margin ??
+      initialStyle.marginTop ??
+      initialStyle.marginRight ??
+      initialStyle.marginBottom ??
+      initialStyle.marginLeft;
 
     // Initially margin should be 0 since innerLayout is not set
     expect(initialMargin).toBe(0);
@@ -156,13 +158,18 @@ describe('[RadioButton]', () => {
 
     // After layout, the styles should reflect the innerLayout values
     // margin should be 2 and borderRadius should be width/2 = 20
-    const updatedStyle = testingLib.getByTestId('circle-radio-0').props.style;
-    const styleWithLayout = Array.isArray(updatedStyle)
-      ? updatedStyle.find((s: any) => s && s.margin !== undefined)
-      : updatedStyle;
-
-    expect(styleWithLayout.margin).toBe(2);
-    expect(styleWithLayout.borderRadius).toBe(20); // 40 / 2
+    const updatedStyle =
+      StyleSheet.flatten(testingLib.getByTestId('circle-radio-0').props.style) ??
+      {};
+    const updatedMargin =
+      updatedStyle.margin ??
+      updatedStyle.marginTop ??
+      updatedStyle.marginRight ??
+      updatedStyle.marginBottom ??
+      updatedStyle.marginLeft;
+
+    expect(updatedMargin).toBe(2);
+    expect(updatedStyle.borderRadius).toBe(20); // 40 / 2
   });
 
   describe('colors', () => {

package/src/components/uis/SegmentedControl/SegmentedControl.stories.tsx

@@ -0,0 +1,546 @@
+import {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {View} from 'react-native';
+
+import {withThemeProvider} from '../../../../.storybook/decorators';
+import {SegmentedControl, SegmentedControlColorType, SegmentedControlSizeType} from './SegmentedControl';
+import {Typography} from '../Typography/Typography';
+
+const meta = {
+  title: 'SegmentedControl',
+  component: (props) => <SegmentedControl {...props} />,
+  parameters: {
+    notes: `
+A iOS-style SegmentedControl component that allows users to select a single option from a set of choices.
+
+## Features
+- **iOS-style Design**: Native iOS segmented control appearance
+- **Flexible Sizing**: Supports preset sizes (small, medium, large) and custom numeric values
+- **Color Variants**: Multiple color options for different contexts
+- **Disabled State**: Can disable the entire control
+- **Smooth Transitions**: Animated selection with visual feedback
+
+## Size Options
+- \`small\`: 6px/8px padding
+- \`medium\`: 8px/12px padding (default)
+- \`large\`: 12px/16px padding
+- Custom number: Any pixel value for custom padding
+
+## Usage
+\`\`\`tsx
+<SegmentedControl
+  values={[
+    {value: 'day', text: 'Day'},
+    {value: 'week', text: 'Week'},
+    {value: 'month', text: 'Month'},
+  ]}
+  selectedValue="day"
+  onValueChange={setSelectedValue}
+  size="medium"
+  color="primary"
+/>
+\`\`\`
+        `,
+    docs: {
+      description: {
+        component: `
+A iOS-style SegmentedControl component that allows users to select a single option from a set of choices.
+
+## Features
+- **iOS-style Design**: Native iOS segmented control appearance
+- **Flexible Sizing**: Supports preset sizes (small, medium, large) and custom numeric values
+- **Color Variants**: Multiple color options for different contexts
+- **Disabled State**: Can disable the entire control
+- **Smooth Transitions**: Animated selection with visual feedback
+
+## Size Options
+- \`small\`: 6px/8px padding
+- \`medium\`: 8px/12px padding (default)
+- \`large\`: 12px/16px padding
+- Custom number: Any pixel value for custom padding
+
+## Usage
+\`\`\`tsx
+<SegmentedControl
+  values={[
+    {value: 'day', text: 'Day'},
+    {value: 'week', text: 'Week'},
+    {value: 'month', text: 'Month'},
+  ]}
+  selectedValue="day"
+  onValueChange={setSelectedValue}
+  size="medium"
+  color="primary"
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'success',
+        'danger',
+        'warning',
+        'info',
+        'light',
+      ] as SegmentedControlColorType[],
+      description: 'Color variant of the selected segment',
+    },
+    size: {
+      control: 'radio',
+      options: ['small', 'medium', 'large', 16, 20, 24, 32],
+      description: 'Size can be "small", "medium", "large" or a custom number in pixels',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the entire segmented control',
+    },
+    borderRadius: {
+      control: {type: 'number', min: 0, max: 20, step: 1},
+      description: 'Border radius of the control',
+    },
+  },
+  decorators: [
+    (Story, context) =>
+      withThemeProvider(
+        Story,
+        context,
+        // @ts-ignore
+        context.args.theme,
+      ),
+  ],
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const [selectedValue, setSelectedValue] = useState<string | number>('day');
+
+    return (
+      <View style={{gap: 20}}>
+        <SegmentedControl
+          values={[
+            {value: 'day', text: 'Day'},
+            {value: 'week', text: 'Week'},
+            {value: 'month', text: 'Month'},
+          ]}
+          color={args.color}
+          size={args.size}
+          disabled={args.disabled}
+          borderRadius={args.borderRadius}
+          selectedValue={selectedValue}
+          onValueChange={setSelectedValue}
+        />
+        <View style={{padding: 16, alignItems: 'center'}}>
+          <Typography.Heading2>Selected: {selectedValue}</Typography.Heading2>
+        </View>
+      </View>
+    );
+  },
+  args: {
+    theme: 'light',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    borderRadius: 8,
+  },
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+  },
+};
+
+export const WithDynamicContent: Story = {
+  render: (args) => {
+    const [selectedValue, setSelectedValue] = useState<string | number>('day');
+
+    const contentMap = {
+      day: {
+        title: 'Daily View',
+        description: 'View your daily activities and statistics',
+        emoji: '📅',
+      },
+      week: {
+        title: 'Weekly View',
+        description: 'See your weekly progress and trends',
+        emoji: '📊',
+      },
+      month: {
+        title: 'Monthly View',
+        description: 'Analyze your monthly performance',
+        emoji: '📈',
+      },
+    };
+
+    const content = contentMap[selectedValue as keyof typeof contentMap];
+
+    return (
+      <View style={{gap: 20}}>
+        <SegmentedControl
+          values={[
+            {value: 'day', text: 'Day'},
+            {value: 'week', text: 'Week'},
+            {value: 'month', text: 'Month'},
+          ]}
+          color={args.color}
+          size={args.size}
+          disabled={args.disabled}
+          borderRadius={args.borderRadius}
+          selectedValue={selectedValue}
+          onValueChange={setSelectedValue}
+        />
+        <View style={{padding: 24, alignItems: 'center', gap: 12}}>
+          <Typography.Heading1 style={{fontSize: 48}}>
+            {content.emoji}
+          </Typography.Heading1>
+          <Typography.Heading2>{content.title}</Typography.Heading2>
+          <Typography.Body1 style={{textAlign: 'center', opacity: 0.7}}>
+            {content.description}
+          </Typography.Body1>
+        </View>
+      </View>
+    );
+  },
+  args: {
+    theme: 'light',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    borderRadius: 8,
+  },
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+  },
+};
+
+export const PlatformSelector: Story = {
+  render: (args) => {
+    const [selectedValue, setSelectedValue] = useState<string | number>('ios');
+
+    const platformInfo = {
+      ios: {
+        icon: '🍎',
+        name: 'iOS',
+        version: 'iOS 17+',
+        features: ['Swift', 'SwiftUI', 'UIKit'],
+      },
+      android: {
+        icon: '🤖',
+        name: 'Android',
+        version: 'Android 14+',
+        features: ['Kotlin', 'Jetpack Compose', 'Material Design'],
+      },
+      web: {
+        icon: '🌐',
+        name: 'Web',
+        version: 'Modern Browsers',
+        features: ['React', 'TypeScript', 'Responsive Design'],
+      },
+    };
+
+    const info = platformInfo[selectedValue as keyof typeof platformInfo];
+
+    return (
+      <View style={{gap: 20}}>
+        <SegmentedControl
+          values={[
+            {value: 'ios', text: 'iOS'},
+            {value: 'android', text: 'Android'},
+            {value: 'web', text: 'Web'},
+          ]}
+          color={args.color}
+          size={args.size}
+          disabled={args.disabled}
+          borderRadius={args.borderRadius}
+          selectedValue={selectedValue}
+          onValueChange={setSelectedValue}
+        />
+        <View style={{padding: 24, gap: 16}}>
+          <View style={{alignItems: 'center', gap: 8}}>
+            <Typography.Heading1 style={{fontSize: 56}}>
+              {info.icon}
+            </Typography.Heading1>
+            <Typography.Heading2>{info.name}</Typography.Heading2>
+            <Typography.Body2 style={{opacity: 0.6}}>
+              {info.version}
+            </Typography.Body2>
+          </View>
+          <View style={{gap: 8, marginTop: 8}}>
+            <Typography.Heading3>Key Technologies:</Typography.Heading3>
+            {info.features.map((feature) => (
+              <Typography.Body1 key={feature} style={{paddingLeft: 12}}>
+                • {feature}
+              </Typography.Body1>
+            ))}
+          </View>
+        </View>
+      </View>
+    );
+  },
+  args: {
+    theme: 'light',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    borderRadius: 8,
+  },
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+  },
+};
+
+export const AllSizes: Story = {
+  render: (args) => {
+    const [selectedSmall, setSelectedSmall] = useState<string | number>('day');
+    const [selectedMedium, setSelectedMedium] = useState<string | number>('day');
+    const [selectedLarge, setSelectedLarge] = useState<string | number>('day');
+
+    const values = [
+      {value: 'day', text: 'Day'},
+      {value: 'week', text: 'Week'},
+      {value: 'month', text: 'Month'},
+    ];
+
+    return (
+      <View style={{gap: 24}}>
+        <View style={{gap: 8}}>
+          <Typography.Heading3>Small</Typography.Heading3>
+          <SegmentedControl
+            values={values}
+            color="primary"
+            size="small"
+            borderRadius={8}
+            selectedValue={selectedSmall}
+            onValueChange={setSelectedSmall}
+          />
+        </View>
+        <View style={{gap: 8}}>
+          <Typography.Heading3>Medium</Typography.Heading3>
+          <SegmentedControl
+            values={values}
+            color="primary"
+            size="medium"
+            borderRadius={8}
+            selectedValue={selectedMedium}
+            onValueChange={setSelectedMedium}
+          />
+        </View>
+        <View style={{gap: 8}}>
+          <Typography.Heading3>Large</Typography.Heading3>
+          <SegmentedControl
+            values={values}
+            color="primary"
+            size="large"
+            borderRadius={8}
+            selectedValue={selectedLarge}
+            onValueChange={setSelectedLarge}
+          />
+        </View>
+      </View>
+    );
+  },
+  args: {
+    theme: 'light',
+  },
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+  },
+};
+
+export const AllColors: Story = {
+  render: (args) => {
+    const [selected1, setSelected1] = useState<string | number>(1);
+    const [selected2, setSelected2] = useState<string | number>(1);
+    const [selected3, setSelected3] = useState<string | number>(1);
+    const [selected4, setSelected4] = useState<string | number>(1);
+    const [selected5, setSelected5] = useState<string | number>(1);
+    const [selected6, setSelected6] = useState<string | number>(1);
+
+    const values = [
+      {value: 1, text: 'Option 1'},
+      {value: 2, text: 'Option 2'},
+      {value: 3, text: 'Option 3'},
+    ];
+
+    return (
+      <View style={{gap: 20}}>
+        <View style={{gap: 8}}>
+          <Typography.Heading3>Primary</Typography.Heading3>
+          <SegmentedControl
+            values={values}
+            color="primary"
+            size="medium"
+            borderRadius={8}
+            selectedValue={selected1}
+            onValueChange={setSelected1}
+          />
+        </View>
+        <View style={{gap: 8}}>
+          <Typography.Heading3>Secondary</Typography.Heading3>
+          <SegmentedControl
+            values={values}
+            color="secondary"
+            size="medium"
+            borderRadius={8}
+            selectedValue={selected2}
+            onValueChange={setSelected2}
+          />
+        </View>
+        <View style={{gap: 8}}>
+          <Typography.Heading3>Success</Typography.Heading3>
+          <SegmentedControl
+            values={values}
+            color="success"
+            size="medium"
+            borderRadius={8}
+            selectedValue={selected3}
+            onValueChange={setSelected3}
+          />
+        </View>
+        <View style={{gap: 8}}>
+          <Typography.Heading3>Danger</Typography.Heading3>
+          <SegmentedControl
+            values={values}
+            color="danger"
+            size="medium"
+            borderRadius={8}
+            selectedValue={selected4}
+            onValueChange={setSelected4}
+          />
+        </View>
+        <View style={{gap: 8}}>
+          <Typography.Heading3>Warning</Typography.Heading3>
+          <SegmentedControl
+            values={values}
+            color="warning"
+            size="medium"
+            borderRadius={8}
+            selectedValue={selected5}
+            onValueChange={setSelected5}
+          />
+        </View>
+        <View style={{gap: 8}}>
+          <Typography.Heading3>Info</Typography.Heading3>
+          <SegmentedControl
+            values={values}
+            color="info"
+            size="medium"
+            borderRadius={8}
+            selectedValue={selected6}
+            onValueChange={setSelected6}
+          />
+        </View>
+      </View>
+    );
+  },
+  args: {
+    theme: 'light',
+  },
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+  },
+};
+
+export const WithIcons: Story = {
+  render: (args) => {
+    const [selectedValue, setSelectedValue] = useState<string | number>('list');
+
+    return (
+      <View style={{gap: 20}}>
+        <SegmentedControl
+          values={[
+            {value: 'grid', text: <Typography.Body2>📱 Grid</Typography.Body2>},
+            {value: 'list', text: <Typography.Body2>📋 List</Typography.Body2>},
+            {value: 'map', text: <Typography.Body2>🗺️ Map</Typography.Body2>},
+          ]}
+          color={args.color}
+          size={args.size}
+          disabled={args.disabled}
+          borderRadius={args.borderRadius}
+          selectedValue={selectedValue}
+          onValueChange={setSelectedValue}
+        />
+        <View style={{padding: 16, alignItems: 'center'}}>
+          <Typography.Body1>View mode: {selectedValue}</Typography.Body1>
+        </View>
+      </View>
+    );
+  },
+  args: {
+    theme: 'light',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    borderRadius: 8,
+  },
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => {
+    const [selectedValue, setSelectedValue] = useState<string | number>('second');
+
+    return (
+      <View style={{gap: 20}}>
+        <SegmentedControl
+          values={[
+            {value: 'first', text: 'First'},
+            {value: 'second', text: 'Second'},
+            {value: 'third', text: 'Third'},
+          ]}
+          color={args.color}
+          size={args.size}
+          disabled={args.disabled}
+          borderRadius={args.borderRadius}
+          selectedValue={selectedValue}
+          onValueChange={setSelectedValue}
+        />
+        <View style={{padding: 16, alignItems: 'center'}}>
+          <Typography.Body1 style={{opacity: 0.5}}>
+            This control is disabled
+          </Typography.Body1>
+        </View>
+      </View>
+    );
+  },
+  args: {
+    theme: 'light',
+    color: 'primary',
+    size: 'medium',
+    disabled: true,
+    borderRadius: 8,
+  },
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+  },
+};

package/src/components/uis/SegmentedControl/SegmentedControl.test.tsx

@@ -0,0 +1,274 @@
+import * as React from 'react';
+import {type ReactElement} from 'react';
+import {View, Text} from 'react-native';
+import type {RenderAPI} from '@testing-library/react-native';
+import {fireEvent, render, waitFor} from '@testing-library/react-native';
+
+import {createComponent, createTestProps} from '../../../../test/testUtils';
+import {type SegmentedControlColorType, SegmentedControl} from './SegmentedControl';
+import {Typography} from '../Typography/Typography';
+
+let props: any;
+let component: ReactElement;
+let testingLib: RenderAPI;
+
+const values = [
+  {value: 'day', text: 'Day'},
+  {value: 'week', text: 'Week'},
+  {value: 'month', text: 'Month'},
+];
+
+describe('[SegmentedControl] render', () => {
+  it('should render without crashing', async () => {
+    props = createTestProps({
+      selectedValue: 'day',
+      onValueChange: (value: string | number) => (props.selectedValue = value),
+    });
+
+    component = createComponent(
+      <View>
+        <SegmentedControl
+          values={values}
+          onValueChange={props.onValueChange}
+          selectedValue={props.selectedValue}
+        />
+      </View>,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should trigger `onValueChange` and change `selectedValue` props', () => {
+    props = createTestProps({
+      selectedValue: 'day',
+      onValueChange: (value: string | number) => (props.selectedValue = value),
+    });
+
+    component = createComponent(
+      <View>
+        <SegmentedControl
+          values={values}
+          onValueChange={props.onValueChange}
+          selectedValue={props.selectedValue}
+        />
+      </View>,
+    );
+
+    testingLib = render(component);
+
+    const secondOption = testingLib.getByTestId('segment-1');
+    expect(props.selectedValue).toEqual('day');
+
+    fireEvent.press(secondOption);
+    expect(props.selectedValue).toEqual('week');
+  });
+
+  it('should not trigger `onValueChange` when disabled', () => {
+    props = createTestProps({
+      selectedValue: 'day',
+      onValueChange: jest.fn(),
+    });
+
+    component = createComponent(
+      <View>
+        <SegmentedControl
+          values={values}
+          disabled={true}
+          onValueChange={props.onValueChange}
+          selectedValue={props.selectedValue}
+        />
+      </View>,
+    );
+
+    testingLib = render(component);
+
+    const secondOption = testingLib.getByTestId('segment-1');
+    fireEvent.press(secondOption);
+
+    expect(props.onValueChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('[SegmentedControl] colors', () => {
+  const colors = [
+    'primary',
+    'secondary',
+    'success',
+    'info',
+    'warning',
+    'danger',
+    'light',
+  ];
+
+  it('should render all colors', async () => {
+    component = createComponent(
+      <View>
+        {colors.map((color) => {
+          return (
+            <View key={color} style={{marginTop: 24}}>
+              <SegmentedControl
+                color={color as SegmentedControlColorType}
+                values={values}
+                selectedValue="day"
+              />
+            </View>
+          );
+        })}
+      </View>,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+  });
+});
+
+describe('[SegmentedControl] sizes', () => {
+  it('should render with small size', async () => {
+    component = createComponent(
+      <SegmentedControl
+        values={values}
+        selectedValue="day"
+        size="small"
+      />,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should render with medium size', async () => {
+    component = createComponent(
+      <SegmentedControl
+        values={values}
+        selectedValue="day"
+        size="medium"
+      />,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should render with large size', async () => {
+    component = createComponent(
+      <SegmentedControl
+        values={values}
+        selectedValue="day"
+        size="large"
+      />,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should render with custom numeric size', async () => {
+    component = createComponent(
+      <SegmentedControl
+        values={values}
+        selectedValue="day"
+        size={28}
+      />,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+  });
+});
+
+describe('[SegmentedControl] with different data lengths', () => {
+  it('should render with 2 segments', async () => {
+    const twoSegments = [
+      {value: 'first', text: 'First'},
+      {value: 'second', text: 'Second'},
+    ];
+    component = createComponent(
+      <SegmentedControl
+        values={twoSegments}
+        selectedValue="first"
+      />,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+    expect(testingLib.getByTestId('segment-0')).toBeTruthy();
+    expect(testingLib.getByTestId('segment-1')).toBeTruthy();
+  });
+
+  it('should render with 4 segments', async () => {
+    const fourSegments = [
+      {value: 1, text: 'One'},
+      {value: 2, text: 'Two'},
+      {value: 3, text: 'Three'},
+      {value: 4, text: 'Four'},
+    ];
+    component = createComponent(
+      <SegmentedControl
+        values={fourSegments}
+        selectedValue={1}
+      />,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+    expect(testingLib.getByTestId('segment-0')).toBeTruthy();
+    expect(testingLib.getByTestId('segment-1')).toBeTruthy();
+    expect(testingLib.getByTestId('segment-2')).toBeTruthy();
+    expect(testingLib.getByTestId('segment-3')).toBeTruthy();
+  });
+});
+
+describe('[SegmentedControl] custom borderRadius', () => {
+  it('should render with custom border radius', async () => {
+    component = createComponent(
+      <SegmentedControl
+        borderRadius={16}
+        values={values}
+        selectedValue="day"
+      />,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+  });
+});
+
+describe('[SegmentedControl] with ReactElement text', () => {
+  it('should render with React elements as text', async () => {
+    const valuesWithElements = [
+      {value: 'grid', text: <View><Text>Grid</Text></View>},
+      {value: 'list', text: <View><Text>List</Text></View>},
+    ];
+
+    component = createComponent(
+      <SegmentedControl
+        values={valuesWithElements}
+        selectedValue="grid"
+      />,
+    );
+
+    testingLib = render(component);
+
+    const baseElement = await waitFor(() => testingLib.toJSON());
+    expect(baseElement).toBeTruthy();
+  });
+});

package/src/components/uis/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,229 @@
+import React, {useCallback, useMemo, type ReactElement} from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {TouchableOpacity} from 'react-native';
+import {styled, css} from 'kstyled';
+
+import {useTheme} from '../../../providers/ThemeProvider';
+import {Typography} from '../Typography/Typography';
+import type {CpkTheme} from '../../../utils/theme';
+
+export type SegmentedControlSizeType = 'small' | 'medium' | 'large' | number;
+export type SegmentedControlColorType =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light';
+
+export type SegmentedControlItem = {
+  value: string | number;
+  text: string | ReactElement;
+};
+
+type Styles = {
+  container?: StyleProp<ViewStyle>;
+  segment?: StyleProp<ViewStyle>;
+  selectedSegment?: StyleProp<ViewStyle>;
+  text?: StyleProp<TextStyle>;
+  selectedText?: StyleProp<TextStyle>;
+};
+
+export type SegmentedControlProps = {
+  testID?: string;
+  values: SegmentedControlItem[];
+  selectedValue: string | number;
+  onValueChange?: (value: string | number) => void;
+  color?: SegmentedControlColorType;
+  size?: SegmentedControlSizeType;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  styles?: Styles;
+  borderRadius?: number;
+};
+
+const Container = styled.View`
+  overflow: hidden;
+`;
+
+// Calculate styles based on theme and props
+const calculateStyles = ({
+  theme,
+  color,
+  size,
+  borderRadius,
+  styles,
+}: {
+  theme: CpkTheme;
+  color: SegmentedControlColorType;
+  size: SegmentedControlSizeType;
+  borderRadius: number;
+  styles?: Styles;
+}) => {
+  const padding =
+    typeof size === 'number'
+      ? `${size * 0.4}px ${size * 0.8}px`
+      : size === 'large'
+        ? '12px 16px'
+        : size === 'medium'
+          ? '8px 12px'
+          : size === 'small'
+            ? '6px 8px'
+            : '8px 12px';
+
+  return {
+    wrapper: [
+      css`
+        flex-direction: row;
+        background-color: ${theme.bg.paper};
+        border-top-color: ${theme.bg.disabled};
+        border-bottom-color: ${theme.bg.disabled};
+        border-left-color: ${theme.bg.disabled};
+        border-right-color: ${theme.bg.disabled};
+        border-width: 1px;
+        border-radius: ${borderRadius}px;
+      `,
+    ],
+    container: styles?.container,
+    segment: [
+      css`
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        padding: ${padding};
+        background-color: transparent;
+      `,
+      styles?.segment,
+    ],
+    selectedSegment: [
+      css`
+        background-color: ${theme.button[color].bg};
+      `,
+      styles?.selectedSegment,
+    ],
+    text: [
+      css`
+        color: ${theme.text.basic};
+      `,
+      styles?.text,
+    ],
+    selectedText: [
+      css`
+        color: ${theme.button[color].text};
+        font-weight: 600;
+      `,
+      styles?.selectedText,
+    ],
+  };
+};
+
+function SegmentedControlContainer({
+  testID,
+  values,
+  selectedValue,
+  onValueChange,
+  color = 'primary',
+  size = 'medium',
+  disabled = false,
+  style,
+  styles,
+  borderRadius = 8,
+}: SegmentedControlProps): ReactElement {
+  const {theme} = useTheme();
+
+  // Memoize styles calculation
+  const compositeStyles = useMemo(
+    () =>
+      calculateStyles({
+        theme,
+        color,
+        size,
+        borderRadius,
+        styles,
+      }),
+    [theme, color, size, borderRadius, styles],
+  );
+
+  // Memoize segment press handler
+  const handlePress = useCallback(
+    (value: string | number) => {
+      if (!disabled) {
+        onValueChange?.(value);
+      }
+    },
+    [disabled, onValueChange],
+  );
+
+  // Memoize segments rendering
+  const segments = useMemo(
+    () => {
+      const cornerRadius = Math.max(borderRadius - 1, 0);
+
+      return values.map((item: SegmentedControlItem, index: number) => {
+        const isSelected = selectedValue === item.value;
+        const isFirst = index === 0;
+        const isLast = index === values.length - 1;
+
+        return (
+          <TouchableOpacity
+            key={`segment-${index}`}
+            testID={`segment-${index}`}
+            activeOpacity={0.7}
+            disabled={disabled}
+            onPress={() => handlePress(item.value)}
+            style={[
+              compositeStyles.segment,
+              isSelected && compositeStyles.selectedSegment,
+              {
+                borderTopLeftRadius: isFirst ? cornerRadius : 0,
+                borderBottomLeftRadius: isFirst ? cornerRadius : 0,
+                borderTopRightRadius: isLast ? cornerRadius : 0,
+                borderBottomRightRadius: isLast ? cornerRadius : 0,
+                borderRightWidth: isLast ? 0 : 1,
+                borderRightColor: theme.bg.disabled,
+              },
+            ]}
+          >
+            {typeof item.text === 'string' ? (
+              <Typography.Body2
+                style={[
+                  compositeStyles.text,
+                  isSelected && compositeStyles.selectedText,
+                ]}
+              >
+                {item.text}
+              </Typography.Body2>
+            ) : (
+              item.text
+            )}
+          </TouchableOpacity>
+        );
+      });
+    },
+    [
+      values,
+      selectedValue,
+      disabled,
+      handlePress,
+      compositeStyles,
+      borderRadius,
+      theme.bg.disabled,
+    ],
+  );
+
+  return (
+    <Container style={style} testID={testID}>
+      <Container style={[compositeStyles.wrapper, compositeStyles.container]}>
+        {segments}
+      </Container>
+    </Container>
+  );
+}
+
+// Export memoized component for better performance
+export const SegmentedControl = React.memo(
+  SegmentedControlContainer,
+);
+
+export default SegmentedControl;

package/src/index.tsx

@@ -23,6 +23,7 @@ export * from './components/uis/LoadingIndicator/LoadingIndicator';
 export * from './components/uis/PinchZoom/PinchZoom';
 export * from './components/uis/Rating/Rating';
 export * from './components/uis/RadioGroup/RadioGroup';
+export * from './components/uis/SegmentedControl/SegmentedControl';
 export * from './components/uis/StatusbarBrightness/StatusBarBrightness';
 export * from './components/uis/SwitchToggle/SwitchToggle';
 export * from './components/uis/Typography/Typography';