reshaped 2.11.12 → 3.0.1

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { responsivePropDependency } from "../../utilities/helpers.js";
+import Expandable from "../_private/Expandable/index.js";
+import View from "../View/index.js";
+import Text from "../Text/index.js";
+import Divider from "../Divider/index.js";
+import Icon from "../Icon/index.js";
+import Hidden from "../Hidden/index.js";
+import IconCheckmark from "../../icons/Checkmark.js";
+import s from "./Stepper.module.css";
+const StepperItemPrivate = (props) => {
+    const { title, subtitle, children, direction, className, attributes, labelDisplay, step, completed, active, last, } = props;
+    const labelHidden = labelDisplay && responsivePropDependency(labelDisplay, (value) => value === "hidden");
+    const labelNode = (_jsx(View, { gap: 3, grow: true, children: _jsxs(View.Item, { children: [_jsx(Text, { variant: "body-3", weight: "medium", children: title }), _jsx(Text, { variant: "caption-1", color: "neutral-faded", children: subtitle })] }) }));
+    return (_jsxs(View, { children: [_jsxs(View, { attributes: attributes, className: className, direction: "row", gap: 2, align: "center", position: "static", children: [_jsxs(View.Item, { children: [_jsx(View, { align: "center", justify: "center", backgroundColor: active || completed ? "primary" : "neutral-faded", borderColor: active || completed ? undefined : "neutral-faded", borderRadius: "circular", as: "span", width: 8, height: 8, zIndex: 5, children: _jsx(Text, { variant: "body-3", weight: active ? "bold" : "medium", children: completed ? _jsx(Icon, { svg: IconCheckmark, size: 4 }) : step }) }), direction === "column" && !last && _jsx(Divider, { vertical: true, className: s.verticalDivider })] }), labelDisplay ? _jsx(Hidden, { hide: labelHidden, children: labelNode }) : labelNode] }), direction === "column" && children && (_jsx(Expandable, { active: active, children: _jsx(View, { paddingStart: 10, paddingTop: 2, children: children }) }))] }));
+};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const StepperItem = (_) => null;
+const Stepper = (props) => {
+    const { children, direction = "row", activeId, labelDisplay, className, attributes } = props;
+    const vertical = direction === "column";
+    const length = React.Children.count(children);
+    return (_jsx(View, { attributes: attributes, direction: direction, align: vertical ? "stretch" : "center", className: className, gap: 3, wrap: false, children: React.Children.map(children, (child, index) => {
+            const itemId = child.props.id || `${index}`;
+            return (_jsxs(React.Fragment, { children: [_jsx(StepperItemPrivate, { ...child.props, id: child.props.id || `${index}`, active: activeId?.toString() === itemId, step: index + 1, last: index === length - 1, direction: direction, labelDisplay: labelDisplay }), !vertical && index < length - 1 && (_jsx(View, { grow: true, children: _jsx(Divider, {}) }))] }, index));
+        }) }));
+};
+Stepper.Item = StepperItem;
+export default Stepper;

package/dist/components/Stepper/Stepper.types.d.ts

