@sarunyu/system-one 1.0.5 → 1.1.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.
Files changed (28) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +95 -6
  3. package/dist/index.cjs +102 -0
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.js +103 -1
  6. package/dist/index.js.map +1 -1
  7. package/dist/src/components/button.d.ts +4 -2
  8. package/dist/src/components/button.d.ts.map +1 -1
  9. package/dist/src/components/card.d.ts +11 -0
  10. package/dist/src/components/card.d.ts.map +1 -1
  11. package/dist/src/components/chip.d.ts +5 -0
  12. package/dist/src/components/chip.d.ts.map +1 -1
  13. package/dist/src/components/input.d.ts +8 -0
  14. package/dist/src/components/input.d.ts.map +1 -1
  15. package/dist/src/components/option-list.d.ts +10 -0
  16. package/dist/src/components/option-list.d.ts.map +1 -1
  17. package/dist/src/components/search-input.d.ts +4 -0
  18. package/dist/src/components/search-input.d.ts.map +1 -1
  19. package/dist/src/components/tab.d.ts +10 -1
  20. package/dist/src/components/tab.d.ts.map +1 -1
  21. package/dist/src/components/tag.d.ts +8 -0
  22. package/dist/src/components/tag.d.ts.map +1 -1
  23. package/dist/src/components/textarea.d.ts +7 -0
  24. package/dist/src/components/textarea.d.ts.map +1 -1
  25. package/dist/src/index.d.ts +4 -2
  26. package/dist/src/index.d.ts.map +1 -1
  27. package/llms.txt +471 -0
  28. package/package.json +15 -6
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Saranyu
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,11 +1,100 @@
1
+ # @sarunyu/system-one
1
2
 
2
- # Design System
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
- This is a code bundle for Design System. The original project is available at https://www.figma.com/design/nUKwypNXabHg9OzzUVd5uZ/Design-System.
6
+ ## Install
5
7
 
6
- ## Running the code
8
+ ```bash
9
+ npm install @sarunyu/system-one
10
+ ```
7
11
 
8
- Run `npm i` to install the dependencies.
12
+ **Peer dependencies:** React ≥ 18
9
13
 
10
- Run `npm run dev` to start the development server.
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(
@@ -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;