wimui 0.3.0 → 0.5.0

package/dist/llms.txt

@@ -4,7 +4,7 @@
 
 ## What this is
 
-**wimui** v0.3.0 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
+**wimui** v0.5.0 — a React 19 component library: 216 documented components across 10 categories, with design tokens, dark mode, i18n (en/ja/pt-BR) and WAI-ARIA compliant a11y. Peer deps: react ^19, react-dom ^19 (plus optional peers for specific components — see package.json).
 
 ## Install & required setup
 
@@ -55,12 +55,17 @@ Single components are judged by state/a11y/token compliance. **Composed screens*
 - Emoji used as UI icons (☰ ★ ✓) → use `src/icon/` components. (Emoji as functional markers in docs/README is fine; as UI icons it is not.)
 - Skeleton used as anything but loading (fake screenshots) → real-looking content or an actual mini UI.
 - Every section center-aligned → default to left-aligned; at most one centered section per page.
-- Round numbers ("1000+", "99%") + generic copy ("Get started", "seamless/powerful/effortless") → jagged realistic numbers (4,281) and product-specific voice.
+- Round numbers ("1000+", "99%") + generic copy ("Get started") → jagged realistic numbers (4,281) and product-specific voice.
 - Sequential/alphabetical dummy names (Alice/Bob/Charlie, User 1/2) → culturally diverse, unordered, real-feeling names.
 - Rainbow color-per-category → color carries state only (success/warning/danger); everything else neutral.
 - Perfectly even grids (2×2, 3×3 all same size) → break the grid (span the protagonist cell, size differences, hero+sidebar asymmetry).
 - Filling every slot / uniform gaps everywhere → leave whitespace; group by proximity (tight within a group, loose between groups).
 
+**Machine-enforced banned vocabulary** (a linter, `check:slop`, fails builds that use these in demo copy — say concrete actions/numbers instead):
+- Hype adjectives/verbs: seamless, powerful, effortless, cutting-edge, next-gen, next-generation, revolutionary, game-changing, state-of-the-art, world-class, best-in-class, unparalleled, lightning-fast, blazing-fast, supercharge, innovative, disruptive, harness, leverage, elevate, empower, reimagine, unleash, delight, magical, 圧倒的, 革新的, 次世代, 究極, 最先端.
+- Hype phrases: "in today's digital landscape", "built for the modern team", "supercharge your", "unleash your", "reimagine the way", "experience the power of", "innovative solutions".
+- Stock placeholder names: John Doe, Jane Doe, John Smith, Jane Smith, Lorem Ipsum, Example User, Acme (a realistic example name in an input placeholder is fine).
+
 **Must rules:**
 1. One visual protagonist per screen (jump in size/weight/color creates the entry point).
 2. Contrast density: hero/showcase sparse, data regions (tables/lists) dense. Uniform "medium density" reads as AI.
@@ -71,6 +76,108 @@ Single components are judged by state/a11y/token compliance. **Composed screens*
 7. Give demo content real substance (product-context copy, internally consistent numbers/dates/names — active ≤ total, dates not evenly spaced).
 8. Add intentional "wobble": mix in 1–2 incomplete rows (a truncated long name, a missing optional field, an extreme value, an error/unread state) and show non-happy-path states (hover/focus/disabled/error/empty/loading).
 
