@flipdish/ui-library 0.2.1 → 0.3.0

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

@@ -0,0 +1,95 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+var socialLogos = require('./components/social-logos.cjs');
+
+const styles = cx.sortCx({
+    common: {
+        root: 'group disabled:stroke-fg-disabled disabled:text-fg-disabled disabled:*:text-fg-disabled relative inline-flex h-max cursor-pointer items-center justify-center font-semibold whitespace-nowrap outline-focus-ring transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed',
+        icon: 'pointer-events-none shrink-0 transition-inherit-all',
+    },
+    sizes: {
+        md: {
+            root: 'gap-2 rounded-lg px-3.5 py-2.5 text-sm before:rounded-[7px] data-icon-only:p-3',
+            icon: 'size-4',
+        },
+        lg: {
+            root: 'gap-2.5 rounded-lg px-4 py-2.5 text-md before:rounded-[7px] data-icon-only:p-3',
+            icon: 'size-5',
+        },
+    },
+    colors: {
+        gray: {
+            root: 'bg-primary text-secondary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover',
+            icon: 'text-fg-quaternary group-hover:text-fg-quaternary_hover',
+        },
+        black: {
+            root: 'bg-black text-white shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%',
+            icon: '',
+        },
+        facebook: {
+            root: 'bg-[#1877F2] text-white shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% hover:bg-[#0C63D4]',
+            icon: '',
+        },
+        dribble: {
+            root: 'bg-[#EA4C89] text-white shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% hover:bg-[#E62872]',
+            icon: '',
+        },
+    },
+});
+const SocialButton = ({ size = 'lg', theme = 'brand', social, className, children, disabled, ...otherProps }) => {
+    const href = 'href' in otherProps ? otherProps.href : undefined;
+    const Component = href ? reactAriaComponents.Link : reactAriaComponents.Button;
+    const isIconOnly = !children;
+    const socialToColor = {
+        google: 'gray',
+        facebook: 'facebook',
+        apple: 'black',
+        twitter: 'black',
+        figma: 'black',
+        dribble: 'dribble',
+    };
+    const colorStyles = theme === 'brand' ? styles.colors[socialToColor[social]] : styles.colors.gray;
+    const logos = {
+        google: socialLogos.GoogleLogo,
+        facebook: socialLogos.FacebookLogo,
+        apple: socialLogos.AppleLogo,
+        twitter: socialLogos.TwitterLogo,
+        figma: theme === 'gray' ? socialLogos.FigmaLogoOutlined : socialLogos.FigmaLogo,
+        dribble: socialLogos.DribbleLogo,
+    };
+    const Logo = logos[social];
+    let props = {};
+    if (href) {
+        props = {
+            ...otherProps,
+            href: disabled ? undefined : href,
+            // Since anchor elements do not support the `disabled` attribute and state,
+            // we need to specify `data-rac` and `data-disabled` in order to be able
+            // to use the `disabled:` selector in classes.
+            ...(disabled ? { 'data-rac': true, 'data-disabled': true } : {}),
+        };
+    }
+    else {
+        props = {
+            ...otherProps,
+            type: otherProps.type || 'button',
+            isDisabled: disabled,
+        };
+    }
+    return (jsxRuntime.jsxs(Component, { isDisabled: disabled, ...props, "data-icon-only": isIconOnly ? true : undefined, className: cx.cx(styles.common.root, styles.sizes[size].root, colorStyles.root, className), children: [jsxRuntime.jsx(Logo, { className: cx.cx(styles.common.icon, styles.sizes[size].icon, theme === 'gray'
+                    ? colorStyles.icon
+                    : theme === 'brand' && (social === 'facebook' || social === 'apple' || social === 'twitter')
+                        ? 'text-white'
+                        : theme === 'color' && (social === 'apple' || social === 'twitter')
+                            ? 'text-alpha-black'
+                            : ''), colorful: (theme === 'brand' && (social === 'google' || social === 'figma')) ||
+                    (theme === 'color' && (social === 'google' || social === 'facebook' || social === 'figma' || social === 'dribble')) ||
+                    undefined }), children] }));
+};
+
+exports.SocialButton = SocialButton;
+exports.styles = styles;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/SocialButton/index.tsx"],"sourcesContent":[null],"names":["sortCx","AriaLink","AriaButton","GoogleLogo","FacebookLogo","AppleLogo","TwitterLogo","FigmaLogoOutlined","FigmaLogo","DribbleLogo","_jsxs","cx","_jsx"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+export declare const styles: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+    };
+    colors: {
+        gray: {
+            root: string;
+            icon: string;
+        };
+        black: {
+            root: string;
+            icon: string;
+        };
+        facebook: {
+            root: string;
+            icon: string;
+        };
+        dribble: {
+            root: string;
+            icon: string;
+        };
+    };
+};
+interface CommonProps {
+    social: 'google' | 'facebook' | 'apple' | 'twitter' | 'figma' | 'dribble';
+    disabled?: boolean;
+    theme?: 'brand' | 'color' | 'gray';
+    size?: keyof typeof styles.sizes;
+}
+interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'slot'>, HTMLButtonElement> {
+    slot?: AriaButtonProps['slot'];
+}
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>, HTMLAnchorElement> {
+    /** Options for the configured client side router. */
+    routerOptions?: AriaLinkProps['routerOptions'];
+}
+export type SocialButtonProps = ButtonProps | LinkProps;
+export declare const SocialButton: ({ size, theme, social, className, children, disabled, ...otherProps }: SocialButtonProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/SocialButton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAIxG,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCjB,CAAC;AAEH,UAAU,WAAW;IACnB,MAAM,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;CAClC;AAED,UAAU,WAAY,SAAQ,WAAW,EAAE,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC9I,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC;AAED,UAAU,SAAU,SAAQ,WAAW,EAAE,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IACnI,qDAAqD;IACrD,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;CAChD;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,SAAS,CAAC;AAExD,eAAO,MAAM,YAAY,GAAI,uEAAwF,iBAAiB,gCA+ErI,CAAC"}

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

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { sortCx, cx } from '@flipdish/ui-library/utilities/cx';
+import { Link, Button } from 'react-aria-components';
+import { DribbleLogo, FigmaLogoOutlined, FigmaLogo, TwitterLogo, AppleLogo, FacebookLogo, GoogleLogo } from './components/social-logos.js';
+
+const styles = sortCx({
+    common: {
+        root: 'group disabled:stroke-fg-disabled disabled:text-fg-disabled disabled:*:text-fg-disabled relative inline-flex h-max cursor-pointer items-center justify-center font-semibold whitespace-nowrap outline-focus-ring transition duration-100 ease-linear before:absolute focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed',
+        icon: 'pointer-events-none shrink-0 transition-inherit-all',
+    },
+    sizes: {
+        md: {
+            root: 'gap-2 rounded-lg px-3.5 py-2.5 text-sm before:rounded-[7px] data-icon-only:p-3',
+            icon: 'size-4',
+        },
+        lg: {
+            root: 'gap-2.5 rounded-lg px-4 py-2.5 text-md before:rounded-[7px] data-icon-only:p-3',
+            icon: 'size-5',
+        },
+    },
+    colors: {
+        gray: {
+            root: 'bg-primary text-secondary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-secondary_hover',
+            icon: 'text-fg-quaternary group-hover:text-fg-quaternary_hover',
+        },
+        black: {
+            root: 'bg-black text-white shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0%',
+            icon: '',
+        },
+        facebook: {
+            root: 'bg-[#1877F2] text-white shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% hover:bg-[#0C63D4]',
+            icon: '',
+        },
+        dribble: {
+            root: 'bg-[#EA4C89] text-white shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset before:absolute before:inset-px before:border before:border-white/12 before:mask-b-from-0% hover:bg-[#E62872]',
+            icon: '',
+        },
+    },
+});
+const SocialButton = ({ size = 'lg', theme = 'brand', social, className, children, disabled, ...otherProps }) => {
+    const href = 'href' in otherProps ? otherProps.href : undefined;
+    const Component = href ? Link : Button;
+    const isIconOnly = !children;
+    const socialToColor = {
+        google: 'gray',
+        facebook: 'facebook',
+        apple: 'black',
+        twitter: 'black',
+        figma: 'black',
+        dribble: 'dribble',
+    };
+    const colorStyles = theme === 'brand' ? styles.colors[socialToColor[social]] : styles.colors.gray;
+    const logos = {
+        google: GoogleLogo,
+        facebook: FacebookLogo,
+        apple: AppleLogo,
+        twitter: TwitterLogo,
+        figma: theme === 'gray' ? FigmaLogoOutlined : FigmaLogo,
+        dribble: DribbleLogo,
+    };
+    const Logo = logos[social];
+    let props = {};
+    if (href) {
+        props = {
+            ...otherProps,
+            href: disabled ? undefined : href,
+            // Since anchor elements do not support the `disabled` attribute and state,
+            // we need to specify `data-rac` and `data-disabled` in order to be able
+            // to use the `disabled:` selector in classes.
+            ...(disabled ? { 'data-rac': true, 'data-disabled': true } : {}),
+        };
+    }
+    else {
+        props = {
+            ...otherProps,
+            type: otherProps.type || 'button',
+            isDisabled: disabled,
+        };
+    }
+    return (jsxs(Component, { isDisabled: disabled, ...props, "data-icon-only": isIconOnly ? true : undefined, className: cx(styles.common.root, styles.sizes[size].root, colorStyles.root, className), children: [jsx(Logo, { className: cx(styles.common.icon, styles.sizes[size].icon, theme === 'gray'
+                    ? colorStyles.icon
+                    : theme === 'brand' && (social === 'facebook' || social === 'apple' || social === 'twitter')
+                        ? 'text-white'
+                        : theme === 'color' && (social === 'apple' || social === 'twitter')
+                            ? 'text-alpha-black'
+                            : ''), colorful: (theme === 'brand' && (social === 'google' || social === 'figma')) ||
+                    (theme === 'color' && (social === 'google' || social === 'facebook' || social === 'figma' || social === 'dribble')) ||
+                    undefined }), children] }));
+};
+
+export { SocialButton, styles };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Tooltip = require('@flipdish/ui-library/components/atoms/Tooltip');
+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 = {
+    secondary: 'bg-primary text-fg-quaternary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:shadow-xs',
+    tertiary: 'text-fg-quaternary hover:bg-primary_hover hover:text-fg-quaternary_hover',
+};
+const ButtonUtility = ({ tooltip, className, isDisabled, icon: Icon, size = 'sm', color = 'secondary', tooltipPlacement = 'top', ...otherProps }) => {
+    const href = 'href' in otherProps ? otherProps.href : undefined;
+    const Component = href ? reactAriaComponents.Link : reactAriaComponents.Button;
+    let props = {};
+    if (href) {
+        props = {
+            ...otherProps,
+            href: isDisabled ? undefined : href,
+            // Since anchor elements do not support the `disabled` attribute and state,
+            // we need to specify `data-rac` and `data-disabled` in order to be able
+            // to use the `disabled:` selector in classes.
+            ...(isDisabled ? { 'data-rac': true, 'data-disabled': true } : {}),
+        };
+    }
+    else {
+        props = {
+            ...otherProps,
+            type: otherProps.type || 'button',
+            isDisabled,
+        };
+    }
+    const content = (jsxRuntime.jsxs(Component, { "aria-label": tooltip, ...props, className: cx.cx('group relative inline-flex h-max cursor-pointer items-center justify-center rounded-md p-1.5 outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50', styles[color], 
+        // Icon styles
+        '*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:text-current *:data-icon:transition-inherit-all', size === 'xs' ? '*:data-icon:size-4' : '*:data-icon:size-5', className), children: [isReactComponent.isReactComponent(Icon) && jsxRuntime.jsx(Icon, { "data-icon": true }), React.isValidElement(Icon) && Icon] }));
+    if (tooltip) {
+        return (jsxRuntime.jsx(Tooltip.Tooltip, { title: tooltip, placement: tooltipPlacement, isDisabled: isDisabled, offset: size === 'xs' ? 4 : 6, children: content }));
+    }
+    return content;
+};
+
+exports.ButtonUtility = ButtonUtility;
+exports.styles = styles;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/UtilityButton/index.tsx"],"sourcesContent":[null],"names":["AriaLink","AriaButton","_jsxs","cx","isReactComponent","_jsx","isValidElement","Tooltip"],"mappings":";;;;;;;;;AAUO,MAAM,MAAM,GAAG;AACpB,IAAA,SAAS,EACP,8JAA8J;AAChK,IAAA,QAAQ,EAAE,0EAA0E;;AA0C/E,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,UAAU,EACV,IAAI,EAAE,IAAI,EACV,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,WAAW,EACnB,gBAAgB,GAAG,KAAK,EACxB,GAAG,UAAU,EACP,KAAI;AACV,IAAA,MAAM,IAAI,GAAG,MAAM,IAAI,UAAU,GAAG,UAAU,CAAC,IAAI,GAAG,SAAS;IAC/D,MAAM,SAAS,GAAG,IAAI,GAAGA,wBAAQ,GAAGC,0BAAU;IAE9C,IAAI,KAAK,GAAG,EAAE;IAEd,IAAI,IAAI,EAAE;AACR,QAAA,KAAK,GAAG;AACN,YAAA,GAAG,UAAU;YAEb,IAAI,EAAE,UAAU,GAAG,SAAS,GAAG,IAAI;;;;AAKnC,YAAA,IAAI,UAAU,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;SACnE;IACH;SAAO;AACL,QAAA,KAAK,GAAG;AACN,YAAA,GAAG,UAAU;AAEb,YAAA,IAAI,EAAE,UAAU,CAAC,IAAI,IAAI,QAAQ;YACjC,UAAU;SACX;IACH;AAEA,IAAA,MAAM,OAAO,IACXC,gBAAC,SAAS,EAAA,EAAA,YAAA,EACI,OAAO,EAAA,GACf,KAAK,EACT,SAAS,EAAEC,KAAE,CACX,4PAA4P,EAC5P,MAAM,CAAC,KAAK,CAAC;;AAGb,QAAA,kHAAkH,EAClH,IAAI,KAAK,IAAI,GAAG,oBAAoB,GAAG,oBAAoB,EAE3D,SAAS,CACV,EAAA,QAAA,EAAA,CAEAC,iCAAgB,CAAC,IAAI,CAAC,IAAIC,cAAA,CAAC,IAAI,EAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAa,EAC5CC,oBAAc,CAAC,IAAI,CAAC,IAAI,IAAI,CAAA,EAAA,CACnB,CACb;IAED,IAAI,OAAO,EAAE;AACX,QAAA,QACED,cAAA,CAACE,eAAO,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC,EAAA,QAAA,EACxG,OAAO,EAAA,CACA;IAEd;AAEA,IAAA,OAAO,OAAO;AAChB;;;;;"}

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

@@ -0,0 +1,44 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from 'react';
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps, Placement } from 'react-aria-components';
+export declare const styles: {
+    secondary: string;
+    tertiary: string;
+};
+/**
+ * Common props shared between button and anchor variants
+ */
+export interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** The size variant of the button */
+    size?: 'xs' | 'sm';
+    /** The color variant of the button */
+    color?: 'secondary' | 'tertiary';
+    /** The icon to display in the button */
+    icon?: FC<{
+        className?: string;
+    }> | ReactNode;
+    /** The tooltip to display when hovering over the button */
+    tooltip?: string;
+    /** The placement of the tooltip */
+    tooltipPlacement?: Placement;
+}
+/**
+ * Props for the button variant (non-link)
+ */
+export interface ButtonProps extends CommonProps, DetailedHTMLProps<Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'slot'>, HTMLButtonElement> {
+    /** Slot name for react-aria component */
+    slot?: AriaButtonProps['slot'];
+}
+/**
+ * Props for the link variant (anchor tag)
+ */
+interface LinkProps extends CommonProps, DetailedHTMLProps<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>, HTMLAnchorElement> {
+    /** Options for the configured client side router. */
+    routerOptions?: AriaLinkProps['routerOptions'];
+}
+/** Union type of button and link props */
+export type Props = ButtonProps | LinkProps;
+export declare const ButtonUtility: ({ tooltip, className, isDisabled, icon: Icon, size, color, tooltipPlacement, ...otherProps }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/UtilityButton/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1G,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,SAAS,IAAI,aAAa,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGnH,eAAO,MAAM,MAAM;;;CAIlB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACjC,wCAAwC;IACxC,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IAC9C,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,WACf,SAAQ,WAAW,EACjB,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,EAAE,iBAAiB,CAAC;IACvG,yCAAyC;IACzC,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,UAAU,SAAU,SAAQ,WAAW,EAAE,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IACnI,qDAAqD;IACrD,aAAa,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;CAChD;AAED,0CAA0C;AAC1C,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,SAAS,CAAC;AAE5C,eAAO,MAAM,aAAa,GAAI,8FAS3B,KAAK,gCAuDP,CAAC"}

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

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Tooltip } from '@flipdish/ui-library/components/atoms/Tooltip';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { isReactComponent } from '@flipdish/ui-library/utilities/isReactComponent';
+import { isValidElement } from 'react';
+import { Link, Button } from 'react-aria-components';
+
+const styles = {
+    secondary: 'bg-primary text-fg-quaternary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:shadow-xs',
+    tertiary: 'text-fg-quaternary hover:bg-primary_hover hover:text-fg-quaternary_hover',
+};
+const ButtonUtility = ({ tooltip, className, isDisabled, icon: Icon, size = 'sm', color = 'secondary', tooltipPlacement = 'top', ...otherProps }) => {
+    const href = 'href' in otherProps ? otherProps.href : undefined;
+    const Component = href ? Link : Button;
+    let props = {};
+    if (href) {
+        props = {
+            ...otherProps,
+            href: isDisabled ? undefined : href,
+            // Since anchor elements do not support the `disabled` attribute and state,
+            // we need to specify `data-rac` and `data-disabled` in order to be able
+            // to use the `disabled:` selector in classes.
+            ...(isDisabled ? { 'data-rac': true, 'data-disabled': true } : {}),
+        };
+    }
+    else {
+        props = {
+            ...otherProps,
+            type: otherProps.type || 'button',
+            isDisabled,
+        };
+    }
+    const content = (jsxs(Component, { "aria-label": tooltip, ...props, className: cx('group relative inline-flex h-max cursor-pointer items-center justify-center rounded-md p-1.5 outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50', styles[color], 
+        // Icon styles
+        '*:data-icon:pointer-events-none *:data-icon:shrink-0 *:data-icon:text-current *:data-icon:transition-inherit-all', size === 'xs' ? '*:data-icon:size-4' : '*:data-icon:size-5', className), children: [isReactComponent(Icon) && jsx(Icon, { "data-icon": true }), isValidElement(Icon) && Icon] }));
+    if (tooltip) {
+        return (jsx(Tooltip, { title: tooltip, placement: tooltipPlacement, isDisabled: isDisabled, offset: size === 'xs' ? 4 : 6, children: content }));
+    }
+    return content;
+};
+
+export { ButtonUtility, styles };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/UtilityButton/index.tsx"],"sourcesContent":[null],"names":["AriaLink","AriaButton","_jsxs","_jsx"],"mappings":";;;;;;;AAUO,MAAM,MAAM,GAAG;AACpB,IAAA,SAAS,EACP,8JAA8J;AAChK,IAAA,QAAQ,EAAE,0EAA0E;;AA0C/E,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,UAAU,EACV,IAAI,EAAE,IAAI,EACV,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,WAAW,EACnB,gBAAgB,GAAG,KAAK,EACxB,GAAG,UAAU,EACP,KAAI;AACV,IAAA,MAAM,IAAI,GAAG,MAAM,IAAI,UAAU,GAAG,UAAU,CAAC,IAAI,GAAG,SAAS;IAC/D,MAAM,SAAS,GAAG,IAAI,GAAGA,IAAQ,GAAGC,MAAU;IAE9C,IAAI,KAAK,GAAG,EAAE;IAEd,IAAI,IAAI,EAAE;AACR,QAAA,KAAK,GAAG;AACN,YAAA,GAAG,UAAU;YAEb,IAAI,EAAE,UAAU,GAAG,SAAS,GAAG,IAAI;;;;AAKnC,YAAA,IAAI,UAAU,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;SACnE;IACH;SAAO;AACL,QAAA,KAAK,GAAG;AACN,YAAA,GAAG,UAAU;AAEb,YAAA,IAAI,EAAE,UAAU,CAAC,IAAI,IAAI,QAAQ;YACjC,UAAU;SACX;IACH;AAEA,IAAA,MAAM,OAAO,IACXC,KAAC,SAAS,EAAA,EAAA,YAAA,EACI,OAAO,EAAA,GACf,KAAK,EACT,SAAS,EAAE,EAAE,CACX,4PAA4P,EAC5P,MAAM,CAAC,KAAK,CAAC;;AAGb,QAAA,kHAAkH,EAClH,IAAI,KAAK,IAAI,GAAG,oBAAoB,GAAG,oBAAoB,EAE3D,SAAS,CACV,EAAA,QAAA,EAAA,CAEA,gBAAgB,CAAC,IAAI,CAAC,IAAIC,GAAA,CAAC,IAAI,EAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAa,EAC5C,cAAc,CAAC,IAAI,CAAC,IAAI,IAAI,CAAA,EAAA,CACnB,CACb;IAED,IAAI,OAAO,EAAE;AACX,QAAA,QACEA,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC,EAAA,QAAA,EACxG,OAAO,EAAA,CACA;IAEd;AAEA,IAAA,OAAO,OAAO;AAChB;;;;"}

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

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Button = require('@flipdish/ui-library/components/atoms/Button');
+var CloseButton = require('@flipdish/ui-library/components/atoms/CloseButton');
+var FeaturedIcon = require('@flipdish/ui-library/components/atoms/FeaturedIcon');
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+const iconMap = {
+    default: uiIcons.InfoCircle,
+    brand: uiIcons.InfoCircle,
+    gray: uiIcons.InfoCircle,
+    error: uiIcons.AlertCircle,
+    warning: uiIcons.AlertCircle,
+    success: uiIcons.CheckCircle,
+};
+const AlertFloating = ({ title, description, confirmLabel, onClose, onConfirm, color = 'default', dismissLabel = 'Dismiss', }) => {
+    return (jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-4 rounded-xl border border-primary bg-primary_alt p-4 shadow-xs md:flex-row", children: [jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3 md:w-0", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 overflow-auto", children: [jsxRuntime.jsx("p", { className: "pr-8 text-sm font-semibold text-secondary md:truncate md:pr-0", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-tertiary md:truncate", children: description })] }), (onConfirm || onClose) && (jsxRuntime.jsxs("div", { className: "flex gap-3", children: [onClose && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), onConfirm && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] }))] }), onClose && jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: dismissLabel, className: "absolute top-2 right-2" })] }));
+};
+const AlertFullWidth = ({ title, description, confirmLabel, onClose, onConfirm, color = 'default', actionType = 'button', dismissLabel = 'Dismiss', }) => {
+    return (jsxRuntime.jsx("div", { className: "relative border-t border-primary bg-secondary md:border-t-0 md:border-b", children: jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-container flex-col gap-4 p-4 md:flex-row md:items-center md:gap-3 md:px-8 md:py-3", children: [jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-4 md:w-0 md:flex-row md:items-center", children: [jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { className: "hidden md:flex", icon: iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 overflow-hidden lg:flex-row lg:gap-1.5", children: [jsxRuntime.jsx("p", { className: "pr-8 text-sm font-semibold text-secondary md:truncate md:pr-0", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-tertiary md:truncate", children: description })] })] }), (onConfirm || onClose) && (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsxs("div", { className: cx.cx('flex w-full gap-3', actionType === 'button' ? 'flex-col-reverse md:flex-row' : 'flex-row'), children: [onClose && (jsxRuntime.jsx(Button.Button, { onClick: onClose, color: actionType === 'button' ? 'secondary' : 'link-gray', size: "sm", children: dismissLabel })), onConfirm && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, color: actionType === 'button' ? 'primary' : 'link-color', size: "sm", children: confirmLabel }))] }), onClose && jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: dismissLabel, className: "absolute top-2 right-2 shrink-0 md:static" })] }))] }) }));
+};
+
+exports.AlertFloating = AlertFloating;
+exports.AlertFullWidth = AlertFullWidth;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Alert/index.tsx"],"sourcesContent":[null],"names":["InfoCircle","AlertCircle","CheckCircle","_jsxs","_jsx","FeaturedIcon","Button","CloseButton","cx"],"mappings":"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"}

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

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+interface AlertFloatingProps {
+    /**
+     * The title of the alert.
+     */
+    title: string;
+    /**
+     * The description of the alert.
+     */
+    description: ReactNode;
+    /**
+     * The label for the confirm button.
+     */
+    confirmLabel: string;
+    /**
+     * The label for the dismiss button.
+     * @default "Dismiss"
+     */
+    dismissLabel?: string;
+    /**
+     * The color of the alert.
+     * @default "default"
+     */
+    color?: 'default' | 'brand' | 'gray' | 'error' | 'warning' | 'success';
+    /**
+     * The function to call when the dismiss button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * The function to call when the confirm button is clicked.
+     */
+    onConfirm?: () => void;
+}
+export declare const AlertFloating: ({ title, description, confirmLabel, onClose, onConfirm, color, dismissLabel, }: AlertFloatingProps) => import("react").JSX.Element;
+interface AlertFullWidthProps {
+    /**
+     * The title of the alert.
+     */
+    title: string;
+    /**
+     * The description of the alert.
+     */
+    description: ReactNode;
+    /**
+     * The label for the confirm button.
+     */
+    confirmLabel: string;
+    /**
+     * The label for the dismiss button.
+     * @default "Dismiss"
+     */
+    dismissLabel?: string;
+    /**
+     * The type of the action buttons.
+     * @default "button"
+     */
+    actionType?: 'button' | 'link';
+    /**
+     * The color of the alert.
+     * @default "default"
+     */
+    color?: 'default' | 'brand' | 'gray' | 'error' | 'warning' | 'success';
+    /**
+     * The function to call when the dismiss button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * The function to call when the confirm button is clicked.
+     */
+    onConfirm?: () => void;
+}
+export declare const AlertFullWidth: ({ title, description, confirmLabel, onClose, onConfirm, color, actionType, dismissLabel, }: AlertFullWidthProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Alert/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,aAAa,GAAI,gFAQ3B,kBAAkB,gCA8BpB,CAAC;AAEF,UAAU,mBAAmB;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,GAAI,4FAS5B,mBAAmB,gCAwCrB,CAAC"}

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CheckCircle, AlertCircle, InfoCircle } from '@flipdish/ui-icons';
+import { Button } from '@flipdish/ui-library/components/atoms/Button';
+import { CloseButton } from '@flipdish/ui-library/components/atoms/CloseButton';
+import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+
+const iconMap = {
+    default: InfoCircle,
+    brand: InfoCircle,
+    gray: InfoCircle,
+    error: AlertCircle,
+    warning: AlertCircle,
+    success: CheckCircle,
+};
+const AlertFloating = ({ title, description, confirmLabel, onClose, onConfirm, color = 'default', dismissLabel = 'Dismiss', }) => {
+    return (jsxs("div", { className: "relative flex flex-col gap-4 rounded-xl border border-primary bg-primary_alt p-4 shadow-xs md:flex-row", children: [jsx(FeaturedIcon, { icon: iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxs("div", { className: "flex flex-1 flex-col gap-3 md:w-0", children: [jsxs("div", { className: "flex flex-col gap-1 overflow-auto", children: [jsx("p", { className: "pr-8 text-sm font-semibold text-secondary md:truncate md:pr-0", children: title }), jsx("p", { className: "text-sm text-tertiary md:truncate", children: description })] }), (onConfirm || onClose) && (jsxs("div", { className: "flex gap-3", children: [onClose && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), onConfirm && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] }))] }), onClose && jsx(CloseButton, { onClick: onClose, size: "sm", label: dismissLabel, className: "absolute top-2 right-2" })] }));
+};
+const AlertFullWidth = ({ title, description, confirmLabel, onClose, onConfirm, color = 'default', actionType = 'button', dismissLabel = 'Dismiss', }) => {
+    return (jsx("div", { className: "relative border-t border-primary bg-secondary md:border-t-0 md:border-b", children: jsxs("div", { className: "mx-auto flex max-w-container flex-col gap-4 p-4 md:flex-row md:items-center md:gap-3 md:px-8 md:py-3", children: [jsxs("div", { className: "flex flex-1 flex-col gap-4 md:w-0 md:flex-row md:items-center", children: [jsx(FeaturedIcon, { className: "hidden md:flex", icon: iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxs("div", { className: "flex flex-col gap-0.5 overflow-hidden lg:flex-row lg:gap-1.5", children: [jsx("p", { className: "pr-8 text-sm font-semibold text-secondary md:truncate md:pr-0", children: title }), jsx("p", { className: "text-sm text-tertiary md:truncate", children: description })] })] }), (onConfirm || onClose) && (jsxs("div", { className: "flex gap-2", children: [jsxs("div", { className: cx('flex w-full gap-3', actionType === 'button' ? 'flex-col-reverse md:flex-row' : 'flex-row'), children: [onClose && (jsx(Button, { onClick: onClose, color: actionType === 'button' ? 'secondary' : 'link-gray', size: "sm", children: dismissLabel })), onConfirm && (jsx(Button, { onClick: onConfirm, color: actionType === 'button' ? 'primary' : 'link-color', size: "sm", children: confirmLabel }))] }), onClose && jsx(CloseButton, { onClick: onClose, size: "sm", label: dismissLabel, className: "absolute top-2 right-2 shrink-0 md:static" })] }))] }) }));
+};
+
+export { AlertFloating, AlertFullWidth };
+//# sourceMappingURL=index.js.map

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

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