@@ -0,0 +1,26 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    activeId?: string | number;
+    labelDisplay?: G.Responsive<"inline" | "hidden">;
+    children?: React.ReactNode;
+    direction?: "row" | "column";
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type ItemProps = {
+    id?: string;
+    completed?: boolean;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type ItemPrivateProps = ItemProps & {
+    labelDisplay: Props["labelDisplay"];
+    step: number;
+    active: boolean;
+    direction: Props["direction"];
+    last: boolean;
+};

package/dist/components/Stepper/tests/Stepper.stories.js

@@ -0,0 +1,86 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Stepper from "../index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+export default {
+    title: "Components/Stepper",
+    component: Stepper,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/stepper",
+        },
+    },
+};
+const Demo = (props) => {
+    const [activeId, setActiveId] = React.useState(props.activeId ?? 1);
+    const content = (<View gap={3}>
+			<Placeholder />
+			<View direction="row" gap={3}>
+				<Button onClick={() => setActiveId((prev) => Math.max(0, prev - 1))}>Previous</Button>
+				<Button onClick={() => setActiveId((prev) => Math.min(2, prev + 1))}>Next</Button>
+			</View>
+		</View>);
+    return (<Stepper activeId={activeId} direction="column">
+			<Stepper.Item completed={activeId > 0} title="Step 1" subtitle={props.subtitle || "Step subtitle"}>
+				{content}
+			</Stepper.Item>
+			<Stepper.Item completed={activeId > 1} title="Step 2">
+				{content}
+			</Stepper.Item>
+			<Stepper.Item completed={activeId > 2} title="Step 3 very long title">
+				{content}
+			</Stepper.Item>
+		</Stepper>);
+};
+export const direction = () => (<Example>
+		<Example.Item title="direction: row">
+			<Stepper activeId="1">
+				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+				<Stepper.Item title="Step 2"/>
+				<Stepper.Item title="Step 3 very long title"/>
+			</Stepper>
+		</Example.Item>
+		<Example.Item title="direction: column">
+			<Stepper activeId="1" direction="column">
+				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+				<Stepper.Item title="Step 2"/>
+				<Stepper.Item title="Step 3 very long title"/>
+			</Stepper>
+		</Example.Item>
+	</Example>);
+export const labelDisplay = () => (<Example>
+		<Example.Item title="direction: row, labels hidden">
+			<Stepper activeId="1" labelDisplay="hidden">
+				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+				<Stepper.Item title="Step 2"/>
+				<Stepper.Item title="Step 3 very long title"/>
+			</Stepper>
+		</Example.Item>
+		<Example.Item title="direction: column, labels hiden">
+			<Stepper activeId="1" direction="column" labelDisplay="hidden">
+				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+				<Stepper.Item title="Step 2"/>
+				<Stepper.Item title="Step 3 very long title"/>
+			</Stepper>
+		</Example.Item>
+		<Example.Item title="direction: row, labels hidden on s">
+			<Stepper activeId="1" labelDisplay={{ s: "hidden", m: "inline" }}>
+				<Stepper.Item completed title="Step 1" subtitle="Step subtitle"/>
+				<Stepper.Item title="Step 2"/>
+				<Stepper.Item title="Step 3 very long title"/>
+			</Stepper>
+		</Example.Item>
+	</Example>);
+export const edgeCases = () => (<Example>
+		<Example.Item title="collapsible">
+			<Demo />
+		</Example.Item>
+		<Example.Item title={[
+        "multiline subtitle",
+        "should wrap the text correctly",
+        "should display the connector correctly",
+    ]}>
+			<Demo activeId={0} subtitle="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy"/>
+		</Example.Item>
+	</Example>);

package/dist/components/Switch/Switch.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import { useFormControl } from "../FormControl/index.js";
+import Text from "../Text/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import s from "./Switch.module.css";
+const Switch = (props) => {
+    const { children, name, checked, size, reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, size && s[`root--size-${size}`], reversed && s["root--reversed"], className);
+    const formControl = useFormControl();
+    const id = useElementId(formControl?.attributes.id || props.id || props.inputAttributes?.id);
+    const inputAttributes = { ...props.inputAttributes, ...formControl?.attributes };
+    const disabled = formControl?.disabled || props.disabled;
+    const handleChange = (event) => {
+        if (!onChange)
+            return;
+        onChange({
+            name,
+            event,
+            checked: event.target.checked,
+        });
+    };
+    return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, id: id }), _jsx("span", { className: s.area, "aria-hidden": "true", children: _jsx("span", { className: s.thumb }) }), children && (_jsx(Text, { variant: size === "small" ? "caption-1" : "body-3", weight: "medium", children: children }))] }));
+};
+export default Switch;

package/dist/components/Switch/Switch.module.css

@@ -0,0 +1 @@
+.root{align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.area,.thumb{border-radius:999px}.thumb{background:var(--rs-color-white);box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--size-large .area{height:calc(var(--rs-unit-x1) * 6);width:calc(var(--rs-unit-x1) * 10)}.root--size-large .thumb{height:var(--rs-unit-x5);width:var(--rs-unit-x5)}.root--size-large .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x4))}[dir=rtl] .root--size-large .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x4) * -1))}.root--reversed{flex-direction:row-reverse}

