@boostdev/design-system-components 1.2.8 → 2.1.0

package/src/components/interaction/Button/Button.native.stories.tsx

@@ -1,34 +1,113 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider } from '../../../native/ThemeContext';
-import { Button } from './Button.native';
+import { Button, type ButtonProps } from './Button.native';
 
-const meta = {
+const CheckIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden>
+    <path d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm6.93 8.2-6.85 9.29a1 1 0 0 1-1.43.19l-4.89-3.91a1 1 0 0 1-.15-1.41A1 1 0 0 1 7 12.21l4.08 3.26L17.32 7a1 1 0 0 1 1.39-.21 1 1 0 0 1 .22 1.41Z" fill="currentColor"/>
+  </svg>
+);
+
+const ArrowRight = <span aria-hidden>→</span>;
+const ArrowLeft = <span aria-hidden>←</span>;
+
+const iconMap = {
+  none: undefined,
+  check: CheckIcon,
+  arrowRight: ArrowRight,
+  arrowLeft: ArrowLeft,
+};
+
+type IconKey = keyof typeof iconMap;
+
+type ButtonStoryArgs = Omit<ButtonProps, 'iconStart' | 'iconEnd' | 'children'> & {
+  iconStart?: IconKey;
+  iconEnd?: IconKey;
+  children?: ReactNode;
+};
+
+const meta: Meta<ButtonStoryArgs> = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/Interaction/Button',
   component: Button,
   decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'centered' },
   argTypes: {
-    variant: { control: 'select', options: ['default', 'ghost'] },
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+      description: 'Visual style. `default` is filled; `outline` is transparent with a border.',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Height + horizontal padding.',
+      table: { defaultValue: { summary: 'medium' } },
+    },
+    iconStart: {
+      control: 'select',
+      options: Object.keys(iconMap) as IconKey[],
+      mapping: iconMap,
+      description: 'Icon rendered before the label.',
+    },
+    iconEnd: {
+      control: 'select',
+      options: Object.keys(iconMap) as IconKey[],
+      mapping: iconMap,
+      description: 'Icon rendered after the label.',
+    },
+    isIconOnly: {
+      control: 'boolean',
+      description: 'Forces 1:1 aspect ratio with minimal xs padding. Composable with any `variant`. Requires `accessibilityLabel`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    disabled: { control: 'boolean' },
     onPress: { action: 'pressed' },
   },
-} satisfies Meta<typeof Button>;
+  args: { variant: 'default', size: 'medium' },
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<ButtonStoryArgs>;
 
-export const Default: Story = { args: { children: 'Default', variant: 'default' } };
-export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } };
+export const Playground: Story = {
+  args: { children: 'Button', iconStart: 'none', iconEnd: 'none' },
+};
+
+export const Default: Story = { args: { children: 'Default' } };
+export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } };
 export const Small: Story = { args: { children: 'Small', size: 'small' } };
 export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
 export const Large: Story = { args: { children: 'Large', size: 'large' } };
 export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
