reshaped 1.0.1 → 2.1.0

package/components/Text/tests/Text.stories.js

@@ -0,0 +1,117 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Text from "../index.js";
+export default { title: "Utilities/Text" };
+export const variant = () => (<Example>
+		<Example.Item title="variant: title-1">
+			<Text variant="title-1">Title 1</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-2">
+			<Text variant="title-2">Title 2</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-3">
+			<Text variant="title-3">Title 3</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-4">
+			<Text variant="title-4">Title 4</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-5">
+			<Text variant="title-5">Title 5</Text>
+		</Example.Item>
+		<Example.Item title="variant: title-6">
+			<Text variant="title-6">Title 6</Text>
+		</Example.Item>
+		<Example.Item title="variant: featured-1">
+			<Text variant="featured-1">Featured 1</Text>
+		</Example.Item>
+		<Example.Item title="variant: featured-2">
+			<Text variant="featured-2">Featured 2</Text>
+		</Example.Item>
+		<Example.Item title="variant: featured-3">
+			<Text variant="featured-3">Featured 3</Text>
+		</Example.Item>
+		<Example.Item title="variant: body-1">
+			<Text variant="body-1">Body 1</Text>
+		</Example.Item>
+		<Example.Item title="variant: body-2">
+			<Text variant="body-2">Body 2</Text>
+		</Example.Item>
+		<Example.Item title="variant: body-3">
+			<Text variant="body-3">Body 3</Text>
+		</Example.Item>
+		<Example.Item title="variant: caption-1">
+			<Text variant="caption-1">Caption 1</Text>
+		</Example.Item>
+		<Example.Item title="variant: caption-2">
+			<Text variant="caption-2">Caption 2</Text>
+		</Example.Item>
+		<Example.Item title={["responsive variant", "[s] body-3", "[m+] title-4"]}>
+			<Text variant={{ s: "body-3", m: "title-4" }}>Responsive</Text>
+		</Example.Item>
+	</Example>);
+export const weight = () => (<Example>
+		<Example.Item title="weight: regular">
+			<Text weight="regular">Regular</Text>
+		</Example.Item>
+		<Example.Item title="weight: medium">
+			<Text weight="medium">Medium</Text>
+		</Example.Item>
+		<Example.Item title="weight: bold">
+			<Text weight="bold">Bold</Text>
+		</Example.Item>
+	</Example>);
+export const color = () => (<Example>
+		<Example.Item title="color: inherit">
+			<Text>Neutral</Text>
+		</Example.Item>
+		<Example.Item title="color: neutral-faded">
+			<Text color="neutral-faded">Faded</Text>
+		</Example.Item>
+		<Example.Item title="color: positive">
+			<Text color="positive">Positive</Text>
+		</Example.Item>
+		<Example.Item title="color: critical">
+			<Text color="critical">Critical</Text>
+		</Example.Item>
+		<Example.Item title="color: primary">
+			<Text color="primary">Primary</Text>
+		</Example.Item>
+		<Example.Item title="color: disabled">
+			<Text color="disabled">Disabled</Text>
+		</Example.Item>
+	</Example>);
+export const decoration = () => (<Example>
+		<Example.Item title="decoration: line-through">
+			<Text decoration="line-through">Line through</Text>
+		</Example.Item>
+	</Example>);
+export const maxLines = () => (<Example>
+		<Example.Item title="maxLines: 2">
+			<Text maxLines={2}>
+				There are many variations of passages of Lorem Ipsum available, but the majority have
+				suffered alteration in some form, by injected humour, or randomised words which don't look
+				even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be
+				sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum
+				generators on the Internet tend to repeat predefined chunks as necessary, making this the
+				first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined
+				with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.
+				The generated Lorem Ipsum is therefore always free from repetition, injected humour, or
+				non-characteristic words etc.
+			</Text>
+		</Example.Item>
+	</Example>);
+export const align = () => (<Example>
+		<Example.Item title="align: start">
+			<Text align="start">Text content</Text>
+		</Example.Item>
+		<Example.Item title="align: center">
+			<Text align="center">Text content</Text>
+		</Example.Item>
+		<Example.Item title="align: end">
+			<Text align="end">Text content</Text>
+		</Example.Item>
+
+		<Example.Item title={["responsive alignment", "[s]: center", "[m+] start"]}>
+			<Text align={{ s: "center", m: "start" }}>Text content</Text>
+		</Example.Item>
+	</Example>);

