@fictjs/ui-primitives 0.1.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 +21 -0
- package/README.md +181 -0
- package/dist/index.cjs +5091 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1123 -0
- package/dist/index.d.ts +1123 -0
- package/dist/index.js +4907 -0
- package/dist/index.js.map +1 -0
- package/docs/README.md +39 -0
- package/docs/accessibility.md +50 -0
- package/docs/api-reference.md +200 -0
- package/docs/architecture.md +113 -0
- package/docs/components/core/accessible-icon.md +23 -0
- package/docs/components/core/id.md +26 -0
- package/docs/components/core/portal.md +30 -0
- package/docs/components/core/presence.md +27 -0
- package/docs/components/core/primitive.md +22 -0
- package/docs/components/core/separator.md +25 -0
- package/docs/components/core/slot.md +25 -0
- package/docs/components/core/visually-hidden.md +21 -0
- package/docs/components/disclosure/accordion.md +33 -0
- package/docs/components/disclosure/collapsible.md +29 -0
- package/docs/components/disclosure/navigation-menu.md +43 -0
- package/docs/components/disclosure/tabs.md +35 -0
- package/docs/components/feedback/toast.md +60 -0
- package/docs/components/form/calendar.md +35 -0
- package/docs/components/form/controls.md +52 -0
- package/docs/components/form/date-picker.md +44 -0
- package/docs/components/form/form-field.md +39 -0
- package/docs/components/form/inputs.md +99 -0
- package/docs/components/interaction/dismissable-layer.md +28 -0
- package/docs/components/interaction/focus-scope.md +27 -0
- package/docs/components/interaction/live-region.md +26 -0
- package/docs/components/interaction/popper.md +30 -0
- package/docs/components/interaction/roving-focus.md +27 -0
- package/docs/components/interaction/scroll-lock.md +22 -0
- package/docs/components/layout/layout.md +61 -0
- package/docs/components/menu/context-menu.md +44 -0
- package/docs/components/menu/dropdown-menu.md +62 -0
- package/docs/components/menu/menubar.md +38 -0
- package/docs/components/overlay/alert-dialog.md +46 -0
- package/docs/components/overlay/command-palette.md +54 -0
- package/docs/components/overlay/dialog.md +69 -0
- package/docs/components/overlay/hover-card.md +25 -0
- package/docs/components/overlay/popover.md +36 -0
- package/docs/components/overlay/tooltip.md +28 -0
- package/docs/examples.md +155 -0
- package/docs/release.md +60 -0
- package/docs/testing.md +36 -0
- package/package.json +89 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Fict
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
# @fictjs/ui-primitives
|
|
2
|
+
|
|
3
|
+
[](https://github.com/fictjs/ui-primitives/actions/workflows/nodejs.yml)
|
|
4
|
+
[](https://www.npmjs.com/package/@fictjs/ui-primitives)
|
|
5
|
+

|
|
6
|
+
|
|
7
|
+
Official headless UI primitives for Fict.
|
|
8
|
+
|
|
9
|
+
This repository provides unstyled, composable primitives focused on accessibility, interaction semantics, and controlled/uncontrolled APIs.
|
|
10
|
+
|
|
11
|
+
## Who This Is For
|
|
12
|
+
|
|
13
|
+
- Teams building design systems on top of `@fictjs/runtime`
|
|
14
|
+
- App developers who want accessible primitives without pre-baked styles
|
|
15
|
+
- Contributors working on interaction, focus, overlay, and form behaviors
|
|
16
|
+
|
|
17
|
+
## Package Highlights
|
|
18
|
+
|
|
19
|
+
- Headless component primitives with composable parts
|
|
20
|
+
- Controlled + uncontrolled state APIs across core components
|
|
21
|
+
- Consistent `asChild` support across `Trigger` / `Close` / `Item` parts
|
|
22
|
+
- Deterministic id strategy via `id` injection and `useId` / `IdProvider`
|
|
23
|
+
- Built-in accessibility semantics (`role`, `aria-*`, keyboard interactions)
|
|
24
|
+
- Shared behavior utilities via `@fictjs/hooks` (event listeners, timers, lifecycle cleanup)
|
|
25
|
+
- Strong behavior tests (Vitest + JSDOM)
|
|
26
|
+
- Executable demo app + screenshot baseline workflow
|
|
27
|
+
|
|
28
|
+
## Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
pnpm add @fictjs/ui-primitives @fictjs/runtime @fictjs/hooks
|
|
32
|
+
# or npm / yarn
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Node version: `>=18`
|
|
36
|
+
|
|
37
|
+
Peer dependencies:
|
|
38
|
+
|
|
39
|
+
- `@fictjs/hooks@^0.3.0`
|
|
40
|
+
- `@fictjs/runtime@^0.10.0`
|
|
41
|
+
|
|
42
|
+
## Quick Start
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
import { render } from '@fictjs/runtime'
|
|
46
|
+
import {
|
|
47
|
+
DialogRoot,
|
|
48
|
+
DialogTrigger,
|
|
49
|
+
DialogOverlay,
|
|
50
|
+
DialogContent,
|
|
51
|
+
DialogTitle,
|
|
52
|
+
DialogDescription,
|
|
53
|
+
DialogClose,
|
|
54
|
+
} from '@fictjs/ui-primitives'
|
|
55
|
+
|
|
56
|
+
const app = document.querySelector('#app')
|
|
57
|
+
if (!(app instanceof HTMLElement)) throw new Error('Missing #app')
|
|
58
|
+
|
|
59
|
+
render(
|
|
60
|
+
() => (
|
|
61
|
+
<DialogRoot>
|
|
62
|
+
<DialogTrigger>Open dialog</DialogTrigger>
|
|
63
|
+
<DialogOverlay />
|
|
64
|
+
<DialogContent>
|
|
65
|
+
<DialogTitle>Settings</DialogTitle>
|
|
66
|
+
<DialogDescription>Update your preferences.</DialogDescription>
|
|
67
|
+
<DialogClose>Close</DialogClose>
|
|
68
|
+
</DialogContent>
|
|
69
|
+
</DialogRoot>
|
|
70
|
+
),
|
|
71
|
+
app,
|
|
72
|
+
)
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## API Surface
|
|
76
|
+
|
|
77
|
+
All exports are available from the root entry:
|
|
78
|
+
|
|
79
|
+
```ts
|
|
80
|
+
import { DialogRoot, TabsRoot, ToastProvider } from '@fictjs/ui-primitives'
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Export groups:
|
|
84
|
+
|
|
85
|
+
- Core: `Primitive`, `Slot`, `Presence`, `Portal`, `VisuallyHidden`, etc.
|
|
86
|
+
- Core id primitives: `IdProvider`, `useId`
|
|
87
|
+
- Interaction: `FocusScope`, `DismissableLayer`, `RovingFocusGroup`, `Popper`, etc.
|
|
88
|
+
- Overlay: `Dialog*`, `AlertDialog*`, `Popover*`, `Tooltip*`, `HoverCard*`, `CommandPalette*`
|
|
89
|
+
- Menu: `DropdownMenu*`, `ContextMenu*`, `Menubar*` (including submenu parts)
|
|
90
|
+
- Feedback: `ToastProvider`, `ToastViewport`, `Toast*`, `useToast`
|
|
91
|
+
- Disclosure: `Tabs*`, `Accordion*`, `Collapsible*`, `NavigationMenu*`
|
|
92
|
+
- Form: `Label`, `Checkbox`, `RadioGroup`, `Switch`, `Toggle`, `Slider`, `RangeSlider`, `Calendar`, `DatePicker`, `Select`, `Combobox`, `Form*`
|
|
93
|
+
- Layout: `ScrollArea*`, `Resizable*`, `AspectRatio`, `Progress`, `Skeleton`, `FocusVisible`
|
|
94
|
+
|
|
95
|
+
For detailed symbol-by-symbol reference, see `docs/api-reference.md`.
|
|
96
|
+
|
|
97
|
+
## Design Contracts
|
|
98
|
+
|
|
99
|
+
- Controlled/uncontrolled parity: `open/defaultOpen/onOpenChange` and `value/defaultValue/onValueChange`
|
|
100
|
+
- `asChild` parity: `Trigger`, `Close`, and `Item` parts support Slot composition
|
|
101
|
+
- Stable id wiring: prefer explicit `id` for deterministic SSR, otherwise use built-in id generation
|
|
102
|
+
- Interceptable outside interactions: overlay content parts expose escape and outside interaction hooks
|
|
103
|
+
|
|
104
|
+
## Documentation Map
|
|
105
|
+
|
|
106
|
+
- `docs/README.md`: documentation index
|
|
107
|
+
- `docs/components/*`: per-component behavior, minimal examples, and a11y notes
|
|
108
|
+
- `docs/api-reference.md`: full export index
|
|
109
|
+
- `docs/architecture.md`: design and implementation structure
|
|
110
|
+
- `docs/testing.md`: testing strategy and expectations
|
|
111
|
+
- `docs/accessibility.md`: accessibility review checklist
|
|
112
|
+
- `docs/examples.md`: copyable composition snippets
|
|
113
|
+
- `examples/README.md`: executable demo app + screenshot workflow
|
|
114
|
+
- `docs/release.md`: release and publish checklist
|
|
115
|
+
|
|
116
|
+
## Demo App
|
|
117
|
+
|
|
118
|
+
Run local demo app:
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
pnpm examples:dev
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Open `http://127.0.0.1:4173`.
|
|
125
|
+
|
|
126
|
+
Build and preview:
|
|
127
|
+
|
|
128
|
+
```bash
|
|
129
|
+
pnpm examples:build
|
|
130
|
+
pnpm examples:preview
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Screenshot Baselines
|
|
134
|
+
|
|
135
|
+
Install browser binary once:
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
pnpm examples:screenshots:install
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
Regenerate baseline screenshots:
|
|
142
|
+
|
|
143
|
+
```bash
|
|
144
|
+
pnpm examples:screenshots
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
Outputs: `examples/screenshots/baseline`
|
|
148
|
+
|
|
149
|
+
## Development
|
|
150
|
+
|
|
151
|
+
Install dependencies:
|
|
152
|
+
|
|
153
|
+
```bash
|
|
154
|
+
pnpm install --ignore-workspace
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
Common commands:
|
|
158
|
+
|
|
159
|
+
- `pnpm lint`
|
|
160
|
+
- `pnpm typecheck`
|
|
161
|
+
- `pnpm test`
|
|
162
|
+
- `pnpm test:coverage`
|
|
163
|
+
- `pnpm build`
|
|
164
|
+
- `pnpm clean`
|
|
165
|
+
|
|
166
|
+
## Contribution Workflow
|
|
167
|
+
|
|
168
|
+
1. Create a focused branch.
|
|
169
|
+
2. Make small, reviewable commits.
|
|
170
|
+
3. Keep docs and tests updated with behavior changes.
|
|
171
|
+
4. Run quality gates before opening a PR.
|
|
172
|
+
|
|
173
|
+
Detailed guide: `CONTRIBUTING.md`
|
|
174
|
+
|
|
175
|
+
## Release Workflow
|
|
176
|
+
|
|
177
|
+
Use the checklist in `docs/release.md` before publishing.
|
|
178
|
+
|
|
179
|
+
## License
|
|
180
|
+
|
|
181
|
+
MIT, see `LICENSE`.
|