+
+export const WithIconStart: Story = { args: { children: 'Confirm', iconStart: 'check' } };
+export const WithIconEnd: Story = { args: { children: 'Continue', iconEnd: 'arrowRight' } };
+
+export const IconOnly: Story = {
+  args: {
+    isIconOnly: true,
+    accessibilityLabel: 'Confirm',
+    children: CheckIcon,
+  },
+};
+
+export const IconOnlyOutline: Story = {
+  args: {
+    variant: 'outline',
+    isIconOnly: true,
+    accessibilityLabel: 'Confirm',
+    children: CheckIcon,
+  },
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      {(['default', 'ghost'] as const).map(v => (
+      {(['default', 'outline'] as const).map(v => (
         <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
           {(['small', 'medium', 'large'] as const).map(s => (
             <Button key={s} variant={v} size={s}>{v} {s}</Button>
@@ -38,3 +117,25 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+export const AllIconOnly: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      {(['default', 'outline'] as const).map(v => (
+        <div key={v} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+          {(['small', 'medium', 'large'] as const).map(s => (
+            <Button
+              key={s}
+              variant={v}
+              size={s}
+              isIconOnly
+              accessibilityLabel={`${v} ${s}`}
+            >
+              {CheckIcon}
+            </Button>
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};

package/src/components/interaction/Button/Button.native.tsx

@@ -13,6 +13,8 @@ export interface ButtonProps {
   iconStart?: ReactNode;
   iconEnd?: ReactNode;
   disabled?: boolean;
+  /** Forces a 1:1 aspect ratio with minimal padding for icon-only buttons. Requires `accessibilityLabel`. */
+  isIconOnly?: boolean;
   onPress?: () => void;
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
@@ -46,6 +48,7 @@ export function Button({
   iconStart,
   iconEnd,
   disabled = false,
+  isIconOnly = false,
   onPress,
   accessibilityLabel,
   style,
@@ -62,9 +65,11 @@ export function Button({
   const isOutline = variant === 'outline' || variant === 'ghost';
   const containerStyle: ViewStyle = {
     height,
-    paddingHorizontal: px,
+    paddingHorizontal: isIconOnly ? spacing.xs : px,
     borderRadius: radius,
     opacity: disabled ? 0.4 : 1,
+    // Icon-only: square with equal xs padding on both axes.
+    ...(isIconOnly && { aspectRatio: 1, paddingVertical: spacing.xs }),
     ...(variant === 'default' && { backgroundColor: primaryColor }),
     ...(isOutline && {
       backgroundColor: 'transparent',
@@ -86,9 +91,13 @@ export function Button({
     >
       {iconStart && <View importantForAccessibility="no-hide-descendants" accessibilityElementsHidden={true}>{iconStart}</View>}
       {children && (
-        <Text style={[styles.label, { fontSize, color: textColor }]}>
-          {children}
-        </Text>
+        isIconOnly
+          ? children
+          : (
+            <Text style={[styles.label, { fontSize, color: textColor }]}>
+              {children}
+            </Text>
+          )
       )}
       {iconEnd && <View importantForAccessibility="no-hide-descendants">{iconEnd}</View>}
     </Pressable>

package/src/components/interaction/Button/Button.spec.tsx

@@ -47,4 +47,20 @@ describe('Button', () => {
     render(<Button iconEnd={<span data-testid="icon">★</span>}>Label</Button>);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
+
+  it('applies --iconOnly class when isIconOnly is true', () => {
+    render(
+      <Button isIconOnly aria-label="Close">
+        <span data-testid="icon">×</span>
+      </Button>
+    );
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+    expect(screen.getByRole('button').className).toContain('--iconOnly');
+  });
+
+  it('does not apply --iconOnly class by default', () => {
+    render(<Button>Click</Button>);
+    expect(screen.getByRole('button').className).not.toContain('--iconOnly');
+  });
 });

package/src/components/interaction/Button/Button.stories.tsx

@@ -1,42 +1,160 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
+import { Button, type ButtonProps } from './Button';
 
-const meta = {
+const CheckIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden>
+    <path d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm6.93 8.2-6.85 9.29a1 1 0 0 1-1.43.19l-4.89-3.91a1 1 0 0 1-.15-1.41A1 1 0 0 1 7 12.21l4.08 3.26L17.32 7a1 1 0 0 1 1.39-.21 1 1 0 0 1 .22 1.41Z"/>
+  </svg>
+);
+
+const ArrowRight = <span aria-hidden>→</span>;
+const ArrowLeft = <span aria-hidden>←</span>;
+
+const iconMap = {
+  none: undefined,
+  check: CheckIcon,
+  arrowRight: ArrowRight,
+  arrowLeft: ArrowLeft,
+};
+
+type IconKey = keyof typeof iconMap;
+
+/**
+ * Story-local args: `iconStart`/`iconEnd` are narrowed to the icon keys
+ * (`'check' | 'arrowRight' | …`) so the Controls panel stays in sync with
+ * the rendered icon. Storybook's `mapping` resolves the key → ReactNode at
+ * render time, so the prop still receives a real ReactNode downstream.
+ */
+type ButtonStoryArgs = Omit<ButtonProps, 'iconStart' | 'iconEnd'> & {
+  iconStart?: IconKey;
+  iconEnd?: IconKey;
+};
+
+const meta: Meta<ButtonStoryArgs> = {
   title: 'React/Interaction/Button',
   component: Button,
   argTypes: {
-    variant: { control: 'select', options: ['default', 'ghost'] },
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+      description: 'Visual style. `default` is filled; `outline` is transparent with a border.',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Height + padding. `small` is 2.25em, `medium` is 3em, `large` bumps font-size to the h3 scale.',
+      table: { defaultValue: { summary: 'medium' } },
+    },
+    iconStart: {
+      control: 'select',
+      options: Object.keys(iconMap) as IconKey[],
+      mapping: iconMap,
+      description: 'Icon rendered before the label.',
+    },
+    iconEnd: {
+      control: 'select',
+      options: Object.keys(iconMap) as IconKey[],
+      mapping: iconMap,
+      description: 'Icon rendered after the label.',
+    },
+    isIconOnly: {
+      control: 'boolean',
+      description: 'Forces a 1:1 aspect ratio with minimal padding. Composable with any `variant`. Requires `aria-label`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    hasPulse: {
+      control: 'boolean',
+      description: 'Adds a pulsing animation for CTA emphasis. Respects `prefers-reduced-motion`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Blocks interaction, sets `aria-disabled`, and removes the element from the tab order.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    href: {
+      control: 'text',
+      description: 'When set, renders as `<a>` pointing to this URL instead of `<button>`.',
+    },
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible label. Required for icon-only buttons.',
+    },
     onClick: { action: 'clicked' },
   },
-} satisfies Meta<typeof Button>;
+  args: { variant: 'default', size: 'medium' },
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<ButtonStoryArgs>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Button',
+    iconStart: 'none',
+    iconEnd: 'none',
+  },
+};
 
-export const Default: Story = { args: { children: 'Default', variant: 'default' } };
-export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } };
+export const Default: Story = { args: { children: 'Default' } };
+export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } };
 export const Small: Story = { args: { children: 'Small', size: 'small' } };
 export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
 export const Large: Story = { args: { children: 'Large', size: 'large' } };
 export const AsLink: Story = { args: { children: 'Link Button', href: 'https://example.com' } };
 export const WithPulse: Story = { args: { children: 'Pulsing', hasPulse: true } };
 export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
-export const WithIcons: Story = {
+
+export const WithIconStart: Story = { args: { children: 'Confirm', iconStart: 'check' } };
+export const WithIconEnd: Story = { args: { children: 'Continue', iconEnd: 'arrowRight' } };
+export const WithBothIcons: Story = { args: { children: 'Both', iconStart: 'arrowLeft', iconEnd: 'arrowRight' } };
+
+export const IconOnly: Story = {
   args: {
-    children: 'With Icons',
-    iconStart: <span>→</span>,
-    iconEnd: <span>←</span>,
+    isIconOnly: true,
+    'aria-label': 'Confirm',
+    children: CheckIcon,
   },
 };
+
+export const IconOnlyOutline: Story = {
+  args: {
+    variant: 'outline',
+    isIconOnly: true,
+    'aria-label': 'Confirm',
+    children: CheckIcon,
+  },
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
-      {(['default', 'ghost'] as const).map(v => (
-        ['small', 'medium', 'large'].map(s => (
-          <Button key={`${v}-${s}`} variant={v} size={s as 'small' | 'medium' | 'large'}>{v} {s}</Button>
+      {(['default', 'outline'] as const).map(v =>
+        (['small', 'medium', 'large'] as const).map(s => (
+          <Button key={`${v}-${s}`} variant={v} size={s}>{v} {s}</Button>
+        ))
+      )}
+    </div>
+  ),
+};
+
+export const AllIconOnly: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+      {(['default', 'outline'] as const).map(v =>
+        (['small', 'medium', 'large'] as const).map(s => (
+          <Button
+            key={`${v}-${s}`}
+            variant={v}
+            size={s}
+            isIconOnly
+            aria-label={`${v} ${s}`}
+          >
+            {CheckIcon}
+          </Button>
         ))
-      ))}
+      )}
     </div>
   ),
 };

package/src/components/interaction/Button/Button.tsx

@@ -3,20 +3,50 @@ import css from './Button.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
+/**
+ * Props for the Button component.
+ *
+ * Button spreads all unrecognised props onto the underlying element —
+ * `<button>` when `href` is absent, `<a>` when `href` is provided —
+ * so every standard HTML attribute for that element is accepted.
+ *
+ * Notably, this means `type`, `form`, `name`, `value`, `autoFocus`, all
+ * `aria-*`, all `data-*`, and every DOM event handler are valid props.
+ */
 export interface ButtonProps extends WithClassName, ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+  /** When provided, the button renders as an `<a>` element pointing to this URL. */
   href?: string;
+  /** Visual style. `'default'` is filled; `'outline'` is transparent with a border. `'ghost'` is a deprecated alias for `'outline'`. */
   variant?: 'default' | 'outline' | /** @deprecated Use "outline" instead */ 'ghost';
+  /**
+   * Button behaviour within a form. Defaults to `'button'` (no form submission).
+   * Set to `'submit'` to trigger the parent `<form>`'s submit handler on click or Enter;
+   * `'reset'` to reset the form. Ignored when rendering as `<a>` (i.e. when `href` is set).
+   */
   type?: 'button' | 'submit' | 'reset';
+  /** Control height and padding. Defaults to `'medium'`. */
   size?: 'small' | 'medium' | 'large';
+  /** Icon rendered before the label. */
   iconStart?: ReactNode;
+  /** Icon rendered after the label. */
   iconEnd?: ReactNode;
+  /** Label content. Required unless `aria-label` is set (icon-only button). */
   children?: ReactNode;
+  /** When true, blocks interaction, sets `aria-disabled`, and removes the element from the tab order. */
   disabled?: boolean;
+  /** Adds a pulsing animation for call-to-action emphasis. Respects `prefers-reduced-motion`. */
   hasPulse?: boolean;
+  /** When true, forces a 1:1 aspect ratio with equal `xs` padding on both axes. Pass the icon as `children`; composable with any `variant`. Requires `aria-label`. */
+  isIconOnly?: boolean;
+  /** Click handler. Typed as `HTMLElement` because the root may be `<button>` or `<a>`. */
   onClick?: MouseEventHandler<HTMLElement>;
+  /** Anchor target (only applied when rendered as `<a>`). */
   target?: string;
+  /** Anchor rel (only applied when rendered as `<a>`). */
   rel?: string;
+  /** Accessible label. Required for icon-only buttons (no text children). */
   'aria-label'?: string;
+  /** ID(s) of element(s) that describe the button (e.g. a tooltip or helper text). */
   'aria-describedby'?: string;
 }
 
@@ -29,6 +59,7 @@ export function Button({
   iconEnd,
   size = 'medium',
   hasPulse = false,
+  isIconOnly = false,
   href,
   target,
   rel,
@@ -41,6 +72,7 @@ export function Button({
     css[`--${variant}`],
     css[`--size_${size}`],
     hasPulse && css['--hasPulse'],
+    isIconOnly && css['--iconOnly'],
     className,
   );
 

package/src/components/interaction/Command/Command.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .dialog {
     padding: 0;
     border: none;

package/src/components/interaction/Dialog/Dialog.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .dialog {
     font-size: var(--bds-font_size--body--s);
     border: var(--dialog_border, none);

package/src/components/interaction/Dialog/Dialog.native.mdx

@@ -12,7 +12,7 @@ A modal dialog overlay that centers content on screen with a semi-transparent ba
 ## Usage
 
 ```tsx
-import { Dialog } from '@boostdev/components';
+import { Dialog } from '@boostdev/design-system-components';
 
 const [open, setOpen] = useState(false);
 
@@ -25,7 +25,7 @@ const [open, setOpen] = useState(false);
 Wrap your tree in `ThemeProvider` (once, at the app root):
 
 ```tsx
-import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
 
 export default function App() {
   return <ThemeProvider><YourApp /></ThemeProvider>;

package/src/components/interaction/Drawer/Drawer.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .drawer {
     position: fixed;
     inset-block: 0;

package/src/components/interaction/Drawer/Drawer.native.mdx

@@ -12,7 +12,7 @@ A sliding panel that slides in from the bottom of the screen. Built on React Nat
 ## Usage
 
 ```tsx
-import { Drawer } from '@boostdev/components';
+import { Drawer } from '@boostdev/design-system-components';
 
 const [open, setOpen] = useState(false);
 
@@ -25,7 +25,7 @@ const [open, setOpen] = useState(false);
 Wrap your tree in `ThemeProvider` (once, at the app root):
 
 ```tsx
-import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
 
 export default function App() {
   return <ThemeProvider><YourApp /></ThemeProvider>;

package/src/components/interaction/DropdownMenu/DropdownMenu.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .wrapper {
     position: relative;
     display: inline-flex;

package/src/components/interaction/DropdownMenu/DropdownMenu.native.mdx

@@ -12,7 +12,7 @@ A dropdown menu that opens as a bottom sheet modal on mobile. Accepts a trigger
 ## Usage
 
 ```tsx
-import { DropdownMenu } from '@boostdev/components';
+import { DropdownMenu } from '@boostdev/design-system-components';
 
 <DropdownMenu
   trigger={<Button>Actions</Button>}
@@ -27,7 +27,7 @@ import { DropdownMenu } from '@boostdev/components';
 Wrap your tree in `ThemeProvider` (once, at the app root):
 
 ```tsx
-import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
 
 export default function App() {
   return <ThemeProvider><YourApp /></ThemeProvider>;

package/src/components/interaction/Popover/Popover.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .wrapper {
     display: inline-flex;
 

package/src/components/interaction/Popover/Popover.native.mdx

@@ -12,7 +12,7 @@ A popover overlay that displays content in a centered modal. The trigger element
 ## Usage
 
 ```tsx
-import { Popover } from '@boostdev/components';
+import { Popover } from '@boostdev/design-system-components';
 
 <Popover
   content={<Text>Additional information here.</Text>}
@@ -25,7 +25,7 @@ import { Popover } from '@boostdev/components';
 Wrap your tree in `ThemeProvider` (once, at the app root):
 
 ```tsx
-import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
 
 export default function App() {
   return <ThemeProvider><YourApp /></ThemeProvider>;

package/src/components/interaction/Rating/Rating.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .rating {
     display: inline-flex;
     gap: var(--bds-space_xxxs);

package/src/components/interaction/Rating/Rating.native.mdx

@@ -12,7 +12,7 @@ React Native read-only star rating display using text characters. Shows filled a
 ## Usage
 
 ```tsx
-import { Rating } from '@boostdev/components';
+import { Rating } from '@boostdev/design-system-components';
 
 <Rating value={4} />
 <Rating value={7} max={10} />

package/src/components/interaction/Toast/Toast.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .toastContainer {
     position: fixed;
     inset: unset; /* override UA popover default (inset: 0) */

package/src/components/interaction/Toast/Toast.native.mdx

@@ -14,8 +14,8 @@ A toast notification system using React context. Provides `ToastProvider` and `u
 Wrap your app root in `ToastProvider`:
 
 ```tsx
-import { ToastProvider } from '@boostdev/components';
-import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+import { ToastProvider } from '@boostdev/design-system-components';
+import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
 
 export default function App() {
   return (
@@ -31,7 +31,7 @@ export default function App() {
 Then use `useToast` in any descendant:
 
 ```tsx
-import { useToast } from '@boostdev/components';
+import { useToast } from '@boostdev/design-system-components';
 
 function SaveButton() {
   const { showToast } = useToast();

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

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .checkboxGroup {
     --inputSize: calc(var(--bds-space_s) * 2);
 

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

@@ -12,7 +12,7 @@ React Native checkbox component with label, optional hint, and error state. Full
 ## Usage
 
 ```tsx
-import { Checkbox } from '@boostdev/components';
+import { Checkbox } from '@boostdev/design-system-components';
 import { useState } from 'react';
 
 function Example() {

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

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .group {
     border: none;
     padding: 0;

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

@@ -12,7 +12,7 @@ Groups related checkboxes under a common legend with optional hint and error mes
 ## Usage
 
 ```tsx
-import { CheckboxGroup, Checkbox } from '@boostdev/components';
+import { CheckboxGroup, Checkbox } from '@boostdev/design-system-components';
 import { useState } from 'react';
 
 function Example() {

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

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .formGroup {
     display: flex;
     flex-direction: column;