reshaped 2.4.9 → 2.5.1
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 +6 -13
- package/bundle.css +1 -1
- package/bundle.d.ts +2 -0
- package/bundle.js +10 -10
- package/components/Accordion/Accordion.module.css +1 -1
- package/components/Accordion/AccordionContent.d.ts +1 -1
- package/components/Accordion/AccordionContent.js +2 -38
- package/components/Select/Select.js +1 -1
- package/components/Select/Select.module.css +1 -1
- package/components/Stepper/Stepper.d.ts +7 -0
- package/components/Stepper/Stepper.js +43 -0
- package/components/Stepper/Stepper.module.css +1 -0
- package/components/Stepper/Stepper.types.d.ts +26 -0
- package/components/Stepper/Stepper.types.js +1 -0
- package/components/Stepper/index.d.ts +2 -0
- package/components/Stepper/index.js +1 -0
- package/components/Stepper/tests/Stepper.stories.d.ts +8 -0
- package/components/Stepper/tests/Stepper.stories.js +79 -0
- package/components/TextArea/TextArea.js +1 -1
- package/components/TextArea/TextArea.types.d.ts +2 -2
- package/components/TextField/TextField.module.css +1 -1
- package/components/TextField/TextField.types.d.ts +2 -2
- package/components/TextField/tests/TextField.stories.js +1 -1
- package/components/Theme/GlobalColorMode.js +7 -14
- package/components/View/View.js +5 -2
- package/components/View/tests/View.stories.js +8 -0
- package/components/_private/Expandable/Expandable.d.ts +4 -0
- package/components/_private/Expandable/Expandable.js +43 -0
- package/components/_private/Expandable/Expandable.module.css +1 -0
- package/components/_private/Expandable/Expandable.types.d.ts +7 -0
- package/components/_private/Expandable/Expandable.types.js +1 -0
- package/components/_private/Expandable/index.d.ts +1 -0
- package/components/_private/Expandable/index.js +1 -0
- package/components/_private/Flyout/Flyout.module.css +1 -1
- package/index.d.ts +2 -0
- package/index.js +1 -0
- package/package.json +1 -1
- package/styles/position/position.module.css +1 -1
- package/styles/types.d.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.icon{transition:transform var(--rs-duration-fast) var(--rs-easing-standard)}.icon--active{transform:rotate(180deg)}
|
|
@@ -1,45 +1,9 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import React from "react";
|
|
3
|
-
import
|
|
4
|
-
import { onNextFrame } from "../../utilities/animation.js";
|
|
2
|
+
import Expandable from "../_private/Expandable/index.js";
|
|
5
3
|
import AccordionContext from "./Accordion.context.js";
|
|
6
|
-
import s from "./Accordion.module.css";
|
|
7
4
|
const AccordionContent = (props) => {
|
|
8
5
|
const { children } = props;
|
|
9
6
|
const { active, triggerId, contentId } = React.useContext(AccordionContext);
|
|
10
|
-
|
|
11
|
-
const mountedRef = React.useRef(false);
|
|
12
|
-
const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
|
|
13
|
-
const contentClassNames = classNames(s.content, mountedRef.current && animatedHeight !== "auto" && s["content--animated"], active && s["content--active"]);
|
|
14
|
-
const handleTransitionEnd = (e) => {
|
|
15
|
-
if (e.propertyName !== "height")
|
|
16
|
-
return;
|
|
17
|
-
setAnimatedHeight(active ? "auto" : null);
|
|
18
|
-
};
|
|
19
|
-
// Avoid animations happening if component is active by default
|
|
20
|
-
// onNextFrame lets us wait for the component to render first
|
|
21
|
-
React.useEffect(() => {
|
|
22
|
-
onNextFrame(() => {
|
|
23
|
-
mountedRef.current = true;
|
|
24
|
-
});
|
|
25
|
-
}, []);
|
|
26
|
-
React.useEffect(() => {
|
|
27
|
-
const contentEl = contentRef.current;
|
|
28
|
-
if (!contentEl || !mountedRef.current)
|
|
29
|
-
return;
|
|
30
|
-
let targetHeight = 0;
|
|
31
|
-
if (active) {
|
|
32
|
-
contentEl.style.height = "auto";
|
|
33
|
-
targetHeight = contentEl.clientHeight;
|
|
34
|
-
contentEl.style.height = "0";
|
|
35
|
-
}
|
|
36
|
-
if (!active) {
|
|
37
|
-
contentEl.style.height = `${contentEl.clientHeight}px`;
|
|
38
|
-
}
|
|
39
|
-
setAnimatedHeight(targetHeight);
|
|
40
|
-
}, [active]);
|
|
41
|
-
return (React.createElement("div", { className: contentClassNames, ref: contentRef, style: animatedHeight !== null
|
|
42
|
-
? { height: animatedHeight, overflow: animatedHeight === "auto" ? "visible" : undefined }
|
|
43
|
-
: undefined, onTransitionEnd: handleTransitionEnd, "aria-labelledby": triggerId, id: contentId, role: "region", hidden: !active && animatedHeight === null }, children));
|
|
7
|
+
return (React.createElement(Expandable, { active: active, attributes: { "aria-labelledby": triggerId, id: contentId } }, children));
|
|
44
8
|
};
|
|
45
9
|
export default AccordionContent;
|
|
@@ -40,7 +40,7 @@ const Select = (props) => {
|
|
|
40
40
|
if (size === "xlarge")
|
|
41
41
|
return 6;
|
|
42
42
|
return 4;
|
|
43
|
-
}), svg: icon
|
|
43
|
+
}), svg: icon })) : (startSlot)));
|
|
44
44
|
return (React.createElement("div", Object.assign({}, attributes, { className: rootClassName }),
|
|
45
45
|
options ? (React.createElement(React.Fragment, null,
|
|
46
46
|
startContent,
|
|
@@ -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);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;-moz-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));position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}select.input{padding-inline-start:var(--rs-select-gap)}.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.
|
|
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;-moz-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));position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot,select.input{padding-inline-start:var(--rs-select-gap)}.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:var(--rs-select-gap)}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:calc(var(--rs-select-gap) + var(--rs-unit-x1));pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top: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-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top: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-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top: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-neutral-faded)}.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 (max-width:659px) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (min-width:660px){.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top: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-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top: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-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:900px){.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top: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-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top: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-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (min-width:1280px){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top: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-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top: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-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { responsivePropDependency } from "../../utilities/helpers.js";
|
|
3
|
+
import Expandable from "../_private/Expandable/index.js";
|
|
4
|
+
import View from "../View/index.js";
|
|
5
|
+
import Text from "../Text/index.js";
|
|
6
|
+
import Divider from "../Divider/index.js";
|
|
7
|
+
import Icon from "../Icon/index.js";
|
|
8
|
+
import Hidden from "../Hidden/index.js";
|
|
9
|
+
import IconCheckmark from "../../icons/Checkmark.js";
|
|
10
|
+
import s from "./Stepper.module.css";
|
|
11
|
+
const StepperItemPrivate = (props) => {
|
|
12
|
+
const { title, subtitle, children, direction, className, attributes, labelDisplay, step, completed, active, last, } = props;
|
|
13
|
+
const labelHidden = labelDisplay && responsivePropDependency(labelDisplay, (value) => value === "hidden");
|
|
14
|
+
const labelNode = (React.createElement(View, { gap: 3, grow: true },
|
|
15
|
+
React.createElement(View.Item, null,
|
|
16
|
+
React.createElement(Text, { variant: "body-3", weight: "medium" }, title),
|
|
17
|
+
React.createElement(Text, { variant: "caption-1", color: "neutral-faded" }, subtitle))));
|
|
18
|
+
return (React.createElement(View, null,
|
|
19
|
+
React.createElement(View, { attributes: attributes, className: className, direction: "row", gap: 2, align: "center", position: "static" },
|
|
20
|
+
React.createElement(View.Item, null,
|
|
21
|
+
React.createElement(View, { align: "center", justify: "center", backgroundColor: active || completed ? "primary" : "neutral-faded", borderColor: active || completed ? undefined : "neutral-faded", borderRadius: "circular", as: "span", width: 8, height: 8, zIndex: 5 },
|
|
22
|
+
React.createElement(Text, { variant: "body-3", weight: active ? "bold" : "medium" }, completed ? React.createElement(Icon, { svg: IconCheckmark, size: 4 }) : step)),
|
|
23
|
+
direction === "column" && !last && React.createElement(Divider, { vertical: true, className: s.verticalDivider })),
|
|
24
|
+
labelDisplay ? React.createElement(Hidden, { hide: labelHidden }, labelNode) : labelNode),
|
|
25
|
+
direction === "column" && children && (React.createElement(Expandable, { active: active },
|
|
26
|
+
React.createElement(View, { paddingStart: 10, paddingTop: 2 }, children)))));
|
|
27
|
+
};
|
|
28
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
29
|
+
const StepperItem = (_) => null;
|
|
30
|
+
const Stepper = (props) => {
|
|
31
|
+
const { children, direction = "row", activeId, labelDisplay, className, attributes } = props;
|
|
32
|
+
const vertical = direction === "column";
|
|
33
|
+
const length = React.Children.count(children);
|
|
34
|
+
return (React.createElement(View, { attributes: attributes, direction: direction, align: vertical ? "stretch" : "center", className: className, gap: 3, wrap: false }, React.Children.map(children, (child, index) => {
|
|
35
|
+
const itemId = child.props.id || `${index}`;
|
|
36
|
+
return (React.createElement(React.Fragment, { key: index },
|
|
37
|
+
React.createElement(StepperItemPrivate, Object.assign({}, child.props, { id: child.props.id || `${index}`, active: (activeId === null || activeId === void 0 ? void 0 : activeId.toString()) === itemId, step: index + 1, last: index === length - 1, direction: direction, labelDisplay: labelDisplay })),
|
|
38
|
+
!vertical && index < length - 1 && (React.createElement(View, { grow: true },
|
|
39
|
+
React.createElement(Divider, null)))));
|
|
40
|
+
})));
|
|
41
|
+
};
|
|
42
|
+
Stepper.Item = StepperItem;
|
|
43
|
+
export default Stepper;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.verticalDivider{inset-inline-start:calc(var(--rs-unit-x4) - .5px);position:absolute}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type * as G from "../../types/global";
|
|
3
|
+
export type Props = {
|
|
4
|
+
activeId?: string | number;
|
|
5
|
+
labelDisplay?: G.Responsive<"inline" | "hidden">;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
direction?: "row" | "column";
|
|
8
|
+
className?: G.ClassName;
|
|
9
|
+
attributes?: G.Attributes<"ul", Props>;
|
|
10
|
+
};
|
|
11
|
+
export type ItemProps = {
|
|
12
|
+
id?: string;
|
|
13
|
+
completed?: boolean;
|
|
14
|
+
title?: React.ReactNode;
|
|
15
|
+
subtitle?: React.ReactNode;
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
className?: G.ClassName;
|
|
18
|
+
attributes?: G.Attributes<"li", ItemProps>;
|
|
19
|
+
};
|
|
20
|
+
export type ItemPrivateProps = ItemProps & {
|
|
21
|
+
labelDisplay: Props["labelDisplay"];
|
|
22
|
+
step: number;
|
|
23
|
+
active: boolean;
|
|
24
|
+
direction: Props["direction"];
|
|
25
|
+
last: boolean;
|
|
26
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Stepper.js";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
};
|
|
5
|
+
export default _default;
|
|
6
|
+
export declare const direction: () => React.JSX.Element;
|
|
7
|
+
export declare const labelDisplay: () => React.JSX.Element;
|
|
8
|
+
export declare const edgeCases: () => React.JSX.Element;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Example, Placeholder } from "../../../utilities/storybook/index.js";
|
|
3
|
+
import Stepper from "../index.js";
|
|
4
|
+
import Button from "../../Button/index.js";
|
|
5
|
+
import View from "../../View/index.js";
|
|
6
|
+
export default { title: "Components/Stepper" };
|
|
7
|
+
const Demo = (props) => {
|
|
8
|
+
var _a;
|
|
9
|
+
const [activeId, setActiveId] = React.useState((_a = props.activeId) !== null && _a !== void 0 ? _a : 1);
|
|
10
|
+
const content = (<View gap={3}>
|
|
11
|
+
<Placeholder />
|
|
12
|
+
<View direction="row" gap={3}>
|
|
13
|
+
<Button onClick={() => setActiveId((prev) => Math.max(0, prev - 1))}>Previous</Button>
|
|
14
|
+
<Button onClick={() => setActiveId((prev) => Math.min(2, prev + 1))}>Next</Button>
|
|
15
|
+
</View>
|
|
16
|
+
</View>);
|
|
17
|
+
return (<Stepper activeId={activeId} direction="column">
|
|
18
|
+
<Stepper.Item completed={activeId > 0} title="Step 1" subtitle={props.subtitle || "Step subtitle"}>
|
|
19
|
+
{content}
|
|
20
|
+
</Stepper.Item>
|
|
21
|
+
<Stepper.Item completed={activeId > 1} title="Step 2">
|
|
22
|
+
{content}
|
|
23
|
+
</Stepper.Item>
|
|
24
|
+
<Stepper.Item completed={activeId > 2} title="Step 3 very long title">
|
|
25
|
+
{content}
|
|
26
|
+
</Stepper.Item>
|
|
27
|
+
</Stepper>);
|
|
28
|
+
};
|
|
29
|
+
export const direction = () => (<Example>
|
|
30
|
+
<Example.Item title="direction: row">
|
|
31
|
+
<Stepper activeId="1">
|
|
32
|
+
<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
|
|
33
|
+
<Stepper.Item title="Step 2"/>
|
|
34
|
+
<Stepper.Item title="Step 3 very long title"/>
|
|
35
|
+
</Stepper>
|
|
36
|
+
</Example.Item>
|
|
37
|
+
<Example.Item title="direction: column">
|
|
38
|
+
<Stepper activeId="1" direction="column">
|
|
39
|
+
<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
|
|
40
|
+
<Stepper.Item title="Step 2"/>
|
|
41
|
+
<Stepper.Item title="Step 3 very long title"/>
|
|
42
|
+
</Stepper>
|
|
43
|
+
</Example.Item>
|
|
44
|
+
</Example>);
|
|
45
|
+
export const labelDisplay = () => (<Example>
|
|
46
|
+
<Example.Item title="direction: row, labels hidden">
|
|
47
|
+
<Stepper activeId="1" labelDisplay="hidden">
|
|
48
|
+
<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
|
|
49
|
+
<Stepper.Item title="Step 2"/>
|
|
50
|
+
<Stepper.Item title="Step 3 very long title"/>
|
|
51
|
+
</Stepper>
|
|
52
|
+
</Example.Item>
|
|
53
|
+
<Example.Item title="direction: column, labels hiden">
|
|
54
|
+
<Stepper activeId="1" direction="column" labelDisplay="hidden">
|
|
55
|
+
<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
|
|
56
|
+
<Stepper.Item title="Step 2"/>
|
|
57
|
+
<Stepper.Item title="Step 3 very long title"/>
|
|
58
|
+
</Stepper>
|
|
59
|
+
</Example.Item>
|
|
60
|
+
<Example.Item title="direction: row, labels hidden on s">
|
|
61
|
+
<Stepper activeId="1" labelDisplay={{ s: "hidden", m: "inline" }}>
|
|
62
|
+
<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
|
|
63
|
+
<Stepper.Item title="Step 2"/>
|
|
64
|
+
<Stepper.Item title="Step 3 very long title"/>
|
|
65
|
+
</Stepper>
|
|
66
|
+
</Example.Item>
|
|
67
|
+
</Example>);
|
|
68
|
+
export const edgeCases = () => (<Example>
|
|
69
|
+
<Example.Item title="collapsible">
|
|
70
|
+
<Demo />
|
|
71
|
+
</Example.Item>
|
|
72
|
+
<Example.Item title={[
|
|
73
|
+
"multiline subtitle",
|
|
74
|
+
"should wrap the text correctly",
|
|
75
|
+
"should display the connector correctly",
|
|
76
|
+
]}>
|
|
77
|
+
<Demo activeId={0} subtitle="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy"/>
|
|
78
|
+
</Example.Item>
|
|
79
|
+
</Example>);
|
|
@@ -21,7 +21,7 @@ const TextArea = (props) => {
|
|
|
21
21
|
onChange({ name, value: event.target.value, event });
|
|
22
22
|
};
|
|
23
23
|
return (React.createElement("div", Object.assign({}, attributes, { "data-rs-aligner-target": true, className: rootClassName }),
|
|
24
|
-
React.createElement("textarea", Object.assign({}, inputAttributes, { className: s.input,
|
|
24
|
+
React.createElement("textarea", Object.assign({ rows: 3 }, inputAttributes, { className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onBlur), id: inputId }))));
|
|
25
25
|
};
|
|
26
26
|
TextArea.Aligner = Aligner;
|
|
27
27
|
export default TextArea;
|
|
@@ -10,8 +10,8 @@ type BaseProps = {
|
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLTextAreaElement>>;
|
|
13
|
-
onFocus?: (e: React.FocusEvent) => void;
|
|
14
|
-
onBlur?: (e: React.FocusEvent) => void;
|
|
13
|
+
onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
|
|
14
|
+
onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
|
|
15
15
|
className?: G.ClassName;
|
|
16
16
|
attributes?: G.Attributes<"div", Props>;
|
|
17
17
|
inputAttributes?: G.Attributes<"textarea", Omit<Props, "id">>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--rs-p-v:var(--rs-unit-x1);--rs-p-h:
|
|
1
|
+
.root{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-text-field-gap);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-p-v) - 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{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:calc(var(--rs-unit-x1) * -1) 0;outline:none;padding:0 var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-text-fill-color:var(--rs-color-foreground-neutral);-webkit-background-clip:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.icon{pointer-events:none}.affix{color:var(--rs-color-foreground-neutral-faded)}.attachment{align-items:center;display:flex;flex-shrink:0}.attachment--position-start{gap:var(--rs-text-field-gap);padding-inline-start:var(--rs-text-field-gap)}.attachment--position-start .affix{border-inline-end:1px solid var(--rs-color-border-neutral-faded);padding-inline-end:var(--rs-text-field-gap)}.attachment--position-end{padding-inline-end:calc(var(--rs-text-field-gap) - var(--rs-unit-x1) - 1px)}.attachment--position-end .affix,.attachment--position-end .icon{padding-inline-end:var(--rs-unit-x1)}.attachment--position-end .affix{border-inline-start:1px solid var(--rs-color-border-neutral-faded);padding-inline-start:var(--rs-text-field-gap)}.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-medium{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.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)}@media (max-width:659px) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (min-width:660px){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:900px){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:1280px){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
|
|
@@ -17,8 +17,8 @@ type BaseProps = {
|
|
|
17
17
|
suffix?: React.ReactNode;
|
|
18
18
|
variant?: "outline" | "faded" | "headless";
|
|
19
19
|
onChange?: G.ChangeHandler<string>;
|
|
20
|
-
onFocus?: (e: React.FocusEvent) => void;
|
|
21
|
-
onBlur?: (e: React.FocusEvent) => void;
|
|
20
|
+
onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
21
|
+
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
22
22
|
className?: G.ClassName;
|
|
23
23
|
attributes?: G.Attributes<"div", Props>;
|
|
24
24
|
inputAttributes?: G.Attributes<"input">;
|
|
@@ -78,7 +78,7 @@ export const affixes = () => (<Example>
|
|
|
78
78
|
</Example>);
|
|
79
79
|
export const slots = () => (<Example>
|
|
80
80
|
<Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
|
|
81
|
-
<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={
|
|
81
|
+
<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={24}/>}/>
|
|
82
82
|
</Example.Item>
|
|
83
83
|
<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
|
|
84
84
|
<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Placeholder h={28}/>}/>
|
|
@@ -6,17 +6,10 @@ import { GlobalColorModeContext } from "./Theme.context.js";
|
|
|
6
6
|
const GlobalColorMode = (props) => {
|
|
7
7
|
const { defaultMode, children } = props;
|
|
8
8
|
const [mode, setMode] = React.useState(defaultMode || "light");
|
|
9
|
-
const changeColorMode = React.useCallback((targetMode) => {
|
|
10
|
-
document.documentElement.setAttribute("data-rs-color-mode", targetMode);
|
|
11
|
-
setMode((prevMode) => {
|
|
12
|
-
if (prevMode !== targetMode) {
|
|
13
|
-
// Avoid components styles animating when switching to another color mode
|
|
14
|
-
disableTransitions();
|
|
15
|
-
}
|
|
16
|
-
return targetMode;
|
|
17
|
-
});
|
|
18
|
-
}, []);
|
|
19
9
|
useIsomorphicLayoutEffect(() => {
|
|
10
|
+
// Avoid components styles animating when switching to another color mode
|
|
11
|
+
disableTransitions();
|
|
12
|
+
document.documentElement.setAttribute("data-rs-color-mode", mode);
|
|
20
13
|
onNextFrame(() => {
|
|
21
14
|
enableTransitions();
|
|
22
15
|
});
|
|
@@ -28,15 +21,15 @@ const GlobalColorMode = (props) => {
|
|
|
28
21
|
useIsomorphicLayoutEffect(() => {
|
|
29
22
|
const nextColorMode = document.documentElement.getAttribute("data-rs-color-mode");
|
|
30
23
|
if (nextColorMode)
|
|
31
|
-
|
|
24
|
+
setMode(nextColorMode);
|
|
32
25
|
}, []);
|
|
33
26
|
const value = React.useMemo(() => ({
|
|
34
27
|
mode,
|
|
35
|
-
setMode
|
|
28
|
+
setMode,
|
|
36
29
|
invertMode: () => {
|
|
37
|
-
|
|
30
|
+
setMode(mode === "light" ? "dark" : "light");
|
|
38
31
|
},
|
|
39
|
-
}), [mode
|
|
32
|
+
}), [mode]);
|
|
40
33
|
return (React.createElement(GlobalColorModeContext.Provider, { value: value }, children));
|
|
41
34
|
};
|
|
42
35
|
export default GlobalColorMode;
|
package/components/View/View.js
CHANGED
|
@@ -48,7 +48,7 @@ const View = (props) => {
|
|
|
48
48
|
* It still resolves the attributes correctly based on the tag
|
|
49
49
|
*/
|
|
50
50
|
as: TagName = "div", children, divided, className, attributes, } = props;
|
|
51
|
-
|
|
51
|
+
let isFlex = !!align || !!justify || !!gap || !!props.direction;
|
|
52
52
|
const direction = props.direction || (isFlex ? "column" : undefined);
|
|
53
53
|
const radiusStyles = getRadiusStyles(borderRadius);
|
|
54
54
|
const bleedStyles = getBleedStyles(bleed);
|
|
@@ -85,8 +85,9 @@ const View = (props) => {
|
|
|
85
85
|
React.createElement(Divider, { vertical: isDividerVertical, blank: true })));
|
|
86
86
|
};
|
|
87
87
|
const renderItem = ({ className, child, index }) => {
|
|
88
|
-
var _a, _b;
|
|
88
|
+
var _a, _b, _c;
|
|
89
89
|
const isItem = child.type === ViewItem;
|
|
90
|
+
const isView = child.type === View;
|
|
90
91
|
const key = child.key || index;
|
|
91
92
|
const dividerElement = !!index && divided && renderDivider({ className, key });
|
|
92
93
|
let itemElement;
|
|
@@ -106,6 +107,8 @@ const View = (props) => {
|
|
|
106
107
|
nowrap = child.props.grow;
|
|
107
108
|
if (isItem && ((_b = child.props) === null || _b === void 0 ? void 0 : _b.gap) === "auto")
|
|
108
109
|
nowrap = true;
|
|
110
|
+
if ((isItem || isView) && ((_c = child.props) === null || _c === void 0 ? void 0 : _c.grow))
|
|
111
|
+
isFlex = true;
|
|
109
112
|
return [dividerElement, itemElement];
|
|
110
113
|
};
|
|
111
114
|
const formattedChildren = React.Children.map(children, (child, index) => {
|
|
@@ -1024,4 +1024,12 @@ export const testComposition = () => (<Example>
|
|
|
1024
1024
|
</View.Item>
|
|
1025
1025
|
</View>
|
|
1026
1026
|
</Example.Item>
|
|
1027
|
+
<Example.Item title="View becomes flexbox if there is a child with grow">
|
|
1028
|
+
<View height="300px" borderColor="neutral-faded">
|
|
1029
|
+
<View height="50px"/>
|
|
1030
|
+
<View grow backgroundColor="neutral-faded" padding={4}>
|
|
1031
|
+
Grow
|
|
1032
|
+
</View>
|
|
1033
|
+
</View>
|
|
1034
|
+
</Example.Item>
|
|
1027
1035
|
</Example>);
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { classNames } from "../../../utilities/helpers.js";
|
|
4
|
+
import { onNextFrame } from "../../../utilities/animation.js";
|
|
5
|
+
import s from "./Expandable.module.css";
|
|
6
|
+
const Expandable = (props) => {
|
|
7
|
+
const { children, active, attributes } = props;
|
|
8
|
+
const rootRef = React.useRef(null);
|
|
9
|
+
const mountedRef = React.useRef(false);
|
|
10
|
+
const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
|
|
11
|
+
const contentClassNames = classNames(s.root, mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
|
|
12
|
+
const handleTransitionEnd = (e) => {
|
|
13
|
+
if (e.propertyName !== "height")
|
|
14
|
+
return;
|
|
15
|
+
setAnimatedHeight(active ? "auto" : null);
|
|
16
|
+
};
|
|
17
|
+
// Avoid animations happening if component is active by default
|
|
18
|
+
// onNextFrame lets us wait for the component to render first
|
|
19
|
+
React.useEffect(() => {
|
|
20
|
+
onNextFrame(() => {
|
|
21
|
+
mountedRef.current = true;
|
|
22
|
+
});
|
|
23
|
+
}, []);
|
|
24
|
+
React.useEffect(() => {
|
|
25
|
+
const rootEl = rootRef.current;
|
|
26
|
+
if (!rootEl || !mountedRef.current)
|
|
27
|
+
return;
|
|
28
|
+
let targetHeight = 0;
|
|
29
|
+
if (active) {
|
|
30
|
+
rootEl.style.height = "auto";
|
|
31
|
+
targetHeight = rootEl.clientHeight;
|
|
32
|
+
rootEl.style.height = "0";
|
|
33
|
+
}
|
|
34
|
+
if (!active) {
|
|
35
|
+
rootEl.style.height = `${rootEl.clientHeight}px`;
|
|
36
|
+
}
|
|
37
|
+
setAnimatedHeight(targetHeight);
|
|
38
|
+
}, [active]);
|
|
39
|
+
return (React.createElement("div", Object.assign({}, attributes, { className: contentClassNames, ref: rootRef, style: animatedHeight !== null
|
|
40
|
+
? { height: animatedHeight, overflow: animatedHeight === "auto" ? "visible" : undefined }
|
|
41
|
+
: undefined, onTransitionEnd: handleTransitionEnd, role: "region", hidden: !active && animatedHeight === null }), children));
|
|
42
|
+
};
|
|
43
|
+
export default Expandable;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.root{height:0;overflow:hidden}.root.--animated{transition:height var(--rs-duration-slow) var(--rs-easing-standard)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Expandable";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Expandable.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.content{--rs-flyout-gap:2}.
|
|
1
|
+
.content{--rs-flyout-gap:2;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%}.inner{opacity:0;transform:scale(.8);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y)}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1)}.content.--animated .inner{transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-timing-function:var(--rs-easing-decelerate)}
|
package/index.d.ts
CHANGED
|
@@ -75,6 +75,8 @@ export { default as Skeleton } from "./components/Skeleton";
|
|
|
75
75
|
export type { SkeletonProps } from "./components/Skeleton";
|
|
76
76
|
export { default as Slider } from "./components/Slider";
|
|
77
77
|
export type { SliderProps } from "./components/Slider";
|
|
78
|
+
export { default as Stepper } from "./components/Stepper";
|
|
79
|
+
export type { StepperProps } from "./components/Stepper";
|
|
78
80
|
export { default as Switch } from "./components/Switch";
|
|
79
81
|
export type { SwitchProps } from "./components/Switch";
|
|
80
82
|
export { default as Table } from "./components/Table";
|
package/index.js
CHANGED
|
@@ -38,6 +38,7 @@ export { default as Scrim } from "./components/Scrim/index.js";
|
|
|
38
38
|
export { default as Select } from "./components/Select/index.js";
|
|
39
39
|
export { default as Skeleton } from "./components/Skeleton/index.js";
|
|
40
40
|
export { default as Slider } from "./components/Slider/index.js";
|
|
41
|
+
export { default as Stepper } from "./components/Stepper/index.js";
|
|
41
42
|
export { default as Switch } from "./components/Switch/index.js";
|
|
42
43
|
export { default as Table } from "./components/Table/index.js";
|
|
43
44
|
export { default as Tabs } from "./components/Tabs/index.js";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.5.1",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.--position-relative{position:relative}.--position-absolute{position:absolute}.--position-fixed{position:fixed}.--position-sticky{position:sticky}@media (min-width:660px){.--position-relative--m{position:relative}.--position-absolute--m{position:absolute}.--position-fixed--m{position:fixed}.--position-sticky--m{position:sticky}}@media (min-width:900px){.--position-relative--l{position:relative}.--position-absolute--l{position:absolute}.--position-fixed--l{position:fixed}.--position-sticky--l{position:sticky}}@media (min-width:1280px){.--position-relative--xl{position:relative}.--position-absolute--xl{position:absolute}.--position-fixed--xl{position:fixed}.--position-sticky--xl{position:sticky}}
|
|
1
|
+
.--position-static{position:static}.--position-relative{position:relative}.--position-absolute{position:absolute}.--position-fixed{position:fixed}.--position-sticky{position:sticky}@media (min-width:660px){.--position-static--m{position:static}.--position-relative--m{position:relative}.--position-absolute--m{position:absolute}.--position-fixed--m{position:fixed}.--position-sticky--m{position:sticky}}@media (min-width:900px){.--position-static--l{position:static}.--position-relative--l{position:relative}.--position-absolute--l{position:absolute}.--position-fixed--l{position:fixed}.--position-sticky--l{position:sticky}}@media (min-width:1280px){.--position-static--xl{position:static}.--position-relative--xl{position:relative}.--position-absolute--xl{position:absolute}.--position-fixed--xl{position:fixed}.--position-sticky--xl{position:sticky}}
|
package/styles/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import * as G from "../types/global";
|
|
3
3
|
export type Radius = "small" | "medium" | "large" | "circular" | "none";
|
|
4
|
-
export type Position = "relative" | "absolute" | "fixed" | "sticky";
|
|
4
|
+
export type Position = "relative" | "absolute" | "fixed" | "sticky" | "static";
|
|
5
5
|
/**
|
|
6
6
|
* Utility controlled only with classnames
|
|
7
7
|
*/
|