@takeoff-ui/react-spar 0.3.0 → 0.4.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 +23 -0
- package/agents/AGENTS.template.md +69 -0
- package/dist/index.cjs +1081 -61
- package/dist/index.d.cts +462 -3
- package/dist/index.d.ts +462 -3
- package/dist/index.mjs +1081 -62
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -78,6 +78,29 @@ stylesheet once at the app shell or entrypoint:
|
|
|
78
78
|
import '@takeoff-design/tokens/css/default/theme.css';
|
|
79
79
|
```
|
|
80
80
|
|
|
81
|
+
## AI & editor setup
|
|
82
|
+
|
|
83
|
+
Coding assistants don't know this library and will invent props or hand-roll
|
|
84
|
+
markup unless you tell them about it. This package ships an instructions file
|
|
85
|
+
you can drop into your repository:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
cp node_modules/@takeoff-ui/react-spar/agents/AGENTS.template.md ./AGENTS.md
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
> The `agents/` directory ships from 0.4.0 onward.
|
|
92
|
+
|
|
93
|
+
`AGENTS.md` at the repository root is read automatically by GitHub Copilot,
|
|
94
|
+
Cursor, and Claude. It lists every component with what it's for, plus the rules
|
|
95
|
+
that matter (React 19 only, provider + token CSS, the slot/customization model).
|
|
96
|
+
|
|
97
|
+
For full API context, point the assistant at the Markdown docs — every page is
|
|
98
|
+
available by appending `.md` to its URL, and the whole library is at
|
|
99
|
+
[`/llms-full.txt`](https://takeoff-v2.app.turkishtechlab.com/llms-full.txt).
|
|
100
|
+
|
|
101
|
+
Full guide, including tool-specific paths:
|
|
102
|
+
https://takeoff-v2.app.turkishtechlab.com/docs/ai-assistants
|
|
103
|
+
|
|
81
104
|
## Usage
|
|
82
105
|
|
|
83
106
|
```tsx
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<!-- Generated by tools/generate-agent-instructions.mjs from .agents/skills. Do not edit by hand. -->
|
|
2
|
+
|
|
3
|
+
# AGENTS.md — @takeoff-ui/react-spar
|
|
4
|
+
|
|
5
|
+
> Copy this file to the root of the project that consumes
|
|
6
|
+
> `@takeoff-ui/react-spar` and rename it `AGENTS.md`. GitHub Copilot, Cursor,
|
|
7
|
+
> and Claude all read it automatically. Add your own project rules below the
|
|
8
|
+
> generated sections.
|
|
9
|
+
|
|
10
|
+
This project uses `@takeoff-ui/react-spar`, a React 19 component library built
|
|
11
|
+
on headless Spar primitives and styled with Takeoff design tokens.
|
|
12
|
+
|
|
13
|
+
## Rules
|
|
14
|
+
|
|
15
|
+
- Import every component from `@takeoff-ui/react-spar`. Do not hand-roll an
|
|
16
|
+
element that already exists in the table below — reach for the component.
|
|
17
|
+
- React 19 only. React 18 throws at runtime.
|
|
18
|
+
- Mount `TakeoffSparProvider` once at the app root and import the token CSS
|
|
19
|
+
(`@takeoff-design/tokens/css/default/theme.css`) once at the entry point.
|
|
20
|
+
- Style through the documented layers only: `className` (root slot),
|
|
21
|
+
`classNames={{ slot }}`, `slotProps={{ slot }}`, or provider defaults.
|
|
22
|
+
Internal DOM is not a styling contract — only rely on documented `data-*`
|
|
23
|
+
attributes.
|
|
24
|
+
- Icons ship separately in `@takeoff-icons/react`.
|
|
25
|
+
|
|
26
|
+
## Components
|
|
27
|
+
|
|
28
|
+
| Component | Use it for |
|
|
29
|
+
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
30
|
+
| `Accordion` | Grouped collapsible sections (FAQs, settings panels, itinerary details) where open/closed state is owned by Spar. |
|
|
31
|
+
| `Alert` | Inline, page-level feedback (gate changes, billing warnings, status notices). |
|
|
32
|
+
| `Badge` | Inline status pills, category tags, count bubbles, notification dots, and overlay indicators on icons/avatars. |
|
|
33
|
+
| `Breadcrumb` | Render a hierarchical "where am I" trail of ancestor links ending in the current page. |
|
|
34
|
+
| `Button` | Any clickable action — submit, CTA, toolbar action, icon-only action, or a two-state toggle (via `pressed`/`onPressedChange`). |
|
|
35
|
+
| `Card` | You need a bordered surface that bundles a heading, body content, and an optional action footer. |
|
|
36
|
+
| `Checkbox` | Boolean opt-in/opt-out controls, accept-terms gates, multi-select lists, and tri-state "select all" parents. |
|
|
37
|
+
| `Chip` | Filter tags, entered/selected values, and short status metadata. |
|
|
38
|
+
| `Dialog` | A modal layer that interrupts the flow for content, forms, or confirmations. |
|
|
39
|
+
| `Divider` | Separating sections of a page, groups in a list or menu, or items in a horizontal toolbar — optionally with a label ("OR") in the middle. |
|
|
40
|
+
| `Drawer` | Content that slides in from an edge and overlays the page. |
|
|
41
|
+
| `Dropdown` | A trigger that opens a menu of _commands_ — row actions, overflow ("⋯") menus, toolbar menus, account menus. |
|
|
42
|
+
| `Field` | Wrap one form control to attach a visible label, helper text, and a validation error message that are correctly associated for screen readers. |
|
|
43
|
+
| `Input` | Any single-line (or `as="textarea"`) text entry — search boxes, email/password fields, numeric steppers/counters, tag/chips fields. |
|
|
44
|
+
| `Label` | You only need the label primitive — a section title, a caption, or a manual `htmlFor` association to a native control. |
|
|
45
|
+
| `Popover` | Anchored, dismissible panels tied to a trigger (settings, quick forms, contextual info). |
|
|
46
|
+
| `Progress` | Work with a known percentage — file uploads, imports, quota and storage meters, multi-item batch jobs — or a bar-shaped indeterminate treatment for a long-running task. |
|
|
47
|
+
| `Radio` | Any single-choice form control: cabin/seat/plan/payment pickers, exclusive option lists. |
|
|
48
|
+
| `Select` | Single-choice dropdown pickers where you want a styled, portalled listbox instead of a native `<select>`. |
|
|
49
|
+
| `Skeleton` | First-load placeholders for content whose layout you already know — cards, list rows, avatars, text lines, table cells. |
|
|
50
|
+
| `Slider` | Any bounded numeric selection where dragging beats typing — volume, brightness, temperature, zoom, a price/date range filter, gradient stops. |
|
|
51
|
+
| `Spinner` | Show ongoing, indeterminate activity (fetching, saving, processing) where progress is unknown. |
|
|
52
|
+
| `Stepper` | Multi-step flows where the sequence itself is meaningful and the user should see where they are and what remains — checkout, booking, onboarding, multi-page forms. |
|
|
53
|
+
| `Switch` | Any boolean toggle that applies immediately. |
|
|
54
|
+
| `Table` | Rendering tabular data with any of sorting, filtering, pagination, row selection, expandable/tree rows, sticky columns, loading/empty states, or server-side paging. |
|
|
55
|
+
| `Tabs` | A UI needs a tablist that swaps panels — settings sections, detail views, segmented controls. |
|
|
56
|
+
| `Toast` | Any ephemeral, auto-dismissing notification fired imperatively (success/error/info/warning/loading, promise results, undo actions). |
|
|
57
|
+
| `Tooltip` | Brief, non-interactive hints attached to a trigger element (button, icon). |
|
|
58
|
+
| `Upload` | Attaching files to a form, a review-then-send batch, an avatar/image picker. |
|
|
59
|
+
|
|
60
|
+
## Getting the full API
|
|
61
|
+
|
|
62
|
+
This file is an index. For a component's complete props, slots, data attributes,
|
|
63
|
+
and runnable examples, fetch its Markdown page:
|
|
64
|
+
|
|
65
|
+
https://takeoff-v2.app.turkishtechlab.com/docs/components/<component>.md
|
|
66
|
+
|
|
67
|
+
The entire library in one file (for pasting into a model's context) is at:
|
|
68
|
+
|
|
69
|
+
https://takeoff-v2.app.turkishtechlab.com/llms-full.txt
|