reshaped 2.8.0 → 2.8.2

package/dist/components/Accordion/AccordionTrigger.js

@@ -0,0 +1,24 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Actionable from "../Actionable/index.js";
+import View from "../View/index.js";
+import Icon from "../Icon/index.js";
+import IconChevronDown from "../../icons/ChevronDown.js";
+import AccordionContext from "./Accordion.context.js";
+import s from "./Accordion.module.css";
+const AccordionTrigger = (props) => {
+    const { children } = props;
+    const { active, onToggle, triggerId, contentId, iconPosition = "end", iconSize, } = React.useContext(AccordionContext);
+    const iconClassNames = classNames(s.icon, active && s["icon--active"]);
+    const handleClick = () => {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!active);
+    };
+    const attributes = { "aria-expanded": active, "aria-controls": contentId, id: triggerId };
+    if (typeof children === "function") {
+        return _jsx(_Fragment, { children: children(Object.assign(Object.assign({}, attributes), { onClick: handleClick }), { active }) });
+    }
+    return (_jsx(Actionable, { onClick: handleClick, fullWidth: true, attributes: attributes, children: _jsxs(View, { gap: 2, direction: iconPosition === "start" ? "row-reverse" : "row", align: "center", children: [_jsx(View.Item, { grow: true, children: children }), _jsx(Icon, { size: iconSize || 4, svg: IconChevronDown, className: iconClassNames })] }) }));
+};
+export default AccordionTrigger;

package/dist/components/Accordion/AccordionUncontrolled.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Accordion.types";
+declare const AccordionUncontrolled: (props: T.UncontrolledProps) => import("react/jsx-runtime").JSX.Element;
+export default AccordionUncontrolled;

package/dist/components/Accordion/AccordionUncontrolled.js

@@ -0,0 +1,25 @@
+"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 { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import AccordionControlled from "./AccordionControlled.js";
+const AccordionUncontrolled = (props) => {
+    const { defaultActive, onToggle } = props, controlledProps = __rest(props, ["defaultActive", "onToggle"]);
+    const [active, setActive] = React.useState(defaultActive || false);
+    const handleToggle = (active) => {
+        setActive(active);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(active);
+    };
+    return _jsx(AccordionControlled, Object.assign({}, controlledProps, { onToggle: handleToggle, active: active }));
+};
+export default AccordionUncontrolled;

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

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

package/dist/components/ActionBar/ActionBar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(View, { className: rootClassNames, attributes: attributes, paddingBlock: padding || paddingBlock, paddingInline: padding || paddingInline, children: children }));
+};
+export default ActionBar;

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

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

package/dist/components/Actionable/Actionable.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 repeatRef = React.useRef(false);
+    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;
+        /**
+         * - Holding enter keep onClick getting triggered
+         * - Storybook environment is triggering onClick twice on each enter press
+         */
+        if (repeatRef.current)
+            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 handleKeyDown = (event) => {
+        const simulatingButton = rootAttributes.role === "button";
+        // These cases are handled correctly by the browsers
+        if (simulatingButton || isLink)
+            return;
+        const isSpace = event.key === " ";
+        const isEnter = event.key === "Enter";
+        if (!isSpace && !isEnter)
+            return;
+        event.preventDefault();
+        handlePress(event);
+        repeatRef.current = true;
+        requestAnimationFrame(() => {
+            repeatRef.current = false;
+        });
+    };
+    return (_jsx(TagName, Object.assign({ ref: ref }, rootAttributes, { className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children })));
+};
+export default React.forwardRef(Actionable);

package/dist/components/Alert/Alert.d.ts

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

