reshaped 1.0.1 → 2.2.0

package/components/Tabs/TabsUncontrolled.d.ts

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

package/components/Tabs/TabsUncontrolled.js

@@ -0,0 +1,18 @@
+"use client";
+import React from "react";
+import TabsControlled from "./TabsControlled.js";
+const TabsUncontrolled = (props) => {
+    const { defaultValue, onChange } = props;
+    const [value, setValue] = React.useState(defaultValue);
+    const handleChange = ({ value }) => {
+        setValue(value);
+        if (onChange)
+            onChange({ value });
+    };
+    // Silently handle the default id selection if it's not passed
+    const handleSilentChange = ({ value }) => {
+        setValue(value);
+    };
+    return (React.createElement(TabsControlled, Object.assign({}, props, { onChange: handleChange, onSilentChange: handleSilentChange, value: value, defaultValue: undefined })));
+};
+export default TabsUncontrolled;

package/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Tabs";
+export type { Props as TabsProps, ItemProps as TabsItemProps } from "./Tabs.types";

package/components/Tabs/index.js

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const variant: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const direction: () => React.JSX.Element;
+export declare const composition: () => React.JSX.Element;
+export declare const icon: () => React.JSX.Element;
+export declare const equalWidth: () => React.JSX.Element;
+export declare const selection: () => React.JSX.Element;
+export declare const edgeCases: () => React.JSX.Element;

package/components/Tabs/tests/Tabs.stories.js

@@ -0,0 +1,251 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Tabs from "../index.js";
+import View from "../../View/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default { title: "Components/Tabs" };
+export const variant = () => (<Example>
+		<Example.Item title="variant: default">
+			<Tabs>
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+
+		<Example.Item title="variant: pills">
+			<Tabs variant="pills">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+
+		<Example.Item title="variant: pills-elevated">
+			<Tabs variant="pills-elevated">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+
+		<Example.Item title="variant: borderless">
+			<Tabs variant="borderless">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="variant: default, size: large">
+			<Tabs size="large">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+
+		<Example.Item title="variant: pills, size: large">
+			<Tabs variant="pills" size="large">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+
+		<Example.Item title="variant: pills-elevated, size: large">
+			<Tabs variant="pills-elevated" size="large">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+
+		<Example.Item title="variant: borderless, size: large">
+			<Tabs variant="borderless" size="large">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+	</Example>);
+export const direction = () => (<Example>
+		<Example.Item title="direction: column, variant: underline">
+			<Tabs direction="column">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+					<Tabs.Item value="3">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+		<Example.Item title="direction: column, variant: pills">
+			<Tabs direction="column" variant="pills">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+		<Example.Item title="direction: column, variant: pills-elevated">
+			<Tabs direction="column" variant="pills-elevated">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+	</Example>);
+export const composition = () => (<Example>
+		<Example.Item title="switching panels">
+			<Tabs>
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+
+				<Tabs.Panel value="0">Tab 1</Tabs.Panel>
+				<Tabs.Panel value="1">Tab 2</Tabs.Panel>
+				<Tabs.Panel value="2">Tab 3</Tabs.Panel>
+			</Tabs>
+		</Example.Item>
+	</Example>);
+export const icon = () => (<Example>
+		<Example.Item title="icon">
+			<Tabs>
+				<Tabs.List>
+					<Tabs.Item value="0" icon={IconZap}>
+						Item 1
+					</Tabs.Item>
+					<Tabs.Item value="1" icon={IconZap}>
+						Long item 2
+					</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+		<Example.Item title="icon only">
+			<Tabs variant="pills-elevated">
+				<Tabs.List>
+					<Tabs.Item value="0" icon={IconZap} attributes={{ "aria-label": "Tab 1" }}/>
+					<Tabs.Item value="1" icon={IconZap} attributes={{ "aria-label": "Tab 2" }}/>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+	</Example>);
+export const equalWidth = () => (<Example>
+		<Example.Item title="equal width items">
+			<Tabs onChange={console.log} itemWidth="equal">
+				<Tabs.List>
+					<Tabs.Item value="0" icon={IconZap}>
+						Item 1
+					</Tabs.Item>
+					<Tabs.Item value="1" icon={IconZap}>
+						Long item 2
+					</Tabs.Item>
+					<Tabs.Item value="2" icon={IconZap}>
+						Very long item 3
+					</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+	</Example>);
+export const selection = () => (<Example>
+		<Example.Item title="value: 2, uncontrolled">
+			<Tabs defaultValue="2">
+				<Tabs.List>
+					<Tabs.Item value="1" icon={IconZap}>
+						Item 1
+					</Tabs.Item>
+					<Tabs.Item value="2" icon={IconZap}>
+						Long item 2
+					</Tabs.Item>
+					<Tabs.Item value="3" icon={IconZap}>
+						Very long item 3
+					</Tabs.Item>
+				</Tabs.List>
+
+				<Tabs.Panel value="1">Tab 1</Tabs.Panel>
+				<Tabs.Panel value="2">Tab 2</Tabs.Panel>
+				<Tabs.Panel value="3">Tab 3</Tabs.Panel>
+			</Tabs>
+		</Example.Item>
+
+		<Example.Item title="value: 2, controlled">
+			<Tabs value="2">
+				<Tabs.List>
+					<Tabs.Item value="1" icon={IconZap}>
+						Item 1
+					</Tabs.Item>
+					<Tabs.Item value="2" icon={IconZap}>
+						Long item 2
+					</Tabs.Item>
+					<Tabs.Item value="3" icon={IconZap}>
+						Very long item 3
+					</Tabs.Item>
+				</Tabs.List>
+
+				<Tabs.Panel value="1">Tab 1</Tabs.Panel>
+				<Tabs.Panel value="2">Tab 2</Tabs.Panel>
+				<Tabs.Panel value="3">Tab 3</Tabs.Panel>
+			</Tabs>
+		</Example.Item>
+	</Example>);
+export const edgeCases = () => (<Example>
+		<Example.Item title="Viewport overflow">
+			<Tabs>
+				<Tabs.List>
+					{[...Array(8)].map((_, i) => (<Tabs.Item value={`${i}`} key={i} icon={IconZap}>
+							Very long item {i}
+						</Tabs.Item>))}
+				</Tabs.List>
+
+				{[...Array(8)].map((_, i) => (<Tabs.Panel value={`${i}`} key={i}>
+						Tab {i}
+					</Tabs.Panel>))}
+			</Tabs>
+		</Example.Item>
+		<Example.Item>
+			<Tabs onChange={console.log} variant="pills-elevated" name="hey">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">
+						<View borderColor="neutral-faded" padding={5}>
+							Item 3
+						</View>
+					</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+		<Example.Item title="Custom non-interactive list children">
+			<Tabs direction="column">
+				<Tabs.List>
+					<Tabs.Item value="0">Item 1</Tabs.Item>
+					<View height={6} backgroundColor="neutral-faded" borderRadius="small"/>
+					<Tabs.Item value="1">Long item 2</Tabs.Item>
+					<Tabs.Item value="2">Very long item 3</Tabs.Item>
+				</Tabs.List>
+			</Tabs>
+		</Example.Item>
+	</Example>);

