reshaped 1.0.1 → 2.2.0

package/components/ActionBar/ActionBar.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import s from "./ActionBar.module.css";
+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 (React.createElement(View, { className: rootClassNames, attributes: attributes, paddingBlock: padding || paddingBlock, paddingInline: padding || paddingInline }, children));
+};
+export default ActionBar;

package/components/ActionBar/ActionBar.module.css

@@ -0,0 +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;position:absolute;right:0}.--position-bottom.--elevated:after{transform:rotateX(180deg)}

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

@@ -0,0 +1,10 @@
+import 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";
+    elevated?: boolean;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};

package/components/ActionBar/ActionBar.types.js

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

package/components/ActionBar/index.d.ts

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

package/components/ActionBar/index.js

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const position: () => React.JSX.Element;
+export declare const elevated: () => React.JSX.Element;
+export declare const padding: () => React.JSX.Element;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { Placeholder, Example } from "../../../utilities/storybook/index.js";
+import ActionBar from "../index.js";
+export default { title: "Components/ActionBar" };
+export const position = () => (<Example>
+		<Example.Item title="position: top">
+			<ActionBar position="top">
+				<Placeholder />
+			</ActionBar>
+		</Example.Item>
+
+		<Example.Item title="position: bottom">
+			<ActionBar>
+				<Placeholder />
+			</ActionBar>
+		</Example.Item>
+	</Example>);
+export const elevated = () => (<Example>
+		<Example.Item title="elevated, position: top">
+			<ActionBar position="top" elevated>
+				<Placeholder />
+			</ActionBar>
+		</Example.Item>
+
+		<Example.Item title="elevated, position: bottom">
+			<ActionBar elevated>
+				<Placeholder h={16}/>
+			</ActionBar>
+		</Example.Item>
+	</Example>);
+export const padding = () => (<Example>
+		<Example.Item title="padding: 6">
+			<ActionBar padding={6}>
+				<Placeholder />
+			</ActionBar>
+		</Example.Item>
+
+		<Example.Item title={["padding: responsive", "[s] 4", "[m+] 6"]}>
+			<ActionBar padding={{ s: 4, m: 6 }}>
+				<Placeholder />
+			</ActionBar>
+		</Example.Item>
+	</Example>);

package/components/Actionable/Actionable.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Actionable.types";
+declare const _default: React.ForwardRefExoticComponent<T.Props & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export default _default;

package/components/Actionable/Actionable.js

@@ -0,0 +1,54 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Actionable.module.css";
+const Actionable = (props, ref) => {
+    const { children, href, onClick, type, disabled, insetFocus, borderRadius, as, fullWidth, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], fullWidth && s["--full-width"]);
+    const rootAttributes = Object.assign({}, attributes);
+    const hasClickHandler = onClick || (attributes === null || attributes === void 0 ? void 0 : attributes.onClick);
+    const hasFocusHandler = (attributes === null || attributes === void 0 ? void 0 : attributes.onFocus) || (attributes === null || attributes === void 0 ? void 0 : attributes.onBlur);
+    const isLink = Boolean(href || (attributes === null || attributes === void 0 ? void 0 : attributes.href));
+    const isButton = Boolean(hasClickHandler || hasFocusHandler || type);
+    let TagName;
+    if (isLink) {
+        rootAttributes.href = disabled ? undefined : href || (attributes === null || attributes === void 0 ? void 0 : attributes.href);
+        TagName = "a";
+    }
+    else if (isButton && (!as || as === "button")) {
+        TagName = "button";
+        rootAttributes.type = type || (attributes === null || attributes === void 0 ? void 0 : attributes.type) || "button";
+        rootAttributes.disabled = disabled || (attributes === null || attributes === void 0 ? void 0 : attributes.disabled);
+    }
+    else if (isButton) {
+        const isFocusable = as === "label";
+        const simulateButton = !isFocusable || hasClickHandler || hasFocusHandler;
+        TagName = as || "span";
+        rootAttributes.role = simulateButton ? "button" : undefined;
+        rootAttributes.tabIndex = simulateButton ? 0 : undefined;
+    }
+    else {
+        TagName = as || "span";
+    }
+    const handlePress = (event) => {
+        var _a;
+        if (disabled)
+            return;
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onClick) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
+    };
+    const handleClick = (event) => handlePress(event);
+    const handleKeyDown = (event) => {
+        const simulatingButton = rootAttributes.role === "button";
+        if (!simulatingButton || isLink)
+            return;
+        const isSpace = event.key === " ";
+        const isEnter = event.key === "Enter";
+        if (!isSpace && !isEnter)
+            return;
+        event.preventDefault();
+        handlePress(event);
+    };
+    return (React.createElement(TagName, Object.assign({ ref: ref }, rootAttributes, { className: rootClassNames, onClick: handleClick, onKeyDown: handleKeyDown }), children));
+};
+export default React.forwardRef(Actionable);

package/components/Actionable/Actionable.module.css

@@ -0,0 +1 @@
+.root{-webkit-tap-highlight-color:none;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;vertical-align:top}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}

package/components/Actionable/Actionable.types.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    href?: string;
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    disabled?: boolean;
+    fullWidth?: boolean;
+    insetFocus?: boolean;
+    borderRadius?: "inherit";
+    as?: keyof JSX.IntrinsicElements;
+    className?: G.ClassName;
+    attributes?: Omit<G.Attributes<"button">, "ref"> & Omit<JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
+        ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
+    };
+};
+export type Ref = React.Ref<HTMLButtonElement | HTMLAnchorElement>;

package/components/Actionable/Actionable.types.js

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

package/components/Actionable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Actionable";
+export type { Props as ActionableProps, Ref as ActionableRef } from "./Actionable.types";

package/components/Actionable/index.js

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const role: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;
+export declare const fullWidth: () => React.JSX.Element;
+export declare const focusRing: () => React.JSX.Element;

package/components/Actionable/tests/Actionable.stories.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Actionable from "../index.js";
+import View from "../../View/index.js";
+export default { title: "Utilities/Actionable" };
+export const role = () => (<Example>
+		<Example.Item title="rendered as link">
+			<Actionable href="https://reshaped.so" attributes={{ target: "_blank" }}>
+				Actionable
+			</Actionable>
+		</Example.Item>
+		<Example.Item title="rendered as button">
+			<Actionable onClick={() => console.log("Clicked")}>Actionable</Actionable>
+		</Example.Item>
+		<Example.Item title="rendered as div with button role">
+			<Actionable as="div" onClick={() => console.log("Clicked")}>
+				Actionable
+			</Actionable>
+		</Example.Item>
+		<Example.Item title="rendered as link with onClick">
+			<Actionable onClick={() => console.log("Clicked")} href="https://reshaped.so">
+				Actionable
+			</Actionable>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled, button">
+			<Actionable disabled onClick={() => { }}>
+				Actionable
+			</Actionable>
+		</Example.Item>
+		<Example.Item title="disabled, link">
+			<Actionable disabled href="https://reshaped.so">
+				Actionable
+			</Actionable>
+		</Example.Item>
+	</Example>);
+export const fullWidth = () => (<Example>
+		<Example.Item title="fullWidth">
+			<Actionable fullWidth href="https://reshaped.so">
+				Actionable
+			</Actionable>
+		</Example.Item>
+	</Example>);
+export const focusRing = () => (<Example>
+		<Example.Item title="insetFocus">
+			<Actionable insetFocus onClick={() => { }}>
+				Actionable
+			</Actionable>
+		</Example.Item>
+		<Example.Item title="radius: inherit">
+			<Actionable borderRadius="inherit" onClick={() => { }}>
+				<View borderRadius="large">Actionable</View>
+			</Actionable>
+		</Example.Item>
+	</Example>);

package/components/Alert/Alert.d.ts

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

package/components/Alert/Alert.js

