@flipdish/ui-library 0.2.1

package/dist/components/atoms/Tooltip/index.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import type { ButtonProps as AriaButtonProps, TooltipProps as AriaTooltipProps, TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps } from 'react-aria-components';
+interface TooltipProps extends AriaTooltipTriggerComponentProps, Omit<AriaTooltipProps, 'children'> {
+    /**
+     * The title of the tooltip.
+     */
+    title: ReactNode;
+    /**
+     * The description of the tooltip.
+     */
+    description?: ReactNode;
+    /**
+     * Whether to show the arrow on the tooltip.
+     *
+     * @default false
+     */
+    arrow?: boolean;
+    /**
+     * Delay in milliseconds before the tooltip is shown.
+     *
+     * @default 300
+     */
+    delay?: number;
+}
+export declare const Tooltip: ({ title, description, children, arrow, delay, closeDelay, trigger, isDisabled, isOpen, defaultOpen, offset, crossOffset, placement, onOpenChange, ...tooltipProps }: TooltipProps) => import("react").JSX.Element;
+interface TooltipTriggerProps extends AriaButtonProps {
+}
+export declare const TooltipTrigger: ({ children, className, ...buttonProps }: TooltipTriggerProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Tooltip/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,YAAY,IAAI,gBAAgB,EAChC,4BAA4B,IAAI,gCAAgC,EACjE,MAAM,uBAAuB,CAAC;AAQ/B,UAAU,YAAa,SAAQ,gCAAgC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IACjG;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,OAAO,GAAI,qKAgBrB,YAAY,gCAiDd,CAAC;AAEF,UAAU,mBAAoB,SAAQ,eAAe;CAAG;AAExD,eAAO,MAAM,cAAc,GAAI,yCAAyC,mBAAmB,gCAS1F,CAAC"}

package/dist/components/atoms/Tooltip/index.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, Button } from 'react-aria-components';
+
+const Tooltip = ({ title, description, children, arrow = false, delay = 300, closeDelay = 0, trigger, isDisabled, isOpen, defaultOpen, offset = 6, crossOffset, placement = 'top', onOpenChange, ...tooltipProps }) => {
+    const isTopOrBottomLeft = ['top left', 'top end', 'bottom left', 'bottom end'].includes(placement);
+    const isTopOrBottomRight = ['top right', 'top start', 'bottom right', 'bottom start'].includes(placement);
+    // Set negative cross offset for left and right placement to visually balance the tooltip.
+    const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+    return (jsxs(TooltipTrigger$1, { trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange, children: [children, jsx(Tooltip$1, { ...tooltipProps, offset: offset, placement: placement, crossOffset: crossOffset ?? calculatedCrossOffset, className: ({ isEntering, isExiting }) => cx(isEntering && 'ease-out animate-in', isExiting && 'ease-in animate-out'), children: ({ isEntering, isExiting }) => (jsxs("div", { className: cx('z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform', description ? 'py-3' : 'py-2', isEntering &&
+                        'ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5', isExiting &&
+                        'ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5'), children: [jsx("span", { className: "text-xs font-semibold text-white", children: title }), description && jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }), arrow && (jsx(OverlayArrow, { children: jsx("svg", { viewBox: "0 0 100 100", className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180", children: jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" }) }) }))] })) })] }));
+};
+const TooltipTrigger = ({ children, className, ...buttonProps }) => {
+    return (jsx(Button, { ...buttonProps, className: (values) => cx('h-max w-max outline-hidden', typeof className === 'function' ? className(values) : className), children: children }));
+};
+
+export { Tooltip, TooltipTrigger };
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Tooltip/index.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaTooltipTrigger","_jsx","AriaTooltip","AriaOverlayArrow","AriaButton"],"mappings":";;;;MAuCa,OAAO,GAAG,CAAC,EACtB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,GAAG,EACX,UAAU,GAAG,CAAC,EACd,OAAO,EACP,UAAU,EACV,MAAM,EACN,WAAW,EACX,MAAM,GAAG,CAAC,EACV,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,YAAY,EACZ,GAAG,YAAY,EACF,KAAI;AACjB,IAAA,MAAM,iBAAiB,GAAG,CAAC,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC;AAClG,IAAA,MAAM,kBAAkB,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC;;IAEzG,MAAM,qBAAqB,GAAG,iBAAiB,GAAG,GAAG,GAAG,kBAAkB,GAAG,EAAE,GAAG,CAAC;AAEnF,IAAA,QACEA,IAAA,CAACC,gBAAkB,IAAO,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAA,QAAA,EAAA,CAChG,QAAQ,EAETC,GAAA,CAACC,SAAW,EAAA,EAAA,GACN,YAAY,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,IAAI,qBAAqB,EACjD,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,UAAU,IAAI,qBAAqB,EAAE,SAAS,IAAI,qBAAqB,CAAC,EAAA,QAAA,EAEpH,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,MACzBH,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,gJAAgJ,EAChJ,WAAW,GAAG,MAAM,GAAG,MAAM,EAE7B,UAAU;AACR,wBAAA,gNAAgN,EAClN,SAAS;wBACP,8MAA8M,CACjN,aAEDE,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,EAEhE,WAAW,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAE,WAAW,EAAA,CAAQ,EAEtG,KAAK,KACJA,GAAA,CAACE,YAAgB,EAAA,EAAA,QAAA,EAEfF,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,aAAa,EACrB,SAAS,EAAC,mJAAmJ,EAAA,QAAA,EAE7JA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,mDAAmD,EAAA,CAAG,GAC1D,EAAA,CACW,CACpB,IACG,CACP,EAAA,CACW,CAAA,EAAA,CACK;AAEzB;AAIO,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,WAAW,EAAuB,KAAI;AAC7F,IAAA,QACEA,GAAA,CAACG,MAAU,EAAA,EAAA,GACL,WAAW,EACf,SAAS,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,4BAA4B,EAAE,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,YAEvH,QAAQ,EAAA,CACE;AAEjB;;;;"}

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
+var RadioButton = require('@flipdish/ui-library/components/atoms/RadioButton');
+var Breadcrumbs = require('@flipdish/ui-library/components/molecules/Breadcrumbs');
+var Dropdown = require('@flipdish/ui-library/components/molecules/Dropdown');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+
+const BreadcrumbAccountItem = ({ items, selectedKey, onSelectionChange }) => {
+    const context = React.useContext(Breadcrumbs.BreadcrumbsContext);
+    const divider = context.divider || 'chevron';
+    const selectedAccount = items.find((item) => item.id === selectedKey);
+    return (jsxRuntime.jsx(reactAriaComponents.Breadcrumb, { className: "flex items-center gap-1.5 md:gap-2", children: ({ isCurrent }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Dropdown.Dropdown.Root, { children: [jsxRuntime.jsxs(reactAriaComponents.Button, { className: ({ isPressed, isFocusVisible }) => cx.cx('flex cursor-pointer items-center gap-1.5 rounded-lg outline-0 outline-offset-2 outline-focus-ring', (isPressed || isFocusVisible) && 'outline-2'), children: [jsxRuntime.jsx("div", { className: "flex rounded-lg bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsxRuntime.jsx(Avatar.Avatar, { size: "xs", src: selectedAccount?.avatar, className: "shadow-md", contentClassName: "rounded-md before:hidden" }) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-primary", children: selectedAccount?.name }), jsxRuntime.jsx(uiIcons.ChevronSelectorVertical, { className: "size-3 shrink-0 stroke-3 text-fg-quaternary" })] }), jsxRuntime.jsx(Dropdown.Dropdown.Popover, { className: "w-62", placement: "bottom left", children: jsxRuntime.jsx(Dropdown.Dropdown.Menu, { disallowEmptySelection: true, selectionMode: "single", selectedKeys: [selectedKey], onSelectionChange: (keys) => onSelectionChange(Array.from(keys).join()), className: "flex flex-col gap-1 px-1.5 py-1.5", children: items.map((account) => (jsxRuntime.jsx(reactAriaComponents.MenuItem, { id: account.id, textValue: account.name, className: (state) => cx.cx('relative w-full cursor-pointer rounded-md px-2 py-2 text-left outline-0 outline-offset-2 outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus:z-10 focus-visible:outline-2', state.isSelected && 'bg-primary_hover'), children: ({ isSelected }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("figure", { className: "group flex min-w-0 flex-1 items-center gap-1.5", children: [jsxRuntime.jsx("div", { className: "flex rounded-[10px] bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsxRuntime.jsx(Avatar.Avatar, { size: "sm", src: account.avatar, className: "shadow-md", contentClassName: "rounded-lg before:hidden" }) }), jsxRuntime.jsxs("figcaption", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-primary", children: account.name }), jsxRuntime.jsx("p", { className: "truncate text-sm text-tertiary", children: account.email })] })] }), jsxRuntime.jsx(RadioButton.RadioButtonBase, { isSelected: isSelected, className: "absolute top-2 right-2" })] })) }, account.id))) }) })] }), !isCurrent &&
+                    (divider === 'slash' ? (jsxRuntime.jsx(uiIcons.SlashDivider, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })) : (jsxRuntime.jsx(uiIcons.ChevronRight, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })))] })) }));
+};
+
+exports.BreadcrumbAccountItem = BreadcrumbAccountItem;
+//# sourceMappingURL=breadcrumb-account-item.cjs.map

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-account-item.cjs","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-account-item.tsx"],"sourcesContent":[null],"names":["useContext","BreadcrumbsContext","_jsx","AriaBreadcrumb","_jsxs","_Fragment","Dropdown","AriaButton","cx","Avatar","ChevronSelectorVertical","AriaMenuItem","RadioButtonBase","SlashDivider","ChevronRight"],"mappings":"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"}

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.d.ts

