reshaped 3.6.0-canary.7 → 3.6.0

package/dist/components/Tabs/TabsPanel.js

@@ -1,14 +1,35 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { classNames } from "../../utilities/props.js";
+import { getFocusableElements } from "../../utilities/a11y/index.js";
 import { useTabs } from "./TabsContext.js";
 import s from "./Tabs.module.css";
 const TabsPanel = (props) => {
     const { value: panelValue, children, className, attributes } = props;
     const { value, panelId, buttonId } = useTabs(panelValue);
+    const [needsTabIndex, setNeedsTabIndex] = React.useState(true);
+    const rootRef = React.useRef(null);
     const active = panelValue === value;
     const panelClassNames = classNames(s.panel, !active && s["--panel-hidden"], className);
-    return (_jsx("div", { ...attributes, className: panelClassNames, tabIndex: 0, role: "tabpanel", id: panelId, "aria-labelledby": buttonId, children: active && children }));
+    React.useEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const updateTabIndex = () => {
+            setNeedsTabIndex(!getFocusableElements(el).length);
+        };
+        updateTabIndex();
+        const observer = new MutationObserver(updateTabIndex);
+        observer.observe(el, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["tabindex", "disabled", "href"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return (_jsx("div", { ...attributes, ref: rootRef, className: panelClassNames, tabIndex: needsTabIndex ? 0 : undefined, role: "tabpanel", id: panelId, "aria-labelledby": buttonId, children: active && children }));
 };
 TabsPanel.displayName = "Tabs.Panel";
 export default TabsPanel;

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

@@ -5,6 +5,7 @@ import View from "../../View/index.js";
 import Text from "../../Text/index.js";
 import ScrollArea from "../../ScrollArea/index.js";
 import IconZap from "../../../icons/Zap.js";
+import Button from "../../Button/index.js";
 export default {
     title: "Components/Tabs",
     component: Tabs,
@@ -127,7 +128,7 @@ export const direction = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const composition = () => (<Example>
-		<Example.Item title="switching panels">
+		<Example.Item title="panels without focusable content">
 			<Tabs>
 				<View gap={4}>
 					<Tabs.List>
@@ -142,6 +143,28 @@ export const composition = () => (<Example>
 				</View>
 			</Tabs>
 		</Example.Item>
+
+		<Example.Item title="panels with focusable content">
+			<Tabs>
+				<View gap={4}>
+					<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">
+						<Button onClick={() => { }}>Tab 1 action</Button>
+					</Tabs.Panel>
+					<Tabs.Panel value="1">
+						<Button onClick={() => { }}>Tab 2 action</Button>
+					</Tabs.Panel>
+					<Tabs.Panel value="2">
+						<Button onClick={() => { }}>Tab 3 action</Button>
+					</Tabs.Panel>
+				</View>
+			</Tabs>
+		</Example.Item>
 	</Example>);
 export const icon = () => (<Example>
 		<Example.Item title="icon">

package/dist/components/TextField/TextField.module.css

@@ -1 +1 @@
-.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-text-field-radius);column-gap:var(--rs-text-field-gap);display:flex;padding:0 calc(var(--rs-text-field-gap) - 1px);position:relative;z-index:0}.root.--focused,.root:has(label:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:999px}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.inner{column-gap:var(--rs-text-field-gap);display:inline-flex;flex-grow:1}.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:0 calc(var(--rs-text-field-gap) * -1);outline:none;padding-block:calc(var(--rs-text-field-p-v) - 1px);padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.input{font-size:var(--rs-text-field-font-size);letter-spacing:var(--rs-text-field-letter-spacing);line-height:var(--rs-text-field-line-height)}.affix,.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px);position:relative;z-index:5}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-text-field-gap) * -1);padding-inline-end:var(--rs-text-field-action-inset)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-small{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded.--focused,.root.--variant-faded:has(label:active),.root.--variant-faded:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):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.--focused,.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.--focused,.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1)}}
+.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-text-field-radius);column-gap:var(--rs-text-field-gap);display:flex;padding:0 calc(var(--rs-text-field-gap) - 1px);position:relative;z-index:0}.root.--focused,.root:has(label:active),.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:999px}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.inner{column-gap:var(--rs-text-field-gap);display:inline-flex;flex-grow:1}.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:0 calc(var(--rs-text-field-gap) * -1);outline:none;padding-block:calc(var(--rs-text-field-p-v) - 1px);padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.input{font-size:var(--rs-text-field-font-size);letter-spacing:var(--rs-text-field-letter-spacing);line-height:var(--rs-text-field-line-height)}.affix,.icon{cursor:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;max-width:100%;min-height:var(--rs-text-field-attachment-height);position:relative;z-index:5}.input+.affix--position-end,.input+.icon--position-end,.input+.slot--position-end{margin-inline-start:auto}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-text-field-gap) * -1);padding-inline-end:var(--rs-text-field-action-inset)}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-small{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) - 2px)}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded.--focused,.root.--variant-faded:has(label:active),.root.--variant-faded:not(:has(button:focus,a:focus,[tabindex="0"]:focus,[role=button]:focus)):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.--focused,.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.--focused,.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) - 2px)}.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}}@media (--rs-viewport-l ){.--size-small--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) - 2px)}.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x1);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x2) - 2px)}.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-radius:var(--rs-radius-small);--rs-text-field-p-v:var(--rs-unit-x2);--rs-text-field-font-size:var(--rs-font-size-body-3);--rs-text-field-line-height:var(--rs-line-height-body-3);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-3);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x3);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x2);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-radius:var(--rs-radius-medium);--rs-text-field-p-v:var(--rs-unit-x4);--rs-text-field-font-size:var(--rs-font-size-body-2);--rs-text-field-line-height:var(--rs-line-height-body-2);--rs-text-field-letter-spacing:var(--rs-letter-spacing-body-2);--rs-text-field-action-inset:var(--rs-unit-x1);--rs-text-field-attachment-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x4) - 2px)}}

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./ToggleButton.types";
+declare const ToggleButton: React.FC<T.Props>;
+export default ToggleButton;

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ToggleButtonControlled from "./ToggleButtonControlled.js";
+import ToggleButtonUncontrolled from "./ToggleButtonUncontrolled.js";
+const ToggleButton = (props) => {
+    const { checked } = props;
+    if (checked !== undefined)
+        return _jsx(ToggleButtonControlled, { ...props });
+    return _jsx(ToggleButtonUncontrolled, { ...props });
+};
+ToggleButton.displayName = "ToggleButton";
+export default ToggleButton;

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