@@ -0,0 +1,31 @@
+import React from "react";
+import Icon from "../Icon/index.js";
+import View from "../View/index.js";
+import Text from "../Text/index.js";
+const Alert = (props) => {
+    const { title, children, icon, actionsSlot, color = "neutral", inline, bleed, className, attributes, } = props;
+    const isNeutral = color === "neutral";
+    const renderContent = () => {
+        if (inline) {
+            return (React.createElement(React.Fragment, null,
+                title && (React.createElement(Text, { variant: "body-3", weight: "medium", as: "span" }, title)),
+                title && children && " ",
+                children && (React.createElement(Text, { variant: "body-3", as: "span" }, children))));
+        }
+        return (React.createElement(View, { gap: 1 },
+            title && (React.createElement(Text, { variant: "body-3", weight: "medium" }, title)),
+            children && React.createElement(Text, { variant: "body-3" }, children)));
+    };
+    const applyActions = (content) => {
+        if (!actionsSlot)
+            return content;
+        return (React.createElement(View, { gap: 2, direction: inline ? "row" : "column" },
+            inline ? React.createElement(View.Item, { grow: true }, content) : content,
+            actionsSlot && (React.createElement(Text, { variant: "body-3", weight: "medium" },
+                React.createElement(View, { direction: "row", gap: 3 }, actionsSlot)))));
+    };
+    return (React.createElement(View, { direction: "row", gap: 3, padding: 4, bleed: bleed, borderRadius: "medium", borderColor: `${color}-faded`, backgroundColor: `${color}-faded`, className: className, attributes: Object.assign(Object.assign({}, attributes), { role: color === "critical" ? "alert" : "status" }) }, icon ? (React.createElement(React.Fragment, null,
+        React.createElement(Icon, { svg: icon, size: 5, color: isNeutral ? "primary" : color }),
+        React.createElement(View.Item, { grow: true }, applyActions(renderContent())))) : (applyActions(renderContent()))));
+};
+export default Alert;

package/components/Alert/Alert.types.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { IconProps } from "../Icon";
+import type * as G from "../../types/global";
+export type Props = {
+    icon?: IconProps["svg"];
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    actionsSlot?: React.ReactNode;
+    color?: "neutral" | "critical" | "positive" | "primary";
+    inline?: boolean;
+    bleed?: G.Responsive<number>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};

package/components/Alert/Alert.types.js

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

package/components/Alert/index.d.ts

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

package/components/Alert/index.js

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const color: () => React.JSX.Element;
+export declare const inline: () => React.JSX.Element;
+export declare const bleed: () => React.JSX.Element;

package/components/Alert/tests/Alert.stories.js

@@ -0,0 +1,78 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Alert from "../index.js";
+import Link from "../../Link/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default { title: "Components/Alert" };
+export const color = () => (<Example>
+		<Example.Item title="color: neutral">
+			<Alert title="Alert title goes here" icon={IconZap} actionsSlot={<>
+						<Link variant="plain">View now</Link>
+						<Link variant="plain">Dismiss</Link>
+					</>}>
+				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+				been the industry's standard
+			</Alert>
+		</Example.Item>
+
+		<Example.Item title="color: primary">
+			<Alert color="primary" title="Alert title goes here" icon={IconZap} actionsSlot={<>
+						<Link variant="plain">View now</Link>
+						<Link variant="plain">Dismiss</Link>
+					</>}>
+				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+				been the industry's standard
+			</Alert>
+		</Example.Item>
+
+		<Example.Item title="color: critical">
+			<Alert color="critical" title="Alert title goes here" icon={IconZap} actionsSlot={<>
+						<Link variant="plain" color="critical">
+							View now
+						</Link>
+						<Link variant="plain" color="critical">
+							Dismiss
+						</Link>
+					</>}>
+				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+				been the industry's standard
+			</Alert>
+		</Example.Item>
+
+		<Example.Item title="color: positive">
+			<Alert color="positive" title="Alert title goes here" icon={IconZap} actionsSlot={<>
+						<Link variant="plain" color="positive">
+							View now
+						</Link>
+						<Link variant="plain" color="positive">
+							Dismiss
+						</Link>
+					</>}>
+				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+				been the industry's standard
+			</Alert>
+		</Example.Item>
+	</Example>);
+export const inline = () => (<Example>
+		<Example.Item title="inline: true">
+			<Alert inline title="Alert title goes here" icon={IconZap} actionsSlot={<>
+						<Link variant="plain">View now</Link>
+						<Link variant="plain">Dismiss</Link>
+					</>}>
+				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+				been the industry's standard
+			</Alert>
+		</Example.Item>
+	</Example>);
+export const bleed = () => (<Example>
+		<Example.Item title="bleed: 4">
+			<Alert bleed={4} icon={IconZap}>
+				Content
+			</Alert>
+		</Example.Item>
+		<Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
+			<Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>
+				Content
+			</Alert>
+		</Example.Item>
+	</Example>);

