@cupra/ui-react 2.0.0-canary.263 → 2.0.0-canary.265
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 +165 -97
- package/dist/cjs/components/Avatar/Avatar.cjs +1 -1
- package/dist/cjs/components/Banner/Banner.cjs +1 -1
- package/dist/cjs/components/BasicCard/BasicCard.cjs +1 -1
- package/dist/cjs/components/Button/Button.cjs +1 -1
- package/dist/cjs/components/Calendar/Calendar.cjs +1 -1
- package/dist/cjs/components/Chips/Chips.cjs +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs +1 -1
- package/dist/cjs/components/DialogFullscreen/DialogFullscreen.cjs +1 -1
- package/dist/cjs/components/Drawer/Drawer.cjs +1 -1
- package/dist/cjs/components/FavouriteAction/FavouriteAction.cjs +1 -1
- package/dist/cjs/components/IconButton/IconButton.cjs +1 -1
- package/dist/cjs/components/InlineAlert/InlineAlert.cjs +1 -1
- package/dist/cjs/components/InteractiveCard/InteractiveCard.cjs +1 -1
- package/dist/cjs/components/MediaControl/MediaControl.cjs +1 -1
- package/dist/cjs/components/Modal/Modal.cjs +1 -1
- package/dist/cjs/components/PasswordInput/PasswordInput.cjs +1 -1
- package/dist/cjs/components/PickerItem/PickerItem.cjs +1 -1
- package/dist/cjs/components/Radio/Radio.cjs +1 -1
- package/dist/cjs/components/RadioButtonGroup/RadioButtonGroup.cjs +1 -1
- package/dist/cjs/components/SearchInput/SearchInput.cjs +1 -1
- package/dist/cjs/components/SecondaryNavigation/SecondaryNavigation.cjs +1 -1
- package/dist/cjs/components/SegmentedControl/SegmentedControl.cjs +1 -1
- package/dist/cjs/components/Slider/Slider.cjs +1 -1
- package/dist/cjs/components/StaticBox/StaticBox.cjs +1 -1
- package/dist/cjs/components/Tabs/Tabs.cjs +1 -1
- package/dist/cjs/components/Tag/Tag.cjs +1 -1
- package/dist/cjs/components/TextInput/TextInput.cjs +1 -1
- package/dist/cjs/components/Textarea/Textarea.cjs +1 -1
- package/dist/cjs/components/ToggleSwitch/ToggleSwitch.cjs +1 -1
- package/dist/esm/components/Avatar/Avatar.js +1 -1
- package/dist/esm/components/Banner/Banner.js +1 -1
- package/dist/esm/components/BasicCard/BasicCard.js +1 -1
- package/dist/esm/components/Button/Button.js +1 -1
- package/dist/esm/components/Calendar/Calendar.js +2 -2
- package/dist/esm/components/Chips/Chips.js +1 -1
- package/dist/esm/components/Dialog/Dialog.js +1 -1
- package/dist/esm/components/DialogFullscreen/DialogFullscreen.js +1 -1
- package/dist/esm/components/Drawer/Drawer.js +1 -1
- package/dist/esm/components/FavouriteAction/FavouriteAction.js +2 -2
- package/dist/esm/components/IconButton/IconButton.js +2 -2
- package/dist/esm/components/InlineAlert/InlineAlert.js +1 -1
- package/dist/esm/components/InteractiveCard/InteractiveCard.js +1 -1
- package/dist/esm/components/MediaControl/MediaControl.js +2 -2
- package/dist/esm/components/Modal/Modal.js +1 -1
- package/dist/esm/components/PasswordInput/PasswordInput.js +1 -1
- package/dist/esm/components/PickerItem/PickerItem.js +1 -1
- package/dist/esm/components/Radio/Radio.js +1 -1
- package/dist/esm/components/RadioButtonGroup/RadioButtonGroup.js +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +1 -1
- package/dist/esm/components/SecondaryNavigation/SecondaryNavigation.js +1 -1
- package/dist/esm/components/SegmentedControl/SegmentedControl.js +1 -1
- package/dist/esm/components/Slider/Slider.js +2 -2
- package/dist/esm/components/StaticBox/StaticBox.js +1 -1
- package/dist/esm/components/Tabs/Tabs.js +1 -1
- package/dist/esm/components/Tag/Tag.js +1 -1
- package/dist/esm/components/TextInput/TextInput.js +1 -1
- package/dist/esm/components/Textarea/Textarea.js +1 -1
- package/dist/esm/components/ToggleSwitch/ToggleSwitch.js +1 -1
- package/package.json +6 -4
package/README.md
CHANGED
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
# UI React (React Components)
|
|
2
2
|
|
|
3
|
+
## Contents
|
|
4
|
+
|
|
5
|
+
- [Overview](#overview)
|
|
6
|
+
- [Audience](#audience)
|
|
7
|
+
- [Requirements & Compatibility](#requirements--compatibility)
|
|
8
|
+
- [TypeScript and module resolution](#typescript-and-module-resolution)
|
|
9
|
+
- [Getting started](#getting-started)
|
|
10
|
+
- [Documentation & Live Playground](#documentation--live-playground)
|
|
11
|
+
- [Breaking Changes & Deprecations](#breaking-changes--deprecations)
|
|
12
|
+
- [Versioning and Release Channels](#versioning-and-release-channels)
|
|
13
|
+
- [Recommended usage](#recommended-usage)
|
|
14
|
+
- [Usage](#usage)
|
|
15
|
+
- [Theme provider props](#theme-provider-props)
|
|
16
|
+
- [Option A — Manual CSS and font links (recommended for performance)](#option-a--manual-css-and-font-links-recommended-for-performance)
|
|
17
|
+
- [Option B — Provider loads assets automatically](#option-b--provider-loads-assets-automatically)
|
|
18
|
+
- [Boolean props](#boolean-props)
|
|
19
|
+
- [Fonts](#fonts)
|
|
20
|
+
- [Icons](#icons)
|
|
21
|
+
- [RTL and internationalization](#rtl-and-internationalization)
|
|
22
|
+
- [License](#license)
|
|
23
|
+
- [Support](#support)
|
|
24
|
+
|
|
3
25
|
## Overview
|
|
4
26
|
|
|
5
27
|
React components and wrappers built on top of the DS-UI Web Components, providing a seamless and idiomatic developer experience for React.
|
|
6
28
|
This package exposes React-friendly APIs (props, JSX, typed events) while preserving the DS-UI theming, styling, and asset resolution model.
|
|
7
29
|
|
|
8
|
-
---
|
|
9
|
-
|
|
10
30
|
## Audience
|
|
11
31
|
|
|
12
32
|
Use `@cupra/ui-react` if your application is built with **React** and you want:
|
|
@@ -18,28 +38,27 @@ Use `@cupra/ui-react` if your application is built with **React** and you want:
|
|
|
18
38
|
|
|
19
39
|
If you need a **framework-agnostic** solution, consider `@cupra/ui-kit` (Web Components).
|
|
20
40
|
|
|
21
|
-
---
|
|
22
|
-
|
|
23
41
|
## Requirements & Compatibility
|
|
24
42
|
|
|
25
|
-
This library
|
|
43
|
+
This library provides **official support for React 18 and React 19**.
|
|
26
44
|
|
|
27
45
|
- **Supported React versions:** `>=18.3.1 <20`
|
|
28
46
|
|
|
29
|
-
Projects using other React versions may still install and use the library, but behaviour is not guaranteed
|
|
47
|
+
Projects using other React versions may still install and use the library, but behaviour is not guaranteed.
|
|
30
48
|
|
|
31
|
-
|
|
49
|
+
<details>
|
|
50
|
+
<summary>Supported browsers and technical guarantees</summary>
|
|
32
51
|
|
|
33
52
|
This package wraps `@cupra/ui-kit` Web Components, so the same browser/OS support matrix applies:
|
|
34
53
|
|
|
35
|
-
| Platform
|
|
36
|
-
|
|
|
37
|
-
| iOS / iPadOS
|
|
38
|
-
| Android
|
|
39
|
-
| Chrome (desktop)
|
|
40
|
-
| Edge (desktop)
|
|
41
|
-
| Firefox (desktop) | Current stable version − 1
|
|
42
|
-
| Safari (desktop)
|
|
54
|
+
| Platform | Minimum supported version |
|
|
55
|
+
| ----------------- | ---------------------------------------------------- |
|
|
56
|
+
| iOS / iPadOS | 17+ |
|
|
57
|
+
| Android | 13+ |
|
|
58
|
+
| Chrome (desktop) | Current stable version − 1 |
|
|
59
|
+
| Edge (desktop) | Current stable version − 1 |
|
|
60
|
+
| Firefox (desktop) | Current stable version − 1 |
|
|
61
|
+
| Safari (desktop) | Latest version available on supported macOS releases |
|
|
43
62
|
|
|
44
63
|
Any browser/OS version representing more than 1% of total website traffic remains supported even
|
|
45
64
|
if it falls below these versions, until its traffic share drops back under that threshold.
|
|
@@ -51,13 +70,14 @@ Shadow DOM and `<slot>` is required.
|
|
|
51
70
|
Full rationale, transpilation details and maintenance guide:
|
|
52
71
|
[BROWSER_SUPPORT.md](../../BROWSER_SUPPORT.md) (repository only — not included in the npm package).
|
|
53
72
|
|
|
54
|
-
|
|
73
|
+
</details>
|
|
55
74
|
|
|
56
75
|
## TypeScript and module resolution
|
|
57
76
|
|
|
58
77
|
This library is **bundler-first**.
|
|
59
78
|
|
|
60
|
-
|
|
79
|
+
<details open>
|
|
80
|
+
<summary>Subpath imports (recommended)</summary>
|
|
61
81
|
|
|
62
82
|
Importing components via subpaths (for example `@cupra/ui-react/Accordion`) requires
|
|
63
83
|
TypeScript to use **bundler-based module resolution**:
|
|
@@ -80,9 +100,10 @@ Minimal required `tsconfig.json` setting:
|
|
|
80
100
|
|
|
81
101
|
Other compiler options (`target`, `module`, `lib`, etc.) are project-specific and can be configured as needed.
|
|
82
102
|
|
|
83
|
-
|
|
103
|
+
</details>
|
|
84
104
|
|
|
85
|
-
|
|
105
|
+
<details>
|
|
106
|
+
<summary>Root imports (compatibility mode)</summary>
|
|
86
107
|
|
|
87
108
|
If your project cannot use `moduleResolution: "bundler"`, you can still consume the library using **root imports**:
|
|
88
109
|
|
|
@@ -98,15 +119,16 @@ This mode works with legacy or constrained TypeScript setups, but has the follow
|
|
|
98
119
|
|
|
99
120
|
Root imports are supported as a fallback, but **subpath imports are recommended whenever possible**.
|
|
100
121
|
|
|
101
|
-
|
|
122
|
+
</details>
|
|
102
123
|
|
|
103
|
-
|
|
124
|
+
<details>
|
|
125
|
+
<summary>Notes</summary>
|
|
104
126
|
|
|
105
127
|
- Subpath imports are intentionally designed for bundler-based environments.
|
|
106
128
|
- The library does not attempt to enforce Node-style module resolution.
|
|
107
129
|
- No additional runtime configuration is required when using a modern bundler.
|
|
108
130
|
|
|
109
|
-
|
|
131
|
+
</details>
|
|
110
132
|
|
|
111
133
|
## Getting started
|
|
112
134
|
|
|
@@ -135,9 +157,8 @@ Using yarn:
|
|
|
135
157
|
yarn add @cupra/ui-react @cupra/ui-kit
|
|
136
158
|
```
|
|
137
159
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
### About peer dependencies
|
|
160
|
+
<details>
|
|
161
|
+
<summary>About peer dependencies</summary>
|
|
141
162
|
|
|
142
163
|
`@cupra/ui-kit` is declared as a **peer dependency** of `@cupra/ui-react`.
|
|
143
164
|
|
|
@@ -153,7 +174,7 @@ peer dependencies automatically. Others (such as Yarn) require installing them e
|
|
|
153
174
|
If you encounter missing-module or runtime errors after installing `@cupra/ui-react`,
|
|
154
175
|
make sure that `@cupra/ui-kit` is also installed in your project.
|
|
155
176
|
|
|
156
|
-
|
|
177
|
+
</details>
|
|
157
178
|
|
|
158
179
|
## Documentation & Live Playground
|
|
159
180
|
|
|
@@ -169,13 +190,12 @@ Track every breaking change and deprecation, and use the migration helper to saf
|
|
|
169
190
|
- Breaking changes (merged + upcoming): [https://seatcode.github.io/ds-ui/](https://seatcode.github.io/ds-ui/)
|
|
170
191
|
- Deprecations (forward-looking advisories): [https://seatcode.github.io/ds-ui/deprecations.html](https://seatcode.github.io/ds-ui/deprecations.html)
|
|
171
192
|
|
|
172
|
-
---
|
|
173
|
-
|
|
174
193
|
## Versioning and Release Channels
|
|
175
194
|
|
|
176
195
|
This package is distributed through npm using **two release channels**.
|
|
177
196
|
|
|
178
|
-
|
|
197
|
+
<details>
|
|
198
|
+
<summary>Stable releases (latest)</summary>
|
|
179
199
|
|
|
180
200
|
Production-ready versions:
|
|
181
201
|
|
|
@@ -195,9 +215,10 @@ Specific version:
|
|
|
195
215
|
npm install @cupra/ui-react@0.1.3
|
|
196
216
|
```
|
|
197
217
|
|
|
198
|
-
|
|
218
|
+
</details>
|
|
199
219
|
|
|
200
|
-
|
|
220
|
+
<details>
|
|
221
|
+
<summary>Canary releases (canary)</summary>
|
|
201
222
|
|
|
202
223
|
Early-access versions published after each merge into `main`.
|
|
203
224
|
|
|
@@ -219,15 +240,13 @@ Specific canary version:
|
|
|
219
240
|
npm install @cupra/ui-react@0.1.4-canary.2
|
|
220
241
|
```
|
|
221
242
|
|
|
222
|
-
|
|
243
|
+
</details>
|
|
223
244
|
|
|
224
245
|
## Recommended usage
|
|
225
246
|
|
|
226
247
|
- **Production:** use **stable versions** (for example `@cupra/ui-react@1.1.3`)
|
|
227
248
|
- **Internal testing / preview:** use **canary** versions
|
|
228
249
|
|
|
229
|
-
---
|
|
230
|
-
|
|
231
250
|
## Usage
|
|
232
251
|
|
|
233
252
|
When possible, import components via subpaths:
|
|
@@ -244,28 +263,47 @@ If your TypeScript setup does not support bundler-based module resolution, use r
|
|
|
244
263
|
|
|
245
264
|
Wrap your React application with `ThemeProvider`.
|
|
246
265
|
|
|
247
|
-
|
|
266
|
+
### Theme provider props
|
|
267
|
+
|
|
268
|
+
`ThemeProvider` has one required prop, `theme`, and three optional boolean props that turn off what the
|
|
269
|
+
provider loads on its own. Booleans are `false` unless set, so `skip-fonts` and `skip-fonts={true}` are
|
|
270
|
+
equivalent.
|
|
248
271
|
|
|
249
|
-
| Prop | Type
|
|
250
|
-
|
|
251
|
-
| `theme` |
|
|
252
|
-
| `
|
|
253
|
-
| `
|
|
254
|
-
| `
|
|
272
|
+
| Prop | Type | Default | Description |
|
|
273
|
+
| -------------------- | ---------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
|
274
|
+
| `theme` | `'cupra-diagonal' \| 'seat'` | none (required) | Visual theme applied to every descendant component. |
|
|
275
|
+
| `skip-fonts` | boolean | `false` | Do not add `fonts.css`, the stylesheet that declares the theme's `@font-face` rules, nor the preloads of the critical font weights. |
|
|
276
|
+
| `skip-styles` | boolean | `false` | Do not add `theme.css`, the stylesheet the `ui-kit` components require. |
|
|
277
|
+
| `skip-unused-styles` | boolean | `false` | Do not add `unused-styles.css`, the theme's `--ds-` tokens that `ui-kit` doesn't consume internally. |
|
|
255
278
|
|
|
256
279
|
`ThemeProvider` forwards its props directly to the underlying `<ds-theme-provider>` Web Component, so
|
|
257
280
|
prop names match its HTML attributes (kebab-case), not idiomatic React camelCase.
|
|
258
281
|
|
|
259
|
-
If
|
|
282
|
+
If you set a `skip-*` prop, you must include the corresponding `<link>` tags yourself, as in Option A.
|
|
283
|
+
The provider renders its children once `theme.css` has loaded.
|
|
260
284
|
|
|
261
|
-
|
|
262
|
-
stylesheets manually, controlling their priority: `theme.css` as a normal, high-priority stylesheet link
|
|
263
|
-
(always required), and `unused-styles.css` added with lower priority — for example with `rel="preload"`
|
|
264
|
-
and `as="style"`, turned into a stylesheet once loaded via `onLoad` — or omitted entirely if you don't
|
|
265
|
-
read raw tokens. If your own CSS does read raw tokens, load `unused-styles.css` with the same priority as
|
|
266
|
-
`theme.css`.
|
|
285
|
+
Each theme publishes three stylesheets:
|
|
267
286
|
|
|
268
|
-
|
|
287
|
+
- `theme.css` holds everything the `ui-kit` Web Components actually consume. It is always required.
|
|
288
|
+
- `unused-styles.css` holds the rest of the theme's `--ds-` tokens, which no `ui-kit` component consumes
|
|
289
|
+
internally. It only matters if your own CSS reads those raw tokens directly, so it can be omitted or
|
|
290
|
+
deferred otherwise.
|
|
291
|
+
- `fonts.css` holds the theme's `@font-face` rules. See [Fonts](#fonts).
|
|
292
|
+
|
|
293
|
+
### Option A — Manual CSS and font links (recommended for performance)
|
|
294
|
+
|
|
295
|
+
By default the provider injects the stylesheets at runtime, after JavaScript runs. Serving them yourself
|
|
296
|
+
from the `<head>` avoids that extra round trip, lets the browser discover them earlier and is better for
|
|
297
|
+
performance. Set the three `skip` props and add the files manually, controlling their priority:
|
|
298
|
+
|
|
299
|
+
- `theme.css` as a normal, high-priority stylesheet link (always required).
|
|
300
|
+
- `unused-styles.css` with lower priority, for example with `rel="preload"` and `as="style"`, turned into a
|
|
301
|
+
stylesheet once loaded via `onLoad`, or omitted entirely if you don't read raw tokens. If your own CSS
|
|
302
|
+
does read raw tokens, load it with the same priority as `theme.css`.
|
|
303
|
+
- `fonts.css` as a stylesheet link, plus a preload for each critical font file.
|
|
304
|
+
|
|
305
|
+
This is also the setup for server-side rendering, since no JavaScript is needed to load the assets.
|
|
306
|
+
Replace `[theme]` with `cupra-diagonal` or `seat` and `[version]` with the installed package version.
|
|
269
307
|
|
|
270
308
|
```
|
|
271
309
|
import { ThemeProvider } from "@cupra/ui-react/ThemeProvider";
|
|
@@ -286,7 +324,7 @@ read raw tokens. If your own CSS does read raw tokens, load `unused-styles.css`
|
|
|
286
324
|
href="https://ds-assets.cupra.com/[version]/styles/[theme]/unused-styles.css"
|
|
287
325
|
onLoad={(e) => { e.currentTarget.rel = "stylesheet"; }}
|
|
288
326
|
/>
|
|
289
|
-
<ThemeProvider theme="[theme]"
|
|
327
|
+
<ThemeProvider theme="[theme]" skip-fonts skip-styles skip-unused-styles>
|
|
290
328
|
<Button variant="destructive" icon-name="filters-background">
|
|
291
329
|
Click me
|
|
292
330
|
</Button>
|
|
@@ -297,6 +335,20 @@ read raw tokens. If your own CSS does read raw tokens, load `unused-styles.css`
|
|
|
297
335
|
}
|
|
298
336
|
```
|
|
299
337
|
|
|
338
|
+
<details>
|
|
339
|
+
<summary>Keeping files in sync and self-hosting</summary>
|
|
340
|
+
|
|
341
|
+
Keep the three files in sync with the installed package version. To self-host, download the files and
|
|
342
|
+
serve them from your own domain (and the font files they reference):
|
|
343
|
+
|
|
344
|
+
```bash
|
|
345
|
+
curl -O https://ds-assets.cupra.com/[version]/styles/[theme]/theme.css
|
|
346
|
+
curl -O https://ds-assets.cupra.com/[version]/styles/[theme]/unused-styles.css
|
|
347
|
+
curl -O https://ds-assets.cupra.com/[version]/styles/[theme]/fonts.css
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
</details>
|
|
351
|
+
|
|
300
352
|
### Option B — Provider loads assets automatically
|
|
301
353
|
|
|
302
354
|
```
|
|
@@ -305,38 +357,50 @@ read raw tokens. If your own CSS does read raw tokens, load `unused-styles.css`
|
|
|
305
357
|
|
|
306
358
|
export function App() {
|
|
307
359
|
return (
|
|
308
|
-
<ThemeProvider theme="cupra-diagonal"
|
|
360
|
+
<ThemeProvider theme="cupra-diagonal">
|
|
309
361
|
<Button variant="primary">Button</Button>
|
|
310
362
|
</ThemeProvider>
|
|
311
363
|
);
|
|
312
364
|
}
|
|
313
365
|
```
|
|
314
366
|
|
|
315
|
-
|
|
367
|
+
The provider loads `fonts.css`, `theme.css` and `unused-styles.css` from the CDN for the installed
|
|
368
|
+
`@cupra/ui-kit` version.
|
|
369
|
+
|
|
370
|
+
### Boolean props
|
|
371
|
+
|
|
372
|
+
Boolean props of the wrappers are `false` unless set, on React 18 and on React 19. To turn a behavior
|
|
373
|
+
off, use the matching negative prop (`skip-fonts`, `hide-divider`, `hide-close`...) instead of passing
|
|
374
|
+
`false` to a prop that defaults to `true`. If you are upgrading from an earlier version, see the
|
|
375
|
+
`@cupra/ui-react` changelog for the list of renamed props.
|
|
316
376
|
|
|
317
377
|
## Fonts
|
|
318
378
|
|
|
319
379
|
Each theme publishes `fonts.css` next to `theme.css`. It only declares the theme's `@font-face` rules
|
|
320
380
|
(woff2, `font-display: fallback`), so the browser downloads just the weights a page renders and only
|
|
321
|
-
swaps the typeface within the first ~3 seconds: later, text doesn't shift. `ThemeProvider` adds it
|
|
322
|
-
is
|
|
381
|
+
swaps the typeface within the first ~3 seconds: later, text doesn't shift. `ThemeProvider` adds it unless
|
|
382
|
+
`skip-fonts` is set; with `skip-fonts`, link it yourself as in Option A. That is also the setup for
|
|
323
383
|
server-side rendering, since no JavaScript is needed to load the fonts.
|
|
324
384
|
|
|
385
|
+
<details>
|
|
386
|
+
<summary>Preloading the critical font weights</summary>
|
|
387
|
+
|
|
325
388
|
**Preload the critical weights.** With `fallback` the browser waits about 100 ms for a font, then shows the
|
|
326
389
|
fallback typeface and swaps to the real one if it arrives within ~3 seconds. After that it keeps the
|
|
327
|
-
fallback for that page view and uses the real one on the next, cached, navigation.
|
|
328
|
-
theme next to `fonts.css`, while its
|
|
329
|
-
server-side rendering, add the preloads to your
|
|
330
|
-
|
|
331
|
-
already present. In Next.js, render the `<link>` in
|
|
390
|
+
fallback for that page view and uses the real one on the next, cached, navigation. Unless `skip-fonts` is
|
|
391
|
+
set, `ThemeProvider` preloads the Regular and Medium weights of the theme next to `fonts.css`, while its
|
|
392
|
+
content waits for `theme.css`. With `skip-fonts` or server-side rendering, add the preloads to your
|
|
393
|
+
`<head>` yourself. Adding them there also helps with `ThemeProvider`: the download starts before the
|
|
394
|
+
JavaScript loads, and the provider skips any preload already present. In Next.js, render the `<link>` in
|
|
395
|
+
the root layout; React 19 hoists it to the `<head>`.
|
|
332
396
|
|
|
333
397
|
```tsx
|
|
334
398
|
<link
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
399
|
+
rel="preload"
|
|
400
|
+
as="font"
|
|
401
|
+
type="font/woff2"
|
|
402
|
+
href="https://ds-assets.cupra.com/fonts/[theme]/[font-file].woff2"
|
|
403
|
+
crossOrigin="anonymous"
|
|
340
404
|
/>
|
|
341
405
|
```
|
|
342
406
|
|
|
@@ -346,10 +410,17 @@ already present. In Next.js, render the `<link>` in the root layout; React 19 ho
|
|
|
346
410
|
is not reused: the font downloads twice.
|
|
347
411
|
- The `href` must match the URL in `fonts.css` exactly.
|
|
348
412
|
|
|
349
|
-
|
|
350
|
-
|
|
413
|
+
</details>
|
|
414
|
+
|
|
415
|
+
<details>
|
|
416
|
+
<summary>Font files per theme</summary>
|
|
417
|
+
|
|
418
|
+
| Theme | `font-family` | Font files (`[font-file]`) |
|
|
419
|
+
| ---------------- | -------------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
351
420
|
| `seat` | `seat` | `SeatBcn-Book` (350), `SeatBcn-Regular` (400), `SeatBcn-Medium` (500), `SeatBcn-Bold` (700), `SeatBcn-Black` (900) |
|
|
352
|
-
| `cupra-diagonal` | `cupra-screen` | `CupraScreen-Light` (300), `CupraScreen-Book` (350), `CupraScreen-Regular` (400), `CupraScreen-Medium` (500)
|
|
421
|
+
| `cupra-diagonal` | `cupra-screen` | `CupraScreen-Light` (300), `CupraScreen-Book` (350), `CupraScreen-Regular` (400), `CupraScreen-Medium` (500) |
|
|
422
|
+
|
|
423
|
+
</details>
|
|
353
424
|
|
|
354
425
|
## Icons
|
|
355
426
|
|
|
@@ -367,8 +438,6 @@ import { Icon } from '@cupra/ui-react/Icon';
|
|
|
367
438
|
<img src="https://ds-assets.cupra.com/[version]/assets/icons/[theme]/arrow-right.svg" />
|
|
368
439
|
```
|
|
369
440
|
|
|
370
|
-
---
|
|
371
|
-
|
|
372
441
|
## RTL and internationalization
|
|
373
442
|
|
|
374
443
|
Set `dir` and `lang` on `<html>`; the components follow them. The `cupra` and `seat-legacy` themes have no RTL support. See the `@cupra/ui-kit` README for the full list of what is automatic and what you configure.
|
|
@@ -376,44 +445,45 @@ Set `dir` and `lang` on `<html>`; the components follow them. The `cupra` and `s
|
|
|
376
445
|
A form with an email field that stays left to right inside an RTL page:
|
|
377
446
|
|
|
378
447
|
```tsx
|
|
379
|
-
import { SearchInput } from
|
|
380
|
-
import { TextInput } from
|
|
448
|
+
import { SearchInput } from '@cupra/ui-react/SearchInput';
|
|
449
|
+
import { TextInput } from '@cupra/ui-react/TextInput';
|
|
381
450
|
|
|
382
451
|
export function ContactForm() {
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
452
|
+
return (
|
|
453
|
+
<form dir="rtl" lang="ar">
|
|
454
|
+
<TextInput>
|
|
455
|
+
<input dir="auto" name="name" placeholder="الاسم" />
|
|
456
|
+
</TextInput>
|
|
457
|
+
|
|
458
|
+
<TextInput>
|
|
459
|
+
<input dir="ltr" type="email" name="email" placeholder="name@example.com" />
|
|
460
|
+
</TextInput>
|
|
461
|
+
|
|
462
|
+
<SearchInput>
|
|
463
|
+
<input dir="auto" type="text" name="search" placeholder="بحث" />
|
|
464
|
+
</SearchInput>
|
|
465
|
+
</form>
|
|
466
|
+
);
|
|
398
467
|
}
|
|
399
468
|
```
|
|
400
469
|
|
|
401
|
-
|
|
470
|
+
<details>
|
|
471
|
+
<summary>Translating the accessibility texts</summary>
|
|
402
472
|
|
|
403
473
|
The built-in `aria-label` texts have optional `data-aria-label` props. They are plain strings, so they work in React 18 as they are:
|
|
404
474
|
|
|
405
475
|
```tsx
|
|
406
|
-
import { Calendar } from
|
|
476
|
+
import { Calendar } from '@cupra/ui-react/Calendar';
|
|
407
477
|
|
|
408
478
|
<Calendar
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
479
|
+
locale="ar"
|
|
480
|
+
data-aria-label="التقويم"
|
|
481
|
+
data-aria-label-previous-month="الشهر السابق"
|
|
482
|
+
data-aria-label-next-month="الشهر التالي"
|
|
483
|
+
/>;
|
|
414
484
|
```
|
|
415
485
|
|
|
416
|
-
|
|
486
|
+
</details>
|
|
417
487
|
|
|
418
488
|
## License
|
|
419
489
|
|
|
@@ -421,8 +491,6 @@ SEAT S.A. Library EULA 1.0
|
|
|
421
491
|
See `LICENSE.md` in this package for the full text.
|
|
422
492
|
Third-party attributions may appear in `THIRD_PARTY_LICENSES.md`.
|
|
423
493
|
|
|
424
|
-
---
|
|
425
|
-
|
|
426
494
|
## Support
|
|
427
495
|
|
|
428
|
-
For help and support, contact: **ds.support@seat.es**
|
|
496
|
+
For help and support, contact: **ds.support@seat.es**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-avatar");var a=`ds-avatar${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:r,onClick:o,image:s,...c}=e,{ref:l}=t.useHandleEvent({click:o}),u=s&&(0,n.isValidElement)(s)?(0,n.cloneElement)(s,{slot:`media`,...s.props}):null;return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-avatar");var a=`ds-avatar${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:r,onClick:o,image:s,...c}=e,{ref:l}=t.useHandleEvent({click:o}),u=s&&(0,n.isValidElement)(s)?(0,n.cloneElement)(s,{slot:`media`,...s.props}):null;return(0,i.jsx)(a,{class:r,...c,ref:l,children:u})}exports.Avatar=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-banner");var a=`ds-banner${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClose:o,...s}=e,{ref:c}=t.useHandleEvent({"banner:close":o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-banner");var a=`ds-banner${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClose:o,...s}=e,{ref:c}=t.useHandleEvent({"banner:close":o});return(0,i.jsx)(a,{class:n,...s,ref:c,children:r})}exports.Banner=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-basic-card");var a=`ds-basic-card${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClick:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-basic-card:click":o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-basic-card");var a=`ds-basic-card${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClick:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-basic-card:click":o});return(0,i.jsx)(a,{class:n,...s,ref:c,children:r})}var s=({children:e})=>(0,i.jsx)(`div`,{slot:`featured-text`,children:e});o.FeaturedText=s,s.displayName=`BasicCard.FeaturedText`,exports.BasicCard=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-button");var a=`ds-button${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClick:o,size:s,...c}=e,{ref:l}=t.useHandleEvent({click:o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-button");var a=`ds-button${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClick:o,size:s,...c}=e,{ref:l}=t.useHandleEvent({click:o});return(0,i.jsx)(a,{size:typeof s==`string`?s:JSON.stringify(s),class:n,...c,ref:l,children:r})}exports.Button=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-calendar");var a=`ds-calendar${r.VERSION_TAG_SUFFIX}`;function o({className:e,onChange:n,...r}){let{ref:o}=t.useHandleEvent({"ds-calendar-change":n});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-calendar");var a=`ds-calendar${r.VERSION_TAG_SUFFIX}`;function o({className:e,onChange:n,...r}){let{ref:o}=t.useHandleEvent({"ds-calendar-change":n});return(0,i.jsx)(a,{class:e,...r,ref:o})}exports.Calendar=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-chips");var a=`ds-chips${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-chips:change":o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-chips");var a=`ds-chips${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-chips:change":o});return(0,i.jsx)(a,{class:n,...s,ref:c,children:r})}exports.Chips=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-dialog");let a=require("react-dom");var o=`ds-dialog${r.VERSION_TAG_SUFFIX}`;function s(e){let{className:n,children:r,onClose:s,withPortal:c,...l}=e,{ref:u}=t.useHandleEvent({"ds-dialog:close":s}),d=(0,i.jsx)(o,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-dialog");let a=require("react-dom");var o=`ds-dialog${r.VERSION_TAG_SUFFIX}`;function s(e){let{className:n,children:r,onClose:s,withPortal:c,...l}=e,{ref:u}=t.useHandleEvent({"ds-dialog:close":s}),d=(0,i.jsx)(o,{class:n,...l,ref:u,children:r});return c?(0,a.createPortal)(d,document.body):d}exports.Dialog=s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime"),a=require("react-dom");require("@cupra/ui-kit/react/ds-dialog-fullscreen");var o=`ds-dialog-fullscreen${r.VERSION_TAG_SUFFIX}`;function s(e){let{className:n,children:r,onClose:s,withPortal:c,...l}=e,{ref:u}=t.useHandleEvent({"ds-dialog-fullscreen:close":s}),d=(0,i.jsx)(o,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime"),a=require("react-dom");require("@cupra/ui-kit/react/ds-dialog-fullscreen");var o=`ds-dialog-fullscreen${r.VERSION_TAG_SUFFIX}`;function s(e){let{className:n,children:r,onClose:s,withPortal:c,...l}=e,{ref:u}=t.useHandleEvent({"ds-dialog-fullscreen:close":s}),d=(0,i.jsx)(o,{class:n,...l,ref:u,children:r});return c?(0,a.createPortal)(d,document.body):d}exports.DialogFullscreen=s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-drawer");var a=`ds-drawer${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClose:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-drawer:close":o});return(0,i.jsx)(a,{class:n,ref:c
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-drawer");var a=`ds-drawer${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClose:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-drawer:close":o});return(0,i.jsx)(a,{class:n,...s,ref:c,children:r})}var s=({children:e,...t})=>(0,i.jsx)(`div`,{slot:`header`,...t,children:e}),c=({children:e,...t})=>(0,i.jsx)(`div`,{slot:`content`,...t,children:e}),l=({children:e,...t})=>(0,i.jsx)(`div`,{slot:`footer`,...t,children:e});o.Header=s,o.Content=c,o.Footer=l,s.displayName=`Drawer.Header`,c.displayName=`Drawer.Content`,l.displayName=`Drawer.Footer`,exports.Drawer=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-favourite-action");var a=`ds-favourite-action${r.VERSION_TAG_SUFFIX}`;function o({className:e,initialSelected:n,onChange:r,onClick:o,...s}){let{ref:c}=t.useHandleEvent({"ds-favourite-action:change":e=>{r?.(e.detail.selected)},click:o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-favourite-action");var a=`ds-favourite-action${r.VERSION_TAG_SUFFIX}`;function o({className:e,initialSelected:n,onChange:r,onClick:o,...s}){let{ref:c}=t.useHandleEvent({"ds-favourite-action:change":e=>{r?.(e.detail.selected)},click:o});return(0,i.jsx)(a,{class:e,"initial-selected":n||void 0,...s,ref:c})}exports.FavouriteAction=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-icon-button");var a=`ds-icon-button${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,onClick:r,size:o,...s}=e,{ref:c}=t.useHandleEvent({click:r});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-icon-button");var a=`ds-icon-button${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,onClick:r,size:o,...s}=e,{ref:c}=t.useHandleEvent({click:r});return(0,i.jsx)(a,{size:typeof o==`string`?o:JSON.stringify(o),class:n,...s,ref:c})}exports.IconButton=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-inline-alert");var a=`ds-inline-alert${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClose:o,...s}=e,{ref:c}=t.useHandleEvent({"inline-alert:close":o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-inline-alert");var a=`ds-inline-alert${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClose:o,...s}=e,{ref:c}=t.useHandleEvent({"inline-alert:close":o});return(0,i.jsx)(a,{class:n,...s,ref:c,children:r})}exports.InlineAlert=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-interactive-card");var a=`ds-interactive-card${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClick:o,...s}=e,{ref:c}=t.useHandleEvent({click:o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-interactive-card");var a=`ds-interactive-card${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClick:o,...s}=e,{ref:c}=t.useHandleEvent({click:o});return(0,i.jsx)(a,{class:n,...s,ref:c,children:r})}var s=({children:e})=>(0,i.jsx)(`div`,{slot:`title`,children:e}),c=({children:e})=>(0,i.jsx)(`div`,{slot:`subtitle`,children:e}),l=({children:e})=>(0,i.jsx)(`div`,{slot:`meta`,children:e}),u=({children:e})=>(0,i.jsx)(`div`,{slot:`content`,children:e}),d=({children:e})=>(0,i.jsx)(`div`,{slot:`cta`,children:e}),f=({children:e})=>(0,i.jsx)(`div`,{slot:`error-title`,children:e}),p=({children:e})=>(0,i.jsx)(`div`,{slot:`error-text`,children:e});o.Title=s,o.Subtitle=c,o.Meta=l,o.Content=u,o.Cta=d,o.ErrorTitle=f,o.ErrorText=p,s.displayName=`InteractiveCard.Title`,c.displayName=`InteractiveCard.Subtitle`,l.displayName=`InteractiveCard.Meta`,u.displayName=`InteractiveCard.Content`,d.displayName=`InteractiveCard.Cta`,f.displayName=`InteractiveCard.ErrorTitle`,p.displayName=`InteractiveCard.ErrorText`,exports.InteractiveCard=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-media-control");var a=`ds-media-control${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,onPlay:r,onPause:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-media-control:play":r,"ds-media-control:pause":o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-media-control");var a=`ds-media-control${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,onPlay:r,onPause:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-media-control:play":r,"ds-media-control:pause":o});return(0,i.jsx)(a,{class:n,...s,ref:c})}exports.MediaControl=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");;/* empty css */let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime"),a=require("react-dom");require("@cupra/ui-kit/react/ds-modal");var o=`ds-modal${r.VERSION_TAG_SUFFIX}`;function s(){}function c(e){let{children:n,onClickCloseButton:r=s,onClickConfirmButton:c=s,onClickCancelButton:l=s,className:u,withPortal:d,...f}=e,{ref:p}=t.useHandleEvent({"click-close-button":r,"click-confirm-button":c,"click-cancel-button":l});if(!f.open)return null;let m=(0,i.jsx)(o,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");;/* empty css */let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime"),a=require("react-dom");require("@cupra/ui-kit/react/ds-modal");var o=`ds-modal${r.VERSION_TAG_SUFFIX}`;function s(){}function c(e){let{children:n,onClickCloseButton:r=s,onClickConfirmButton:c=s,onClickCancelButton:l=s,className:u,withPortal:d,...f}=e,{ref:p}=t.useHandleEvent({"click-close-button":r,"click-confirm-button":c,"click-cancel-button":l});if(!f.open)return null;let m=(0,i.jsx)(o,{class:u,...f,ref:p,children:n});return d?(0,a.createPortal)(m,document.body):m}function l({children:e}){return(0,i.jsx)(`div`,{slot:`title`,children:e})}function u({className:e=``,children:t}){return(0,i.jsx)(`div`,{slot:`content`,className:`ds-scroll ${e}`.trim(),children:t})}function d({children:e}){return(0,i.jsx)(`div`,{slot:`content`,className:`ds-modal-full-screen-content`,children:e})}c.Title=l,c.Content=u,c.FullScreenContent=d,exports.Modal=c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-password-input");var a=`ds-password-input${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,onInput:s,inputId:c,placeHolder:l,value:u,label:d,required:f,disabled:p,pattern:m,maxLength:h,minLength:g,..._}=e,{ref:v}=t.useHandleEvent({change:o,input:s}),y={type:`password`,...!!c&&{id:c},...!!l&&{placeholder:l},...!!u&&{value:u},...!!f&&{required:f},...!!p&&{disabled:p},...!!g&&{minLength:g},...!!h&&{maxLength:h},...!!m&&{pattern:m}};return(0,i.jsxs)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-password-input");var a=`ds-password-input${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,onInput:s,inputId:c,placeHolder:l,value:u,label:d,required:f,disabled:p,pattern:m,maxLength:h,minLength:g,..._}=e,{ref:v}=t.useHandleEvent({change:o,input:s}),y={type:`password`,...!!c&&{id:c},...!!l&&{placeholder:l},...!!u&&{value:u},...!!f&&{required:f},...!!p&&{disabled:p},...!!g&&{minLength:g},...!!h&&{maxLength:h},...!!m&&{pattern:m}};return(0,i.jsxs)(a,{class:n,..._,ref:v,children:[(0,i.jsx)(`label`,{htmlFor:c,children:d}),(0,i.jsx)(`input`,{...y})]})}exports.PasswordInput=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-picker-item");var a=`ds-picker-item${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClick:o,size:s,...c}=e,{ref:l}=t.useHandleEvent({"ds-picker-item:click":o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-picker-item");var a=`ds-picker-item${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onClick:o,size:s,...c}=e,{ref:l}=t.useHandleEvent({"ds-picker-item:click":o});return(0,i.jsx)(a,{size:typeof s==`string`?s:JSON.stringify(s),class:n,...c,ref:l,children:r})}exports.PickerItem=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-radio");var a=`ds-radio-group${r.VERSION_TAG_SUFFIX}`,o=`ds-radio${r.VERSION_TAG_SUFFIX}`,s={Group:({children:e,onChange:n,className:r,...o})=>{let{ref:s}=t.useHandleEvent({change:n});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-radio");var a=`ds-radio-group${r.VERSION_TAG_SUFFIX}`,o=`ds-radio${r.VERSION_TAG_SUFFIX}`,s={Group:({children:e,onChange:n,className:r,...o})=>{let{ref:s}=t.useHandleEvent({change:n});return(0,i.jsx)(a,{class:r,...o,ref:s,children:e})},Button:({children:e,className:t,...n})=>(0,i.jsx)(o,{class:t,...n,children:e})};exports.Radio=s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-radio-button-group");var a=`ds-radio-button-group${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,...s}=e,{ref:c}=t.useHandleEvent({change:o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-radio-button-group");var a=`ds-radio-button-group${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,...s}=e,{ref:c}=t.useHandleEvent({change:o});return(0,i.jsx)(a,{class:n,...s,ref:c,children:r})}exports.RadioButtonGroup=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-search-input");var a=`ds-search-input${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,onInput:s,onClickPositionButton:c,placeHolder:l,type:u,value:d,label:f,required:p,disabled:m,pattern:h,maxLength:g,minLength:_,inputProps:v,...y}=e,{ref:b}=t.useHandleEvent({change:o,input:s,"ds-search-input:click-position-button":c});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-search-input");var a=`ds-search-input${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,onInput:s,onClickPositionButton:c,placeHolder:l,type:u,value:d,label:f,required:p,disabled:m,pattern:h,maxLength:g,minLength:_,inputProps:v,...y}=e,{ref:b}=t.useHandleEvent({change:o,input:s,"ds-search-input:click-position-button":c});return(0,i.jsx)(a,{class:n,...y,ref:b,children:(0,i.jsx)(`input`,{type:`text`,"aria-label":f,placeholder:l,value:d,required:p,disabled:m,minLength:_,maxLength:g,pattern:h,...v})})}exports.SearchInput=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-secondary-navigation");var a=`ds-secondary-navigation${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onSelect:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-secondary-navigation:select":o});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-secondary-navigation");var a=`ds-secondary-navigation${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onSelect:o,...s}=e,{ref:c}=t.useHandleEvent({"ds-secondary-navigation:select":o});return(0,i.jsx)(a,{class:n,...s,ref:c,children:r})}o.Item=({children:e,...t})=>(0,i.jsx)(`a`,{slot:`items`,...t,children:e}),o.Actions=({children:e})=>(0,i.jsx)(i.Fragment,{children:n.Children.map(e,(e,t)=>(0,i.jsx)(`div`,{slot:`actions`,children:e},t))}),exports.SecondaryNavigation=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-segmented-control");var a=`ds-segmented-control${r.VERSION_TAG_SUFFIX}`;function o(e){let{onChange:n,className:r,children:o,...s}=e,{ref:c}=t.useHandleEvent({change:n});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-segmented-control");var a=`ds-segmented-control${r.VERSION_TAG_SUFFIX}`;function o(e){let{onChange:n,className:r,children:o,...s}=e,{ref:c}=t.useHandleEvent({change:n});return(0,i.jsx)(a,{class:r,...s,ref:c,children:o})}exports.SegmentedControl=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-slider");var a=`ds-slider${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,size:o,onChange:s,...c}=e,{ref:l}=t.useHandleEvent({change:s});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-slider");var a=`ds-slider${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,size:o,onChange:s,...c}=e,{ref:l}=t.useHandleEvent({change:s});return(0,i.jsx)(a,{size:typeof o==`string`?o:JSON.stringify(o),class:n,...c,ref:l})}exports.Slider=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-static-box");var a=`ds-static-box${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,size:o,...s}=e,{ref:c}=t.useHandleEvent({});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-static-box");var a=`ds-static-box${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,size:o,...s}=e,{ref:c}=t.useHandleEvent({});return(0,i.jsx)(a,{size:typeof o==`string`?o:JSON.stringify(o),class:n,...s,ref:c,children:r})}exports.StaticBox=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-tabs");var a=`ds-tabs${r.VERSION_TAG_SUFFIX}`;function o({children:e,onChange:n,...r}){let{ref:o}=t.useHandleEvent({change:n});return(0,i.jsx)(a,{ref:o
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-tabs");var a=`ds-tabs${r.VERSION_TAG_SUFFIX}`;function o({children:e,onChange:n,...r}){let{ref:o}=t.useHandleEvent({change:n});return(0,i.jsx)(a,{...r,ref:o,children:e})}function s({children:e}){return(0,i.jsx)(`div`,{role:`tab`,slot:`tab`,children:e})}function c({children:e}){return(0,i.jsx)(`div`,{role:`tabpanel`,slot:`panel`,children:e})}o.Tab=s,o.Panel=c,exports.Tabs=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-tag");var a=`ds-tag${r.VERSION_TAG_SUFFIX}`;function o(e){let{children:n,onClickIcon:r,className:o,...s}=e,{ref:c}=t.useHandleEvent({clickicon:r});return(0,i.jsx)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-tag");var a=`ds-tag${r.VERSION_TAG_SUFFIX}`;function o(e){let{children:n,onClickIcon:r,className:o,...s}=e,{ref:c}=t.useHandleEvent({clickicon:r});return(0,i.jsx)(a,{class:o,...s,ref:c,children:n})}exports.Tag=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-text-input");var a=`ds-text-input${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,onInput:s,onKeyDown:c,inputId:l,placeHolder:u,type:d,value:f,label:p,required:m,disabled:h,readOnly:g,pattern:_,maxLength:v,minLength:y,...b}=e,{ref:x}=t.useHandleEvent({change:o,input:s,keydown:c});return(0,i.jsxs)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-text-input");var a=`ds-text-input${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,onInput:s,onKeyDown:c,inputId:l,placeHolder:u,type:d,value:f,label:p,required:m,disabled:h,readOnly:g,pattern:_,maxLength:v,minLength:y,...b}=e,{ref:x}=t.useHandleEvent({change:o,input:s,keydown:c});return(0,i.jsxs)(a,{class:n,...b,ref:x,children:[(0,i.jsx)(`label`,{htmlFor:l,children:p}),(0,i.jsx)(`input`,{id:l,type:d||`text`,placeholder:u,value:f,required:m,disabled:h,readOnly:g,minLength:y,maxLength:v,pattern:_})]})}exports.TextInput=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-textarea");var a=`ds-textarea${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,onInput:s,textareaId:c,placeholder:l,value:u,label:d,required:f,disabled:p,readOnly:m,minLength:h,maxLength:g,rows:_,cols:v,forcedError:y,helperText:b,invalidError:x,...S}=e,{ref:C}=t.useHandleEvent({change:o,input:s});return(0,i.jsxs)(a,{
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-textarea");var a=`ds-textarea${r.VERSION_TAG_SUFFIX}`;function o(e){let{className:n,children:r,onChange:o,onInput:s,textareaId:c,placeholder:l,value:u,label:d,required:f,disabled:p,readOnly:m,minLength:h,maxLength:g,rows:_,cols:v,forcedError:y,helperText:b,invalidError:x,...S}=e,{ref:C}=t.useHandleEvent({change:o,input:s});return(0,i.jsxs)(a,{class:n,"forced-error":y,"helper-text":b,"invalid-error":x,...S,ref:C,children:[(0,i.jsx)(`label`,{htmlFor:c,children:d}),(0,i.jsx)(`textarea`,{id:c,placeholder:l,value:u,required:f,disabled:p,readOnly:m,minLength:h,maxLength:g,rows:_,cols:v})]})}exports.Textarea=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-toggle-switch");var a=`ds-toggle-switch${r.VERSION_TAG_SUFFIX}`;function o({label:e,onChange:n,...r}){let{ref:o}=t.useHandleEvent({change:n});return(0,i.jsxs)(a,{ref:o
|
|
1
|
+
const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../hooks/useHandleEvent.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("@cupra/ui-kit/react/utils/version"),i=require("react/jsx-runtime");require("@cupra/ui-kit/react/ds-toggle-switch");var a=`ds-toggle-switch${r.VERSION_TAG_SUFFIX}`;function o({label:e,onChange:n,...r}){let{ref:o}=t.useHandleEvent({change:n});return(0,i.jsxs)(a,{...r,ref:o,children:[e&&(0,i.jsx)(`div`,{slot:`label`,children:e}),r.children]})}function s({children:e}){return(0,i.jsx)(`div`,{slot:`off`,children:e})}function c({children:e}){return(0,i.jsx)(`div`,{slot:`on`,children:e})}o.Off=s,o.On=c,exports.ToggleSwitch=o;
|
|
@@ -8,10 +8,10 @@ var r = `ds-button${t}`;
|
|
|
8
8
|
function i(t) {
|
|
9
9
|
let { className: i, children: a, onClick: o, size: s, ...c } = t, { ref: l } = e({ click: o });
|
|
10
10
|
return /* @__PURE__ */ n(r, {
|
|
11
|
-
ref: l,
|
|
12
11
|
size: typeof s == "string" ? s : JSON.stringify(s),
|
|
13
12
|
class: i,
|
|
14
13
|
...c,
|
|
14
|
+
ref: l,
|
|
15
15
|
children: a
|
|
16
16
|
});
|
|
17
17
|
}
|
|
@@ -8,9 +8,9 @@ import { createPortal as r } from "react-dom";
|
|
|
8
8
|
var i = `ds-dialog${t}`;
|
|
9
9
|
function a(t) {
|
|
10
10
|
let { className: a, children: o, onClose: s, withPortal: c, ...l } = t, { ref: u } = e({ "ds-dialog:close": s }), d = /* @__PURE__ */ n(i, {
|
|
11
|
-
ref: u,
|
|
12
11
|
class: a,
|
|
13
12
|
...l,
|
|
13
|
+
ref: u,
|
|
14
14
|
children: o
|
|
15
15
|
});
|
|
16
16
|
return c ? r(d, document.body) : d;
|
|
@@ -8,9 +8,9 @@ import "@cupra/ui-kit/react/ds-dialog-fullscreen";
|
|
|
8
8
|
var i = `ds-dialog-fullscreen${t}`;
|
|
9
9
|
function a(t) {
|
|
10
10
|
let { className: a, children: o, onClose: s, withPortal: c, ...l } = t, { ref: u } = e({ "ds-dialog-fullscreen:close": s }), d = /* @__PURE__ */ n(i, {
|
|
11
|
-
ref: u,
|
|
12
11
|
class: a,
|
|
13
12
|
...l,
|
|
13
|
+
ref: u,
|
|
14
14
|
children: o
|
|
15
15
|
});
|
|
16
16
|
return c ? r(d, document.body) : d;
|
|
@@ -8,10 +8,10 @@ var r = `ds-icon-button${t}`;
|
|
|
8
8
|
function i(t) {
|
|
9
9
|
let { className: i, onClick: a, size: o, ...s } = t, { ref: c } = e({ click: a });
|
|
10
10
|
return /* @__PURE__ */ n(r, {
|
|
11
|
-
ref: c,
|
|
12
11
|
size: typeof o == "string" ? o : JSON.stringify(o),
|
|
13
12
|
class: i,
|
|
14
|
-
...s
|
|
13
|
+
...s,
|
|
14
|
+
ref: c
|
|
15
15
|
});
|
|
16
16
|
}
|
|
17
17
|
//#endregion
|
|
@@ -8,10 +8,10 @@ var r = `ds-picker-item${t}`;
|
|
|
8
8
|
function i(t) {
|
|
9
9
|
let { className: i, children: a, onClick: o, size: s, ...c } = t, { ref: l } = e({ "ds-picker-item:click": o });
|
|
10
10
|
return /* @__PURE__ */ n(r, {
|
|
11
|
-
ref: l,
|
|
12
11
|
size: typeof s == "string" ? s : JSON.stringify(s),
|
|
13
12
|
class: i,
|
|
14
13
|
...c,
|
|
14
|
+
ref: l,
|
|
15
15
|
children: a
|
|
16
16
|
});
|
|
17
17
|
}
|
|
@@ -8,9 +8,9 @@ var r = `ds-radio-group${t}`, i = `ds-radio${t}`, a = {
|
|
|
8
8
|
Group: ({ children: t, onChange: i, className: a, ...o }) => {
|
|
9
9
|
let { ref: s } = e({ change: i });
|
|
10
10
|
return /* @__PURE__ */ n(r, {
|
|
11
|
-
ref: s,
|
|
12
11
|
class: a,
|
|
13
12
|
...o,
|
|
13
|
+
ref: s,
|
|
14
14
|
children: t
|
|
15
15
|
});
|
|
16
16
|
},
|
|
@@ -8,9 +8,9 @@ var a = `ds-secondary-navigation${n}`;
|
|
|
8
8
|
function o(t) {
|
|
9
9
|
let { className: n, children: r, onSelect: o, ...s } = t, { ref: c } = e({ "ds-secondary-navigation:select": o });
|
|
10
10
|
return /* @__PURE__ */ i(a, {
|
|
11
|
-
ref: c,
|
|
12
11
|
class: n,
|
|
13
12
|
...s,
|
|
13
|
+
ref: c,
|
|
14
14
|
children: r
|
|
15
15
|
});
|
|
16
16
|
}
|
|
@@ -8,10 +8,10 @@ var r = `ds-slider${t}`;
|
|
|
8
8
|
function i(t) {
|
|
9
9
|
let { className: i, children: a, size: o, onChange: s, ...c } = t, { ref: l } = e({ change: s });
|
|
10
10
|
return /* @__PURE__ */ n(r, {
|
|
11
|
-
ref: l,
|
|
12
11
|
size: typeof o == "string" ? o : JSON.stringify(o),
|
|
13
12
|
class: i,
|
|
14
|
-
...c
|
|
13
|
+
...c,
|
|
14
|
+
ref: l
|
|
15
15
|
});
|
|
16
16
|
}
|
|
17
17
|
//#endregion
|
|
@@ -8,10 +8,10 @@ var r = `ds-static-box${t}`;
|
|
|
8
8
|
function i(t) {
|
|
9
9
|
let { className: i, children: a, size: o, ...s } = t, { ref: c } = e({});
|
|
10
10
|
return /* @__PURE__ */ n(r, {
|
|
11
|
-
ref: c,
|
|
12
11
|
size: typeof o == "string" ? o : JSON.stringify(o),
|
|
13
12
|
class: i,
|
|
14
13
|
...s,
|
|
14
|
+
ref: c,
|
|
15
15
|
children: a
|
|
16
16
|
});
|
|
17
17
|
}
|
|
@@ -11,12 +11,12 @@ function a(t) {
|
|
|
11
11
|
input: c
|
|
12
12
|
});
|
|
13
13
|
return /* @__PURE__ */ r(i, {
|
|
14
|
-
ref: w,
|
|
15
14
|
class: a,
|
|
16
15
|
"forced-error": b,
|
|
17
16
|
"helper-text": x,
|
|
18
17
|
"invalid-error": S,
|
|
19
18
|
...C,
|
|
19
|
+
ref: w,
|
|
20
20
|
children: [/* @__PURE__ */ n("label", {
|
|
21
21
|
htmlFor: l,
|
|
22
22
|
children: f
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cupra/ui-react",
|
|
3
|
-
"version": "2.0.0-canary.
|
|
3
|
+
"version": "2.0.0-canary.265",
|
|
4
4
|
"description": "React components library",
|
|
5
5
|
"author": "SEAT S.A.",
|
|
6
6
|
"license": "SEAT S.A. Library EULA 1.0",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
}
|
|
51
51
|
],
|
|
52
52
|
"peerDependencies": {
|
|
53
|
-
"@cupra/ui-kit": "2.0.0-canary.
|
|
53
|
+
"@cupra/ui-kit": "2.0.0-canary.249",
|
|
54
54
|
"react": ">= 18.3.1 < 20",
|
|
55
55
|
"react-dom": ">= 18.3.1 < 20",
|
|
56
56
|
"typescript": ">=5.0.0"
|
|
@@ -60,7 +60,8 @@
|
|
|
60
60
|
"@storybook/addon-vitest": "^10.6.2",
|
|
61
61
|
"@storybook/react": "^10.6.2",
|
|
62
62
|
"@storybook/react-vite": "^10.6.2",
|
|
63
|
-
"@testing-library/
|
|
63
|
+
"@testing-library/dom": "^10.4.2",
|
|
64
|
+
"@testing-library/react": "^16.3.3",
|
|
64
65
|
"@testing-library/user-event": "^14.6.7",
|
|
65
66
|
"@types/react": "^18.3.31",
|
|
66
67
|
"@types/react-dom": "^18.3.7",
|
|
@@ -74,11 +75,12 @@
|
|
|
74
75
|
"storybook": "^10.6.2",
|
|
75
76
|
"typescript": "^5.9.3",
|
|
76
77
|
"vite": "^8.3.3",
|
|
77
|
-
"@cupra/ui-kit": "2.0.0-canary.
|
|
78
|
+
"@cupra/ui-kit": "2.0.0-canary.249"
|
|
78
79
|
},
|
|
79
80
|
"scripts": {
|
|
80
81
|
"build": "rm -rf dist && pnpm --filter @cupra/ui-kit build:react && tsc --declaration --emitDeclarationOnly && BUILD_FORMAT=esm vite build --emptyOutDir false && BUILD_FORMAT=cjs vite build --emptyOutDir false",
|
|
81
82
|
"test": "vitest run --project unit",
|
|
83
|
+
"type-check": "tsc --noEmit -p tsconfig.json",
|
|
82
84
|
"test:storybook": "vitest run --project storybook-cupra-diagonal --project storybook-seat",
|
|
83
85
|
"generate-licenses": "generate-license-file --input package.json --output THIRD_PARTY_LICENSES.MD --overwrite --ci",
|
|
84
86
|
"storybook:cupra-diagonal": "pnpm --filter ui-kit build:react:dev && storybook dev --config-dir .storybook/themes/cupra-diagonal -p 6008",
|