@boostdev/design-system-components 1.2.8 → 2.1.0

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

@@ -12,7 +12,7 @@ A text input with a filterable dropdown list. Type to filter options, tap to sel
 ## Usage
 
 ```tsx
-import { Combobox } from '@boostdev/components';
+import { Combobox } from '@boostdev/design-system-components';
 import { useState } from 'react';
 
 const options = [

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

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

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

@@ -12,7 +12,7 @@ A file selection area that displays an upload prompt. In React Native, actual fi
 ## Usage
 
 ```tsx
-import { FileInput } from '@boostdev/components';
+import { FileInput } from '@boostdev/design-system-components';
 import { useState } from 'react';
 import * as DocumentPicker from 'expo-document-picker';
 

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

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .formGroup {
     --labelPosition: 0; /* Used for positioning */
 

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

@@ -12,7 +12,7 @@ Text input field with label, optional hint, and error state. Maps the `type` pro
 ## Usage
 
 ```tsx
-import { FormInput } from '@boostdev/components';
+import { FormInput } from '@boostdev/design-system-components';
 import { useState } from 'react';
 
 function Example() {

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

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

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

@@ -12,7 +12,7 @@ Numeric input with stepper buttons on each side. Supports min/max clamping, conf
 ## Usage
 
 ```tsx
-import { NumberInput } from '@boostdev/components';
+import { NumberInput } from '@boostdev/design-system-components';
 import { useState } from 'react';
 
 function Example() {

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

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

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

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

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

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

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

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

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

@@ -12,7 +12,7 @@ A horizontal control with multiple segments, where each segment acts as a tab. S
 ## Usage
 
 ```tsx
-import { SegmentedControl } from '@boostdev/components';
+import { SegmentedControl } from '@boostdev/design-system-components';
 import { useState } from 'react';
 
 function Example() {

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

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

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

@@ -12,7 +12,7 @@ Dropdown-style select component. Renders a trigger button that opens a bottom sh
 ## Usage
 
 ```tsx
-import { Select } from '@boostdev/components';
+import { Select } from '@boostdev/design-system-components';
 import { useState } from 'react';
 
 const options = [

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

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

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

@@ -12,7 +12,7 @@ Range slider with a draggable track, optional value display, and error/hint mess
 ## Usage
 
 ```tsx
-import { Slider } from '@boostdev/components';
+import { Slider } from '@boostdev/design-system-components';
 import { useState } from 'react';
 
 function Example() {

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

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .switchGroup {
     --switch_thumb-size:   1.25em;
     --switch_track-pad:    var(--bds-space_xxxs);

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

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

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

@@ -12,7 +12,7 @@ Multiline text input with label, optional hint, and error state. Uses a `TextInp
 ## Usage
 
 ```tsx
-import { Textarea } from '@boostdev/components';
+import { Textarea } from '@boostdev/design-system-components';
 import { useState } from 'react';
 
 function Example() {

package/src/components/interaction/form/atoms/InputContainer.module.css

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .container {
     --labelPosition: calc(var(--inputSize) + var(--bds-space_m));
 

package/src/components/interaction/form/atoms/Label.module.css

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

package/src/components/interaction/form/atoms/Message.module.css

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

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

@@ -1,4 +1,4 @@
-@layer component {
+@layer boostdev.component {
   .buttonGroup {
     container-type: inline-size;
     container-name: button-group;

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/IconWrapper/IconWrapper.stories.tsx

@@ -1,21 +1,53 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconWrapper } from './IconWrapper';
+import { IconWrapper, type IconWrapperProps } from './IconWrapper';
 
-const meta = {
+const CheckIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" 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 StarIcon = (
+  <svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em" aria-hidden>
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+  </svg>
+);
+
+const HeartIcon = (
+  <svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em" aria-hidden>
+    <path d="M12 21s-7-4.35-7-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 11c0 5.65-7 10-7 10z" />
+  </svg>
+);
+
+const iconMap = {
+  check: CheckIcon,
+  star: StarIcon,
+  heart: HeartIcon,
+};
+
+type IconKey = keyof typeof iconMap;
+
+type IconWrapperStoryArgs = Omit<IconWrapperProps, 'children'> & {
+  children?: IconKey;
+};
+
+const meta: Meta<IconWrapperStoryArgs> = {
   title: 'React/Layout/IconWrapper',
   component: IconWrapper,
-} satisfies Meta<typeof IconWrapper>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em">
-        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-      </svg>
-    ),
+  argTypes: {
+    children: {
+      control: 'select',
+      options: Object.keys(iconMap) as IconKey[],
+      mapping: iconMap,
+      description: 'The icon to render inside the circular wrapper.',
+    },
   },
+  args: { children: 'star' },
 };
 
+export default meta;
+type Story = StoryObj<IconWrapperStoryArgs>;
+
+export const Default: Story = {};
+export const Check: Story = { args: { children: 'check' } };
+export const Heart: Story = { args: { children: 'heart' } };

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 */