package/dist/components/Switch/Switch.types.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type * as G from "../../types/global";
+type BaseProps = {
+    children?: React.ReactNode;
+    id?: string;
+    name: string;
+    disabled?: boolean;
+    reversed?: boolean;
+    size?: "medium" | "small" | "large";
+    onChange?: G.ChangeHandler<boolean>;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"label">;
+    inputAttributes?: G.Attributes<"input">;
+};
+export type ControlledProps = BaseProps & {
+    defaultChecked?: never;
+    checked: boolean;
+};
+export type UncontrolledProps = BaseProps & {
+    defaultChecked?: boolean;
+    checked?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/dist/components/Switch/tests/Switch.stories.js

@@ -0,0 +1,63 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Switch from "../index.js";
+export default {
+    title: "Components/Switch",
+    component: Switch,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/switch",
+        },
+    },
+};
+export const selection = () => (<Example>
+		<Example.Item title="unselected">
+			<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="selected, uncontrolled">
+			<Switch name="active" defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="selected, controlled">
+			<Switch name="active" checked inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="size: medium">
+			<Switch name="active" size="medium" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="size: small">
+			<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="size: large">
+			<Switch name="active" size="large" inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+	</Example>);
+export const label = () => (<Example>
+		<Example.Item title="size: medium">
+			<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}>
+				Wi-fi
+			</Switch>
+		</Example.Item>
+		<Example.Item title="size: small">
+			<Switch name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
+				Wi-fi
+			</Switch>
+		</Example.Item>
+		<Example.Item title="size: medium, reversed">
+			<Switch reversed name="active" inputAttributes={{ "aria-label": "test switch" }}>
+				Wi-fi
+			</Switch>
+		</Example.Item>
+		<Example.Item title="size: small">
+			<Switch reversed name="active" size="small" inputAttributes={{ "aria-label": "test switch" }}>
+				Wi-fi
+			</Switch>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled, unselected">
+			<Switch name="active" disabled inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+		<Example.Item title="disabled, selected">
+			<Switch name="active" disabled defaultChecked inputAttributes={{ "aria-label": "test switch" }}/>
+		</Example.Item>
+	</Example>);

package/dist/components/Table/Table.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveVariables } from "../../utilities/helpers.js";
+import getWidthStyles from "../../styles/width/index.js";
+import getMinWidthStyles from "../../styles/minWidth/index.js";
+import s from "./Table.module.css";
+const TableCellPrivate = (props) => {
+    const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, attributes, } = props;
+    const width = props.width === "auto" ? "0px" : props.width;
+    const widthStyles = getWidthStyles(width);
+    const minWidthStyles = getMinWidthStyles(minWidth || width);
+    const headingClassNames = classNames(s.cell, widthStyles?.classNames, minWidthStyles?.classNames, (width === 0 || width === "0px") && s["cell--width-auto"], align && s[`cell--align-${align}`], verticalAlign && s[`cell--valign-${verticalAlign}`]);
+    const headingStyle = {
+        ...widthStyles?.variables,
+        ...minWidthStyles?.variables,
+        ...responsiveVariables("--rs-table-p-vertical", paddingBlock ?? padding),
+        ...responsiveVariables("--rs-table-p-horizontal", paddingInline ?? padding),
+    };
+    return (_jsx(TagName, { ...attributes, className: headingClassNames, rowSpan: rowSpan, colSpan: colSpan, style: headingStyle, children: children }));
+};
+const TableCell = (props) => {
+    return _jsx(TableCellPrivate, { ...props, tagName: "td" });
+};
+const TableHeading = (props) => {
+    return _jsx(TableCellPrivate, { ...props, tagName: "th" });
+};
+const TableRow = (props) => {
+    const { highlighted, children, attributes } = props;
+    const rowClassNames = classNames(s.row, highlighted && s["--row-highlighted"]);
+    return (_jsx("tr", { ...attributes, className: rowClassNames, children: children }));
+};
+const TableBody = (props) => {
+    return _jsx("tbody", { children: props.children });
+};
+const TableHead = (props) => {
+    return _jsx("thead", { children: props.children });
+};
+const Table = (props) => {
+    const { children, border, columnBorder, className, attributes } = props;
+    const rootClassNames = classNames(s.root, className, border && s["--border-outer"], columnBorder && s["--border-column"]);
+    const [firstChild] = React.Children.toArray(children);
+    return (_jsx("div", { ...attributes, className: rootClassNames, children: _jsx("table", { className: s.table, children: React.isValidElement(firstChild) &&
+                (firstChild.type === TableBody || firstChild.type === TableHead) ? (children) : (_jsx(TableBody, { children: children })) }) }));
+};
+Table.Cell = TableCell;
+Table.Heading = TableHeading;
+Table.Row = TableRow;
+Table.Body = TableBody;
+Table.Head = TableHead;
+export default Table;

package/dist/components/Table/Table.module.css

