@sarunyu/system-one 1.3.1 → 1.3.2

package/llms.txt

@@ -374,6 +374,47 @@ import type { ButtonVariant, ButtonSize, TagVariant, ChipSize } from "@sarunyu/s
 
 **You own the layout. The library only provides UI components.** Design page structure, layout, and composition entirely on your own — use your best aesthetic judgment to create beautiful, polished pages. The library has no opinions about layout. It only asks that you use its components (listed below) when the UI element matches one the library provides.
 
+### CRITICAL — do NOT recreate library components
+
+The library's components have their own built-in styles (colors, borders, backgrounds, padding, radius, focus states, hover states). You MUST import and use them as-is. **Never** build your own version of a component that exists in the library. Never add Tailwind classes to override their internal appearance.
+
+Common mistakes to avoid:
+
+```tsx
+// ✅ CORRECT — use the library's <Input> component (has floating label, built-in border, focus ring, error state)
+import { Input } from "@sarunyu/system-one"
+<Input placeholder="Email" value={email} onChange={setEmail} />
+<Input placeholder="Password" type="password" value={pw} onChange={setPw} />
+
+// ❌ WRONG — never build your own input with raw HTML + Tailwind
+<input className="border rounded-xl px-4 py-3 w-full" placeholder="Email" />
+<input className="border rounded-xl px-4 py-3 w-full" type="password" placeholder="Password" />
+```
+
+```tsx
+// ✅ CORRECT — use the library's <Tag> component (has built-in colors, padding, border-radius)
+import { Tag } from "@sarunyu/system-one"
+<Tag text="Popular" variant="green" />
+<Tag text="Best Value" variant="blue" />
+<Tag text="Error" variant="red" size="small" />
+
+// ❌ WRONG — never style your own span/div to look like a tag
+<span className="text-green-500 bg-green-500/10 px-2 py-1 rounded">Popular</span>
+<span className="text-blue-500 border border-blue-500 px-2 py-1 rounded">Best Value</span>
+```
+
+```tsx
+// ✅ CORRECT — use the library's <Button> component
+import { Button } from "@sarunyu/system-one"
+<Button variant="primary" size="md">Sign In</Button>
+<Button variant="outline" size="md">Cancel</Button>
+
+// ❌ WRONG — never create buttons with raw HTML + Tailwind
+<button className="bg-blue-600 text-white px-6 py-2 rounded-lg">Sign In</button>
+```
+
+This rule applies to ALL components listed in this document. The components handle their own styling — you only pass props.
+
 ### Layout — full creative freedom
 
 Design the layout yourself. Use any technique that produces the best result:
@@ -387,23 +428,30 @@ Design the layout yourself. Use any technique that produces the best result:
 
 The library provides a specific set of UI components. The rule is simple:
 
-**If the UI element matches a component below → use the library's component.** Do not recreate it with raw HTML or Tailwind.
-
-- Buttons → `<Button>`
-- Text inputs / textareas / search → `<Input>`, `<TextArea>`, `<SearchInput>`
-- Single / multi select → `<Dropdown>`, `<DropdownMultiple>`, `<OptionList>`
-- Date / time pickers → `<DateInput>`, `<TimeInput>`
-- Labels / statuses / filters → `<Tag>`, `<StatusTag>`, `<Chip>`
-- Tabs → `<TabGroup>`
-- Event/content cards → `<Card>`
-
-**If the UI element does NOT match any component above → build it yourself.** Use Tailwind, custom components, or any other approach. Examples of things the library does NOT provide (build these yourself): modals/dialogs, sidebars/navigation, tables, accordions, tooltips, progress bars, avatars, breadcrumbs, sliders, toggles/switches, file uploads, charts, carousels, skeletons/loaders, pagination, badges (use `<Tag>` only if it semantically fits), alert/notification banners, steppers, menus, etc.
+**If the UI element matches a component below → import it from `@sarunyu/system-one` and use it.** Do not recreate it with raw HTML or Tailwind. Do not add Tailwind classes to restyle it. The component already has all the styling it needs.
+
+- Buttons → `<Button>` — has built-in variant colors, hover/press states, sizes, icon slots
+- Text inputs → `<Input>` — has built-in floating label, border, focus ring, error state
+- Textareas → `<TextArea>` — has built-in floating label, border, focus ring, error state
+- Search fields → `<SearchInput>` — has built-in search icon, clear button
+- Single select → `<Dropdown>` — has built-in dropdown panel, selection state
+- Multi select → `<DropdownMultiple>` — has built-in checkboxes, multi-selection
+- Option list → `<OptionList>` — has built-in selection highlighting
+- Date picker → `<DateInput>` — has built-in calendar popup
+- Time picker → `<TimeInput>` — has built-in time selection
+- Labels / badges → `<Tag>` — has built-in color variants (blue, green, yellow, red, gray, lime)
+- Status indicators → `<StatusTag>` — has built-in colored dot and status colors
+- Filter chips → `<Chip>` — has built-in toggle state, active styling
+- Tab navigation → `<TabGroup>` — has built-in active tab indicator, sizing
+- Event/content cards → `<Card>` — has built-in image, metadata layout
+
+**If the UI element does NOT match any component above → build it yourself.** Use Tailwind, custom components, or any other approach. Examples of things the library does NOT provide (build these yourself): modals/dialogs, sidebars/navigation, tables, accordions, tooltips, progress bars, avatars, breadcrumbs, sliders, toggles/switches, file uploads, charts, carousels, skeletons/loaders, pagination, alert/notification banners, steppers, menus, etc.
 
 Pick the correct variant / prop for the semantic role (e.g. `StatusTag type="success"` for success, `Button variant="primary"` once per context). See "Design Rules" below for per-component constraints.
 
 ### Visual anchors from the library
 
-Use these tokens to keep custom elements visually coherent with the design system:
+Use these tokens so custom-built elements stay visually coherent with the design system:
 
 - **Typography** — `<h1>`–`<h4>` are pre-styled. Use them as-is.
 - **Text color** — body text: `--foreground`. Secondary: `text-muted-foreground`. Don't hard-code hex colors.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarunyu/system-one",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "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.",
   "keywords": [