npm - @boostdev/design-system-components - Versions diffs - 1.2.7 → 2.0.0 - Mend

@boostdev/design-system-components 1.2.7 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/src/stories/DesignSystem/Typography.mdx CHANGED Viewed

@@ -49,7 +49,7 @@ export const TrackingSample = ({ token, label, value }) => (
 Override both tokens to apply a custom typeface globally:
 ```css
-@layer tokens.override {
+@layer boostdev.tokens.override {
   :root {
     --bds-font_family--heading: 'Inter', sans-serif;
     --bds-font_family--body:    'Inter', sans-serif;

package/src/stories/Introduction.mdx CHANGED Viewed

@@ -30,20 +30,20 @@ import logo from '../static/logo.svg';
     ## Installation
     ```bash
-    pnpm add @boostdev/components @boostdev/design-system-foundation
+    pnpm add @boostdev/design-system-components @boostdev/design-system-foundation
     ```
     Import the CSS once at your app root:
     ```ts
     import '@boostdev/design-system-foundation/css';
-    import '@boostdev/components/css';
+    import '@boostdev/design-system-components/css';
     ```
     For **Next.js / RSC**, use the `/client` subpath:
     ```ts
-    import {Button, Card} from '@boostdev/components/client';
+    import {Button, Card} from '@boostdev/design-system-components/client';
     ```
     ---
@@ -92,7 +92,7 @@ import logo from '../static/logo.svg';
     everything at once:
     ```css
-    @layer tokens.override {
+    @layer boostdev.tokens.override {
         :root {
             --bds-cta:         var(--bds-BASE__color--orange);
             --bds-on-cta:      var(--bds-BASE__color--white);

package/src/stories/ReactNative.mdx CHANGED Viewed

@@ -6,21 +6,21 @@ import { Meta } from '@storybook/blocks';
 > **Status: alpha** — components and APIs may change before stable release.
-`@boostdev/components` ships native implementations for 47 components — near-complete parity with the React web library. These use React Native primitives (`View`, `Text`, `Pressable`, `StyleSheet`, `Modal`, `Animated`) rather than HTML elements, and consume a dedicated token layer instead of CSS custom properties.
+`@boostdev/design-system-components` ships native implementations for 47 components — near-complete parity with the React web library. These use React Native primitives (`View`, `Text`, `Pressable`, `StyleSheet`, `Modal`, `Animated`) rather than HTML elements, and consume a dedicated token layer instead of CSS custom properties.
 ## Installation
 ```bash
-npm install @boostdev/components
+npm install @boostdev/design-system-components
 # or
-pnpm add @boostdev/components
+pnpm add @boostdev/design-system-components
 ```
 Metro automatically resolves the native entry point via the `"react-native"` export condition in `package.json` — no extra configuration needed.
 ```ts
 // Import is identical to the web version:
-import { Button, Alert, Badge, Avatar, Typography } from '@boostdev/components';
+import { Button, Alert, Badge, Avatar, Typography } from '@boostdev/design-system-components';
 ```
 ## Setup — ThemeProvider
@@ -28,7 +28,7 @@ import { Button, Alert, Badge, Avatar, Typography } from '@boostdev/components';
 Wrap your app (or the relevant subtree) in `ThemeProvider` to give native components access to the design token context:
 ```tsx
-import { ThemeProvider } from '@boostdev/components/native/ThemeContext';
+import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
 export default function App() {
   return (
@@ -57,7 +57,7 @@ Native components consume tokens from `src/native/tokens.ts` — a JS object mir
 Tokens are accessed inside components via `useTheme()`:
 ```tsx
-import { useTheme } from '@boostdev/components/native/ThemeContext';
+import { useTheme } from '@boostdev/design-system-components/native/ThemeContext';
 function MyComponent() {
   const { tokens } = useTheme();

package/src/web-components/globals.ts CHANGED Viewed

@@ -36,7 +36,7 @@ const bdcCss = `
     initial-value: 0 0 0 0 transparent;
   }
-  @layer component {
+  @layer boostdev.component {
     :root {
       --bdc-outline_border: none;

package/src/web-components/interaction/BdsAccordion.mdx CHANGED Viewed

@@ -12,14 +12,14 @@ Framework-agnostic Accordion custom element. Coordinates open/closed state acros
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 Or in HTML without a bundler:
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
@@ -85,7 +85,7 @@ Or in HTML without a bundler:
   </bds-accordion-item>
   <bds-accordion-item>
     <span slot="header">How do I install it?</span>
-    <p>Run npm install @boostdev/components.</p>
+    <p>Run npm install @boostdev/design-system-components.</p>
   </bds-accordion-item>
 </bds-accordion>

package/src/web-components/interaction/BdsAccordion.stories.tsx CHANGED Viewed

@@ -49,7 +49,7 @@ function BdsAccordionStory({
         {React.createElement('p', { style: { margin: 0 } }, 'A framework-agnostic component library built on web standards.')}
       </BdsAccordionItem>
       <BdsAccordionItem header="How do I install it?">
-        {React.createElement('p', { style: { margin: 0 } }, 'Run npm install @boostdev/components and import the web components entry point.')}
+        {React.createElement('p', { style: { margin: 0 } }, 'Run npm install @boostdev/design-system-components and import the web components entry point.')}
       </BdsAccordionItem>
       <BdsAccordionItem header="Does it support dark mode?">
         {React.createElement('p', { style: { margin: 0 } }, 'Yes — all design tokens respond to [data-theme="dark"] and prefers-color-scheme: dark.')}

package/src/web-components/interaction/BdsButton.mdx CHANGED Viewed

@@ -13,14 +13,14 @@ Framework-agnostic button custom element. Renders as `<button>` or `<a>` dependi
 ```js
 // Register all web components at once
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 Or in HTML without a bundler:
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```

package/src/web-components/interaction/BdsCollapsible.mdx CHANGED Viewed

@@ -12,14 +12,14 @@ Framework-agnostic Collapsible custom element. Wraps a native `<details>`/`<summ
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 Or in HTML without a bundler:
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```

package/src/web-components/interaction/BdsDialog.mdx CHANGED Viewed

@@ -12,14 +12,14 @@ Framework-agnostic Dialog custom element. Wraps a native `<dialog>` element with
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 Or in HTML without a bundler:
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```

package/src/web-components/interaction/BdsDrawer.mdx CHANGED Viewed

@@ -12,14 +12,14 @@ Framework-agnostic Drawer (slide-in panel) custom element. Same modal infrastruc
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 Or in HTML without a bundler:
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```

package/src/web-components/interaction/BdsDropdownMenu.mdx CHANGED Viewed

@@ -12,14 +12,14 @@ Framework-agnostic Dropdown Menu custom element. A trigger-anchored menu panel w
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 Or in HTML without a bundler:
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```

package/src/web-components/interaction/BdsPopover.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic popover custom element. A non-modal floating panel anchored t
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## Examples

package/src/web-components/interaction/BdsSkipLink.mdx CHANGED Viewed

@@ -12,14 +12,14 @@ Framework-agnostic Skip Navigation Link custom element. Visually hidden until fo
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 Or in HTML without a bundler:
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```

package/src/web-components/interaction/BdsTabs.mdx CHANGED Viewed

@@ -12,14 +12,14 @@ Framework-agnostic Tabs custom element. Coordinates `<bds-tab>` and `<bds-tab-pa
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 Or in HTML without a bundler:
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```

package/src/web-components/interaction/BdsToastProvider.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic toast notification provider. Wrap your page content in `<bds-
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## Examples
@@ -34,7 +34,7 @@ import '@boostdev/components/web-components';
 ### 1. Static method (import required)
 ```js
-import { BdsToastProvider } from '@boostdev/components/web-components';
+import { BdsToastProvider } from '@boostdev/design-system-components/web-components';
 BdsToastProvider.show('File saved', 'success');
 BdsToastProvider.show('Something went wrong', 'error');
@@ -75,7 +75,7 @@ document.dispatchEvent(new CustomEvent('bds-show-toast', {
 </bds-toast-provider>
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
   // or use the document event API — no import needed
 </script>
 ```

package/src/web-components/interaction/BdsTooltip.mdx CHANGED Viewed

@@ -12,14 +12,14 @@ Framework-agnostic Tooltip custom element. Displays a small informational label
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 Or in HTML without a bundler:
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```

package/src/web-components/interaction/form/BdsCheckbox.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated checkbox custom element. Participates in HTML forms via the Form
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsCheckboxGroup.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Groups related checkboxes with a shared label, hint, and error message. Renders
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsCombobox.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated autocomplete combobox. Renders a text input with a filterable dr
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsFileInput.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated file upload zone with drag-and-drop support. Renders a styled dr
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsFormInput.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated text input with label, hint, error, and prefix/suffix slot suppo
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsNumberInput.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated number input with increment and decrement stepper buttons. Hides
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsRadio.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated radio button custom element. Use multiple `<bds-radio>` elements
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsRadioGroup.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Groups related radio buttons with a shared label and name. Renders a `<fieldset>
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsSegmentedControl.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated segmented control. Renders a group of radio buttons (or anchor l
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsSelect.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated select custom element. Wraps a native `<select>` with consistent
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsSlider.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated range slider. Wraps a native `<input type="range">` with a style
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsSwitch.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated toggle switch. Visually a sliding toggle but semantically equiva
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/interaction/form/BdsTextarea.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Form-associated multiline text input. Wraps a native `<textarea>` with consisten
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsAlert.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic alert custom element for inline status messages. Supports fou
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## Examples

package/src/web-components/ui/BdsAvatar.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Avatar custom element. Displays a user photo when `src` is pr
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsBadge.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic badge custom element for short status labels and counts. Five
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## Examples

package/src/web-components/ui/BdsBreadcrumb.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Breadcrumb custom element. Renders a horizontal navigation tr
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsButtonGroup.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Button Group custom element. Groups related `<bds-button>` el
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsCalendar.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Calendar date picker custom element. Renders a keyboard-navig
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsCard.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Card layout custom element. A versatile container with three
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsCarousel.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Carousel custom element. A scroll-snap based slider where eac
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsDescriptionList.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Description List custom element. Wraps slotted `<dt>`/`<dd>`
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsIconWrapper.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Icon Wrapper custom element. Displays a slotted icon inside a
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsLink.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Link custom element. Renders a styled `<a>` tag with three vi
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsLoading.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Loading spinner custom element. Displays an animated circular
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsNotificationBanner.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Notification Banner custom element. Renders a full-width stat
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsPagination.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Pagination navigation custom element. Renders previous/next b
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsProgress.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic horizontal Progress bar custom element. Tracks progress towar
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsProgressCircle.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic circular Progress custom element. Renders an SVG ring that fi
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsRating.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic read-only star Rating custom element. Renders a row of SVG st
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use

package/src/web-components/ui/BdsSectionHeader.mdx CHANGED Viewed

@@ -12,7 +12,7 @@ Framework-agnostic Section Header custom element. Combines a title and optional
 ## Installation
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 ## When to use