orynn 0.2.0 → 0.5.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 rajveer
+Copyright (c) 2026 Rajveer Singh
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,43 +1,64 @@
 # orynn
 
-> A small, strongly-typed form library for React — themeable controls + a JSON-driven `Fieldset`.
+> A strongly-typed React UI library — JSON-driven forms **and** a shadcn-aligned component set.
+> Built by **Rajveer Singh**.
+>
+> **Showcase & docs → https://orynn-web.pages.dev**
 
-`orynn` gives you a set of accessible, feature-rich form controls you can use on their own, a
-theming layer built on CSS custom properties, and a `<Fieldset>` that renders a whole form from
-a config object.
+`orynn` gives you:
 
-**Controls (all standalone):**
-`Input` · `Textarea` · `NumberField` · `Dropdown` (combobox) · `DatePicker` ·
-`Checkbox` / `CheckboxGroup` · `Radio` / `RadioGroup` · `Field` primitive.
+- **Form controls** (standalone or JSON-driven) — `Input` · `Textarea` · `NumberField` ·
+  `Dropdown` (combobox) · `DatePicker` · `Checkbox` / `CheckboxGroup` · `Radio` / `RadioGroup` ·
+  `Field` primitive — plus a `<Fieldset>` / `<Form>` that renders a whole form from a config
+  object, with a pluggable validation resolver and a field registry.
+- **A shadcn-aligned component set** — `Button` · `Label` · `Card` · `Badge` · `Alert` ·
+  `Separator` · `Switch` · `Tabs` · `Dialog` · `Popover` · `Tooltip` · `DropdownMenu` · `Table`.
+  Semantic OKLCH tokens, one `--orynn-radius` knob, light/dark via a `.dark` class, and a
+  `className` that always wins.
+- **Theming** — `<OrynnProvider theme="…">` with presets, density, and a custom primary /
+  ring / font / radius / spacing. Zero styling runtime: it only sets `--orynn-*` CSS variables.
 
-- **Themeable** — `<OrynnProvider theme="…">` with presets, density, and custom accent / font /
-  radius / spacing. Zero-runtime: it only sets `--orynn-*` CSS variables.
-- **Feature-rich** — floating labels, adornments, clearable / loading, success & error states,
-  searchable + multi + grouped selects, a keyboard-navigable calendar, `Intl` number formatting.
-- **Extensible** — field registry, pluggable validation resolver, every value a design token.
-- **Small & tree-shakeable** — `react` is the only required peer (`react-dom` for the
-  `Dropdown` / `DatePicker` popovers). ESM + CJS.
+One runtime dependency (`radix-ui`, for the interactive primitives); `react` is the only
+required peer. ESM + CJS + one shipped stylesheet.
 
-> Status: `0.2.x`. The control and theming APIs are stabilising; `@experimental` bits (the field
-> registry, `registerRule`) may still change before `1.0`.
+## Status & licence
+
+`0.5.0`, **MIT** ([`LICENSE`](LICENSE)) — published on npm as [`orynn`](https://www.npmjs.com/package/orynn).
+The showcase site at <https://orynn-web.pages.dev> documents every component and has an
+AI-redesign guide at `/redesign`.
 
 ## Install
 
 ```bash
-npm install orynn
+npm i orynn        # peer: react >= 18
 ```
 
 ```tsx
-import { Fieldset } from "orynn";
 import "orynn/styles.css";
 ```
 
 ## Quick start
 
 ```tsx
-import { Fieldset, type FieldsetConfig } from "orynn";
+import { OrynnProvider, Button, Card, CardHeader, CardTitle, CardContent, Input } from "orynn";
 import "orynn/styles.css";
 
+<OrynnProvider theme={{ preset: "teal", colorScheme: "dark" }}>
+  <Card>
+    <CardHeader><CardTitle>Sign in</CardTitle></CardHeader>
+    <CardContent>
+      <Input label="Email" type="email" floatingLabel />
+      <Button>Continue</Button>
+    </CardContent>
+  </Card>
+</OrynnProvider>
+```
+
+JSON-driven form:
+
+```tsx
+import { Fieldset, type FieldsetConfig } from "orynn";
+
 const config: FieldsetConfig = {
   legend: "Personal details",
   fields: [
@@ -47,46 +68,18 @@ const config: FieldsetConfig = {
   ],
 };
 
-export function Form() {
-  return <Fieldset config={config} onChange={(values) => console.log(values)} />;
-}
-```
-
-## Standalone controls + theming
-
-```tsx
-import {
-  OrynnProvider, Input, Textarea, NumberField,
-  Dropdown, DatePicker, Checkbox, RadioGroup,
-} from "orynn";
-import "orynn/styles.css";
-
-<OrynnProvider theme={{ preset: "teal", radius: "lg", density: "comfortable" }}>
-  <Input label="Full name" floatingLabel clearable required />
-  <NumberField label="Budget" currency="USD" locale="en-US" min={0} />
-  <Dropdown
-    label="Country"
-    searchable
-    options={[
-      { label: "India", value: "IN", icon: "🇮🇳" },
-      { label: "Indonesia", value: "ID", icon: "🇮🇩" },
-    ]}
-  />
-  <DatePicker label="Start date" showToday clearable />
-  <Checkbox label="Email me updates" />
-</OrynnProvider>
+<Fieldset config={config} onChange={(values) => console.log(values)} />;
 ```
 
-`theme` also accepts a preset shorthand (`theme="slate"`) or a custom accent
-(`theme={{ accent: "#e11d48" }}`). See [Theming](docs/theming.md).
-
 ## Docs
 
+Full docs live at **https://orynn-web.pages.dev**. In this repo:
+
 - [Getting started](docs/getting-started.md) · [Theming](docs/theming.md) · [Controls](docs/controls.md)
+- Components: [button](docs/button.md) · [card](docs/card.md) · [dialog](docs/dialog.md) ·
+  [dropdown-menu](docs/dropdown-menu.md) · [tabs](docs/tabs.md) · [tooltip](docs/tooltip.md) ·
+  [popover](docs/popover.md) · [switch](docs/switch.md) · [badge](docs/badge.md) ·
+  [alert](docs/alert.md) · [separator](docs/separator.md) · [table](docs/table.md) · [label](docs/label.md)
 - [`Fieldset`](docs/fieldset.md) · [JSON configuration](docs/json-config.md) · [Validation](docs/validation.md)
 - [Layout](docs/layout.md) · [Extensibility](docs/extensibility.md) · [Accessibility](docs/accessibility.md)
 - [Changelog](CHANGELOG.md) · [Architecture](ARCHITECTURE.md) · [Roadmap](FUTURE.md)
-
-## License
-
-MIT