package/dist/components/Alert/Alert.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(_Fragment, { children: [title && (_jsx(Text, { variant: "body-3", weight: "medium", as: "span", children: title })), title && children && " ", children && (_jsx(Text, { variant: "body-3", as: "span", children: children }))] }));
+        }
+        return (_jsxs(View, { gap: 1, children: [title && (_jsx(Text, { variant: "body-3", weight: "medium", children: title })), children && _jsx(Text, { variant: "body-3", children: children })] }));
+    };
+    const applyActions = (content) => {
+        if (!actionsSlot)
+            return content;
+        return (_jsxs(View, { gap: 2, direction: inline ? "row" : "column", children: [inline ? _jsx(View.Item, { grow: true, children: content }) : content, actionsSlot && (_jsx(Text, { variant: "body-3", weight: "medium", children: _jsx(View, { direction: "row", gap: 3, children: actionsSlot }) }))] }));
+    };
+    return (_jsx(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" }), children: icon ? (_jsxs(_Fragment, { children: [_jsx(Icon, { svg: icon, size: 5, color: isNeutral ? "primary" : color }), _jsx(View.Item, { grow: true, children: applyActions(renderContent()) })] })) : (applyActions(renderContent())) }));
+};
+export default Alert;

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

@@ -0,0 +1,14 @@
+import type 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" | "warning" | "positive" | "primary";
+    inline?: boolean;
+    bleed?: G.Responsive<number>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};

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

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

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,73 @@
+"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 { 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 * as keys from "../../constants/keys.js";
+const AutocompleteContext = React.createContext({});
+const Autocomplete = (props) => {
+    const { children, onChange, onItemSelect, name } = props, textFieldProps = __rest(props, ["children", "onChange", "onItemSelect", "name"]);
+    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(),
+    }, [handleOpen], { ref: inputRef });
+    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 (_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: (_a) => {
+                        var { ref } = _a, attributes = __rest(_a, ["ref"]);
+                        return (_jsx(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({}, textFieldProps.inputAttributes), { onFocus: (e) => {
+                                    var _a;
+                                    (_a = attributes.onFocus) === null || _a === void 0 ? void 0 : _a.call(attributes);
+                                    handleFocus(e);
+                                }, ref: inputRef, role: "combobox" }) })));
+                    } }), _jsx(DropdownMenu.Content, { children: 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 (_jsx(DropdownMenu.Item, Object.assign({}, menuItemProps, { attributes: Object.assign(Object.assign({}, menuItemProps.attributes), { role: "option" }), onClick: hanleClick })));
+};
+Autocomplete.Item = AutocompleteItem;
+export default Autocomplete;

package/dist/components/Avatar/Avatar.d.ts

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

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 === null || heightStyles === void 0 ? void 0 : 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: 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, children: renderContent() }));
+};
+export default Avatar;

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

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

package/dist/components/Badge/Badge.js

@@ -0,0 +1,19 @@
+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";
+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 (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, 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: onDismiss, 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/BadgeContainer.d.ts

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

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", Object.assign({}, attributes, { className: rootClassNames, children: children })));
+};
+export default BadgeContainer;

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

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

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, 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", Object.assign({}, attributes, { "aria-label": ariaLabel || (attributes === null || attributes === void 0 ? void 0 : 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 = (_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,13 @@
+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;
+    ariaLabel?: string;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"nav", Props>;
+};
+export type ItemProps = Pick<LinkProps, "icon" | "href" | "onClick" | "disabled" | "children">;

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

@@ -0,0 +1,3 @@
+import type * as T from "./Breadcrumbs.types";
+declare const BreadcrumbsItem: (props: T.ItemProps) => import("react/jsx-runtime").JSX.Element;
+export default BreadcrumbsItem;

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Text from "../Text/index.js";
+import Link from "../Link/index.js";
+const BreadcrumbsItem = (props) => {
+    const { children, onClick, href, icon, disabled } = props;
+    if (!href && !onClick && !disabled) {
+        return (_jsx(Text, { variant: "body-3", weight: "medium", color: "neutral", children: children }));
+    }
+    return (_jsx(Link, { onClick: onClick, href: href, icon: icon, disabled: disabled, variant: "plain", color: "inherit", children: children }));
+};
+export default BreadcrumbsItem;

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

@@ -0,0 +1,8 @@
+import BreadcrumbsItem from "./BreadcrumbsItem";
+type CompoundComponent = typeof Breadcrumbs & {
+    Item: typeof BreadcrumbsItem;
+};
+declare const Breadcrumbs: (props: import("./Breadcrumbs.types").Props) => import("react/jsx-runtime").JSX.Element;
+export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types";
+declare const _default: CompoundComponent;
+export default _default;

package/dist/components/Button/Button.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React 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 ButtonBase = (props, ref) => {
+    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, disabled, type, href, size = "medium", className, children, rounded, attributes, onClick, icon, endIcon, } = 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: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), type: type, onClick: onClick, href: href, ref: ref, 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")] }));
+};
+const Button = React.forwardRef(ButtonBase);
+Button.Group = ButtonGroup;
+Button.Aligner = ButtonAligner;
+export default Button;

