reshaped 3.7.0-canary.16 → 3.7.0-canary.18

package/dist/components/ActionBar/ActionBar.js

@@ -1,11 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
+import { classNames, responsiveVariables } from "../../utilities/props.js";
 import View from "../View/index.js";
 import s from "./ActionBar.module.css";
+const fullWidthPositions = ["top", "bottom"];
 const ActionBar = (props) => {
-    const { position = "bottom", padding, paddingBlock = 3, paddingInline = 4, children, elevated, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, elevated && s["--elevated"], position && s[`--position-${position}`], className);
-    return (_jsx(View, { className: rootClassNames, attributes: attributes, paddingBlock: padding || paddingBlock, paddingInline: padding || paddingInline, children: children }));
+    const { position = "bottom", positionType: passedPositionType, offset: passedOffset, padding, paddingBlock = 3, paddingInline = 4, children, blurred, elevated, active = true, className, attributes, } = props;
+    const positionType = passedPositionType ?? (fullWidthPositions.includes(position) ? "relative" : "absolute");
+    const offset = passedOffset ?? (positionType === "relative" ? undefined : 4);
+    const offsetVariables = offset && responsiveVariables("--rs-action-bar-offset", offset);
+    const rootClassNames = classNames(s.root, (elevated || !!offsetVariables) && s["--elevated"], position && s[`--position-${position}`], blurred && s["--blurred"], active && s["--active"], className);
+    return (_jsx(View, { className: rootClassNames, attributes: {
+            ...attributes,
+            style: { ...attributes?.style, ...offsetVariables },
+        }, position: positionType, paddingBlock: padding || paddingBlock, paddingInline: padding || paddingInline, children: children }));
 };
 ActionBar.displayName = "ActionBar";
 export default ActionBar;

package/dist/components/ActionBar/ActionBar.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-base);position:relative}.--position-bottom{border-top:1px solid var(--rs-color-border-neutral-faded)}.--position-top{border-bottom:1px solid var(--rs-color-border-neutral-faded)}.--elevated{background-color:var(--rs-color-background-elevation-raised);border:none;overflow-x:clip}.--elevated:after{bottom:0;box-shadow:var(--rs-shadow-raised);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;right:0}.--position-bottom.--elevated:after{transform:rotateX(180deg)}
+.root{--rs-action-bar-background-rgb:var(--rs-color-rgb-background-elevation-base);--rs-action-bar-background-opacity:1;--rs-action-bar-translate-x:0;--rs-action-bar-translate-y:0;--rs-action-bar-radius:0;background:rgba(var(--rs-action-bar-background-rgb),var(--rs-action-bar-background-opacity));border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-action-bar-radius);max-width:calc(100% - var(--rs-action-bar-offset) * 2);transform:translate(var(--rs-action-bar-translate-x),var(--rs-action-bar-translate-y));transition:transform var(--rs-duration-fast) var(--rs-easing-accelerate)}[style*="--rs-action-bar-offset-"]{--rs-action-bar-radius:var(--rs-radius-medium);margin:calc(var(--rs-action-bar-offset) * var(--rs-unit-x1));--rs-action-bar-offset-s:0;--rs-action-bar-offset-m:var(--rs-action-bar-offset-s);--rs-action-bar-offset-l:var(--rs-action-bar-offset-m);--rs-action-bar-offset-xl:var(--rs-action-bar-offset-l);--rs-action-bar-offset:var(--rs-action-bar-offset-s)}.--position-top,.--position-top-end,.--position-top-start{--rs-action-bar-translate-y:calc(-100% - var(--rs-action-bar-offset) * var(--rs-unit-x1) * 2);inset-block-start:0}.--position-bottom,.--position-bottom-end,.--position-bottom-start{--rs-action-bar-translate-y:calc(100% + var(--rs-action-bar-offset) * var(--rs-unit-x1) * 2);inset-block-end:0}.--position-bottom,.--position-top{--rs-action-bar-translate-x:-50%;inset-inline-start:50%}.--position-bottom-start,.--position-top-start{inset-inline-start:0}.--position-bottom-end,.--position-top-end{inset-inline-end:0}.--position-bottom:not([style*="--rs-action-bar-offset-"]),.--position-top:not([style*="--rs-action-bar-offset-"]){--rs-action-bar-border-radius:0px;border:0;overflow-x:clip;width:100%}.--position-bottom:not([style*="--rs-action-bar-offset-"]).--elevated,.--position-top:not([style*="--rs-action-bar-offset-"]).--elevated{border:0!important}.--position-top:not([style*="--rs-action-bar-offset-"]){border-bottom:1px solid var(--rs-color-border-neutral-faded)}.--position-bottom:not([style*="--rs-action-bar-offset-"]){border-top:1px solid var(--rs-color-border-neutral-faded)}.--active{--rs-action-bar-translate-y:0px;transition-timing-function:var(--rs-easing-decelerate)}.--blurred{--rs-action-bar-background-opacity:0.84;backdrop-filter:blur(10px)}.--elevated{--rs-action-bar-background-rgb:var(--rs-color-rgb-background-elevation-raised)}.--elevated:after{border-radius:var(--rs-action-bar-radius);bottom:0;box-shadow:var(--rs-shadow-raised);content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;right:0}.--position-bottom.--elevated:after{transform:rotateX(180deg)}@media (--rs-viewport-m ){[style*="--rs-action-bar-offset-"]{--rs-action-bar-offset:var(--rs-action-bar-offset-m)}}@media (--rs-viewport-l ){[style*="--rs-action-bar-offset-"]{--rs-action-bar-offset:var(--rs-action-bar-offset-l)}}@media (--rs-viewport-xl ){[style*="--rs-action-bar-offset-"]{--rs-action-bar-offset:var(--rs-action-bar-offset-xl)}}

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