@@ -0,0 +1,13 @@
+export interface BreadcrumbAccountItemData {
+    id: string;
+    name: string;
+    email: string;
+    avatar: string;
+}
+export interface BreadcrumbAccountItemProps {
+    items: BreadcrumbAccountItemData[];
+    selectedKey: string;
+    onSelectionChange: (key: string) => void;
+}
+export declare const BreadcrumbAccountItem: ({ items, selectedKey, onSelectionChange }: BreadcrumbAccountItemProps) => import("react").JSX.Element;
+//# sourceMappingURL=breadcrumb-account-item.d.ts.map

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-account-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-account-item.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,yBAAyB,EAAE,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,qBAAqB,GAAI,2CAA2C,0BAA0B,gCA4E1G,CAAC"}

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronSelectorVertical, SlashDivider, ChevronRight } from '@flipdish/ui-icons';
+import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
+import { RadioButtonBase } from '@flipdish/ui-library/components/atoms/RadioButton';
+import { BreadcrumbsContext } from '@flipdish/ui-library/components/molecules/Breadcrumbs';
+import { Dropdown } from '@flipdish/ui-library/components/molecules/Dropdown';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useContext } from 'react';
+import { Breadcrumb, Button, MenuItem } from 'react-aria-components';
+
+const BreadcrumbAccountItem = ({ items, selectedKey, onSelectionChange }) => {
+    const context = useContext(BreadcrumbsContext);
+    const divider = context.divider || 'chevron';
+    const selectedAccount = items.find((item) => item.id === selectedKey);
+    return (jsx(Breadcrumb, { className: "flex items-center gap-1.5 md:gap-2", children: ({ isCurrent }) => (jsxs(Fragment, { children: [jsxs(Dropdown.Root, { children: [jsxs(Button, { className: ({ isPressed, isFocusVisible }) => cx('flex cursor-pointer items-center gap-1.5 rounded-lg outline-0 outline-offset-2 outline-focus-ring', (isPressed || isFocusVisible) && 'outline-2'), children: [jsx("div", { className: "flex rounded-lg bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsx(Avatar, { size: "xs", src: selectedAccount?.avatar, className: "shadow-md", contentClassName: "rounded-md before:hidden" }) }), jsx("span", { className: "text-sm font-semibold text-primary", children: selectedAccount?.name }), jsx(ChevronSelectorVertical, { className: "size-3 shrink-0 stroke-3 text-fg-quaternary" })] }), jsx(Dropdown.Popover, { className: "w-62", placement: "bottom left", children: jsx(Dropdown.Menu, { disallowEmptySelection: true, selectionMode: "single", selectedKeys: [selectedKey], onSelectionChange: (keys) => onSelectionChange(Array.from(keys).join()), className: "flex flex-col gap-1 px-1.5 py-1.5", children: items.map((account) => (jsx(MenuItem, { id: account.id, textValue: account.name, className: (state) => cx('relative w-full cursor-pointer rounded-md px-2 py-2 text-left outline-0 outline-offset-2 outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover focus:z-10 focus-visible:outline-2', state.isSelected && 'bg-primary_hover'), children: ({ isSelected }) => (jsxs(Fragment, { children: [jsxs("figure", { className: "group flex min-w-0 flex-1 items-center gap-1.5", children: [jsx("div", { className: "flex rounded-[10px] bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsx(Avatar, { size: "sm", src: account.avatar, className: "shadow-md", contentClassName: "rounded-lg before:hidden" }) }), jsxs("figcaption", { className: "min-w-0 flex-1", children: [jsx("p", { className: "text-sm font-semibold text-primary", children: account.name }), jsx("p", { className: "truncate text-sm text-tertiary", children: account.email })] })] }), jsx(RadioButtonBase, { isSelected: isSelected, className: "absolute top-2 right-2" })] })) }, account.id))) }) })] }), !isCurrent &&
+                    (divider === 'slash' ? (jsx(SlashDivider, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })) : (jsx(ChevronRight, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })))] })) }));
+};
+
+export { BreadcrumbAccountItem };
+//# sourceMappingURL=breadcrumb-account-item.js.map

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-account-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-account-item.js","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-account-item.tsx"],"sourcesContent":[null],"names":["_jsx","AriaBreadcrumb","_jsxs","_Fragment","AriaButton","AriaMenuItem"],"mappings":"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"}

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var isReactComponent = require('@flipdish/ui-library/utilities/isReactComponent');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var index = require('../index.cjs');
+
+const baseStyles = {
+    text: {
+        root: '',
+        icon: 'text-fg-quaternary group-hover:text-fg-quaternary_hover',
+        label: 'text-quaternary group-hover:text-tertiary_hover',
+        current: {
+            root: '',
+            icon: 'text-fg-brand-primary group-hover:text-fg-brand-primary',
+            label: 'text-brand-secondary group-hover:text-brand-secondary',
+        },
+    },
+    button: {
+        root: 'p-1 hover:bg-primary_hover',
+        icon: 'text-fg-quaternary group-hover:text-fg-quaternary_hover',
+        label: 'px-1 text-quaternary group-hover:text-tertiary_hover',
+        current: { root: 'bg-primary_hover', icon: 'text-fg-quaternary_hover', label: 'text-fg-tertiary_hover' },
+    },
+};
+const BreadcrumbBase = ({ href, children, icon: Icon, type = 'text', current, className, ...otherProps }) => {
+    return (jsxRuntime.jsxs(reactAriaComponents.Link, { ...otherProps, href: href, className: (state) => cx.cx('group inline-flex items-center justify-center gap-1 rounded-md outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 in-current:max-w-full', baseStyles[type].root, current && baseStyles[type].current.root, (href || otherProps.onClick) && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: [isReactComponent.isReactComponent(Icon) && (jsxRuntime.jsx(Icon, { className: cx.cx('size-5 transition-inherit-all', baseStyles[type].icon, current && baseStyles[type].current.icon) })), React.isValidElement(Icon) && Icon, children && (jsxRuntime.jsx("span", { className: cx.cx('text-sm font-semibold whitespace-nowrap transition-inherit-all in-current:truncate', baseStyles[type].label, current && baseStyles[type].current.label), children: children }))] }));
+};
+const BreadcrumbItem = ({ href, icon, divider, type, isEllipsis, children, onClick, avatarSrc, className, ...otherProps }) => {
+    const context = React.useContext(index.BreadcrumbsContext);
+    type = context.type || 'text';
+    divider = context.divider || 'chevron';
+    return (jsxRuntime.jsx(reactAriaComponents.Breadcrumb, { ...otherProps, className: cx.cx('flex items-center current:overflow-hidden', avatarSrc ? 'gap-1.5 md:gap-2' : type === 'text' || type === 'text-line' ? 'gap-1.5 md:gap-2' : 'gap-0.5 md:gap-1', className), children: ({ isCurrent }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [avatarSrc ? (jsxRuntime.jsxs(reactAriaComponents.Link, { href: href, className: ({ isPressed, isFocusVisible }) => cx.cx('flex cursor-pointer items-center gap-1.5 rounded-lg outline-0 outline-offset-2 outline-focus-ring', (isPressed || isFocusVisible) && 'outline-2'), children: [jsxRuntime.jsx("div", { className: "flex rounded-lg bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsxRuntime.jsx(Avatar.Avatar, { size: "xs", src: avatarSrc, className: "shadow-md", contentClassName: "rounded-md before:hidden" }) }), children && jsxRuntime.jsx("span", { className: "text-sm font-semibold text-primary", children: children })] })) : isEllipsis ? (jsxRuntime.jsx(BreadcrumbBase
+                // The label for screen readers.
+                , { "aria-label": "See all breadcrumb items", type: type === 'text-line' ? 'text' : type, onClick: onClick, children: "..." })) : (jsxRuntime.jsx(BreadcrumbBase, { href: href, icon: icon, current: isCurrent, type: type === 'text-line' ? 'text' : type, onClick: onClick, children: children })), !isCurrent &&
+                    (divider === 'slash' ? (jsxRuntime.jsx(uiIcons.SlashDivider, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })) : (jsxRuntime.jsx(uiIcons.ChevronRight, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })))] })) }));
+};
+
+exports.BreadcrumbItem = BreadcrumbItem;
+//# sourceMappingURL=breadcrumb-item.cjs.map

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-item.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaLink","cx","isReactComponent","_jsx","isValidElement","useContext","BreadcrumbsContext","AriaBreadcrumb","_Fragment","Avatar","SlashDivider","ChevronRight"],"mappings":"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"}

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts

@@ -0,0 +1,19 @@
+import { type FC, type ReactNode } from 'react';
+import { type BreadcrumbProps as AriaBreadcrumbProps } from 'react-aria-components';
+import { type BreadcrumbType } from '../index';
+export interface BreadcrumbItemProps extends AriaBreadcrumbProps {
+    href?: string;
+    divider?: 'chevron' | 'slash';
+    type?: BreadcrumbType;
+    isEllipsis?: boolean;
+    children?: ReactNode;
+    className?: string;
+    icon?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** Avatar image URL. Renders an avatar-in-ring instead of the default icon + label. */
+    avatarSrc?: string;
+    onClick?: () => void;
+}
+export declare const BreadcrumbItem: ({ href, icon, divider, type, isEllipsis, children, onClick, avatarSrc, className, ...otherProps }: BreadcrumbItemProps) => import("react").JSX.Element;
+//# sourceMappingURL=breadcrumb-item.d.ts.map

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-item.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,EAAE,EAAkB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAC5E,OAAO,EAEL,KAAK,eAAe,IAAI,mBAAmB,EAG5C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AA+DnE,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IAC9C,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,GAAI,mGAW5B,mBAAmB,gCA0DrB,CAAC"}

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SlashDivider, ChevronRight } from '@flipdish/ui-icons';
+import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { isReactComponent } from '@flipdish/ui-library/utilities/isReactComponent';
+import { useContext, isValidElement } from 'react';
+import { Breadcrumb, Link } from 'react-aria-components';
+import { BreadcrumbsContext } from '../index.js';
+
+const baseStyles = {
+    text: {
+        root: '',
+        icon: 'text-fg-quaternary group-hover:text-fg-quaternary_hover',
+        label: 'text-quaternary group-hover:text-tertiary_hover',
+        current: {
+            root: '',
+            icon: 'text-fg-brand-primary group-hover:text-fg-brand-primary',
+            label: 'text-brand-secondary group-hover:text-brand-secondary',
+        },
+    },
+    button: {
+        root: 'p-1 hover:bg-primary_hover',
+        icon: 'text-fg-quaternary group-hover:text-fg-quaternary_hover',
+        label: 'px-1 text-quaternary group-hover:text-tertiary_hover',
+        current: { root: 'bg-primary_hover', icon: 'text-fg-quaternary_hover', label: 'text-fg-tertiary_hover' },
+    },
+};
+const BreadcrumbBase = ({ href, children, icon: Icon, type = 'text', current, className, ...otherProps }) => {
+    return (jsxs(Link, { ...otherProps, href: href, className: (state) => cx('group inline-flex items-center justify-center gap-1 rounded-md outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 in-current:max-w-full', baseStyles[type].root, current && baseStyles[type].current.root, (href || otherProps.onClick) && 'cursor-pointer', typeof className === 'function' ? className(state) : className), children: [isReactComponent(Icon) && (jsx(Icon, { className: cx('size-5 transition-inherit-all', baseStyles[type].icon, current && baseStyles[type].current.icon) })), isValidElement(Icon) && Icon, children && (jsx("span", { className: cx('text-sm font-semibold whitespace-nowrap transition-inherit-all in-current:truncate', baseStyles[type].label, current && baseStyles[type].current.label), children: children }))] }));
+};
+const BreadcrumbItem = ({ href, icon, divider, type, isEllipsis, children, onClick, avatarSrc, className, ...otherProps }) => {
+    const context = useContext(BreadcrumbsContext);
+    type = context.type || 'text';
+    divider = context.divider || 'chevron';
+    return (jsx(Breadcrumb, { ...otherProps, className: cx('flex items-center current:overflow-hidden', avatarSrc ? 'gap-1.5 md:gap-2' : type === 'text' || type === 'text-line' ? 'gap-1.5 md:gap-2' : 'gap-0.5 md:gap-1', className), children: ({ isCurrent }) => (jsxs(Fragment, { children: [avatarSrc ? (jsxs(Link, { href: href, className: ({ isPressed, isFocusVisible }) => cx('flex cursor-pointer items-center gap-1.5 rounded-lg outline-0 outline-offset-2 outline-focus-ring', (isPressed || isFocusVisible) && 'outline-2'), children: [jsx("div", { className: "flex rounded-lg bg-primary p-0.5 ring-[0.5px] ring-secondary ring-inset", children: jsx(Avatar, { size: "xs", src: avatarSrc, className: "shadow-md", contentClassName: "rounded-md before:hidden" }) }), children && jsx("span", { className: "text-sm font-semibold text-primary", children: children })] })) : isEllipsis ? (jsx(BreadcrumbBase
+                // The label for screen readers.
+                , { "aria-label": "See all breadcrumb items", type: type === 'text-line' ? 'text' : type, onClick: onClick, children: "..." })) : (jsx(BreadcrumbBase, { href: href, icon: icon, current: isCurrent, type: type === 'text-line' ? 'text' : type, onClick: onClick, children: children })), !isCurrent &&
+                    (divider === 'slash' ? (jsx(SlashDivider, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })) : (jsx(ChevronRight, { className: "size-4 shrink-0 stroke-[2.25px] text-utility-neutral-300" })))] })) }));
+};
+
+export { BreadcrumbItem };
+//# sourceMappingURL=breadcrumb-item.js.map

