reshaped 3.8.4 → 3.9.0-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/bundle.css +1 -1
  2. package/dist/bundle.js +11 -11
  3. package/dist/components/Card/Card.d.ts +1 -1
  4. package/dist/components/Card/tests/Card.stories.d.ts +1 -1
  5. package/dist/components/Divider/Divider.js +3 -3
  6. package/dist/components/Divider/Divider.module.css +1 -1
  7. package/dist/components/Divider/Divider.types.d.ts +6 -0
  8. package/dist/components/Divider/tests/Divider.stories.d.ts +2 -0
  9. package/dist/components/Divider/tests/Divider.stories.js +26 -0
  10. package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +1 -1
  11. package/dist/components/Flyout/Flyout.types.d.ts +2 -0
  12. package/dist/components/Flyout/FlyoutControlled.js +5 -4
  13. package/dist/components/Flyout/tests/Flyout.stories.d.ts +1 -0
  14. package/dist/components/Flyout/tests/Flyout.stories.js +30 -0
  15. package/dist/components/Popover/Popover.types.d.ts +1 -1
  16. package/dist/components/Select/Select.module.css +1 -1
  17. package/dist/components/Select/Select.types.d.ts +16 -11
  18. package/dist/components/Select/SelectCustomControlled.js +27 -10
  19. package/dist/components/Select/SelectGroup.d.ts +4 -0
  20. package/dist/components/Select/SelectGroup.js +10 -0
  21. package/dist/components/Select/SelectTrigger.js +1 -1
  22. package/dist/components/Select/index.d.ts +3 -2
  23. package/dist/components/Select/index.js +3 -2
  24. package/dist/components/Select/tests/Select.stories.d.ts +7 -1
  25. package/dist/components/Select/tests/Select.stories.js +102 -6
  26. package/dist/components/Tabs/TabsContext.d.ts +1 -1
  27. package/dist/components/TextArea/TextArea.module.css +1 -1
  28. package/dist/components/TextArea/TextArea.types.d.ts +1 -1
  29. package/dist/components/TextArea/tests/TextArea.stories.js +4 -0
  30. package/dist/components/TextField/TextField.module.css +1 -1
  31. package/dist/components/TextField/TextField.types.d.ts +1 -1
  32. package/dist/components/TextField/tests/TextField.stories.d.ts +1 -0
  33. package/dist/components/TextField/tests/TextField.stories.js +15 -0
  34. package/dist/components/Tooltip/Tooltip.types.d.ts +1 -1
  35. package/dist/config/postcss.cjs +4 -4
  36. package/dist/config/postcss.d.cts +3 -3
  37. package/dist/config/tailwind.d.ts +1 -1
  38. package/package.json +1 -1
  39. package/dist/components/Select/SelectOptionGroup.d.ts +0 -4
  40. package/dist/components/Select/SelectOptionGroup.js +0 -9
package/dist/components/Select/tests/Select.stories.js CHANGED
@@ -6,7 +6,9 @@ import useToggle from "../../../hooks/useToggle.js";
6
6
  import Modal from "../../Modal/index.js";
7
7
  import MenuItem from "../../MenuItem/index.js";
8
8
  import Select from "../index.js";
9
+ import Text from "../../Text/index.js";
9
10
  import FormControl from "../../FormControl/index.js";
