reshaped 1.0.1 → 2.2.0

package/components/Avatar/tests/Avatar.stories.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Avatar from "../index.js";
+import View from "../../View/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default { title: "Components/Avatar" };
+export const content = () => (<Example>
+		<Example.Item title="With image">
+			<Avatar src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png" alt="Reshaped"/>
+		</Example.Item>
+		<Example.Item title="With initials">
+			<Avatar initials="RS"/>
+		</Example.Item>
+		<Example.Item title="With icon">
+			<Avatar icon={IconZap}/>
+		</Example.Item>
+	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="size: 6">
+			<View direction="row" gap={3}>
+				<Avatar size={6} icon={IconZap}/>
+				<Avatar size={6} initials="RS" squared/>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="size: 15">
+			<View direction="row" gap={3}>
+				<Avatar size={15} icon={IconZap}/>
+				<Avatar size={15} initials="RS" squared/>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="size: 40">
+			<View direction="row" gap={3}>
+				<Avatar size={40} icon={IconZap}/>
+				<Avatar size={40} initials="RS" squared/>
+			</View>
+		</Example.Item>
+
+		<Example.Item title={["responsive size", "[s] 10", "[m+] 20"]}>
+			<View direction="row" gap={3}>
+				<Avatar size={{ s: 10, m: 20 }} icon={IconZap}/>
+				<Avatar size={{ s: 10, m: 20 }} icon={IconZap} squared/>
+			</View>
+		</Example.Item>
+	</Example>);
+export const squared = () => (<Example>
+		<Example.Item title="squared, with image">
+			<Avatar squared src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png"/>
+		</Example.Item>
+		<Example.Item title="squared, with initials">
+			<Avatar squared initials="RS"/>
+		</Example.Item>
+		<Example.Item title="squared, with initials">
+			<Avatar squared icon={IconZap}/>
+		</Example.Item>
+	</Example>);
+export const colors = () => (<Example>
+		<Example.Item title="color: neutral">
+			<Avatar color="neutral" icon={IconZap}/>
+		</Example.Item>
+		<Example.Item title="color: neutral, variant: faded">
+			<Avatar color="neutral" variant="faded" icon={IconZap}/>
+		</Example.Item>
+		<Example.Item title="color: primary">
+			<Avatar color="primary" icon={IconZap}/>
+		</Example.Item>
+		<Example.Item title="color: primary, variant: faded">
+			<Avatar color="primary" variant="faded" icon={IconZap}/>
+		</Example.Item>
+		<Example.Item title="color: positive">
+			<Avatar color="positive" icon={IconZap}/>
+		</Example.Item>
+		<Example.Item title="color: positive, variant: faded">
+			<Avatar color="positive" variant="faded" icon={IconZap}/>
+		</Example.Item>
+		<Example.Item title="color: critical">
+			<Avatar color="critical" icon={IconZap}/>
+		</Example.Item>
+		<Example.Item title="color: critical, variant: faded">
+			<Avatar color="critical" variant="faded" icon={IconZap}/>
+		</Example.Item>
+	</Example>);

package/components/Badge/Badge.d.ts

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

package/components/Badge/Badge.js

@@ -0,0 +1,24 @@
+import React from "react";
+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";
+const Badge = (props) => {
+    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"]);
+    return (React.createElement(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes },
+        icon && React.createElement(Icon, { svg: icon, autoWidth: true, size: iconSize }),
+        children && (React.createElement(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
+                "aria-hidden": hidden ? "true" : undefined,
+            } }, children)),
+        endIcon && React.createElement(Icon, { svg: endIcon, autoWidth: true, size: iconSize }),
+        onDismiss && (React.createElement(Actionable, { onClick: onDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel } },
+            React.createElement(Icon, { svg: IconClose, size: iconSize })))));
+};
+Badge.Container = BadgeContainer;
+export default Badge;

package/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-unit-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.--actionable:hover{opacity:.8}.root .dismiss:hover{opacity:.72}.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-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;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/components/Badge/Badge.types.d.ts

@@ -0,0 +1,39 @@
+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" | "positive" | "primary";
+    variant?: "faded" | "outline";
+};
+type WithEmpty = BaseProps & {
+    color: "critical" | "positive" | "primary";
+    children?: never;
+    variant?: never;
+};
+type WithDismissible = {
+    onDismiss: () => void;
+    dismissAriaLabel: string;
+};
+type WithoutDismissible = {
+    onDismiss?: never;
+    dismissAriaLabel?: never;
+};
+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", ContainerProps>;
+};
+export {};

package/components/Badge/Badge.types.js

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

package/components/Badge/BadgeContainer.d.ts

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

package/components/Badge/BadgeContainer.js

@@ -0,0 +1,9 @@
+import React from "react";
+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 (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }), children));
+};
+export default BadgeContainer;

package/components/Badge/index.d.ts

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

package/components/Badge/index.js

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare const _default: {
+    title: 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/components/Badge/tests/Badge.stories.js

@@ -0,0 +1,222 @@
+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" };
+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>);
+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="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("heyeye")} dismissAriaLabel="Dismiss" onClick={() => { }}>
+				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/components/Breadcrumbs/Breadcrumbs.d.ts

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

