reshaped 2.5.0 → 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 -18
- package/bundle.css +1 -1
- package/bundle.js +7 -7
- package/components/Select/Select.js +1 -1
- package/components/Select/Select.module.css +1 -1
- 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/package.json +1 -1
|
@@ -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)}}
|
|
@@ -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/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.5.
|
|
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",
|