package/dist/components/Button/ButtonAligner.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Button.types";
+declare const ButtonAligner: (props: T.AlignerProps) => import("react/jsx-runtime").JSX.Element;
+export default ButtonAligner;

package/dist/components/Button/ButtonAligner.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Aligner from "../_private/Aligner/index.js";
+import s from "./Button.module.css";
+const ButtonAligner = (props) => {
+    return (_jsx(Aligner, Object.assign({}, props, { side: props.side || props.position, className: [s.aligner, props.className] })));
+};
+export default ButtonAligner;

package/dist/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Button.types";
+declare const ButtonGroup: (props: T.GroupProps) => import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/dist/components/Button/ButtonGroup.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Button.module.css";
+const ButtonGroup = (props) => {
+    const { children, className, attributes } = props;
+    const groupClassNames = classNames(s.group, className);
+    return (_jsx("div", Object.assign({}, attributes, { className: groupClassNames, role: "group", children: children })));
+};
+export default ButtonGroup;

package/dist/components/Calendar/Calendar.d.ts

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

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CalendarControlled from "./CalendarControlled.js";
+import CalendarUncontrolled from "./CalendarUncontrolled.js";
+const Calendar = (props) => {
+    if (props.value !== undefined)
+        return _jsx(CalendarControlled, Object.assign({}, props));
+    return _jsx(CalendarUncontrolled, Object.assign({}, props));
+};
+export default Calendar;

package/dist/components/Calendar/CalendarControlled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarControlled: (props: T.ControlledProps & T.BaseProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarControlled;

package/dist/components/Calendar/CalendarControlled.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import View from "../View/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { setMonthToPrevious, setMonthToNext, setMonthTo, setYearToNext, setYearToPrevious, applyNavigationBounds, } from "./Calendar.utils.js";
+import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
+import CalendarMonth from "./CalendarMonth.js";
+import CalendarYear from "./CalendarYear.js";
+import CalendarControls from "./CalendarControls.js";
+const CalendarControlled = (props) => {
+    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, } = props;
+    const [selectionMode, setSelectionMode] = React.useState("date");
+    const [monthDate, setMonthDate] = React.useState(defaultMonth || new Date());
+    const [hoveredDate, setHoveredDate] = React.useState(null);
+    const monthTitleRef = React.useRef(null);
+    const prevSelectionModeRef = React.useRef(selectionMode);
+    const bounds = applyNavigationBounds({ date: monthDate, min, max });
+    const selectionRootRef = React.useRef(null);
+    const handlePreviousClick = () => {
+        if (selectionMode === "month") {
+            setMonthDate((prev) => setYearToPrevious(prev));
+            return;
+        }
+        setMonthDate((prev) => setMonthToPrevious(prev));
+    };
+    const handleNextClick = () => {
+        if (selectionMode === "month") {
+            setMonthDate((prev) => setYearToNext(prev));
+            return;
+        }
+        setMonthDate((prev) => setMonthToNext(prev));
+    };
+    const handleMonthTitleClick = () => {
+        setSelectionMode("month");
+    };
+    const handleMonthClick = (i) => {
+        setMonthDate((prev) => setMonthTo(prev, i));
+        setSelectionMode("date");
+    };
+    const handleDateHover = (date) => {
+        setHoveredDate(date);
+    };
+    const handleDateHoverEnd = (date) => {
+        if (hoveredDate && +hoveredDate === +date)
+            setHoveredDate(null);
+    };
+    React.useEffect(() => {
+        if (selectionMode === "date" && selectionMode !== prevSelectionModeRef.current) {
+            onNextFrame(() => {
+                var _a;
+                (_a = monthTitleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        prevSelectionModeRef.current = selectionMode;
+    }, [selectionMode]);
+    useCalendarKeyboardNavigation({
+        monthDate,
+        rootRef: selectionRootRef,
+        changeToNextMonth: handleNextClick,
+        changeToPreviousMonth: handlePreviousClick,
+        // Each row has 7 days in date selection and 3 months in month
+        verticalDelta: selectionMode === "date" ? 7 : 3,
+        min,
+        max,
+    });
+    return (_jsxs(View, { gap: 2, children: [_jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }), _jsxs(View.Item, { attributes: { ref: selectionRootRef }, children: [selectionMode === "date" && (_jsx(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel })), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
+};
+export default CalendarControlled;

package/dist/components/Calendar/CalendarControls.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarControls: (props: T.ControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarControls;