@boostdev/design-system-components 2.4.1 → 2.5.0

package/src/components/ui/Tabs/Tabs.native.tsx

@@ -1,133 +0,0 @@
-import { ReactNode, useState } from 'react';
-import {
-  AccessibilityRole,
-  StyleSheet,
-  View,
-  Text,
-  Pressable,
-  ScrollView,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { spacing, font, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-export interface TabItem {
-  id: string;
-  label: ReactNode;
-  content: ReactNode;
-  disabled?: boolean;
-}
-
-interface TabsProps {
-  tabs: TabItem[];
-  defaultTab?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-  },
-  tabList: {
-    flexDirection: 'row',
-    borderBottomWidth: 2,
-  },
-  tabButton: {
-    minHeight: 44,
-    paddingHorizontal: spacing.m,
-    paddingVertical: spacing.s,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderBottomWidth: 2,
-    marginBottom: -2,
-  },
-  tabLabel: {
-    fontSize: font.size.body,
-    fontFamily: font.family.body,
-    lineHeight: lineHeight.body,
-  },
-  panel: {
-    paddingVertical: spacing.m,
-  },
-  pressed: {
-    opacity: 0.75,
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-});
-
-export function Tabs({
-  tabs,
-  defaultTab,
-  style,
-}: Readonly<TabsProps>) {
-  const { colors } = useTheme();
-  const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0]?.id);
-
-  return (
-    <View style={[styles.container, style]}>
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={[styles.tabList, { borderBottomColor: colors.colorBgSubtle }]}
-        accessibilityRole="tabbar"
-      >
-        {tabs.map(tab => {
-          const isActive = activeTab === tab.id;
-
-          return (
-            <Pressable
-              key={tab.id}
-              onPress={() => setActiveTab(tab.id)}
-              disabled={tab.disabled}
-              accessibilityRole="tab"
-              accessibilityState={{
-                selected: isActive,
-                disabled: tab.disabled,
-              }}
-              accessibilityLabel={typeof tab.label === 'string' ? tab.label : undefined}
-              style={({ pressed }) => [
-                styles.tabButton,
-                {
-                  borderBottomColor: isActive
-                    ? colors.colorInteractive
-                    : 'transparent',
-                },
-                tab.disabled && styles.disabled,
-                pressed && !tab.disabled && styles.pressed,
-              ]}
-            >
-              <Text
-                style={[
-                  styles.tabLabel,
-                  {
-                    color: isActive
-                      ? colors.colorInteractive
-                      : colors.colorOnBgSubtle,
-                    fontWeight: isActive ? font.weight.semibold : font.weight.body,
-                  },
-                ]}
-              >
-                {tab.label}
-              </Text>
-            </Pressable>
-          );
-        })}
-      </ScrollView>
-
-      {tabs.map(tab => {
-        const isActive = activeTab === tab.id;
-
-        if (!isActive) return null;
-
-        return (
-          <View key={tab.id} style={styles.panel} accessibilityRole={'tabpanel' as AccessibilityRole}>
-            {tab.content}
-          </View>
-        );
-      })}
-    </View>
-  );
-}

package/src/components/ui/Tooltip/Tooltip.native.mdx

@@ -1,47 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Tooltip.native.stories';
-
-<Meta of={Stories} />
-
-# Tooltip (React Native)
-
-React Native tooltip that appears on long press. Wraps children in a `Pressable` and shows the tooltip content above the trigger element.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Tooltip } from '@boostdev/design-system-components';
-import { Text } from 'react-native';
-
-<Tooltip content="Helpful information">
-  <Text>Long press me</Text>
-</Tooltip>
-```
-
-## Examples
-
-### Default
-<Canvas of={Stories.Default} />
-
-### Long content
-<Canvas of={Stories.LongContent} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `string` | — | Tooltip text |
-| `children` | `ReactNode` | — | Trigger element |
-| `style` | `StyleProp<ViewStyle>` | — | Override wrapper styles |
-
-## Accessibility
-
-- Tooltip content is exposed via `accessibilityHint` on the pressable trigger
-- When visible, the tooltip view has `accessibilityRole="text"` and `accessibilityLabel`
-- Tooltip appears on long press and dismisses on press out

package/src/components/ui/Tooltip/Tooltip.native.spec.tsx

@@ -1,37 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Tooltip } from './Tooltip.native';
-import { Text } from 'react-native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Tooltip (native)', () => {
-  it('renders children', () => {
-    renderWithTheme(
-      <Tooltip content="Helpful info">
-        <Text>Trigger</Text>
-      </Tooltip>,
-    );
-    expect(screen.getByText('Trigger')).toBeInTheDocument();
-  });
-
-  it('does not show tooltip content by default', () => {
-    renderWithTheme(
-      <Tooltip content="Helpful info">
-        <Text>Trigger</Text>
-      </Tooltip>,
-    );
-    expect(screen.queryByText('Helpful info')).not.toBeInTheDocument();
-  });
-
-  it('renders a wrapper element', () => {
-    const { container } = renderWithTheme(
-      <Tooltip content="Helpful info">
-        <Text>Trigger</Text>
-      </Tooltip>,
-    );
-    expect(container.firstChild).toBeInTheDocument();
-  });
-});

package/src/components/ui/Tooltip/Tooltip.native.stories.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Tooltip } from './Tooltip.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Tooltip',
-  component: Tooltip,
-  decorators: [
-    (Story) => (
-      <ThemeProvider colorScheme="light">
-        <div style={{ padding: '60px 20px 20px' }}>
-          <Story />
-        </div>
-      </ThemeProvider>
-    ),
-  ],
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof Tooltip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    content: 'Helpful tooltip text',
-    children: <Text>Long press me</Text>,
-  },
-};
-
-export const LongContent: Story = {
-  args: {
-    content: 'This is a longer tooltip that provides more detailed information about the element.',
-    children: <Text>Long press for details</Text>,
-  },
-};

package/src/components/ui/Tooltip/Tooltip.native.tsx

@@ -1,57 +0,0 @@
-import { ReactNode, useState } from 'react';
-import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { spacing, font, border } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-interface TooltipProps {
-  content: string;
-  children: ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'relative',
-  },
-  tooltip: {
-    position: 'absolute',
-    bottom: '100%',
-    start: 0,
-    marginBottom: spacing.xxs,
-    paddingVertical: spacing.xxs,
-    paddingHorizontal: spacing.xs,
-    borderRadius: border.radius.full,
-    zIndex: 10,
-    alignSelf: 'flex-start',
-  },
-  text: {
-    fontSize: font.size.bodyS,
-    fontFamily: font.family.body,
-  },
-});
-
-export function Tooltip({ content, children, style }: Readonly<TooltipProps>) {
-  const { colors } = useTheme();
-  const [visible, setVisible] = useState(false);
-
-  return (
-    <View style={[styles.wrapper, style]}>
-      <Pressable
-        onLongPress={() => setVisible(true)}
-        onPressOut={() => setVisible(false)}
-        accessibilityHint={content}
-      >
-        {children}
-      </Pressable>
-      {visible && (
-        <View
-          style={[styles.tooltip, { backgroundColor: colors.colorOnBg }]}
-          accessibilityRole="text"
-          accessibilityLabel={content}
-        >
-          <Text style={[styles.text, { color: colors.colorBg }]}>{content}</Text>
-        </View>
-      )}
-    </View>
-  );
-}

package/src/components/ui/Typography/Typography.native.mdx

@@ -1,56 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './Typography.native.stories';
-
-<Meta of={Stories} />
-
-# Typography (React Native)
-
-React Native typography component wrapping `Text` with semantic variants. Use instead of bare `<Text>` to ensure consistent sizing, weight, and line-height from the design token scale.
-
-> **Status: alpha** — API may change before stable release.
-
-## Usage
-
-```tsx
-import { Typography } from '@boostdev/design-system-components';
-
-<Typography variant="h1">Page title</Typography>
-<Typography variant="body">Body copy text.</Typography>
-```
-
-## Examples
-
-### All variants
-<Canvas of={Stories.AllVariants} />
-
-### Heading 1
-<Canvas of={Stories.Heading1} />
-
-### Heading 2
-<Canvas of={Stories.Heading2} />
-
-### Heading 3
-<Canvas of={Stories.Heading3} />
-
-### Body
-<Canvas of={Stories.Body} />
-
-### Body small
-<Canvas of={Stories.BodySmall} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Props reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `"h1" \| "h2" \| "h3" \| "body" \| "body_s"` | `"body"` | Typographic scale |
-| `children` | `ReactNode` | — | Text content |
-| `style` | `StyleProp<TextStyle>` | — | Override text styles |
-
-## Accessibility
-
-- `h1`/`h2`/`h3` variants set `accessibilityRole="header"` automatically
-- Override with the `accessibilityRole` prop if the visual hierarchy doesn't match the semantic hierarchy

package/src/components/ui/Typography/Typography.native.spec.tsx

@@ -1,49 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Typography } from './Typography.native';
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider>{ui}</ThemeProvider>);
-}
-
-describe('Typography (native)', () => {
-  it('renders children text', () => {
-    renderWithTheme(<Typography>Hello world</Typography>);
-    expect(screen.getByText('Hello world')).toBeInTheDocument();
-  });
-
-  it('defaults to body variant without heading role', () => {
-    renderWithTheme(<Typography>Body text</Typography>);
-    expect(screen.getByText('Body text')).toBeInTheDocument();
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  it('has heading role for h1 variant', () => {
-    renderWithTheme(<Typography variant="h1">Heading 1</Typography>);
-    expect(screen.getByRole('heading')).toBeInTheDocument();
-    expect(screen.getByText('Heading 1')).toBeInTheDocument();
-  });
-
-  it('has heading role for h2 variant', () => {
-    renderWithTheme(<Typography variant="h2">Heading 2</Typography>);
-    expect(screen.getByRole('heading')).toBeInTheDocument();
-    expect(screen.getByText('Heading 2')).toBeInTheDocument();
-  });
-
-  it('has heading role for h3 variant', () => {
-    renderWithTheme(<Typography variant="h3">Heading 3</Typography>);
-    expect(screen.getByRole('heading')).toBeInTheDocument();
-    expect(screen.getByText('Heading 3')).toBeInTheDocument();
-  });
-
-  it('does not have heading role for body_s variant', () => {
-    renderWithTheme(<Typography variant="body_s">Small body</Typography>);
-    expect(screen.getByText('Small body')).toBeInTheDocument();
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  it('accepts custom style', () => {
-    renderWithTheme(<Typography style={{ marginTop: 10 }}>Styled</Typography>);
-    expect(screen.getByText('Styled')).toBeInTheDocument();
-  });
-});

package/src/components/ui/Typography/Typography.native.stories.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider } from '../../../native/ThemeContext';
-import { Typography } from './Typography.native';
-
-const meta = {
-  tags: ['!stable', 'alpha'],
-  title: 'React Native/UI/Typography',
-  component: Typography,
-  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },
-  },
-} satisfies Meta<typeof Typography>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Heading1: Story = { args: { children: 'Heading 1', variant: 'h1' } };
-export const Heading2: Story = { args: { children: 'Heading 2', variant: 'h2' } };
-export const Heading3: Story = { args: { children: 'Heading 3', variant: 'h3' } };
-export const Body: Story = { args: { children: 'The quick brown fox jumps over the lazy dog.', variant: 'body' } };
-export const BodySmall: Story = { args: { children: 'The quick brown fox jumps over the lazy dog.', variant: 'body_s' } };
-export const AllVariants: Story = {
-  args: { children: '' },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      <Typography variant="h1">Heading 1</Typography>
-      <Typography variant="h2">Heading 2</Typography>
-      <Typography variant="h3">Heading 3</Typography>
-      <Typography variant="body">Body — The quick brown fox jumps over the lazy dog.</Typography>
-      <Typography variant="body_s">Body Small — The quick brown fox jumps over the lazy dog.</Typography>
-    </div>
-  ),
-};

package/src/components/ui/Typography/Typography.native.tsx

@@ -1,65 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleSheet, Text, StyleProp, TextStyle } from 'react-native';
-import { font, lineHeight } from '../../../native/tokens';
-import { useTheme } from '../../../native/ThemeContext';
-
-type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
-
-interface TypographyProps {
-  variant?: TypographyVariant;
-  children: ReactNode;
-  style?: StyleProp<TextStyle>;
-}
-
-const styles = StyleSheet.create({
-  base: {
-    fontFamily: font.family.body,
-    fontWeight: font.weight.body,
-  },
-  h1: {
-    fontSize: font.size.heading1,
-    fontFamily: font.family.heading,
-    fontWeight: font.weight.heading,
-    lineHeight: lineHeight.heading1,
-  },
-  h2: {
-    fontSize: font.size.heading2,
-    fontFamily: font.family.heading,
-    fontWeight: font.weight.heading,
-    lineHeight: lineHeight.heading2,
-  },
-  h3: {
-    fontSize: font.size.heading3,
-    fontFamily: font.family.heading,
-    fontWeight: font.weight.heading,
-    lineHeight: lineHeight.heading3,
-  },
-  body: {
-    fontSize: font.size.body,
-    lineHeight: lineHeight.body,
-  },
-  body_s: {
-    fontSize: font.size.bodyS,
-    lineHeight: lineHeight.bodyS,
-  },
-});
-
-const accessibilityRoles: Record<TypographyVariant, 'header' | 'text'> = {
-  h1: 'header',
-  h2: 'header',
-  h3: 'header',
-  body: 'text',
-  body_s: 'text',
-};
-
-export function Typography({ variant = 'body', children, style }: TypographyProps) {
-  const { colors } = useTheme();
-  return (
-    <Text
-      accessibilityRole={accessibilityRoles[variant]}
-      style={[styles.base, styles[variant], { color: colors.colorOnBg }, style]}
-    >
-      {children}
-    </Text>
-  );
-}

package/src/native/ThemeContext.tsx

@@ -1,28 +0,0 @@
-import { createContext, ReactNode, useContext, useMemo } from 'react';
-import { useColorScheme } from 'react-native';
-import { colors } from './tokens';
-
-type ThemeColors = typeof colors.light | typeof colors.dark;
-
-interface ThemeContextValue {
-  colors: ThemeColors;
-  isDark: boolean;
-}
-
-const ThemeContext = createContext<ThemeContextValue | null>(null);
-
-export function ThemeProvider({ children, colorScheme }: { children: ReactNode; colorScheme?: 'light' | 'dark' }) {
-  const systemScheme = useColorScheme();
-  const isDark = (colorScheme ?? systemScheme) === 'dark';
-  const value = useMemo<ThemeContextValue>(
-    () => ({ colors: isDark ? colors.dark : colors.light, isDark }),
-    [isDark],
-  );
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
-}
-
-export function useTheme(): ThemeContextValue {
-  const ctx = useContext(ThemeContext);
-  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
-  return ctx;
-}

package/src/native/tokens.ts

@@ -1,13 +0,0 @@
-import { colors, spacing, font, border, zIndex, animation } from '@boostdev/design-system-foundation/native';
-
-export { colors, spacing, font, border, zIndex, animation };
-
-/** Absolute lineHeight values for React Native (ratio × fontSize). */
-export const lineHeight = {
-  display: Math.round(font.size.display * font.lineHeight.display),
-  heading1: Math.round(font.size.heading1 * font.lineHeight.heading),
-  heading2: Math.round(font.size.heading2 * font.lineHeight.heading),
-  heading3: Math.round(font.size.heading3 * font.lineHeight.heading),
-  body: Math.round(font.size.body * font.lineHeight.body),
-  bodyS: Math.round(font.size.bodyS * font.lineHeight.body),
-} as const;

package/src/native.ts

@@ -1,76 +0,0 @@
-// React Native component barrel
-// Explicitly imports *.native.tsx variants so tsup compiles them into dist/native/index.js.
-// Metro resolves this via the "react-native" export condition in package.json.
-
-// Infrastructure
-export { ThemeProvider, useTheme } from './native/ThemeContext';
-
-// UI
-export { Typography } from './components/ui/Typography/Typography.native';
-export { Badge } from './components/ui/Badge/Badge.native';
-export { Avatar } from './components/ui/Avatar/Avatar.native';
-export { Separator } from './components/ui/Separator/Separator.native';
-export { Loading } from './components/ui/Loading/Loading.native';
-export { Progress } from './components/ui/Progress/Progress.native';
-export { Skeleton } from './components/ui/Skeleton/Skeleton.native';
-export { Alert } from './components/ui/Alert/Alert.native';
-export { NotificationBanner } from './components/ui/NotificationBanner/NotificationBanner.native';
-export { Link } from './components/ui/Link/Link.native';
-export { DescriptionList } from './components/ui/DescriptionList/DescriptionList.native';
-export type { DescriptionItem } from './components/ui/DescriptionList/DescriptionList.native';
-export { Breadcrumb } from './components/ui/Breadcrumb/Breadcrumb.native';
-export type { BreadcrumbItem } from './components/ui/Breadcrumb/Breadcrumb.native';
-export { ProgressCircle } from './components/ui/ProgressCircle/ProgressCircle.native';
-export { Tooltip } from './components/ui/Tooltip/Tooltip.native';
-export { Pagination } from './components/ui/Pagination/Pagination.native';
-export { Collapsible } from './components/ui/Collapsible/Collapsible.native';
-export type { CollapsibleProps } from './components/ui/Collapsible/Collapsible.native';
-export { Accordion } from './components/ui/Accordion/Accordion.native';
-export type { AccordionItem } from './components/ui/Accordion/Accordion.native';
-export { Tabs } from './components/ui/Tabs/Tabs.native';
-export type { TabItem } from './components/ui/Tabs/Tabs.native';
-export { Table } from './components/ui/Table/Table.native';
-export type { TableColumn } from './components/ui/Table/Table.native';
-export { Calendar } from './components/ui/Calendar/Calendar.native';
-export { Carousel } from './components/ui/Carousel/Carousel.native';
-
-// Layout
-export { Card } from './components/layout/Card/Card.native';
-export { SectionHeader } from './components/layout/SectionHeader/SectionHeader.native';
-export { IconWrapper } from './components/layout/IconWrapper/IconWrapper.native';
-export type { IconWrapperProps } from './components/layout/IconWrapper/IconWrapper.native';
-export { ButtonContainer, ButtonGroup } from './components/layout/ButtonGroup/ButtonGroup.native';
-export type { ButtonContainerProps, ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGroup.native';
-
-// Interaction
-export { Button } from './components/interaction/Button/Button.native';
-export { Rating } from './components/interaction/Rating/Rating.native';
-export type { ButtonProps } from './components/interaction/Button/Button.native';
-export { Switch } from './components/interaction/form/Switch/Switch.native';
-export { Checkbox } from './components/interaction/form/Checkbox/Checkbox.native';
-export { CheckboxGroup } from './components/interaction/form/CheckboxGroup/CheckboxGroup.native';
-export { Radio } from './components/interaction/form/Radio/Radio.native';
-export { RadioGroup } from './components/interaction/form/RadioGroup/RadioGroup.native';
-export { FileInput } from './components/interaction/form/FileInput/FileInput.native';
-export { Combobox } from './components/interaction/form/Combobox/Combobox.native';
-export type { ComboboxOption } from './components/interaction/form/Combobox/Combobox.native';
-export { SegmentedControl } from './components/interaction/form/SegmentedControl/SegmentedControl.native';
-export { FormInput } from './components/interaction/form/FormInput/FormInput.native';
-export { Textarea } from './components/interaction/form/Textarea/Textarea.native';
-export { Select } from './components/interaction/form/Select/Select.native';
-export type { SelectOption } from './components/interaction/form/Select/Select.native';
-export { Slider } from './components/interaction/form/Slider/Slider.native';
-export { NumberInput } from './components/interaction/form/NumberInput/NumberInput.native';
-export { Dialog } from './components/interaction/Dialog/Dialog.native';
-export { Drawer } from './components/interaction/Drawer/Drawer.native';
-export { ToastProvider, useToast } from './components/interaction/Toast/Toast.native';
-export { DropdownMenu } from './components/interaction/DropdownMenu/DropdownMenu.native';
-export type { DropdownMenuItem } from './components/interaction/DropdownMenu/DropdownMenu.native';
-export { Popover } from './components/interaction/Popover/Popover.native';
-
-// Atoms
-export { Label } from './components/interaction/form/atoms/Label.native';
-export { Message } from './components/interaction/form/atoms/Message.native';
-
-// Tokens (re-exported for convenience)
-export { colors, spacing, font, border, zIndex, animation, lineHeight } from './native/tokens';