@@ -2,7 +2,11 @@ import type React from "react";
 import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
 export type Props = Pick<ViewProps, "paddingBlock" | "paddingInline" | "padding"> & {
-    position?: "top" | "bottom";
+    active?: boolean;
+    offset?: G.Responsive<number>;
+    position?: "top" | "top-end" | "top-start" | "bottom" | "bottom-start" | "bottom-end";
+    positionType?: G.Responsive<"relative" | "absolute" | "fixed">;
+    blurred?: boolean;
     elevated?: boolean;
     children?: React.ReactNode;
     className?: G.ClassName;

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ActionBarProps>;
@@ -8,7 +9,15 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const position: {
+export declare const positionRelative: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const positionAbsolute: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const positionFixed: {
     name: string;
     render: () => import("react").JSX.Element;
 };
@@ -16,7 +25,20 @@ export declare const elevated: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const offset: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const active: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const blurred: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
 export declare const padding: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const className: StoryObj;

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

@@ -1,5 +1,9 @@
+import { expect } from "storybook/test";
 import { Placeholder, Example } from "../../../utilities/storybook/index.js";
 import ActionBar from "../index.js";
+import View from "../../View/index.js";
+import Button from "../../Button/index.js";
+import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Components/ActionBar",
     component: ActionBar,
@@ -9,8 +13,19 @@ export default {
         },
     },
 };
-export const position = {
-    name: "position",
+const Fixtures = {
+    Container: (props) => (<View backgroundColor="neutral-faded" height="160px" overflow="hidden" borderRadius="medium">
+			{props.children}
+		</View>),
+    Actions: () => (<View direction="row" gap={2}>
+			<Button onClick={() => { }}>Action</Button>
+			<Button onClick={() => { }} variant="outline">
+				Action
+			</Button>
+		</View>),
+};
+export const positionRelative = {
+    name: "position, positionType: relative",
     render: () => (<Example>
 			<Example.Item title="position: top">
 				<ActionBar position="top">
@@ -19,12 +34,94 @@ export const position = {
 			</Example.Item>
 
 			<Example.Item title="position: bottom">
-				<ActionBar>
+				<ActionBar position="bottom">
 					<Placeholder />
 				</ActionBar>
 			</Example.Item>
 		</Example>),
 };
+export const positionAbsolute = {
+    name: "position, positionType: absolute",
+    render: () => (<Example>
+			<Example.Item title="position: top-start">
+				<Fixtures.Container>
+					<ActionBar padding={2} position="top-start" positionType="absolute">
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+
+			<Example.Item title="position: top">
+				<Fixtures.Container>
+					<ActionBar padding={2} position="top" positionType="absolute">
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+
+			<Example.Item title="position: top-end">
+				<Fixtures.Container>
+					<ActionBar padding={2} position="top-end" positionType="absolute">
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+
+			<Example.Item title="position: bottom-start">
+				<Fixtures.Container>
+					<ActionBar padding={2} position="bottom-start" positionType="absolute">
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+
+			<Example.Item title="position: bottom">
+				<Fixtures.Container>
+					<ActionBar padding={2} position="bottom" positionType="absolute">
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+
+			<Example.Item title="position: bottom-end">
+				<Fixtures.Container>
+					<ActionBar padding={2} position="bottom-end" positionType="absolute">
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+		</Example>),
+};
+export const positionFixed = {
+    name: "position, positionType: fixed",
+    render: () => (<>
+			<ActionBar padding={2} position="top-start" positionType="fixed">
+				<Fixtures.Actions />
+			</ActionBar>
+
+			<ActionBar padding={2} position="top" positionType="fixed">
+				<Fixtures.Actions />
+			</ActionBar>
+
+			<ActionBar padding={2} position="top-end" positionType="fixed">
+				<Fixtures.Actions />
+			</ActionBar>
+
+			<ActionBar padding={2} position="bottom-start" positionType="fixed">
+				<Fixtures.Actions />
+			</ActionBar>
+
+			<ActionBar padding={2} position="bottom" positionType="fixed">
+				<Fixtures.Actions />
+			</ActionBar>
+
+			<ActionBar padding={2} position="bottom-end" positionType="fixed">
+				<Fixtures.Actions />
+			</ActionBar>
+
+			<div style={{ height: 2000 }}/>
+		</>),
+};
 export const elevated = {
     name: "elevated",
     render: () => (<Example>
@@ -39,6 +136,68 @@ export const elevated = {
 					<Placeholder />
 				</ActionBar>
 			</Example.Item>
+
+			<Example.Item title="auto elevated, position: bottom">
+				<Fixtures.Container>
+					<ActionBar position="bottom-end">
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+		</Example>),
+};
+export const offset = {
+    name: "offset",
+    render: () => (<Example>
+			<Example.Item title="offset 2, position: top">
+				<Fixtures.Container>
+					<ActionBar position="top" positionType="absolute" offset={2}>
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+
+			<Example.Item title="offset 2, position: bottom-end">
+				<Fixtures.Container>
+					<ActionBar position="bottom-end" offset={2}>
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+
+			<Example.Item title="offset s: 2, m: 4, position: bottom-end">
+				<Fixtures.Container>
+					<ActionBar position="bottom-end" offset={{ s: 2, m: 4 }}>
+						<Fixtures.Actions />
+					</ActionBar>
+				</Fixtures.Container>
+			</Example.Item>
+		</Example>),
+};
+export const active = {
+    name: "active",
+    render: () => {
+        const barToggle = useToggle();
+        return (<>
+				<Button onClick={() => barToggle.toggle()}>Toggle</Button>
+				<ActionBar active={barToggle.active} positionType="fixed" position="top-end">
+					<Fixtures.Actions />
+				</ActionBar>
+			</>);
+    },
+};
+export const blurred = {
+    name: "blurred",
+    render: () => (<Example>
+			<Example.Item title="blurred">
+				<View backgroundColor="neutral-faded" height="200px" align="end" justify="end" padding={8}>
+					<Button color="primary">Action</Button>
+
+					<ActionBar position="bottom-end" blurred>
+						<View width={20} height={20}/>
+					</ActionBar>
+				</View>
+			</Example.Item>
 		</Example>),
 };
 export const padding = {
@@ -63,3 +222,16 @@ export const padding = {
 			</Example.Item>
 		</Example>),
 };
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<ActionBar className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder />
+			</ActionBar>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Autocomplete/Autocomplete.js

@@ -3,16 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import TextField from "../TextField/index.js";
 import DropdownMenu from "../DropdownMenu/index.js";
-import { getActiveElement } from "../../utilities/a11y/index.js";
 import * as keys from "../../constants/keys.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import s from "./Autocomplete.module.css";
+import useElementId from "../../hooks/useElementId.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
     const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, ...textFieldProps } = props;
+    const [highlightedId, setHighlightedId] = React.useState();
     const onBackspaceRef = useHandlerRef(onBackspace);
-    const onEnterRef = useHandlerRef(onEnter);
+    const contentRef = React.useRef(null);
     const internalInputRef = React.useRef(null);
     const inputAttributesRef = textFieldProps.inputAttributes?.ref;
     const inputRef = inputAttributesRef && typeof inputAttributesRef !== "string" && "current" in inputAttributesRef
@@ -23,15 +25,18 @@ const Autocomplete = (props) => {
     const lockedRef = React.useRef(false);
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
+    const onChangeRef = useHandlerRef(onChange);
+    const onItemSelectRef = useHandlerRef(onItemSelect);
+    const onEnterRef = useHandlerRef(onEnter);
     const isDropdownActive = hasChildren && (active ?? internalActive);
-    const lockDropdown = () => {
+    const lockDropdown = React.useCallback(() => {
         // Prevent dropdown from re-opening when clicked on item with mouse
         // and focus moves to the item and back to the input
         lockedRef.current = true;
         setTimeout(() => {
             lockedRef.current = false;
         }, 100);
-    };
+    }, []);
     const handleOpen = React.useCallback(() => {
         if (lockedRef.current)
             return;
@@ -42,11 +47,11 @@ const Autocomplete = (props) => {
         setInternalActive(false);
         onCloseRef.current?.(args);
     };
-    const handleItemClick = (args) => {
-        onChange?.({ value: args.value, name });
-        onItemSelect?.(args);
+    const handleItemClick = React.useCallback((args) => {
+        onChangeRef.current?.({ value: args.value, name });
+        onItemSelectRef.current?.(args);
         lockDropdown();
-    };
+    }, [lockDropdown, onChangeRef, onItemSelectRef, name]);
     const handleChange = (args) => {
         onChange?.(args);
         handleOpen();
@@ -64,27 +69,56 @@ const Autocomplete = (props) => {
         lockDropdown();
         inputRef.current?.focus();
     };
+    const getOptionElements = React.useCallback(() => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return [];
+        return Array.from(contentEl.querySelectorAll("[role=option]"));
+    }, []);
     useHotkeys({
+        [keys.ENTER]: () => {
+            const options = getOptionElements();
+            const highlightedOption = options.find((el) => el.id === highlightedId);
+            highlightedOption?.click();
+            onEnterRef.current?.();
+        },
         [keys.BACKSPACE]: () => {
             onBackspaceRef.current?.();
         },
-        [keys.ENTER]: () => {
-            onEnterRef.current?.();
+        [keys.UP]: () => {
+            const options = getOptionElements();
+            if (options.length) {
+                const highlightedIndex = options.findIndex((el) => el.id === highlightedId);
+                const nextOption = options.at(highlightedIndex - 1) || options.at(-1);
+                setHighlightedId(nextOption.id);
+            }
         },
-    }, [onBackspaceRef, onEnterRef], {
-        ref: inputRef,
-        disabled: !onBackspaceRef.current && !onEnterRef.current,
-    });
-    useHotkeys({
         [keys.DOWN]: () => {
             handleOpen();
+            const options = getOptionElements();
+            if (options.length) {
+                const highlightedIndex = options.findIndex((el) => el.id === highlightedId);
+                const nextOption = options.at(highlightedIndex + 1) || options.at(0);
+                setHighlightedId(nextOption.id);
+            }
         },
-        [keys.ENTER]: () => {
-            const el = getActiveElement(inputRef.current);
-            el?.click();
-        },
-    }, [handleOpen], { ref: inputRef, preventDefault: true });
-    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
+    }, [handleOpen, getOptionElements, highlightedId], { ref: inputRef, preventDefault: true });
+    useIsomorphicLayoutEffect(() => {
+        if (!isDropdownActive)
+            return;
+        requestAnimationFrame(() => {
+            const options = getOptionElements();
+            const firstId = options[0]?.id;
+            if (firstId)
+                setHighlightedId(firstId);
+        });
+    }, [isDropdownActive]);
+    const contextValue = React.useMemo(() => ({
+        onItemClick: handleItemClick,
+        highlightedId,
+        setHighlightedId,
+    }), [highlightedId, handleItemClick]);
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
                             // Ignoring the type check since TS can't infer the correct html element type
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -104,18 +138,24 @@ const Autocomplete = (props) => {
                             onClick: attributes.onFocus,
                             ref: inputRef,
                             role: "combobox",
-                        } })) }), _jsx(DropdownMenu.Content, { attributes: { onClick: handleContentClick }, children: children })] }) }));
+                            "aria-activedescendant": highlightedId,
+                            "aria-haspopup": "listbox",
+                            "aria-autocomplete": "list",
+                        } })) }), _jsx(DropdownMenu.Content, { attributes: { onClick: handleContentClick, role: "listbox", ref: contentRef }, children: children })] }) }));
 };
 const AutocompleteItem = (props) => {
     const { value, data, onClick, ...menuItemProps } = props;
-    const { onItemClick } = React.useContext(AutocompleteContext);
+    const { onItemClick, highlightedId } = React.useContext(AutocompleteContext);
+    const id = useElementId();
     const handleClick = (e) => {
         onClick?.(e);
         onItemClick({ value, data });
     };
-    return (_jsx(DropdownMenu.Item, { ...menuItemProps, className: [menuItemProps.disabled && s["item--disabled"], menuItemProps.className], attributes: {
+    return (_jsx(DropdownMenu.Item, { ...menuItemProps, className: [menuItemProps.disabled && s["item--disabled"], menuItemProps.className], highlighted: highlightedId === id, attributes: {
             ...menuItemProps.attributes,
             role: "option",
+            id,
+            tabIndex: -1,
         }, onClick: handleClick }));
 };
 Autocomplete.Item = AutocompleteItem;

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

@@ -15,6 +15,8 @@ export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "i
 export type ItemProps = MenuItemProps & SelectArgs;
 export type Context = {
     onItemClick: (args: SelectArgs) => void;
+    highlightedId?: string;
+    setHighlightedId: (value?: string) => void;
 };
 export type Instance = DropdownMenuInstance;
 export {};

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

@@ -33,7 +33,7 @@ export const active = {
             }} onClose={() => {
                 args.handleClose();
                 toggle.deactivate();
-            }}>
+            }} onChange={(args) => console.log(args)}>
 							{["Pizza", "Pie", "Ice-cream"].map((v, i) => {
                 return (<Autocomplete.Item key={v} value={v}>
 										{v}
@@ -46,7 +46,7 @@ export const active = {
     },
     play: async ({ canvasElement, args }) => {
         const canvas = within(canvasElement.ownerDocument.body);
-        const input = canvas.getByRole("combobox");
+        // const input = canvas.getByRole("combobox");
         const list = await canvas.findByRole("listbox");
         expect(list).toBeInTheDocument();
         expect(args.handleOpen).not.toHaveBeenCalled();

package/dist/components/Card/Card.d.ts

@@ -9,7 +9,7 @@ declare const Card: React.ForwardRefExoticComponent<{
     href?: string;
     as?: keyof React.JSX.IntrinsicElements | undefined;
     className?: import("../../types/global").ClassName;
-    attributes?: (import("../..").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../..").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "color" | "children" | "className" | "hidden" | "content" | "ref" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "type" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
+    attributes?: (import("../..").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../..").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "color" | "children" | "className" | "hidden" | "content" | "ref" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "type" | "translate" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
         ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
     }) | undefined)) | undefined;
 } & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/FileUpload/FileUpload.js

@@ -10,9 +10,9 @@ const FileUploadTrigger = (props) => {
     return _jsx("span", { className: s.trigger, children: children });
 };
 const FileUpload = (props) => {
-    const { name, children, height, className, attributes, inputAttributes, onChange } = props;
+    const { name, children, height, variant = "outline", inline, className, attributes, inputAttributes, onChange, } = props;
     const highlightToggle = useToggle();
-    const rootClassNames = classNames(s.root, highlightToggle.active && s["--highlighted"], className);
+    const rootClassNames = classNames(s.root, variant && s[`--variant-${variant}`], inline && s[`--inline`], highlightToggle.active && s["--highlighted"], className);
     const handleDragOver = (event) => {
         event.preventDefault();
         attributes?.onDragOver?.(event);
@@ -41,13 +41,15 @@ const FileUpload = (props) => {
         onChange?.({ name, event, value: Array.from(nextValue) });
         inputAttributes?.onChange?.(event);
     };
+    const inputNode = (_jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, onChange: handleChange }) }));
+    const childrenNode = typeof children === "function" ? children({ highlighted: highlightToggle.active }) : children;
     return (_jsx(View, { className: rootClassNames, height: height, attributes: {
             ...attributes,
             onDragOver: handleDragOver,
             onDragEnter: handleDragEnter,
             onDragLeave: handleDragLeave,
             onDrop: handleDrop,
-        }, children: _jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", justify: "center", textAlign: "center", animated: true, height: "100%", children: [_jsx(View.Item, { children: children }), _jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, onChange: handleChange }) })] }) }));
+        }, children: variant === "outline" && !inline ? (_jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", justify: "center", textAlign: "center", animated: true, height: "100%", children: [inputNode, _jsx(View.Item, { children: childrenNode })] })) : (_jsxs("label", { className: s.triggerLayer, children: [inputNode, childrenNode] })) }));
 };
 FileUpload.Trigger = FileUploadTrigger;
 FileUpload.displayName = "FileUpload";

package/dist/components/FileUpload/FileUpload.module.css

@@ -1 +1 @@
-.root.--highlighted .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),8%);border-color:var(--rs-color-border-primary)}.triggerLayer{border:1px dashed var(--rs-color-border-neutral)}[data-rs-keyboard] .triggerLayer:focus-within{box-shadow:var(--rs-focus-shadow)}@media (hover:hover) and (pointer:fine){.triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),16%)}}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger{pointer-events:all}.trigger{display:contents}
+.root{--rs-file-upload-radius:var(--rs-radius-medium);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-focus-shadow)}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-focus-shadow)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-color-border-neutral);border-radius:var(--rs-file-upload-radius)}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),.16)}}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger{pointer-events:all}.trigger{display:contents}

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

@@ -3,9 +3,13 @@ import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
 export type Props = {
     name: string;
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((props: {
+        highlighted?: boolean;
+    }) => React.ReactNode);
     onChange?: G.ChangeHandler<File[], React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>>;
     height?: ViewProps["height"];
+    variant?: "outline" | "headless";
+    inline?: boolean;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
     inputAttributes?: G.Attributes<"input">;

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").FileUploadProps> & {
@@ -11,5 +13,19 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => React.JSX.Element;
-export declare const height: () => React.JSX.Element;
+export declare const base: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const inline: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const height: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const onChange: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;