@rinzai/zen 0.4.0 → 0.4.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 rinzai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# Zen
+
+[![npm](https://img.shields.io/npm/v/@rinzai/zen)](https://www.npmjs.com/package/@rinzai/zen)
+
+![Zen: React components in dark glass](https://zen.rinzai.dev/og.png)
+
+React components in dark glass: translucent surfaces, hairline borders that catch a pointer light, and one accent colour carrying the UI. Built on native platform features (`<dialog>`, the Popover API, CSS anchor positioning, radio inputs) with **no runtime dependencies**.
+
+**[Documentation](https://zen.rinzai.dev)** · **[Showcase app](https://zen.rinzai.dev/showcase/)** · **[Storybook](https://zen.rinzai.dev/storybook/)**
+
+## Installation
+
+```sh
+pnpm add @rinzai/zen
+```
+
+React 19 is the only peer dependency.
+
+**Using Tailwind CSS v4?** Add Zen's theme after Tailwind in your stylesheet. Your one Tailwind build then generates everything Zen's components use:
+
+```css
+@import 'tailwindcss';
+@import '@rinzai/zen/tailwind.css';
+```
+
+**Not using Tailwind?** Import the complete stylesheet once, near the root of your app. It includes the default theme:
+
+```js
+import '@rinzai/zen/css';
+```
+
+Zen never styles your own elements. For its page setup (the background showing through), heading scale, inline code and quiet scrollbars, also add the optional base:
+
+```css
+@import '@rinzai/zen/base.css';
+```
+
+The look is set in [Inter](https://rsms.me/inter/); load it however you like.
+
+## Usage
+
+```tsx
+import { Backdrop, Button, Card } from '@rinzai/zen';
+
+export default function App() {
+    return (
+        <>
+            <Backdrop />
+            <Card title="Budget">
+                <Button>Save changes</Button>
+            </Card>
+        </>
+    );
+}
+```
+
+## What's inside
+
+- **Surfaces:** Card, Stat, Dialog, ConfirmDialog, Popover, Toast, Backdrop (aurora, contours or dots, and a pointer light)
+- **Inputs:** Button, Input, TextArea, InputGroup, MoneyInput, Select, Dropdown, MonthPicker, Segmented, Slider, Toggle, Field
+- **Data:** composable Table with sticky edges and sorting, tree rows, editable cells, virtual rows, Meter, ProgressRing, AnimatedNumber
+- **Navigation:** Header, NavPills, Tabs, TabBar, SideNav, TableOfContents, ActionsMenu
+- **Theming:** dark and light, OKLCH tokens, and a theme generator (presets or any hue) that keeps contrast readable
+- **Hooks and utilities:** `useAnchoredPopup`, `useVirtualList`, `useTree`, `useSort`, money and month helpers, `cx` (Tailwind-aware class merging), `cva`
+
+Every component takes `className`, and a class you pass always overrides the component's default.
+
+## Theming
+
+Dark is the default. Add the `light` class (or `data-theme="light"`) for the light palette. Colours are OKLCH `L C H` triplets; override any token in your own CSS:
+
+```css
+:root {
+    --primary: 0.72 0.13 200; /* teal instead of violet */
+    --glow: 0.7 0.13 200;
+}
+```
+
+Or generate a whole theme at runtime:
+
+```ts
+import { applyPreset, applyTheme, DEFAULT_THEME } from '@rinzai/zen';
+
+applyTheme(applyPreset(DEFAULT_THEME, 'ocean'));
+```
+
+## Development
+
+```sh
+pnpm install
+pnpm dev          # Storybook
+pnpm docs:dev     # docs site
+pnpm test
+pnpm build
+```
+
+## License
+
+[MIT](LICENSE)

package/dist/backdrop/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/backdrop/index.tsx"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,aAAa,+BAuLnE;AAED,MAAM,WAAW,aAAa;IAC1B,wFAAwF;IACxF,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/backdrop/index.tsx"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,aAAa,+BA2LnE;AAED,MAAM,WAAW,aAAa;IAC1B,wFAAwF;IACxF,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/spinner/index.d.ts

@@ -1,6 +1,12 @@
-/** Small circular spinner in the current text colour. */
-export default function Spinner({ className }: SpinnerProps): import('react').JSX.Element;
+/**
+ * Small circular spinner in the current text colour; size it with className
+ * (default size-4). Decorative by default (e.g. inside a loading Button). Give
+ * it a `label` when it stands on its own, and screen readers announce it.
+ */
+export default function Spinner({ label, className }: SpinnerProps): import('react').JSX.Element;
 export interface SpinnerProps {
+    /** What is loading, e.g. "Loading entries". Makes the spinner announce itself. */
+    label?: string;
     className?: string;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/spinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/spinner/index.tsx"],"names":[],"mappings":"AAEA,yDAAyD;AACzD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,+BAU1D;AAED,MAAM,WAAW,YAAY;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/spinner/index.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,YAAY,+BAYjE;AAED,MAAM,WAAW,YAAY;IACzB,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/zen.js

@@ -586,13 +586,14 @@ function Se({ pattern: e, topoSrc: t }) {
 			let a = t + " " + n;
 			c.get(e) !== a && (c.set(e, a), e.style.setProperty(r, t), e.style.setProperty(i, n));
 		}, u = () => {
-			if (n = 0, t) {
+			n = 0;
+			let e = Array.from(document.querySelectorAll(".glow-edge")), r = e.map((e) => e.getBoundingClientRect()), c = t?.getBoundingClientRect();
+			if (t && c) {
 				let e = s ? "out" : "in";
 				t.dataset.pointer !== e && (t.dataset.pointer = e);
 				let n = t.querySelector(".zen-light");
-				n && !s && l(n, `${i}px`, `${a}px`, "left", "top");
+				n && !s && l(n, `${Math.round(i - c.left)}px`, `${Math.round(a - c.top)}px`, "left", "top");
 			}
-			let e = Array.from(document.querySelectorAll(".glow-edge")), r = e.map((e) => e.getBoundingClientRect());
 			e.forEach((e, t) => {
 				let n = r[t];
 				i > n.left - 400 && i < n.right + 400 && a > n.top - 400 && a < n.bottom + 400 ? (l(e, `${Math.round(i - n.left)}px`, `${Math.round(a - n.top)}px`), o.delete(e)) : o.has(e) || (l(e, "-9999px", "-9999px"), o.add(e));
@@ -708,10 +709,12 @@ var Te = we("zen__badge inline-flex items-center rounded-md border px-1.5 py-0.5
 });
 //#endregion
 //#region packages/spinner/index.tsx
-function Ee({ className: e }) {
+function Ee({ label: e, className: t }) {
 	return /* @__PURE__ */ m("span", {
-		"aria-hidden": !0,
-		className: k("zen__spinner inline-block size-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent", e)
+		role: e ? "status" : void 0,
+		"aria-label": e,
+		"aria-hidden": !e || void 0,
+		className: k("zen__spinner inline-block size-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent", t)
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,35 @@
 {
   "name": "@rinzai/zen",
-  "version": "0.4.0",
+  "version": "0.4.2",
+  "description": "React components in dark glass: translucent surfaces, hairline borders that catch a pointer light, one accent colour. Tailwind v4, no runtime dependencies.",
+  "keywords": [
+    "react",
+    "react-components",
+    "component-library",
+    "ui",
+    "design-system",
+    "tailwind",
+    "tailwindcss",
+    "tailwind-v4",
+    "glassmorphism",
+    "dark-mode",
+    "oklch",
+    "popover-api",
+    "dialog",
+    "table",
+    "virtualized",
+    "typescript"
+  ],
+  "homepage": "https://zen.rinzai.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/r1nzai/Zen.git"
+  },
+  "bugs": {
+    "url": "https://github.com/r1nzai/Zen/issues"
+  },
+  "author": "rinzai (https://github.com/r1nzai)",
+  "license": "MIT",
   "type": "module",
   "types": "./dist/index.d.ts",
   "module": "./dist/zen.js",
@@ -86,6 +115,6 @@
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token $CHROMATIC_PROJECT_TOKEN",
     "docs:dev": "pnpm --filter zen-docs dev",
-    "docs:build": "pnpm --filter zen-docs build && cp docs/build/client/__spa-fallback.html docs/build/client/404.html && storybook build --output-dir docs/build/client/storybook"
+    "docs:build": "pnpm --filter zen-docs build && cp docs/build/client/404/index.html docs/build/client/404.html && storybook build --output-dir docs/build/client/storybook"
   }
 }