package/components/TextArea/TextArea.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./TextArea.types";
+declare const TextArea: (props: T.Props) => React.JSX.Element;
+export default TextArea;

package/components/TextArea/TextArea.js

@@ -0,0 +1,25 @@
+"use client";
+import React from "react";
+import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import { useFormControl } from "../FormControl/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import s from "./TextArea.module.css";
+const TextArea = (props) => {
+    var _a, _b;
+    const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, size = "medium", variant = "outline", className, attributes, } = props;
+    const formControl = useFormControl();
+    const id = useElementId(props.id);
+    const inputId = ((_a = formControl === null || formControl === void 0 ? void 0 : formControl.attributes) === null || _a === void 0 ? void 0 : _a.id) || ((_b = props.inputAttributes) === null || _b === void 0 ? void 0 : _b.id) || id;
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
+    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError;
+    const inputAttributes = Object.assign(Object.assign({}, props.inputAttributes), formControl === null || formControl === void 0 ? void 0 : formControl.attributes);
+    const rootClassName = classNames(s.root, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`], className);
+    const handleChange = (event) => {
+        if (!onChange)
+            return;
+        onChange({ name, value: event.target.value, event });
+    };
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassName }),
+        React.createElement("textarea", Object.assign({}, inputAttributes, { className: s.input, rows: 3, 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 }))));
+};
+export default TextArea;

package/components/TextArea/TextArea.module.css

@@ -0,0 +1 @@
+.input,.root{position:relative}.input{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:block;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding:calc(var(--rs-text-area-padding) - 1px);width:100%;z-index:1}.input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input[disabled]{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-area-padding:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-area-padding:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-area-padding:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded .input:focus{border-color:var(--rs-color-border-primary)}.root.--variant-headless .input{background:transparent;border-color:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{border-color:transparent;box-shadow:none}.root.--status-error .input{border-color:var(--rs-color-border-critical)}.root.--status-error .input:active,.root.--status-error .input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}@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-area-padding:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-area-padding:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-area-padding:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:900px){.--size-medium--l{--rs-text-area-padding:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-area-padding:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-area-padding:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:1280px){.--size-medium--xl{--rs-text-area-padding:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-area-padding:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-area-padding:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}

package/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import type * as G from "../../types/global";
+import { FormControlProps } from "../FormControl";
+type Size = G.Responsive<"medium" | "large" | "xlarge">;
+type BaseProps = {
+    id?: string;
+    name: string;
+    size?: Size;
+    variant?: "outline" | "faded" | "headless";
+    disabled?: boolean;
+    placeholder?: string;
+    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLTextAreaElement>>;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+    inputAttributes?: G.Attributes<"textarea", Omit<Props, "id">>;
+} & Pick<FormControlProps, "hasError">;
+export type ControlledProps = BaseProps & {
+    value: string;
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/components/TextArea/TextArea.types.js

@@ -0,0 +1 @@
+export {};

package/components/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TextArea";
+export type { Props as TextAreaProps } from "./TextArea.types";

package/components/TextArea/index.js

@@ -0,0 +1 @@
+export { default } from "./TextArea.js";

package/components/TextArea/tests/TextArea.stories.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const value: () => React.JSX.Element;
+export declare const variants: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;
+export declare const error: () => React.JSX.Element;
+export declare const formControl: () => React.JSX.Element;

package/components/TextArea/tests/TextArea.stories.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import TextArea from "../index.js";
+import FormControl from "../../FormControl/index.js";
+export default { title: "Components/TextArea" };
+export const value = () => (<Example>
+		<Example.Item title="no value, placeholder">
+			<TextArea name="Name" placeholder="Enter your name"/>
+		</Example.Item>
+		<Example.Item title="value, uncontrolled">
+			<TextArea name="Name" placeholder="Enter your name" defaultValue="Reshaped"/>
+		</Example.Item>
+		<Example.Item title="value, controlled">
+			<TextArea name="Name" placeholder="Enter your name" value="Reshaped"/>
+		</Example.Item>
+	</Example>);
+export const variants = () => (<Example>
+		<Example.Item title="variant: faded">
+			<TextArea variant="faded" name="Name" placeholder="Enter your name"/>
+		</Example.Item>
+
+		<Example.Item title="variant: headless">
+			<TextArea variant="headless" name="Name" placeholder="Enter your name"/>
+		</Example.Item>
+	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="size: medium">
+			<TextArea name="Name" placeholder="Enter your name" size="medium"/>
+		</Example.Item>
+
+		<Example.Item title="size: large">
+			<TextArea name="Name" placeholder="Enter your name" size="large"/>
+		</Example.Item>
+
+		<Example.Item title="size: xlarge">
+			<TextArea name="Name" placeholder="Enter your name" size="xlarge"/>
+		</Example.Item>
+
+		<Example.Item title={["responsive size", "[s] large", "[m+] medium"]}>
+			<TextArea name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }}/>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled, no value">
+			<TextArea name="Name" placeholder="Enter your name" disabled/>
+		</Example.Item>
+		<Example.Item title="disabled, value">
+			<TextArea name="Name" placeholder="Enter your name" disabled value="Reshaped"/>
+		</Example.Item>
+	</Example>);
+export const error = () => (<Example>
+		<Example.Item title="error">
+			<TextArea name="Name" placeholder="Enter your name" hasError/>
+		</Example.Item>
+	</Example>);
+export const formControl = () => (<Example>
+		<Example.Item title="with helper">
+			<FormControl>
+				<FormControl.Label>Name</FormControl.Label>
+				<TextArea name="name" placeholder="Enter your name"/>
+				<FormControl.Helper>Helper</FormControl.Helper>
+				<FormControl.Error>This field is required</FormControl.Error>
+			</FormControl>
+		</Example.Item>
+		<Example.Item title="with error">
+			<FormControl hasError>
+				<FormControl.Label>Name</FormControl.Label>
+				<TextArea name="name" placeholder="Enter your name"/>
+				<FormControl.Error>This field is required</FormControl.Error>
+			</FormControl>
+		</Example.Item>
+	</Example>);

package/components/TextField/TextField.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./TextField.types";
+declare const TextField: (props: T.Props) => React.JSX.Element;
+export default TextField;

package/components/TextField/TextField.js

@@ -0,0 +1,47 @@
+"use client";
+import React from "react";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import useElementId from "../../hooks/useElementId.js";
+import { useFormControl } from "../FormControl/index.js";
+import Icon from "../Icon/index.js";
+import s from "./TextField.module.css";
+const TextFieldSlot = (props) => {
+    const { slot, icon, size, affix, position } = props;
+    if (!icon && !slot && !affix)
+        return null;
+    const attachmentClassNames = classNames(s.attachment, s[`attachment--position-${position}`]);
+    const content = [
+        slot && (React.createElement("div", { className: s.slot, key: "slot" }, slot)),
+        icon && (React.createElement("div", { className: s.icon, key: "icon" },
+            React.createElement(Icon, { size: responsivePropDependency(size, (size) => {
+                    if (size === "large")
+                        return 5;
+                    if (size === "xlarge")
+                        return 6;
+                    return 4;
+                }), svg: icon }))),
+        affix && (React.createElement("div", { className: s.affix, key: "affix" }, affix)),
+    ].filter(Boolean);
+    return (React.createElement("span", { className: attachmentClassNames }, position === "end" ? content.reverse() : content));
+};
+const TextField = (props) => {
+    var _a;
+    const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, icon, endIcon, startSlot, endSlot, prefix, suffix, size = "medium", variant = "outline", className, attributes, } = props;
+    const formControl = useFormControl();
+    const id = useElementId(props.id);
+    const inputId = (formControl === null || formControl === void 0 ? void 0 : formControl.attributes.id) || ((_a = props.inputAttributes) === null || _a === void 0 ? void 0 : _a.id) || id;
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
+    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError;
+    const inputAttributes = Object.assign(Object.assign({}, props.inputAttributes), formControl === null || formControl === void 0 ? void 0 : formControl.attributes);
+    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`]);
+    const handleChange = (event) => {
+        if (!onChange)
+            return;
+        onChange({ name, value: event.target.value, event });
+    };
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassName }),
+        React.createElement(TextFieldSlot, { position: "start", icon: icon, slot: startSlot, size: size, affix: prefix }),
+        React.createElement("input", Object.assign({}, 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 })),
+        React.createElement(TextFieldSlot, { position: "end", icon: endIcon, slot: endSlot, size: size, affix: suffix })));
+};
+export default TextField;