+## Recipes — copy-paste starting points
+
+### 1. Required setup (the contract)
+
+Without `styles.css` nothing is styled — this is the one step Storybook hides from you. Import it once at the app entry, wrap the tree in `WimProvider`, then build screens inside.
+
+```tsx
+// main.tsx — app entry
+import { createRoot } from "react-dom/client";
+import "wimui/styles.css"; // REQUIRED: design tokens + component styles
+import "wimui/reset.css";  // optional base reset
+import { WimProvider } from "wimui";
+import { App } from "./App";
+
+// theme: "light" | "dark" | "system" (default). density: "comfortable" | "compact".
+createRoot(document.getElementById("root")!).render(
+  <WimProvider theme="system" density="comfortable">
+    <App />
+  </WimProvider>,
+);
+```
+
+```tsx
+// App.tsx — app frame. AppShell wires header/sidebar; page content is children.
+import { AppShell, Header, Sidebar, Stack, Title, Text, Button } from "wimui";
+
+export function App() {
+  return (
+    <AppShell
+      header={<Header sticky bordered><Title tag="h1" size="md">Larkfield</Title></Header>}
+      sidebar={
+        <Sidebar width={240}>
+          <Stack gap="2xs" p="md">
+            <Button variant="ghost" justify="start" fullWidth>Overview</Button>
+            <Button variant="ghost" justify="start" fullWidth>Customers</Button>
+            <Button variant="ghost" justify="start" fullWidth>Settings</Button>
+          </Stack>
+        </Sidebar>
+      }
+    >
+      <Stack gap="lg">
+        <Title tag="h2" size="lg">Overview</Title>
+        <Text color="secondary">Spacing/size/color come from --wim-* tokens via props — never hardcode px/hex.</Text>
+      </Stack>
+    </AppShell>
+  );
+}
+```
+
+### 2. A composed content screen
+
+One protagonist (the KPI row), a dense table below, tokens via props, jagged real data, and one deliberately incomplete row. Note the compound components (`Stats.Value`, `Table.Head`) and that `Grid` uses `cols` (not `columns`).
+
+```tsx
+import { Stack, Grid, Card, Stats, Table, Badge, Title, Text } from "wimui";
+
+const rows = [
+  { id: "in_9f2a", name: "Marisol Okonkwo", plan: "Scale", amount: "$4,610.50", status: "paid" },
+  { id: "in_7b41", name: "Dmitri Sørensen", plan: "Enterprise", amount: "$12,199.00", status: "failed" },
+  { id: "in_2a90", name: "Thomas O'Reilly", plan: null, amount: "$89.00", status: "pending" }, // incomplete row
+];
+const intent = { paid: "success", failed: "danger", pending: undefined } as const;
+
+export function BillingOverview() {
+  return (
+    <Stack gap="lg">
+      <Title tag="h2" size="lg">Billing</Title>
+
+      {/* Protagonist: KPI row. Uneven content per tile — not three clones. */}
+      <Grid cols={{ base: 1, sm: 2, lg: 3 }} gap="md">
+        <Stats><Stats.Label>MRR</Stats.Label><Stats.Value>$48,210</Stats.Value><Stats.Trend>+6.4%</Stats.Trend></Stats>
+        <Stats><Stats.Label>Active workspaces</Stats.Label><Stats.Value>1,204</Stats.Value><Stats.Description>176 idle over 30 days</Stats.Description></Stats>
+        <Stats><Stats.Label>Failed webhooks</Stats.Label><Stats.Value>137</Stats.Value><Stats.Trend>+23 today</Stats.Trend></Stats>
+      </Grid>
+
+      {/* Dense data region */}
+      <Card padding="none">
+        <Table hoverable fullWidth>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>Customer</Table.Head><Table.Head>Plan</Table.Head>
+              <Table.Head>Amount</Table.Head><Table.Head>Status</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {rows.map((r) => (
+              <Table.Row key={r.id}>
+                <Table.Cell>{r.name}</Table.Cell>
+                <Table.Cell>{r.plan ?? <Text color="tertiary">—</Text>}</Table.Cell>
+                <Table.Cell>{r.amount}</Table.Cell>
+                <Table.Cell><Badge variant="subtle" intent={intent[r.status]}>{r.status}</Badge></Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </Card>
+    </Stack>
+  );
+}
+```
+
+> More verified full-screen recipes (auth sign-in, settings form, empty state, filtered data table, onboarding) and per-category idioms (form, navigation, feedback, overlay) are in `llms-full.txt`.
 ## Components
 
 ### layout — `import { … } from "wimui/layout"`

package/dist/preset.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("./tokens/generated/presets.cjs");var t=`data-wim-preset`,n=new Set(e.WIM_PRESETS.map(e=>e.name));function r(e=void 0){if(typeof document>`u`)return`none`;let r=(e??document.documentElement).getAttribute?.(t);return r&&n.has(r)?r:`none`}function i(e,r=void 0){if(typeof document>`u`)return;let i=r??document.documentElement;e===`none`||!n.has(e)?i.removeAttribute(t):i.setAttribute(t,e)}exports.WIM_PRESETS=e.WIM_PRESETS,exports.getWimPreset=r,exports.setWimPreset=i;

package/dist/preset.d.ts

@@ -0,0 +1,11 @@
+import { WIM_PRESETS, WimPresetName } from './tokens/generated/presets';
+export { WIM_PRESETS };
+export type { WimPresetName };
+/** A preset name, or `none` for the default (no preset). */
+export type WimPreset = WimPresetName | "none";
+export declare function getWimPreset(root?: ParentNode | null | undefined): WimPreset;
+/**
+ * Apply a preset to an element (defaults to `document.documentElement`).
+ * `none` (or an unknown name) removes the attribute.
+ */
+export declare function setWimPreset(preset: WimPreset, root?: Element | null | undefined): void;

package/dist/preset.js

@@ -0,0 +1,16 @@
+"use client";
+import { WIM_PRESETS as e } from "./tokens/generated/presets.js";
+//#region src/preset.ts
+var t = "data-wim-preset", n = new Set(e.map((e) => e.name));
+function r(e = void 0) {
+	if (typeof document > "u") return "none";
+	let r = (e ?? document.documentElement).getAttribute?.(t);
+	return r && n.has(r) ? r : "none";
+}
+function i(e, r = void 0) {
+	if (typeof document > "u") return;
+	let i = r ?? document.documentElement;
+	e === "none" || !n.has(e) ? i.removeAttribute(t) : i.setAttribute(t, e);
+}
+//#endregion
+export { e as WIM_PRESETS, r as getWimPreset, i as setWimPreset };

package/dist/rhf/zod.d.ts

@@ -1,6 +1,6 @@
 /**
  * Re-export `@hookform/resolvers/zod` so apps can wire zod schemas without an extra import path.
- * Requires optional peers: `zod` (^4), `@hookform/resolvers` (^5.1), `react-hook-form` (^7.43).
+ * Requires optional peers: `zod` (^3.25 || ^4), `@hookform/resolvers` (^5.1), `react-hook-form` (^7.43).
  * See README「サポート行列（peer）」.
  */
 export { zodResolver } from '@hookform/resolvers/zod';