@flipdish/ui-library 0.2.1

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

@@ -0,0 +1,129 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import type { BadgeColors, BadgeTypes, BadgeTypeToColorMap, FlagTypes, IconComponentType, Sizes } from './badge.types';
+export declare const filledColors: Record<BadgeColors, {
+    root: string;
+    addon: string;
+    addonButton: string;
+}>;
+declare const withPillTypes: {
+    "pill-color": {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    color: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    modern: {
+        common: string;
+        styles: {
+            gray: {
+                root: string;
+                addon: string;
+                addonButton: string;
+            };
+        };
+    };
+};
+declare const withBadgeTypes: {
+    "pill-color": {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    color: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+            addonButton: string;
+        }>;
+    };
+    modern: {
+        common: string;
+        styles: Record<BadgeColors, {
+            root: string;
+            addon: string;
+        }>;
+    };
+};
+export type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof withPillTypes>[T];
+interface BadgeProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeColor<T>;
+    children: ReactNode;
+    className?: string;
+}
+export declare const Badge: <T extends BadgeTypes>(props: BadgeProps<T>) => import("react").JSX.Element;
+interface BadgeWithDotProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    className?: string;
+    children: ReactNode;
+}
+export declare const BadgeWithDot: <T extends BadgeTypes>(props: BadgeWithDotProps<T>) => import("react").JSX.Element;
+interface BadgeWithIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof withBadgeTypes>[T];
+    iconLeading?: IconComponentType;
+    iconTrailing?: IconComponentType;
+    children: ReactNode;
+    className?: string;
+}
+export declare const BadgeWithIcon: <T extends BadgeTypes>(props: BadgeWithIconProps<T>) => import("react").JSX.Element;
+interface BadgeWithFlagProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    flag?: FlagTypes;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+export declare const BadgeWithFlag: <T extends BadgeTypes>(props: BadgeWithFlagProps<T>) => import("react").JSX.Element;
+interface BadgeWithImageProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    imgSrc: string;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+}
+export declare const BadgeWithImage: <T extends BadgeTypes>(props: BadgeWithImageProps<T>) => import("react").JSX.Element;
+interface BadgeWithButtonProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon?: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children: ReactNode;
+    /**
+     * The label for the button.
+     */
+    buttonLabel?: string;
+    /**
+     * The click event handler for the button.
+     */
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const BadgeWithButton: <T extends BadgeTypes>(props: BadgeWithButtonProps<T>) => import("react").JSX.Element;
+interface BadgeIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon: IconComponentType;
+    color?: BadgeTypeToColorMap<typeof withPillTypes>[T];
+    children?: ReactNode;
+}
+export declare const BadgeIcon: <T extends BadgeTypes>(props: BadgeIconProps<T>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Badge/index.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,265 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { X } from '@flipdish/ui-icons';
+import { Dot } from '@flipdish/ui-library/components/atoms/Dot';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { badgeTypes } from './badge.types.js';
+
+const filledColors = {
+    gray: {
+        root: 'bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200',
+        addon: 'text-utility-neutral-500',
+        addonButton: 'hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500',
+    },
+    brand: {
+        root: 'bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200',
+        addon: 'text-utility-brand-500',
+        addonButton: 'hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500',
+    },
+    error: {
+        root: 'bg-utility-red-50 text-utility-red-700 ring-utility-red-200',
+        addon: 'text-utility-red-500',
+        addonButton: 'hover:bg-utility-red-100 text-utility-red-400 hover:text-utility-red-500',
+    },
+    warning: {
+        root: 'bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200',
+        addon: 'text-utility-yellow-500',
+        addonButton: 'hover:bg-utility-yellow-100 text-utility-yellow-400 hover:text-utility-yellow-500',
+    },
+    success: {
+        root: 'bg-utility-green-50 text-utility-green-700 ring-utility-green-200',
+        addon: 'text-utility-green-500',
+        addonButton: 'hover:bg-utility-green-100 text-utility-green-400 hover:text-utility-green-500',
+    },
+    slate: {
+        root: 'bg-utility-slate-50 text-utility-slate-700 ring-utility-slate-200',
+        addon: 'text-utility-slate-500',
+        addonButton: 'hover:bg-utility-slate-100 text-utility-slate-400 hover:text-utility-slate-500',
+    },
+    sky: {
+        root: 'bg-utility-sky-50 text-utility-sky-700 ring-utility-sky-200',
+        addon: 'text-utility-sky-500',
+        addonButton: 'hover:bg-utility-sky-100 text-utility-sky-400 hover:text-utility-sky-500',
+    },
+    blue: {
+        root: 'bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200',
+        addon: 'text-utility-blue-500',
+        addonButton: 'hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500',
+    },
+    indigo: {
+        root: 'bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200',
+        addon: 'text-utility-indigo-500',
+        addonButton: 'hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500',
+    },
+    purple: {
+        root: 'bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200',
+        addon: 'text-utility-purple-500',
+        addonButton: 'hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500',
+    },
+    pink: {
+        root: 'bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200',
+        addon: 'text-utility-pink-500',
+        addonButton: 'hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500',
+    },
+    orange: {
+        root: 'bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200',
+        addon: 'text-utility-orange-500',
+        addonButton: 'hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500',
+    },
+};
+const addonOnlyColors = Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: '', addon: value.addon }]));
+const withPillTypes = {
+    [badgeTypes.pillColor]: {
+        common: 'size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset',
+        styles: filledColors,
+    },
+    [badgeTypes.badgeColor]: {
+        common: 'size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset',
+        styles: filledColors,
+    },
+    [badgeTypes.badgeModern]: {
+        common: 'size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset shadow-xs',
+        styles: {
+            gray: {
+                root: 'bg-primary text-secondary ring-primary',
+                addon: 'text-neutral-500',
+                addonButton: 'hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500',
+            },
+        },
+    },
+};
+const withBadgeTypes = {
+    [badgeTypes.pillColor]: {
+        common: 'size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset',
+        styles: filledColors,
+    },
+    [badgeTypes.badgeColor]: {
+        common: 'size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset',
+        styles: filledColors,
+    },
+    [badgeTypes.badgeModern]: {
+        common: 'size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs',
+        styles: addonOnlyColors,
+    },
+};
+const Badge = (props) => {
+    const { type = 'pill-color', size = 'md', color = 'gray', children } = props;
+    const colors = withPillTypes[type];
+    const pillSizes = {
+        sm: 'py-0.5 px-2 text-xs font-medium',
+        md: 'py-0.5 px-2.5 text-sm font-medium',
+        lg: 'py-1 px-3 text-sm font-medium',
+    };
+    const badgeSizes = {
+        sm: 'py-0.5 px-1.5 text-xs font-medium',
+        md: 'py-0.5 px-2 text-sm font-medium',
+        lg: 'py-1 px-2.5 text-sm font-medium rounded-lg',
+    };
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+    return jsx("span", { className: cx(colors.common, sizes[type][size], colors.styles[color].root, props.className), children: children });
+};
+const BadgeWithDot = (props) => {
+    const { size = 'md', color = 'gray', type = 'pill-color', className, children } = props;
+    const colors = withBadgeTypes[type];
+    const pillSizes = {
+        sm: 'gap-1 py-0.5 pl-1.5 pr-2 text-xs font-medium',
+        md: 'gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-medium',
+        lg: 'gap-1.5 py-1 pl-2.5 pr-3 text-sm font-medium',
+    };
+    const badgeSizes = {
+        sm: 'gap-1 py-0.5 px-1.5 text-xs font-medium',
+        md: 'gap-1.5 py-0.5 px-2 text-sm font-medium',
+        lg: 'gap-1.5 py-1 px-2.5 text-sm font-medium rounded-lg',
+    };
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+    return (jsxs("span", { className: cx(colors.common, sizes[type][size], colors.styles[color].root, className), children: [jsx(Dot, { className: colors.styles[color].addon, size: "sm" }), children] }));
+};
+const BadgeWithIcon = (props) => {
+    const { size = 'md', color = 'gray', type = 'pill-color', iconLeading: IconLeading, iconTrailing: IconTrailing, children, className } = props;
+    const colors = withBadgeTypes[type];
+    const icon = IconLeading ? 'leading' : 'trailing';
+    const pillSizes = {
+        sm: {
+            trailing: 'gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium',
+            leading: 'gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium',
+        },
+        md: {
+            trailing: 'gap-1 py-0.5 pl-2.5 pr-2 text-sm font-medium',
+            leading: 'gap-1 py-0.5 pr-2.5 pl-2 text-sm font-medium',
+        },
+        lg: {
+            trailing: 'gap-1 py-1 pl-3 pr-2.5 text-sm font-medium',
+            leading: 'gap-1 py-1 pr-3 pl-2.5 text-sm font-medium',
+        },
+    };
+    const badgeSizes = {
+        sm: {
+            trailing: 'gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium',
+            leading: 'gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium',
+        },
+        md: {
+            trailing: 'gap-1 py-0.5 pl-2 pr-1.5 text-sm font-medium',
+            leading: 'gap-1 py-0.5 pr-2 pl-1.5 text-sm font-medium',
+        },
+        lg: {
+            trailing: 'gap-1 py-1 pl-2.5 pr-2 text-sm font-medium rounded-lg',
+            leading: 'gap-1 py-1 pr-2.5 pl-2 text-sm font-medium rounded-lg',
+        },
+    };
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+    return (jsxs("span", { className: cx(colors.common, sizes[type][size][icon], colors.styles[color].root, className), children: [IconLeading && jsx(IconLeading, { className: cx(colors.styles[color].addon, 'size-3 stroke-3') }), children, IconTrailing && jsx(IconTrailing, { className: cx(colors.styles[color].addon, 'size-3 stroke-3') })] }));
+};
+const BadgeWithFlag = (props) => {
+    const { size = 'md', color = 'gray', flag = 'AU', type = 'pill-color', children } = props;
+    const colors = withPillTypes[type];
+    const pillSizes = {
+        sm: 'gap-1 py-0.5 pl-0.75 pr-2 text-xs font-medium',
+        md: 'gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-medium',
+        lg: 'gap-1.5 py-1 pl-1.5 pr-3 text-sm font-medium',
+    };
+    const badgeSizes = {
+        sm: 'gap-1 py-0.5 pl-1 pr-1.5 text-xs font-medium',
+        md: 'gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-medium',
+        lg: 'gap-1.5 py-1 pl-2 pr-2.5 text-sm font-medium rounded-lg',
+    };
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+    return (jsxs("span", { className: cx(colors.common, sizes[type][size], colors.styles[color].root), children: [jsx("img", { src: `https://www.untitledui.com/images/flags/${flag}.svg`, className: "size-4 max-w-none rounded-full", alt: `${flag} flag` }), children] }));
+};
+const BadgeWithImage = (props) => {
+    const { size = 'md', color = 'gray', type = 'pill-color', imgSrc, children } = props;
+    const colors = withPillTypes[type];
+    const pillSizes = {
+        sm: 'gap-1 py-0.5 pl-0.75 pr-2 text-xs font-medium',
+        md: 'gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-medium',
+        lg: 'gap-1.5 py-1 pl-1.5 pr-3 text-sm font-medium',
+    };
+    const badgeSizes = {
+        sm: 'gap-1 py-0.5 pl-1 pr-1.5 text-xs font-medium',
+        md: 'gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-medium',
+        lg: 'gap-1.5 py-1 pl-2 pr-2.5 text-sm font-medium rounded-lg',
+    };
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+    return (jsxs("span", { className: cx(colors.common, sizes[type][size], colors.styles[color].root), children: [jsx("img", { src: imgSrc, className: "size-4 max-w-none rounded-full", alt: "Badge image" }), children] }));
+};
+const BadgeWithButton = (props) => {
+    const { size = 'md', color = 'gray', type = 'pill-color', icon: Icon = X, buttonLabel, children } = props;
+    const colors = withPillTypes[type];
+    const pillSizes = {
+        sm: 'gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-medium',
+        md: 'gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-medium',
+        lg: 'gap-0.5 py-1 pl-3 pr-1.5 text-sm font-medium',
+    };
+    const badgeSizes = {
+        sm: 'gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-medium',
+        md: 'gap-0.5 py-0.5 pl-2 pr-1 text-sm font-medium',
+        lg: 'gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-medium rounded-lg',
+    };
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+    return (jsxs("span", { className: cx(colors.common, sizes[type][size], colors.styles[color].root), children: [children, jsx("button", { type: "button", "aria-label": buttonLabel, onClick: props.onButtonClick, className: cx('flex cursor-pointer items-center justify-center p-0.5 outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2', colors.styles[color].addonButton, type === 'pill-color' ? 'rounded-full' : 'rounded-[3px]'), children: jsx(Icon, { className: "size-3 stroke-[3px] transition-inherit-all" }) })] }));
+};
+const BadgeIcon = (props) => {
+    const { size = 'md', color = 'gray', type = 'pill-color', icon: Icon } = props;
+    const colors = withPillTypes[type];
+    const pillSizes = {
+        sm: 'p-1.25',
+        md: 'p-1.5',
+        lg: 'p-2',
+    };
+    const badgeSizes = {
+        sm: 'p-1.25',
+        md: 'p-1.5',
+        lg: 'p-2 rounded-lg',
+    };
+    const sizes = {
+        [badgeTypes.pillColor]: pillSizes,
+        [badgeTypes.badgeColor]: badgeSizes,
+        [badgeTypes.badgeModern]: badgeSizes,
+    };
+    return (jsx("span", { className: cx(colors.common, sizes[type][size], colors.styles[color].root), children: jsx(Icon, { className: cx('size-3 stroke-[3px]', colors.styles[color].addon) }) }));
+};
+
+export { Badge, BadgeIcon, BadgeWithButton, BadgeWithDot, BadgeWithFlag, BadgeWithIcon, BadgeWithImage, filledColors };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","CloseX"],"mappings":"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"}