package/dist/components/molecules/Breadcrumbs/components/breadcrumb-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.js","sources":["../../../../../src/components/molecules/Breadcrumbs/components/breadcrumb-item.tsx"],"sourcesContent":[null],"names":["_jsxs","AriaLink","_jsx","AriaBreadcrumb","_Fragment"],"mappings":"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"}

package/dist/components/molecules/Breadcrumbs/index.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var breadcrumbAccountItem = require('./components/breadcrumb-account-item.cjs');
+var breadcrumbItem = require('./components/breadcrumb-item.cjs');
+
+const BreadcrumbsContext = React.createContext({
+    divider: 'chevron',
+    type: 'text',
+});
+const styles = {
+    text: 'gap-1.5 md:gap-2',
+    'text-line': 'pl-2 gap-1.5 md:gap-2 py-2 after:pointer-events-none after:absolute after:inset-0 after:border-b after:border-t after:border-secondary',
+    button: 'gap-0.5 md:gap-1',
+};
+const Breadcrumbs = ({ children, divider = 'chevron', type = 'text', className, maxVisibleItems = 4 }) => {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    const visibleItems = (() => {
+        const childrenArray = React.Children.toArray(children);
+        if (!maxVisibleItems || childrenArray.length <= maxVisibleItems || isExpanded) {
+            return childrenArray;
+        }
+        const firstItems = childrenArray.slice(0, Math.ceil(maxVisibleItems / 2));
+        const lastItems = childrenArray.slice(-Math.floor((maxVisibleItems - 1) / 2));
+        const ellipsisItem = jsxRuntime.jsx(breadcrumbItem.BreadcrumbItem, { isEllipsis: true, divider: divider, type: type, onClick: () => setIsExpanded(true) }, "ellipsis");
+        return [...firstItems, ellipsisItem, ...lastItems];
+    })();
+    return (jsxRuntime.jsx("nav", { "aria-label": "Breadcrumbs", className: cx.cx('min-w-0', className), children: jsxRuntime.jsx(BreadcrumbsContext.Provider, { value: { divider, type }, children: jsxRuntime.jsx(reactAriaComponents.Breadcrumbs, { className: cx.cx('relative flex', styles[type]), children: visibleItems }) }) }));
+};
+Breadcrumbs.Item = breadcrumbItem.BreadcrumbItem;
+Breadcrumbs.AccountItem = breadcrumbAccountItem.BreadcrumbAccountItem;
+
+exports.Breadcrumbs = Breadcrumbs;
+exports.BreadcrumbsContext = BreadcrumbsContext;
+//# sourceMappingURL=index.cjs.map

