@sarunyu/system-one 4.5.0 → 4.5.2
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 +5 -4
- package/DESIGN.md +262 -0
- package/dist/index.cjs +20 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +20 -18
- package/dist/index.js.map +1 -1
- package/dist/src/components/card.d.ts +1 -1
- package/dist/src/components/card.d.ts.map +1 -1
- package/llms.txt +8 -3
- package/package.json +5 -1
|
@@ -15,7 +15,7 @@ export interface CardProps {
|
|
|
15
15
|
variant?: CardVariant;
|
|
16
16
|
/** Custom body content (`variant="default"`). */
|
|
17
17
|
children?: ReactNode;
|
|
18
|
-
/** Size preset. desktop=308px, tablet=224px, mobile=163px.
|
|
18
|
+
/** Size preset. desktop=308px, tablet=224px, mobile=163px. Auto-detects mobile (<768px) when omitted. */
|
|
19
19
|
size?: CardSize;
|
|
20
20
|
/** Card title (clamped to 2 lines). */
|
|
21
21
|
title?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC3E,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACvD,MAAM,MAAM,aAAa,GAAG,gBAAgB,GAAG,YAAY,GAAG,MAAM,CAAC;AAErE,kDAAkD;AAClD,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,wLAAwL;IACxL,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yGAAyG;IACzG,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,SAAS,CAAC,EAAE,aAAa,CAAC;IAG1B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAG9B,gEAAgE;IAChE,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAwJD,eAAO,MAAM,IAAI,sGA0Yf,CAAC"}
|
package/llms.txt
CHANGED
|
@@ -690,7 +690,9 @@ Props (ToastStack): `items: (ToastProps & { id: string })[]`, `className`, `rend
|
|
|
690
690
|
Button with a count indicator. Two variants:
|
|
691
691
|
|
|
692
692
|
- `"button"` (default) — filter/action button (funnel icon) that shows a count badge when active. Use in toolbars and filter bars.
|
|
693
|
-
- `"notification"` — bell icon button
|
|
693
|
+
- `"notification"` — bell icon button used **internally** by `<Notification>`. Do not use standalone.
|
|
694
|
+
|
|
695
|
+
**Critical rule:** `<Badge variant="notification">` is an internal building block of `<Notification>`. Never wire it to your own `onClick` (a toast, a custom popover, etc.). If you need a notification bell that opens a list, use `<Notification>` — it renders the bell and the panel together.
|
|
694
696
|
|
|
695
697
|
```tsx
|
|
696
698
|
// Filter button — inactive and active states
|
|
@@ -698,8 +700,11 @@ Button with a count indicator. Two variants:
|
|
|
698
700
|
<Badge label="Filter" count={3} onClick={openFilter} />
|
|
699
701
|
<Badge iconOnly count={2} onClick={openFilter} />
|
|
700
702
|
|
|
701
|
-
//
|
|
702
|
-
<Badge variant="notification" count={5} />
|
|
703
|
+
// WRONG — do not do this:
|
|
704
|
+
// <Badge variant="notification" count={5} onClick={showToast} />
|
|
705
|
+
|
|
706
|
+
// CORRECT — for a notification bell + list, always use <Notification>:
|
|
707
|
+
<Notification groups={groups} onItemClick={handleClick} />
|
|
703
708
|
```
|
|
704
709
|
|
|
705
710
|
Props: `variant?` (`"button"` | `"notification"`, default `"button"`), `count?`, `maxCount?` (default 99), `label?` (button variant, default `"Filter"`), `iconOnly?`, `icon?` (custom icon), `notificationState?` (`"default"` | `"active"` | `"noti"`), plus native `<button>` props.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sarunyu/system-one",
|
|
3
|
-
"version": "4.5.
|
|
3
|
+
"version": "4.5.2",
|
|
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": [
|
|
@@ -22,6 +22,9 @@
|
|
|
22
22
|
],
|
|
23
23
|
"author": "saranyu",
|
|
24
24
|
"license": "MIT",
|
|
25
|
+
"engines": {
|
|
26
|
+
"node": ">=18"
|
|
27
|
+
},
|
|
25
28
|
"main": "./dist/index.cjs",
|
|
26
29
|
"module": "./dist/index.js",
|
|
27
30
|
"types": "./dist/src/index.d.ts",
|
|
@@ -41,6 +44,7 @@
|
|
|
41
44
|
"dist",
|
|
42
45
|
"llms.txt",
|
|
43
46
|
"AGENTS.md",
|
|
47
|
+
"DESIGN.md",
|
|
44
48
|
"README.md"
|
|
45
49
|
],
|
|
46
50
|
"scripts": {
|