package/components/TextField/TextField.module.css

@@ -0,0 +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{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) -50%;outline:none;padding:0 calc(var(--rs-text-field-gap) + 50%);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}.attachment--position-start .affix,.attachment--position-start .icon{-webkit-padding-start:var(--rs-text-field-gap);-webkit-margin-end:var(--rs-unit-x1);margin-inline-end:var(--rs-unit-x1);padding-inline-start:var(--rs-text-field-gap)}.attachment--position-start .affix{-webkit-padding-end:calc(var(--rs-text-field-gap) + var(--rs-unit-x1));-webkit-border-end:1px solid var(--rs-color-border-neutral-faded);border-inline-end:1px solid var(--rs-color-border-neutral-faded);padding-inline-end:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.attachment--position-end .affix,.attachment--position-end .icon{-webkit-padding-end:var(--rs-text-field-gap);-webkit-margin-start:var(--rs-unit-x1);margin-inline-start:var(--rs-unit-x1);padding-inline-end:var(--rs-text-field-gap)}.attachment--position-end .affix{-webkit-padding-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1));-webkit-border-start:1px solid var(--rs-color-border-neutral-faded);border-inline-start:1px solid var(--rs-color-border-neutral-faded);padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);cursor:not-allowed}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled)}.--size-medium{--rs-text-field-gap:var(--rs-unit-x1);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-x2);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-x3);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-x1);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-x2);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-x3);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-x1);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-x2);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-x3);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-x1);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-x2);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-x3);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)}}