package/dist/components/molecules/Breadcrumbs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Breadcrumbs/index.tsx"],"sourcesContent":[null],"names":["createContext","useState","_jsx","BreadcrumbItem","cx","AriaBreadcrumbs","BreadcrumbAccountItem"],"mappings":";;;;;;;;;AAUO,MAAM,kBAAkB,GAAGA,mBAAa,CAAyD;AACtG,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,IAAI,EAAE,MAAM;AACb,CAAA;AAeD,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,kBAAkB;AACxB,IAAA,WAAW,EACT,wIAAwI;AAC1I,IAAA,MAAM,EAAE,kBAAkB;CAC3B;AAED,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,EAAE,eAAe,GAAG,CAAC,EAAoB,KAAI;IACzH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAEnD,IAAA,MAAM,YAAY,GAAG,CAAC,MAAK;QACzB,MAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;QAEtD,IAAI,CAAC,eAAe,IAAI,aAAa,CAAC,MAAM,IAAI,eAAe,IAAI,UAAU,EAAE;AAC7E,YAAA,OAAO,aAAa;QACtB;AAEA,QAAA,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QACzE,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7E,MAAM,YAAY,GAAGC,cAAA,CAACC,6BAAc,EAAA,EAAC,UAAU,EAAA,IAAA,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC,IAAI,CAAC,EAAA,EAAM,UAAU,CAAG;QAEnI,OAAO,CAAC,GAAG,UAAU,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IACpD,CAAC,GAAG;IAEJ,QACED,sCAAgB,aAAa,EAAC,SAAS,EAAEE,KAAE,CAAC,SAAS,EAAE,SAAS,CAAC,EAAA,QAAA,EAC/DF,eAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAA,QAAA,EACnDA,eAACG,+BAAe,EAAA,EAAC,SAAS,EAAED,KAAE,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAA,QAAA,EAAG,YAAY,EAAA,CAAmB,EAAA,CACnE,EAAA,CAC1B;AAEV;AAEA,WAAW,CAAC,IAAI,GAAGD,6BAAc;AACjC,WAAW,CAAC,WAAW,GAAGG,2CAAqB;;;;;"}

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