@@ -0,0 +1 @@
+.root{margin:0 calc(var(--rs-unit-x4) * -1);mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);overflow:auto;padding:0 var(--rs-unit-x4)}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.cell--width-auto{white-space:nowrap}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TabsControlled from "./TabsControlled.js";
+import TabsUncontrolled from "./TabsUncontrolled.js";
+import TabsItem from "./TabsItem.js";
+import TabsList from "./TabsList.js";
+import TabsPanel from "./TabsPanel.js";
+const Tabs = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(TabsControlled, { ...props });
+    return _jsx(TabsUncontrolled, { ...props });
+};
+Tabs.Item = TabsItem;
+Tabs.List = TabsList;
+Tabs.Panel = TabsPanel;
+export default Tabs;

package/dist/components/Tabs/Tabs.module.css

@@ -0,0 +1 @@
+@property --rs-tabs-stop-l{syntax:"<percentage>";initial-value:.01%;inherits:false}@property --rs-tabs-stop-r{syntax:"<percentage>";initial-value:100%;inherits:false}.root{box-sizing:initial;max-width:100%}.list,.root{position:relative}.inner{mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent 100%);transition:var(--rs-duration-fast) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{--rs-tabs-gap:var(--rs-unit-x4);flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.buttonContent:hover{color:var(--rs-color-foreground-neutral-faded)}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-raised)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.next,.prev{align-items:center;display:flex;inset-block:0;position:absolute;z-index:var(--rs-z-index-raised)}[dir=rtl] .next,[dir=rtl] .prev{transform:scaleX(-1)}.next{inset-inline-end:var(--rs-unit-x1)}.prev{inset-inline-start:var(--rs-unit-x1)}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--direction-row{margin:0 calc(var(--rs-unit-x2) * -1);overflow:hidden;padding:0 var(--rs-unit-x2)}.--direction-row .inner{margin:0 calc(var(--rs-unit-x2) * -1) -40px;overflow:auto;padding:0 var(--rs-unit-x2) 40px;white-space:nowrap;-ms-overflow-style:none;overflow:-moz-scrollbars-none;scrollbar-width:none}.--direction-row .inner::-webkit-scrollbar{display:none}.--direction-row .inner:after{height:1px;inset-inline:var(--rs-unit-x2);bottom:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .listItem+.listItem{margin-inline-start:var(--rs-tabs-gap)}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{bottom:0;height:100%;inset-inline-end:0;top:0;width:1px}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .listItem{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .listItem+.listItem{margin-top:var(--rs-tabs-gap)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}.--variant-pills .listItem,.--variant-pills-elevated .listItem{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap;overflow:hidden}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-stop-r:85%}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-stop-l:15%}@media (--rs-viewport-s ){.next,.prev{display:none}}

package/dist/components/Tabs/Tabs.types.d.ts

