orynn 0.2.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2026 rajveer
3
+ Copyright (c) 2026 Rajveer Singh
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,43 +1,68 @@
1
1
  # orynn
2
2
 
3
- > A small, strongly-typed form library for React themeable controls + a JSON-driven `Fieldset`.
4
-
5
- `orynn` gives you a set of accessible, feature-rich form controls you can use on their own, a
6
- theming layer built on CSS custom properties, and a `<Fieldset>` that renders a whole form from
7
- a config object.
8
-
9
- **Controls (all standalone):**
10
- `Input` · `Textarea` · `NumberField` · `Dropdown` (combobox) · `DatePicker` ·
11
- `Checkbox` / `CheckboxGroup` · `Radio` / `RadioGroup` · `Field` primitive.
12
-
13
- - **Themeable** `<OrynnProvider theme="…">` with presets, density, and custom accent / font /
14
- radius / spacing. Zero-runtime: it only sets `--orynn-*` CSS variables.
15
- - **Feature-rich** floating labels, adornments, clearable / loading, success & error states,
16
- searchable + multi + grouped selects, a keyboard-navigable calendar, `Intl` number formatting.
17
- - **Extensible** — field registry, pluggable validation resolver, every value a design token.
18
- - **Small & tree-shakeable** — `react` is the only required peer (`react-dom` for the
19
- `Dropdown` / `DatePicker` popovers). ESM + CJS.
20
-
21
- > Status: `0.2.x`. The control and theming APIs are stabilising; `@experimental` bits (the field
22
- > registry, `registerRule`) may still change before `1.0`.
3
+ > A strongly-typed React UI library — JSON-driven forms **and** a shadcn-aligned component set.
4
+ > Built by **Rajveer Singh**.
5
+ >
6
+ > **Showcase & docs https://orynn-web.pages.dev**
7
+
8
+ `orynn` gives you:
9
+
10
+ - **Form controls** (standalone or JSON-driven) — `Input` · `Textarea` · `NumberField` ·
11
+ `Dropdown` (combobox) · `DatePicker` · `Checkbox` / `CheckboxGroup` · `Radio` / `RadioGroup` ·
12
+ `Field` primitive — plus a `<Fieldset>` / `<Form>` that renders a whole form from a config
13
+ object, with a pluggable validation resolver and a field registry.
14
+ - **A shadcn-aligned component set** `Button` · `Label` · `Card` · `Badge` · `Alert` ·
15
+ `Separator` · `Switch` · `Tabs` · `Dialog` · `Popover` · `Tooltip` · `DropdownMenu` · `Table` ·
16
+ `Accordion` · `Slider` · `Progress` · `Toast` (`<Toaster />` + `toast()`) · `Pagination`.
17
+ Semantic OKLCH tokens, one `--orynn-radius` knob, light/dark via a `.dark` class, and a
18
+ `className` that always wins.
19
+ - **Theming** `<OrynnProvider theme="…">` with presets, density, and a custom primary /
20
+ ring / font / radius / spacing. Zero styling runtime: it only sets `--orynn-*` CSS variables.
21
+
22
+ One runtime dependency (`radix-ui`, for the interactive primitives); `react` is the only
23
+ required peer. ESM + CJS + one shipped stylesheet.
24
+
25
+ ## Status & licence
26
+
27
+ `0.6.0`, **MIT** ([`LICENSE`](LICENSE)) — published on npm as [`orynn`](https://www.npmjs.com/package/orynn).
28
+ The showcase site at <https://orynn-web.pages.dev> documents every component and has an
29
+ AI-redesign guide at `/redesign`.
23
30
 
24
31
  ## Install
25
32
 
26
33
  ```bash
27
- npm install orynn
34
+ npm i orynn # peer: react >= 18
28
35
  ```
29
36
 
30
37
  ```tsx
31
- import { Fieldset } from "orynn";
32
38
  import "orynn/styles.css";
33
39
  ```
34
40
 
41
+ Install prints a one-time hello (name, licence, version, the AI skill). It's
42
+ print-only and stays quiet in CI; `ORYNN_NO_BANNER=1` turns it off.
43
+
35
44
  ## Quick start
36
45
 
37
46
  ```tsx
38
- import { Fieldset, type FieldsetConfig } from "orynn";
47
+ import { OrynnProvider, Button, Card, CardHeader, CardTitle, CardContent, Input } from "orynn";
39
48
  import "orynn/styles.css";
40
49
 
50
+ <OrynnProvider theme={{ preset: "teal", colorScheme: "dark" }}>
51
+ <Card>
52
+ <CardHeader><CardTitle>Sign in</CardTitle></CardHeader>
53
+ <CardContent>
54
+ <Input label="Email" type="email" floatingLabel />
55
+ <Button>Continue</Button>
56
+ </CardContent>
57
+ </Card>
58
+ </OrynnProvider>
59
+ ```
60
+
61
+ JSON-driven form:
62
+
63
+ ```tsx
64
+ import { Fieldset, type FieldsetConfig } from "orynn";
65
+
41
66
  const config: FieldsetConfig = {
42
67
  legend: "Personal details",
43
68
  fields: [
@@ -47,46 +72,20 @@ const config: FieldsetConfig = {
47
72
  ],
48
73
  };
49
74
 
50
- export function Form() {
51
- return <Fieldset config={config} onChange={(values) => console.log(values)} />;
52
- }
53
- ```
54
-
55
- ## Standalone controls + theming
56
-
57
- ```tsx
58
- import {
59
- OrynnProvider, Input, Textarea, NumberField,
60
- Dropdown, DatePicker, Checkbox, RadioGroup,
61
- } from "orynn";
62
- import "orynn/styles.css";
63
-
64
- <OrynnProvider theme={{ preset: "teal", radius: "lg", density: "comfortable" }}>
65
- <Input label="Full name" floatingLabel clearable required />
66
- <NumberField label="Budget" currency="USD" locale="en-US" min={0} />
67
- <Dropdown
68
- label="Country"
69
- searchable
70
- options={[
71
- { label: "India", value: "IN", icon: "🇮🇳" },
72
- { label: "Indonesia", value: "ID", icon: "🇮🇩" },
73
- ]}
74
- />
75
- <DatePicker label="Start date" showToday clearable />
76
- <Checkbox label="Email me updates" />
77
- </OrynnProvider>
75
+ <Fieldset config={config} onChange={(values) => console.log(values)} />;
78
76
  ```
79
77
 
80
- `theme` also accepts a preset shorthand (`theme="slate"`) or a custom accent
81
- (`theme={{ accent: "#e11d48" }}`). See [Theming](docs/theming.md).
82
-
83
78
  ## Docs
84
79
 
80
+ Full docs live at **https://orynn-web.pages.dev**. In this repo:
81
+
85
82
  - [Getting started](docs/getting-started.md) · [Theming](docs/theming.md) · [Controls](docs/controls.md)
83
+ - Components: [button](docs/button.md) · [card](docs/card.md) · [dialog](docs/dialog.md) ·
84
+ [dropdown-menu](docs/dropdown-menu.md) · [tabs](docs/tabs.md) · [tooltip](docs/tooltip.md) ·
85
+ [popover](docs/popover.md) · [switch](docs/switch.md) · [badge](docs/badge.md) ·
86
+ [alert](docs/alert.md) · [separator](docs/separator.md) · [table](docs/table.md) · [label](docs/label.md) ·
87
+ [accordion](docs/accordion.md) · [slider](docs/slider.md) · [progress](docs/progress.md) ·
88
+ [toast](docs/toast.md) · [pagination](docs/pagination.md)
86
89
  - [`Fieldset`](docs/fieldset.md) · [JSON configuration](docs/json-config.md) · [Validation](docs/validation.md)
87
90
  - [Layout](docs/layout.md) · [Extensibility](docs/extensibility.md) · [Accessibility](docs/accessibility.md)
88
91
  - [Changelog](CHANGELOG.md) · [Architecture](ARCHITECTURE.md) · [Roadmap](FUTURE.md)
89
-
90
- ## License
91
-
92
- MIT