@sarunyu/system-one 1.0.4 → 1.1.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/README.md +95 -6
- package/dist/index.cjs +104 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +105 -3
- package/dist/index.js.map +1 -1
- package/dist/src/components/button.d.ts +4 -2
- package/dist/src/components/button.d.ts.map +1 -1
- package/dist/src/components/card.d.ts +11 -0
- package/dist/src/components/card.d.ts.map +1 -1
- package/dist/src/components/chip.d.ts +5 -0
- package/dist/src/components/chip.d.ts.map +1 -1
- package/dist/src/components/input.d.ts +8 -0
- package/dist/src/components/input.d.ts.map +1 -1
- package/dist/src/components/option-list.d.ts +10 -0
- package/dist/src/components/option-list.d.ts.map +1 -1
- package/dist/src/components/search-input.d.ts +4 -0
- package/dist/src/components/search-input.d.ts.map +1 -1
- package/dist/src/components/tab.d.ts +11 -1
- package/dist/src/components/tab.d.ts.map +1 -1
- package/dist/src/components/tag.d.ts +8 -0
- package/dist/src/components/tag.d.ts.map +1 -1
- package/dist/src/components/textarea.d.ts +7 -0
- package/dist/src/components/textarea.d.ts.map +1 -1
- package/dist/src/index.d.ts +4 -2
- package/dist/src/index.d.ts.map +1 -1
- package/package.json +13 -5
package/README.md
CHANGED
|
@@ -1,11 +1,100 @@
|
|
|
1
|
+
# @sarunyu/system-one
|
|
1
2
|
|
|
2
|
-
|
|
3
|
+
A production-ready React design system built with **Tailwind CSS v4** and CSS custom properties.
|
|
4
|
+
Designed for AI-powered web generation tools — **Figma Make**, **Lovable**, and **V0**.
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
## Install
|
|
5
7
|
|
|
6
|
-
|
|
8
|
+
```bash
|
|
9
|
+
npm install @sarunyu/system-one
|
|
10
|
+
```
|
|
7
11
|
|
|
8
|
-
|
|
12
|
+
**Peer dependencies:** React ≥ 18
|
|
9
13
|
|
|
10
|
-
|
|
11
|
-
|
|
14
|
+
## Setup
|
|
15
|
+
|
|
16
|
+
Import the stylesheet once in your app root:
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
// Next.js: app/layout.tsx or pages/_app.tsx
|
|
20
|
+
// Vite: src/main.tsx
|
|
21
|
+
import "@sarunyu/system-one/styles.css";
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Then use components anywhere — no provider or wrapper needed:
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { Button, Input, Tag, TabGroup, Chip } from "@sarunyu/system-one";
|
|
28
|
+
|
|
29
|
+
export default function Example() {
|
|
30
|
+
return (
|
|
31
|
+
<div>
|
|
32
|
+
<Button variant="primary" size="md">Get started</Button>
|
|
33
|
+
<Button variant="outline" size="md">Learn more</Button>
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Components
|
|
40
|
+
|
|
41
|
+
| Component | Description |
|
|
42
|
+
|---|---|
|
|
43
|
+
| `Button` | Action button — 6 variants, 10 sizes (label + icon-only) |
|
|
44
|
+
| `Input` | Floating-label text input with validation states |
|
|
45
|
+
| `TextArea` | Multi-line text input with character counter |
|
|
46
|
+
| `SearchInput` | Search field with clear button |
|
|
47
|
+
| `Dropdown` | Single-select dropdown |
|
|
48
|
+
| `DropdownMultiple` | Multi-select dropdown with checkboxes |
|
|
49
|
+
| `Tag` | Compact colored label for status and categories |
|
|
50
|
+
| `StatusTag` | Process-state indicator with colored dot |
|
|
51
|
+
| `Chip` | Toggleable filter/selection chip |
|
|
52
|
+
| `Tab` / `TabGroup` | Tabbed navigation with notification badges |
|
|
53
|
+
| `Card` | Responsive event/content card |
|
|
54
|
+
| `DateInput` | Calendar date picker (single, range, multiple modes) |
|
|
55
|
+
| `TimeInput` | 24-hour time picker |
|
|
56
|
+
| `OptionList` | Scrollable option list for custom dropdowns |
|
|
57
|
+
|
|
58
|
+
## Dark Mode
|
|
59
|
+
|
|
60
|
+
Add `.dark` class to any ancestor element to activate dark theme:
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
<html className="dark">
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
All components adapt automatically.
|
|
67
|
+
|
|
68
|
+
## Theming
|
|
69
|
+
|
|
70
|
+
All design tokens are CSS custom properties. Override them after the stylesheet import:
|
|
71
|
+
|
|
72
|
+
```css
|
|
73
|
+
:root {
|
|
74
|
+
--primary-action: #7c3aed; /* brand color */
|
|
75
|
+
--primary-action-hover: #6d28d9;
|
|
76
|
+
--font-sans: "Inter", sans-serif;
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Key tokens: `--primary-action`, `--background`, `--foreground`, `--border`, `--muted-foreground`, `--destructive`, `--success`.
|
|
81
|
+
|
|
82
|
+
## TypeScript
|
|
83
|
+
|
|
84
|
+
Full type definitions included:
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
import type { ButtonVariant, ButtonSize, TagVariant, ChipSize } from "@sarunyu/system-one";
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Development
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
npm install
|
|
94
|
+
npm run dev # start demo server
|
|
95
|
+
npm run build:lib # build the library
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## License
|
|
99
|
+
|
|
100
|
+
MIT
|
package/dist/index.cjs
CHANGED
|
@@ -396,6 +396,68 @@ const Card = React.forwardRef(function Card2({
|
|
|
396
396
|
);
|
|
397
397
|
});
|
|
398
398
|
Card.displayName = "Card";
|
|
399
|
+
const sizeStyles$1 = {
|
|
400
|
+
large: {
|
|
401
|
+
container: "h-9 px-3 gap-1",
|
|
402
|
+
text: "text-sm leading-5",
|
|
403
|
+
icon: "icon-lg"
|
|
404
|
+
},
|
|
405
|
+
medium: {
|
|
406
|
+
container: "h-8 px-3 gap-1",
|
|
407
|
+
text: "text-sm leading-5",
|
|
408
|
+
icon: "icon-lg"
|
|
409
|
+
},
|
|
410
|
+
small: {
|
|
411
|
+
container: "h-7 px-2.5 gap-0.5",
|
|
412
|
+
text: "text-xs leading-4",
|
|
413
|
+
icon: "icon-md"
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
const multiplePaddingBySize = {
|
|
417
|
+
large: "pl-[8px] pr-[12px]",
|
|
418
|
+
medium: "pl-[8px] pr-[12px]",
|
|
419
|
+
small: "pl-[6px] pr-[10px]"
|
|
420
|
+
};
|
|
421
|
+
const Chip = React.forwardRef(function Chip2({
|
|
422
|
+
label = "Chips Text",
|
|
423
|
+
type = "single",
|
|
424
|
+
size = "large",
|
|
425
|
+
selected = false,
|
|
426
|
+
disabled = false,
|
|
427
|
+
onClick,
|
|
428
|
+
className
|
|
429
|
+
}, ref) {
|
|
430
|
+
const s = sizeStyles$1[size];
|
|
431
|
+
const isMultiple = type === "multiple";
|
|
432
|
+
const state = disabled ? selected ? "selected-disabled" : "disabled" : selected ? "selected" : "default";
|
|
433
|
+
const containerClass = state === "selected" ? "bg-primary-action border border-primary-action" : state === "selected-disabled" ? "bg-selected-light-bg border border-transparent" : state === "disabled" ? "bg-disabled-bg border border-transparent" : "bg-background border border-border";
|
|
434
|
+
const textClass = state === "selected" ? "text-on-primary-action" : state === "selected-disabled" ? "text-primary-action/40" : state === "disabled" ? "text-disabled" : "text-subtle-text";
|
|
435
|
+
const iconClass = state === "selected" ? "text-on-primary-action" : state === "selected-disabled" ? "text-primary-action/40" : state === "disabled" ? "text-disabled" : "text-subtle-text";
|
|
436
|
+
const icon = isMultiple && selected ? /* @__PURE__ */ jsxRuntime.jsx(react.Check, { "aria-hidden": "true", weight: "regular", className: cn("shrink-0", s.icon, iconClass) }) : isMultiple ? /* @__PURE__ */ jsxRuntime.jsx(react.Plus, { "aria-hidden": "true", weight: "regular", className: cn("shrink-0", s.icon, iconClass) }) : null;
|
|
437
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
438
|
+
"button",
|
|
439
|
+
{
|
|
440
|
+
ref,
|
|
441
|
+
type: "button",
|
|
442
|
+
onClick: !disabled ? onClick : void 0,
|
|
443
|
+
disabled,
|
|
444
|
+
"aria-pressed": selected,
|
|
445
|
+
className: cn(
|
|
446
|
+
"inline-flex items-center justify-center rounded-full whitespace-nowrap border transition-colors",
|
|
447
|
+
s.container,
|
|
448
|
+
isMultiple && multiplePaddingBySize[size],
|
|
449
|
+
containerClass,
|
|
450
|
+
disabled ? "cursor-not-allowed" : "cursor-pointer",
|
|
451
|
+
className
|
|
452
|
+
),
|
|
453
|
+
children: [
|
|
454
|
+
icon,
|
|
455
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-normal", s.text, textClass), children: label })
|
|
456
|
+
]
|
|
457
|
+
}
|
|
458
|
+
);
|
|
459
|
+
});
|
|
460
|
+
Chip.displayName = "Chip";
|
|
399
461
|
const MOBILE_BREAKPOINT = 768;
|
|
400
462
|
function useIsMobile() {
|
|
401
463
|
const [isMobile, setIsMobile] = React__namespace.useState(
|
|
@@ -2776,7 +2838,7 @@ const Tab = React.forwardRef(function Tab2({
|
|
|
2776
2838
|
icon,
|
|
2777
2839
|
notification
|
|
2778
2840
|
}, ref) {
|
|
2779
|
-
const s = sizeClasses[size];
|
|
2841
|
+
const s = sizeClasses[size] ?? sizeClasses.md;
|
|
2780
2842
|
const hasIcon = Boolean(icon);
|
|
2781
2843
|
const hasNotification = notification !== void 0 && notification !== null;
|
|
2782
2844
|
const renderedIcon = icon === true ? /* @__PURE__ */ jsxRuntime.jsx(DefaultTabIcon, { className: s.iconSize }) : icon;
|
|
@@ -2853,7 +2915,7 @@ const Tab = React.forwardRef(function Tab2({
|
|
|
2853
2915
|
});
|
|
2854
2916
|
Tab.displayName = "Tab";
|
|
2855
2917
|
const TabGroup = React.forwardRef(
|
|
2856
|
-
function TabGroup2({ items, activeId, size = "md", onChange, className }, ref) {
|
|
2918
|
+
function TabGroup2({ items = [], activeId, size = "md", onChange, className }, ref) {
|
|
2857
2919
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "tablist", className: cn("flex", className), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2858
2920
|
Tab,
|
|
2859
2921
|
{
|
|
@@ -2976,6 +3038,44 @@ const Tag = React.forwardRef(function Tag2({
|
|
|
2976
3038
|
);
|
|
2977
3039
|
});
|
|
2978
3040
|
Tag.displayName = "Tag";
|
|
3041
|
+
const statusTagStyles = {
|
|
3042
|
+
stop: {
|
|
3043
|
+
label: "Stop",
|
|
3044
|
+
dot: "var(--fill-gray-500)"
|
|
3045
|
+
},
|
|
3046
|
+
success: {
|
|
3047
|
+
label: "Success",
|
|
3048
|
+
dot: "var(--fill-emerald-500)"
|
|
3049
|
+
},
|
|
3050
|
+
hold: {
|
|
3051
|
+
label: "Hold",
|
|
3052
|
+
dot: "var(--fill-yellow-500)"
|
|
3053
|
+
},
|
|
3054
|
+
processing: {
|
|
3055
|
+
label: "Processing",
|
|
3056
|
+
dot: "var(--fill-blue-500)"
|
|
3057
|
+
},
|
|
3058
|
+
error: {
|
|
3059
|
+
label: "Error",
|
|
3060
|
+
dot: "var(--fill-rose-500)"
|
|
3061
|
+
}
|
|
3062
|
+
};
|
|
3063
|
+
function StatusTag({ type = "stop", text, className }) {
|
|
3064
|
+
const style = statusTagStyles[type] ?? statusTagStyles.stop;
|
|
3065
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3066
|
+
"div",
|
|
3067
|
+
{
|
|
3068
|
+
className: cn(
|
|
3069
|
+
"inline-flex items-center justify-center gap-1 rounded-[8px] px-2 py-1",
|
|
3070
|
+
className
|
|
3071
|
+
),
|
|
3072
|
+
children: [
|
|
3073
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.Circle, { "aria-hidden": "true", weight: "fill", className: "size-[8px] shrink-0", color: style.dot }),
|
|
3074
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-[14px] leading-[20px] font-normal text-disabled", children: text ?? style.label })
|
|
3075
|
+
]
|
|
3076
|
+
}
|
|
3077
|
+
);
|
|
3078
|
+
}
|
|
2979
3079
|
const TextArea = React.forwardRef(
|
|
2980
3080
|
function TextArea2({
|
|
2981
3081
|
placeholder = "Text label",
|
|
@@ -3794,12 +3894,14 @@ const TimeInput = React.forwardRef(
|
|
|
3794
3894
|
TimeInput.displayName = "TimeInput";
|
|
3795
3895
|
exports.Button = Button;
|
|
3796
3896
|
exports.Card = Card;
|
|
3897
|
+
exports.Chip = Chip;
|
|
3797
3898
|
exports.DateInput = DateInput;
|
|
3798
3899
|
exports.Dropdown = Dropdown;
|
|
3799
3900
|
exports.DropdownMultiple = DropdownMultiple;
|
|
3800
3901
|
exports.Input = Input;
|
|
3801
3902
|
exports.OptionList = OptionList;
|
|
3802
3903
|
exports.SearchInput = SearchInput;
|
|
3904
|
+
exports.StatusTag = StatusTag;
|
|
3803
3905
|
exports.Tab = Tab;
|
|
3804
3906
|
exports.TabGroup = TabGroup;
|
|
3805
3907
|
exports.Tag = Tag;
|