@sarunyu/system-one 1.3.0 → 1.3.1

package/llms.txt

@@ -1,6 +1,6 @@
 # @sarunyu/system-one
 
-React component library. Tailwind CSS v4 + CSS custom properties. 13 production-ready components. Built for AI-powered generation tools (v0, Lovable, Figma Make).
+React UI component library for AI-powered generation tools (v0, Lovable, Figma Make). Provides production-ready interactive components — you design the layouts freely, the library handles the UI primitives. Tailwind CSS v4 + CSS custom properties.
 
 ## Install
 
@@ -372,40 +372,45 @@ import type { ButtonVariant, ButtonSize, TagVariant, ChipSize } from "@sarunyu/s
 
 ## Design Guidance
 
-**You design the layout. The library provides the components.** Compose, arrange, and style page structure freely using Tailwind — the library does not dictate layout. Focus instead on using the components below correctly (right variants, right semantics, right props) so the visual language stays consistent with the design system.
+**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.
 
-### Anchors the library provides
+### Layout — full creative freedom
 
-These are all you need to keep a page visually coherent with the system:
+Design the layout yourself. Use any technique that produces the best result:
 
-- **Typography** — `<h1>`–`<h4>` are pre-styled (size, weight, line-height). Use them as-is; do not add `text-*` or `font-*` classes to override.
-- **Text color** — body text inherits from `--foreground`. Secondary text: `text-muted-foreground`. Don't hard-code hex colors.
-- **Surfaces** — use `bg-background` / `bg-card` / `bg-muted` so dark mode works automatically.
-- **Brand color** — reference via `--primary-action`, or Tailwind `text-primary-action` / `bg-primary-action`.
-- **Spacing** — Tailwind spacing scale (4px units). Pick whatever gaps/paddings look right; the design system has no prescribed rhythm.
-- **Radius** — `rounded-md` (6px), `rounded-lg` (8px), `rounded-xl` (12px), `rounded-full`.
+- Flex, grid, CSS columns, absolute positioning, sticky headers, split panes, sidebars, hero sections, masonry grids, full-bleed backgrounds, overlapping elements — anything goes.
+- Choose spacing, padding, max-widths, breakpoints, and visual hierarchy based on what looks best for the specific page. There is no prescribed spacing rhythm or container width.
+- Prioritize aesthetics: generous whitespace, clear visual hierarchy, balanced proportions, elegant transitions and micro-interactions.
+- Do **not** use the library's layout helper components (`Page`, `PageHeader`, `Section`, `Toolbar`, `CardGrid`, `Stack`). They exist for internal use only. Build your own layouts — they will look better.
+
+### Component usage — use ours when we have it, build your own when we don't
 
-### Component usage — the only hard rules
+The library provides a specific set of UI components. The rule is simple:
 
-Use the library's components for these elements. Do **not** recreate them with raw HTML or Tailwind:
+**If the UI element matches a component below → use the library's component.** Do not recreate it with raw HTML or Tailwind.
 
-- Buttons → `<Button>` (never `<button>` with utility classes)
+- 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>` (never `<Tab>` alone)
+- Tabs → `<TabGroup>`
 - Event/content cards → `<Card>`
 
-Pick the correct variant / prop for the semantic role (e.g. `StatusTag type="success"` for success, `Button variant="primary"` once per context). The per-component rules below in "Design Rules" are the full reference.
+**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.
 
-### Layout freedom
+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.
 
-Structure the page however you like — any combination of flex, grid, max-width containers, custom spacing, hero compositions, sidebars, split layouts, dashboards, etc. Use aesthetic judgement: generous padding, clear hierarchy, balanced whitespace. The only layout constraint is that content shouldn't sit flush against viewport edges or adjacent blocks without breathing room.
+### Visual anchors from the library
 
-### Optional: layout helper components
+Use these tokens to keep custom elements visually coherent with the design system:
 
-The library also ships a small set of layout primitives (`Page`, `PageHeader`, `Section`, `Toolbar`, `CardGrid`, `Stack`) that some users prefer for rapid scaffolding. They are entirely optional — skip them and design your own layout if that produces a better result. If you do use them, they apply sensible defaults (centered container, 48px section gap, responsive card grid). Full API is in the TypeScript types.
+- **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.
+- **Surfaces** — `bg-background` / `bg-card` / `bg-muted` (dark mode compatible).
+- **Brand color** — `--primary-action`, or Tailwind `text-primary-action` / `bg-primary-action`.
+- **Radius** — `rounded-md` (6px), `rounded-lg` (8px), `rounded-xl` (12px), `rounded-full`.
+- **Border** — `border-border` for default borders.
 
 ---
 

package/package.json

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