reshaped 2.9.4 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/bundle.css +1 -1
- package/bundle.d.ts +2 -0
- package/bundle.js +10 -10
- package/cli/theming/index.js +2 -0
- package/components/Accordion/AccordionContent.js +1 -0
- package/components/Button/Button.js +2 -2
- package/components/Button/Button.types.d.ts +1 -1
- package/components/FormControl/FormControl.client.d.ts +3 -0
- package/components/FormControl/FormControl.client.js +28 -0
- package/components/FormControl/FormControl.d.ts +8 -5
- package/components/FormControl/FormControl.js +9 -62
- package/components/FormControl/FormControl.utilities.d.ts +2 -0
- package/components/FormControl/FormControl.utilities.js +1 -0
- package/components/FormControl/FormControlCaption.d.ts +3 -0
- package/components/FormControl/FormControlCaption.js +15 -0
- package/components/FormControl/FormControlError.d.ts +3 -0
- package/components/FormControl/FormControlError.js +12 -0
- package/components/FormControl/FormControlHelper.d.ts +3 -0
- package/components/FormControl/FormControlHelper.js +10 -0
- package/components/FormControl/FormControlLabel.d.ts +3 -0
- package/components/FormControl/FormControlLabel.js +18 -0
- package/components/FormControl/tests/FormControl.stories.d.ts +4 -5
- package/components/MenuItem/MenuItem.js +2 -2
- package/components/MenuItem/MenuItem.types.d.ts +1 -1
- package/components/Pagination/Pagination.d.ts +3 -0
- package/components/Pagination/Pagination.js +10 -0
- package/components/Pagination/Pagination.types.d.ts +52 -0
- package/components/Pagination/Pagination.types.js +1 -0
- package/components/Pagination/PaginationControlled.d.ts +3 -0
- package/components/Pagination/PaginationControlled.js +47 -0
- package/components/Pagination/PaginationUncontrolled.d.ts +3 -0
- package/components/Pagination/PaginationUncontrolled.js +25 -0
- package/components/Pagination/index.d.ts +2 -0
- package/components/Pagination/index.js +1 -0
- package/components/Pagination/tests/Pagination.stories.d.ts +11 -0
- package/components/Pagination/tests/Pagination.stories.js +24 -0
- package/components/Table/Table.js +2 -2
- package/components/Table/Table.module.css +1 -1
- package/components/Table/Table.types.d.ts +1 -0
- package/components/Table/tests/Table.stories.js +17 -0
- package/components/Text/Text.js +2 -2
- package/components/Text/Text.module.css +1 -1
- package/components/Text/Text.types.d.ts +1 -0
- package/components/Text/tests/Text.stories.d.ts +1 -0
- package/components/Text/tests/Text.stories.js +7 -0
- package/components/TextArea/TextArea.js +15 -6
- package/components/TextArea/TextArea.module.css +1 -1
- package/components/TextArea/TextArea.types.d.ts +1 -0
- package/components/TextArea/tests/TextArea.stories.d.ts +1 -0
- package/components/TextArea/tests/TextArea.stories.js +8 -0
- package/components/_private/Expandable/Expandable.js +7 -28
- package/components/_private/Expandable/Expandable.module.css +1 -1
- package/index.d.ts +2 -0
- package/index.js +1 -0
- package/package.json +30 -30
- package/themes/figma/media.css +1 -1
- package/themes/reshaped/media.css +1 -1
- package/themes/reshaped/theme.css +1 -1
- package/themes/slate/media.css +1 -1
- package/utilities/helpers.d.ts +1 -0
- package/utilities/helpers.js +5 -0
@@ -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}.--align-start{text-align:start}.--align-center{text-align:center}.--align-end{text-align:end}.--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);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);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);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);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);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);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);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);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);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);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);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);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);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);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}@media (--rs-viewport-m ){.--align-start--m{text-align:start}.--align-center--m{text-align:center}.--align-end--m{text-align:end}.--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);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);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);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);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);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);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);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);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);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);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);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);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);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);line-height:var(--rs-line-height-caption-2)}}@media (--rs-viewport-l ){.--align-start--l{text-align:start}.--align-center--l{text-align:center}.--align-end--l{text-align:end}.--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);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);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);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);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);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);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);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);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);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);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);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);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);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);line-height:var(--rs-line-height-caption-2)}}@media (--rs-viewport-xl ){.--align-start--xl{text-align:start}.--align-center--xl{text-align:center}.--align-end--xl{text-align:end}.--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);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);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);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);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);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);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);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);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);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);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);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);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);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);line-height:var(--rs-line-height-caption-2)}}
|
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}.--align-start{text-align:start}.--align-center{text-align:center}.--align-end{text-align:end}.--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);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);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);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);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);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);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);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);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);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);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);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);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);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);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}@media (--rs-viewport-m ){.--align-start--m{text-align:start}.--align-center--m{text-align:center}.--align-end--m{text-align:end}.--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);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);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);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);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);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);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);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);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);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);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);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);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);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);line-height:var(--rs-line-height-caption-2)}}@media (--rs-viewport-l ){.--align-start--l{text-align:start}.--align-center--l{text-align:center}.--align-end--l{text-align:end}.--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);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);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);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);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);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);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);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);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);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);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);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);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);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);line-height:var(--rs-line-height-caption-2)}}@media (--rs-viewport-xl ){.--align-start--xl{text-align:start}.--align-center--xl{text-align:center}.--align-end--xl{text-align:end}.--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);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);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);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);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);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);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);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);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);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);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);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);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);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);line-height:var(--rs-line-height-caption-2)}}
|
@@ -6,6 +6,7 @@ export type Props<TagName extends keyof JSX.IntrinsicElements | void = void> = {
|
|
6
6
|
weight?: "regular" | "medium" | "bold";
|
7
7
|
color?: "neutral" | "neutral-faded" | "critical" | "warning" | "positive" | "primary" | "disabled";
|
8
8
|
align?: G.Responsive<"start" | "center" | "end">;
|
9
|
+
wrap?: "balance";
|
9
10
|
decoration?: "line-through";
|
10
11
|
maxLines?: number;
|
11
12
|
as?: TagName;
|
@@ -12,5 +12,6 @@ export declare const variant: () => import("react").JSX.Element;
|
|
12
12
|
export declare const weight: () => import("react").JSX.Element;
|
13
13
|
export declare const color: () => import("react").JSX.Element;
|
14
14
|
export declare const decoration: () => import("react").JSX.Element;
|
15
|
+
export declare const wrap: () => import("react").JSX.Element;
|
15
16
|
export declare const maxLines: () => import("react").JSX.Element;
|
16
17
|
export declare const align: () => import("react").JSX.Element;
|
@@ -95,6 +95,13 @@ export const decoration = () => (<Example>
|
|
95
95
|
<Text decoration="line-through">Line through</Text>
|
96
96
|
</Example.Item>
|
97
97
|
</Example>);
|
98
|
+
export const wrap = () => (<Example>
|
99
|
+
<Example.Item title="wrap: balance">
|
100
|
+
<Text wrap="balance" variant="title-3">
|
101
|
+
The design system you want to build
|
102
|
+
</Text>
|
103
|
+
</Example.Item>
|
104
|
+
</Example>);
|
98
105
|
export const maxLines = () => (<Example>
|
99
106
|
<Example.Item title="maxLines: 2">
|
100
107
|
<Text maxLines={1}>
|
@@ -1,5 +1,6 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
import React from "react";
|
3
4
|
import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
|
4
5
|
import { useFormControl } from "../FormControl/index.js";
|
5
6
|
import Aligner from "../_private/Aligner/index.js";
|
@@ -7,20 +8,28 @@ import useElementId from "../../hooks/useElementId.js";
|
|
7
8
|
import s from "./TextArea.module.css";
|
8
9
|
const TextArea = (props) => {
|
9
10
|
var _a, _b;
|
10
|
-
const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, size = "medium", variant = "outline", className, attributes, } = props;
|
11
|
+
const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, size = "medium", variant = "outline", resize, className, attributes, } = props;
|
12
|
+
const [autogrowValue, setAutogrowValue] = React.useState(value || defaultValue || "");
|
11
13
|
const formControl = useFormControl();
|
12
14
|
const id = useElementId(props.id);
|
13
15
|
const inputId = ((_a = formControl === null || formControl === void 0 ? void 0 : formControl.attributes) === null || _a === void 0 ? void 0 : _a.id) || ((_b = props.inputAttributes) === null || _b === void 0 ? void 0 : _b.id) || id;
|
14
16
|
const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
|
15
17
|
const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError;
|
16
18
|
const inputAttributes = Object.assign(Object.assign({}, props.inputAttributes), formControl === null || formControl === void 0 ? void 0 : formControl.attributes);
|
17
|
-
const rootClassName = classNames(s.root, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`], className);
|
19
|
+
const rootClassName = classNames(s.root, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`], resize !== undefined && s[`--resize-${resize}`], className);
|
18
20
|
const handleChange = (event) => {
|
19
|
-
|
20
|
-
|
21
|
-
|
21
|
+
const nextValue = event.target.value;
|
22
|
+
onChange === null || onChange === void 0 ? void 0 : onChange({ name, value: nextValue, event });
|
23
|
+
if (resize === "auto" && typeof value !== "string") {
|
24
|
+
setAutogrowValue(nextValue);
|
25
|
+
}
|
22
26
|
};
|
23
|
-
|
27
|
+
React.useEffect(() => {
|
28
|
+
if (typeof value !== "string" || resize !== "auto")
|
29
|
+
return;
|
30
|
+
setAutogrowValue(value);
|
31
|
+
}, [value, resize]);
|
32
|
+
return (_jsx("div", Object.assign({}, attributes, { "data-rs-aligner-target": true, className: rootClassName, "data-rs-textarea-value": autogrowValue, children: _jsx("textarea", Object.assign({ rows: 3 }, inputAttributes, { className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onBlur), id: inputId })) })));
|
24
33
|
};
|
25
34
|
TextArea.Aligner = Aligner;
|
26
35
|
export default TextArea;
|
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
.root{display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";visibility:hidden;white-space:pre-wrap}.input,.root:after{border:1px solid var(--rs-color-border-neutral);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:calc(var(--rs-p) - 1px);width:100%}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-unit-radius-small);color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input[disabled]{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded .input:focus{border-color:var(--rs-color-border-primary)}.root.--variant-headless .input{background:transparent;border-color:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{border-color:transparent;box-shadow:none}.root.--status-error .input{border-color:var(--rs-color-border-critical)}.root.--status-error .input:active,.root.--status-error .input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.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);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
|
@@ -15,6 +15,7 @@ type BaseProps = {
|
|
15
15
|
className?: G.ClassName;
|
16
16
|
attributes?: G.Attributes<"div", Props>;
|
17
17
|
inputAttributes?: G.Attributes<"textarea", Omit<Props, "id">>;
|
18
|
+
resize?: "none" | "auto";
|
18
19
|
} & Pick<FormControlProps, "hasError">;
|
19
20
|
export type ControlledProps = BaseProps & {
|
20
21
|
value: string;
|
@@ -14,6 +14,7 @@ export default _default;
|
|
14
14
|
export declare const value: () => import("react").JSX.Element;
|
15
15
|
export declare const variants: () => import("react").JSX.Element;
|
16
16
|
export declare const size: () => import("react").JSX.Element;
|
17
|
+
export declare const resize: () => import("react").JSX.Element;
|
17
18
|
export declare const disabled: () => import("react").JSX.Element;
|
18
19
|
export declare const error: () => import("react").JSX.Element;
|
19
20
|
export declare const formControl: () => import("react").JSX.Element;
|
@@ -54,6 +54,14 @@ export const size = () => (<Example>
|
|
54
54
|
<TextArea name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }}/>
|
55
55
|
</Example.Item>
|
56
56
|
</Example>);
|
57
|
+
export const resize = () => (<Example>
|
58
|
+
<Example.Item title="resize: none">
|
59
|
+
<TextArea name="Name" placeholder="Enter your name" resize="none"/>
|
60
|
+
</Example.Item>
|
61
|
+
<Example.Item title="resize: auto">
|
62
|
+
<TextArea name="Name" placeholder="Enter your name" resize="auto"/>
|
63
|
+
</Example.Item>
|
64
|
+
</Example>);
|
57
65
|
export const disabled = () => (<Example>
|
58
66
|
<Example.Item title="disabled, no value">
|
59
67
|
<TextArea name="Name" placeholder="Enter your name" disabled/>
|
@@ -1,44 +1,23 @@
|
|
1
1
|
"use client";
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
3
|
import React from "react";
|
4
|
+
import s from "./Expandable.module.css";
|
4
5
|
import { classNames } from "../../../utilities/helpers.js";
|
5
6
|
import { onNextFrame } from "../../../utilities/animation.js";
|
6
|
-
import s from "./Expandable.module.css";
|
7
7
|
const Expandable = (props) => {
|
8
8
|
const { children, active, attributes } = props;
|
9
|
-
const
|
10
|
-
const
|
11
|
-
const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
|
12
|
-
const contentClassNames = classNames(s.root, mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
|
9
|
+
const [animated, setAnimated] = React.useState(false);
|
10
|
+
const rootClassNames = classNames(s.root, active && s["--active"]);
|
13
11
|
const handleTransitionEnd = (e) => {
|
14
12
|
if (e.propertyName !== "height")
|
15
13
|
return;
|
16
|
-
setAnimatedHeight(active ? "auto" : null);
|
17
|
-
};
|
18
|
-
// Avoid animations happening if component is active by default
|
19
|
-
// onNextFrame lets us wait for the component to render first
|
20
|
-
React.useEffect(() => {
|
21
14
|
onNextFrame(() => {
|
22
|
-
|
15
|
+
setAnimated(false);
|
23
16
|
});
|
24
|
-
}
|
17
|
+
};
|
25
18
|
React.useEffect(() => {
|
26
|
-
|
27
|
-
if (!rootEl || !mountedRef.current)
|
28
|
-
return;
|
29
|
-
let targetHeight = 0;
|
30
|
-
if (active) {
|
31
|
-
rootEl.style.height = "auto";
|
32
|
-
targetHeight = rootEl.clientHeight;
|
33
|
-
rootEl.style.height = "0";
|
34
|
-
}
|
35
|
-
if (!active) {
|
36
|
-
rootEl.style.height = `${rootEl.clientHeight}px`;
|
37
|
-
}
|
38
|
-
setAnimatedHeight(targetHeight);
|
19
|
+
setAnimated(active || false);
|
39
20
|
}, [active]);
|
40
|
-
return (_jsx("div", Object.assign({}, attributes, { className:
|
41
|
-
? { height: animatedHeight, overflow: animatedHeight === "auto" ? "visible" : undefined }
|
42
|
-
: undefined, onTransitionEnd: handleTransitionEnd, role: "region", hidden: !active && animatedHeight === null, children: children })));
|
21
|
+
return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, onTransitionEnd: handleTransitionEnd, role: "region", hidden: !active && !animated, children: _jsx("div", { className: s.inner, children: children }) })));
|
43
22
|
};
|
44
23
|
export default Expandable;
|
@@ -1 +1 @@
|
|
1
|
-
.root{
|
1
|
+
.root{display:grid;grid-template-rows:0fr;transition:grid-template-rows 5s var(--rs-easing-standard)}.--active{grid-template-rows:1fr}.inner{overflow:hidden}
|
package/index.d.ts
CHANGED
@@ -61,6 +61,8 @@ export { default as Modal } from "./components/Modal";
|
|
61
61
|
export type { ModalProps } from "./components/Modal";
|
62
62
|
export { default as Overlay } from "./components/Overlay";
|
63
63
|
export type { OverlayProps } from "./components/Overlay";
|
64
|
+
export { default as Pagination } from "./components/Pagination";
|
65
|
+
export type { PaginationProps } from "./components/Pagination";
|
64
66
|
export { default as Popover } from "./components/Popover";
|
65
67
|
export type { PopoverProps } from "./components/Popover";
|
66
68
|
export { default as Progress } from "./components/Progress";
|
package/index.js
CHANGED
@@ -31,6 +31,7 @@ export { default as Loader } from "./components/Loader/index.js";
|
|
31
31
|
export { default as MenuItem } from "./components/MenuItem/index.js";
|
32
32
|
export { default as Modal } from "./components/Modal/index.js";
|
33
33
|
export { default as Overlay } from "./components/Overlay/index.js";
|
34
|
+
export { default as Pagination } from "./components/Pagination/index.js";
|
34
35
|
export { default as Popover } from "./components/Popover/index.js";
|
35
36
|
export { default as Progress } from "./components/Progress/index.js";
|
36
37
|
export { default as Radio } from "./components/Radio/index.js";
|
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": "2.
|
4
|
+
"version": "2.10.0",
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
6
6
|
"email": "hello@reshaped.so",
|
7
7
|
"homepage": "https://reshaped.so",
|
@@ -81,58 +81,58 @@
|
|
81
81
|
"defaults and not IE 11"
|
82
82
|
],
|
83
83
|
"devDependencies": {
|
84
|
-
"@commitlint/cli": "18.
|
85
|
-
"@commitlint/config-conventional": "18.
|
86
|
-
"@commitlint/types": "18.
|
87
|
-
"@size-limit/preset-big-lib": "11.0.
|
88
|
-
"@storybook/addon-a11y": "7.6.
|
89
|
-
"@storybook/addon-controls": "7.6.
|
90
|
-
"@storybook/addon-docs": "7.6.
|
91
|
-
"@storybook/addon-storysource": "7.6.
|
92
|
-
"@storybook/react": "7.6.
|
93
|
-
"@storybook/react-vite": "7.6.
|
94
|
-
"@testing-library/jest-dom": "6.1
|
95
|
-
"@testing-library/react": "14.1
|
84
|
+
"@commitlint/cli": "18.6.0",
|
85
|
+
"@commitlint/config-conventional": "18.6.0",
|
86
|
+
"@commitlint/types": "18.6.0",
|
87
|
+
"@size-limit/preset-big-lib": "11.0.2",
|
88
|
+
"@storybook/addon-a11y": "7.6.12",
|
89
|
+
"@storybook/addon-controls": "7.6.12",
|
90
|
+
"@storybook/addon-docs": "7.6.12",
|
91
|
+
"@storybook/addon-storysource": "7.6.12",
|
92
|
+
"@storybook/react": "7.6.12",
|
93
|
+
"@storybook/react-vite": "7.6.12",
|
94
|
+
"@testing-library/jest-dom": "6.4.1",
|
95
|
+
"@testing-library/react": "14.2.1",
|
96
96
|
"@testing-library/user-event": "14.5.2",
|
97
97
|
"@types/events": "3.0.3",
|
98
|
-
"@types/jest": "29.5.
|
99
|
-
"@types/node": "20.
|
100
|
-
"@types/react": "18.2.
|
98
|
+
"@types/jest": "29.5.12",
|
99
|
+
"@types/node": "20.11.16",
|
100
|
+
"@types/react": "18.2.52",
|
101
101
|
"@types/react-dom": "18.2.18",
|
102
|
-
"@typescript-eslint/eslint-plugin": "6.
|
103
|
-
"@typescript-eslint/parser": "6.
|
102
|
+
"@typescript-eslint/eslint-plugin": "6.20.0",
|
103
|
+
"@typescript-eslint/parser": "6.20.0",
|
104
104
|
"@vitejs/plugin-react": "4.2.1",
|
105
|
-
"chromatic": "10.
|
105
|
+
"chromatic": "10.7.1",
|
106
106
|
"cz-conventional-changelog": "3.3.0",
|
107
107
|
"eslint": "8.56.0",
|
108
108
|
"eslint-config-airbnb-typescript": "17.1.0",
|
109
109
|
"eslint-config-prettier": "9.1.0",
|
110
110
|
"eslint-plugin-import": "2.29.1",
|
111
111
|
"eslint-plugin-jsx-a11y": "6.8.0",
|
112
|
-
"eslint-plugin-prettier": "5.1.
|
112
|
+
"eslint-plugin-prettier": "5.1.3",
|
113
113
|
"eslint-plugin-react": "7.33.2",
|
114
114
|
"eslint-plugin-react-hooks": "4.6.0",
|
115
115
|
"identity-obj-proxy": "3.0.0",
|
116
116
|
"jest": "29.7.0",
|
117
117
|
"jest-environment-jsdom": "29.7.0",
|
118
118
|
"jest-matchmedia-mock": "1.1.0",
|
119
|
-
"lefthook": "1.
|
120
|
-
"postcss": "8.4.
|
119
|
+
"lefthook": "1.6.1",
|
120
|
+
"postcss": "8.4.33",
|
121
121
|
"postcss-cli": "11.0.0",
|
122
122
|
"postcss-each": "1.1.0",
|
123
123
|
"postcss-nested": "6.0.1",
|
124
|
-
"prettier": "3.
|
124
|
+
"prettier": "3.2.5",
|
125
125
|
"react": "18.2.0",
|
126
126
|
"react-dom": "18.2.0",
|
127
127
|
"resolve-tspaths": "0.8.17",
|
128
|
-
"size-limit": "11.0.
|
129
|
-
"storybook": "7.6.
|
130
|
-
"stylelint": "
|
128
|
+
"size-limit": "11.0.2",
|
129
|
+
"storybook": "7.6.12",
|
130
|
+
"stylelint": "16.2.1",
|
131
131
|
"stylelint-config-prettier": "9.0.5",
|
132
|
-
"stylelint-config-standard": "
|
133
|
-
"ts-jest": "29.1.
|
132
|
+
"stylelint-config-standard": "36.0.0",
|
133
|
+
"ts-jest": "29.1.2",
|
134
134
|
"typescript": "5.3.3",
|
135
|
-
"vite": "5.0.
|
135
|
+
"vite": "5.0.12",
|
136
136
|
"vite-tsconfig-paths": "4.3.1"
|
137
137
|
},
|
138
138
|
"peerDependencies": {
|
@@ -144,7 +144,7 @@
|
|
144
144
|
"@csstools/postcss-global-data": "2.1.1",
|
145
145
|
"chalk": "4.1.2",
|
146
146
|
"commander": "11.1.0",
|
147
|
-
"cssnano": "6.0.
|
147
|
+
"cssnano": "6.0.3",
|
148
148
|
"postcss-custom-media": "10.0.2"
|
149
149
|
},
|
150
150
|
"resolutions": {
|
package/themes/figma/media.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
@custom-media --rs-viewport-
|
1
|
+
@custom-media --rs-viewport-m (min-width: 660px);@custom-media --rs-viewport-l (min-width: 900px);@custom-media --rs-viewport-xl (min-width: 1280px);@custom-media --rs-viewport-s (max-width: 659px);
|
@@ -1 +1 @@
|
|
1
|
-
@custom-media --rs-viewport-
|
1
|
+
@custom-media --rs-viewport-m (min-width: 660px);@custom-media --rs-viewport-l (min-width: 900px);@custom-media --rs-viewport-xl (min-width: 1280px);@custom-media --rs-viewport-s (max-width: 659px);
|
@@ -1 +1 @@
|
|
1
|
-
[data-rs-theme=reshaped]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-heavy:800;--rs-font-weight-black:900;--rs-font-size-title-1:96px;--rs-line-height-title-1:100px;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-heavy);--rs-font-size-title-2:80px;--rs-line-height-title-2:84px;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-heavy);--rs-font-size-title-3:64px;--rs-line-height-title-3:68px;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-heavy);--rs-font-size-title-4:56px;--rs-line-height-title-4:60px;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-font-size-title-5:48px;--rs-line-height-title-5:52px;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-font-size-title-6:36px;--rs-line-height-title-6:40px;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-font-size-featured-1:32px;--rs-line-height-featured-1:40px;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-font-size-featured-2:24px;--rs-line-height-featured-2:32px;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-font-size-featured-3:20px;--rs-line-height-featured-3:28px;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-font-size-body-1:18px;--rs-line-height-body-1:28px;--rs-font-family-body-1:var(--rs-font-family-body);--rs-font-size-body-2:16px;--rs-line-height-body-2:24px;--rs-font-family-body-2:var(--rs-font-family-body);--rs-font-size-body-3:14px;--rs-line-height-body-3:20px;--rs-font-family-body-3:var(--rs-font-family-body);--rs-font-size-caption-1:12px;--rs-line-height-caption-1:16px;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-font-size-caption-2:10px;--rs-line-height-caption-2:12px;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-unit-base:4px;--rs-unit-radius-small:4px;--rs-unit-radius-medium:8px;--rs-unit-radius-large:12px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-color-brand:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 2px 3px 0px rgba(0,0,0,.1),0px 1px 2px -1px rgba(0,0,0,.1);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07)}[data-rs-theme=reshaped][data-rs-color-mode=light]{--rs-color-background-primary:#5a58f2;--rs-color-background-primary-faded:#ecebfe;--rs-color-background-primary-highlighted:#4d4af0;--rs-color-border-primary:#3b38ed;--rs-color-border-primary-faded:#dedcfb;--rs-color-foreground-primary:#4f4cf0;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fdeded;--rs-color-background-critical-highlighted:#d02828;--rs-color-border-critical:#bf2424;--rs-color-border-critical-faded:#fadbdb;--rs-color-foreground-critical:#c42525;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-background-warning-highlighted:#edc113;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#faedbb;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#edfdf5;--rs-color-background-positive-highlighted:#0f7d49;--rs-color-border-positive:#0c6e40;--rs-color-border-positive-faded:#d0f3e2;--rs-color-foreground-positive:#0d7544;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#
|
1
|
+
[data-rs-theme=reshaped]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-heavy:800;--rs-font-weight-black:900;--rs-font-size-title-1:96px;--rs-line-height-title-1:100px;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-heavy);--rs-font-size-title-2:80px;--rs-line-height-title-2:84px;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-heavy);--rs-font-size-title-3:64px;--rs-line-height-title-3:68px;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-heavy);--rs-font-size-title-4:56px;--rs-line-height-title-4:60px;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-font-size-title-5:48px;--rs-line-height-title-5:52px;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-font-size-title-6:36px;--rs-line-height-title-6:40px;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-font-size-featured-1:32px;--rs-line-height-featured-1:40px;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-font-size-featured-2:24px;--rs-line-height-featured-2:32px;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-font-size-featured-3:20px;--rs-line-height-featured-3:28px;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-font-size-body-1:18px;--rs-line-height-body-1:28px;--rs-font-family-body-1:var(--rs-font-family-body);--rs-font-size-body-2:16px;--rs-line-height-body-2:24px;--rs-font-family-body-2:var(--rs-font-family-body);--rs-font-size-body-3:14px;--rs-line-height-body-3:20px;--rs-font-family-body-3:var(--rs-font-family-body);--rs-font-size-caption-1:12px;--rs-line-height-caption-1:16px;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-font-size-caption-2:10px;--rs-line-height-caption-2:12px;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-unit-base:4px;--rs-unit-radius-small:4px;--rs-unit-radius-medium:8px;--rs-unit-radius-large:12px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-color-brand:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 2px 3px 0px rgba(0,0,0,.1),0px 1px 2px -1px rgba(0,0,0,.1);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07)}[data-rs-theme=reshaped][data-rs-color-mode=light]{--rs-color-background-primary:#5a58f2;--rs-color-background-primary-faded:#ecebfe;--rs-color-background-primary-highlighted:#4d4af0;--rs-color-border-primary:#3b38ed;--rs-color-border-primary-faded:#dedcfb;--rs-color-foreground-primary:#4f4cf0;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fdeded;--rs-color-background-critical-highlighted:#d02828;--rs-color-border-critical:#bf2424;--rs-color-border-critical-faded:#fadbdb;--rs-color-foreground-critical:#c42525;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-background-warning-highlighted:#edc113;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#faedbb;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#edfdf5;--rs-color-background-positive-highlighted:#0f7d49;--rs-color-border-positive:#0c6e40;--rs-color-border-positive-faded:#d0f3e2;--rs-color-foreground-positive:#0d7544;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f1f2f6;--rs-color-background-neutral-highlighted:#d2d7e2;--rs-color-border-neutral:#b3bbce;--rs-color-border-neutral-faded:#dddfe7;--rs-color-foreground-neutral:#14181f;--rs-color-foreground-neutral-faded:#5b667e;--rs-color-background-disabled:#eceef2;--rs-color-background-disabled-faded:#f5f6f9;--rs-color-border-disabled:#dfe2ea;--rs-color-foreground-disabled:#c6ccda;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#f9f9fb;--rs-color-rgb-background-primary:90,88,242;--rs-color-rgb-background-primary-faded:236,235,254;--rs-color-rgb-background-primary-highlighted:77,74,240;--rs-color-rgb-border-primary:59,56,237;--rs-color-rgb-border-primary-faded:222,220,251;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:253,237,237;--rs-color-rgb-background-critical-highlighted:208,40,40;--rs-color-rgb-border-critical:191,36,36;--rs-color-rgb-border-critical-faded:250,219,219;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-warning-highlighted:237,193,19;--rs-color-rgb-border-warning:207,169,15;--rs-color-rgb-border-warning-faded:250,237,187;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:237,253,245;--rs-color-rgb-background-positive-highlighted:15,125,73;--rs-color-rgb-border-positive:12,110,64;--rs-color-rgb-border-positive-faded:208,243,226;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:241,242,246;--rs-color-rgb-background-neutral-highlighted:210,215,226;--rs-color-rgb-border-neutral:179,187,206;--rs-color-rgb-border-neutral-faded:221,223,231;--rs-color-rgb-background-disabled:236,238,242;--rs-color-rgb-background-disabled-faded:245,246,249;--rs-color-rgb-border-disabled:223,226,234;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:249,249,251}[data-rs-theme=reshaped][data-rs-color-mode=dark]{--rs-color-background-primary:#524fea;--rs-color-background-primary-faded:#252544;--rs-color-background-primary-highlighted:#5f5ced;--rs-color-border-primary:#8c8bf3;--rs-color-border-primary-faded:#323164;--rs-color-foreground-primary:#8b8af7;--rs-color-background-critical:#d02626;--rs-color-background-critical-faded:#3e1f1f;--rs-color-background-critical-highlighted:#e22a2a;--rs-color-border-critical:#f46969;--rs-color-border-critical-faded:#582929;--rs-color-foreground-critical:#f36a6a;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-background-warning-highlighted:#fed014;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#3d3628;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#14784a;--rs-color-background-positive-faded:#1f2a23;--rs-color-background-positive-highlighted:#178351;--rs-color-border-positive:#21ab6b;--rs-color-border-positive-faded:#293b2f;--rs-color-foreground-positive:#18ab66;--rs-color-background-neutral:#494f60;--rs-color-background-neutral-faded:#222835;--rs-color-background-neutral-highlighted:#52586b;--rs-color-border-neutral:#4c5264;--rs-color-border-neutral-faded:#2d374c;--rs-color-foreground-neutral:#eff1f5;--rs-color-foreground-neutral-faded:#c0c6d6;--rs-color-background-disabled:#1e212a;--rs-color-background-disabled-faded:#171921;--rs-color-border-disabled:#262a34;--rs-color-foreground-disabled:#434959;--rs-color-background-elevation-base:#15171e;--rs-color-background-elevation-raised:#191b23;--rs-color-background-elevation-overlay:#1c1f28;--rs-color-background-page:#0f1116;--rs-color-background-page-faded:#111319;--rs-color-rgb-background-primary:82,79,234;--rs-color-rgb-background-primary-faded:37,37,68;--rs-color-rgb-background-primary-highlighted:95,92,237;--rs-color-rgb-border-primary:140,139,243;--rs-color-rgb-border-primary-faded:50,49,100;--rs-color-rgb-background-critical:208,38,38;--rs-color-rgb-background-critical-faded:62,31,31;--rs-color-rgb-background-critical-highlighted:226,42,42;--rs-color-rgb-border-critical:244,105,105;--rs-color-rgb-border-critical-faded:88,41,41;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-warning-highlighted:254,208,20;--rs-color-rgb-border-warning:180,146,10;--rs-color-rgb-border-warning-faded:61,54,40;--rs-color-rgb-background-positive:20,120,74;--rs-color-rgb-background-positive-faded:31,42,35;--rs-color-rgb-background-positive-highlighted:23,131,81;--rs-color-rgb-border-positive:33,171,107;--rs-color-rgb-border-positive-faded:41,59,47;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:73,79,96;--rs-color-rgb-background-neutral-faded:34,40,53;--rs-color-rgb-background-neutral-highlighted:82,88,107;--rs-color-rgb-border-neutral:76,82,100;--rs-color-rgb-border-neutral-faded:45,55,76;--rs-color-rgb-background-disabled:30,33,42;--rs-color-rgb-background-disabled-faded:23,25,33;--rs-color-rgb-border-disabled:38,42,52;--rs-color-rgb-background-elevation-base:21,23,30;--rs-color-rgb-background-elevation-raised:25,27,35;--rs-color-rgb-background-elevation-overlay:28,31,40;--rs-color-rgb-background-page:15,17,22;--rs-color-rgb-background-page-faded:17,19,25}
|
package/themes/slate/media.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
@custom-media --rs-viewport-
|
1
|
+
@custom-media --rs-viewport-m (min-width: 660px);@custom-media --rs-viewport-l (min-width: 900px);@custom-media --rs-viewport-xl (min-width: 1280px);@custom-media --rs-viewport-s (max-width: 659px);
|
package/utilities/helpers.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import type * as G from "../types/global";
|
2
|
+
export declare const range: (start: number, end: number) => number[];
|
2
3
|
export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
|
3
4
|
export declare function debounceHandler<T extends React.SyntheticEvent | Event>(handler: (event: T) => void, timeout: number): (event: T) => void;
|
4
5
|
export declare const throttle: <T extends Function>(cb: T, wait: number) => (...args: unknown[]) => void;
|
package/utilities/helpers.js
CHANGED
@@ -1,3 +1,8 @@
|
|
1
|
+
export const range = (start, end) => {
|
2
|
+
if (start > end)
|
3
|
+
return [];
|
4
|
+
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
5
|
+
};
|
1
6
|
// from https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940
|
2
7
|
export const debounce = (cb, wait = 20) => {
|
3
8
|
let timer;
|