@@ -0,0 +1,25 @@
+import React, { type ReactNode } from 'react';
+export type BreadcrumbType = 'text' | 'text-line' | 'button';
+export declare const BreadcrumbsContext: React.Context<{
+    divider: "chevron" | "slash";
+    type: BreadcrumbType;
+}>;
+interface BreadcrumbsProps {
+    divider?: 'chevron' | 'slash';
+    children: ReactNode;
+    type?: BreadcrumbType;
+    className?: string;
+    /**
+     * The maximum number of visible items. If the number of items
+     * exceeds this value, the breadcrumbs will collapse into a single
+     * item with an ellipsis that can be expanded.
+     */
+    maxVisibleItems?: number;
+}
+declare const Breadcrumbs: {
+    ({ children, divider, type, className, maxVisibleItems }: BreadcrumbsProps): React.JSX.Element;
+    Item: ({ href, icon, divider, type, isEllipsis, children, onClick, avatarSrc, className, ...otherProps }: import("./components/breadcrumb-item").BreadcrumbItemProps) => React.JSX.Element;
+    AccountItem: ({ items, selectedKey, onSelectionChange }: import("./components/breadcrumb-account-item").BreadcrumbAccountItemProps) => React.JSX.Element;
+};
+export { Breadcrumbs };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAiB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAKvE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE7D,eAAO,MAAM,kBAAkB;aAA4B,SAAS,GAAG,OAAO;UAAQ,cAAc;EAGlG,CAAC;AAEH,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AASD,QAAA,MAAM,WAAW;8DAAsF,gBAAgB;;;CAwBtH,CAAC;AAKF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/molecules/Breadcrumbs/index.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import React, { createContext, useState } from 'react';
+import { Breadcrumbs as Breadcrumbs$1 } from 'react-aria-components';
+import { BreadcrumbAccountItem } from './components/breadcrumb-account-item.js';
+import { BreadcrumbItem } from './components/breadcrumb-item.js';
+
+const BreadcrumbsContext = createContext({
+    divider: 'chevron',
+    type: 'text',
+});
+const styles = {
+    text: 'gap-1.5 md:gap-2',
+    'text-line': 'pl-2 gap-1.5 md:gap-2 py-2 after:pointer-events-none after:absolute after:inset-0 after:border-b after:border-t after:border-secondary',
+    button: 'gap-0.5 md:gap-1',
+};
+const Breadcrumbs = ({ children, divider = 'chevron', type = 'text', className, maxVisibleItems = 4 }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const visibleItems = (() => {
+        const childrenArray = React.Children.toArray(children);
+        if (!maxVisibleItems || childrenArray.length <= maxVisibleItems || isExpanded) {
+            return childrenArray;
+        }
+        const firstItems = childrenArray.slice(0, Math.ceil(maxVisibleItems / 2));
+        const lastItems = childrenArray.slice(-Math.floor((maxVisibleItems - 1) / 2));
+        const ellipsisItem = jsx(BreadcrumbItem, { isEllipsis: true, divider: divider, type: type, onClick: () => setIsExpanded(true) }, "ellipsis");
+        return [...firstItems, ellipsisItem, ...lastItems];
+    })();
+    return (jsx("nav", { "aria-label": "Breadcrumbs", className: cx('min-w-0', className), children: jsx(BreadcrumbsContext.Provider, { value: { divider, type }, children: jsx(Breadcrumbs$1, { className: cx('relative flex', styles[type]), children: visibleItems }) }) }));
+};
+Breadcrumbs.Item = BreadcrumbItem;
+Breadcrumbs.AccountItem = BreadcrumbAccountItem;
+
+export { Breadcrumbs, BreadcrumbsContext };
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/Breadcrumbs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Breadcrumbs/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaBreadcrumbs"],"mappings":";;;;;;;AAUO,MAAM,kBAAkB,GAAG,aAAa,CAAyD;AACtG,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,IAAI,EAAE,MAAM;AACb,CAAA;AAeD,MAAM,MAAM,GAAG;AACb,IAAA,IAAI,EAAE,kBAAkB;AACxB,IAAA,WAAW,EACT,wIAAwI;AAC1I,IAAA,MAAM,EAAE,kBAAkB;CAC3B;AAED,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,EAAE,eAAe,GAAG,CAAC,EAAoB,KAAI;IACzH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEnD,IAAA,MAAM,YAAY,GAAG,CAAC,MAAK;QACzB,MAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC;QAEtD,IAAI,CAAC,eAAe,IAAI,aAAa,CAAC,MAAM,IAAI,eAAe,IAAI,UAAU,EAAE;AAC7E,YAAA,OAAO,aAAa;QACtB;AAEA,QAAA,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QACzE,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7E,MAAM,YAAY,GAAGA,GAAA,CAAC,cAAc,EAAA,EAAC,UAAU,EAAA,IAAA,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC,IAAI,CAAC,EAAA,EAAM,UAAU,CAAG;QAEnI,OAAO,CAAC,GAAG,UAAU,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IACpD,CAAC,GAAG;IAEJ,QACEA,2BAAgB,aAAa,EAAC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,EAAA,QAAA,EAC/DA,IAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAA,QAAA,EACnDA,IAACC,aAAe,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAA,QAAA,EAAG,YAAY,EAAA,CAAmB,EAAA,CACnE,EAAA,CAC1B;AAEV;AAEA,WAAW,CAAC,IAAI,GAAG,cAAc;AACjC,WAAW,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/dist/components/molecules/ButtonGroup/index.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var isReactComponent = require('@flipdish/ui-library/utilities/isReactComponent');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+
+const styles = cx.sortCx({
+    common: {
+        root: [
+            'group/button-group inline-flex h-max cursor-pointer items-center bg-primary font-semibold whitespace-nowrap text-secondary shadow-skeuomorphic ring-1 ring-primary outline-brand transition duration-100 ease-linear ring-inset',
+            // Hover and focus styles
+            'hover:bg-primary_hover hover:text-secondary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2',
+            // Disabled styles
+            'disabled:cursor-not-allowed disabled:text-secondary/50 disabled:*:opacity-50',
+            // Selected styles
+            'selected:bg-primary_hover selected:text-secondary_hover',
+        ].join(' '),
+        icon: 'pointer-events-none text-fg-quaternary transition-[inherit] group-hover/button-group:text-fg-quaternary_hover group-selected/button-group:text-fg-quaternary_hover',
+    },
+    sizes: {
+        sm: {
+            root: 'gap-1.5 px-3.5 py-2 text-sm not-last:pr-[calc(calc(var(--spacing)*3.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3 data-icon-only:px-2.5',
+            icon: 'size-5',
+        },
+        md: {
+            root: 'gap-1.5 px-4 py-2.5 text-sm not-last:pr-[calc(calc(var(--spacing)*4)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3.5 data-icon-only:px-3',
+            icon: 'size-5',
+        },
+        lg: {
+            root: 'gap-2 px-4.5 py-2.5 text-md not-last:pr-[calc(calc(var(--spacing)*4.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-4 data-icon-only:px-3.5',
+            icon: 'size-5',
+        },
+    },
+});
+const ButtonGroupContext = React.createContext({ size: 'md' });
+/**
+ * A single selectable button within a `ButtonGroup`, supporting leading/trailing icons.
+ *
+ * @summary single item within a button group
+ */
+const ButtonGroupItem = ({ iconLeading: IconLeading, iconTrailing: IconTrailing, children, className, ...otherProps }) => {
+    const context = React.useContext(ButtonGroupContext);
+    if (!context) {
+        throw new Error('ButtonGroupItem must be used within a ButtonGroup component');
+    }
+    const { size } = context;
+    const isIcon = (IconLeading || IconTrailing) && !children;
+    return (jsxRuntime.jsxs(reactAriaComponents.ToggleButton, { ...otherProps, "data-icon-only": isIcon ? true : undefined, "data-icon-leading": IconLeading ? true : undefined, className: cx.cx(styles.common.root, styles.sizes[size].root, className), children: [isReactComponent.isReactComponent(IconLeading) && jsxRuntime.jsx(IconLeading, { className: cx.cx(styles.common.icon, styles.sizes[size].icon) }), React.isValidElement(IconLeading) && IconLeading, children, isReactComponent.isReactComponent(IconTrailing) && jsxRuntime.jsx(IconTrailing, { className: cx.cx(styles.common.icon, styles.sizes[size].icon) }), React.isValidElement(IconTrailing) && IconTrailing] }));
+};
+/**
+ * A segmented set of connected buttons for single-select choices.
+ *
+ * @summary segmented set of connected buttons
+ */
+const ButtonGroup = ({ children, size = 'md', className, ...otherProps }) => {
+    return (jsxRuntime.jsx(ButtonGroupContext.Provider, { value: { size }, children: jsxRuntime.jsx(reactAriaComponents.ToggleButtonGroup, { selectionMode: "single", className: cx.cx('relative z-0 inline-flex w-max -space-x-px rounded-lg shadow-xs', className), ...otherProps, children: children }) }));
+};
+
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupItem = ButtonGroupItem;
+exports.styles = styles;
+//# sourceMappingURL=index.cjs.map

