@takeoff-ui/react-spar 0.1.2 → 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 +45 -16
- package/dist/index.cjs +2393 -179
- package/dist/index.d.cts +1385 -141
- package/dist/index.d.ts +1385 -141
- package/dist/index.mjs +2387 -188
- package/package.json +9 -7
package/README.md
CHANGED
|
@@ -4,26 +4,47 @@ Current-phase React package for Takeoff components backed by
|
|
|
4
4
|
`@turkish-technology/spar`. Components ship as compound surfaces: state lives on
|
|
5
5
|
the root and structure lives in named subcomponents.
|
|
6
6
|
|
|
7
|
-
The public API uses React primitive vocabulary
|
|
8
|
-
`
|
|
9
|
-
|
|
10
|
-
React conventions (`default*` props, `on*` callbacks, and
|
|
11
|
-
instead of Web Component slots).
|
|
7
|
+
The public API uses React primitive vocabulary (`value`, `defaultValue`,
|
|
8
|
+
`checked`, `open`, `on*Change`) while preserving visual Takeoff vocabulary
|
|
9
|
+
(`variant`, `appearance`, `type`, `mode`, `size`) and translating framework
|
|
10
|
+
mechanics into React conventions (`default*` props, `on*` callbacks, and
|
|
11
|
+
compound children instead of Web Component slots).
|
|
12
12
|
|
|
13
13
|
## Current Surface
|
|
14
14
|
|
|
15
|
-
The package currently exports:
|
|
15
|
+
The package currently exports these component roots:
|
|
16
16
|
|
|
17
17
|
- `Accordion`
|
|
18
|
+
- `Alert`
|
|
19
|
+
- `Badge`
|
|
20
|
+
- `Breadcrumb`
|
|
18
21
|
- `Button`
|
|
22
|
+
- `Card`
|
|
23
|
+
- `Checkbox`
|
|
24
|
+
- `Chip`
|
|
25
|
+
- `Dialog`
|
|
19
26
|
- `Drawer`
|
|
27
|
+
- `Field`
|
|
28
|
+
- `Input`
|
|
29
|
+
- `Label`
|
|
30
|
+
- `Popover`
|
|
31
|
+
- `Radio`
|
|
32
|
+
- `Select`
|
|
33
|
+
- `Spinner`
|
|
34
|
+
- `Switch`
|
|
35
|
+
- `Table`
|
|
36
|
+
- `Tabs`
|
|
37
|
+
- `Toast`
|
|
20
38
|
- `Tooltip`
|
|
21
|
-
- `TakeoffSparProvider`
|
|
22
|
-
- customization and theme types from the package root
|
|
23
39
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
40
|
+
The package root also exports `TakeoffSparProvider`, `useTheme`,
|
|
41
|
+
`useComponentTheme`, and customization/theme types. Compound components expose
|
|
42
|
+
their public parts through the root object, for example `Accordion.Item`,
|
|
43
|
+
`Dialog.Panel`, `Input.Field`, `Select.Trigger`, and `Tabs.List`.
|
|
44
|
+
|
|
45
|
+
State-only roots such as `Dialog`, `Drawer`, `Popover`, and `Tooltip` render no
|
|
46
|
+
DOM element themselves; styling and slot customization live on their rendered
|
|
47
|
+
parts (`Dialog.Panel`, `Drawer.Overlay`, `Tooltip.Content`, etc.).
|
|
27
48
|
|
|
28
49
|
## Reference
|
|
29
50
|
|
|
@@ -91,8 +112,12 @@ export function Example() {
|
|
|
91
112
|
|
|
92
113
|
`TakeoffSparProvider` accepts `colorMode` (`'light' | 'dark'`, default
|
|
93
114
|
`'light'`), an optional `locale` string, and an optional `components`
|
|
94
|
-
customization map. The provider renders
|
|
95
|
-
|
|
115
|
+
customization map. The provider renders no DOM of its own. It writes
|
|
116
|
+
`data-theme` from `colorMode` and `lang` from `locale` to
|
|
117
|
+
`document.documentElement` in a client effect so portal-mounted descendants
|
|
118
|
+
(`Dialog`, `Popover`, `Tooltip`, etc.) inherit the same theme and language
|
|
119
|
+
context. In SSR apps, set matching `<html data-theme="..." lang="...">`
|
|
120
|
+
attributes on the server to avoid first-paint mismatch.
|
|
96
121
|
|
|
97
122
|
## Accordion
|
|
98
123
|
|
|
@@ -127,7 +152,8 @@ writes `data-theme` from `colorMode` and `lang` from `locale`.
|
|
|
127
152
|
|
|
128
153
|
## Customization
|
|
129
154
|
|
|
130
|
-
Every
|
|
155
|
+
Every rendered component root and rendered component part exposes the same
|
|
156
|
+
customization layers:
|
|
131
157
|
|
|
132
158
|
- `className`: appended to the canonical root slot class.
|
|
133
159
|
- `classNames`: per-slot extra classes, concatenated with canonical `tk-*`
|
|
@@ -138,6 +164,9 @@ Every public component part exposes the same customization layers:
|
|
|
138
164
|
component name.
|
|
139
165
|
|
|
140
166
|
Canonical `tk-*` classes and `data-slot` attributes are always preserved.
|
|
167
|
+
State-only roots (`Dialog`, `Drawer`, `Popover`, `Tooltip`) have no DOM target
|
|
168
|
+
for root-level styling, so their provider entries expose `defaultProps` only;
|
|
169
|
+
style their rendered parts instead.
|
|
141
170
|
|
|
142
171
|
### Theme-level Defaults
|
|
143
172
|
|
|
@@ -208,8 +237,8 @@ remain in place.
|
|
|
208
237
|
</Accordion>
|
|
209
238
|
```
|
|
210
239
|
|
|
211
|
-
Custom
|
|
212
|
-
owner node so recipes keep their stable selector.
|
|
240
|
+
Custom indicator content is rendered inside the canonical
|
|
241
|
+
`.tk-accordion-item-indicator` owner node so recipes keep their stable selector.
|
|
213
242
|
|
|
214
243
|
`Accordion.Indicator` is opt-in — omit it to render a trigger without a
|
|
215
244
|
disclosure affordance. Its owner node carries the canonical
|