reshaped 2.11.12 → 3.0.0

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,72 @@
+"use client";
+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 useHotkeys from "../../hooks/useHotkeys.js";
+import { getActiveElement } from "../../utilities/a11y/focus.js";
+import * as keys from "../../constants/keys.js";
+const AutocompleteContext = React.createContext({});
+const Autocomplete = (props) => {
+    const { children, onChange, onInput, onItemSelect, name, ...textFieldProps } = props;
+    const inputRef = React.useRef(null);
+    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 = React.useCallback(() => setActive(true), []);
+    const handleClose = () => setActive(false);
+    useHotkeys({
+        [`${keys.UP},${keys.DOWN}`]: () => handleOpen(),
+        [keys.ENTER]: () => {
+            const el = getActiveElement();
+            el?.click();
+        },
+    }, [handleOpen], { ref: inputRef, preventDefault: true });
+    const handleChange = (args) => {
+        onChange?.(args);
+        setLocked(false);
+        handleOpen();
+    };
+    const handleItemClick = (args) => {
+        onChange?.({ value: args.value, name });
+        onItemSelect?.({ value: args.value });
+        setLocked(true);
+    };
+    const handleFocus = (e) => {
+        requestAnimationFrame(() => {
+            if (!locked)
+                return;
+            setActive(false);
+            setLocked(false);
+        });
+        textFieldProps.onFocus?.(e);
+    };
+    const handleInput = (e) => {
+        onInput?.({ value: e.currentTarget.value, name, event: e });
+        textFieldProps.inputAttributes?.onInput?.(e);
+    };
+    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: !locked && hasChildren && active, onClose: handleClose, onOpen: handleOpen, disableHideAnimation: true, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, 
+                        // Ignoring the type check since TS can't infer the correct html element type
+                        attributes: { ...textFieldProps.attributes, ref }, inputAttributes: {
+                            ...textFieldProps.inputAttributes,
+                            onFocus: (e) => {
+                                attributes.onFocus?.();
+                                handleFocus(e);
+                            },
+                            onInput: handleInput,
+                            ref: inputRef,
+                            role: "combobox",
+                        } })) }), _jsx(DropdownMenu.Content, { children: children })] }) }));
+};
+const AutocompleteItem = (props) => {
+    const { value, onClick, ...menuItemProps } = props;
+    const { onItemClick } = React.useContext(AutocompleteContext);
+    const handleClick = (e) => {
+        onClick?.(e);
+        onItemClick({ value });
+    };
+    return (_jsx(DropdownMenu.Item, { ...menuItemProps, attributes: { ...menuItemProps.attributes, role: "option" }, onClick: handleClick }));
+};
+Autocomplete.Item = AutocompleteItem;
+export default Autocomplete;

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

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

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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?.classNames, color && s[`--color-${color}`], variant && s[`--variant-${variant}`]);
+    const renderContent = () => {
+        if (src)
+            return (_jsx("img", { role: !initials ? "presentation" : undefined, src: src, alt: alt, className: s.img }));
+        if (icon)
+            return (_jsx(Icon, { svg: icon, size: responsivePropDependency(size, (size) => Math.ceil(size * 0.4)) }));
+        return initials;
+    };
+    return (_jsx(View, { borderRadius: radius, attributes: { ...attributes, style: { ...heightStyles?.variables } }, backgroundColor: variant === "faded" ? `${color}-${variant}` : color, className: rootClassNames, children: renderContent() }));
+};
+export default Avatar;

