@cupra/ui-react 0.1.0-canary.0 → 1.0.0-canary.10

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.
Files changed (59) hide show
  1. package/README.md +117 -139
  2. package/THIRD_PARTY_LICENSES.MD +81 -0
  3. package/dist/components/Accordion/stories/CupraDiagonal.stories.d.ts +5 -0
  4. package/dist/components/Avatar/stories/CupraDiagonal.stories.d.ts +8 -0
  5. package/dist/components/Button/Button.js +14 -5
  6. package/dist/components/Button/stories/CupraDiagonal.stories.d.ts +19 -0
  7. package/dist/components/CarouselIndicator/stories/CupraDiagonal.stories.d.ts +8 -0
  8. package/dist/components/Checkbox/stories/CupraDiagonal.stories.d.ts +20 -0
  9. package/dist/components/Chip/stories/CupraDiagonal.stories.d.ts +7 -0
  10. package/dist/components/Chips/stories/CupraDiagonal.stories.d.ts +5 -0
  11. package/dist/components/Currency/stories/CupraDiagonal.stories.d.ts +13 -0
  12. package/dist/components/Dialog/stories/CupraDiagonal.stories.d.ts +5 -0
  13. package/dist/components/DialogBody/stories/CupraDiagonal.stories.d.ts +5 -0
  14. package/dist/components/DialogFooter/stories/CupraDiagonal.stories.d.ts +5 -0
  15. package/dist/components/DialogHeader/stories/CupraDiagonal.stories.d.ts +5 -0
  16. package/dist/components/Divider/stories/CupraDiagonal.stories.d.ts +8 -0
  17. package/dist/components/Icon/stories/CupraDiagonal.stories.d.ts +5 -0
  18. package/dist/components/IconButton/IconButton.js +12 -4
  19. package/dist/components/IconButton/stories/CupraDiagonal.stories.d.ts +13 -0
  20. package/dist/components/InteractiveCard/InteractiveCard.d.ts +55 -0
  21. package/dist/components/InteractiveCard/InteractiveCard.js +26 -0
  22. package/dist/components/InteractiveCard/stories/CupraDiagonal.stories.d.ts +9 -0
  23. package/dist/components/LinkButton/stories/CupraDiagonal.stories.d.ts +9 -0
  24. package/dist/components/Logo/stories/CupraDiagonal.stories.d.ts +10 -0
  25. package/dist/components/MapPin/stories/CupraDiagonal.stories.d.ts +7 -0
  26. package/dist/components/PasswordInput/PasswordInput.js +29 -32
  27. package/dist/components/PasswordInput/stories/CupraDiagonal.stories.d.ts +11 -0
  28. package/dist/components/PickerItem/PickerItem.d.ts +1 -1
  29. package/dist/components/PickerItem/PickerItem.js +14 -5
  30. package/dist/components/PickerItem/stories/CupraDiagonal.stories.d.ts +12 -0
  31. package/dist/components/RadioButton/stories/CupraDiagonal.stories.d.ts +12 -0
  32. package/dist/components/RadioButtonGroup/stories/CupraDiagonal.stories.d.ts +5 -0
  33. package/dist/components/SearchInput/stories/CupraDiagonal.stories.d.ts +5 -0
  34. package/dist/components/SecondaryNavigation/stories/CupraDiagonal.stories.d.ts +5 -0
  35. package/dist/components/SegmentedControl/stories/CupraDiagonal.stories.d.ts +7 -0
  36. package/dist/components/Select/stories/CupraDiagonal.stories.d.ts +5 -0
  37. package/dist/components/SidebarNavigation/stories/CupraDiagonal.stories.d.ts +5 -0
  38. package/dist/components/Slider/Slider.js +11 -4
  39. package/dist/components/Slider/stories/CupraDiagonal.stories.d.ts +5 -0
  40. package/dist/components/StaticBox/StaticBox.js +15 -6
  41. package/dist/components/StaticBox/stories/CupraDiagonal.stories.d.ts +5 -0
  42. package/dist/components/Stepper/stories/CupraDiagonal.stories.d.ts +9 -0
  43. package/dist/components/Tabs/stories/CupraDiagonal.stories.d.ts +8 -0
  44. package/dist/components/Tag/stories/CupraDiagonal.stories.d.ts +8 -0
  45. package/dist/components/Text/stories/CupraDiagonal.stories.d.ts +5 -0
  46. package/dist/components/TextInput/stories/CupraDiagonal.stories.d.ts +8 -0
  47. package/dist/components/Textarea/stories/CupraDiagonal.stories.d.ts +11 -0
  48. package/dist/components/ThemeProvider/ThemeProvider.d.ts +2 -2
  49. package/dist/components/Toast/stories/CupraDiagonal.stories.d.ts +10 -0
  50. package/dist/components/ToastMessage/ToastMessage.d.ts +1 -2
  51. package/dist/components/ToastMessage/stories/CupraDiagonal.stories.d.ts +12 -0
  52. package/dist/components/ToggleSwitch/stories/CupraDiagonal.stories.d.ts +10 -0
  53. package/dist/components/index.d.ts +1 -1
  54. package/dist/hooks/useHandleEvent.js +18 -16
  55. package/dist/index.js +1 -1
  56. package/dist/packages/ui-kit/dist-react/index.js +931 -910
  57. package/package.json +15 -6
  58. package/dist/components/interactive-card/InteractiveCard.d.ts +0 -34
  59. package/dist/components/interactive-card/InteractiveCard.js +0 -19
