orynn 0.1.0 → 0.2.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/README.md +44 -23
- package/dist/index.cjs +1981 -83
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +357 -39
- package/dist/index.d.ts +357 -39
- package/dist/index.js +1971 -85
- package/dist/index.js.map +1 -1
- package/dist/styles.css +882 -99
- package/package.json +11 -2
package/README.md
CHANGED
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
# orynn
|
|
2
2
|
|
|
3
|
-
> A small, strongly-typed
|
|
3
|
+
> A small, strongly-typed form library for React — themeable controls + a JSON-driven `Fieldset`.
|
|
4
4
|
|
|
5
|
-
`orynn` gives you a
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
the public API.
|
|
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.
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
- **Zero runtime dependencies** — `react` is the only peer. ESM + CJS. Tree-shakeable.
|
|
9
|
+
**Controls (all standalone):**
|
|
10
|
+
`Input` · `Textarea` · `NumberField` · `Dropdown` (combobox) · `DatePicker` ·
|
|
11
|
+
`Checkbox` / `CheckboxGroup` · `Radio` / `RadioGroup` · `Field` primitive.
|
|
14
12
|
|
|
15
|
-
|
|
16
|
-
|
|
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`.
|
|
17
23
|
|
|
18
24
|
## Install
|
|
19
25
|
|
|
@@ -46,25 +52,40 @@ export function Form() {
|
|
|
46
52
|
}
|
|
47
53
|
```
|
|
48
54
|
|
|
49
|
-
Standalone
|
|
55
|
+
## Standalone controls + theming
|
|
50
56
|
|
|
51
57
|
```tsx
|
|
52
|
-
import {
|
|
58
|
+
import {
|
|
59
|
+
OrynnProvider, Input, Textarea, NumberField,
|
|
60
|
+
Dropdown, DatePicker, Checkbox, RadioGroup,
|
|
61
|
+
} from "orynn";
|
|
62
|
+
import "orynn/styles.css";
|
|
53
63
|
|
|
54
|
-
<
|
|
55
|
-
<
|
|
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>
|
|
56
78
|
```
|
|
57
79
|
|
|
80
|
+
`theme` also accepts a preset shorthand (`theme="slate"`) or a custom accent
|
|
81
|
+
(`theme={{ accent: "#e11d48" }}`). See [Theming](docs/theming.md).
|
|
82
|
+
|
|
58
83
|
## Docs
|
|
59
84
|
|
|
60
|
-
- [Getting started](docs/getting-started.md)
|
|
61
|
-
- [`Fieldset`](docs/fieldset.md) · [
|
|
62
|
-
- [
|
|
63
|
-
- [
|
|
64
|
-
- [Layout](docs/layout.md)
|
|
65
|
-
- [Extensibility](docs/extensibility.md)
|
|
66
|
-
- [Accessibility](docs/accessibility.md)
|
|
67
|
-
- [Architecture](ARCHITECTURE.md) · [Roadmap / postponed](FUTURE.md)
|
|
85
|
+
- [Getting started](docs/getting-started.md) · [Theming](docs/theming.md) · [Controls](docs/controls.md)
|
|
86
|
+
- [`Fieldset`](docs/fieldset.md) · [JSON configuration](docs/json-config.md) · [Validation](docs/validation.md)
|
|
87
|
+
- [Layout](docs/layout.md) · [Extensibility](docs/extensibility.md) · [Accessibility](docs/accessibility.md)
|
|
88
|
+
- [Changelog](CHANGELOG.md) · [Architecture](ARCHITECTURE.md) · [Roadmap](FUTURE.md)
|
|
68
89
|
|
|
69
90
|
## License
|
|
70
91
|
|