@boostdev/design-system-components 2.4.2 → 2.5.0

package/AGENTS.md

@@ -2,10 +2,11 @@
 
 ## What this package provides
 
-A component library with three targets:
+A component library with two targets:
 - **React (web)** — CSS Modules, design tokens from `@boostdev/design-system-foundation`, full component suite
 - **Web Components** (experimental) — Lit-based custom elements, framework-agnostic, entry point `@boostdev/design-system-components/web-components`
-- **React Native** (alpha) — React Native primitives, JS token layer, Metro-resolved via `"react-native"` export condition
+
+React Native components live in a separate package: [`@boostdev/design-system-react-native`](https://gitlab.com/b00stdev/boostdev-design-system-react-native).
 
 ## Prerequisites
 
@@ -20,15 +21,13 @@ All component styles live inside `@layer boostdev.component`.
 import '@boostdev/design-system-components/web-components';
 ```
 
-**React Native:** wrap the app in `ThemeProvider` from `@boostdev/design-system-components/native/ThemeContext`. Metro resolves the native bundle automatically via the `"react-native"` export condition — no extra config needed.
-
 ## Component categories
 
 ### React (web)
 - **ui/**: Accordion, Alert, Avatar, Badge, Breadcrumb, Calendar, Carousel, Collapsible, DescriptionList, Link, Loading, NotificationBanner, Pagination, Progress, ProgressCircle, Separator, Skeleton, SkipLink, Table, Tabs, Tooltip, Typography
 - **interaction/**: Button, Command, Dialog, Drawer, DropdownMenu, Popover, Rating, Toast (ToastProvider + useToast hook)
 - **interaction/form/**: Checkbox, CheckboxGroup, Combobox, FileInput, FormInput, NumberInput, Radio, RadioGroup, SegmentedControl, Select, Slider, Switch, Textarea (+ atom primitives: Label, Message, InputContainer)
-- **layout/**: ButtonContainer (formerly ButtonGroup — deprecated alias still available), Card, Grid (supports `isMasonry` — CSS Grid Level 3 with row-span polyfill — and `autoSpanMedia` — per-item span derived from media aspect ratio), GridItem (supports `columnSpan="auto"`), IconWrapper, SectionHeader
+- **layout/**: ButtonContainer (formerly ButtonGroup — deprecated alias still available), Card, Grid (supports `isMasonry` — CSS Grid Level 3 with row-span polyfill (auto-tunes the row-track unit to stay under browser implicit-grid caps; `masonryRowUnitPx` overrides) — and `autoSpanMedia` — per-item span derived from media aspect ratio), GridItem (supports `columnSpan="auto"`), IconWrapper, SectionHeader
 
 ### Web Components (experimental) — `src/web-components/`
 Custom elements built with Lit. Entry: `src/web-components/index.ts`. Bundled with Lit (no peer dep required).
@@ -60,21 +59,6 @@ React.useEffect(() => {
 
 Also: never define story component functions inside a `render: () => { function Foo() {...} }` arrow — React treats each render as a new component type and unmounts/remounts it. Define them at module scope instead.
 
-### React Native (alpha) — `src/components/**/*.native.tsx`
-Native implementations co-located with their web counterparts. Metro resolves them automatically.
-- **ui/** (22): Accordion, Alert, Avatar, Badge, Breadcrumb, Calendar, Carousel, Collapsible, DescriptionList, Link, Loading, NotificationBanner, Pagination, Progress, ProgressCircle, Separator, Skeleton, Table, Tabs, Tooltip, Typography
-- **layout/** (4): ButtonGroup, Card, IconWrapper, SectionHeader
-- **interaction/** (7): Button, Dialog, Drawer, DropdownMenu, Popover, Rating, Toast (ToastProvider + useToast)
-- **interaction/form/** (13): Checkbox, CheckboxGroup, Combobox, FileInput, FormInput, NumberInput, Radio, RadioGroup, SegmentedControl, Select, Slider, Switch, Textarea + atoms (Label, Message)
-
-**Not ported** (deferred): Command (cmdk dependency), SkipLink (browser-only pattern)
-
-Storybook stories: `src/components/**/*.native.stories.tsx` (title `'React Native/{UI|Interaction|Form|Layout}/{Name}'`, tags `['!stable', 'alpha']`). All stories wrap in `<ThemeProvider>` decorator.
-
-MDX docs: `src/components/**/*.native.mdx` — one per component.
-
-React Native overview: `src/stories/ReactNative.mdx`.
-
 ## Styling conventions
 
 - CSS Modules (`.module.css`) for all components — styles are scoped, no global leakage

package/README.md

@@ -414,6 +414,8 @@ Named `columnSpan` values are responsive via the foundation breakpoint ladder (4
 | `isCentered` | `boolean`                                        | `false`  |
 | `isMasonry`  | `boolean` — CSS Grid Level 3 masonry layout (native + JS polyfill) | `false` |
 | `autoSpanMedia` | `boolean` — children without `columnSpan` auto-span by media aspect ratio | `false` |
+| `masonryPreferredColumnSpan` | `'full' \| 'three-quarters' \| 'two-thirds' \| 'half' \| 'one-third' \| 'one-quarter' \| number` — auto items default to this span; demoted to fill the trailing row (masonry only) | — |
+| `masonryRowUnitPx` | `number` — manual override for the polyfill's row-track unit (px). Auto-tuned by default to keep projected implicit-grid rows under the browser cap (masonry only) | — |
 | `as`         | `ElementType`                                    | `'div'`  |
 
 **GridItem props**
@@ -643,29 +645,7 @@ pnpm mcp:start   # listens on http://localhost:3001/api/mcp
 
 ## React Native
 
-47 components are available for React Native — near-complete parity with the web library. Metro auto-resolves the native entry via the `"react-native"` export condition.
-
-```tsx
-import { Button, FormInput, Dialog, Tabs } from '@boostdev/design-system-components';
-```
-
-Wrap your app in `ThemeProvider`:
-
-```tsx
-import { ThemeProvider } from '@boostdev/design-system-components/native/ThemeContext';
-
-export default function App() {
-  return (
-    <ThemeProvider>
-      <YourApp />
-    </ThemeProvider>
-  );
-}
-```
-
-Components use `onPress` instead of `onClick`, `accessibilityLabel` instead of `aria-label`, and `StyleProp<ViewStyle>` instead of `className`. See the Storybook "React Native" section for full documentation.
-
-**Deferred**: `Command` (cmdk dependency) and `SkipLink` (browser-only pattern).
+React Native components have moved to [`@boostdev/design-system-react-native`](https://gitlab.com/b00stdev/boostdev-design-system-react-native).
 
 ---