package/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,54 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import Icon from "../Icon/index.js";
+import Link from "../Link/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 BreadcrumbsItem = (props) => {
+    const { children, onClick, href, icon, disabled } = props;
+    if (!href && !onClick && !disabled) {
+        return (React.createElement(Text, { variant: "body-3", weight: "medium", color: "neutral" }, children));
+    }
+    return (React.createElement(Link, { onClick: onClick, href: href, icon: icon, disabled: disabled, variant: "plain", color: "inherit" }, children));
+};
+const Breadcrumbs = (props) => {
+    const { children, separator, color, defaultVisibleItems, 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 (React.createElement("nav", Object.assign({}, attributes, { "aria-label": ariaLabel || (attributes === null || attributes === void 0 ? void 0 : attributes["aria-label"]), className: rootClassNames }),
+        React.createElement(View, { as: "ol", direction: "row", gap: 2, align: "center" }, 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 = (React.createElement(Button.Aligner, null,
+                    React.createElement(Button, { variant: "ghost", size: "small", icon: IconDotsHorizontal, onClick: handleExpand })));
+            }
+            if (itemNode === null)
+                return null;
+            return (React.createElement(View, { as: "li", key: index, gap: 2, direction: "row", align: "center" },
+                index > 0 && (isDisplayed || isCollapseButton) && (React.createElement(Text, { color: "neutral-faded" }, separator || React.createElement(Icon, { svg: IconChevronRight, size: 3 }))),
+                React.createElement(Text, { variant: "body-3", color: color === "primary" ? "primary" : "neutral-faded" }, itemNode)));
+        }))));
+};
+Breadcrumbs.Item = BreadcrumbsItem;
+export default Breadcrumbs;

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

@@ -0,0 +1,13 @@
+import 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;
+    ariaLabel?: string;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"nav", Props>;
+};
+export type ItemProps = Pick<LinkProps, "icon" | "href" | "onClick" | "disabled" | "children">;

package/components/Breadcrumbs/Breadcrumbs.types.js

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

package/components/Breadcrumbs/index.d.ts

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

package/components/Breadcrumbs/index.js

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const color: () => React.JSX.Element;
+export declare const item: () => React.JSX.Element;
+export declare const slots: () => React.JSX.Element;
+export declare const collapsed: () => React.JSX.Element;
+export declare const edgeCases: () => React.JSX.Element;

package/components/Breadcrumbs/tests/Breadcrumbs.stories.js

@@ -0,0 +1,95 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Breadcrumbs from "../index.js";
+import Badge from "../../Badge/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default { title: "Components/Breadcrumbs" };
+export const color = () => (<Example>
+		<Example.Item title="color: neutral">
+			<Breadcrumbs ariaLabel="breadcrumb neutral">
+				<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+				<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</Example.Item>
+
+		<Example.Item title="color: primary">
+			<Breadcrumbs color="primary" ariaLabel="breadcrumb primary">
+				<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+				<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</Example.Item>
+	</Example>);
+export const item = () => (<Example>
+		<Example.Item title="disabled item">
+			<Breadcrumbs color="primary" ariaLabel="breadcrumb disabled">
+				<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }} disabled>
+					Disabled item 2
+				</Breadcrumbs.Item>
+				<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</Example.Item>
+
+		<Example.Item title="item with icon">
+			<Breadcrumbs color="primary" ariaLabel="breadcrumb with icon">
+				<Breadcrumbs.Item icon={IconZap} onClick={() => { }}>
+					Item 1
+				</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+				<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</Example.Item>
+	</Example>);
+export const slots = () => (<Example>
+		<Example.Item title="slot: separator">
+			<Breadcrumbs color="primary" separator="/" ariaLabel="breadcrumb with separator">
+				<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+				<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</Example.Item>
+
+		<Example.Item title="custom child content">
+			<Breadcrumbs ariaLabel="breadcrumb with custom children">
+				<Breadcrumbs.Item onClick={() => { }}>
+					<Badge>Item 1</Badge>
+				</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>
+					<Badge>Item 2</Badge>
+				</Breadcrumbs.Item>
+				<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</Example.Item>
+	</Example>);
+export const collapsed = () => (<Example>
+		<Example.Item title="collapsed, 3 items shown by default">
+			<Breadcrumbs defaultVisibleItems={3} ariaLabel="breadcrumb with 3 items">
+				<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 3</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 4</Breadcrumbs.Item>
+				<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</Example.Item>
+
+		<Example.Item title="collapsed, 4 items shown by default">
+			<Breadcrumbs defaultVisibleItems={4} ariaLabel="breadcrumb with 4 items">
+				<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 3</Breadcrumbs.Item>
+				<Breadcrumbs.Item onClick={() => { }}>Item 4</Breadcrumbs.Item>
+				<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</Example.Item>
+	</Example>);
+export const edgeCases = () => (<Example>
+		<Example.Item title="wraps content when multiline">
+			<Breadcrumbs ariaLabel="breadcrumb multiline">
+				{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (<Breadcrumbs.Item onClick={() => { }} key={i}>
+						Item {i}
+					</Breadcrumbs.Item>))}
+			</Breadcrumbs>
+		</Example.Item>
+	</Example>);

package/components/Button/Button.d.ts

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