@@ -0,0 +1,20 @@
+import type { ButtonProps } from "../Button";
+type BaseProps = Omit<ButtonProps, "variant" | "higlighted"> & {
+    variant?: Extract<ButtonProps["variant"], "outline" | "ghost">;
+    value?: string;
+    onChange?: (args: {
+        checked: boolean;
+        value: string;
+        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+    }) => void;
+};
+export type ControlledProps = BaseProps & {
+    defaultChecked?: never;
+    checked: boolean;
+};
+export type UncontrolledProps = BaseProps & {
+    defaultChecked?: boolean;
+    checked?: never;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/dist/components/ToggleButton/ToggleButton.types.js

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

package/dist/components/ToggleButton/ToggleButtonControlled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./ToggleButton.types";
+declare const ToggleButtonControlled: React.FC<T.ControlledProps>;
+export default ToggleButtonControlled;

package/dist/components/ToggleButton/ToggleButtonControlled.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from "../Button/index.js";
+import { useToggleButtonGroup } from "../ToggleButtonGroup/index.js";
+const ToggleButtonControlled = (props) => {
+    const { variant = "outline", value, onChange, onClick, ...buttonProps } = props;
+    const toggleButtonGroup = useToggleButtonGroup();
+    const checked = (value ? toggleButtonGroup?.value?.includes(value) : undefined) ?? props.checked;
+    const handleClick = (event) => {
+        const changeArgs = { checked: !checked, value: value ?? "", event };
+        onClick?.(event);
+        if (toggleButtonGroup) {
+            toggleButtonGroup?.onChange?.(changeArgs);
+        }
+        else {
+            onChange?.(changeArgs);
+        }
+    };
+    return (_jsx(Button, { ...buttonProps, variant: variant, onClick: handleClick, highlighted: checked, attributes: { ...buttonProps.attributes, "aria-pressed": checked } }));
+};
+ToggleButtonControlled.displayName = "ToggleButtonControlled";
+export default ToggleButtonControlled;

package/dist/components/ToggleButton/ToggleButtonUncontrolled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./ToggleButton.types";
+declare const ToggleButtonUncontrolled: React.FC<T.UncontrolledProps>;
+export default ToggleButtonUncontrolled;

package/dist/components/ToggleButton/ToggleButtonUncontrolled.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import useToggle from "../../hooks/useToggle.js";
+import ToggleButtonControlled from "./ToggleButtonControlled.js";
+const ToggleButtonUncontrolled = (props) => {
+    const { defaultChecked, onChange, ...buttonProps } = props;
+    const buttonToggle = useToggle(defaultChecked);
+    const handleChange = (args) => {
+        onChange?.(args);
+        buttonToggle.toggle(args.checked);
+    };
+    return (_jsx(ToggleButtonControlled, { ...buttonProps, onChange: handleChange, checked: buttonToggle.active }));
+};
+ToggleButtonUncontrolled.displayName = "ToggleButtonUncontrolled";
+export default ToggleButtonUncontrolled;

package/dist/components/ToggleButton/index.d.ts

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

package/dist/components/ToggleButton/index.js

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

package/dist/components/ToggleButton/tests/ToggleButton.stories.d.ts

@@ -0,0 +1,23 @@
+import { type StoryObj } from "@storybook/react-vite";
+import { type Mock } from "storybook/test";
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("..").ToggleButtonProps>;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const onChange: StoryObj<{
+    handleUncontrolledChange: Mock;
+    handleControlledChange: Mock;
+}>;
+export declare const onClick: StoryObj<{
+    handleClick: Mock;
+}>;

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

@@ -0,0 +1,87 @@
+import { expect, fn, userEvent } from "storybook/test";
+import { Example } from "../../../utilities/storybook/index.js";
+import ToggleButton from "../ToggleButton.js";
+export default {
+    title: "Components/ToggleButton",
+    component: ToggleButton,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/toggle-button",
+        },
+    },
+};
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="outline">
+				<ToggleButton>Button</ToggleButton>
+			</Example.Item>
+			<Example.Item title="ghost">
+				<ToggleButton variant="ghost">Button</ToggleButton>
+			</Example.Item>
+		</Example>),
+};
+export const onChange = {
+    name: "checked, defaultChecked, onChange",
+    args: {
+        handleUncontrolledChange: fn(),
+        handleControlledChange: fn(),
+    },
+    render: (args) => (<Example>
+				<Example.Item title="defaultChecked, onChange">
+					<ToggleButton defaultChecked onChange={args.handleUncontrolledChange} value="1">
+						Button
+					</ToggleButton>
+				</Example.Item>
+				<Example.Item title="checked, onChange">
+					<ToggleButton checked onChange={args.handleControlledChange} value="2">
+						Button
+					</ToggleButton>
+				</Example.Item>
+			</Example>),
+    play: async ({ canvas, args }) => {
+        const [uncontrolledButton, controlledButton] = canvas.getAllByRole("button");
+        await userEvent.click(uncontrolledButton);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+            checked: false,
+            value: "1",
+            event: expect.objectContaining({ target: uncontrolledButton }),
+        });
+        await userEvent.click(uncontrolledButton);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+            checked: true,
+            value: "1",
+            event: expect.objectContaining({ target: uncontrolledButton }),
+        });
+        await userEvent.click(controlledButton);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
+            checked: false,
+            value: "2",
+            event: expect.objectContaining({ target: controlledButton }),
+        });
+        await userEvent.click(controlledButton);
+        // Stayed checked after the first click
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
+            checked: false,
+            value: "2",
+            event: expect.objectContaining({ target: uncontrolledButton }),
+        });
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <ToggleButton onClick={args.handleClick}>Button</ToggleButton>,
+    play: async ({ canvas, args }) => {
+        const [button] = canvas.getAllByRole("button");
+        await userEvent.click(button);
+        expect(args.handleClick).toHaveBeenCalledOnce();
+        expect(args.handleClick).toHaveBeenLastCalledWith(expect.objectContaining({ target: button }));
+    },
+};

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type * as T from "./ToggleButtonGroup.types";
+declare const ToggleButtonGroupContext: React.Context<T.Context | null>;
+export declare const useToggleButtonGroup: () => T.Context | null;
+export default ToggleButtonGroupContext;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.context.js

