@boostdev/design-system-components 1.2.2 → 1.2.4

package/src/components/interaction/form/Select/Select.native.tsx

@@ -0,0 +1,252 @@
+import { ReactNode, useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  Modal,
+  FlatList,
+  SafeAreaView,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, border, lineHeight } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label.native';
+import { Message } from '../atoms/Message.native';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectProps {
+  label: ReactNode;
+  name: string;
+  options: SelectOption[];
+  placeholder?: string;
+  value?: string;
+  error?: string;
+  hint?: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: spacing.s,
+    paddingVertical: spacing.xs,
+    borderWidth: 1,
+    borderRadius: border.radius.full,
+    minHeight: 44,
+  },
+  triggerText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+    flex: 1,
+  },
+  chevron: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    marginStart: spacing.xs,
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  sheet: {
+    maxHeight: '60%',
+    borderTopStartRadius: border.radius.m,
+    borderTopEndRadius: border.radius.m,
+    paddingTop: spacing.m,
+    paddingBottom: spacing.xxxl,
+  },
+  sheetHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: spacing.m,
+    paddingBottom: spacing.s,
+  },
+  sheetTitle: {
+    fontFamily: font.family.body,
+    fontSize: font.size.heading3,
+    fontWeight: font.weight.semibold,
+  },
+  closeText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    fontWeight: font.weight.semibold,
+  },
+  optionItem: {
+    paddingHorizontal: spacing.m,
+    paddingVertical: spacing.s,
+    minHeight: 44,
+    justifyContent: 'center',
+  },
+  optionText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.body,
+    lineHeight: lineHeight.body,
+  },
+});
+
+export function Select({
+  label,
+  name,
+  options,
+  placeholder = 'Select an option',
+  value,
+  error,
+  hint,
+  disabled = false,
+  onChange,
+  style,
+}: Readonly<SelectProps>) {
+  const { colors } = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const selectedOption = options.find((o) => o.value === value);
+  const displayText = selectedOption?.label ?? placeholder;
+  const isPlaceholder = !selectedOption;
+
+  const borderColor = error
+    ? colors.colorError
+    : open
+      ? colors.colorInteractive
+      : colors.colorOnBg;
+
+  const handleSelect = (optionValue: string) => {
+    onChange?.(optionValue);
+    setOpen(false);
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      <Label label={label} />
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={typeof label === 'string' ? `${label}, ${displayText}` : name}
+        accessibilityState={{ disabled, expanded: open }}
+        accessibilityHint="Double tap to open options"
+        disabled={disabled}
+        onPress={() => setOpen(true)}
+        style={[
+          styles.trigger,
+          {
+            borderColor,
+            backgroundColor: colors.colorBg,
+          },
+          disabled && { opacity: 0.4 },
+        ]}
+      >
+        <Text
+          style={[
+            styles.triggerText,
+            {
+              color: isPlaceholder ? colors.colorOnBgSubtle : colors.colorOnBg,
+            },
+          ]}
+        >
+          {displayText}
+        </Text>
+        <Text style={[styles.chevron, { color: colors.colorOnBgSubtle }]} aria-hidden>
+          {'\u25BE'}
+        </Text>
+      </Pressable>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setOpen(false)}
+      >
+        <Pressable
+          style={styles.overlay}
+          onPress={() => setOpen(false)}
+          accessibilityRole="button"
+          accessibilityLabel="Close options"
+        >
+          <Pressable
+            style={[styles.sheet, { backgroundColor: colors.colorBg }]}
+            onPress={() => {
+              /* prevent close when tapping sheet */
+            }}
+          >
+            <SafeAreaView>
+              <View style={styles.sheetHeader}>
+                <Text style={[styles.sheetTitle, { color: colors.colorOnBg }]}>
+                  {typeof label === 'string' ? label : 'Select'}
+                </Text>
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityLabel="Close"
+                  onPress={() => setOpen(false)}
+                  hitSlop={8}
+                >
+                  <Text style={[styles.closeText, { color: colors.colorInteractive }]}>
+                    Done
+                  </Text>
+                </Pressable>
+              </View>
+              <FlatList
+                data={options}
+                keyExtractor={(item) => item.value}
+                renderItem={({ item }) => {
+                  const isSelected = item.value === value;
+                  return (
+                    <Pressable
+                      accessibilityRole="button"
+                      accessibilityLabel={item.label}
+                      accessibilityState={{
+                        selected: isSelected,
+                        disabled: item.disabled,
+                      }}
+                      disabled={item.disabled}
+                      onPress={() => handleSelect(item.value)}
+                      style={({ pressed }) => [
+                        styles.optionItem,
+                        isSelected && { backgroundColor: colors.colorBgSubtle },
+                        pressed && { opacity: 0.7 },
+                        item.disabled && { opacity: 0.4 },
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          styles.optionText,
+                          {
+                            color: isSelected
+                              ? colors.colorInteractive
+                              : colors.colorOnBg,
+                            fontWeight: isSelected
+                              ? font.weight.semibold
+                              : font.weight.body,
+                          },
+                        ]}
+                      >
+                        {item.label}
+                      </Text>
+                    </Pressable>
+                  );
+                }}
+              />
+            </SafeAreaView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

package/src/components/interaction/form/Slider/Slider.module.css

@@ -26,7 +26,7 @@
     appearance: none;
     inline-size: 100%;
     block-size: var(--slider_track-height);
-    border-radius: 999px;
+    border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
     background: linear-gradient(
       to right,
       var(--slider_color-active, var(--bdc-color_active)) 0%,
@@ -41,7 +41,7 @@
   .slider:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
-    border-radius: 999px;
+    border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
   }
 
   .slider:disabled {
@@ -54,7 +54,7 @@
     appearance: none;
     inline-size: var(--slider_thumb-size);
     block-size: var(--slider_thumb-size);
-    border-radius: 50%;
+    border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
@@ -66,7 +66,7 @@
     inline-size: var(--slider_thumb-size);
     block-size: var(--slider_thumb-size);
     border: none;
-    border-radius: 50%;
+    border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;

package/src/components/interaction/form/Slider/Slider.native.mdx

@@ -0,0 +1,83 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Slider.native.stories';
+
+<Meta of={Stories} />
+
+# Slider (React Native)
+
+Range slider with a draggable track, optional value display, and error/hint messages. Uses touch responders on the track for value selection.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Slider } from '@boostdev/components';
+import { useState } from 'react';
+
+function Example() {
+  const [volume, setVolume] = useState(50);
+  return (
+    <Slider
+      label="Volume"
+      name="volume"
+      value={volume}
+      onChange={setVolume}
+      showValue
+    />
+  );
+}
+```
+
+## Examples
+
+### Default
+<Canvas of={Stories.Default} />
+
+### With value display
+<Canvas of={Stories.WithValue} />
+
+### Custom range
+<Canvas of={Stories.CustomRange} />
+
+### With step
+<Canvas of={Stories.WithStep} />
+
+### With error
+<Canvas of={Stories.WithError} />
+
+### With hint
+<Canvas of={Stories.WithHint} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+### Interactive
+<Canvas of={Stories.Interactive} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | string | — | Visible label text |
+| `name` | string | — | Field name |
+| `value` | number | — | Controlled value |
+| `defaultValue` | number | — | Uncontrolled default value |
+| `min` | number | `0` | Minimum value |
+| `max` | number | `100` | Maximum value |
+| `step` | number | `1` | Value increment |
+| `showValue` | boolean | `false` | Show current value next to the label |
+| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
+| `error` | string | — | Error message displayed below the track |
+| `hint` | string | — | Hint text displayed below the track |
+| `onChange` | `(value: number) => void` | — | Called with the new value |
+
+## Accessibility
+
+- Uses `accessibilityRole="adjustable"` for VoiceOver/TalkBack
+- `accessibilityValue` provides `min`, `max`, `now`, and `text`
+- `disabled` communicates the disabled state via `accessibilityState`

package/src/components/interaction/form/Slider/Slider.native.spec.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Slider } from './Slider.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Slider (native)', () => {
+  it('renders the label', () => {
+    renderWithTheme(<Slider label="Volume" name="volume" />);
+    expect(screen.getByText('Volume')).toBeInTheDocument();
+  });
+
+  it('shows current value when showValue is true', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" value={75} showValue />,
+    );
+    expect(screen.getByText('75')).toBeInTheDocument();
+  });
+
+  it('hides value display when showValue is false', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" value={50} />,
+    );
+    // Only "Volume" text should be present, not the value
+    expect(screen.queryByText('50')).not.toBeInTheDocument();
+  });
+
+  it('shows error message', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" error="Too low." />,
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('Too low.');
+  });
+
+  it('shows hint message', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" hint="Adjust volume." />,
+    );
+    expect(screen.getByText('Adjust volume.')).toBeInTheDocument();
+  });
+
+  it('uses default min value when no value is provided', () => {
+    renderWithTheme(
+      <Slider label="Volume" name="volume" showValue />,
+    );
+    // Default min is 0, which becomes the initial value
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+});

package/src/components/interaction/form/Slider/Slider.native.stories.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../../native/ThemeContext';
+import { Slider } from './Slider.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/Form/Slider',
+  component: Slider,
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { label: 'Volume', name: 'volume', value: 50 },
+};
+
+export const WithValue: Story = {
+  args: { label: 'Brightness', name: 'brightness', value: 75, showValue: true },
+};
+
+export const CustomRange: Story = {
+  args: { label: 'Temperature', name: 'temp', min: 16, max: 30, value: 21, showValue: true },
+};
+
+export const WithStep: Story = {
+  args: { label: 'Quantity', name: 'qty', min: 0, max: 50, step: 5, value: 25, showValue: true },
+};
+
+export const WithError: Story = {
+  args: { label: 'Volume', name: 'volume', value: 0, error: 'Volume must be at least 10.' },
+};
+
+export const WithHint: Story = {
+  args: { label: 'Volume', name: 'volume', value: 50, hint: 'Adjust playback volume.' },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Volume', name: 'volume', value: 30, disabled: true, showValue: true },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+    return (
+      <Slider
+        label="Volume"
+        name="volume"
+        value={value}
+        onChange={setValue}
+        showValue
+      />
+    );
+  },
+};

package/src/components/interaction/form/Slider/Slider.native.tsx

@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  GestureResponderEvent,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { spacing, font, lineHeight } from '../../../../native/tokens';
+import { useTheme } from '../../../../native/ThemeContext';
+import { Label } from '../atoms/Label.native';
+import { Message } from '../atoms/Message.native';
+
+interface SliderProps {
+  label: string;
+  name: string;
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  showValue?: boolean;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  onChange?: (value: number) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const TRACK_HEIGHT = 6;
+const THUMB_SIZE = 24;
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xxs,
+  },
+  labelRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  valueText: {
+    fontFamily: font.family.body,
+    fontSize: font.size.bodyS,
+    lineHeight: lineHeight.bodyS,
+    fontWeight: font.weight.semibold,
+  },
+  trackContainer: {
+    height: THUMB_SIZE + spacing.xs * 2,
+    justifyContent: 'center',
+    paddingHorizontal: THUMB_SIZE / 2,
+  },
+  track: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2,
+  },
+  thumb: {
+    position: 'absolute',
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    top: '50%',
+    marginTop: -(THUMB_SIZE / 2),
+    borderWidth: 2,
+  },
+});
+
+function clampValue(v: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, v));
+}
+
+function snapToStep(v: number, min: number, step: number): number {
+  return Math.round((v - min) / step) * step + min;
+}
+
+export function Slider({
+  label,
+  name: _name, // eslint-disable-line @typescript-eslint/no-unused-vars
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  showValue = false,
+  disabled = false,
+  error,
+  hint,
+  onChange,
+  style,
+}: Readonly<SliderProps>) {
+  const { colors } = useTheme();
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? min);
+  const [trackWidth, setTrackWidth] = useState(0);
+
+  const currentValue = isControlled ? value : internalValue;
+  const fillPct = max > min ? ((currentValue - min) / (max - min)) * 100 : 0;
+
+  const updateValue = (v: number) => {
+    const clamped = clampValue(v, min, max);
+    const snapped = snapToStep(clamped, min, step);
+    if (!isControlled) setInternalValue(snapped);
+    onChange?.(snapped);
+  };
+
+  const handleTrackLayout = (e: LayoutChangeEvent) => {
+    setTrackWidth(e.nativeEvent.layout.width);
+  };
+
+  const valueFromTouch = (pageX: number, layoutX: number): number => {
+    const x = pageX - layoutX;
+    const pct = clampValue(x / trackWidth, 0, 1);
+    return pct * (max - min) + min;
+  };
+
+  const handleStartShouldSetResponder = () => !disabled;
+  const handleResponderGrant = (e: GestureResponderEvent) => {
+    const target = e.currentTarget as unknown as { measure: (cb: (x: number, y: number, w: number, h: number, px: number, py: number) => void) => void };
+    target.measure((_x, _y, _w, _h, pageX) => {
+      updateValue(valueFromTouch(e.nativeEvent.pageX, pageX));
+    });
+  };
+  const handleResponderMove = (e: GestureResponderEvent) => {
+    const target = e.currentTarget as unknown as { measure: (cb: (x: number, y: number, w: number, h: number, px: number, py: number) => void) => void };
+    target.measure((_x, _y, _w, _h, pageX) => {
+      updateValue(valueFromTouch(e.nativeEvent.pageX, pageX));
+    });
+  };
+
+  return (
+    <View
+      style={[styles.container, style]}
+      accessibilityRole="adjustable"
+      accessibilityLabel={label}
+      accessibilityValue={{ min, max, now: currentValue, text: String(currentValue) }}
+      accessibilityState={{ disabled }}
+    >
+      <View style={styles.labelRow}>
+        <Label label={label} />
+        {showValue && (
+          <Text style={[styles.valueText, { color: colors.colorOnBg }]}>
+            {currentValue}
+          </Text>
+        )}
+      </View>
+      <View
+        style={[styles.trackContainer, disabled && { opacity: 0.4 }]}
+        onLayout={handleTrackLayout}
+        onStartShouldSetResponder={handleStartShouldSetResponder}
+        onMoveShouldSetResponder={handleStartShouldSetResponder}
+        onResponderGrant={handleResponderGrant}
+        onResponderMove={handleResponderMove}
+      >
+        <View style={[styles.track, { backgroundColor: colors.colorBgSubtle }]}>
+          <View
+            style={[
+              styles.fill,
+              {
+                width: `${fillPct}%`,
+                backgroundColor: error ? colors.colorError : colors.colorInteractive,
+              },
+            ]}
+          />
+        </View>
+        <View
+          style={[
+            styles.thumb,
+            {
+              start: `${fillPct}%`,
+              marginStart: -(THUMB_SIZE / 2),
+              backgroundColor: colors.colorBg,
+              borderColor: error ? colors.colorError : colors.colorInteractive,
+            },
+          ]}
+        />
+      </View>
+      <Message type="error" message={error} />
+      <Message type="hint" message={hint} />
+    </View>
+  );
+}

package/src/components/interaction/form/Switch/Switch.module.css

@@ -52,7 +52,7 @@
     align-items: center;
     inline-size: var(--switch_track-width);
     block-size: var(--switch_track-height);
-    border-radius: 999px;
+    border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
     background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
     padding-inline: var(--switch_track-pad);
     pointer-events: none;
@@ -69,7 +69,7 @@
     display: block;
     inline-size: var(--switch_thumb-size);
     block-size: var(--switch_thumb-size);
-    border-radius: 50%;
+    border-radius: var(--switch_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--switch_thumb-bg, var(--bds-color_interactive));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
@@ -97,7 +97,7 @@
   .switch:focus-visible + .track {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
-    border-radius: 999px;
+    border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
   }
 
   /* Disabled state */