package/components/TextField/TextField.types.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import type * as G from "../../types/global";
+import { FormControlProps } from "../FormControl";
+import { IconProps } from "../Icon";
+type Size = G.Responsive<"medium" | "large" | "xlarge">;
+type BaseProps = {
+    id?: string;
+    name: string;
+    size?: Size;
+    disabled?: boolean;
+    placeholder?: string;
+    icon?: SlotProps["icon"];
+    endIcon?: SlotProps["icon"];
+    startSlot?: SlotProps["slot"];
+    endSlot?: SlotProps["slot"];
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    variant?: "outline" | "faded" | "headless";
+    onChange?: G.ChangeHandler<string>;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+    inputAttributes?: G.Attributes<"input">;
+} & Pick<FormControlProps, "hasError">;
+export type ControlledProps = BaseProps & {
+    value: string;
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type SlotProps = {
+    slot?: React.ReactNode;
+    icon?: IconProps["svg"];
+    size: Size;
+    affix?: React.ReactNode;
+    position: "start" | "end";
+};
+export {};

package/components/TextField/TextField.types.js

@@ -0,0 +1 @@
+export {};

package/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TextField";
+export type { Props as TextFieldProps } from "./TextField.types";

package/components/TextField/index.js

@@ -0,0 +1 @@
+export { default } from "./TextField.js";

package/components/TextField/tests/TextField.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const value: () => React.JSX.Element;
+export declare const variants: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;
+export declare const error: () => React.JSX.Element;
+export declare const icon: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const affixes: () => React.JSX.Element;
+export declare const slots: () => React.JSX.Element;
+export declare const formControl: () => React.JSX.Element;

package/components/TextField/tests/TextField.stories.js

@@ -0,0 +1,100 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+import TextField from "../index.js";
+import FormControl from "../../FormControl/index.js";
+export default { title: "Components/TextField" };
+export const value = () => (<Example>
+		<Example.Item title="no value, placeholder">
+			<TextField name="Name" placeholder="Enter your name" icon={IconZap}/>
+		</Example.Item>
+
+		<Example.Item title="value, uncontrolled">
+			<TextField name="Name" defaultValue="Reshaped" placeholder="Enter your name"/>
+		</Example.Item>
+
+		<Example.Item title="value, controlled">
+			<TextField name="Name" value="Reshaped" placeholder="Enter your name"/>
+		</Example.Item>
+	</Example>);
+export const variants = () => (<Example>
+		<Example.Item title="variant: faded">
+			<TextField variant="faded" name="Name" placeholder="Enter your name"/>
+		</Example.Item>
+
+		<Example.Item title="variant: headless">
+			<TextField variant="headless" name="Name" placeholder="Enter your name"/>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled, no value">
+			<TextField name="Name" placeholder="Enter your name" disabled/>
+		</Example.Item>
+		<Example.Item title="disabled, value">
+			<TextField name="Name" placeholder="Enter your name" disabled value="Reshaped"/>
+		</Example.Item>
+	</Example>);
+export const error = () => (<Example>
+		<Example.Item title="error">
+			<TextField name="Name" placeholder="Enter your name" hasError/>
+		</Example.Item>
+	</Example>);
+export const icon = () => (<Example>
+		<Example.Item title="icon">
+			<TextField name="Name" placeholder="Enter your name" value="Reshaped" icon={IconZap}/>
+		</Example.Item>
+		<Example.Item title="endIcon">
+			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap}/>
+		</Example.Item>
+	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="size: medium">
+			<TextField name="Name" placeholder="Enter your name" size="medium" icon={IconZap}/>
+		</Example.Item>
+
+		<Example.Item title="size: large">
+			<TextField name="Name" placeholder="Enter your name" size="large" icon={IconZap}/>
+		</Example.Item>
+
+		<Example.Item title="size: xlarge">
+			<TextField name="Name" placeholder="Enter your name" size="xlarge" icon={IconZap}/>
+		</Example.Item>
+
+		<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
+			<TextField name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }} icon={IconZap}/>
+		</Example.Item>
+	</Example>);
+export const affixes = () => (<Example>
+		<Example.Item title="prefix">
+			<TextField name="phone" placeholder="Enter your phone number" value="Reshaped" prefix="+31"/>
+		</Example.Item>
+
+		<Example.Item title="suffix">
+			<TextField name="area" placeholder="Enter your room ara" value="25" suffix="m2"/>
+		</Example.Item>
+	</Example>);
+export const slots = () => (<Example>
+		<Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
+			<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={28}/>}/>
+		</Example.Item>
+		<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
+			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Placeholder h={28}/>}/>
+		</Example.Item>
+	</Example>);
+export const formControl = () => (<Example>
+		<Example.Item title="with helper">
+			<FormControl>
+				<FormControl.Label>Name</FormControl.Label>
+				<TextField name="name" placeholder="Enter your name"/>
+				<FormControl.Helper>Helper</FormControl.Helper>
+				<FormControl.Error>This field is required</FormControl.Error>
+			</FormControl>
+		</Example.Item>
+		<Example.Item title="with error">
+			<FormControl hasError>
+				<FormControl.Label>Name</FormControl.Label>
+				<TextField name="name" placeholder="Enter your name"/>
+				<FormControl.Error>This field is required</FormControl.Error>
+			</FormControl>
+		</Example.Item>
+	</Example>);