package/components/Text/Text.d.ts

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

package/components/Text/Text.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./Text.module.css";
+const tagMap = {
+    "title-1": "h1",
+    "title-2": "h2",
+    "title-3": "h3",
+    "title-4": "h4",
+    "title-5": "h5",
+    "title-6": "h6",
+};
+const Text = (props) => {
+    const { variant, color, weight, align, decoration, maxLines, children, className, attributes } = props;
+    const largestVariant = typeof variant === "string" ? variant : (variant === null || variant === void 0 ? void 0 : variant.xl) || (variant === null || variant === void 0 ? void 0 : variant.l) || (variant === null || variant === void 0 ? void 0 : variant.m) || (variant === null || variant === void 0 ? void 0 : variant.s);
+    /**
+     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+     * It still resolves the attributes correctly based on the tag
+     */
+    const TagName = props.as || (largestVariant && tagMap[largestVariant]) || "div";
+    const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--align", align), weight && s[`--weight-${weight}`], decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], className);
+    const style = Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), { "--rs-text-lines": maxLines });
+    return (React.createElement(TagName, Object.assign({}, attributes, { className: rootClassName, style: style }), children));
+};
+export default Text;

package/components/Text/Text.module.css

@@ -0,0 +1 @@
+.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);display:-webkit-box;overflow:hidden}.--align-start{text-align:start}.--align-center{text-align:center}.--align-end{text-align:end}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}@media (min-width:660px){.--align-start--m{text-align:start}.--align-center--m{text-align:center}.--align-end--m{text-align:end}.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}@media (min-width:900px){.--align-start--l{text-align:start}.--align-center--l{text-align:center}.--align-end--l{text-align:end}.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}@media (min-width:1280px){.--align-start--xl{text-align:start}.--align-center--xl{text-align:center}.--align-end--xl{text-align:end}.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}

package/components/Text/Text.types.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type * as G from "../../types/global";
+export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
+export type Props<TagName extends keyof JSX.IntrinsicElements | void = void> = {
+    variant?: G.Responsive<Variant>;
+    weight?: "regular" | "medium" | "bold";
+    color?: "neutral" | "neutral-faded" | "critical" | "positive" | "primary" | "disabled";
+    align?: G.Responsive<"start" | "center" | "end">;
+    decoration?: "line-through";
+    maxLines?: number;
+    as?: TagName;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<TagName>;
+};

package/components/Text/Text.types.js

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

package/components/Text/index.d.ts

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

package/components/Text/index.js

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const variant: () => React.JSX.Element;
+export declare const weight: () => React.JSX.Element;
+export declare const color: () => React.JSX.Element;
+export declare const decoration: () => React.JSX.Element;
+export declare const maxLines: () => React.JSX.Element;
+export declare const align: () => React.JSX.Element;

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;