package/dist/components/molecules/ButtonGroup/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"sourcesContent":[null],"names":["sortCx","createContext","useContext","_jsxs","AriaToggleButton","cx","isReactComponent","_jsx","isValidElement","AriaToggleButtonGroup"],"mappings":";;;;;;;;AAYO,MAAM,MAAM,GAAGA,SAAM,CAAC;AAC3B,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE;YACJ,iOAAiO;;YAEjO,6HAA6H;;YAE7H,8EAA8E;;YAE9E,yDAAyD;SAC1D,CAAC,IAAI,CAAC,GAAG,CAAC;AACX,QAAA,IAAI,EAAE,oKAAoK;AAC3K,KAAA;AAED,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,gKAAgK;AACtK,YAAA,IAAI,EAAE,QAAQ;AACf,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,8JAA8J;AACpK,YAAA,IAAI,EAAE,QAAQ;AACf,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,gKAAgK;AACtK,YAAA,IAAI,EAAE,QAAQ;AACf,SAAA;AACF,KAAA;AACF,CAAA;AAID,MAAM,kBAAkB,GAAGC,mBAAa,CAAuB,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAS9E;;;;AAIG;MACU,eAAe,GAAG,CAAC,EAC9B,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EAC2B,KAAI;AAC5C,IAAA,MAAM,OAAO,GAAGC,gBAAU,CAAC,kBAAkB,CAAC;IAE9C,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC;IAChF;AAEA,IAAA,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO;IAExB,MAAM,MAAM,GAAG,CAAC,WAAW,IAAI,YAAY,KAAK,CAAC,QAAQ;IAEzD,QACEC,eAAA,CAACC,gCAAgB,EAAA,EAAA,GACX,UAAU,EAAA,gBAAA,EACE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAA,mBAAA,EACtB,WAAW,GAAG,IAAI,GAAG,SAAS,EACjD,SAAS,EAAEC,KAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAEpEC,iCAAgB,CAAC,WAAW,CAAC,IAAIC,cAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAEF,KAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAC5GG,oBAAc,CAAC,WAAW,CAAC,IAAI,WAAW,EAE1C,QAAQ,EAERF,iCAAgB,CAAC,YAAY,CAAC,IAAIC,cAAA,CAAC,YAAY,EAAA,EAAC,SAAS,EAAEF,KAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAC9GG,oBAAc,CAAC,YAAY,CAAC,IAAI,YAAY,CAAA,EAAA,CAC5B;AAEvB;AAOA;;;;AAIG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAoB,KAAI;AACnG,IAAA,QACED,cAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAA,QAAA,EAC1CA,cAAA,CAACE,qCAAqB,IACpB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAEJ,KAAE,CAAC,iEAAiE,EAAE,SAAS,CAAC,EAAA,GACvF,UAAU,EAAA,QAAA,EAEb,QAAQ,EAAA,CACa,EAAA,CACI;AAElC;;;;;;"}