package/components/Theme/GlobalColorMode.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Theme.types";
+declare const GlobalColorMode: (props: T.GlobalColorModeProps) => React.JSX.Element;
+export default GlobalColorMode;

package/components/Theme/GlobalColorMode.js

@@ -0,0 +1,31 @@
+"use client";
+import React from "react";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import { enableTransitions, disableTransitions, onNextFrame } from "../../utilities/animation.js";
+import { GlobalColorModeContext } from "./Theme.context.js";
+const GlobalColorMode = (props) => {
+    const { defaultMode, children } = props;
+    const [mode, setMode] = React.useState(defaultMode || "light");
+    const changeColorMode = React.useCallback((targetMode) => {
+        setMode((prevMode) => {
+            // Avoid components styles animating when switching to another color mode
+            if (prevMode !== targetMode)
+                disableTransitions();
+            return targetMode;
+        });
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        onNextFrame(() => {
+            enableTransitions();
+        });
+    }, [mode]);
+    const value = React.useMemo(() => ({
+        mode,
+        setMode: changeColorMode,
+        invertMode: () => {
+            changeColorMode(mode === "light" ? "dark" : "light");
+        },
+    }), [mode, changeColorMode]);
+    return (React.createElement(GlobalColorModeContext.Provider, { value: value }, children));
+};
+export default GlobalColorMode;

