@boostdev/design-system-components 0.1.15 → 0.1.17

package/AGENTS.md

@@ -16,9 +16,9 @@ Or individual token layers. All component styles live inside `@layer component`.
 
 ## Component categories
 
-- **ui/**: Pure display — Badge, Typography, Loading, Skeleton
+- **ui/**: Pure display — Badge, Typography, Loading, Skeleton, Collapsible
 - **interaction/**: Interactive — Button, Dialog, Toast (with Provider + hook), Rating
-- **interaction/form/**: Form fields — FormInput, Checkbox, Radio (+ atom primitives Label, Message, InputContainer)
+- **interaction/form/**: Form fields — FormInput, Checkbox, Radio, Switch, SegmentedControl (+ atom primitives Label, Message, InputContainer)
 - **layout/**: Layout helpers — ButtonGroup, Card, SectionHeader, IconWrapper
 
 ## Styling conventions
@@ -79,8 +79,8 @@ Prefer semantic tokens over palette tokens. Key tokens for component states:
 |-------|---------|---------|
 | `--color_active` | Active / checked / filled state | Checkbox, Radio, Slider, Progress, ProgressCircle |
 | `--color_on-active` | Content on `--color_active` | Checkbox tick, Radio inner dot |
-| `--color_active--subtle` | Subtle background for active track | Switch track |
-| `--color_active--strong` | Strong foreground for active thumb | Switch thumb |
+| `--color_active--subtle` | Subtle background for active track | Switch (`--switch_track-bg--active`) |
+| `--color_active--strong` | Strong foreground for active thumb | Switch (`--switch_thumb-bg--active`) |
 | `--color_success--subtle` | Subtle background for success variant | Alert, NotificationBanner |
 | `--color_on-success--subtle` | Text on success subtle background | Alert, NotificationBanner |
 | `--color_interactive` | Focus ring colour | All focusable inputs |

package/README.md

@@ -76,6 +76,24 @@ Variants: `primary` (default) · `secondary` · `success` · `error` · `warning
 
 ---
 
+#### Collapsible
+
+```tsx
+import { Collapsible } from '@boostdev/components';
+
+<Collapsible summary="What is the return policy?" defaultOpen>
+  You can return any item within 30 days of purchase.
+</Collapsible>
+
+{/* Group: only one open at a time */}
+<Collapsible name="faq" summary="Question 1">Answer 1</Collapsible>
+<Collapsible name="faq" summary="Question 2">Answer 2</Collapsible>
+```
+
+Built on native `<details>`/`<summary>`. Use `name` to group multiple Collapsibles so only one stays open at a time.
+
+---
+
 #### Typography
 
 ```tsx
@@ -248,6 +266,37 @@ import { Radio } from '@boostdev/components';
 <Radio label="Option B" name="choice" value="b" />
 ```
 
+#### Switch
+
+```tsx
+import { Switch } from '@boostdev/components';
+
+<Switch label="Enable notifications" name="notifications" />
+<Switch label="Dark mode" name="dark-mode" defaultChecked />
+<Switch label="On" name="theme" prefix="Off" size="small" />
+```
+
+Sizes: `small` · `medium` (default) · `large`
+
+#### SegmentedControl
+
+```tsx
+import { SegmentedControl } from '@boostdev/components';
+
+<SegmentedControl
+  name="view"
+  defaultValue="week"
+  options={[
+    { value: 'day',   label: 'Day'   },
+    { value: 'week',  label: 'Week'  },
+    { value: 'month', label: 'Month' },
+  ]}
+  onChange={value => console.log(value)}
+/>
+```
+
+Single-select control with a sliding thumb. All options have equal width (sized to the widest). Sizes: `small` · `medium` (default) · `large`.
+
 ---
 
 ### Layout components
@@ -431,7 +480,7 @@ pnpm build        # compile to dist/
 pnpm typecheck    # TypeScript check (library code only)
 pnpm lint         # ESLint
 pnpm lint:css     # Stylelint
-pnpm test         # Vitest — 304 tests
+pnpm test         # Vitest — 329 tests
 pnpm mcp:start    # Start the MCP server locally (http://localhost:3001/api/mcp)
 pnpm storybook    # Storybook dev server on port 6006
 ```