package/dist/components/atoms/Button/index.cjs

@@ -0,0 +1,164 @@
+'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 relative inline-flex h-max cursor-pointer items-center justify-center whitespace-nowrap outline-brand transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2',
+            // When button is used within `InputGroup`
+            'in-data-input-wrapper:shadow-xs in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none',
+            // Disabled styles
+            'disabled:cursor-not-allowed disabled:opacity-50 in-data-input-wrapper:disabled:opacity-100',
+            // Same as `icon` but for SSR icons that cannot be passed to the client as functions.
+            '*:data-icon:pointer-events-none *:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:transition-inherit-all',
+        ].join(' '),
+        icon: 'pointer-events-none size-5 shrink-0 transition-inherit-all',
+    },
+    sizes: {
+        xs: {
+            root: [
+                'gap-1 rounded-lg px-2.5 py-1.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2',
+                'in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5',
+                '*:data-icon:size-4 *:data-icon:stroke-[2.25px]',
+            ].join(' '),
+            linkRoot: 'gap-1 *:data-text:underline-offset-3',
+        },
+        sm: {
+            root: [
+                'gap-1 rounded-lg px-3 py-2 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2',
+                'in-data-input-wrapper:px-3.5 in-data-input-wrapper:py-2.5 in-data-input-wrapper:data-icon-only:p-2.5',
+            ].join(' '),
+            linkRoot: 'gap-1 *:data-text:underline-offset-3',
+        },
+        md: {
+            root: [
+                'gap-1 rounded-lg px-3.5 py-2.5 text-sm font-semibold before:rounded-[7px] data-icon-only:p-2.5',
+                'in-data-input-wrapper:gap-1.5 in-data-input-wrapper:px-4 in-data-input-wrapper:text-md in-data-input-wrapper:data-icon-only:p-3',
+            ].join(' '),
+            linkRoot: 'gap-1 *:data-text:underline-offset-4',
+        },
+        lg: {
+            root: 'gap-1.5 rounded-lg px-4 py-2.5 text-md font-semibold before:rounded-[7px] data-icon-only:p-3',
+            linkRoot: 'gap-1.5 *:data-text:underline-offset-4',
+        },
+        xl: {
+            root: 'gap-1.5 rounded-lg px-4.5 py-3 text-md font-semibold before:rounded-[7px] data-icon-only:p-3.5',
+            linkRoot: 'gap-1.5 *:data-text:underline-offset-4',
+        },
+    },
+    colors: {
+        primary: {
+            root: [
+                'bg-brand-solid text-white shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset hover:bg-brand-solid_hover data-loading:bg-brand-solid_hover',
+                // Inner border gradient
+                'before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%',
+                // Icon styles
+                '*:data-icon:text-white/60 hover:*:data-icon:text-white/70',
+            ].join(' '),
+        },
+        secondary: {
+            root: [
+                'bg-primary text-secondary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover',
+                // Icon styles
+                '*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover',
+            ].join(' '),
+        },
+        tertiary: {
+            root: [
+                'text-tertiary hover:bg-primary_hover hover:text-tertiary_hover data-loading:bg-primary_hover',
+                // Icon styles
+                '*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover',
+            ].join(' '),
+        },
+        'link-color': {
+            root: [
+                'justify-normal rounded p-0! text-brand-secondary hover:text-brand-secondary_hover',
+                // Inner text underline
+                '*:data-text:underline *:data-text:decoration-transparent hover:*:data-text:decoration-fg-brand-secondary_alt',
+                // Icon styles
+                '*:data-icon:text-fg-brand-secondary_alt hover:*:data-icon:text-fg-brand-secondary_hover',
+            ].join(' '),
+        },
+        'link-gray': {
+            root: [
+                'justify-normal rounded p-0! text-tertiary hover:text-tertiary_hover',
+                // Inner text underline
+                '*:data-text:underline *:data-text:decoration-transparent hover:*:data-text:decoration-fg-quaternary',
+                // Icon styles
+                '*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover',
+            ].join(' '),
+        },
+        'primary-destructive': {
+            root: [
+                'bg-error-solid text-white shadow-xs-skeuomorphic ring-1 ring-transparent outline-error ring-inset hover:bg-error-solid_hover data-loading:bg-error-solid_hover',
+                // Inner border gradient
+                'before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%',
+                // Icon styles
+                '*:data-icon:text-white/60 hover:*:data-icon:text-white/70',
+            ].join(' '),
+        },
+        'secondary-destructive': {
+            root: [
+                'bg-primary text-error-primary shadow-xs-skeuomorphic ring-1 ring-error_subtle outline-error ring-inset hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary',
+                // Icon styles
+                '*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary',
+            ].join(' '),
+        },
+        'tertiary-destructive': {
+            root: [
+                'text-error-primary outline-error hover:bg-error-primary hover:text-error-primary_hover data-loading:bg-error-primary',
+                // Icon styles
+                '*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary',
+            ].join(' '),
+        },
+        'link-destructive': {
+            root: [
+                'justify-normal rounded p-0! text-error-primary outline-error hover:text-error-primary_hover',
+                // Inner text underline
+                '*:data-text:underline *:data-text:decoration-transparent *:data-text:underline-offset-2 hover:*:data-text:decoration-current',
+                // Icon styles
+                '*:data-icon:text-fg-error-secondary hover:*:data-icon:text-fg-error-primary',
+            ].join(' '),
+        },
+    },
+});
+/**
+ * Triggers an action or navigates to a destination. Renders as a native
+ * `<button>` by default, or as an `<a>` when an `href` prop is provided.
+ * For navigation-only actions, prefer a link styled with one of the `link-*` colors.
+ *
+ * @summary action trigger or navigation control
+ */
+const Button = ({ size = 'sm', color = 'primary', children, className, noTextPadding, iconLeading: IconLeading, iconTrailing: IconTrailing, isDisabled: disabled, isLoading: loading, showTextWhileLoading, ...props }) => {
+    const href = 'href' in props ? props.href : undefined;
+    const hasChildren = children !== null && children !== undefined;
+    const isIcon = (IconLeading || IconTrailing) && !hasChildren;
+    const isLinkType = ['link-gray', 'link-color', 'link-destructive'].includes(color);
+    noTextPadding = isLinkType || noTextPadding;
+    const commonChildren = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.isValidElement(IconLeading) && IconLeading, isReactComponent.isReactComponent(IconLeading) && jsxRuntime.jsx(IconLeading, { "data-icon": "leading", className: styles.common.icon }), loading && (
+            // biome-ignore lint/a11y/noSvgWithoutTitle: This is an icon
+            jsxRuntime.jsxs("svg", { fill: "none", "data-icon": "loading", viewBox: "0 0 20 20", className: cx.cx(styles.common.icon, !showTextWhileLoading && 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'), children: [jsxRuntime.jsx("circle", { className: "stroke-current opacity-30", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2" }), jsxRuntime.jsx("circle", { className: "origin-center animate-spin stroke-current", cx: "10", cy: "10", r: "8", fill: "none", strokeWidth: "2", strokeDasharray: "12.5 50", strokeLinecap: "round" })] })), hasChildren && (jsxRuntime.jsx("span", { "data-text": true, className: cx.cx('transition-inherit-all', !noTextPadding && 'px-0.5'), children: children })), React.isValidElement(IconTrailing) && IconTrailing, isReactComponent.isReactComponent(IconTrailing) && jsxRuntime.jsx(IconTrailing, { "data-icon": "trailing", className: styles.common.icon })] }));
+    const commonProps = {
+        'data-loading': loading ? true : undefined,
+        'data-icon-only': isIcon ? true : undefined,
+        ...props,
+        isDisabled: disabled,
+        className: cx.cx(styles.common.root, styles.sizes[size].root, styles.colors[color].root, isLinkType && styles.sizes[size].linkRoot, (loading || (href && (disabled || loading))) && 'pointer-events-none', 
+        // If in `loading` state, hide everything except the loading icon (and text if `showTextWhileLoading` is true).
+        loading && (showTextWhileLoading ? '[&>*:not([data-icon=loading]):not([data-text])]:hidden' : '[&>*:not([data-icon=loading])]:invisible'), className),
+        children: commonChildren,
+    };
+    if ('href' in commonProps) {
+        return jsxRuntime.jsx(reactAriaComponents.Link, { ...commonProps, href: disabled ? undefined : href });
+    }
+    return jsxRuntime.jsx(reactAriaComponents.Button, { ...commonProps, type: commonProps.type || 'button', isPending: loading });
+};
+
+exports.Button = Button;
+exports.styles = styles;
+//# sourceMappingURL=index.cjs.map

package/dist/components/atoms/Button/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Button/index.tsx"],"sourcesContent":[null],"names":["sortCx","_jsxs","_Fragment","isValidElement","isReactComponent","_jsx","cx","AriaLink","AriaButton"],"mappings":"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"}