package/components/Theme/Theme.context.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Theme.types";
+export declare const ThemeContext: React.Context<T.ThemeContextData>;
+export declare const GlobalColorModeContext: React.Context<T.GlobalColorModeContextData>;

package/components/Theme/Theme.context.js

@@ -0,0 +1,14 @@
+"use client";
+import React from "react";
+/* Context used to store data responsible for switching between modes of a theme */
+export const ThemeContext = React.createContext({
+    theme: "",
+    colorMode: "light",
+    setTheme: () => { },
+});
+/* Context used to globally define mode, used only within the library */
+export const GlobalColorModeContext = React.createContext({
+    mode: "light",
+    setMode: () => { },
+    invertMode: () => { },
+});

package/components/Theme/Theme.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Theme.types";
+declare const Theme: (props: T.Props) => React.JSX.Element;
+export default Theme;

package/components/Theme/Theme.js

@@ -0,0 +1,39 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import { ThemeContext } from "./Theme.context.js";
+import { useTheme, useGlobalColorMode } from "./useTheme.js";
+import s from "./Theme.module.css";
+const Theme = (props) => {
+    const { name, defaultName, colorMode, children, className } = props;
+    const [stateTheme, setStateTheme] = React.useState(defaultName);
+    const globalColorMode = useGlobalColorMode();
+    const parentTheme = useTheme();
+    const isRootProvider = !parentTheme.theme;
+    const usedTheme = name || stateTheme || parentTheme.theme;
+    const parentColorMode = isRootProvider ? globalColorMode : parentTheme.colorMode;
+    const invertedColorMode = parentColorMode === "light" ? "dark" : "light";
+    const usedColorMode = colorMode === "inverted" ? invertedColorMode : colorMode || parentColorMode;
+    const rootClassNames = classNames(s.root, className);
+    const setTheme = (theme) => {
+        setStateTheme(theme);
+    };
+    useIsomorphicLayoutEffect(() => {
+        if (!document || !isRootProvider)
+            return;
+        document.documentElement.setAttribute("data-rs-theme", usedTheme);
+        document.documentElement.setAttribute("data-rs-color-mode", usedColorMode);
+        return () => {
+            document.documentElement.removeAttribute("data-rs-theme");
+            document.documentElement.removeAttribute("data-rs-color-mode");
+        };
+    }, [usedTheme, usedColorMode, isRootProvider]);
+    return (React.createElement(ThemeContext.Provider, { value: {
+            theme: usedTheme,
+            colorMode: usedColorMode,
+            setTheme,
+        } },
+        React.createElement("div", { className: rootClassNames, "data-rs-theme": isRootProvider ? undefined : usedTheme, "data-rs-color-mode": isRootProvider ? undefined : usedColorMode }, children)));
+};
+export default Theme;

package/components/Theme/Theme.module.css

@@ -0,0 +1 @@
+.root{--rs-focus-shadow:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-focus-inset-shadow:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral)}