reshaped 3.7.0-canary.14 → 3.7.0-canary.16
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 +18 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.js +11 -11
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.js +1 -1
- package/dist/cjs/themes/slate/theme.css +1 -1
- package/dist/components/Actionable/Actionable.js +3 -3
- package/dist/components/Actionable/Actionable.module.css +1 -1
- package/dist/components/Actionable/Actionable.types.d.ts +1 -0
- package/dist/components/Badge/Badge.js +3 -3
- package/dist/components/Badge/Badge.module.css +1 -1
- package/dist/components/Badge/Badge.types.d.ts +4 -4
- package/dist/components/Badge/tests/Badge.stories.js +11 -0
- package/dist/components/Button/Button.module.css +1 -1
- package/dist/components/Calendar/Calendar.types.d.ts +1 -0
- package/dist/components/Calendar/Calendar.utils.d.ts +11 -0
- package/dist/components/Calendar/Calendar.utils.js +25 -0
- package/dist/components/Calendar/CalendarDate.js +6 -2
- package/dist/components/Calendar/CalendarMonth.js +9 -23
- package/dist/components/Calendar/tests/Calendar.stories.js +9 -2
- package/dist/components/Carousel/Carousel.js +3 -1
- package/dist/components/Carousel/Carousel.types.d.ts +1 -0
- package/dist/components/Carousel/CarouselControl.d.ts +1 -2
- package/dist/components/Carousel/CarouselControl.js +8 -7
- package/dist/components/Checkbox/Checkbox.module.css +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.js +8 -6
- package/dist/components/Flyout/FlyoutTrigger.js +4 -3
- package/dist/components/Grid/Grid.js +8 -2
- package/dist/components/Grid/Grid.types.d.ts +2 -0
- package/dist/components/Grid/tests/Grid.stories.js +12 -1
- package/dist/components/PinField/PinField.module.css +1 -1
- package/dist/components/ProgressIndicator/ProgressIndicator.module.css +1 -1
- package/dist/components/Reshaped/Reshaped.css +1 -1
- package/dist/components/Resizable/Resizable.module.css +1 -1
- package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
- package/dist/components/Select/Select.module.css +1 -1
- package/dist/components/Slider/Slider.module.css +1 -1
- package/dist/components/Switch/Switch.js +1 -1
- package/dist/components/Switch/Switch.module.css +1 -1
- package/dist/components/Tabs/TabsItem.js +2 -1
- package/dist/components/Tabs/TabsList.js +2 -2
- package/dist/components/TextField/TextField.module.css +1 -1
- package/dist/components/TextField/tests/TextField.stories.js +3 -1
- package/dist/themes/_generator/tokens/color/utilities/generateColors.js +1 -1
- package/dist/themes/slate/theme.css +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ import { useFlyoutContext, TriggerProvider } from "./Flyout.context.js";
|
|
|
4
4
|
const FlyoutTrigger = (props) => {
|
|
5
5
|
const { children } = props;
|
|
6
6
|
const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleMouseDown, handleTouchStart, handleClick, trapFocusMode, isSubmenu, } = useFlyoutContext();
|
|
7
|
+
const active = flyout.status !== "idle";
|
|
7
8
|
const childrenAttributes = {
|
|
8
9
|
ref: triggerElRef,
|
|
9
10
|
};
|
|
@@ -20,7 +21,7 @@ const FlyoutTrigger = (props) => {
|
|
|
20
21
|
if ((triggerType === "hover" && !isSubmenu) || triggerType === "focus") {
|
|
21
22
|
childrenAttributes.onFocus = handleFocus;
|
|
22
23
|
childrenAttributes.onBlur = handleBlur;
|
|
23
|
-
childrenAttributes["aria-describedby"] = id;
|
|
24
|
+
childrenAttributes["aria-describedby"] = active ? id : undefined;
|
|
24
25
|
}
|
|
25
26
|
if (triggerType === "click" || triggerType === "focus" || trapFocusMode === "action-menu") {
|
|
26
27
|
if (trapFocusMode === "dialog") {
|
|
@@ -33,8 +34,8 @@ const FlyoutTrigger = (props) => {
|
|
|
33
34
|
else {
|
|
34
35
|
childrenAttributes["aria-haspopup"] = "menu";
|
|
35
36
|
}
|
|
36
|
-
childrenAttributes["aria-expanded"] =
|
|
37
|
-
childrenAttributes["aria-controls"] =
|
|
37
|
+
childrenAttributes["aria-expanded"] = active;
|
|
38
|
+
childrenAttributes["aria-controls"] = active ? id : undefined;
|
|
38
39
|
}
|
|
39
40
|
return (_jsx(TriggerProvider, { value: { elRef: triggerElRef }, children: children(childrenAttributes) }));
|
|
40
41
|
};
|
|
@@ -3,6 +3,8 @@ import { classNames, responsiveVariables, responsivePropDependency } from "../..
|
|
|
3
3
|
import getAlignStyles from "../../styles/align/index.js";
|
|
4
4
|
import getJustifyStyles from "../../styles/justify/index.js";
|
|
5
5
|
import getMaxWidthStyles from "../../styles/maxWidth/index.js";
|
|
6
|
+
import getWidthStyles from "../../styles/width/index.js";
|
|
7
|
+
import getHeightStyles from "../../styles/height/index.js";
|
|
6
8
|
import s from "./Grid.module.css";
|
|
7
9
|
const GridItem = (props) => {
|
|
8
10
|
const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className,
|
|
@@ -26,20 +28,22 @@ const GridItem = (props) => {
|
|
|
26
28
|
return (_jsx(TagName, { ...attributes, className: itemClassNames, style: rootVariables, children: children }));
|
|
27
29
|
};
|
|
28
30
|
const Grid = (props) => {
|
|
29
|
-
const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, maxWidth,
|
|
31
|
+
const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, width, height, maxWidth,
|
|
30
32
|
// Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
|
|
31
33
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
32
34
|
as: TagName = "div", attributes, } = props;
|
|
33
35
|
const alignStyles = getAlignStyles(align);
|
|
34
36
|
const justifyStyles = getJustifyStyles(justify);
|
|
35
37
|
const maxWidthStyles = getMaxWidthStyles(maxWidth);
|
|
38
|
+
const widthStyles = getWidthStyles(width);
|
|
39
|
+
const heightStyles = getHeightStyles(height);
|
|
36
40
|
const resolvedRows = responsivePropDependency(rows, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
|
|
37
41
|
const resolvedColumns = responsivePropDependency(columns, (value) => typeof value === "number" ? `repeat(${value}, 1fr)` : value);
|
|
38
42
|
const resolvedAreas = responsivePropDependency(areas, (value) => value
|
|
39
43
|
? `"${value?.join('" "')}"
|
|
40
44
|
`
|
|
41
45
|
: undefined);
|
|
42
|
-
const rootClassNames = classNames(s.root, maxWidthStyles?.classNames, className);
|
|
46
|
+
const rootClassNames = classNames(s.root, maxWidthStyles?.classNames, widthStyles?.classNames, heightStyles?.classNames, className);
|
|
43
47
|
const rootVariables = {
|
|
44
48
|
...attributes?.style,
|
|
45
49
|
...responsiveVariables("--rs-grid-gap", gap),
|
|
@@ -52,6 +56,8 @@ const Grid = (props) => {
|
|
|
52
56
|
...alignStyles?.variables,
|
|
53
57
|
...justifyStyles?.variables,
|
|
54
58
|
...maxWidthStyles?.variables,
|
|
59
|
+
...widthStyles?.variables,
|
|
60
|
+
...heightStyles?.variables,
|
|
55
61
|
};
|
|
56
62
|
return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: children }));
|
|
57
63
|
};
|
|
@@ -13,6 +13,8 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
13
13
|
autoColumns?: G.Responsive<Property.GridAutoColumns>;
|
|
14
14
|
autoRows?: G.Responsive<Property.GridAutoRows>;
|
|
15
15
|
maxWidth?: G.Responsive<string | number>;
|
|
16
|
+
width?: G.Responsive<string | number>;
|
|
17
|
+
height?: G.Responsive<string | number>;
|
|
16
18
|
children?: React.ReactNode;
|
|
17
19
|
as?: TagName;
|
|
18
20
|
className?: G.ClassName;
|
|
@@ -11,7 +11,7 @@ export default {
|
|
|
11
11
|
},
|
|
12
12
|
};
|
|
13
13
|
export const base = {
|
|
14
|
-
name: "gap, align, justify, maxWidth",
|
|
14
|
+
name: "gap, align, justify, maxWidth, width, height",
|
|
15
15
|
render: () => (<Example>
|
|
16
16
|
<Example.Item title="gap: 2">
|
|
17
17
|
<Grid gap={2} columns={2}>
|
|
@@ -51,6 +51,17 @@ export const base = {
|
|
|
51
51
|
</View>
|
|
52
52
|
</Grid>
|
|
53
53
|
</Example.Item>
|
|
54
|
+
|
|
55
|
+
<Example.Item title="width: 400px, height: 200px">
|
|
56
|
+
<Grid gap={2} columns={2} width="400px" height="200px">
|
|
57
|
+
<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
|
|
58
|
+
1
|
|
59
|
+
</View>
|
|
60
|
+
<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
|
|
61
|
+
2
|
|
62
|
+
</View>
|
|
63
|
+
</Grid>
|
|
64
|
+
</Example.Item>
|
|
54
65
|
</Example>),
|
|
55
66
|
};
|
|
56
67
|
export const layout = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;color:transparent;font-size:16px;inset:0;outline:none;padding-left:100%;position:absolute}.item{box-sizing:border-box;cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:
|
|
1
|
+
.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;color:transparent;font-size:16px;inset:0;outline:none;padding-left:100%;position:absolute}.item{box-sizing:border-box;cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:var(--rs-radius-circular);content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{line-height:0}.container{display:inline-flex;position:relative;vertical-align:top}.container:after,.container:before{content:"";inset-inline-start:calc(var(--rs-unit-x4) * -1);opacity:0;position:absolute}.container:after,.container:before,.item{background:var(--rs-color-background-neutral);border-radius:
|
|
1
|
+
.root{line-height:0}.container{display:inline-flex;position:relative;vertical-align:top}.container:after,.container:before{content:"";inset-inline-start:calc(var(--rs-unit-x4) * -1);opacity:0;position:absolute}.container:after,.container:before,.item{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-circular);height:var(--rs-unit-x2);width:var(--rs-unit-x2)}.item{margin-inline-start:var(--rs-unit-x2)}.item:first-child{margin-inline-start:0}.item.item--active{background:var(--rs-color-background-primary);transform:scale(1.2)}.item.item--variant-secondary{opacity:.6}.item.item--variant-tertiary{opacity:.3}.item.item--variant-hidden{opacity:0}.--color-media .container:after,.--color-media .container:before,.--color-media .item{background:var(--rs-color-white)}.--color-media .item{opacity:.6}.--color-media .item.item--active{opacity:1}.--color-media .item.item--variant-secondary{opacity:.3}.--color-media .item.item--variant-tertiary{opacity:.1}.--color-media .item.item--variant-hidden{opacity:0}.--shift-start .container,[dir=rtl] .--shift-end .container{transform:translateX(var(--rs-unit-x4))}.--shift-end .container,[dir=rtl] .--shift-start .container{transform:translateX(calc(var(--rs-unit-x4) * -1))}.--shift-end .container:after,.--shift-start .container:before{opacity:.3}.--shift-end.--color-media .container:after,.--shift-start.--color-media .container:before{opacity:.1}.--shift-start .container:before{inset-inline-end:auto;inset-inline-start:calc(var(--rs-unit-x4) * -1)}.--shift-end .container:after{inset-inline-end:calc(var(--rs-unit-x4) * -1);inset-inline-start:auto}.--animated .container,.--animated .container:after,.--animated .container:before,.--animated .item{transition:var(--rs-duration-slow) var(--rs-easing-decelerate);transition-property:transform,opacity,background-color}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer rs.reset{[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-
|
|
1
|
+
@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{isolation:isolate}.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;flex-grow:100;max-width:var(--rs-resizable-default-size);min-width:var(--rs-resizable-default-size);overflow:hidden}.handle{flex-shrink:0;position:relative;z-index:var(--rs-z-index-relative)}.handle:after,.handle:before{border-radius:
|
|
1
|
+
.root{isolation:isolate}.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;flex-grow:100;max-width:var(--rs-resizable-default-size);min-width:var(--rs-resizable-default-size);overflow:hidden}.handle{flex-shrink:0;position:relative;z-index:var(--rs-z-index-relative)}.handle:after,.handle:before{border-radius:var(--rs-radius-circular);content:"";position:absolute}.handle:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,background-color}.--variant-bordered .handle:after{background:var(--rs-color-border-neutral-faded)}.--variant-bordered .handle--dragging:after,.--variant-bordered .handle:hover:after,.--variant-borderless .handle:after,[data-rs-keyboard] .--variant-bordered .handle:focus:after{background:var(--rs-color-border-neutral)}.--variant-borderless .handle:after{opacity:0}.--variant-borderless .handle--dragging:after,.--variant-borderless .handle:hover:after,[data-rs-keyboard] .--variant-borderless .handle:focus:after{opacity:.6}body:has(.handle--dragging) .--variant-borderless .handle:not(.handle--dragging){opacity:0}body:has(.handle--dragging) .--variant-bordered .handle:not(.handle--dragging):after{background:var(--rs-color-border-neutral-faded)}body:has(.--direction-row>.handle--dragging){cursor:ew-resize}body:has(.--direction-column>.handle--dragging){cursor:ns-resize}.--direction-row>.handle{cursor:ew-resize}.--direction-row>.handle:after,.--direction-row>.handle:before{inset-block:0;inset-inline-start:50%;transform:translateX(-50%)}.--direction-row>.handle:before{width:var(--rs-unit-x6)}.--variant-borderless.--direction-row>.handle:after{width:var(--rs-unit-x1)}.--variant-bordered.--direction-row>.handle:after{width:1px}.--direction-row>.item[data-rs-resizable-item-mounted]{max-width:var(--rs-resizable-max-size);min-width:var(--rs-resizable-min-size)}.--direction-column>.handle{cursor:ns-resize}.--direction-column>.handle:after,.--direction-column>.handle:before{inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.--direction-column>.handle:before{height:var(--rs-unit-x6)}.--variant-borderless.--direction-column>.handle:after{height:var(--rs-unit-x1)}.--variant-bordered.--direction-column>.handle:after{height:1px}.--direction-column>.item[data-rs-resizable-item-mounted]{max-height:var(--rs-resizable-max-size);min-height:var(--rs-resizable-min-size)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-focus-shadow)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:
|
|
1
|
+
.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-focus-shadow)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:var(--rs-radius-circular);content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;text-overflow:ellipsis;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-small{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-
|
|
1
|
+
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;text-overflow:ellipsis;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-small{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-disabled)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@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-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:
|
|
1
|
+
.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:var(--rs-radius-circular);box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.thumb--active:after,[data-rs-keyboard] .input:focus+.thumb:after{cursor:grabbing}.thumb--active:before,[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.thumb--active .tooltip,[data-rs-keyboard] .input:focus+.thumb .tooltip{opacity:1}[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
|
|
@@ -21,7 +21,7 @@ const Switch = (props) => {
|
|
|
21
21
|
checked: event.target.checked,
|
|
22
22
|
});
|
|
23
23
|
};
|
|
24
|
-
return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: id }),
|
|
24
|
+
return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: id }), _jsxs("span", { className: s.area, "aria-hidden": "true", children: [_jsx("span", { className: s.hitbox }), _jsx("span", { className: s.thumb })] }), children && (_jsx(Text, { variant: responsivePropDependency(size, (value) => {
|
|
25
25
|
if (value === "large")
|
|
26
26
|
return "body-2";
|
|
27
27
|
if (value === "medium")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{align-items:center;display:inline-flex;gap:var(--rs-switch-gap);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.root.--reversed{flex-direction:row-reverse}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-width) - var(--rs-switch-height)))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-height) - var(--rs-switch-width)))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;box-sizing:border-box;cursor:pointer;display:flex;height:var(--rs-switch-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:var(--rs-switch-width)}.
|
|
1
|
+
.root{align-items:center;display:inline-flex;gap:var(--rs-switch-gap);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.root.--reversed{flex-direction:row-reverse}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-width) - var(--rs-switch-height)))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-switch-height) - var(--rs-switch-width)))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;border-radius:var(--rs-radius-circular);box-sizing:border-box;cursor:pointer;display:flex;height:var(--rs-switch-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:var(--rs-switch-width)}.hitbox{height:24px;inset-inline:0;position:absolute;top:50%;transform:translateY(-50%)}.thumb{background:var(--rs-color-white);border-radius:var(--rs-radius-circular);box-shadow:var(--rs-shadow-raised);height:calc(var(--rs-switch-height) - var(--rs-unit-x1));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:calc(var(--rs-switch-height) - var(--rs-unit-x1))}.--size-small{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}@media (--rs-viewport-m ){.--size-small--m{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--m{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--m{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--l{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--l{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-switch-height:var(--rs-unit-x4);--rs-switch-width:var(--rs-unit-x6);--rs-switch-gap:var(--rs-unit-x1);--rs-switch-line-height:var(--rs-line-height-caption-1);--rs-switch-font-size:var(--rs-font-size-caption-1)}.--size-medium--xl{--rs-switch-height:var(--rs-unit-x5);--rs-switch-width:var(--rs-unit-x8);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-3);--rs-switch-font-size:var(--rs-font-size-body-3)}.--size-large--xl{--rs-switch-height:var(--rs-unit-x6);--rs-switch-width:var(--rs-unit-x10);--rs-switch-gap:var(--rs-unit-x2);--rs-switch-line-height:var(--rs-line-height-body-2);--rs-switch-font-size:var(--rs-font-size-body-2)}}
|
|
@@ -12,7 +12,7 @@ import { useTabs } from "./TabsContext.js";
|
|
|
12
12
|
import s from "./Tabs.module.css";
|
|
13
13
|
const TabsItem = React.forwardRef((props, ref) => {
|
|
14
14
|
const { value, children, icon, href, disabled, attributes } = props;
|
|
15
|
-
const { onChange, panelId, name, size, value: tabsValue, selection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs(value);
|
|
15
|
+
const { onChange, panelId, buttonId, name, size, value: tabsValue, selection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs(value);
|
|
16
16
|
const itemRef = React.useRef(null);
|
|
17
17
|
const active = tabsValue === value;
|
|
18
18
|
const visuallySelected = active && selection.status === "idle";
|
|
@@ -63,6 +63,7 @@ const TabsItem = React.forwardRef((props, ref) => {
|
|
|
63
63
|
return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, insetFocus: true, disabled: disabled, onClick: !name ? handleChange : undefined, className: [s.button, disabled && s["button--disabled"]], as: name ? "label" : undefined, attributes: {
|
|
64
64
|
...(!isFormControl && tabAttributes),
|
|
65
65
|
"aria-controls": panelId,
|
|
66
|
+
id: buttonId,
|
|
66
67
|
}, children: [name && (_jsx(HiddenInput, { type: "radio", name: name, value: value, checked: visuallySelected, onChange: handleChange, className: s.radio })), _jsxs("span", { className: s.buttonContent, children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: 4 }), children && (_jsx(Text, { variant: size === "large" ? "body-2" : "body-3", weight: "medium", children: children }))] })] }) }));
|
|
67
68
|
});
|
|
68
69
|
TabsItem.displayName = "Tabs.Item";
|
|
@@ -116,11 +116,11 @@ const TabsList = (props) => {
|
|
|
116
116
|
"--rs-tab-selection-y": selection.top,
|
|
117
117
|
"--rs-tab-selection-scale-x": selection.scaleX,
|
|
118
118
|
"--rs-tab-selection-scale-y": selection.scaleY,
|
|
119
|
-
} })] }) }), _jsx(Actionable, { onClick: handlePrevClick, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
|
|
119
|
+
} })] }) }), _jsx(Actionable, { onClick: handlePrevClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
|
|
120
120
|
s.control,
|
|
121
121
|
s["control--prev"],
|
|
122
122
|
(fadeSide === "start" || fadeSide === "both") && s["control--active"],
|
|
123
|
-
], children: _jsx(Icon, { svg: IconChevronLeft, size: 5 }) }), _jsx(Actionable, { onClick: handleNextClick, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
|
|
123
|
+
], children: _jsx(Icon, { svg: IconChevronLeft, size: 5 }) }), _jsx(Actionable, { onClick: handleNextClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
|
|
124
124
|
s.control,
|
|
125
125
|
s["control--next"],
|
|
126
126
|
(fadeSide === "end" || fadeSide === "both") && s["control--active"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-text-field-radius);column-gap:var(--rs-text-field-gap);display:flex;padding:0 calc(var(--rs-text-field-gap) - 1px);position:relative;z-index:0}.root.--focused,.root:has(label:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:999px}.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:calc(var(--rs-text-field-p-v) - 1px);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)}.affix,.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:var(--rs-text-field-attachment-height);position:relative;z-index:5}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-text-field-gap) * -1);padding-inline-end:var(--rs-text-field-action-inset)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.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) - 2px)}.--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) - 2px)}.--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) - 2px)}.--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) - 2px)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded.--focused,.root.--variant-faded:has(label:active),.root.--variant-faded:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error.--focused,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error.--focused,.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@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) - 2px)}.--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) - 2px)}.--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) - 2px)}.--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) - 2px)}}@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) - 2px)}.--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) - 2px)}.--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) - 2px)}.--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) - 2px)}}@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) - 2px)}.--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) - 2px)}.--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) - 2px)}.--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) - 2px)}}
|
|
1
|
+
.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-text-field-radius);column-gap:var(--rs-text-field-gap);display:flex;padding:0 calc(var(--rs-text-field-gap) - 1px);position:relative;z-index:0}.root.--focused,.root:has(label:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.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:calc(var(--rs-text-field-p-v) - 1px);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)}.affix,.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:var(--rs-text-field-attachment-height);position:relative;z-index:5}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-text-field-gap) * -1);padding-inline-end:var(--rs-text-field-action-inset)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.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) - 2px)}.--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) - 2px)}.--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) - 2px)}.--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) - 2px)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded.--focused,.root.--variant-faded:has(label:active),.root.--variant-faded:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error.--focused,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error.--focused,.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@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) - 2px)}.--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) - 2px)}.--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) - 2px)}.--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) - 2px)}}@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) - 2px)}.--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) - 2px)}.--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) - 2px)}.--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) - 2px)}}@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) - 2px)}.--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) - 2px)}.--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) - 2px)}.--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) - 2px)}}
|
|
@@ -120,7 +120,9 @@ export const slots = () => (<Example>
|
|
|
120
120
|
<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
|
|
121
121
|
</Example.Item>
|
|
122
122
|
<Example.Item title="multiline wrap">
|
|
123
|
-
<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge key={i}>
|
|
123
|
+
<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge size="small" key={i}>
|
|
124
|
+
Item {i + 1}
|
|
125
|
+
</Badge>))} multiline/>
|
|
124
126
|
</Example.Item>
|
|
125
127
|
</Example>);
|
|
126
128
|
export const formControl = () => (<Example>
|
|
@@ -57,7 +57,7 @@ const generateColorValues = (key, token) => {
|
|
|
57
57
|
const fg = neutral ? { ...bg, l: 0.2 } : { ...bg, l: 0.5 };
|
|
58
58
|
const fgDark = neutral ? { ...bgDark, l: 0.96 } : { ...bgDark, l: 0.75, c: bg.c * 0.85 };
|
|
59
59
|
const bd = neutral ? { ...bg, l: 0, alpha: 0.12 } : { ...bg, l: bg.l - 0.08 };
|
|
60
|
-
const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.16 } : { ...bgDark, l: bgDark.l + 0.
|
|
60
|
+
const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.16 } : { ...bgDark, l: bgDark.l + 0.1 };
|
|
61
61
|
const bdFaded = neutral
|
|
62
62
|
? { ...bgFaded, l: 0, alpha: 0.08 }
|
|
63
63
|
: { ...bgFaded, l: bgFaded.l - 0.05, c: bgFaded.c + 0.01 };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-rs-theme*=" slate "],[data-rs-theme=slate]{--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-family-monospace:Geist Mono,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--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-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:oklch(0.55 0.24 262.67);--rs-color-white:oklch(1 0 0);--rs-color-black:oklch(0 0 0);--rs-color-on-background-primary:oklch(1 0 0);--rs-color-on-background-critical:oklch(1 0 0);--rs-color-on-background-warning:oklch(0 0 0);--rs-color-on-background-positive:oklch(1 0 0);--rs-color-on-brand:oklch(1 0 0);--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--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 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme*=" slate "][data-rs-color-mode=light],[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(0.55 0.24 262.67);--rs-color-background-primary-faded:oklch(0.97 0.02 262.67);--rs-color-border-primary:oklch(0.47 0.24 262.67);--rs-color-border-primary-faded:oklch(0.92 0.03 262.67);--rs-color-foreground-primary:oklch(0.5 0.24 262.67);--rs-color-background-critical:oklch(0.59 0.22 26.97);--rs-color-background-critical-faded:oklch(0.97 0.02 26.97);--rs-color-border-critical:oklch(0.51 0.22 26.97);--rs-color-border-critical-faded:oklch(0.92 0.03 26.97);--rs-color-foreground-critical:oklch(0.5 0.22 26.97);--rs-color-background-warning:oklch(0.83 0.2 80);--rs-color-background-warning-faded:oklch(0.97 0.04 80);--rs-color-border-warning:oklch(0.75 0.2 80);--rs-color-border-warning-faded:oklch(0.92 0.05 80);--rs-color-foreground-warning:oklch(0.5 0.2 80);--rs-color-background-positive:oklch(0.53 0.13 153.78);--rs-color-background-positive-faded:oklch(0.97 0.02 153.78);--rs-color-border-positive:oklch(0.45 0.13 153.78);--rs-color-border-positive-faded:oklch(0.92 0.03 153.78);--rs-color-foreground-positive:oklch(0.5 0.13 153.78);--rs-color-background-neutral:oklch(0.92 0.01 262.67);--rs-color-background-neutral-faded:oklch(0.97 0.005 262.67);--rs-color-border-neutral:oklch(0 0.01 262.67/0.12);--rs-color-border-neutral-faded:oklch(0 0.005 262.67/0.08);--rs-color-foreground-neutral:oklch(0.2 0.01 262.67);--rs-color-foreground-neutral-faded:oklch(0.45 0.01 262.67);--rs-color-background-disabled:oklch(0.95 0 262.67);--rs-color-background-disabled-faded:oklch(0.98 0 262.67);--rs-color-border-disabled:oklch(0 0.01 262.67/0.06);--rs-color-foreground-disabled:oklch(0.84 0 262.67);--rs-color-background-elevation-base:oklch(1 0 262.67);--rs-color-background-elevation-raised:oklch(1 0 262.67);--rs-color-background-elevation-overlay:oklch(1 0 262.67);--rs-color-background-page:oklch(1 0 262.67);--rs-color-background-page-faded:oklch(0.97 0 262.67);--rs-color-rgb-background-primary:23.536499999999997,95.6505,250.1295;--rs-color-rgb-background-primary-faded:238.017,245.4885,259.182;--rs-color-rgb-background-critical:226.593,39.168,41.0295;--rs-color-rgb-background-critical-faded:258.5445,240.3885,237.8895;--rs-color-rgb-background-warning:265.7865,180.5145,-70.15050000000001;--rs-color-rgb-background-warning-faded:259.6665,242.862,215.577;--rs-color-rgb-background-positive:14.177999999999999,128.673,70.788;--rs-color-rgb-background-positive-faded:235.4415,249.3645,239.0115;--rs-color-on-background-neutral:oklch(0 0 0);--rs-color-rgb-background-neutral:224.96099999999998,228.6585,235.416;--rs-color-rgb-background-neutral-faded:243.219,245.10600000000002,248.523;--rs-color-rgb-background-disabled:238.29749999999999,238.29749999999999,238.29749999999999;--rs-color-rgb-background-disabled-faded:248.2935,248.2935,248.2935;--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:244.953,244.953,244.953}[data-rs-theme*=" slate "][data-rs-color-mode=dark],[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(0.5498 0.192 262.67);--rs-color-background-primary-faded:oklch(0.25 0.0384 262.67);--rs-color-border-primary:oklch(0.6298 0.192 262.67);--rs-color-border-primary-faded:oklch(0.35 0.0384 262.67);--rs-color-foreground-primary:oklch(0.75 0.204 262.67);--rs-color-background-critical:oklch(0.5874 0.176 26.97);--rs-color-background-critical-faded:oklch(0.25 0.0352 26.97);--rs-color-border-critical:oklch(0.6674 0.176 26.97);--rs-color-border-critical-faded:oklch(0.35 0.0352 26.97);--rs-color-foreground-critical:oklch(0.75 0.187 26.97);--rs-color-background-warning:oklch(0.8036 0.16 80);--rs-color-background-warning-faded:oklch(0.25 0.032 80);--rs-color-border-warning:oklch(0.8836 0.16 80);--rs-color-border-warning-faded:oklch(0.35 0.032 80);--rs-color-foreground-warning:oklch(0.75 0.17 80);--rs-color-background-positive:oklch(0.5162 0.104 153.78);--rs-color-background-positive-faded:oklch(0.25 0.0208 153.78);--rs-color-border-positive:oklch(0.5962 0.104 153.78);--rs-color-border-positive-faded:oklch(0.35 0.0208 153.78);--rs-color-foreground-positive:oklch(0.75 0.1105 153.78);--rs-color-background-neutral:oklch(0.36 0.008 262.67);--rs-color-background-neutral-faded:oklch(0.25 0.01 262.67);--rs-color-border-neutral:oklch(1 0.008 262.67/0.16);--rs-color-border-neutral-faded:oklch(1 0.01 262.67/0.08);--rs-color-foreground-neutral:oklch(0.96 0.008 262.67);--rs-color-foreground-neutral-faded:oklch(0.81 0.008 262.67);--rs-color-background-disabled:oklch(0.28 0 262.67);--rs-color-background-disabled-faded:oklch(0.23 0 262.67);--rs-color-border-disabled:oklch(0.28 0 262.67);--rs-color-foreground-disabled:oklch(0.4 0 262.67);--rs-color-background-elevation-base:oklch(0.2 0 262.67);--rs-color-background-elevation-raised:oklch(0.21 0 262.67);--rs-color-background-elevation-overlay:oklch(0.22 0 262.67);--rs-color-background-page:oklch(0.16 0 262.67);--rs-color-background-page-faded:oklch(0.18 0 262.67);--rs-color-rgb-background-primary:47.277,104.0655,223.3545;--rs-color-rgb-background-primary-faded:23.6385,33.456,52.122;--rs-color-rgb-background-critical:208.437,69.87,62.526;--rs-color-rgb-background-critical-faded:48.6285,26.877,24.378;--rs-color-rgb-background-warning:244.1625,177.3525,31.7985;--rs-color-rgb-background-warning-faded:41.6925,31.900499999999997,15.1215;--rs-color-rgb-background-positive:45.5685,120.86999999999999,75.1995;--rs-color-rgb-background-positive-faded:25.9335,36.643499999999996,29.0445;--rs-color-on-background-neutral:oklch(1 0 0);--rs-color-rgb-background-neutral:58.8285,61.149,65.43299999999999;--rs-color-rgb-background-neutral-faded:31.0335,33.6855,38.556;--rs-color-rgb-background-disabled:40.774499999999996,40.774499999999996,40.774499999999996;--rs-color-rgb-background-disabled-faded:28.815,28.815,28.815;--rs-color-rgb-background-elevation-base:21.9555,21.9555,21.9555;--rs-color-rgb-background-elevation-raised:24.225,24.225,24.225;--rs-color-rgb-background-elevation-overlay:26.52,26.52,26.52;--rs-color-rgb-background-page:13.209,13.209,13.209;--rs-color-rgb-background-page-faded:17.5185,17.5185,17.5185}
|
|
1
|
+
[data-rs-theme*=" slate "],[data-rs-theme=slate]{--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-family-monospace:Geist Mono,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--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-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:oklch(0.55 0.24 262.67);--rs-color-white:oklch(1 0 0);--rs-color-black:oklch(0 0 0);--rs-color-on-background-primary:oklch(1 0 0);--rs-color-on-background-critical:oklch(1 0 0);--rs-color-on-background-warning:oklch(0 0 0);--rs-color-on-background-positive:oklch(1 0 0);--rs-color-on-brand:oklch(1 0 0);--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--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 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme*=" slate "][data-rs-color-mode=light],[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(0.55 0.24 262.67);--rs-color-background-primary-faded:oklch(0.97 0.02 262.67);--rs-color-border-primary:oklch(0.47 0.24 262.67);--rs-color-border-primary-faded:oklch(0.92 0.03 262.67);--rs-color-foreground-primary:oklch(0.5 0.24 262.67);--rs-color-background-critical:oklch(0.59 0.22 26.97);--rs-color-background-critical-faded:oklch(0.97 0.02 26.97);--rs-color-border-critical:oklch(0.51 0.22 26.97);--rs-color-border-critical-faded:oklch(0.92 0.03 26.97);--rs-color-foreground-critical:oklch(0.5 0.22 26.97);--rs-color-background-warning:oklch(0.83 0.2 80);--rs-color-background-warning-faded:oklch(0.97 0.04 80);--rs-color-border-warning:oklch(0.75 0.2 80);--rs-color-border-warning-faded:oklch(0.92 0.05 80);--rs-color-foreground-warning:oklch(0.5 0.2 80);--rs-color-background-positive:oklch(0.53 0.13 153.78);--rs-color-background-positive-faded:oklch(0.97 0.02 153.78);--rs-color-border-positive:oklch(0.45 0.13 153.78);--rs-color-border-positive-faded:oklch(0.92 0.03 153.78);--rs-color-foreground-positive:oklch(0.5 0.13 153.78);--rs-color-background-neutral:oklch(0.92 0.01 262.67);--rs-color-background-neutral-faded:oklch(0.97 0.005 262.67);--rs-color-border-neutral:oklch(0 0.01 262.67/0.12);--rs-color-border-neutral-faded:oklch(0 0.005 262.67/0.08);--rs-color-foreground-neutral:oklch(0.2 0.01 262.67);--rs-color-foreground-neutral-faded:oklch(0.45 0.01 262.67);--rs-color-background-disabled:oklch(0.95 0 262.67);--rs-color-background-disabled-faded:oklch(0.98 0 262.67);--rs-color-border-disabled:oklch(0 0.01 262.67/0.06);--rs-color-foreground-disabled:oklch(0.84 0 262.67);--rs-color-background-elevation-base:oklch(1 0 262.67);--rs-color-background-elevation-raised:oklch(1 0 262.67);--rs-color-background-elevation-overlay:oklch(1 0 262.67);--rs-color-background-page:oklch(1 0 262.67);--rs-color-background-page-faded:oklch(0.97 0 262.67);--rs-color-rgb-background-primary:23.536499999999997,95.6505,250.1295;--rs-color-rgb-background-primary-faded:238.017,245.4885,259.182;--rs-color-rgb-background-critical:226.593,39.168,41.0295;--rs-color-rgb-background-critical-faded:258.5445,240.3885,237.8895;--rs-color-rgb-background-warning:265.7865,180.5145,-70.15050000000001;--rs-color-rgb-background-warning-faded:259.6665,242.862,215.577;--rs-color-rgb-background-positive:14.177999999999999,128.673,70.788;--rs-color-rgb-background-positive-faded:235.4415,249.3645,239.0115;--rs-color-on-background-neutral:oklch(0 0 0);--rs-color-rgb-background-neutral:224.96099999999998,228.6585,235.416;--rs-color-rgb-background-neutral-faded:243.219,245.10600000000002,248.523;--rs-color-rgb-background-disabled:238.29749999999999,238.29749999999999,238.29749999999999;--rs-color-rgb-background-disabled-faded:248.2935,248.2935,248.2935;--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:244.953,244.953,244.953}[data-rs-theme*=" slate "][data-rs-color-mode=dark],[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(0.5498 0.192 262.67);--rs-color-background-primary-faded:oklch(0.25 0.0384 262.67);--rs-color-border-primary:oklch(0.6498 0.192 262.67);--rs-color-border-primary-faded:oklch(0.35 0.0384 262.67);--rs-color-foreground-primary:oklch(0.75 0.204 262.67);--rs-color-background-critical:oklch(0.5874 0.176 26.97);--rs-color-background-critical-faded:oklch(0.25 0.0352 26.97);--rs-color-border-critical:oklch(0.6874 0.176 26.97);--rs-color-border-critical-faded:oklch(0.35 0.0352 26.97);--rs-color-foreground-critical:oklch(0.75 0.187 26.97);--rs-color-background-warning:oklch(0.8036 0.16 80);--rs-color-background-warning-faded:oklch(0.25 0.032 80);--rs-color-border-warning:oklch(0.9036 0.16 80);--rs-color-border-warning-faded:oklch(0.35 0.032 80);--rs-color-foreground-warning:oklch(0.75 0.17 80);--rs-color-background-positive:oklch(0.5162 0.104 153.78);--rs-color-background-positive-faded:oklch(0.25 0.0208 153.78);--rs-color-border-positive:oklch(0.6162 0.104 153.78);--rs-color-border-positive-faded:oklch(0.35 0.0208 153.78);--rs-color-foreground-positive:oklch(0.75 0.1105 153.78);--rs-color-background-neutral:oklch(0.36 0.008 262.67);--rs-color-background-neutral-faded:oklch(0.25 0.01 262.67);--rs-color-border-neutral:oklch(1 0.008 262.67/0.16);--rs-color-border-neutral-faded:oklch(1 0.01 262.67/0.08);--rs-color-foreground-neutral:oklch(0.96 0.008 262.67);--rs-color-foreground-neutral-faded:oklch(0.81 0.008 262.67);--rs-color-background-disabled:oklch(0.28 0 262.67);--rs-color-background-disabled-faded:oklch(0.23 0 262.67);--rs-color-border-disabled:oklch(0.28 0 262.67);--rs-color-foreground-disabled:oklch(0.4 0 262.67);--rs-color-background-elevation-base:oklch(0.2 0 262.67);--rs-color-background-elevation-raised:oklch(0.21 0 262.67);--rs-color-background-elevation-overlay:oklch(0.22 0 262.67);--rs-color-background-page:oklch(0.16 0 262.67);--rs-color-background-page-faded:oklch(0.18 0 262.67);--rs-color-rgb-background-primary:47.277,104.0655,223.3545;--rs-color-rgb-background-primary-faded:23.6385,33.456,52.122;--rs-color-rgb-background-critical:208.437,69.87,62.526;--rs-color-rgb-background-critical-faded:48.6285,26.877,24.378;--rs-color-rgb-background-warning:244.1625,177.3525,31.7985;--rs-color-rgb-background-warning-faded:41.6925,31.900499999999997,15.1215;--rs-color-rgb-background-positive:45.5685,120.86999999999999,75.1995;--rs-color-rgb-background-positive-faded:25.9335,36.643499999999996,29.0445;--rs-color-on-background-neutral:oklch(1 0 0);--rs-color-rgb-background-neutral:58.8285,61.149,65.43299999999999;--rs-color-rgb-background-neutral-faded:31.0335,33.6855,38.556;--rs-color-rgb-background-disabled:40.774499999999996,40.774499999999996,40.774499999999996;--rs-color-rgb-background-disabled-faded:28.815,28.815,28.815;--rs-color-rgb-background-elevation-base:21.9555,21.9555,21.9555;--rs-color-rgb-background-elevation-raised:24.225,24.225,24.225;--rs-color-rgb-background-elevation-overlay:26.52,26.52,26.52;--rs-color-rgb-background-page:13.209,13.209,13.209;--rs-color-rgb-background-page-faded:17.5185,17.5185,17.5185}
|
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.7.0-canary.
|
|
4
|
+
"version": "3.7.0-canary.16",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|