@@ -0,0 +1,61 @@
+import type React from "react";
+import type { IconProps } from "../Icon";
+import type * as G from "../../types/global";
+export type SelectionState = {
+    left: number;
+    top: number;
+    scaleX: number;
+    scaleY: number;
+    status: "idle" | "prepared" | "animated";
+};
+export type ItemProps = {
+    value: string;
+    children?: React.ReactNode;
+    icon?: IconProps["svg"];
+    href?: string;
+    attributes?: G.Attributes<"div">;
+};
+export type ListProps = {
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type PanelProps = {
+    value: string;
+    children?: React.ReactNode;
+};
+export type BaseProps = {
+    children?: React.ReactNode;
+    direction?: "column" | "row";
+    itemWidth?: "equal";
+    variant?: "bordered" | "borderless" | "pills" | "pills-elevated";
+    size?: "medium" | "large";
+    name?: string;
+    onChange?: (args: {
+        value: string;
+        name?: string;
+    }) => void;
+};
+export type ControlledProps = BaseProps & {
+    value?: string;
+    defaultValue?: never;
+};
+export type PrivateControlledProps = ControlledProps & {
+    onSilentChange: BaseProps["onChange"];
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction"> & {
+    size: NonNullable<BaseProps["size"]>;
+    value?: string;
+    setDefaultValue: (value: string) => void;
+    id: string;
+    elActiveRef: React.MutableRefObject<HTMLDivElement | null>;
+    elPrevActiveRef: React.MutableRefObject<HTMLDivElement | null>;
+    elScrollableRef: React.MutableRefObject<HTMLDivElement | null>;
+    selection: SelectionState;
+    setSelection: React.Dispatch<React.SetStateAction<SelectionState>>;
+};

package/dist/components/Tabs/TabsContext.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type * as T from "./Tabs.types";
+export declare const TabsProvider: React.Provider<T.Context>;
+export declare const useTabs: (value?: string) => {
+    panelId: string | undefined;
+    buttonId: string | undefined;
+    name?: string;
+    onChange?: (args: {
+        value: string;
+        name?: string;
+    }) => void;
+    direction?: "column" | "row";
+    variant?: "bordered" | "borderless" | "pills" | "pills-elevated";
+    itemWidth?: "equal";
+    size: NonNullable<T.BaseProps["size"]>;
+    value?: string;
+    setDefaultValue: (value: string) => void;
+    elActiveRef: React.MutableRefObject<HTMLDivElement | null>;
+    elPrevActiveRef: React.MutableRefObject<HTMLDivElement | null>;
+    elScrollableRef: React.MutableRefObject<HTMLDivElement | null>;
+    selection: T.SelectionState;
+    setSelection: React.Dispatch<React.SetStateAction<T.SelectionState>>;
+};

package/dist/components/Tabs/TabsContext.js

@@ -0,0 +1,12 @@
+"use client";
+import React from "react";
+const Context = React.createContext({});
+export const TabsProvider = Context.Provider;
+export const useTabs = (value) => {
+    const { id, ...data } = React.useContext(Context);
+    return {
+        ...data,
+        panelId: value !== undefined ? `${id}-tabs-panel-${value}` : undefined,
+        buttonId: value !== undefined ? `${id}-tabs-button-${value}` : undefined,
+    };
+};

package/dist/components/Tabs/TabsItem.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import HiddenInput from "../_private/HiddenInput/index.js";
+import Actionable from "../Actionable/index.js";
+import Icon from "../Icon/index.js";
+import Text from "../Text/index.js";
+import { useTabs } from "./TabsContext.js";
+import s from "./Tabs.module.css";
+const TabsItem = (props, ref) => {
+    const { value, children, icon, href, attributes } = props;
+    const { onChange, panelId, name, size, value: tabsValue, selection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs(value);
+    const itemRef = React.useRef(null);
+    const active = tabsValue === value;
+    const visuallySelected = active && selection.status === "idle";
+    const itemClassNames = classNames(s.item, visuallySelected && s["--item-active"]);
+    const isFormControl = !!name;
+    const tabAttributes = {
+        role: "tab",
+        tabIndex: active ? 0 : -1,
+        "aria-selected": active,
+    };
+    const updateRefs = React.useCallback(() => {
+        if (!("current" in itemRef)) {
+            throw new Error("Reshaped, Tabs: TabItem is expecting an object ref format but received a function ref");
+        }
+        elPrevActiveRef.current = elActiveRef.current;
+        elActiveRef.current = itemRef.current;
+    }, [elActiveRef, elPrevActiveRef]);
+    const handleChange = () => {
+        if (href && !onChange)
+            return;
+        const listEl = elScrollableRef.current;
+        const currentListItem = itemRef.current?.parentElement;
+        const prevListItem = elActiveRef.current?.parentElement;
+        // Updating refs after saving the elements
+        updateRefs();
+        if (onChange)
+            onChange({ value, name });
+        if (!listEl || !currentListItem || !prevListItem || listEl.scrollWidth === listEl.clientWidth) {
+            return;
+        }
+        const navigatingBack = currentListItem.offsetLeft < prevListItem.offsetLeft;
+        const threshold = (currentListItem.offsetLeft - listEl.scrollLeft) / listEl.clientWidth;
+        // Only scroll if the item is close to getting clipped
+        // Back navigation threshold is 0.3 since its calculated based on offsetLeft
+        const shouldScroll = navigatingBack ? threshold < 0.3 : threshold > 0.5;
+        if (!shouldScroll)
+            return;
+        itemRef.current?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+    };
+    React.useEffect(() => {
+        if (!active)
+            return;
+        updateRefs();
+    }, [active, updateRefs]);
+    return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, insetFocus: true, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: {
+                ...(!isFormControl && tabAttributes),
+                "aria-controls": panelId,
+            }, children: [name && (_jsx(HiddenInput, { type: "radio", name: name, value: value, checked: visuallySelected, onChange: handleChange, className: s.radio })), _jsxs("span", { className: s.buttonContent, children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: 4 }), children && (_jsx(Text, { variant: size === "large" ? "body-2" : "body-3", weight: "medium", children: children }))] })] }) }));
+};
+export default React.forwardRef(TabsItem);