@nurix/etna 0.19.66 → 0.19.67
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/bin/etna.js +10 -1
- package/data/harness-index.json +1 -5
- package/data/harnesses/code/CLAUDE.md +2 -0
- package/data/harnesses/code/agents/maintenance.md +3 -1
- package/data/harnesses/code/harness.json +7 -2
- package/data/harnesses/code/hooks/compliance.mjs +1 -0
- package/data/harnesses/code/hooks/lib/frozen.mjs +3 -0
- package/data/harnesses/code/hooks/lib/ownership.mjs +3 -1
- package/data/harnesses/code/skills/documentation/scripts/doc-lint.mjs +1 -1
- package/data/harnesses/delivery/agents/maintenance.md +3 -1
- package/data/harnesses/delivery/harness.json +2 -2
- package/data/harnesses/delivery/skills/documentation/scripts/doc-lint.mjs +1 -1
- package/data/harnesses/etna/agents/maintenance.md +3 -1
- package/data/harnesses/etna/harness.json +2 -2
- package/data/harnesses/etna/skills/documentation/scripts/doc-lint.mjs +1 -1
- package/lib/install/materialize.mjs +51 -57
- package/package.json +2 -2
- package/data/harnesses/apollo/.mcp.json +0 -8
- package/data/harnesses/apollo/.prettierignore +0 -29
- package/data/harnesses/apollo/.prettierrc.json +0 -3
- package/data/harnesses/apollo/.vscode/settings.json +0 -19
- package/data/harnesses/apollo/CLAUDE.md +0 -162
- package/data/harnesses/apollo/agents/bookkeeper.md +0 -28
- package/data/harnesses/apollo/agents/brainstorm.md +0 -144
- package/data/harnesses/apollo/agents/change-review.md +0 -251
- package/data/harnesses/apollo/agents/lld-mode.md +0 -58
- package/data/harnesses/apollo/agents/maintenance.md +0 -234
- package/data/harnesses/apollo/agents/performance-review.md +0 -223
- package/data/harnesses/apollo/agents/retro.md +0 -46
- package/data/harnesses/apollo/codex/agents/bookkeeper.toml +0 -26
- package/data/harnesses/apollo/codex/agents/brainstorm.toml +0 -142
- package/data/harnesses/apollo/codex/agents/change-review.toml +0 -249
- package/data/harnesses/apollo/codex/agents/lld-mode.toml +0 -52
- package/data/harnesses/apollo/codex/agents/maintenance.toml +0 -228
- package/data/harnesses/apollo/codex/agents/performance-review.toml +0 -222
- package/data/harnesses/apollo/codex/agents/retro.toml +0 -45
- package/data/harnesses/apollo/harness.json +0 -19
- package/data/harnesses/apollo/hooks/approved-packages.md +0 -44
- package/data/harnesses/apollo/hooks/awareness.mjs +0 -405
- package/data/harnesses/apollo/hooks/check-bookkeeping-clean.mjs +0 -19
- package/data/harnesses/apollo/hooks/check-changelog-presence.mjs +0 -57
- package/data/harnesses/apollo/hooks/check-completion-integrity.mjs +0 -71
- package/data/harnesses/apollo/hooks/check-ownership.mjs +0 -22
- package/data/harnesses/apollo/hooks/compliance.mjs +0 -457
- package/data/harnesses/apollo/hooks/hooks.json +0 -23
- package/data/harnesses/apollo/hooks/lib/frozen.mjs +0 -58
- package/data/harnesses/apollo/hooks/lib/ownership.mjs +0 -242
- package/data/harnesses/apollo/hooks/lib/state.mjs +0 -170
- package/data/harnesses/apollo/rules/changelog.md +0 -27
- package/data/harnesses/apollo/rules/database.md +0 -34
- package/data/harnesses/apollo/rules/frontend.md +0 -30
- package/data/harnesses/apollo/rules/general.md +0 -40
- package/data/harnesses/apollo/rules/nomenclature.md +0 -30
- package/data/harnesses/apollo/rules/pnpm.md +0 -57
- package/data/harnesses/apollo/rules/testing.md +0 -64
- package/data/harnesses/apollo/skills/boundary/SKILL.md +0 -75
- package/data/harnesses/apollo/skills/boundary/references/index.md +0 -16
- package/data/harnesses/apollo/skills/boundary/references/mechanisms.md +0 -99
- package/data/harnesses/apollo/skills/boundary/references/packs/async-messaging.md +0 -81
- package/data/harnesses/apollo/skills/boundary/references/packs/auth.md +0 -93
- package/data/harnesses/apollo/skills/boundary/references/packs/build-config-runtime.md +0 -93
- package/data/harnesses/apollo/skills/boundary/references/packs/cloudflare.md +0 -93
- package/data/harnesses/apollo/skills/boundary/references/packs/frontend.md +0 -93
- package/data/harnesses/apollo/skills/boundary/references/packs/generic-tail.md +0 -55
- package/data/harnesses/apollo/skills/boundary/references/packs/persistence.md +0 -93
- package/data/harnesses/apollo/skills/boundary/references/packs/wire-api.md +0 -87
- package/data/harnesses/apollo/skills/brainstorm/README.md +0 -56
- package/data/harnesses/apollo/skills/brainstorm/SKILL.md +0 -173
- package/data/harnesses/apollo/skills/brainstorm/references/doctrine.md +0 -98
- package/data/harnesses/apollo/skills/brainstorm/references/harvest.md +0 -86
- package/data/harnesses/apollo/skills/brainstorm/references/session-schema.md +0 -186
- package/data/harnesses/apollo/skills/brainstorm/scripts/detector.mjs +0 -460
- package/data/harnesses/apollo/skills/design/SKILL.md +0 -121
- package/data/harnesses/apollo/skills/design/components/charts.md +0 -76
- package/data/harnesses/apollo/skills/design/components/collections.md +0 -132
- package/data/harnesses/apollo/skills/design/components/feedback.md +0 -47
- package/data/harnesses/apollo/skills/design/components/hooks.md +0 -35
- package/data/harnesses/apollo/skills/design/components/index.md +0 -143
- package/data/harnesses/apollo/skills/design/components/inputs.md +0 -327
- package/data/harnesses/apollo/skills/design/components/layout.md +0 -52
- package/data/harnesses/apollo/skills/design/components/media.md +0 -66
- package/data/harnesses/apollo/skills/design/components/motion.md +0 -82
- package/data/harnesses/apollo/skills/design/components/navigation.md +0 -29
- package/data/harnesses/apollo/skills/design/components/overlays.md +0 -72
- package/data/harnesses/apollo/skills/design/components/setup.md +0 -40
- package/data/harnesses/apollo/skills/design/components/typography.md +0 -46
- package/data/harnesses/apollo/skills/design/components/utils.md +0 -37
- package/data/harnesses/apollo/skills/design/data/blueprints/browse.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/creation-flow.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/dashboard.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/grid.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/queue.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/record-detail.md +0 -38
- package/data/harnesses/apollo/skills/design/data/blueprints/settings.md +0 -38
- package/data/harnesses/apollo/skills/design/data/charts/census.csv +0 -58
- package/data/harnesses/apollo/skills/design/data/checklists/browse.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/creation-flow.md +0 -20
- package/data/harnesses/apollo/skills/design/data/checklists/dashboard.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/grid.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/queue.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/record-detail.md +0 -21
- package/data/harnesses/apollo/skills/design/data/checklists/settings.md +0 -21
- package/data/harnesses/apollo/skills/design/data/chrome/board-column.md +0 -68
- package/data/harnesses/apollo/skills/design/data/chrome/data-table.md +0 -63
- package/data/harnesses/apollo/skills/design/data/chrome/side-panel.md +0 -60
- package/data/harnesses/apollo/skills/design/data/chrome/sidebar.md +0 -78
- package/data/harnesses/apollo/skills/design/data/chrome/stat-cards.md +0 -62
- package/data/harnesses/apollo/skills/design/data/chrome/topbar.md +0 -65
- package/data/harnesses/apollo/skills/design/data/elevation/ant-design-directional-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/apple-liquid-glass-material.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/atlassian-surface-shadow-pairing.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/fluent-2-key-ambient-ramp.md +0 -20
- package/data/harnesses/apollo/skills/design/data/elevation/github-primer-sparing-shadow.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/ibm-carbon-layer-and-border.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/linear-dark-surface-ladder.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/material-2-key-ambient-dp-ramp.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/material-3-tonal-elevation.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/neobrutalist-hard-offset.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/neumorphic-soft-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/notion-warm-minimal-hairline.md +0 -17
- package/data/harnesses/apollo/skills/design/data/elevation/polaris-elevation-inset-bevel.md +0 -21
- package/data/harnesses/apollo/skills/design/data/elevation/radix-themes-alpha-ring-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/shadcn-neutral-derived-radius.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/stripe-brand-tinted-dual-shadow.md +0 -18
- package/data/harnesses/apollo/skills/design/data/elevation/tailwind-default-utility-scale.md +0 -19
- package/data/harnesses/apollo/skills/design/data/elevation/vercel-geist-shadow-as-border.md +0 -20
- package/data/harnesses/apollo/skills/design/data/iconography.md +0 -199
- package/data/harnesses/apollo/skills/design/data/motion/accordion-expand.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/destructive-hold-confirm.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/drag-dismiss-momentum.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/empty-state-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/hover-lift.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/modal-center-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/number-ticker-roll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/onboarding-bounce.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/panel-slide.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/press-feedback.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/progress-linear-loop.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/route-crossfade.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/rubber-band-overscroll.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/skeleton-shimmer.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/stagger-arrive.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/toast-enter-stack.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/tooltip-chain-instant.md +0 -18
- package/data/harnesses/apollo/skills/design/data/motion/trigger-anchored-reveal.md +0 -18
- package/data/harnesses/apollo/skills/design/data/tells.csv +0 -34
- package/data/harnesses/apollo/skills/design/data/voices/bright-collaborator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/direct-operator.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/earnest-helper.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/editorial-composed.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/quiet-concierge.md +0 -29
- package/data/harnesses/apollo/skills/design/data/voices/warm-guide.md +0 -29
- package/data/harnesses/apollo/skills/design/references/compose.md +0 -23
- package/data/harnesses/apollo/skills/design/references/content.md +0 -28
- package/data/harnesses/apollo/skills/design/references/emission.md +0 -21
- package/data/harnesses/apollo/skills/design/references/existing-apps.md +0 -27
- package/data/harnesses/apollo/skills/design/references/foundations.md +0 -57
- package/data/harnesses/apollo/skills/design/references/intake.md +0 -40
- package/data/harnesses/apollo/skills/design/references/object-pass.md +0 -24
- package/data/harnesses/apollo/skills/design/references/ship-gate.md +0 -29
- package/data/harnesses/apollo/skills/design/references/ux-patterns/Readme.md +0 -195
- package/data/harnesses/apollo/skills/design/references/ux-patterns/ai-layer.md +0 -49
- package/data/harnesses/apollo/skills/design/references/ux-patterns/attributes-lifecycle.md +0 -43
- package/data/harnesses/apollo/skills/design/references/ux-patterns/container-choice.md +0 -44
- package/data/harnesses/apollo/skills/design/references/ux-patterns/creation-paths.md +0 -46
- package/data/harnesses/apollo/skills/design/references/ux-patterns/dashboards.md +0 -42
- package/data/harnesses/apollo/skills/design/references/ux-patterns/modes.md +0 -42
- package/data/harnesses/apollo/skills/design/references/ux-patterns/object-model.md +0 -46
- package/data/harnesses/apollo/skills/design/references/ux-patterns/page-archetype.md +0 -48
- package/data/harnesses/apollo/skills/design/references/ux-patterns/promotion-demotion.md +0 -37
- package/data/harnesses/apollo/skills/design/references/ux-patterns/settings.md +0 -42
- package/data/harnesses/apollo/skills/design/references/ux-patterns/standard-pages.md +0 -46
- package/data/harnesses/apollo/skills/design/references/ux-patterns/state-matrix.md +0 -41
- package/data/harnesses/apollo/skills/design/references/ux-patterns/table-mechanics.md +0 -48
- package/data/harnesses/apollo/skills/design/references/ux-patterns/verbs.md +0 -45
- package/data/harnesses/apollo/skills/design/references/ux-patterns/viewer-context.md +0 -40
- package/data/harnesses/apollo/skills/design/scripts/README-validator.md +0 -27
- package/data/harnesses/apollo/skills/design/scripts/select-chart.mjs +0 -622
- package/data/harnesses/apollo/skills/design/scripts/validate-design-md.mjs +0 -1198
- package/data/harnesses/apollo/skills/documentation/SKILL.md +0 -135
- package/data/harnesses/apollo/skills/documentation/references/examples.md +0 -279
- package/data/harnesses/apollo/skills/documentation/references/frontmatter.md +0 -44
- package/data/harnesses/apollo/skills/documentation/references/instruction-style.md +0 -50
- package/data/harnesses/apollo/skills/documentation/references/style-guide.md +0 -384
- package/data/harnesses/apollo/skills/documentation/references/untemplated.md +0 -38
- package/data/harnesses/apollo/skills/documentation/scripts/doc-lint.mjs +0 -140
- package/data/harnesses/apollo/skills/documentation/templates/Readme.md +0 -35
- package/data/harnesses/apollo/skills/documentation/templates/api-reference.md +0 -20
- package/data/harnesses/apollo/skills/documentation/templates/architecture-decision.md +0 -121
- package/data/harnesses/apollo/skills/documentation/templates/backlog.md +0 -33
- package/data/harnesses/apollo/skills/documentation/templates/behavioral-checklist.md +0 -81
- package/data/harnesses/apollo/skills/documentation/templates/bookkeeping.md +0 -18
- package/data/harnesses/apollo/skills/documentation/templates/changelog-entry.md +0 -57
- package/data/harnesses/apollo/skills/documentation/templates/changelog-index.md +0 -41
- package/data/harnesses/apollo/skills/documentation/templates/docs-readme.md +0 -72
- package/data/harnesses/apollo/skills/documentation/templates/domain-model.md +0 -30
- package/data/harnesses/apollo/skills/documentation/templates/environment-registry.md +0 -15
- package/data/harnesses/apollo/skills/documentation/templates/feature.md +0 -150
- package/data/harnesses/apollo/skills/documentation/templates/glossary.md +0 -11
- package/data/harnesses/apollo/skills/documentation/templates/implementation-map.md +0 -42
- package/data/harnesses/apollo/skills/documentation/templates/journal.md +0 -13
- package/data/harnesses/apollo/skills/documentation/templates/memory-main.md +0 -25
- package/data/harnesses/apollo/skills/documentation/templates/migration-runbook.md +0 -34
- package/data/harnesses/apollo/skills/documentation/templates/non-goals.md +0 -11
- package/data/harnesses/apollo/skills/documentation/templates/operations-procedure.md +0 -36
- package/data/harnesses/apollo/skills/documentation/templates/plan.md +0 -88
- package/data/harnesses/apollo/skills/documentation/templates/protected-files.md +0 -37
- package/data/harnesses/apollo/skills/documentation/templates/root-readme.md +0 -104
- package/data/harnesses/apollo/skills/documentation/templates/security-overview.md +0 -27
- package/data/harnesses/apollo/skills/documentation/templates/structure.md +0 -65
- package/data/harnesses/apollo/skills/documentation/templates/system-overview.md +0 -32
- package/data/harnesses/apollo/skills/documentation/templates/testing-strategy.md +0 -29
- package/data/harnesses/apollo/skills/schema-design/SKILL.md +0 -141
- package/data/harnesses/apollo/skills/test/SKILL.md +0 -104
- package/data/harnesses/apollo/skills/testing/SKILL.md +0 -166
- package/data/harnesses/apollo/skills/workflow-mapper/SKILL.md +0 -451
- package/data/harnesses/apollo/skills/workflow-mapper/references/patterns.md +0 -214
- /package/data/harnesses/{apollo → code}/docs/README.md +0 -0
- /package/data/harnesses/{apollo → code}/docs/history/CHANGELOG.md +0 -0
- /package/data/harnesses/{apollo → code}/docs/history/backlog.md +0 -0
- /package/data/harnesses/{apollo → code}/docs/memory/main.md +0 -0
- /package/data/harnesses/{apollo → code}/docs/structure.md +0 -0
- /package/data/harnesses/{apollo → code}/rules/cloudflare.md +0 -0
|
@@ -1,327 +0,0 @@
|
|
|
1
|
-
# Input Components
|
|
2
|
-
|
|
3
|
-
> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
|
|
4
|
-
|
|
5
|
-
## Shared Props
|
|
6
|
-
|
|
7
|
-
Enhanced form components support these props where applicable:
|
|
8
|
-
|
|
9
|
-
| Prop | Type | Description |
|
|
10
|
-
| --- | --- | --- |
|
|
11
|
-
| `value` | `any` | Controlled value |
|
|
12
|
-
| `onChange` | `(value) => void` | Change handler (text inputs receive the event) |
|
|
13
|
-
| `onSave` | `(value) => void` | Commit on blur/Enter/selection |
|
|
14
|
-
| `disabled` | `boolean` | Prevents interaction |
|
|
15
|
-
| `readOnly` | `boolean` | Display-only mode |
|
|
16
|
-
| `inline` | `boolean` | Click-to-edit mode |
|
|
17
|
-
|
|
18
|
-
## Cell
|
|
19
|
-
|
|
20
|
-
Compound component for form field layout with label, content, and helpers.
|
|
21
|
-
|
|
22
|
-
**Props:** `mode` [default|inline], `size` [sm|md|lg], `editable`, `labelPosition` [top|left], `disabled`
|
|
23
|
-
|
|
24
|
-
**Sub-components:** `Cell.Label`, `Cell.Content`, `Cell.Prefix`, `Cell.Suffix`, `Cell.Stepper`, `Cell.Helper`, `Cell.Error`
|
|
25
|
-
|
|
26
|
-
```tsx
|
|
27
|
-
<Cell mode="default" labelPosition="top">
|
|
28
|
-
<Cell.Label>Email</Cell.Label>
|
|
29
|
-
<Cell.Content>
|
|
30
|
-
<Input value={email} onChange={(e) => setEmail(e.target.value)} />
|
|
31
|
-
</Cell.Content>
|
|
32
|
-
<Cell.Helper>We'll never share your email</Cell.Helper>
|
|
33
|
-
</Cell>
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
## Input
|
|
37
|
-
|
|
38
|
-
Text input with optional regex validation; commits on blur via `onSave`.
|
|
39
|
-
|
|
40
|
-
**Props:** `onSave`, `validator`, `onValidationError`, `hideBorder`
|
|
41
|
-
|
|
42
|
-
```tsx
|
|
43
|
-
<Input
|
|
44
|
-
value={name}
|
|
45
|
-
onChange={(e) => setName(e.target.value)}
|
|
46
|
-
onSave={saveName}
|
|
47
|
-
placeholder="Enter name"
|
|
48
|
-
/>
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## NumberInput
|
|
52
|
-
|
|
53
|
-
Numeric input with constraints; commits on blur/Enter, Escape reverts.
|
|
54
|
-
|
|
55
|
-
**Props:** `min`, `max`, `step`, `allowDecimals`, `allowNegative`, `onSave`, `onValidationError`, `hideBorder`
|
|
56
|
-
|
|
57
|
-
```tsx
|
|
58
|
-
<NumberInput value={count} onSave={setCount} min={0} max={100} step={1} />
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## Textarea
|
|
62
|
-
|
|
63
|
-
Multi-line text input. Controlled when `value` is set; otherwise `defaultValue` seeds an internal draft and Escape resets it. Blur and Cmd/Ctrl+Enter commit via `onSave`.
|
|
64
|
-
|
|
65
|
-
**Props:** `onSave`, `hideBorder`
|
|
66
|
-
|
|
67
|
-
```tsx
|
|
68
|
-
<Textarea
|
|
69
|
-
value={description}
|
|
70
|
-
onChange={(e) => setDescription(e.target.value)}
|
|
71
|
-
onSave={saveDescription}
|
|
72
|
-
/>
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## Checkbox
|
|
76
|
-
|
|
77
|
-
Boolean toggle supporting both `value`/`onChange` and `checked`/`onCheckedChange` APIs.
|
|
78
|
-
|
|
79
|
-
**Props:** `checked`, `onCheckedChange`, `value`, `onChange`, `indeterminate`
|
|
80
|
-
|
|
81
|
-
```tsx
|
|
82
|
-
<Checkbox checked={agreed} onCheckedChange={setAgreed} />
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
## Switch
|
|
86
|
-
|
|
87
|
-
Toggle switch supporting both `value`/`onChange` and `checked`/`onCheckedChange` APIs.
|
|
88
|
-
|
|
89
|
-
**Props:** `checked`, `onCheckedChange`, `value`, `onChange`, `size` [sm|default]
|
|
90
|
-
|
|
91
|
-
```tsx
|
|
92
|
-
<Switch checked={enabled} onCheckedChange={setEnabled} />
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
## Select
|
|
96
|
-
|
|
97
|
-
Compound select with search, multi-select, and async loading. `onChange`/`onSave` receive the selected option object(s), not raw values.
|
|
98
|
-
|
|
99
|
-
**Props:** `options`, `mode` [single|multi], `clearable`, `maxSelections`, `selectionIndicator` [checkbox|check-end|bg-only], `compact`, `loading`, `onSearch`, `onLoadMore`, `debounceMs`
|
|
100
|
-
|
|
101
|
-
**Sub-components:** `Select.Trigger` (`display` [tags|comma|count]), `Select.Content` (`searchable`, `searchPlaceholder`, `showSelectAll`, `maxHeight`), `Select.Item`, `Select.Search`, `Select.Loading`, `Select.Empty`, `Select.SelectAll`
|
|
102
|
-
|
|
103
|
-
```tsx
|
|
104
|
-
<Select
|
|
105
|
-
options={statusOptions}
|
|
106
|
-
value={status}
|
|
107
|
-
onChange={(opt) => setStatus(opt?.value)}
|
|
108
|
-
>
|
|
109
|
-
<Select.Trigger display="tags" />
|
|
110
|
-
<Select.Content searchable>
|
|
111
|
-
<Select.Item value="active">Active</Select.Item>
|
|
112
|
-
</Select.Content>
|
|
113
|
-
</Select>
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
## Option
|
|
117
|
-
|
|
118
|
-
Standalone option display chip (exported from the `select` subpath).
|
|
119
|
-
|
|
120
|
-
**Props:** `variant` [text|pill|outline|ghost|soft], `color`, `prefix` ["dot"|ReactNode]
|
|
121
|
-
|
|
122
|
-
```tsx
|
|
123
|
-
<Option variant="pill" color="#ef4444" prefix="dot">
|
|
124
|
-
High Priority
|
|
125
|
-
</Option>
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
## DatePicker
|
|
129
|
-
|
|
130
|
-
Date selection with calendar popover; accepts `Date`, ISO string, or null values.
|
|
131
|
-
|
|
132
|
-
**Props:** `onSave`, `inline`, `relativeFormat`, `formatPattern`, `showIcon`, `captionLayout` [label|dropdown|dropdown-months|dropdown-years], `buttonVariant`, `showOutsideDays`, `numberOfMonths`, `fromYear`, `toYear`, `fromDate`, `toDate`, `weekStartsOn`, `compact`
|
|
133
|
-
|
|
134
|
-
```tsx
|
|
135
|
-
<DatePicker
|
|
136
|
-
value={date}
|
|
137
|
-
onChange={setDate}
|
|
138
|
-
onSave={handleSave}
|
|
139
|
-
relativeFormat
|
|
140
|
-
placeholder="Pick a date"
|
|
141
|
-
/>
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
## Slider
|
|
145
|
-
|
|
146
|
-
Range input with optional value display.
|
|
147
|
-
|
|
148
|
-
**Props:** `min`, `max`, `step`, `defaultValue`, `onSave`, `inline`, `showValue`, `showMinMax`, `formatValue`, `compact`
|
|
149
|
-
|
|
150
|
-
```tsx
|
|
151
|
-
<Slider
|
|
152
|
-
value={volume}
|
|
153
|
-
onChange={setVolume}
|
|
154
|
-
onSave={handleSave}
|
|
155
|
-
min={0}
|
|
156
|
-
max={100}
|
|
157
|
-
/>
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
## Rating
|
|
161
|
-
|
|
162
|
-
Icon-based rating input.
|
|
163
|
-
|
|
164
|
-
**Props:** `maxRating`, `size`, `icon` [Star|Heart|ThumbsUp|Circle|Flame|Zap|Trophy|Diamond], `allowHalf`, `showValue`, `onSave`, `inline`, `compact`
|
|
165
|
-
|
|
166
|
-
```tsx
|
|
167
|
-
<Rating
|
|
168
|
-
value={rating}
|
|
169
|
-
onChange={setRating}
|
|
170
|
-
onSave={handleSave}
|
|
171
|
-
maxRating={5}
|
|
172
|
-
allowHalf
|
|
173
|
-
/>
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
## Button
|
|
177
|
-
|
|
178
|
-
Standard action button.
|
|
179
|
-
|
|
180
|
-
**Props:** `variant` [default|destructive|outline|secondary|ghost|link], `size` [default|sm|lg|icon], `asChild`
|
|
181
|
-
|
|
182
|
-
```tsx
|
|
183
|
-
<Button variant="outline" size="sm">
|
|
184
|
-
Cancel
|
|
185
|
-
</Button>
|
|
186
|
-
```
|
|
187
|
-
|
|
188
|
-
## Calendar
|
|
189
|
-
|
|
190
|
-
Calendar grid built on `react-day-picker`; accepts all `DayPicker` props. Also exports `CalendarDayButton`.
|
|
191
|
-
|
|
192
|
-
**Props:** `mode` [single|multiple|range], `selected`, `onSelect`, `captionLayout` [label|dropdown|dropdown-months|dropdown-years], `numberOfMonths`, `showOutsideDays`, `buttonVariant`
|
|
193
|
-
|
|
194
|
-
```tsx
|
|
195
|
-
<Calendar
|
|
196
|
-
mode="single"
|
|
197
|
-
selected={date}
|
|
198
|
-
onSelect={setDate}
|
|
199
|
-
captionLayout="dropdown"
|
|
200
|
-
/>
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
## DateRangePicker
|
|
204
|
-
|
|
205
|
-
Date range selection with calendar popover and optional presets sidebar; `onSave` fires only when both ends are selected, and closing with a partial selection reverts.
|
|
206
|
-
|
|
207
|
-
**Props:** `onSave`, `inline`, `showPresets`, `presets`, `relativeFormat`, `formatPattern`, `showIcon`, `captionLayout`, `numberOfMonths`, `fromDate`, `toDate`, `weekStartsOn`, `compact`
|
|
208
|
-
|
|
209
|
-
```tsx
|
|
210
|
-
<DateRangePicker
|
|
211
|
-
value={range}
|
|
212
|
-
onChange={setRange}
|
|
213
|
-
onSave={handleSave}
|
|
214
|
-
showPresets
|
|
215
|
-
/>
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
## IconPicker
|
|
219
|
-
|
|
220
|
-
Searchable Lucide icon picker popover; also exports `Icon` for rendering a picked icon by name.
|
|
221
|
-
|
|
222
|
-
**Props:** `value`, `defaultValue`, `onValueChange`, `open`, `onOpenChange`, `searchable`, `searchPlaceholder`, `triggerPlaceholder`, `iconsList`, `categorized`, `modal`
|
|
223
|
-
|
|
224
|
-
```tsx
|
|
225
|
-
<IconPicker value={iconName} onValueChange={setIconName} />
|
|
226
|
-
```
|
|
227
|
-
|
|
228
|
-
## InputOTP
|
|
229
|
-
|
|
230
|
-
One-time code input built on `input-otp`.
|
|
231
|
-
|
|
232
|
-
**Props:** `maxLength`, `value`, `onChange`, `containerClassName`
|
|
233
|
-
|
|
234
|
-
**Sub-components:** `InputOTPGroup`, `InputOTPSlot` (`index` required), `InputOTPSeparator`
|
|
235
|
-
|
|
236
|
-
```tsx
|
|
237
|
-
<InputOTP maxLength={4} value={code} onChange={setCode}>
|
|
238
|
-
<InputOTPGroup>
|
|
239
|
-
<InputOTPSlot index={0} />
|
|
240
|
-
<InputOTPSlot index={1} />
|
|
241
|
-
<InputOTPSlot index={2} />
|
|
242
|
-
<InputOTPSlot index={3} />
|
|
243
|
-
</InputOTPGroup>
|
|
244
|
-
</InputOTP>
|
|
245
|
-
```
|
|
246
|
-
|
|
247
|
-
## MediaFilePicker
|
|
248
|
-
|
|
249
|
-
File upload with drag-and-drop dialog and previews. `value` is `MediaFileOption` object(s): `{ value, label, type, previewUrl, size, file }`.
|
|
250
|
-
|
|
251
|
-
**Props:** `mode` [single|multi], `maxFiles`, `maxFileSize`, `acceptedTypes`, `viewMode` [card|list], `display` [thumbnails|comma|tags], `renderPlainText`, `renderComponent`
|
|
252
|
-
|
|
253
|
-
```tsx
|
|
254
|
-
<MediaFilePicker value={files} onChange={setFiles} mode="multi" maxFiles={5} />
|
|
255
|
-
```
|
|
256
|
-
|
|
257
|
-
## NativeSelect
|
|
258
|
-
|
|
259
|
-
Radix-based select primitive family on the `native-select` subpath (distinct from the compound `Select` above); exported symbols are named `Select*`.
|
|
260
|
-
|
|
261
|
-
**Props:** `value`, `onValueChange`, `defaultValue`, `disabled` (root passes through all Radix Select props)
|
|
262
|
-
|
|
263
|
-
**Sub-components:** `Select`, `SelectTrigger` (`size` [sm|default]), `SelectValue`, `SelectContent`, `SelectGroup`, `SelectLabel`, `SelectItem`
|
|
264
|
-
|
|
265
|
-
```tsx
|
|
266
|
-
<Select value={fruit} onValueChange={setFruit}>
|
|
267
|
-
<SelectTrigger>
|
|
268
|
-
<SelectValue placeholder="Pick one" />
|
|
269
|
-
</SelectTrigger>
|
|
270
|
-
<SelectContent>
|
|
271
|
-
<SelectItem value="apple">Apple</SelectItem>
|
|
272
|
-
</SelectContent>
|
|
273
|
-
</Select>
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
## RadioGroup
|
|
277
|
-
|
|
278
|
-
Radix radio group with card and segmented-control variants.
|
|
279
|
-
|
|
280
|
-
**Props:** `value`, `defaultValue`, `onValueChange`
|
|
281
|
-
|
|
282
|
-
**Sub-components:** `RadioGroupItem`, `RadioGroupCard` (`variant` [card|list|chip]), `RadioGroupCardItem`, `RadioGroupLabel` (`clickable`), `RadioGroupDescription`, `RadioGroupItemHeader/Title/Subtitle/Description/Content/Indicator`, `RadioGroupSegmented`, `RadioGroupSegmentedItem` (`icon`)
|
|
283
|
-
|
|
284
|
-
```tsx
|
|
285
|
-
<RadioGroup value={plan} onValueChange={setPlan}>
|
|
286
|
-
<RadioGroupCard>
|
|
287
|
-
<RadioGroupItem value="free" />
|
|
288
|
-
<RadioGroupLabel clickable>Free</RadioGroupLabel>
|
|
289
|
-
</RadioGroupCard>
|
|
290
|
-
<RadioGroupCard>
|
|
291
|
-
<RadioGroupItem value="pro" />
|
|
292
|
-
<RadioGroupLabel clickable>Pro</RadioGroupLabel>
|
|
293
|
-
</RadioGroupCard>
|
|
294
|
-
</RadioGroup>
|
|
295
|
-
```
|
|
296
|
-
|
|
297
|
-
## Toggle
|
|
298
|
-
|
|
299
|
-
Pressed-state button supporting both `value`/`onChange` and `pressed`/`onPressedChange` APIs.
|
|
300
|
-
|
|
301
|
-
**Props:** `pressed`, `onPressedChange`, `value`, `onChange`, `variant` [default|outline|primary], `size` [default|sm|lg], `density` [compact|comfortable|spacious]
|
|
302
|
-
|
|
303
|
-
```tsx
|
|
304
|
-
<Toggle pressed={isBold} onPressedChange={setIsBold} variant="outline">
|
|
305
|
-
B
|
|
306
|
-
</Toggle>
|
|
307
|
-
```
|
|
308
|
-
|
|
309
|
-
## ToggleGroup
|
|
310
|
-
|
|
311
|
-
Group of toggles with single or multiple selection; `variant`/`size`/`density` cascade to items.
|
|
312
|
-
|
|
313
|
-
**Props:** `type` [single|multiple], `value`, `defaultValue`, `onValueChange`, `variant` [default|outline|primary], `size` [default|sm|lg], `density` [compact|comfortable|spacious]
|
|
314
|
-
|
|
315
|
-
**Sub-components:** `ToggleGroupItem`
|
|
316
|
-
|
|
317
|
-
```tsx
|
|
318
|
-
<ToggleGroup
|
|
319
|
-
type="single"
|
|
320
|
-
value={align}
|
|
321
|
-
onValueChange={setAlign}
|
|
322
|
-
variant="outline"
|
|
323
|
-
>
|
|
324
|
-
<ToggleGroupItem value="left">Left</ToggleGroupItem>
|
|
325
|
-
<ToggleGroupItem value="right">Right</ToggleGroupItem>
|
|
326
|
-
</ToggleGroup>
|
|
327
|
-
```
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
# Layout Components
|
|
2
|
-
|
|
3
|
-
> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
|
|
4
|
-
|
|
5
|
-
Content structure and containers. Import each from its own subpath, e.g. `import { Card, CardContent } from "@nurix/components/card";`.
|
|
6
|
-
|
|
7
|
-
## Statistics
|
|
8
|
-
|
|
9
|
-
Compound schema for dashboard stat / KPI cards — compose only the regions a card needs. Import from `@nurix/components/statistics`. Sub-components throw if rendered outside `<Statistics>`. The wrapper is `bare` (invisible — just a flex column) by default so consumers own its look; opt into a surface with `variant`.
|
|
10
|
-
|
|
11
|
-
**Sub-components:** `StatisticsHeader`, `StatisticsIcon`, `StatisticsHeading`, `StatisticsTitle`, `StatisticsDescription`, `StatisticsActions`, `StatisticsSection`, `StatisticsMetric`, `StatisticsValue`, `StatisticsUnit`, `StatisticsTrend`, `StatisticsComparison`, `StatisticsGroup`, `StatisticsVisual`, `StatisticsGauge`, `StatisticsProgress`, `StatisticsSegmentedBar`, `StatisticsSparkline`, `StatisticsLegend`, `StatisticsLegendItem`, `StatisticsContent`, `StatisticsFooter`, `StatisticsCaption`, `StatisticsLink`
|
|
12
|
-
|
|
13
|
-
**Statistics props:** `size` [sm|md|lg] (headline value scale), `variant` [bare|card|elevated|outline|soft|ghost] (default `bare` draws nothing; the rest add padding + surface), `accent` [none|primary|success|warning|danger|info], `gap` [none|sm|md|lg], `justify` [start|center|end|between|around|evenly], `comparisonLabel`
|
|
14
|
-
**StatisticsTitle:** `size` [sm|md|lg], `align` [left|center|right]
|
|
15
|
-
**StatisticsTrend:** `value:number`, `direction?` [up|down], `invert?` (flip color, keep arrow), `pill?`, `format?:(n)=>string`
|
|
16
|
-
**StatisticsIcon:** `variant` [default|primary|success|warning|danger|info], `tone` [soft|solid|outline|plain], `size` [xs|sm|md|lg|xl|oversized] (oversized bleeds out the top-right corner — needs a clipping surface variant), `shape` [circle|rounded|square]
|
|
17
|
-
**StatisticsGauge:** `value` (0–100), `sweep?` [180|270], `size?`, `thickness?`, `trackColor?`, `fillColor?` — renders children centered in the dial
|
|
18
|
-
**StatisticsSection:** `gap`, `justify` — a vertical group; nest two (top + bottom) in a `justify="between"` card to pin clusters to the top and bottom. `StatisticsVisual` is a generic slot: drop in a built-in visual or any chart (`PieGraph`, `LineGraph`, `BarGraph`, `ProgressBar`).
|
|
19
|
-
|
|
20
|
-
```tsx
|
|
21
|
-
<Statistics variant="card" comparisonLabel="vs last week">
|
|
22
|
-
<StatisticsHeader>
|
|
23
|
-
<StatisticsHeading>
|
|
24
|
-
<StatisticsTitle>Revenue</StatisticsTitle>
|
|
25
|
-
</StatisticsHeading>
|
|
26
|
-
<StatisticsActions>
|
|
27
|
-
<StatisticsIcon variant="success">{/* icon */}</StatisticsIcon>
|
|
28
|
-
</StatisticsActions>
|
|
29
|
-
</StatisticsHeader>
|
|
30
|
-
<StatisticsMetric>
|
|
31
|
-
<StatisticsValue>$21,434</StatisticsValue>
|
|
32
|
-
<StatisticsTrend value={-12.2} invert pill />
|
|
33
|
-
<StatisticsComparison />
|
|
34
|
-
</StatisticsMetric>
|
|
35
|
-
</Statistics>
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## Other layout components
|
|
39
|
-
|
|
40
|
-
- `accordion` — Accordion, AccordionItem, AccordionTrigger, AccordionContent
|
|
41
|
-
- `aspect-ratio` — AspectRatio
|
|
42
|
-
- `bento-grid` — BentoGrid, BentoCard
|
|
43
|
-
- `card` — Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction, CardImage
|
|
44
|
-
- `carousel` — Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext
|
|
45
|
-
- `collapsible` — Collapsible, CollapsibleTrigger, CollapsibleContent
|
|
46
|
-
- `collapsible-panel` — CollapsiblePanel
|
|
47
|
-
- `editable-card` — EditableCard, EditableCardHeader, EditableCardBody, EditableCardFooter
|
|
48
|
-
- `resizable` — ResizablePanelGroup, ResizablePanel, ResizableHandle
|
|
49
|
-
- `scroll-area` — ScrollArea, ScrollBar
|
|
50
|
-
- `separator` — Separator
|
|
51
|
-
- `separator-with-text` — SeparatorWithText
|
|
52
|
-
- `sortable` — Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
# Media Components
|
|
2
|
-
|
|
3
|
-
> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
|
|
4
|
-
|
|
5
|
-
Icons, avatars, and media display; import each from its kebab-case subpath, e.g. `import { Avatar } from "@nurix/components/avatar"`.
|
|
6
|
-
|
|
7
|
-
## Avatar
|
|
8
|
-
|
|
9
|
-
Wraps `facehash` (deterministic identicon fallback) with default sizing.
|
|
10
|
-
|
|
11
|
-
**Props:** `size` (number, default 32) — sets both `width`/`height` and drives the round mask
|
|
12
|
-
|
|
13
|
-
**Sub-components:** `AvatarImage`, `AvatarFallback` (`colors` — palette forwarded to facehash for its generated background, defaults to a 10-color set)
|
|
14
|
-
|
|
15
|
-
```tsx
|
|
16
|
-
<Avatar size={40}>
|
|
17
|
-
<AvatarImage src="/photo.jpg" />
|
|
18
|
-
<AvatarFallback name="jane@example.com" />
|
|
19
|
-
</Avatar>
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## CopyButton
|
|
23
|
-
|
|
24
|
-
Click-to-copy button with a check/copy icon swap.
|
|
25
|
-
|
|
26
|
-
**Props:** `value`, `onCopy`, `copiedDuration` (ms before reverting, default 2000), `variant` [default|outline], `size` [sm|default|lg]
|
|
27
|
-
|
|
28
|
-
```tsx
|
|
29
|
-
<CopyButton value={apiKey} size="sm" />
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## NurixLogo
|
|
33
|
-
|
|
34
|
-
Official Nurix wordmark, inline SVG.
|
|
35
|
-
|
|
36
|
-
**Props:** `type` [color|monochrome] (color = ink + blue X kicker; monochrome = every path in `color`, for dark/animated backdrops), `height` (number|string, sizes via intrinsic aspect ratio), `color` (ink, default `#222222`), `accentColor` (X-kicker, `type="color"` only, default `#4660EC`)
|
|
37
|
-
|
|
38
|
-
```tsx
|
|
39
|
-
<NurixLogo type="monochrome" color="currentColor" height={20} />
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
## ThemeToggler
|
|
43
|
-
|
|
44
|
-
Light/dark toggle with a directional wipe reveal; cycles light → dark → system → light and persists to `localStorage`.
|
|
45
|
-
|
|
46
|
-
**Props:** `style` [icon|text-icon|icon-text], `size` [sm|md|lg], `duration` (ms, default 700)
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
<ThemeToggler style="icon-text" size="md" />
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## ViewSwitcher
|
|
53
|
-
|
|
54
|
-
Segmented control for switching a view-type projection (e.g. table/card), with an animated sliding background.
|
|
55
|
-
|
|
56
|
-
**Props:** `value`/`onChange` (controlled), `defaultValue` (default `"table"`), `options` (`{ value, label, icon }[]`, defaults to Table/Card), `size` [sm|md|lg]
|
|
57
|
-
|
|
58
|
-
```tsx
|
|
59
|
-
<ViewSwitcher value={view} onChange={setView} size="sm" />
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## Other Components
|
|
63
|
-
|
|
64
|
-
- `icon-renderer` + `icons-data` — `IconRenderer`: `icon`/`family`/`size` [sm|md|lg|xl]/`color`; resolves a remote SVG from the configured icon CDN (`<cdn>/fa/<family>/<icon>.svg`) tinted via CSS filter, with a built-in fallback icon on load error. `icons-data` exports `iconsData` — `{ name, categories, tags }[]` — for building icon pickers over the local Lucide set (distinct from the remote family above).
|
|
65
|
-
- `live-waveform` + `mic-icon` — `LiveWaveform`: canvas mic-level visualizer; `active`, `processing`, `mode` [static|history|frequency], `barWidth`/`barGap`/`barRadius`/`barColor`, `sensitivity`, `onStreamReady`/`onStreamEnd`/`onError` (draft API — most props are untyped passthroughs). `MicIcon`: animated mic glyph with an imperative ref (`startAnimation`/`stopAnimation`); `size`, `duration`, `isAnimated`.
|
|
66
|
-
- `shine-border` — `ShineBorder`: absolutely-positioned animated gradient border overlay (parent needs `position: relative`); `borderWidth`, `duration` (seconds), `shineColor` (string or array, cycled through a radial gradient sweep)
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
# Motion Components
|
|
2
|
-
|
|
3
|
-
> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
|
|
4
|
-
|
|
5
|
-
Animation primitives built on the `motion` library (`motion-primitives/*`) plus a small `animate-ui/*` layer. Compose sparingly — decorative and low-frequency surfaces only; never on data or on actions users repeat dozens of times a day. Import each from its own subpath, e.g. `import { AnimatedGroup } from "@nurix/components/motion-primitives/animated-group"`.
|
|
6
|
-
|
|
7
|
-
## Animated numbers
|
|
8
|
-
|
|
9
|
-
Tick-up numerals that render as plain text until JS is ready (no layout shift, no flash of `0`).
|
|
10
|
-
|
|
11
|
-
- `motion-primitives/animated-number` — `AnimatedNumber`: spring-interpolated count-up; `value`, `springOptions`, `as` (element/component, default `span`)
|
|
12
|
-
- `motion-primitives/sliding-number` — `SlidingNumber`: per-digit slot-machine roll; `value`, `padStart`, `decimalSeparator`
|
|
13
|
-
|
|
14
|
-
```tsx
|
|
15
|
-
<AnimatedNumber value={total} springOptions={{ bounce: 0.2 }} />
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
## Stagger entrance
|
|
19
|
-
|
|
20
|
-
- `motion-primitives/animated-group` — `AnimatedGroup`: staggers children in on mount/update. **Props:** `preset` [fade|slide|scale|blur|blur-slide|zoom|flip|bounce|rotate|swing], `variants` (`{ container, item }`, overrides preset), `as`/`asChild`
|
|
21
|
-
|
|
22
|
-
```tsx
|
|
23
|
-
<AnimatedGroup preset="blur-slide">
|
|
24
|
-
{items.map((item) => <Card key={item.id}>{item.label}</Card>)}
|
|
25
|
-
</AnimatedGroup>
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Text effects
|
|
29
|
-
|
|
30
|
-
Per-character/word/line text animation — low-frequency surfaces only (empty states, onboarding, marketing-adjacent copy).
|
|
31
|
-
|
|
32
|
-
- `motion-primitives/text-effect` — `TextEffect`: staggered reveal; `per` [word|char|line], `preset` [blur|fade-in-blur|scale|fade|slide], `delay`, `trigger`, `onAnimationComplete`
|
|
33
|
-
- `motion-primitives/text-morph` — `TextMorph`: morphs character-by-character between successive `children` string values; `as`, `variants`, `transition`
|
|
34
|
-
- `motion-primitives/text-scramble` — `TextScramble`: scrambles through random characters before resolving; `duration`, `speed`, `characterSet`, `trigger`, `onScrambleComplete`
|
|
35
|
-
- `motion-primitives/text-shimmer` — `TextShimmer`: looping gradient shimmer across the text; `duration`, `spread`
|
|
36
|
-
|
|
37
|
-
## Morphing overlays
|
|
38
|
-
|
|
39
|
-
Trigger element morphs its own bounds into the overlay (shared-layout, not a fade) — interruptible mid-animation.
|
|
40
|
-
|
|
41
|
-
- `motion-primitives/morphing-dialog` — `MorphingDialog` (root) + `MorphingDialogTrigger`, `MorphingDialogContainer` (portal), `MorphingDialogContent`, `MorphingDialogTitle`, `MorphingDialogSubtitle`, `MorphingDialogDescription` (`disableLayoutAnimation`), `MorphingDialogImage`, `MorphingDialogClose`; root takes `transition`
|
|
42
|
-
- `motion-primitives/morphing-popover` — `MorphingPopover` (`defaultOpen`/`open`/`onOpenChange`, `variants`) + `MorphingPopoverTrigger`, `MorphingPopoverContent`
|
|
43
|
-
|
|
44
|
-
```tsx
|
|
45
|
-
<MorphingDialog>
|
|
46
|
-
<MorphingDialogTrigger>
|
|
47
|
-
<img src={thumb} alt="" />
|
|
48
|
-
</MorphingDialogTrigger>
|
|
49
|
-
<MorphingDialogContainer>
|
|
50
|
-
<MorphingDialogContent>
|
|
51
|
-
<MorphingDialogImage src={fullSize} alt="" />
|
|
52
|
-
</MorphingDialogContent>
|
|
53
|
-
</MorphingDialogContainer>
|
|
54
|
-
</MorphingDialog>
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
## Panel transitions
|
|
58
|
-
|
|
59
|
-
Crossfade/slide between sibling panels, or a height-animated reveal. Distinct from the plain shadcn `accordion`/`tabs` subpaths in [layout.md](layout.md)/[navigation.md](navigation.md) — these are the animated variants.
|
|
60
|
-
|
|
61
|
-
- `motion-primitives/transition-panel` — `TransitionPanel`: crossfades between `children[activeIndex]`; `variants` (`{ enter, center, exit }`), `transition`
|
|
62
|
-
- `motion-primitives/disclosure` — `Disclosure` (root, `open`/`onOpenChange`) + `DisclosureTrigger`, `DisclosureContent`; `useDisclosure()` for custom triggers
|
|
63
|
-
- `motion-primitives/accordion` — animated `Accordion` (root, `expandedValue`/`onValueChange`, single-expand) + `AccordionItem`, `AccordionTrigger`, `AccordionContent`; `useAccordion()`
|
|
64
|
-
- `animate-ui/components/animate/tabs` — animated `Tabs`: sliding active-tab highlight over the primitive below; `variant` [solid|underline], `size` [sm|md|lg]
|
|
65
|
-
|
|
66
|
-
## Decorative effects
|
|
67
|
-
|
|
68
|
-
Pointer-tracked washes and ambient loops — decorative chrome only, never load-bearing content.
|
|
69
|
-
|
|
70
|
-
- `motion-primitives/spotlight` — `Spotlight`: cursor-following radial glow inside a `position: relative` parent; `size`, `springOptions`
|
|
71
|
-
- `motion-primitives/glow-effect` — `GlowEffect`: animated multi-color glow; `mode` [rotate|pulse|breathe|colorShift|flowHorizontal|static], `colors`, `blur` (preset or px number), `duration`, `scale`
|
|
72
|
-
- `motion-primitives/animated-background` — `AnimatedBackground`: sliding highlight that tracks the active/hovered child (each child needs a `data-id`); `defaultValue`, `onValueChange`, `enableHover`
|
|
73
|
-
- `motion-primitives/infinite-slider` — `InfiniteSlider`: seamless looping marquee; `gap`, `speed`, `speedOnHover`, `direction` [horizontal|vertical], `reverse`
|
|
74
|
-
- `animate-ui/primitives/effects/highlight` — `Highlight`: the sliding-highlight primitive underneath `AnimatedBackground`/animated `Tabs`; `mode` [children|parent], `value`/`defaultValue`/`onValueChange` (controlled or uncontrolled), `hover`, `click`, `transition`, `exitDelay`
|
|
75
|
-
|
|
76
|
-
## Dynamic toolbar
|
|
77
|
-
|
|
78
|
-
- `motion-primitives/toolbar-dynamic` — `ToolbarDynamic`: toolbar that expands to a contextual search input; `expandedWidth`, `collapsedWidth`, `placeholder`, `transition`. Ships `ToolbarButton` for the collapsed action icons.
|
|
79
|
-
|
|
80
|
-
---
|
|
81
|
-
|
|
82
|
-
Two further `animate-ui` subpaths are low-level primitives consumed internally rather than composed directly: `animate-ui/primitives/animate/slot` (an `asChild`-merging `Slot`, the plumbing behind the animated `Tabs`) and `animate-ui/primitives/effects/theme-toggler` (the directional-wipe primitive behind the `theme-toggler` component in [media.md](media.md)).
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
# Navigation Components
|
|
2
|
-
|
|
3
|
-
> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
|
|
4
|
-
|
|
5
|
-
Components: Breadcrumb, Menubar, Navbar, NavigationMenu, Pagination, Sidebar, SlideOutMenu, Tabs, VerticalIconBar
|
|
6
|
-
|
|
7
|
-
Each imports from its own subpath, with compound members alongside, e.g. `import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nurix/components/tabs"`.
|
|
8
|
-
|
|
9
|
-
## Sidebar
|
|
10
|
-
|
|
11
|
-
App sidebar: full shadcn primitives plus an opinionated layer, all from the single `@nurix/components/sidebar` subpath.
|
|
12
|
-
|
|
13
|
-
**Sub-components:** `SidebarProvider`, `Sidebar` (`side` [left|right], `variant` [sidebar|floating|inset], `collapsible` [offcanvas|icon|none]), `SidebarTrigger`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`, `SidebarRail`, `SidebarInset`, `useSidebar`. **Opinionated layer:** `Brand`, `Switcher` (`render` [simple|rich], `options`, `activeId`, `onSelect`), `ItemGroup` (`render` [list|tree|rich], `collapsible`, `compact`, `collapsedLabel` [hide|divider], `items`, `onItemClick`), `UserMenu`, `Callout`, `FileTree`, `SidebarCommandTrigger`.
|
|
14
|
-
|
|
15
|
-
```tsx
|
|
16
|
-
<SidebarProvider>
|
|
17
|
-
<Sidebar collapsible="icon">
|
|
18
|
-
<SidebarHeader>
|
|
19
|
-
<Switcher options={workspaces} />
|
|
20
|
-
</SidebarHeader>
|
|
21
|
-
<SidebarContent>
|
|
22
|
-
<ItemGroup label="Platform" render="tree" items={items} />
|
|
23
|
-
</SidebarContent>
|
|
24
|
-
<SidebarFooter>
|
|
25
|
-
<UserMenu user={user} />
|
|
26
|
-
</SidebarFooter>
|
|
27
|
-
</Sidebar>
|
|
28
|
-
</SidebarProvider>
|
|
29
|
-
```
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
# Overlay Components
|
|
2
|
-
|
|
3
|
-
> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.
|
|
4
|
-
|
|
5
|
-
## Dialog
|
|
6
|
-
|
|
7
|
-
Modal dialog with configurable size, position, and variant.
|
|
8
|
-
|
|
9
|
-
**Sub-components:** `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogBody`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`
|
|
10
|
-
|
|
11
|
-
**Content props:** `size` [sm|md|default|lg|xl|full], `position` [center|top|bottom], `variant` [default|danger], `dismissible` (default true; false when variant is danger), `showDividers`, `scrollable` (pins header/footer, scrolls body), `title`, `description`, `icon` (render a built-in header)
|
|
12
|
-
|
|
13
|
-
**Header/Footer props:** `showDivider`
|
|
14
|
-
|
|
15
|
-
```tsx
|
|
16
|
-
<Dialog>
|
|
17
|
-
<DialogTrigger asChild>
|
|
18
|
-
<Button>Edit profile</Button>
|
|
19
|
-
</DialogTrigger>
|
|
20
|
-
<DialogContent size="lg">
|
|
21
|
-
<DialogHeader showDivider>
|
|
22
|
-
<DialogTitle>Edit Profile</DialogTitle>
|
|
23
|
-
</DialogHeader>
|
|
24
|
-
<DialogBody>
|
|
25
|
-
<Input value={name} onChange={(e) => setName(e.target.value)} />
|
|
26
|
-
</DialogBody>
|
|
27
|
-
<DialogFooter showDivider>
|
|
28
|
-
<Button onClick={handleSave}>Save</Button>
|
|
29
|
-
</DialogFooter>
|
|
30
|
-
</DialogContent>
|
|
31
|
-
</Dialog>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Sheet
|
|
35
|
-
|
|
36
|
-
Side panel overlay with header/body/footer layout.
|
|
37
|
-
|
|
38
|
-
**Sub-components:** `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetBody`, `SheetFooter`, `SheetTitle`, `SheetDescription`, `SheetClose`
|
|
39
|
-
|
|
40
|
-
**Content props:** `side` [top|right|bottom|left], `size` [sm|md|default|lg|xl|full] (left/right only; top/bottom span full width), `showCloseButton`, `showOverlay`
|
|
41
|
-
|
|
42
|
-
**Header/Footer props:** `showDivider` **Body props:** `noPadding`
|
|
43
|
-
|
|
44
|
-
```tsx
|
|
45
|
-
<Sheet>
|
|
46
|
-
<SheetTrigger asChild>
|
|
47
|
-
<Button>Open</Button>
|
|
48
|
-
</SheetTrigger>
|
|
49
|
-
<SheetContent side="right" size="lg">
|
|
50
|
-
<SheetHeader showDivider>
|
|
51
|
-
<SheetTitle>Settings</SheetTitle>
|
|
52
|
-
</SheetHeader>
|
|
53
|
-
<SheetBody>
|
|
54
|
-
<Input value={name} onChange={(e) => setName(e.target.value)} />
|
|
55
|
-
</SheetBody>
|
|
56
|
-
<SheetFooter showDivider>
|
|
57
|
-
<Button onClick={handleSave}>Save</Button>
|
|
58
|
-
</SheetFooter>
|
|
59
|
-
</SheetContent>
|
|
60
|
-
</Sheet>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
## Other Overlays
|
|
64
|
-
|
|
65
|
-
Standard compound components following the Trigger/Content pattern; import each from its kebab-case subpath (e.g. `@nurix/components/popover`):
|
|
66
|
-
|
|
67
|
-
- `Command` (`command`)
|
|
68
|
-
- `ContextMenu` (`context-menu`)
|
|
69
|
-
- `DropdownMenu` (`dropdown-menu`)
|
|
70
|
-
- `HoverCard` (`hover-card`)
|
|
71
|
-
- `Popover` (`popover`)
|
|
72
|
-
- `Tooltip` (`tooltip`)
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
# Setup & Configuration
|
|
2
|
-
|
|
3
|
-
> Generated reference (regen-owned; see [index.md](index.md)). Loads only under `primitives: nurix` — this is the wiring a project needs before any `@nurix/components` import resolves.
|
|
4
|
-
|
|
5
|
-
## Package
|
|
6
|
-
|
|
7
|
-
`@nurix/components` — published to the public npm registry (`registry.npmjs.org`) under the restricted `@nurix` scope. Only `dist/` ships. Peer dependencies: `react ^19`, `react-dom ^19`. Source of truth: `github.com/nurixlabs/components`.
|
|
8
|
-
|
|
9
|
-
## Installing
|
|
10
|
-
|
|
11
|
-
The scope is restricted, so the consumer project needs an npm token with read access to `@nurix` in its `.npmrc`:
|
|
12
|
-
|
|
13
|
-
```ini
|
|
14
|
-
//registry.npmjs.org/:_authToken=${NPM_READ_TOKEN}
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
Then install with the project's package manager (detect from the lockfile): `npm install @nurix/components`.
|
|
18
|
-
|
|
19
|
-
## Styles (required)
|
|
20
|
-
|
|
21
|
-
In the consumer's CSS entry, after Tailwind v4:
|
|
22
|
-
|
|
23
|
-
```css
|
|
24
|
-
@import "tailwindcss";
|
|
25
|
-
@import "@nurix/components/styles.css";
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
The shipped `styles.css` is **not** precompiled — it carries the design tokens, base layer, and an embedded `@source "./**/*.js"` directive, so the consumer's Tailwind v4 build scans the package's compiled JS and generates every utility class the components use. The project must have Tailwind v4 set up; it does **not** add its own `@source` for this package.
|
|
29
|
-
|
|
30
|
-
The design skill's token artifact (CSS custom properties emitted from the project `design.md`) layers over these tokens — theme blocks carry specificity armor precisely so this package's `:root` block cannot defeat them.
|
|
31
|
-
|
|
32
|
-
## Import pattern
|
|
33
|
-
|
|
34
|
-
Use subpath imports — each published entry maps to one; never import from the root barrel in generated code:
|
|
35
|
-
|
|
36
|
-
```tsx
|
|
37
|
-
import { Button } from "@nurix/components/button";
|
|
38
|
-
import { Cell } from "@nurix/components/cell";
|
|
39
|
-
import { defineColumn } from "@nurix/components/table";
|
|
40
|
-
```
|