package/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import * as T from "./Autocomplete.types";
+declare const Autocomplete: {
+    (props: T.Props): React.JSX.Element;
+    Item: (props: T.ItemProps) => React.JSX.Element;
+};
+export default Autocomplete;

package/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,69 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import TextField from "../TextField/index.js";
+import DropdownMenu from "../DropdownMenu/index.js";
+const AutocompleteContext = React.createContext({});
+const Autocomplete = (props) => {
+    const { children, onChange, onItemSelect, name } = props, textFieldProps = __rest(props, ["children", "onChange", "onItemSelect", "name"]);
+    const [active, setActive] = React.useState(false);
+    // Prevent dropdown from opening on selecting an item
+    const [locked, setLocked] = React.useState(false);
+    const hasChildren = !!React.Children.toArray(children).filter(Boolean).length;
+    const handleOpen = () => setActive(true);
+    const handleClose = () => setActive(false);
+    const handleChange = (args) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(args);
+        setLocked(false);
+        handleOpen();
+    };
+    const handleItemClick = (args) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange({ value: args.value, name });
+        onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect({ value: args.value });
+        setLocked(true);
+    };
+    const handleFocus = (e) => {
+        var _a;
+        requestAnimationFrame(() => {
+            if (!locked)
+                return;
+            setActive(false);
+            setLocked(false);
+        });
+        (_a = textFieldProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
+    };
+    return (React.createElement(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick } },
+        React.createElement(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: !locked && hasChildren && active, onClose: handleClose, onOpen: handleOpen, disableHideAnimation: true },
+            React.createElement(DropdownMenu.Trigger, null, (_a) => {
+                var { ref } = _a, attributes = __rest(_a, ["ref"]);
+                return (React.createElement(TextField, Object.assign({}, textFieldProps, { name: name, onChange: handleChange, 
+                    // Ignoring the type check since TS can't infer the correct html element type
+                    attributes: Object.assign(Object.assign({}, textFieldProps.attributes), { ref }), inputAttributes: Object.assign(Object.assign({}, attributes), { onFocus: (e) => {
+                            var _a;
+                            (_a = attributes.onFocus) === null || _a === void 0 ? void 0 : _a.call(attributes);
+                            handleFocus(e);
+                        }, role: "combobox" }) })));
+            }),
+            React.createElement(DropdownMenu.Content, null, children))));
+};
+const AutocompleteItem = (props) => {
+    const { value, onClick } = props, menuItemProps = __rest(props, ["value", "onClick"]);
+    const { onItemClick } = React.useContext(AutocompleteContext);
+    const hanleClick = (e) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        onItemClick({ value });
+    };
+    return (React.createElement(DropdownMenu.Item, Object.assign({}, menuItemProps, { attributes: Object.assign(Object.assign({}, menuItemProps.attributes), { role: "option" }), onClick: hanleClick })));
+};
+Autocomplete.Item = AutocompleteItem;
+export default Autocomplete;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { TextFieldProps } from "../TextField";
+import type { MenuItemProps } from "../MenuItem";
+export type Props = TextFieldProps & {
+    onItemSelect?: (args: {
+        value: string;
+    }) => void;
+    children: React.ReactNode;
+};
+export type ItemProps = MenuItemProps & {
+    value: string;
+};
+export type Context = {
+    onItemClick: (args: {
+        value: string;
+    }) => void;
+};