@@ -0,0 +1,5 @@
+"use client";
+import React from "react";
+const ToggleButtonGroupContext = React.createContext(null);
+export const useToggleButtonGroup = () => React.useContext(ToggleButtonGroupContext);
+export default ToggleButtonGroupContext;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./ToggleButtonGroup.types";
+declare const ToggleButtonGroup: React.FC<T.Props>;
+export default ToggleButtonGroup;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ToggleButtonGroupControlled from "./ToggleButtonGroupControlled.js";
+import ToggleButtonGroupUncontrolled from "./ToggleButtonGroupUncontrolled.js";
+const ToggleButtonGroup = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(ToggleButtonGroupControlled, { ...props });
+    return _jsx(ToggleButtonGroupUncontrolled, { ...props });
+};
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+export default ToggleButtonGroup;

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

@@ -0,0 +1,24 @@
+import type React from "react";
+import type { ButtonGroupProps } from "../Button";
+import type { ToggleButtonProps } from "../ToggleButton";
+type BaseProps = {
+    selectionMode?: "single" | "multiple";
+    onChange?: (args: {
+        value: string[];
+        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+    }) => void;
+} & ButtonGroupProps;
+export type ControlledProps = BaseProps & {
+    value: string[];
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string[];
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type Context = {
+    onChange: ToggleButtonProps["onChange"];
+    value?: string[];
+};
+export {};

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.types.js

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

package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./ToggleButtonGroup.types";
+declare const ToggleButtonGroupControlled: React.FC<T.ControlledProps>;
+export default ToggleButtonGroupControlled;

package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import Button from "../Button/index.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import Context from "./ToggleButtonGroup.context.js";
+import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, } from "../../utilities/a11y/index.js";
+import ToggleButton from "../ToggleButton/index.js";
+const ToggleButtonGroupItem = (props) => {
+    const { focusable, onFocus, ...buttonProps } = props;
+    return (_jsx(ToggleButton, { ...buttonProps, attributes: {
+            ...buttonProps.attributes,
+            tabIndex: focusable ? 0 : -1,
+            onFocus,
+        } }));
+};
+const ToggleButtonGroupControlled = (props) => {
+    const { onChange, value, selectionMode = "single", children, ...buttonGroupProps } = props;
+    const focusableIndexRef = React.useRef(0);
+    let toggleButtonIndex = 0;
+    const renderedChildren = React.Children.map(children, (child) => {
+        if (!React.isValidElement(child) || child.type !== ToggleButton || !child.props) {
+            return child;
+        }
+        const boundIndex = toggleButtonIndex;
+        toggleButtonIndex += 1;
+        const focusable = focusableIndexRef.current === boundIndex;
+        return (_jsx(ToggleButtonGroupItem, { ...child.props, focusable: focusable, onFocus: () => {
+                focusableIndexRef.current = boundIndex;
+            } }));
+    });
+    const handleChange = (args) => {
+        const { event, value: itemValue, checked } = args;
+        if (!itemValue)
+            return;
+        let nextValue = selectionMode === "single" ? [itemValue] : [...value];
+        if (selectionMode === "multiple") {
+            if (checked) {
+                nextValue.push(itemValue);
+            }
+            else {
+                nextValue = nextValue.filter((v) => v !== itemValue);
+            }
+        }
+        if (onChange)
+            onChange({ value: nextValue, event });
+    };
+    const { ref: hotkeysRef } = useHotkeys({
+        "ArrowLeft, ArrowUp": () => {
+            focusPreviousElement(hotkeysRef.current);
+        },
+        "ArrowRight, ArrowDown": () => {
+            focusNextElement(hotkeysRef.current);
+        },
+        Home: () => {
+            focusFirstElement(hotkeysRef.current);
+        },
+        End: () => {
+            focusLastElement(hotkeysRef.current);
+        },
+    }, [], {
+        preventDefault: true,
+    });
+    return (_jsx(Context.Provider, { value: { onChange: handleChange, value }, children: _jsx(Button.Group, { ...buttonGroupProps, attributes: { ref: hotkeysRef, ...buttonGroupProps?.attributes }, children: renderedChildren }) }));
+};
+ToggleButtonGroupControlled.displayName = "ToggleButtonGroupControlled";
+export default ToggleButtonGroupControlled;

