@boostdev/design-system-components 1.2.8 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.2.8",
+  "version": "2.0.0",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -284,7 +284,7 @@
     "changelog:unreleased": "pnpm exec git-cliff --unreleased"
   },
   "devDependencies": {
-    "@boostdev/design-system-foundation": "^1.0.6",
+    "@boostdev/design-system-foundation": "^2.0.0",
     "@modelcontextprotocol/sdk": "^1.27.0",
     "@storybook/addon-docs": "8.6.14",
     "@storybook/addon-essentials": "^8.6.14",
@@ -319,7 +319,7 @@
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@boostdev/design-system-foundation": ">=1.0.6",
+    "@boostdev/design-system-foundation": ">=2.0.0",
     "react": ">=18",
     "react-dom": ">=18",
     "react-native": ">=0.70"

package/src/components/interaction/Button/Button.mdx

@@ -8,8 +8,8 @@ import * as Stories from './Button.stories';
 Primary interactive element for triggering actions. Renders as `<button>` or `<a>` depending on whether `href` is provided.
 
 ## When to use
-- The main action on a page or dialog (`default`)
-- Secondary or ghost actions (`ghost`)
+- The main action on a page or dialog (`variant="default"`)
+- Secondary or less emphatic actions (`variant="outline"`)
 - Navigation that should look like an action (`href` → renders as `<a>`)
 
 > **Form actions:** When using buttons in a form (submit, reset, cancel), always wrap them in a `ButtonContainer` component. This provides consistent spacing, alignment, and responsive layout for form actions. Use `variant="flow"` for step navigation or `variant="card"` for single-form submissions.
@@ -18,6 +18,16 @@ Primary interactive element for triggering actions. Renders as `<button>` or `<a
 - Navigation to another page when it reads naturally as a link — use `Link` instead
 - When the action is purely icon-based without a label — ensure `aria-label` is set
 
+## HTML attribute forwarding
+
+`Button` spreads all unrecognised props onto the underlying element (`<button>` when `href` is absent, `<a>` when `href` is provided). That means every standard HTML attribute for the target element is accepted as a prop, including:
+
+- **Form-related (on `<button>`)**: `type` (default `"button"` — set to `"submit"` for form submission or `"reset"` to reset), `form`, `formAction`, `formMethod`, `formNoValidate`, `formTarget`, `name`, `value`, `autoFocus`.
+- **Link-related (on `<a>`)**: `download`, `hreflang`, `ping`, `referrerPolicy` (plus the explicit `target` and `rel` props).
+- **Universal**: `id`, `style`, `tabIndex`, `title`, `role`, all `aria-*` attributes, all `data-*` attributes, and every DOM event handler (`onFocus`, `onBlur`, `onKeyDown`, `onMouseEnter`, etc.).
+
+> **Gotcha:** the rendered DOM shows `type="button"` by default because that is the component default — it is **not** forced. Pass `type="submit"` to wire the button to a parent `<form>`'s `onSubmit` handler (preferred over an `onClick` shim, because it preserves Enter-to-submit, native form validation, and assistive-tech semantics).
+
 ## Examples
 
 ### All variants & sizes
@@ -26,7 +36,7 @@ Primary interactive element for triggering actions. Renders as `<button>` or `<a
 ### Default
 <Canvas of={Stories.Default} />
 
-### Ghost
+### Outline
 <Canvas of={Stories.Ghost} />
 
 ### Sizes

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

@@ -27,7 +27,7 @@
   }
 }
 
-@layer component {
+@layer boostdev.component {
   .button,
   .button[href] {
     all: unset;

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

@@ -12,7 +12,7 @@ React Native button component using `Pressable`. Matches the web `Button` API as
 ## Usage
 
 ```tsx
-import { Button } from '@boostdev/components';
+import { Button } from '@boostdev/design-system-components';
 
 <Button variant="default" size="medium" onPress={() => console.log('pressed')}>
   Save
@@ -22,7 +22,7 @@ import { Button } 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/Button/Button.tsx

@@ -3,20 +3,48 @@ 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;
+  /** 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;
 }
 

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;

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