package/components/Autocomplete/Autocomplete.types.js

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

package/components/Autocomplete/index.d.ts

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

package/components/Autocomplete/index.js

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

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

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Autocomplete from "../index.js";
+export default { title: "Components/Autocomplete" };
+const Demo = () => {
+    const [value, setValue] = React.useState("");
+    return (<Autocomplete name="fruit" value={value} placeholder="Pick your food" onChange={({ value }) => setValue(value)}>
+			{["Pizza", "Pie", "Ice-cream"].map((v) => {
+            if (!v.toLowerCase().includes(value.toLowerCase()))
+                return;
+            return (<Autocomplete.Item key={v} value={v}>
+						{v}
+					</Autocomplete.Item>);
+        })}
+		</Autocomplete>);
+};
+export const base = () => (<Example>
+		<Example.Item title="Default">
+			<Demo />
+		</Example.Item>
+	</Example>);

package/components/Avatar/Avatar.d.ts

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

package/components/Avatar/Avatar.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { classNames, responsivePropDependency } from "../../utilities/helpers.js";
+import getHeightStyles from "../../styles/height/index.js";
+import Icon from "../Icon/index.js";
+import View from "../View/index.js";
+import s from "./Avatar.module.css";
+const Avatar = (props) => {
+    const { color = "neutral", variant, src, size = 12, squared, initials, icon, alt, className, attributes, } = props;
+    const radius = squared
+        ? responsivePropDependency(size, (size) => {
+            if (size >= 24)
+                return "large";
+            if (size >= 12)
+                return "medium";
+            return "small";
+        })
+        : "circular";
+    const heightStyles = getHeightStyles(size);
+    const rootClassNames = classNames(s.root, className, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, color && s[`--color-${color}`], variant && s[`--variant-${variant}`]);
+    const renderContent = () => {
+        if (src)
+            return (React.createElement("img", { role: !initials ? "presentation" : undefined, src: src, alt: alt, className: s.img }));
+        if (icon)
+            return (React.createElement(Icon, { svg: icon, size: responsivePropDependency(size, (size) => Math.ceil(size * 0.4)) }));
+        return initials;
+    };
+    return (React.createElement(View, { borderRadius: radius, attributes: Object.assign(Object.assign({}, attributes), { style: Object.assign({}, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables) }), backgroundColor: variant === "faded" ? `${color}-${variant}` : color, className: rootClassNames }, renderContent()));
+};
+export default Avatar;

package/components/Avatar/Avatar.module.css

@@ -0,0 +1 @@
+.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:700;justify-content:center;line-height:100%}.img{border-radius:inherit;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}

package/components/Avatar/Avatar.types.d.ts

@@ -0,0 +1,30 @@
+import type { IconProps } from "../Icon";
+import type * as G from "../../types/global";
+type WithImage = {
+    src: string;
+    initials?: string;
+    icon?: IconProps["svg"];
+    alt?: string;
+};
+type WithInitials = {
+    src?: never;
+    initials: string;
+    icon?: never;
+    alt?: never;
+};
+type WithIcon = {
+    src?: never;
+    initials?: never;
+    icon: IconProps["svg"];
+    alt?: never;
+};
+type WithContent = WithImage | WithInitials | WithIcon;
+export type Props = WithContent & {
+    squared?: boolean;
+    variant?: "solid" | "faded";
+    color?: "neutral" | "critical" | "positive" | "primary";
+    size?: G.Responsive<number>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export {};

package/components/Avatar/Avatar.types.js

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

package/components/Avatar/index.d.ts

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

package/components/Avatar/index.js

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

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

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const content: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const squared: () => React.JSX.Element;
+export declare const colors: () => React.JSX.Element;