package/dist/components/ToggleButtonGroup/ToggleButtonGroupUncontrolled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./ToggleButtonGroup.types";
+declare const ToggleButtonGroupUncontrolled: React.FC<T.UncontrolledProps>;
+export default ToggleButtonGroupUncontrolled;

package/dist/components/ToggleButtonGroup/ToggleButtonGroupUncontrolled.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import ToggleButtonGroupControlled from "./ToggleButtonGroupControlled.js";
+const ToggleButtonGroupUncontrolled = (props) => {
+    const { defaultValue, onChange } = props;
+    const [value, setValue] = React.useState(defaultValue || []);
+    const handleChange = (args) => {
+        if (!args.value)
+            return;
+        setValue(args.value);
+        if (onChange)
+            onChange(args);
+    };
+    return (_jsx(ToggleButtonGroupControlled, { ...props, value: value, defaultValue: undefined, onChange: handleChange }));
+};
+ToggleButtonGroupUncontrolled.displayName = "ToggleButtonGroupUncontrolled";
+export default ToggleButtonGroupUncontrolled;

package/dist/components/ToggleButtonGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./ToggleButtonGroup";
+export type { Props as ToggleButtonGroupProps } from "./ToggleButtonGroup.types";
+export { useToggleButtonGroup } from "./ToggleButtonGroup.context";

package/dist/components/ToggleButtonGroup/index.js

@@ -0,0 +1,2 @@
+export { default } from "./ToggleButtonGroup.js";
+export { useToggleButtonGroup } from "./ToggleButtonGroup.context.js";

package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts

@@ -0,0 +1,22 @@
+import { StoryObj } from "@storybook/react-vite";
+import { Mock } from "storybook/test";
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./..").ToggleButtonGroupProps>;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const single: StoryObj<{
+    handleUncontrolledChange: Mock;
+    handleControlledChange: Mock;
+    handleItemChange: Mock;
+}>;
+export declare const multiple: StoryObj<{
+    handleUncontrolledChange: Mock;
+    handleControlledChange: Mock;
+}>;
+export declare const className: StoryObj;