@boostdev/design-system-components 1.2.7 → 2.0.0

package/src/components/layout/ButtonGroup/ButtonGroup.native.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
 import { spacing } from '../../../native/tokens';
 
-export interface ButtonGroupProps {
+export interface ButtonContainerProps {
   children: ReactNode;
   variant?: 'flow' | 'card' | 'modal' | 'content';
   accessibilityLabel?: string;
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps) {
+export function ButtonContainer({ children, variant, accessibilityLabel, style }: ButtonContainerProps) {
   const isColumn = variant === 'card' || variant === 'modal';
   return (
     <View
@@ -32,3 +32,13 @@ export function ButtonGroup({ children, variant, accessibilityLabel, style }: Bu
     </View>
   );
 }
+
+/**
+ * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
+ */
+export const ButtonGroup = ButtonContainer;
+
+/**
+ * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
+ */
+export type ButtonGroupProps = ButtonContainerProps;

package/src/components/layout/ButtonGroup/ButtonGroup.spec.tsx

@@ -1,20 +1,29 @@
 import { render, screen } from '@testing-library/react';
-import { ButtonGroup } from './ButtonGroup';
+import { ButtonContainer, ButtonGroup } from './ButtonGroup';
 
-describe('ButtonGroup', () => {
+describe('ButtonContainer', () => {
   it('renders children', () => {
     render(
-      <ButtonGroup>
+      <ButtonContainer>
         <button>A</button>
         <button>B</button>
-      </ButtonGroup>,
+      </ButtonContainer>,
     );
     expect(screen.getByText('A')).toBeInTheDocument();
     expect(screen.getByText('B')).toBeInTheDocument();
   });
 
   it('accepts a custom className', () => {
-    const { container } = render(<ButtonGroup className="custom"><button>X</button></ButtonGroup>);
+    const { container } = render(<ButtonContainer className="custom"><button>X</button></ButtonContainer>);
     expect(container.firstChild).toHaveClass('custom');
   });
+
+  it('fills the full width of its parent', () => {
+    const { container } = render(<ButtonContainer><button>X</button></ButtonContainer>);
+    expect(container.firstChild).toHaveClass('buttonGroup');
+  });
+
+  it('exports ButtonGroup as a deprecated alias', () => {
+    expect(ButtonGroup).toBe(ButtonContainer);
+  });
 });

package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,27 +1,27 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ButtonGroup } from './ButtonGroup';
+import { ButtonContainer } from './ButtonGroup';
 import { Button } from '../../interaction/Button';
 
 const meta = {
-  title: 'React/Layout/ButtonGroup',
-  component: ButtonGroup,
+  title: 'React/Layout/ButtonContainer',
+  component: ButtonContainer,
   argTypes: {
     variant: { control: 'select', options: ['flow', 'card', 'modal', 'content', undefined] },
   },
-} satisfies Meta<typeof ButtonGroup>;
+} satisfies Meta<typeof ButtonContainer>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 const TwoButtons = () => (
   <>
-    <Button variant="ghost">Cancel</Button>
+    <Button variant="outline">Cancel</Button>
     <Button variant="default">Confirm</Button>
   </>
 );
 
-export const Default: Story = { render: () => <ButtonGroup><TwoButtons /></ButtonGroup> };
-export const Flow: Story = { render: () => <ButtonGroup variant="flow"><TwoButtons /></ButtonGroup> };
-export const Card: Story = { render: () => <ButtonGroup variant="card"><TwoButtons /></ButtonGroup> };
-export const Modal: Story = { render: () => <ButtonGroup variant="modal"><TwoButtons /></ButtonGroup> };
-export const Content: Story = { render: () => <ButtonGroup variant="content"><TwoButtons /></ButtonGroup> };
+export const Default: Story = { render: () => <ButtonContainer><TwoButtons /></ButtonContainer> };
+export const Flow: Story = { render: () => <ButtonContainer variant="flow"><TwoButtons /></ButtonContainer> };
+export const Card: Story = { render: () => <ButtonContainer variant="card"><TwoButtons /></ButtonContainer> };
+export const Modal: Story = { render: () => <ButtonContainer variant="modal"><TwoButtons /></ButtonContainer> };
+export const Content: Story = { render: () => <ButtonContainer variant="content"><TwoButtons /></ButtonContainer> };

package/src/components/layout/ButtonGroup/ButtonGroup.tsx

@@ -3,11 +3,11 @@ import css from './ButtonGroup.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-export interface ButtonGroupProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
+export interface ButtonContainerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   variant?: 'flow' | 'card' | 'modal' | 'content';
 }
 
-export function ButtonGroup({ children, className, variant, ...rest }: ButtonGroupProps) {
+export function ButtonContainer({ children, className, variant, ...rest }: ButtonContainerProps) {
   return (
     <div
       {...rest}
@@ -18,3 +18,13 @@ export function ButtonGroup({ children, className, variant, ...rest }: ButtonGro
     </div>
   );
 }
+
+/**
+ * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
+ */
+export const ButtonGroup = ButtonContainer;
+
+/**
+ * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
+ */
+export type ButtonGroupProps = ButtonContainerProps;

package/src/components/layout/ButtonGroup/index.ts

@@ -1,2 +1,2 @@
-export { ButtonGroup } from './ButtonGroup';
-export type { ButtonGroupProps } from './ButtonGroup';
+export { ButtonContainer, ButtonGroup } from './ButtonGroup';
+export type { ButtonContainerProps, ButtonGroupProps } from './ButtonGroup';

package/src/components/layout/Card/Card.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .card {
     background-color: var(--card_color, var(--bds-color_bg));
     color: var(--card_on-color, var(--bds-color_on-bg));

package/src/components/layout/IconWrapper/IconWrapper.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .wrapper {
     inline-size: 2em;
     block-size: 2em;

package/src/components/layout/SectionHeader/SectionHeader.module.css

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

package/src/components/ui/Accordion/Accordion.module.css

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

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

@@ -12,7 +12,7 @@ React Native accordion component for stacked collapsible sections. By default on
 ## Usage
 
 ```tsx
-import { Accordion } from '@boostdev/components';
+import { Accordion } from '@boostdev/design-system-components';
 
 <Accordion
   items={[

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

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 const sampleItems = [
   { id: '1', title: 'What is this library?', content: <Text>A design system component library built for React, React Native, and Web Components.</Text> },
-  { id: '2', title: 'How do I install it?', content: <Text>Run pnpm add @boostdev/components to add it to your project.</Text> },
+  { id: '2', title: 'How do I install it?', content: <Text>Run pnpm add @boostdev/design-system-components to add it to your project.</Text> },
   { id: '3', title: 'Is it production ready?', content: <Text>The React components are stable. React Native components are in alpha.</Text> },
 ];
 

package/src/components/ui/Alert/Alert.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
     .alert {
         display: flex;
         align-items: flex-start;

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

@@ -12,7 +12,7 @@ React Native alert component for inline status messages. Supports four semantic
 ## Usage
 
 ```tsx
-import { Alert } from '@boostdev/components';
+import { Alert } from '@boostdev/design-system-components';
 
 <Alert variant="success" title="Saved">
   Your changes have been saved successfully.

package/src/components/ui/Avatar/Avatar.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .avatar {
     display: inline-flex;
     align-items: center;

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

@@ -12,7 +12,7 @@ React Native avatar component displaying user initials on a coloured background.
 ## Usage
 
 ```tsx
-import { Avatar } from '@boostdev/components';
+import { Avatar } from '@boostdev/design-system-components';
 
 <Avatar name="John Doe" size="medium" />
 ```

package/src/components/ui/Badge/Badge.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .badge {
     display: inline-flex;
     align-items: center;

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

@@ -12,7 +12,7 @@ React Native badge component for short status labels and counts. Five semantic v
 ## Usage
 
 ```tsx
-import { Badge } from '@boostdev/components';
+import { Badge } from '@boostdev/design-system-components';
 
 <Badge variant="success">Active</Badge>
 <Badge variant="error">3</Badge>

package/src/components/ui/Breadcrumb/Breadcrumb.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .breadcrumb {
     font-size: var(--bds-font_size--body--s);
   }

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

@@ -12,7 +12,7 @@ React Native breadcrumb navigation showing the user's location within a hierarch
 ## Usage
 
 ```tsx
-import { Breadcrumb } from '@boostdev/components';
+import { Breadcrumb } from '@boostdev/design-system-components';
 
 <Breadcrumb
   items={[

package/src/components/ui/Calendar/Calendar.module.css

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

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

@@ -12,7 +12,7 @@ React Native calendar component for date selection. Renders a month grid with Pr
 ## Usage
 
 ```tsx
-import { Calendar } from '@boostdev/components';
+import { Calendar } from '@boostdev/design-system-components';
 
 <Calendar
   defaultValue={new Date(2026, 3, 15)}

package/src/components/ui/Carousel/Carousel.module.css

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

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

@@ -12,7 +12,7 @@ React Native carousel component using a horizontally paging ScrollView with dot
 ## Usage
 
 ```tsx
-import { Carousel } from '@boostdev/components';
+import { Carousel } from '@boostdev/design-system-components';
 import { View, Text } from 'react-native';
 
 <Carousel

package/src/components/ui/Collapsible/Collapsible.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .collapsible {
     border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
     border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));

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

@@ -12,7 +12,7 @@ React Native collapsible section with an animated chevron and smooth expand/coll
 ## Usage
 
 ```tsx
-import { Collapsible } from '@boostdev/components';
+import { Collapsible } from '@boostdev/design-system-components';
 
 <Collapsible summary="More details">
   <Text>Hidden content revealed on press.</Text>

package/src/components/ui/DescriptionList/DescriptionList.module.css

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

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

@@ -12,7 +12,7 @@ React Native description list for displaying key-value pairs. Each item has a bo
 ## Usage
 
 ```tsx
-import { DescriptionList } from '@boostdev/components';
+import { DescriptionList } from '@boostdev/design-system-components';
 
 <DescriptionList
   items={[

package/src/components/ui/Link/Link.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .link {
     color: var(--link_color, var(--bds-color_interactive_on-bg));
     text-decoration: underline;

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

@@ -12,7 +12,7 @@ React Native link component using `Pressable` + `Text`. Opens URLs via `Linking.
 ## Usage
 
 ```tsx
-import { Link } from '@boostdev/components';
+import { Link } from '@boostdev/design-system-components';
 
 <Link href="https://example.com">Visit website</Link>
 <Link onPress={() => navigation.navigate('Settings')}>Settings</Link>

package/src/components/ui/Loading/Loading.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .loading {
     display: flex;
     justify-content: center;

package/src/components/ui/NotificationBanner/NotificationBanner.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .banner {
     display: flex;
     align-items: center;

package/src/components/ui/Pagination/Pagination.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .pagination {
     display: flex;
     justify-content: center;

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

@@ -12,7 +12,7 @@ React Native pagination component for navigating between pages of content. Shows
 ## Usage
 
 ```tsx
-import { Pagination } from '@boostdev/components';
+import { Pagination } from '@boostdev/design-system-components';
 
 <Pagination
   currentPage={3}

package/src/components/ui/Progress/Progress.module.css

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

package/src/components/ui/ProgressCircle/ProgressCircle.module.css

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

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

@@ -12,7 +12,7 @@ React Native circular progress indicator. Displays progress as a ring with an op
 ## Usage
 
 ```tsx
-import { ProgressCircle } from '@boostdev/components';
+import { ProgressCircle } from '@boostdev/design-system-components';
 
 <ProgressCircle value={75} label="Upload progress" showValue />
 <ProgressCircle value={50} label="Loading" size="large" />

package/src/components/ui/Separator/Separator.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .separator {
     border: none;
     background-color: var(--separator_color, var(--bds-color_on-bg));

package/src/components/ui/Skeleton/Skeleton.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .skeleton {
     background: linear-gradient(
       90deg,

package/src/components/ui/SkipLink/SkipLink.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .skipLink {
     position: absolute;
     inset-block-start: var(--bds-space_s);

package/src/components/ui/Table/Table.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .wrapper {
     inline-size: 100%;
     overflow-inline: auto;

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

@@ -12,7 +12,7 @@ React Native table component for displaying structured data in rows and columns.
 ## Usage
 
 ```tsx
-import { Table } from '@boostdev/components';
+import { Table } from '@boostdev/design-system-components';
 
 <Table
   columns={[

package/src/components/ui/Tabs/Tabs.module.css

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

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

@@ -12,7 +12,7 @@ React Native tabs component with a horizontally scrollable tab bar and content p
 ## Usage
 
 ```tsx
-import { Tabs } from '@boostdev/components';
+import { Tabs } from '@boostdev/design-system-components';
 
 <Tabs
   tabs={[

package/src/components/ui/Tooltip/Tooltip.module.css

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

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

@@ -12,7 +12,7 @@ React Native tooltip that appears on long press. Wraps children in a `Pressable`
 ## Usage
 
 ```tsx
-import { Tooltip } from '@boostdev/components';
+import { Tooltip } from '@boostdev/design-system-components';
 import { Text } from 'react-native';
 
 <Tooltip content="Helpful information">

package/src/components/ui/Typography/Typography.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .typography {
     margin: 0;
     font-family: var(--bds-font_family--body);

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

@@ -12,7 +12,7 @@ React Native typography component wrapping `Text` with semantic variants. Use in
 ## Usage
 
 ```tsx
-import { Typography } from '@boostdev/components';
+import { Typography } from '@boostdev/design-system-components';
 
 <Typography variant="h1">Page title</Typography>
 <Typography variant="body">Body copy text.</Typography>

package/src/css/bdc.css

@@ -46,7 +46,7 @@
   initial-value: 0 0 0 0 transparent;
 }
 
-@layer component {
+@layer boostdev.component {
   :root {
     /* border: none by default — outline provides the visual edge */
     --bdc-outline_border: none;

package/src/css/index.css

@@ -1,4 +1,4 @@
-/* @boostdev/components — framework-agnostic CSS barrel */
+/* @boostdev/design-system-components — framework-agnostic CSS barrel */
 @import './bdc.css';
 
 /* UI */

package/src/index.ts

@@ -64,8 +64,8 @@ export { Switch } from './components/interaction/form/Switch';
 export { Textarea } from './components/interaction/form/Textarea';
 
 // Layout
-export { ButtonGroup } from './components/layout/ButtonGroup';
-export type { ButtonGroupProps } from './components/layout/ButtonGroup';
+export { ButtonContainer, ButtonGroup } from './components/layout/ButtonGroup';
+export type { ButtonContainerProps, ButtonGroupProps } from './components/layout/ButtonGroup';
 export { Card } from './components/layout/Card';
 export { SectionHeader } from './components/layout/SectionHeader';
 export { IconWrapper } from './components/layout/IconWrapper';

package/src/native.ts

@@ -39,8 +39,8 @@ 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 { ButtonGroup } from './components/layout/ButtonGroup/ButtonGroup.native';
-export type { ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGroup.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';

package/src/stories/DesignSystem/Borders.mdx

@@ -127,7 +127,7 @@ Override a component's border colour for a specific context by reassigning `--bd
 }
 
 /* Override globally via the token layer */
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bdc_color: var(--bds-color_green);
   }
@@ -151,8 +151,8 @@ The `bdc` tokens are included automatically when you import the component styles
 
 ```css
 /* Included automatically with the full component CSS */
-@import '@boostdev/components/css';
+@import '@boostdev/design-system-components/css';
 
 /* Or load the token layer standalone */
-@import '@boostdev/components/css/bdc';
+@import '@boostdev/design-system-components/css/bdc';
 ```

package/src/stories/DesignSystem/Colors.mdx

@@ -184,7 +184,7 @@ These `--bds-BASE__color--*` tokens are the primitive values. **Do not use them
 Override `--bds-color_green` and `--bds-color_interactive` to change the primary action colour globally:
 
 ```css
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bds-color_green:           var(--bds-BASE__color--blue);
     --bds-color_on-green:         var(--bds-BASE__color--white);

package/src/stories/DesignSystem/DarkMode.mdx

@@ -85,20 +85,20 @@ function ThemeToggle() {
 
 ## Customising tokens in dark mode
 
-Override any token in `@layer tokens.override` — the rule applies regardless of the active theme unless you scope it:
+Override any token in `@layer boostdev.tokens.override` — the rule applies regardless of the active theme unless you scope it:
 
 ```css
 @import "@boostdev/design-system-foundation/css";
 
 /* override for all themes */
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bds-color_green: oklch(60% 0.15 145);
   }
 }
 
 /* override for dark mode only */
-@layer tokens.override {
+@layer boostdev.tokens.override {
   [data-theme="dark"],
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {

package/src/stories/DesignSystem/Overview.mdx

@@ -49,14 +49,25 @@ import '@boostdev/design-system-foundation/css';
 
 ## Layer architecture
 
-All tokens live inside `@layer` declarations. The cascade order, from lowest to highest, is:
+All tokens live inside `@layer` declarations, all prefixed with `boostdev.` to prevent collisions
+with consumer layers of the same name. The cascade order, from lowest to highest, is:
 
 ```
-tokens.base → tokens.semantic → tokens.override → reset → base → utilities → component
+boostdev.tokens.base →
+boostdev.tokens.semantic →
+boostdev.tokens.deprecated →
+boostdev.tokens.override →
+boostdev.reset →
+boostdev.base →
+boostdev.utilities →
+boostdev.components →
+boostdev.component
 ```
 
-`@layer component` — used by every component in this library — sits above the token layers,
-so you can override any component from `@layer my-overrides` without specificity fights.
+`@layer boostdev.component` — used by every component in this library — sits above the token layers,
+so you can override any component from your own layer (e.g. `@layer my-overrides`) without
+specificity fights. Anything written outside of any `@layer` is treated as an unlayered declaration,
+which is the highest-priority in the cascade.
 
 ## Theming
 
@@ -78,7 +89,7 @@ Override any token in your own layer to retheme:
 ```css
 @import "@boostdev/design-system-foundation/css";
 
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bds-cta:    var(--bds-BASE__color--blue);
     --bds-color_on-green: var(--bds-BASE__color--white);