11
+ import Badge from "../../Badge/index.js";
10
12
  export default {
11
13
  title: "Components/Select",
12
14
  component: Select,
@@ -69,14 +71,14 @@ export const customRender = {
69
71
  <Select.Custom name="animal-2" id="animal-2" placeholder="Select an animal" inputAttributes={{
70
72
  "aria-label": "Select an animal",
71
73
  }}>
72
- <Select.OptionGroup label="Birds">
74
+ <Select.Group label="Birds">
73
75
  <Select.Option value="pigeon">Pigeon</Select.Option>
74
76
  <Select.Option value="parrot">Parrot</Select.Option>
75
- </Select.OptionGroup>
76
- <Select.OptionGroup label="Sea Mammals">
77
+ </Select.Group>
78
+ <Select.Group label="Sea Mammals">
77
79
  <Select.Option value="whale">Whale</Select.Option>
78
80
  <Select.Option value="dolphin">Dolphin</Select.Option>
79
- </Select.OptionGroup>
81
+ </Select.Group>
80
82
  </Select.Custom>
81
83
  </Example.Item>
82
84
  </Example>),
@@ -362,15 +364,29 @@ export const variant = {
362
364
  </Select.Custom>
363
365
  </Example.Item>
364
366
 
367
+ <Example.Item title="variant: ghost, native">
368
+ <Select variant="ghost" name="animal-3" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
369
+ <option value="dog">Dog</option>
370
+ <option value="turtle">Turtle</option>
371
+ </Select>
372
+ </Example.Item>
373
+
374
+ <Example.Item title="variant: ghost, custom">
375
+ <Select.Custom variant="ghost" name="animal-4" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
376
+ <Select.Option value="dog">Dog</Select.Option>
377
+ <Select.Option value="turtle">Turtle</Select.Option>
378
+ </Select.Custom>
379
+ </Example.Item>
380
+
365
381
  <Example.Item title="variant: headless, native">
366
- <Select variant="headless" name="animal-3" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
382
+ <Select variant="headless" name="animal-5" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
367
383
  <option value="dog">Dog</option>
368
384
  <option value="turtle">Turtle</option>
369
385
  </Select>
370
386
  </Example.Item>
371
387
 
372
388
  <Example.Item title="variant: headless, custom">
373
- <Select.Custom variant="headless" name="animal-4" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
389
+ <Select.Custom variant="headless" name="animal-6" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
374
390
  <Select.Option value="dog">Dog</Select.Option>
375
391
  <Select.Option value="turtle">Turtle</Select.Option>
376
392
  </Select.Custom>
@@ -424,6 +440,68 @@ export const startSlot = {
424
440
  </Example.Item>
425
441
  </Example>),
426
442
  };
443
+ export const renderValue = {
444
+ name: "renderValue",
445
+ render: () => {
446
+ const options = [
447
+ {
448
+ value: "1",
449
+ label: "Title 1",
450
+ subtitle: "Subtitle 1",
451
+ },
452
+ {
453
+ value: "2",
454
+ label: "Title 2",
455
+ subtitle: "Subtitle 2",
456
+ },
457
+ ];
458
+ return (<Example>
459
+ <Example.Item title="default renderer, single">
460
+ <Select.Custom name="animal" defaultValue="1" placeholder="Nothing selected">
461
+ {options.map((option) => (<Select.Option key={option.value} value={option.value}>
462
+ <Text weight="medium">{option.label}</Text>
463
+ <Text weight="regular" color="neutral-faded">
464
+ {option.subtitle}
465
+ </Text>
466
+ </Select.Option>))}
467
+ </Select.Custom>
468
+ </Example.Item>
469
+
470
+ <Example.Item title="default renderer, multiple">
471
+ <Select.Custom name="animal" defaultValue={["1"]} multiple placeholder="Nothing selected">
472
+ {options.map((option) => (<Select.Option key={option.value} value={option.value}>
473
+ <Text weight="medium">{option.label}</Text>
474
+ <Text weight="regular" color="neutral-faded">
475
+ {option.subtitle}
476
+ </Text>
477
+ </Select.Option>))}
478
+ </Select.Custom>
479
+ </Example.Item>
480
+
481
+ <Example.Item title="renderValue, single">
482
+ <Select.Custom name="animal" defaultValue="1" placeholder="Nothing selected" renderValue={(args) => <Badge>Title {args.value}</Badge>}>
483
+ {options.map((option) => (<Select.Option key={option.value} value={option.value}>
484
+ <Text weight="medium">{option.label}</Text>
485
+ <Text weight="regular" color="neutral-faded">
486
+ {option.subtitle}
487
+ </Text>
488
+ </Select.Option>))}
489
+ </Select.Custom>
490
+ </Example.Item>
491
+
492
+ <Example.Item title="renderValue, multiple">
493
+ <Select.Custom name="animal" defaultValue={["1"]} multiple placeholder="Nothing selected" renderValue={(args) => <Badge>Titles {args.value.join(", ")}</Badge>}>
494
+ {options.map((option) => (<Select.Option key={option.value} value={option.value}>
495
+ <Text weight="medium">{option.label}</Text>
496
+ <Text weight="regular" color="neutral-faded">
497
+ {option.subtitle}
498
+ </Text>
499
+ </Select.Option>))}
500
+ </Select.Custom>
501
+ </Example.Item>
502
+ </Example>);
503
+ },
504
+ };
427
505
  export const error = {
428
506
  name: "error",
429
507
  render: () => (<Example>
@@ -518,3 +596,21 @@ export const formControl = {
518
596
  </Example.Item>
519
597
  </Example>),
520
598
  };
599
+ export const testComposition = {
600
+ name: "test: composition",
601
+ render: () => (<Example>
602
+ <Example.Item title="custom with options">
603
+ <Select.Custom name="animal" id="animal" placeholder="Select an animal" inputAttributes={{
604
+ "aria-label": "Select an animal",
605
+ }}>
606
+ <Select.Group>
607
+ <Select.Option value="dog">Dog</Select.Option>
608
+ <Select.Option value="turtle">Turtle</Select.Option>
609
+ </Select.Group>
610
+ <Select.Group>
611
+ <div>hello</div>
612
+ </Select.Group>
613
+ </Select.Custom>
614
+ </Example.Item>
615
+ </Example>),
616
+ };
package/dist/components/Tabs/TabsContext.d.ts CHANGED
@@ -5,8 +5,8 @@ export declare const useTabs: (value?: string) => {
5
5
  panelId: string | undefined;
6
6
  buttonId: string | undefined;
7
7
  variant?: "bordered" | "borderless" | "pills" | "pills-elevated" | undefined;
8
- name?: string | undefined;
9
8
  direction?: "column" | "row" | undefined;
9
+ name?: string | undefined;
10
10
  onChange?: ((args: {
11
11
  value: string;
12
12
  name?: string;
package/dist/components/TextArea/TextArea.module.css CHANGED
@@ -1 +1 @@
1
- .root{--rs-textarea-border-color:var(--rs-color-border-neutral);--rs-textarea-border-width:1px;display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";overflow:hidden;overflow-wrap:break-word;visibility:hidden;white-space:pre-wrap}.input,.root:after{border:0;box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:var(--rs-p);width:100%}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-radius-small);box-shadow:0 0 0 var(--rs-textarea-border-width) var(--rs-textarea-border-color) inset;color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{box-shadow:0 0 0 2px var(--rs-color-border-primary) inset}.input[disabled]{background:var(--rs-color-background-disabled-faded);box-shadow:0 0 0 1px var(--rs-color-border-disabled) inset;color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2)}.--size-medium .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3)}.--size-large .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4)}.--size-xlarge .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{--rs-textarea-border-color:transparent}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded)}.root.--variant-headless{--rs-textarea-border-color:transparent}.root.--variant-headless .input{background:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{box-shadow:none}.root.--status-error{--rs-textarea-border-color:var(--rs-color-border-critical);--rs-textarea-border-width:2px}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-p:var(--rs-unit-x2)}.--size-medium--m .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3)}.--size-large--m .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4)}.--size-xlarge--m .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2)}.--size-medium--l .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3)}.--size-large--l .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4)}.--size-xlarge--l .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2)}.--size-medium--xl .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3)}.--size-large--xl .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4)}.--size-xlarge--xl .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
1
+ .root{--rs-textarea-border-color:var(--rs-color-border-neutral);--rs-textarea-border-width:1px;display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";overflow:hidden;overflow-wrap:break-word;visibility:hidden;white-space:pre-wrap}.input,.root:after{border:0;box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:var(--rs-p);width:100%}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-radius-small);box-shadow:0 0 0 var(--rs-textarea-border-width) var(--rs-textarea-border-color) inset;color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{box-shadow:0 0 0 2px var(--rs-color-border-primary) inset}.input[disabled]{background:var(--rs-color-background-disabled-faded);box-shadow:0 0 0 1px var(--rs-color-border-disabled) inset;color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2)}.--size-medium .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3)}.--size-large .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4)}.--size-xlarge .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{--rs-textarea-border-color:transparent}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded)}.root.--variant-ghost{--rs-textarea-border-color:transparent}.root.--variant-ghost .input{background:transparent}.root.--variant-headless{--rs-textarea-border-color:transparent}.root.--variant-headless .input{background:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{box-shadow:none}.root.--status-error{--rs-textarea-border-color:var(--rs-color-border-critical);--rs-textarea-border-width:2px}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-p:var(--rs-unit-x2)}.--size-medium--m .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3)}.--size-large--m .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4)}.--size-xlarge--m .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2)}.--size-medium--l .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3)}.--size-large--l .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4)}.--size-xlarge--l .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2)}.--size-medium--xl .input{border-radius:var(--rs-radius-small);font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3)}.--size-large--xl .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4)}.--size-xlarge--xl .input{border-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
package/dist/components/TextArea/TextArea.types.d.ts CHANGED
@@ -14,7 +14,7 @@ type BaseProps = {
14
14
  /** Component render variant
15
15
  * @default "outline"
16
16
  */
17
- variant?: "outline" | "faded" | "headless";
17
+ variant?: "outline" | "faded" | "ghost" | "headless";
18
18
  /** Disable the text area user interaction */
19
19
  disabled?: boolean;
20
20
  /** Placeholder text when there is no value */
package/dist/components/TextArea/tests/TextArea.stories.js CHANGED
@@ -21,6 +21,10 @@ export const variants = {
21
21
  <TextArea variant="faded" name="Name" placeholder="Enter your name"/>
22
22
  </Example.Item>
23
23
 
24
+ <Example.Item title="variant: ghost">
25
+ <TextArea variant="ghost" name="Name" placeholder="Enter your name"/>
26
+ </Example.Item>
27
+
24
28
  <Example.Item title="variant: headless">
25
29
  <TextArea variant="headless" name="Name" placeholder="Enter your name"/>
26
30
  </Example.Item>
package/dist/components/TextField/TextField.module.css CHANGED
@@ -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;--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))}}
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-ghost,.root.--variant-headless{--rs-text-field-border-color:transparent;background:transparent}.root.--variant-headless{--rs-text-field-focus-border-color: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))}}
package/dist/components/TextField/TextField.types.d.ts CHANGED
@@ -41,7 +41,7 @@ export type BaseProps = {
41
41
  /** Component render variant
42
42
  * @default "outline"
43
43
  */
44
- variant?: "outline" | "faded" | "headless";
44
+ variant?: "outline" | "faded" | "ghost" | "headless";
45
45
  /** Callback when the text field value changes */
46
46
  onChange?: G.ChangeHandler<string>;
47
47
  /** Callback when the text field is focused */
package/dist/components/TextField/tests/TextField.stories.d.ts CHANGED
@@ -51,3 +51,4 @@ export declare const formControl: {
51
51
  name: string;
52
52
  render: () => import("react").JSX.Element;
53
53
  };
54
+ export declare const foo: () => import("react").JSX.Element;
package/dist/components/TextField/tests/TextField.stories.js CHANGED
@@ -6,7 +6,9 @@ import View from "../../View/index.js";
6
6
  import Text from "../../Text/index.js";
7
7
  import Button from "../../Button/index.js";
8
8
  import Badge from "../../Badge/index.js";
9
+ import Select from "../../Select/index.js";
9
10
  import { expect, fn, userEvent } from "storybook/test";
11
+ import Divider from "../../Divider/index.js";
10
12
  export default {
11
13
  title: "Components/TextField",
12
14
  component: TextField,
@@ -23,6 +25,10 @@ export const variant = {
23
25
  <TextField variant="faded" name="Name" placeholder="Enter your name"/>
24
26
  </Example.Item>
25
27
 
28
+ <Example.Item title="variant: headless">
29
+ <TextField variant="ghost" name="Name" placeholder="Enter your name"/>
30
+ </Example.Item>
31
+
26
32
  <Example.Item title="variant: headless">
27
33
  <TextField variant="headless" name="Name" placeholder="Enter your name"/>
28
34
  </Example.Item>
@@ -235,3 +241,12 @@ export const formControl = {
235
241
  </Example.Item>
236
242
  </Example>),
237
243
  };
244
+ export const foo = () => {
245
+ return (<TextField name="test-name" inputAttributes={{ "aria-label": "Label" }} endSlotPadding={0} endSlot={<View gap={0} direction="row" align="stretch">
246
+ <Divider color="neutral" vertical/>
247
+ <Select.Custom name="test-name" inputAttributes={{ "aria-label": "Label" }} variant="ghost">
248
+ <Select.Option value="dog">Dog</Select.Option>
249
+ <Select.Option value="turtle">Turtle</Select.Option>
250
+ </Select.Custom>
251
+ </View>}/>);
252
+ };
package/dist/components/Tooltip/Tooltip.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
3
- export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
3
+ export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
4
4
  /** Node for inserting children */
5
5
  children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
6
6
  /** Text content for the tooltip */
package/dist/config/postcss.cjs CHANGED
@@ -3,8 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.config = void 0;
7
- exports.default = getConfig;
6
+ exports.getConfig = exports.config = void 0;
8
7
  const path_1 = __importDefault(require("path"));
9
8
  const defaultThemeMediaCSSPath = path_1.default.resolve(__dirname, "../themes/reshaped/media.css");
10
9
  // Using [plugin]: { ...options } format here because it's supported by the most frameworks
@@ -19,7 +18,7 @@ exports.config = {
19
18
  cssnano: { preset: ["default", { calc: false }] },
20
19
  },
21
20
  };
22
- function getConfig(options) {
21
+ const getConfig = (options) => {
23
22
  const { themeMediaCSSPath = defaultThemeMediaCSSPath } = options;
24
23
  return {
25
24
  plugins: {
@@ -30,4 +29,5 @@ function getConfig(options) {
30
29
  cssnano: { preset: ["default", { calc: false }] },
31
30
  },
32
31
  };
33
- }
32
+ };
33
+ exports.getConfig = getConfig;
package/dist/config/postcss.d.cts CHANGED
@@ -11,9 +11,9 @@ export declare const config: {
11
11
  };
12
12
  };
13
13
  };
14
- export default function getConfig(options: {
15
- themeMediaCSSPath?: string;
16
- }): {
14
+ export declare const getConfig: (options: {
15
+ themeMediaCSSPath: string;
16
+ }) => {
17
17
  plugins: {
18
18
  "@csstools/postcss-global-data": {
19
19
  files: string[];
package/dist/config/tailwind.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import type { ThemeDefinition } from "../themes/_generator/tokens/types";
2
- export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderColor" | "backgroundColor" | "borderRadius" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;
2
+ export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderColor" | "backgroundColor" | "boxShadow" | "borderRadius" | "spacing" | "textColor" | "colors" | "screens", Record<string, string>>;
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.4",
4
+ "version": "3.9.0-canary.0",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",
package/dist/components/Select/SelectOptionGroup.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import type * as T from "./Select.types";
3
- declare const SelectOptionGroup: React.FC<T.OptionGroupProps>;
4
- export default SelectOptionGroup;
package/dist/components/Select/SelectOptionGroup.js DELETED
@@ -1,9 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import View from "../View/index.js";
3
- import Text from "../Text/index.js";
4
- const SelectOptionGroup = (props) => {
5
- const { label, children } = props;
6
- return (_jsxs(View, { attributes: { role: "group" }, gap: 1, children: [_jsx(View, { paddingInline: 3, paddingTop: 3, children: _jsx(Text, { variant: "caption-1", color: "neutral-faded", children: label }) }), _jsx(View.Item, { children: children })] }));
7
- };
8
- SelectOptionGroup.displayName = "Select.OptionGroup";
9
- export default SelectOptionGroup;