package/dist/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" | "warning" | "positive" | "primary";
+    size?: G.Responsive<number>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export {};

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Badge.types";
+declare const Badge: T.Export;
+export default Badge;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import Text from "../Text/index.js";
+import Icon from "../Icon/index.js";
+import IconClose from "../../icons/Close.js";
+import Actionable from "../Actionable/index.js";
+import BadgeContainer from "./BadgeContainer.js";
+import s from "./Badge.module.css";
+import { forwardRef } from "react";
+const Badge = forwardRef((props, ref) => {
+    const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
+    const isActionable = !!(onClick || href);
+    const iconSize = size === "large" ? 4 : 3.5;
+    const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"]);
+    const hnadleDismiss = (e) => {
+        e.stopPropagation();
+        onDismiss?.();
+    };
+    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
+                    "aria-hidden": hidden ? "true" : undefined,
+                }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
+});
+Badge.Container = BadgeContainer;
+export default Badge;

package/dist/components/Badge/Badge.module.css

@@ -0,0 +1 @@
+.root{align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border:1px solid var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-width:calc(var(--rs-badge-line-height) + 2px + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.dismiss{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{background:none;border-color:var(--rs-color-border-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);border-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);border-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{background:none;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);border-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);border-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{background:none;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);border-color:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);border-color:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{background:none;border-color:var(--rs-color-border-warning);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);border-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{background:none;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:0px;--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:calc(var(--rs-unit-x1) - 1px);--rs-badge-p-h:calc(var(--rs-unit-x2) - 1px);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:999px}.root:empty{height:var(--rs-badge-empty-size);min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

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

@@ -0,0 +1,42 @@
+import type React from "react";
+import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
+import type * as G from "../../types/global";
+type BaseProps = {
+    size?: "small" | "medium" | "large";
+    icon?: IconProps["svg"];
+    endIcon?: IconProps["svg"];
+    rounded?: boolean;
+    hidden?: boolean;
+    className?: G.ClassName;
+} & Pick<ActionableProps, "href" | "onClick" | "attributes">;
+type WithChildren = BaseProps & {
+    children: React.ReactNode;
+    color?: "critical" | "warning" | "positive" | "primary";
+    variant?: "faded" | "outline";
+};
+type WithEmpty = BaseProps & {
+    color: "critical" | "warning" | "positive" | "primary";
+    children?: never;
+    variant?: never;
+};
+type WithDismissible = {
+    onDismiss: () => void;
+    dismissAriaLabel: string;
+};
+type WithoutDismissible = {
+    onDismiss?: never;
+    dismissAriaLabel?: string;
+};
+export type Props = (WithChildren | WithEmpty) & (WithDismissible | WithoutDismissible);
+export type ContainerProps = {
+    position?: "top-end" | "bottom-end";
+    overlap?: boolean;
+    children: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type Export = React.ForwardRefExoticComponent<Props> & {
+    Container: React.ComponentType<ContainerProps>;
+};
+export {};

package/dist/components/Badge/BadgeContainer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Badge.module.css";
+const BadgeContainer = (props) => {
+    const { children, position = "top-end", overlap, className, attributes } = props;
+    const rootClassNames = classNames(s.container, className, overlap && s["--container-overlap"], position && s[`--container-position-${position}`]);
+    return (_jsx("div", { ...attributes, className: rootClassNames, children: children }));
+};
+export default BadgeContainer;

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

@@ -0,0 +1,19 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: import("../Badge.types").Export;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const variant: () => React.JSX.Element;
+export declare const color: () => React.JSX.Element;
+export declare const sizes: () => React.JSX.Element;
+export declare const icon: () => React.JSX.Element;
+export declare const actionable: () => React.JSX.Element;
+export declare const rounded: () => React.JSX.Element;
+export declare const empty: () => React.JSX.Element;
+export declare const container: () => React.JSX.Element;

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

@@ -0,0 +1,247 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Avatar from "../../Avatar/index.js";
+import View from "../../View/index.js";
+import Badge from "../index.js";
+import Icon from "../../Icon/index.js";
+import Button from "../../Button/index.js";
+import IconCheckmark from "../../../icons/Checkmark.js";
+import IconChevronRight from "../../../icons/ChevronRight.js";
+export default {
+    title: "Components/Badge",
+    component: Badge,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/badge",
+        },
+    },
+};
+export const variant = () => (<Example>
+		<Example.Item title="variant: default">
+			<Badge>Badge</Badge>
+		</Example.Item>
+		<Example.Item title="variant: faded">
+			<Badge variant="faded">Badge</Badge>
+		</Example.Item>
+		<Example.Item title="variant: outline">
+			<Badge variant="outline">Badge</Badge>
+		</Example.Item>
+	</Example>);
+export const color = () => (<Example>
+		<Example.Item title="color: primary, all variants">
+			<View direction="row" gap={3}>
+				<Badge color="primary">Badge</Badge>
+				<Badge variant="faded" color="primary">
+					Badge
+				</Badge>
+				<Badge variant="outline" color="primary">
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="color: positive, all variants">
+			<View direction="row" gap={3}>
+				<Badge color="positive">Badge</Badge>
+				<Badge variant="faded" color="positive">
+					Badge
+				</Badge>
+				<Badge variant="outline" color="positive">
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="color: critical, all variants">
+			<View direction="row" gap={3}>
+				<Badge color="critical">Badge</Badge>
+				<Badge variant="faded" color="critical">
+					Badge
+				</Badge>
+				<Badge variant="outline" color="critical">
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="color: warning, all variants">
+			<View direction="row" gap={3}>
+				<Badge color="warning">Badge</Badge>
+				<Badge variant="faded" color="warning">
+					Badge
+				</Badge>
+				<Badge variant="outline" color="warning">
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+	</Example>);
+export const sizes = () => (<Example>
+		<Example.Item title="size: small, not rounded and rounded">
+			<View gap={3} direction="row">
+				<Badge size="small">Badge</Badge>
+				<Badge rounded size="small">
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+		<Example.Item title="size: medium, not rounded and rounded">
+			<View gap={3} direction="row">
+				<Badge>Badge</Badge>
+				<Badge rounded>Badge</Badge>
+			</View>
+		</Example.Item>
+		<Example.Item title="size: large, not rounded and rounded">
+			<View gap={3} direction="row">
+				<Badge size="large">Badge</Badge>
+				<Badge rounded size="large">
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+	</Example>);
+export const icon = () => (<Example>
+		<Example.Item title="size: small, not rounded and rounded">
+			<View gap={3} direction="row">
+				<Badge icon={IconCheckmark} endIcon={IconChevronRight} size="small">
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+		<Example.Item title="size: medium, not rounded and rounded">
+			<View gap={3} direction="row">
+				<Badge icon={IconCheckmark} endIcon={IconChevronRight}>
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+		<Example.Item title="size: large, not rounded and rounded">
+			<View gap={3} direction="row">
+				<Badge size="large" icon={IconCheckmark} endIcon={IconChevronRight}>
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+	</Example>);
+export const actionable = () => (<Example>
+		<Example.Item title="onClick">
+			<Badge onClick={() => console.log("click")} dismissAriaLabel="Dismiss">
+				Badge
+			</Badge>
+		</Example.Item>
+		<Example.Item title="dismissible, close button is actionable">
+			<Badge onDismiss={() => console.log("heyeye")} dismissAriaLabel="Dismiss">
+				Badge
+			</Badge>
+		</Example.Item>
+		<Example.Item title="dismissible + onClick, whole badge is actionable">
+			<Badge onDismiss={() => console.log("dismiss")} dismissAriaLabel="Dismiss" onClick={() => console.log("click")}>
+				Badge
+			</Badge>
+		</Example.Item>
+	</Example>);
+export const rounded = () => (<Example>
+		<Example.Item title="rounded, all variants">
+			<View direction="row" gap={3}>
+				<Badge rounded>Badge</Badge>
+				<Badge rounded variant="faded">
+					Badge
+				</Badge>
+				<Badge rounded variant="outline">
+					Badge
+				</Badge>
+			</View>
+		</Example.Item>
+		<Example.Item title={["rounded, all sizes, color: critical", "one character, renders as circle"]}>
+			<View direction="row" gap={3}>
+				<Badge rounded color="critical" size="small">
+					2
+				</Badge>
+				<Badge rounded color="critical">
+					2
+				</Badge>
+				<Badge rounded color="critical" size="large">
+					2
+				</Badge>
+			</View>
+		</Example.Item>
+	</Example>);
+export const empty = () => (<Example>
+		<Example.Item title="empty, not rounded, all sizes, color: critical">
+			<View direction="row" gap={3}>
+				<Badge size="small" color="critical"/>
+				<Badge color="critical"/>
+				<Badge size="large" color="critical"/>
+			</View>
+		</Example.Item>
+		<Example.Item title="empty, rounded, all sizes, color: critical">
+			<View direction="row" gap={3}>
+				<Badge rounded size="small" color="critical"/>
+				<Badge rounded color="critical"/>
+				<Badge rounded size="large" color="critical"/>
+			</View>
+		</Example.Item>
+	</Example>);
+export const container = () => {
+    const [hidden, setHidden] = React.useState(false);
+    return (<Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>
+			<Example.Item title="position: top-end">
+				<Badge.Container>
+					<Badge color="primary" hidden={hidden}>
+						5
+					</Badge>
+					<Avatar initials="A" squared/>
+				</Badge.Container>
+			</Example.Item>
+
+			<Example.Item title="position: bottom-end">
+				<Badge.Container position="bottom-end">
+					<Badge color="primary" hidden={hidden}>
+						5
+					</Badge>
+					<Avatar initials="A" squared/>
+				</Badge.Container>
+			</Example.Item>
+
+			<Example.Item title="position: top-end, rounded, multiple digits">
+				<Badge.Container>
+					<Badge size="small" color="primary" rounded hidden={hidden}>
+						123
+					</Badge>
+					<Avatar initials="A" squared/>
+				</Badge.Container>
+			</Example.Item>
+
+			<Example.Item title="position: top-end, rounded, empty">
+				<Badge.Container>
+					<Badge color="primary" rounded hidden={hidden}/>
+					<Avatar initials="A" squared/>
+				</Badge.Container>
+			</Example.Item>
+
+			<Example.Item title={["position: top-end, overlap", "should cover the circular avatar"]}>
+				<Badge.Container overlap>
+					<Badge size="small" color="primary" rounded hidden={hidden}>
+						2
+					</Badge>
+					<Avatar initials="A"/>
+				</Badge.Container>
+			</Example.Item>
+
+			<Example.Item title={["position: bottom-end, overlap", "should cover the circular avatar"]}>
+				<Badge.Container overlap position="bottom-end">
+					<Badge size="small" color="primary" rounded hidden={hidden}>
+						2
+					</Badge>
+					<Avatar initials="A"/>
+				</Badge.Container>
+			</Example.Item>
+
+			<Example.Item title={["position: top-end, overlap", "should cover the icon"]}>
+				<Badge.Container overlap position="top-end">
+					<Badge size="small" color="primary" rounded hidden={hidden}/>
+					<Icon svg={IconCheckmark} size={5}/>
+				</Badge.Container>
+			</Example.Item>
+		</Example>);
+};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import Icon from "../Icon/index.js";
+import Text from "../Text/index.js";
+import Button from "../Button/index.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
+const Breadcrumbs = (props) => {
+    const { children, separator, color, defaultVisibleItems, disableExpand, ariaLabel, className, attributes, } = props;
+    const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;
+    const [expanded, setExpanded] = React.useState(false);
+    const rootClassNames = classNames(className);
+    const childrenLength = React.Children.count(children);
+    let renderIndex = 0;
+    const handleExpand = () => {
+        setExpanded(true);
+    };
+    return (_jsx("nav", { ...attributes, "aria-label": ariaLabel || attributes?.["aria-label"], className: rootClassNames, children: _jsx(View, { as: "ol", direction: "row", gap: 2, align: "center", children: React.Children.map(children, (child, index) => {
+                if (!child)
+                    return null;
+                const lastCollapsedIndex = childrenLength - (visibleItems || 0);
+                const isBeforeCollapse = renderIndex === 0;
+                const isAfterCollapse = renderIndex > lastCollapsedIndex;
+                const isDisplayed = !visibleItems || isBeforeCollapse || isAfterCollapse || expanded;
+                const isCollapseButton = renderIndex === lastCollapsedIndex;
+                renderIndex += 1;
+                let itemNode = null;
+                if (isDisplayed) {
+                    itemNode = child;
+                }
+                else if (isCollapseButton) {
+                    itemNode = disableExpand ? (_jsx(Icon, { svg: IconDotsHorizontal, size: 4 })) : (_jsx(Button.Aligner, { children: _jsx(Button, { variant: "ghost", size: "small", icon: IconDotsHorizontal, onClick: handleExpand }) }));
+                }
+                if (itemNode === null)
+                    return null;
+                return (_jsxs(View, { as: "li", gap: 2, direction: "row", align: "center", children: [index > 0 && (isDisplayed || isCollapseButton) && (_jsx(Text, { color: "neutral-faded", children: separator || _jsx(Icon, { svg: IconChevronRight, size: 3 }) })), _jsx(Text, { variant: "body-3", color: color === "primary" ? "primary" : "neutral-faded", children: itemNode })] }, index));
+            }) }) }));
+};
+export default Breadcrumbs;

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

@@ -0,0 +1,14 @@
+import type React from "react";
+import type { LinkProps } from "../Link";
+import type * as G from "../../types/global";
+export type Props = {
+    children: React.ReactElement | React.ReactElement[];
+    separator?: React.ReactNode;
+    color?: "neutral" | "primary";
+    defaultVisibleItems?: number;
+    disableExpand?: boolean;
+    ariaLabel?: string;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"nav">;
+};
+export type ItemProps = Pick<LinkProps, "icon" | "href" | "onClick" | "disabled" | "children">;

package/dist/components/Button/Button.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import Icon from "../Icon/index.js";
+import Loader from "../Loader/index.js";
+import Actionable from "../Actionable/index.js";
+import ButtonGroup from "./ButtonGroup.js";
+import ButtonAligner from "./ButtonAligner.js";
+import s from "./Button.module.css";
+const Button = forwardRef((props, ref) => {
+    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, as, className, attributes, } = props;
+    const iconOnly = (icon || endIcon) && !children;
+    const rootClassName = classNames(s.root, className, color && s[`--color-${color}`], variant && s[`--variant-${variant}`], responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--full-width", fullWidth), elevated && variant !== "ghost" && s["--elevated"], rounded && s["--rounded"], disabled && s["--disabled"], loading && s["--loading"], highlighted && s["--highlighted"], iconOnly && s["--icon-only"]);
+    const renderIcon = (position) => {
+        const isStartValid = position === "start" && icon;
+        const isEndValid = position === "end" && endIcon;
+        const isInvalid = !(isStartValid || isEndValid);
+        if (isInvalid)
+            return null;
+        const iconClassName = classNames(s.icon, position === "end" && s["--icon-position-end"]);
+        const iconSize = responsivePropDependency(size, (size) => {
+            if (size === "large")
+                return 5;
+            if (size === "xlarge")
+                return 6;
+            return 4;
+        });
+        return (_jsx(Icon, { className: iconClassName, svg: (position === "start" ? icon : endIcon), size: iconSize, autoWidth: true }));
+    };
+    return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: { ...attributes, "data-rs-aligner-target": true }, type: type, onClick: onClick, href: href, ref: ref, as: as, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { size: "small", color: "inherit" }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
+});
+Button.Group = ButtonGroup;
+Button.Aligner = ButtonAligner;
+export default Button;