@sarunyu/system-one 4.5.2 → 4.6.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.
- package/AGENTS.md +25 -4
- package/DESIGN.md +1 -0
- package/dist/index.cjs +146 -96
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +147 -97
- package/dist/index.js.map +1 -1
- package/dist/src/components/badge.d.ts.map +1 -1
- package/dist/src/components/checkbox.d.ts +4 -0
- package/dist/src/components/checkbox.d.ts.map +1 -1
- package/dist/src/components/notification.d.ts +6 -1
- package/dist/src/components/notification.d.ts.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/llms.txt +21 -5
- package/package.json +1 -1
package/llms.txt
CHANGED
|
@@ -8,7 +8,7 @@ that uses this library. The rules are non-negotiable.
|
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
## The
|
|
11
|
+
## The 4 rules
|
|
12
12
|
|
|
13
13
|
1. **Use library components for every element it provides.** Never recreate
|
|
14
14
|
Button, Input, Tag, Dropdown, Card, Tab, Checkbox, Toggle, Radio, DateInput, TimeInput,
|
|
@@ -16,10 +16,26 @@ that uses this library. The rules are non-negotiable.
|
|
|
16
16
|
2. **Use design-token classes for color and typography.** Never `text-blue-600`,
|
|
17
17
|
`bg-gray-100`, `text-[#3b82f6]`. The token table below is exhaustive — if a
|
|
18
18
|
color you need is not in it, use `text-foreground` / `bg-card`.
|
|
19
|
-
3. **
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
3. **No arbitrary bracket values for spacing / sizing / typography.**
|
|
20
|
+
Use scale utilities, not pixel overrides. The library's shipped stylesheet
|
|
21
|
+
only contains scale utilities + a fixed list of safelisted container widths,
|
|
22
|
+
so any other `[...]` value is a no-op in hosts without Tailwind installed.
|
|
23
|
+
- **Forbidden**: `max-w-[1100px]`, `h-[317px]`, `min-h-[calc(100vh-64px)]`,
|
|
24
|
+
`w-[272px]`, `gap-[14px]`, `p-[10px]`, `text-[13px]`, `leading-[22px]`,
|
|
25
|
+
`rounded-[10px]`, `top-[7px]`.
|
|
26
|
+
- **Allowed**: `max-w-5xl`, `max-w-2xl`, `h-80`, `w-64`, `gap-4`, `p-6`,
|
|
27
|
+
`text-sm`, `leading-6`, `rounded-lg`, `top-2`, and the 4px spacing scale
|
|
28
|
+
(`0.5` / `1` / `2` / `3` / `4` / `5` / `6` / `8` / `10` / `12` / `16` / `20` / `24`).
|
|
29
|
+
- **Container-width exception**: these `max-w-[*]` values are safelisted and
|
|
30
|
+
may be used — `max-w-[480px]`, `max-w-[640px]`, `max-w-[720px]`, `max-w-[800px]`,
|
|
31
|
+
`max-w-[960px]`, `max-w-[1024px]`, `max-w-[1200px]`, `max-w-[1280px]`,
|
|
32
|
+
`max-w-[1440px]`. For any other width, snap to `max-w-{xs…7xl}`.
|
|
33
|
+
- If a design calls for an odd value, snap to the nearest scale step — the
|
|
34
|
+
design system is calibrated for those steps on purpose.
|
|
35
|
+
4. **Layout is free (within the scale).** Build page structure with plain `<div>`
|
|
36
|
+
+ Tailwind utilities (flex, grid, container, max-w-*, gap-*, p-*, mx-auto).
|
|
37
|
+
The library does NOT ship layout primitives. Do not import `Page`, `Section`,
|
|
38
|
+
`Stack`, `CardGrid`, `Toolbar` — they don't exist.
|
|
23
39
|
|
|
24
40
|
---
|
|
25
41
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sarunyu/system-one",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.6.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A production-ready React design system built for AI-powered web generation tools (Figma Make, Lovable, V0). Tailwind CSS v4 + CSS custom properties for full theming support.",
|
|
6
6
|
"keywords": [
|