@cronocode/react-box 3.1.13 → 3.2.1
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.
- package/.claude/rules/react-box-rules.md +17 -0
- package/.claude/skills/react-box/SKILL.md +17 -0
- package/BOX_AI_CONTEXT.md +430 -812
- package/components/dropdown/dropdownContext.d.ts +17 -0
- package/components/dropdown/dropdownItemRenderer.d.ts +6 -0
- package/components/dropdown/dropdownItems.d.ts +15 -0
- package/components/dropdown/dropdownSearch.d.ts +8 -0
- package/components/dropdown/utils.d.ts +1 -0
- package/components/dropdown.cjs +1 -1
- package/components/dropdown.d.ts +6 -5
- package/components/dropdown.mjs +212 -160
- package/components/select.cjs +1 -0
- package/components/select.d.ts +39 -0
- package/components/select.mjs +29 -0
- package/core/theme/theme.d.ts +3 -1
- package/core/theme/themeContext.d.ts +1 -1
- package/core.cjs +3 -3
- package/core.mjs +497 -465
- package/package.json +2 -2
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Critical rules for @cronocode/react-box — prevents the most common AI mistakes
|
|
3
|
+
globs: "**/*.{ts,tsx,jsx}"
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# @cronocode/react-box Rules
|
|
7
|
+
|
|
8
|
+
1. **NEVER use `style={{ }}`** — always use Box props. Missing prop? Create with `Box.extend()`
|
|
9
|
+
2. **NEVER `<Box tag="...">`** for common elements — use `<Button>`, `<Link>`, `<H1>`, `<P>`, `<Nav>`, `<Flex>`, `<Grid>`, etc.
|
|
10
|
+
3. **NEVER `<Box display="flex/grid">`** — use `<Flex>` / `<Grid>` components
|
|
11
|
+
4. **fontSize divider is 16** (not 4): `fontSize={14}` → 14px
|
|
12
|
+
5. **Spacing divider is 4**: `p={4}` → 16px (1rem)
|
|
13
|
+
6. **Border/borderRadius/lineHeight are direct px**: `b={1}` → 1px
|
|
14
|
+
7. **HTML attributes go in `props` prop**: `<Link props={{ href: '/about' }}>` not `<Link href>`
|
|
15
|
+
8. **Size shortcuts**: `width="fit"` = 100%, `width="fit-screen"` = 100vw, `width="1/2"` = 50%
|
|
16
|
+
|
|
17
|
+
Full reference: `src/BOX_AI_CONTEXT.md` or invoke `/react-box` skill.
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: react-box
|
|
3
|
+
description: "@cronocode/react-box comprehensive reference — props, components, Dropdown, Select, DataGrid, themes, extensions. Use when working with react-box components, styling, or configuration."
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Read and apply the full react-box reference from `src/BOX_AI_CONTEXT.md`.
|
|
7
|
+
|
|
8
|
+
This skill provides comprehensive guidance on:
|
|
9
|
+
- All ~144 CSS props and their value formatters
|
|
10
|
+
- Component shortcuts (Flex, Grid, Button, Textbox, Dropdown, Select, DataGrid, semantics)
|
|
11
|
+
- Pseudo-classes, responsive breakpoints, theme system
|
|
12
|
+
- Box.components() for custom component styles with variants and children
|
|
13
|
+
- Box.extend() for new props, CSS variables, and type augmentation
|
|
14
|
+
- Dropdown component: compound pattern, sub-components, itemsProps/iconProps, variant propagation
|
|
15
|
+
- Select component: data-driven dropdown with data + def props, wraps Dropdown
|
|
16
|
+
- DataGrid component: columns, filtering, sorting, pagination, style customization
|
|
17
|
+
- Common patterns and debugging tips
|