package/README.md CHANGED
@@ -1,193 +1,171 @@
1
1
  # UI React (React Components)
2
2
 
3
3
  ## Overview
4
- React components and wrappers built on top of the DS-UI Web Components to provide a seamless React developer experience.
4
+ React components and wrappers built on top of the DS-UI Web Components, providing a seamless and idiomatic developer experience for React.
5
+ This package exposes React-friendly APIs (props, JSX, typed events) while preserving the DS-UI theming, styling, and asset resolution model.
5
6
 
6
7
  ## Audience
7
- React developers who want to use DS-UI components natively in React applications.
8
+ Use `@cupra/ui-react` if your application is built with **React** and you want:
8
9
 
9
- ## Installation
10
- - npm: `npm install @cupra/ui-react`
11
- - pnpm: `pnpm add @cupra/ui-react`
12
- - yarn: `yarn add @cupra/ui-react`
13
-
14
- Access to the @cupra registry is required (see Requirements).
10
+ - First-class React ergonomics with DS-UI components
11
+ - Automatic integration with the underlying Web Components
12
+ - Full theming support with minimal configuration
13
+ - A smooth adoption path inside existing React codebases
15
14
 
16
- ## Usage
17
-
18
- <details><summary>View usage instructions</summary>
15
+ If you need a **framework-agnostic** solution, consider `@cupra/ui-kit` (Web Components).
19
16
 
20
- In React, the components can be imported from the `@cupra/ui-react` package. Each component has isolated styling and will not conflict with other versions of the library that may be loaded on the same page.
17
+ ## Requirements & Compatibility
21
18
 
22
- ### Loading the CSS
19
+ This library currently provides **official support for React 18**.
23
20
 
24
- You can load the CSS directly with a `<link>`, which is the most performant option. Specify the theme and version in the URL:
21
+ - **Supported React versions:** `>=18.3.1 <20`
25
22
 
26
- ```html
27
- <link rel='stylesheet' href='https://ds-assets.cupra.com/[version]/styles/[theme]/theme.css'>
28
- ```
23
+ Projects using other React versions may still install and use the library, but behaviour is not guaranteed until official support is released.
29
24
 
30
- - **[theme]**: Specify the theme name (e.g., `cupra`).
31
- - **[version]**: Use the fixed version, such as `1.0`, `1.1.1`, etc.
25
+ ## Installation
32
26
 
33
- Alternatively, you can use the `ThemeProvider` component to load the theme directly in your React application by setting the `theme` attribute. This approach eliminates the need to include a separate `<link>` tag for the stylesheet. However, from a performance perspective, using a `<link>` to load the CSS is generally more efficient.
27
+ ### Install the package
28
+ - npm: `npm install @cupra/ui-react`
29
+ - pnpm: `pnpm add @cupra/ui-react`
30
+ - yarn: `yarn add @cupra/ui-react`
34
31
 
35
- Additionally, the `ThemeProvider` **is necessary** for the proper loading of **icons** and **fonts**.
32
+ ### Registry configuration (only if needed)
36
33
 
37
- Example:
34
+ **.npmrc**
38
35
 
39
- ```javascript
40
- import { Button, ThemeProvider, Icon, Modal, Tag, Input } from '@cupra/ui-react';
36
+ ```ini
37
+ @cupra:registry=https://registry.npmjs.org
38
+ ```
41
39
 
42
- function App() {
43
- const [count, setCount] = useState(0);
40
+ **.yarnrc.yml**
44
41
 
45
- return (
46
- <ThemeProvider theme="cupra">
47
- <Button variant="destructive" icon-name="filters-background">Click me!</Button>
48
- <Icon icon-name="filters-background"></Icon>
49
- </ThemeProvider>
50
- );
51
- }
42
+ ```yaml
43
+ npmScopes:
44
+ cupra:
45
+ npmRegistryServer: "https://registry.npmjs.org"
52
46
  ```
53
- </details>
54
-
55
- ## Requirements
56
- - Node.js per .nvmrc
57
- - pnpm 9.4.0 or compatible
58
- - Access to GitHub Packages for @cupra (configure .npmrc or .yarnrc.yml with your token)
59
47
 
60
- ## Versioning
61
- This package follows semantic versioning. See repository releases for changes.
62
- Note: @cupra/ui-react depends on @cupra/ui-kit.
48
+ ---
63
49
 
64
- ## License
65
- License: SEAT S.A. Library EULA 1.0
66
- See LICENSE.md in this package for the full text. Third-party license attributions (if any) may be provided in THIRD_PARTY_LICENSES.md.
50
+ ## Documentation & Live Playground
67
51
 
68
- ## Support
69
- Please open issues in the repository issue tracker.
52
+ You can explore all `ui-react` Components, their APIs, theming options and live examples in the online documentation and playground:
70
53
 
71
- For contributing and monorepo details, see the root CONTRIBUTING.md.
54
+ [https://diagonal.cupra.com/ui-react/index.html](https://diagonal.cupra.com/ui-react/index.html)
72
55
 
73
56
  ---
74
57
 
75
- ## Toast System
58
+ ## Versioning and Release Channels
59
+
60
+ This package is distributed through npm using **two release channels**.
76
61
 
77
- <details><summary>Toast</summary>
62
+ ### Stable Releases (`latest`)
63
+ Production-ready versions:
78
64
 
79
- React exposes:
80
- - **`<Toast />`** container that renders toast messages.
81
- - **`<ToastMessage />`** reusable toast message template.
82
- - **`Toast.add(options)`** — utility function to **add** a toast from anywhere in your app. Returns the `id` of the created toast.
65
+ - Follow Semantic Versioning
66
+ - Include only validated changes
67
+ - Recommended for all production apps
83
68
 
84
- > **Note:**
85
- > The recommended behavior is to let toasts close automatically after `duration` or by user interaction.
86
- > Programmatic removal should only be used when necessary.
69
+ Install:
87
70
 
88
- ### Basic Setup
71
+ ```bash
72
+ npm install @cupra/ui-react
73
+ ```
89
74
 
90
- ```jsx
91
- import { Toast } from '@cupra/ui-react';
75
+ Specific version:
92
76
 
93
- export function AppRoot() {
94
- return (
95
- <>
96
- {/* Place this once near the root of your app */}
97
- <Toast position="top-right" />
98
- {/* ...rest of your app */}
99
- </>
100
- );
101
- }
77
+ ```bash
78
+ npm install @cupra/ui-react@0.1.3
102
79
  ```
103
80
 
104
- ### Showing a Toast with `Toast.add`
81
+ ---
105
82
 
106
- ```jsx
107
- import { Toast } from '@cupra/ui-react';
83
+ ### Canary Releases (`canary`)
84
+ Early-access versions published after each merge into `main`.
108
85
 
109
- function Example() {
110
- const handleClick = () => {
111
- Toast.add({
112
- title: 'Success',
113
- text: 'Operation completed successfully',
114
- status: 'success',
115
- duration: 5000, // Optional (ms). Default: 10000
116
- // id: 'custom-id-optional', // Optional custom ID
117
- // referenceId: 'my-template-id', // Optional template reference
118
- });
119
- };
86
+ Use canary releases if you:
120
87
 
121
- return <button onClick={handleClick}>Show toast</button>;
122
- }
123
- ```
88
+ - Want to preview upcoming changes
89
+ - Are validating new features
90
+ - Accept small instability or rapid iteration
124
91
 
125
- ### Using Custom Templates with `<ToastMessage />`
126
-
127
- ```jsx
128
- import { Toast, ToastMessage } from '@cupra/ui-react';
129
-
130
- export function Templates() {
131
- return (
132
- <>
133
- <Toast position="top-right" />
134
-
135
- {/* Reusable template */}
136
- <ToastMessage
137
- data-id="custom-template"
138
- title="Custom Toast"
139
- text="You can put custom content here"
140
- onClose={() => console.log('Template toast closed')}
141
- >
142
- <button>Action</button>
143
- </ToastMessage>
144
- </>
145
- );
146
- }
92
+ Latest canary:
93
+
94
+ ```bash
95
+ npm install @cupra/ui-react@canary
147
96
  ```
148
97
 
149
- Trigger a toast using that template:
98
+ Specific canary version:
150
99
 
151
- ```jsx
152
- Toast.add({ referenceId: 'custom-template', duration: 8000 });
100
+ ```bash
101
+ npm install @cupra/ui-react@0.1.4-canary.2
153
102
  ```
154
103
 
155
- ### Removing a Toast (Optional)
104
+ ---
156
105
 
157
- It’s preferable to let toasts close automatically or via user interaction.
158
- If you need to close one programmatically:
106
+ ## Recommended usage
159
107
 
160
- - By **`id`**: each toast has a unique ID (auto-generated unless provided manually).
161
- - By **`referenceId`**: refers to a template; if several toasts share the same template ID, only one (the oldest) will be removed.
108
+ - **Production:** use **stable versions (e.g. `@cupra/ui-react@1.1.3`)**
109
+ - **Internal testing / preview:** use **`canary`** (e.g. `@cupra/ui-react@canary` or `@cupra/ui-react@0.1.4-canary.2`)
162
110
 
163
- ```javascript
164
- // Remove by ID
165
- window.dispatchEvent(new CustomEvent('toast:remove', { detail: { id: 'my-toast-id' } }));
111
+ ```bash
112
+ npm install @cupra/ui-react@0.1.4-canary.2
113
+ ```
166
114
 
167
- // Remove by referenceId (template)
168
- window.dispatchEvent(new CustomEvent('toast:remove', { detail: { referenceId: 'custom-template' } }));
115
+ ---
116
+
117
+ ## Usage
118
+
119
+ Wrap your React app with the `ThemeProvider`.
120
+ The provider requires **three props**:
121
+
122
+ | Prop | Type | Required | Description |
123
+ |------------|---------|----------|-----------------------------------------------|
124
+ | `theme` | string | Yes | Visual theme identifier (e.g. cupra-diagonal) |
125
+ | `loadFonts` | boolean | Yes | Auto-load DS-UI font files |
126
+ | `loadStyles` | boolean | Yes | Auto-load DS-UI CSS |
127
+
128
+ If `loadFonts` or `loadStyles` are `false`, you must manually include `<link>` tags in your HTML.
129
+
130
+ ### Option A — Manual CSS and font links
131
+
132
+ ```tsx
133
+ import { ThemeProvider, Button, Icon } from '@cupra/ui-react';
134
+
135
+ export function App() {
136
+ return (
137
+ <>
138
+ <link rel="preload" as="style" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
139
+ <link rel="stylesheet" href="https://ds-assets.cupra.com/[version]/styles/cupra/theme.css" />
140
+ <ThemeProvider theme="cupra" loadFonts={false} loadStyles={false}>
141
+ <Button variant="destructive" icon-name="filters-background">Click me</Button>
142
+ <Icon icon-name="filters-background" />
143
+ </ThemeProvider>
144
+ </>
145
+ );
146
+ }
169
147
  ```
170
148
 
171
- ### API for `Toast.add(options)`
149
+ ### Option B — Provider loads assets automatically
172
150
 
173
- | Option | Type | Description |
174
- |--------|------|-------------|
175
- | **id** | `string` | Optional custom identifier. If not provided, a unique one is auto-generated. |
176
- | **title** | `string` | Title text for the toast. |
177
- | **text** | `string` | Body content of the toast. |
178
- | **status** | `string` | One of `'success'`, `'error'`, `'warning'`, `'info'`, `'default'`. Controls the visual style. |
179
- | **duration** | `number` | Time in milliseconds before auto-dismiss. Defaults to `10000`. |
180
- | **referenceId** | `string` | ID of a `<ToastMessage />` template. If set, `title`, `text`, and `status` are ignored. |
151
+ ```tsx
152
+ import { ThemeProvider, Button } from '@cupra/ui-react';
181
153
 
182
- ### Component Props
154
+ export function App() {
155
+ return (
156
+ <ThemeProvider theme="cupra" loadFonts={true} loadStyles={true}>
157
+ <Button variant="primary">Button</Button>
158
+ </ThemeProvider>
159
+ );
160
+ }
161
+ ```
183
162
 
184
- **`<Toast />`**
185
- - `position`: `'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'` (default: `'top-right'`).
163
+ ---
186
164
 
187
- **`<ToastMessage />`**
188
- - `data-id`: template identifier.
189
- - `data-template`: (default = `true`) marks it as a template.
190
- - `title`, `text`, `status`: same meaning as in `Toast.add`.
191
- - `onClose`: callback triggered when the toast closes (auto, user, or removal event).
165
+ ## License
166
+ License: SEAT S.A. Library EULA 1.0
167
+ See `LICENSE.md` in this package for the full text.
168
+ Third-party attributions may appear in `THIRD_PARTY_LICENSES.md`.
192
169
 
193
- </details>
170
+ ## Support
171
+ For help and support, contact: **ds.support@seat.es**
@@ -0,0 +1,81 @@
1
+ This file was generated with the generate-license-file npm package!
2
+ https://www.npmjs.com/package/generate-license-file
3
+
4
+ The following npm package may be included in this product:
5
+
6
+ - @cupra/ui-kit@1.0.0-canary.3
7
+
8
+ This package contains the following license:
9
+
10
+ # SEAT, S.A. Library EULA 1.0
11
+
12
+ SEAT, S.A.U. (hereinafter, “SEAT”) is a Spanish entity domiciled in Martorell (Barcelona), Autovía A-2, Km. 585, with a Tax Identification Number (C.I.F.) A-28.049.161, duly registered in the Mercantile Registry of Barcelona in Volume 23.662, folio 1, page number B-56.855 and whose contact email is **ds.support@seat.es**
13
+ SEAT releases this End-User License Agreement (“EULA”) to specify the rights and obligations when using a library or package applicable to this EULA (“Library”).
14
+
15
+ ## Library Specification
16
+ The specification of the Library does not form part of this EULA and is instead provided separately thought appropriate documentation accompanying the aforementioned Library. The Library is intended solely to support SEAT´s internal development projects.
17
+
18
+ ## License Grant
19
+ SEAT hereby declares that all source code, files, fonts and other associated assets comprising the Library are the exclusive property of SEAT and/or its licensors.
20
+ Subject to the terms and conditions of this EULA, SEAT grants you a limited, non-exclusive, non-transferable, and revocable license to download, install and use the Library strictly in accordance with this EULA.
21
+ Any breach of the limitations or restrictions set forth herein shall result in the immediate and automatic termination of the license granted. Any use of the Library beyond the scope of the license shall constitute an infringement of SEAT´s intellectual property rights and a material breach of this EULA. In the event of any such violation, the license shall automatically and immediately terminate without prior notice.
22
+ If you violate any of these limitations or restrictions, the license grant will automatically and immediately expire. Any usage of the Library outside the scope of the applicable license constitutes an infringement of SEAT´s intellectual property rights as well as a material breach of this EULA.
23
+
24
+ ## Restrictions on Use
25
+ You agree that you shall not, and shall not permit any third party to:
26
+
27
+ 1. license, sell, rent, lease, assign, distribute, transmit, host, outsource, disclose or otherwise commercially exploit the Library, or make the Library available to any third party in any manner;
28
+ 2. provide, disclose, or otherwise make accessible any features, functionalities, or components of the Library to any individual or entity outside your organization;
29
+ 3. Modify, reverse engineer, decompile or disassemble, or otherwise attempt to derive the source code, algorithms, methods or techniques of the Library;
30
+ 4. Remove, alter or obscure any proprietary notices, trademarks, labels or other intellectual property markings contained in or affixed to the Library;
31
+ 5. translate, adapt, arrange, or create derivative works based on the Library, or otherwise modify the Library, except as expressly permitted under this EULA;
32
+ 6. Use the Library in any manner that exceeds or is inconsistent with the rights granted under this EULA. The Library may be used solely for the purpose or in any context outside the scope of your business relationship with SEAT.
33
+
34
+ ## Copyright and ownership
35
+ SEAT and its licensors retain all right, title, and interest in and to the Library, including without limitation, all associated copyrights, trademarks, trade secrets, patents, and other intellectual property rights.
36
+ You are granted only the limited rights expressly set forth in the EULA. You acknowledge and agree that the Library is licensed, not sold, and that no ownership rights are transferred to you under this Agreement. All rights not expressly granted herein are reserved by SEAT and its licensors.
37
+
38
+ ## Modifications and availability
39
+ SEAT reserves the right, at its sole discretion, to modify, suspend, or discontinue temporarily or permanently, the Library or any related services, with or without prior notice, and without incurring any liability to you or any third party.
40
+ You acknowledge that the Library is not subject to regular maintenance or updates. Any updates, enhancements, or modifications shall be provided solely at SEAT´s discretion and without any obligation to do so.
41
+
42
+ ## Limitation of Liability
43
+ To the maximum extent permitted by applicable law, SEAT and its licensors shall not be liable for any indirect, incidental, special, consequential, or punitive damages, including but not limited to loss of profits, data, or business opportunities, arising out of or in connection with the use or inability to use the Library, even if SEAT has been advised of the possibility of such damages. SEAT´s total liability under this EULA shall in no event exceed the amount paid by you (if any) for the use of the Library.
44
+
45
+ ## Governing Law and Dispute resolution
46
+ This EULA shall be governed by and construed in accordance with the common laws of Spain, without regard to its conflict of law principles. Any dispute, controversy, or claim arising out of or in connection with this EULA shall be submitted to the exclusive jurisdiction of the courts of the city of Barcelona (Spain).
47
+
48
+ -----------
49
+
50
+ The following npm package may be included in this product:
51
+
52
+ - styled-components@6.1.19
53
+
54
+ This package contains the following license:
55
+
56
+ MIT License
57
+
58
+ Copyright (c) 2016-present Glen Maddern and Maximilian Stoiber
59
+
60
+ Permission is hereby granted, free of charge, to any person obtaining a copy
61
+ of this software and associated documentation files (the "Software"), to deal
62
+ in the Software without restriction, including without limitation the rights
63
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
64
+ copies of the Software, and to permit persons to whom the Software is
65
+ furnished to do so, subject to the following conditions:
66
+
67
+ The above copyright notice and this permission notice shall be included in all
68
+ copies or substantial portions of the Software.
69
+
70
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
71
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
72
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
73
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
74
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
75
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
76
+ SOFTWARE.
77
+
78
+ -----------
79
+
80
+ This file was generated with the generate-license-file npm package!
81
+ https://www.npmjs.com/package/generate-license-file
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Default: Story;
@@ -0,0 +1,8 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const DefaultIcon: Story;
6
+ export declare const WithInitials: Story;
7
+ export declare const WithImage: Story;
8
+ export declare const Disabled: Story;
@@ -1,10 +1,19 @@
1
- import { jsx as s } from "react/jsx-runtime";
1
+ import { jsx as c } from "react/jsx-runtime";
2
2
  import "react";
3
- import { useHandleEvent as i } from "../../hooks/useHandleEvent.js";
3
+ import { useHandleEvent as m } from "../../hooks/useHandleEvent.js";
4
4
  import "../../packages/ui-kit/dist-react/index.js";
5
- function u(t) {
6
- const { className: o, children: r, onClick: n, ...c } = t, { ref: e } = i({ click: n });
7
- return /* @__PURE__ */ s("ds-button-react", { ref: e, class: o, ...c, children: r });
5
+ function u(o) {
6
+ const { className: r, children: s, onClick: e, size: t, ...i } = o, { ref: n } = m({ click: e });
7
+ return /* @__PURE__ */ c(
8
+ "ds-button-react",
9
+ {
10
+ ref: n,
11
+ size: typeof t == "string" ? t : JSON.stringify(t),
12
+ class: r,
13
+ ...i,
14
+ children: s
15
+ }
16
+ );
8
17
  }
9
18
  export {
10
19
  u as Button
@@ -0,0 +1,19 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Primary: Story;
6
+ export declare const Secondary: Story;
7
+ export declare const Tertiary: Story;
8
+ export declare const Text: Story;
9
+ export declare const PrimaryDestructive: Story;
10
+ export declare const SecondaryDestructive: Story;
11
+ export declare const TextDestructive: Story;
12
+ export declare const PrimaryDisabled: Story;
13
+ export declare const SecondaryDisabled: Story;
14
+ export declare const TertiaryDisabled: Story;
15
+ export declare const TextDisabled: Story;
16
+ export declare const Medium: Story;
17
+ export declare const Small: Story;
18
+ export declare const CustomWithAnchorChildren: Story;
19
+ export declare const CustomWithButtonChildren: Story;
@@ -0,0 +1,8 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const InfiniteStart: Story;
6
+ export declare const InfiniteCenter: Story;
7
+ export declare const InfiniteEnd: Story;
8
+ export declare const NotInfinite: Story;
@@ -0,0 +1,20 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Unchecked: Story;
6
+ export declare const Checked: Story;
7
+ export declare const Indeterminate: Story;
8
+ export declare const DisabledUnchecked: Story;
9
+ export declare const DisabledChecked: Story;
10
+ export declare const DisabledIndeterminate: Story;
11
+ export declare const Invalid: Story;
12
+ export declare const RequiredChecked: Story;
13
+ export declare const WithHelperText: Story;
14
+ export declare const WithInfoText: Story;
15
+ export declare const ForcedError: Story;
16
+ export declare const CheckedForcedError: Story;
17
+ export declare const SmallLeftDefault: Story;
18
+ export declare const SmallRightDefault: Story;
19
+ export declare const MediumLeftDefault: Story;
20
+ export declare const MediumRightDefault: Story;
@@ -0,0 +1,7 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Default: Story;
6
+ export declare const Selected: Story;
7
+ export declare const DeselectableSelected: Story;
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Default: Story;
@@ -0,0 +1,13 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Colossal: Story;
6
+ export declare const Huge: Story;
7
+ export declare const Big: Story;
8
+ export declare const Large: Story;
9
+ export declare const Medium: Story;
10
+ export declare const Small: Story;
11
+ export declare const Tiny: Story;
12
+ export declare const Micro: Story;
13
+ export declare const Nano: Story;
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Default: Story;
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Default: Story;
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Default: Story;
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Default: Story;
@@ -0,0 +1,8 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const PrimaryHorizontal: Story;
6
+ export declare const SecondaryHorizontal: Story;
7
+ export declare const PrimaryVertical: Story;
8
+ export declare const SecondaryVertical: Story;
@@ -0,0 +1,5 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Default: Story;
@@ -1,10 +1,18 @@
1
- import { jsx as s } from "react/jsx-runtime";
1
+ import { jsx as e } from "react/jsx-runtime";
2
2
  import "../../packages/ui-kit/dist-react/index.js";
3
3
  import "react";
4
- import { useHandleEvent as e } from "../../hooks/useHandleEvent.js";
4
+ import { useHandleEvent as c } from "../../hooks/useHandleEvent.js";
5
5
  function l(o) {
6
- const { className: t, onClick: r, ...n } = o, { ref: c } = e({ click: r });
7
- return /* @__PURE__ */ s("ds-icon-button-react", { ref: c, class: t, ...n });
6
+ const { className: r, onClick: n, size: t, ...s } = o, { ref: i } = c({ click: n });
7
+ return /* @__PURE__ */ e(
8
+ "ds-icon-button-react",
9
+ {
10
+ ref: i,
11
+ size: typeof t == "string" ? t : JSON.stringify(t),
12
+ class: r,
13
+ ...s
14
+ }
15
+ );
8
16
  }
9
17
  export {
10
18
  l as IconButton
@@ -0,0 +1,13 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ type Story = StoryObj;
5
+ export declare const Primary: Story;
6
+ export declare const Secondary: Story;
7
+ export declare const Tertiary: Story;
8
+ export declare const Quaternary: Story;
9
+ export declare const Standard: Story;
10
+ export declare const Rounded: Story;
11
+ export declare const Disabled: Story;
12
+ export declare const Medium: Story;
13
+ export declare const Small: Story;