package/dist/components/molecules/ButtonGroup/index.d.ts

@@ -0,0 +1,51 @@
+import { type FC, type PropsWithChildren, type ReactNode, type RefAttributes } from 'react';
+import { type ToggleButtonGroupProps, type ToggleButtonProps } from 'react-aria-components';
+export declare const styles: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+    };
+};
+type ButtonSize = keyof typeof styles.sizes;
+interface ButtonGroupItemProps extends ToggleButtonProps, RefAttributes<HTMLButtonElement> {
+    iconLeading?: FC<{
+        className?: string;
+    }> | ReactNode;
+    iconTrailing?: FC<{
+        className?: string;
+    }> | ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * A single selectable button within a `ButtonGroup`, supporting leading/trailing icons.
+ *
+ * @summary single item within a button group
+ */
+export declare const ButtonGroupItem: ({ iconLeading: IconLeading, iconTrailing: IconTrailing, children, className, ...otherProps }: PropsWithChildren<ButtonGroupItemProps>) => import("react").JSX.Element;
+interface ButtonGroupProps extends Omit<ToggleButtonGroupProps, 'orientation'>, RefAttributes<HTMLDivElement> {
+    size?: ButtonSize;
+    className?: string;
+}
+/**
+ * A segmented set of connected buttons for single-select choices.
+ *
+ * @summary segmented set of connected buttons
+ */
+export declare const ButtonGroup: ({ children, size, className, ...otherProps }: ButtonGroupProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/ButtonGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,EAAE,EAAkB,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAc,MAAM,OAAO,CAAC;AACvI,OAAO,EAGL,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACvB,MAAM,uBAAuB,CAAC;AAE/B,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CA4BjB,CAAC;AAEH,KAAK,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;AAI5C,UAAU,oBAAqB,SAAQ,iBAAiB,EAAE,aAAa,CAAC,iBAAiB,CAAC;IACxF,WAAW,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IACrD,YAAY,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IACtD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,8FAM7B,iBAAiB,CAAC,oBAAoB,CAAC,gCA2BzC,CAAC;AAEF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC;IAC3G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,8CAAqD,gBAAgB,gCAYhG,CAAC"}

package/dist/components/molecules/ButtonGroup/index.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { sortCx, cx } from '@flipdish/ui-library/utilities/cx';
+import { isReactComponent } from '@flipdish/ui-library/utilities/isReactComponent';
+import { createContext, useContext, isValidElement } from 'react';
+import { ToggleButtonGroup, ToggleButton } from 'react-aria-components';
+
+const styles = sortCx({
+    common: {
+        root: [
+            'group/button-group inline-flex h-max cursor-pointer items-center bg-primary font-semibold whitespace-nowrap text-secondary shadow-skeuomorphic ring-1 ring-primary outline-brand transition duration-100 ease-linear ring-inset',
+            // Hover and focus styles
+            'hover:bg-primary_hover hover:text-secondary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2',
+            // Disabled styles
+            'disabled:cursor-not-allowed disabled:text-secondary/50 disabled:*:opacity-50',
+            // Selected styles
+            'selected:bg-primary_hover selected:text-secondary_hover',
+        ].join(' '),
+        icon: 'pointer-events-none text-fg-quaternary transition-[inherit] group-hover/button-group:text-fg-quaternary_hover group-selected/button-group:text-fg-quaternary_hover',
+    },
+    sizes: {
+        sm: {
+            root: 'gap-1.5 px-3.5 py-2 text-sm not-last:pr-[calc(calc(var(--spacing)*3.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3 data-icon-only:px-2.5',
+            icon: 'size-5',
+        },
+        md: {
+            root: 'gap-1.5 px-4 py-2.5 text-sm not-last:pr-[calc(calc(var(--spacing)*4)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3.5 data-icon-only:px-3',
+            icon: 'size-5',
+        },
+        lg: {
+            root: 'gap-2 px-4.5 py-2.5 text-md not-last:pr-[calc(calc(var(--spacing)*4.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-4 data-icon-only:px-3.5',
+            icon: 'size-5',
+        },
+    },
+});
+const ButtonGroupContext = createContext({ size: 'md' });
+/**
+ * A single selectable button within a `ButtonGroup`, supporting leading/trailing icons.
+ *
+ * @summary single item within a button group
+ */
+const ButtonGroupItem = ({ iconLeading: IconLeading, iconTrailing: IconTrailing, children, className, ...otherProps }) => {
+    const context = useContext(ButtonGroupContext);
+    if (!context) {
+        throw new Error('ButtonGroupItem must be used within a ButtonGroup component');
+    }
+    const { size } = context;
+    const isIcon = (IconLeading || IconTrailing) && !children;
+    return (jsxs(ToggleButton, { ...otherProps, "data-icon-only": isIcon ? true : undefined, "data-icon-leading": IconLeading ? true : undefined, className: cx(styles.common.root, styles.sizes[size].root, className), children: [isReactComponent(IconLeading) && jsx(IconLeading, { className: cx(styles.common.icon, styles.sizes[size].icon) }), isValidElement(IconLeading) && IconLeading, children, isReactComponent(IconTrailing) && jsx(IconTrailing, { className: cx(styles.common.icon, styles.sizes[size].icon) }), isValidElement(IconTrailing) && IconTrailing] }));
+};
+/**
+ * A segmented set of connected buttons for single-select choices.
+ *
+ * @summary segmented set of connected buttons
+ */
+const ButtonGroup = ({ children, size = 'md', className, ...otherProps }) => {
+    return (jsx(ButtonGroupContext.Provider, { value: { size }, children: jsx(ToggleButtonGroup, { selectionMode: "single", className: cx('relative z-0 inline-flex w-max -space-x-px rounded-lg shadow-xs', className), ...otherProps, children: children }) }));
+};
+
+export { ButtonGroup, ButtonGroupItem, styles };
+//# sourceMappingURL=index.js.map