reshaped 3.8.0-canary.10 → 3.8.0-canary.12
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/CHANGELOG.md +26 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +8 -8
- package/dist/components/Modal/tests/Modal.stories.d.ts +3 -7
- package/dist/components/Modal/tests/Modal.stories.js +5 -22
- package/dist/components/Text/Text.module.css +1 -1
- package/dist/components/TextField/TextField.js +10 -2
- package/dist/components/TextField/TextField.module.css +1 -1
- package/dist/components/TextField/TextField.types.d.ts +5 -1
- package/dist/components/TextField/tests/TextField.stories.js +11 -5
- package/dist/hooks/useOnClickOutside.js +0 -2
- package/package.json +1 -1
- package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.d.ts +0 -21
- package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.js +0 -11
- package/dist/components/Link/tests/Link.test.stories.d.ts +0 -17
- package/dist/components/Link/tests/Link.test.stories.js +0 -11
- package/dist/components/Loader/tests/Loader.test.stories.d.ts +0 -13
- package/dist/components/Loader/tests/Loader.test.stories.js +0 -11
- package/dist/components/Table/tests/Table.test.stories.d.ts +0 -19
- package/dist/components/Table/tests/Table.test.stories.js +0 -11
- package/dist/components/TextField/tests/TextField.test.stories.d.ts +0 -15
- package/dist/components/TextField/tests/TextField.test.stories.js +0 -11
- package/dist/components/Timeline/tests/Timeline.test.stories.d.ts +0 -15
- package/dist/components/Timeline/tests/Timeline.test.stories.js +0 -11
- package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts +0 -13
- package/dist/components/Tooltip/tests/Tooltip.test.stories.js +0 -11
@@ -39,10 +39,9 @@ export declare const overlay: {
|
|
39
39
|
name: string;
|
40
40
|
render: () => React.JSX.Element;
|
41
41
|
};
|
42
|
-
export declare const flags: {
|
43
|
-
|
44
|
-
|
45
|
-
};
|
42
|
+
export declare const flags: StoryObj<{
|
43
|
+
handleClose: ReturnType<typeof fn>;
|
44
|
+
}>;
|
46
45
|
export declare const containerRef: {
|
47
46
|
name: string;
|
48
47
|
render: () => React.JSX.Element;
|
@@ -54,9 +53,6 @@ export declare const handlers: StoryObj<{
|
|
54
53
|
handleClose: ReturnType<typeof fn>;
|
55
54
|
handleAfterClose: ReturnType<typeof fn>;
|
56
55
|
}>;
|
57
|
-
export declare const disableCloseOnClick: StoryObj<{
|
58
|
-
handleClose: ReturnType<typeof fn>;
|
59
|
-
}>;
|
60
56
|
export declare const className: StoryObj;
|
61
57
|
export declare const edgeCases: {
|
62
58
|
name: string;
|
@@ -152,10 +152,13 @@ export const overlay = {
|
|
152
152
|
};
|
153
153
|
export const flags = {
|
154
154
|
name: "disableCloseOnOutsideClick",
|
155
|
-
|
155
|
+
args: {
|
156
|
+
handleClose: fn(),
|
157
|
+
},
|
158
|
+
render: (args) => {
|
156
159
|
return (<Example>
|
157
160
|
<Example.Item title="disableCloseOnOutsideClick">
|
158
|
-
<Demo disableCloseOnOutsideClick/>
|
161
|
+
<Demo disableCloseOnOutsideClick onClose={args.handleClose} active/>
|
159
162
|
</Example.Item>
|
160
163
|
</Example>);
|
161
164
|
},
|
@@ -272,26 +275,6 @@ export const handlers = {
|
|
272
275
|
});
|
273
276
|
},
|
274
277
|
};
|
275
|
-
export const disableCloseOnClick = {
|
276
|
-
name: "disableCloseOnOutsideClick",
|
277
|
-
args: {
|
278
|
-
handleClose: fn(),
|
279
|
-
},
|
280
|
-
render: (args) => (<Modal active disableCloseOnOutsideClick onClose={(closeArgs) => {
|
281
|
-
args.handleClose(closeArgs);
|
282
|
-
}}>
|
283
|
-
<Modal.Title>Title</Modal.Title>
|
284
|
-
Content
|
285
|
-
</Modal>),
|
286
|
-
play: async ({ canvasElement, args }) => {
|
287
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
288
|
-
const overlay = canvas.getByText("Content");
|
289
|
-
await userEvent.click(overlay);
|
290
|
-
expect(args.handleClose).toHaveBeenCalledTimes(0);
|
291
|
-
await userEvent.keyboard("{Escape}");
|
292
|
-
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
293
|
-
},
|
294
|
-
};
|
295
278
|
export const className = {
|
296
279
|
name: "className, attributes",
|
297
280
|
render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
|
@@ -1 +1 @@
|
|
1
|
-
.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);overflow:hidden}.--break-all{word-break:break-all}.--wrap-balance{text-wrap:balance}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}.--monospace{font-family:var(--rs-font-family-monospace)}@media (--rs-viewport-m ){.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--m{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--m{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--m{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-l ){.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--l{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--l{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--l{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-xl ){.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--xl{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--xl{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--xl{font-weight:var(--rs-font-weight-bold)!important}}
|
1
|
+
@layer rs.text.reset{.root{font-family:unset;font-size:unset;font-style:normal;font-weight:unset;letter-spacing:0;margin:0;padding:0;text-align:left;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none}}.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);overflow:hidden}.--break-all{word-break:break-all}.--wrap-balance{text-wrap:balance}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}.--monospace{font-family:var(--rs-font-family-monospace)}@media (--rs-viewport-m ){.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--m{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--m{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--m{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-l ){.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--l{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--l{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--l{font-weight:var(--rs-font-weight-bold)!important}}@media (--rs-viewport-xl ){.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);letter-spacing:var(--rs-letter-spacing-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);letter-spacing:var(--rs-letter-spacing-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);letter-spacing:var(--rs-letter-spacing-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);letter-spacing:var(--rs-letter-spacing-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);letter-spacing:var(--rs-letter-spacing-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);letter-spacing:var(--rs-letter-spacing-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);letter-spacing:var(--rs-letter-spacing-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);letter-spacing:var(--rs-letter-spacing-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);letter-spacing:var(--rs-letter-spacing-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);letter-spacing:var(--rs-letter-spacing-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular--xl{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium--xl{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold--xl{font-weight:var(--rs-font-weight-bold)!important}}
|
@@ -37,7 +37,7 @@ const TextFieldSlot = (props) => {
|
|
37
37
|
return content.filter(Boolean);
|
38
38
|
};
|
39
39
|
const TextField = (props) => {
|
40
|
-
const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, icon, endIcon, startSlot, endSlot, prefix, suffix, size = "medium", variant = "outline", focused, multiline, rounded, className, attributes, } = props;
|
40
|
+
const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, icon, endIcon, startSlot, endSlot, startSlotPadding, endSlotPadding, prefix, suffix, size = "medium", variant = "outline", focused, multiline, rounded, className, attributes, } = props;
|
41
41
|
const formControl = useFormControl();
|
42
42
|
const id = useElementId(props.id);
|
43
43
|
const inputId = formControl?.attributes.id || props.inputAttributes?.id || id;
|
@@ -50,7 +50,15 @@ const TextField = (props) => {
|
|
50
50
|
return;
|
51
51
|
onChange({ name, value: event.target.value, event });
|
52
52
|
};
|
53
|
-
return (_jsxs("div", { ...attributes,
|
53
|
+
return (_jsxs("div", { ...attributes, style: {
|
54
|
+
...attributes?.style,
|
55
|
+
"--rs-text-field-start-slot-padding": startSlotPadding !== undefined && startSlotPadding >= 0
|
56
|
+
? `calc(var(--rs-unit-x1) * ${startSlotPadding})`
|
57
|
+
: undefined,
|
58
|
+
"--rs-text-field-end-slot-padding": endSlotPadding !== undefined && endSlotPadding >= 0
|
59
|
+
? `calc(var(--rs-unit-x1) * ${endSlotPadding})`
|
60
|
+
: undefined,
|
61
|
+
}, "data-rs-aligner-target": true, className: rootClassName, children: [_jsx(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix, id: id }), _jsxs("div", { className: s.inner, children: [_jsx("input", { type: "text", autoComplete: "off", ...inputAttributes, className: classNames(s.input, inputAttributes.className), disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: inputId }), _jsx(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix, id: id })] })] }));
|
54
62
|
};
|
55
63
|
TextField.Aligner = Aligner;
|
56
64
|
TextField.displayName = "TextField";
|
@@ -1 +1 @@
|
|
1
|
-
.root{--rs-p-h:var(--rs-text-field-gap);--rs-text-field-border-color:var(--rs-color-border-neutral);--rs-text-field-focus-border-color:var(--rs-color-border-primary);--rs-text-field-border-width:1px;align-items:center;background:var(--rs-color-background-elevation-base);border-radius:var(--rs-text-field-radius);box-shadow:0 0 0 var(--rs-text-field-border-width) var(--rs-text-field-border-color) inset;column-gap:var(--rs-text-field-gap);display:flex;padding:0 var(--rs-text-field-gap);position:relative;z-index:0}.root.--focused,.root:has(.icon:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus,select:focus)):focus-within{box-shadow:0 0 0 2px var(--rs-text-field-focus-border-color) inset}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.inner{column-gap:var(--rs-text-field-gap);display:inline-flex;flex-grow:1}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:0 calc(var(--rs-text-field-gap) * -1);outline:none;padding-block:var(--rs-text-field-p-v);padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.input{font-size:var(--rs-text-field-font-size);letter-spacing:var(--rs-text-field-letter-spacing);line-height:var(--rs-text-field-line-height)}.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:var(--rs-text-field-attachment-height);position:relative;z-index:5}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-text-field-gap) * -1);padding-inline-end:var(--rs-text-field-action-inset)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{--rs-text-field-border-color:var(--rs-color-border-disabled);background:var(--rs-color-background-disabled-faded)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-small{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.root.--variant-faded{--rs-text-field-border-color:transparent;background:var(--rs-color-background-neutral-faded)}.root.--variant-headless{--rs-text-field-border-color:transparent;--rs-text-field-focus-border-color:transparent;background:transparent}.root.--status-error{--rs-text-field-border-color:var(--rs-color-border-critical);--rs-text-field-border-width:2px}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}
|
1
|
+
.root{--rs-p-h:var(--rs-text-field-gap);--rs-text-field-border-color:var(--rs-color-border-neutral);--rs-text-field-focus-border-color:var(--rs-color-border-primary);--rs-text-field-border-width:1px;--rs-text-field-start-slot-padding:var(--rs-unit-x2);--rs-text-field-end-slot-padding:var(--rs-unit-x1);align-items:center;background:var(--rs-color-background-elevation-base);border-radius:var(--rs-text-field-radius);box-shadow:0 0 0 var(--rs-text-field-border-width) var(--rs-text-field-border-color) inset;column-gap:var(--rs-text-field-gap);display:flex;padding:0 var(--rs-text-field-gap);position:relative;z-index:0}.root.--focused,.root:has(.icon:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus,select:focus)):focus-within{box-shadow:0 0 0 2px var(--rs-text-field-focus-border-color) inset}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.inner{column-gap:var(--rs-text-field-gap);display:inline-flex;flex-grow:1}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:0 calc(var(--rs-text-field-gap) * -1);outline:none;padding-block:var(--rs-text-field-p-v);padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.input{font-size:var(--rs-text-field-font-size);letter-spacing:var(--rs-text-field-letter-spacing);line-height:var(--rs-text-field-line-height)}.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:var(--rs-text-field-attachment-height);position:relative;z-index:5}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.slot--position-start{margin-inline-start:calc(var(--rs-text-field-start-slot-padding) - var(--rs-text-field-gap))}.slot--position-end{margin-inline-end:calc(var(--rs-text-field-end-slot-padding) - var(--rs-text-field-gap))}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{--rs-text-field-border-color:var(--rs-color-border-disabled);background:var(--rs-color-background-disabled-faded)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-small{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.root.--variant-faded{--rs-text-field-border-color:transparent;background:var(--rs-color-background-neutral-faded)}.root.--variant-headless{--rs-text-field-border-color:transparent;--rs-text-field-focus-border-color:transparent;background:transparent}.root.--status-error{--rs-text-field-border-color:var(--rs-color-border-critical);--rs-text-field-border-width:2px}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2))}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4))}}
|
@@ -32,8 +32,12 @@ export type BaseProps = {
|
|
32
32
|
endSlot?: SlotProps["slot"];
|
33
33
|
/** Node for inserting text content before the text field value */
|
34
34
|
prefix?: React.ReactNode;
|
35
|
-
/** Node for inserting
|
35
|
+
/** Node for inserting text content after the text field value */
|
36
36
|
suffix?: React.ReactNode;
|
37
|
+
/** Padding inline end, base unit token number multiplier */
|
38
|
+
startSlotPadding?: number;
|
39
|
+
/** Padding inline start, base unit token number multiplier */
|
40
|
+
endSlotPadding?: number;
|
37
41
|
/** Component render variant
|
38
42
|
* @default "outline"
|
39
43
|
*/
|
@@ -56,7 +56,7 @@ export const error = {
|
|
56
56
|
</Example>),
|
57
57
|
};
|
58
58
|
export const attachments = {
|
59
|
-
name: "icon, endIcon, suffix, prefix, startSlot, endSlot",
|
59
|
+
name: "icon, endIcon, suffix, prefix, startSlot, endSlot, startSlotPadding, endSlotPadding",
|
60
60
|
render: () => (<Example>
|
61
61
|
<Example.Item title="icon">
|
62
62
|
<TextField name="Name" placeholder="Enter your name" value="Reshaped" icon={IconZap}/>
|
@@ -65,16 +65,22 @@ export const attachments = {
|
|
65
65
|
<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap}/>
|
66
66
|
</Example.Item>
|
67
67
|
|
68
|
-
<Example.Item title="width affixes">
|
69
|
-
<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2"/>
|
70
|
-
</Example.Item>
|
71
|
-
|
72
68
|
<Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
|
73
69
|
<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={20}/>}/>
|
74
70
|
</Example.Item>
|
71
|
+
|
75
72
|
<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
|
76
73
|
<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
|
77
74
|
</Example.Item>
|
75
|
+
|
76
|
+
<Example.Item title="paddingSlotStart=4, paddingSlotEnd=2">
|
77
|
+
<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlotPadding={4} endSlotPadding={2} startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>}/>
|
78
|
+
</Example.Item>
|
79
|
+
|
80
|
+
<Example.Item title="with all affixes">
|
81
|
+
<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2" startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>}/>
|
82
|
+
</Example.Item>
|
83
|
+
|
78
84
|
<Example.Item title="multiline wrap">
|
79
85
|
<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge size="small" key={i}>
|
80
86
|
Item {i + 1}
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "reshaped",
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
4
|
-
"version": "3.8.0-canary.
|
4
|
+
"version": "3.8.0-canary.12",
|
5
5
|
"license": "MIT",
|
6
6
|
"email": "hello@reshaped.so",
|
7
7
|
"homepage": "https://reshaped.so",
|
@@ -1,21 +0,0 @@
|
|
1
|
-
declare const _default: {
|
2
|
-
title: string;
|
3
|
-
component: import("react").FC<import("./..").DropdownMenuProps> & {
|
4
|
-
Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
|
5
|
-
Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
|
6
|
-
Content: import("react").FC<import("../DropdownMenu.types").ContentProps>;
|
7
|
-
Section: import("react").FC<import("../DropdownMenu.types").SectionProps>;
|
8
|
-
Item: import("react").FC<import("../DropdownMenu.types").ItemProps>;
|
9
|
-
SubMenu: import("react").FC<import("../DropdownMenu.types").SubMenuProps>;
|
10
|
-
SubTrigger: import("react").FC<import("../DropdownMenu.types").SubTriggerProps>;
|
11
|
-
};
|
12
|
-
parameters: {
|
13
|
-
iframe: {
|
14
|
-
url: string;
|
15
|
-
};
|
16
|
-
chromatic: {
|
17
|
-
disableSnapshot: boolean;
|
18
|
-
};
|
19
|
-
};
|
20
|
-
};
|
21
|
-
export default _default;
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import DropdownMenu from "../index.js";
|
2
|
-
export default {
|
3
|
-
title: "Components/DropdownMenu/tests",
|
4
|
-
component: DropdownMenu,
|
5
|
-
parameters: {
|
6
|
-
iframe: {
|
7
|
-
url: "https://reshaped.so/docs/components/dropdown-menu",
|
8
|
-
},
|
9
|
-
chromatic: { disableSnapshot: true },
|
10
|
-
},
|
11
|
-
};
|
@@ -1,17 +0,0 @@
|
|
1
|
-
declare const _default: {
|
2
|
-
title: string;
|
3
|
-
component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
|
4
|
-
icon?: import("../../Icon").IconProps["svg"];
|
5
|
-
color?: "inherit" | "critical" | "primary" | "positive" | "warning";
|
6
|
-
variant?: "plain" | "underline";
|
7
|
-
} & import("react").RefAttributes<import("../../Actionable").ActionableRef>>;
|
8
|
-
parameters: {
|
9
|
-
iframe: {
|
10
|
-
url: string;
|
11
|
-
};
|
12
|
-
chromatic: {
|
13
|
-
disableSnapshot: boolean;
|
14
|
-
};
|
15
|
-
};
|
16
|
-
};
|
17
|
-
export default _default;
|
@@ -1,19 +0,0 @@
|
|
1
|
-
declare const _default: {
|
2
|
-
title: string;
|
3
|
-
component: import("react").FC<import("./..").TableProps> & {
|
4
|
-
Cell: import("react").FC<import("./..").TableCellProps>;
|
5
|
-
Heading: import("react").FC<import("./..").TableHeadingProps>;
|
6
|
-
Row: import("react").FC<import("./..").TableRowProps>;
|
7
|
-
Body: import("react").FC<import("./..").TableBodyProps>;
|
8
|
-
Head: import("react").FC<import("./..").TableHeadProps>;
|
9
|
-
};
|
10
|
-
parameters: {
|
11
|
-
iframe: {
|
12
|
-
url: string;
|
13
|
-
};
|
14
|
-
chromatic: {
|
15
|
-
disableSnapshot: boolean;
|
16
|
-
};
|
17
|
-
};
|
18
|
-
};
|
19
|
-
export default _default;
|
@@ -1,15 +0,0 @@
|
|
1
|
-
declare const _default: {
|
2
|
-
title: string;
|
3
|
-
component: import("react").FC<import("./..").TextFieldProps> & {
|
4
|
-
Aligner: import("react").FC<import("../../_private/Aligner").AlignerProps>;
|
5
|
-
};
|
6
|
-
parameters: {
|
7
|
-
iframe: {
|
8
|
-
url: string;
|
9
|
-
};
|
10
|
-
chromatic: {
|
11
|
-
disableSnapshot: boolean;
|
12
|
-
};
|
13
|
-
};
|
14
|
-
};
|
15
|
-
export default _default;
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import TextField from "../index.js";
|
2
|
-
export default {
|
3
|
-
title: "Components/TextField/tests",
|
4
|
-
component: TextField,
|
5
|
-
parameters: {
|
6
|
-
iframe: {
|
7
|
-
url: "https://reshaped.so/docs/components/text-area",
|
8
|
-
},
|
9
|
-
chromatic: { disableSnapshot: true },
|
10
|
-
},
|
11
|
-
};
|
@@ -1,15 +0,0 @@
|
|
1
|
-
declare const _default: {
|
2
|
-
title: string;
|
3
|
-
component: import("react").FC<import("./..").TimelineProps> & {
|
4
|
-
Item: import("react").FC<import("./..").TimelineItemProps>;
|
5
|
-
};
|
6
|
-
parameters: {
|
7
|
-
iframe: {
|
8
|
-
url: string;
|
9
|
-
};
|
10
|
-
chromatic: {
|
11
|
-
disableSnapshot: boolean;
|
12
|
-
};
|
13
|
-
};
|
14
|
-
};
|
15
|
-
export default _default;
|