@flipdish/ui-library 0.2.1 → 0.3.0

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

@@ -0,0 +1,67 @@
+import { FileIcon } from '@flipdish/ui-icons';
+import type { BackgroundPatternProps } from '@flipdish/ui-library/components/atoms/BackgroundPattern';
+import { FeaturedIcon as FeaturedIconbase } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
+import { Illustration as Illustrations } from '@flipdish/ui-library/components/atoms/Illustration';
+import type { ComponentProps, ComponentPropsWithRef, ReactNode } from 'react';
+interface RootContextProps {
+    size?: 'sm' | 'md' | 'lg';
+}
+interface RootProps extends ComponentPropsWithRef<'div'>, RootContextProps {
+}
+declare const Root: ({ size, ...props }: RootProps) => import("react").JSX.Element;
+declare const FeaturedIcon: ({ color, theme, icon, size, ...props }: ComponentPropsWithRef<typeof FeaturedIconbase>) => import("react").JSX.Element;
+declare const Illustration: ({ type, color, size, ...props }: ComponentPropsWithRef<typeof Illustrations>) => import("react").JSX.Element;
+interface FileTypeIconProps extends ComponentPropsWithRef<'div'> {
+    type?: ComponentProps<typeof FileIcon>['type'];
+    theme?: ComponentProps<typeof FileIcon>['variant'];
+}
+declare const FileTypeIcon: ({ type, theme, ...props }: FileTypeIconProps) => import("react").JSX.Element;
+interface HeaderProps extends ComponentPropsWithRef<'div'> {
+    pattern?: 'none' | BackgroundPatternProps['pattern'];
+    patternSize?: 'sm' | 'md' | 'lg';
+}
+declare const Header: ({ pattern, patternSize, ...props }: HeaderProps) => import("react").JSX.Element;
+declare const Content: (props: ComponentPropsWithRef<"div">) => import("react").JSX.Element;
+declare const Footer: (props: ComponentPropsWithRef<"div">) => import("react").JSX.Element;
+declare const Title: (props: ComponentPropsWithRef<"h1">) => import("react").JSX.Element;
+declare const Description: (props: ComponentPropsWithRef<"p">) => import("react").JSX.Element;
+interface AvatarRadiusProps extends ComponentPropsWithRef<'div'> {
+    avatars?: Array<{
+        src: string;
+        alt?: string;
+    }>;
+}
+declare const AvatarRadius: ({ avatars, ...props }: AvatarRadiusProps) => import("react").JSX.Element;
+interface AvatarRowProps extends ComponentPropsWithRef<'div'> {
+    avatars?: Array<{
+        src: string;
+        alt?: string;
+    }>;
+    children?: ReactNode;
+}
+declare const AvatarRow: ({ avatars, children, ...props }: AvatarRowProps) => import("react").JSX.Element;
+interface AvatarGridProps extends ComponentPropsWithRef<'div'> {
+    avatars?: Array<{
+        src: string;
+        alt?: string;
+    }>;
+}
+declare const AvatarGrid: ({ avatars, ...props }: AvatarGridProps) => import("react").JSX.Element;
+/**
+ * @summary placeholder shown when a list, table, or page has no data yet
+ */
+declare const EmptyState: typeof Root & {
+    Title: typeof Title;
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Content: typeof Content;
+    Description: typeof Description;
+    Illustration: typeof Illustration;
+    FeaturedIcon: typeof FeaturedIcon;
+    FileTypeIcon: typeof FileTypeIcon;
+    AvatarRadius: typeof AvatarRadius;
+    AvatarRow: typeof AvatarRow;
+    AvatarGrid: typeof AvatarGrid;
+};
+export { EmptyState };
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SearchLg, FileIcon } from '@flipdish/ui-icons';
+import { BackgroundPattern } from '@flipdish/ui-library/components/atoms/BackgroundPattern';
+import { FeaturedIcon as FeaturedIcon$1 } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
+import { Illustration as Illustration$1 } from '@flipdish/ui-library/components/atoms/Illustration';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { createContext, useContext, Children, isValidElement } from 'react';
+
+const RootContext = createContext({ size: 'lg' });
+const Root = ({ size = 'lg', ...props }) => {
+    return (jsx(RootContext.Provider, { value: { size }, children: jsx("div", { ...props, className: cx('mx-auto flex w-full max-w-lg flex-col items-center justify-center', props.className) }) }));
+};
+const FeaturedIcon = ({ color = 'gray', theme = 'modern', icon = SearchLg, size, ...props }) => {
+    const { size: rootSize } = useContext(RootContext);
+    return jsx(FeaturedIcon$1, { ...props, color, theme, icon, size: !size && rootSize === 'lg' ? 'xl' : size || 'lg' });
+};
+const Illustration = ({ type = 'cloud', color = 'gray', size = 'lg', ...props }) => {
+    const { size: rootSize } = useContext(RootContext);
+    return (jsx(Illustration$1, { role: "img", ...props, type, color, size: rootSize === 'sm' ? 'sm' : rootSize === 'md' ? 'md' : size, className: cx('z-10', props.className) }));
+};
+const FileTypeIcon = ({ type = 'folder', theme = 'solid', ...props }) => {
+    return (jsx("div", { ...props, className: cx('relative z-10 flex rounded-full bg-linear-to-b from-neutral-50 to-neutral-200 p-8', props.className), children: jsx(FileIcon, { type: type, variant: theme, className: "size-10 drop-shadow-sm" }) }));
+};
+const Header = ({ pattern = 'circle', patternSize = 'md', ...props }) => {
+    const { size } = useContext(RootContext);
+    // Whether we are passing `Illustration` component as children.
+    const hasIllustration = Children.toArray(props.children).some((headerChild) => isValidElement(headerChild) && headerChild.type === Illustration);
+    return (jsxs("header", { ...props, className: cx('relative mb-4', (size === 'md' || size === 'lg') && 'mb-5', hasIllustration && size === 'lg' && 'mb-6!', props.className), children: [pattern !== 'none' && (jsx(BackgroundPattern, { size: patternSize, pattern: pattern, className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" })), props.children] }));
+};
+const Content = (props) => {
+    const { size } = useContext(RootContext);
+    return (jsx("main", { ...props, className: cx('z-10 mb-6 flex w-full max-w-88 flex-col items-center justify-center gap-1', (size === 'md' || size === 'lg') && 'mb-8 gap-2', props.className) }));
+};
+const Footer = (props) => {
+    return jsx("footer", { ...props, className: cx('z-10 flex gap-3', props.className) });
+};
+const Title = (props) => {
+    const { size } = useContext(RootContext);
+    return (jsx("h1", { ...props, className: cx('text-md font-semibold text-primary', size === 'md' && 'text-lg font-semibold', size === 'lg' && 'text-xl font-semibold', props.className) }));
+};
+const Description = (props) => {
+    const { size } = useContext(RootContext);
+    return jsx("p", { ...props, className: cx('text-center text-sm text-tertiary', size === 'lg' && 'text-md', props.className) });
+};
+/**
+ * Predefined avatar slots positioned on concentric circle rings.
+ * Each slot defines: ring radius, CSS angle (0°=top, clockwise), and avatar size class.
+ */
+const avatarSlots = [
+    { ring: 80, angle: 330, size: 'size-8' },
+    { ring: 80, angle: 56, size: 'size-8' },
+    { ring: 144, angle: 82, size: 'size-7' },
+    { ring: 144, angle: 299, size: 'size-7' },
+    { ring: 144, angle: 241, size: 'size-7' },
+    { ring: 176, angle: 64, size: 'size-6' },
+    { ring: 176, angle: 270, size: 'size-6' },
+    { ring: 144, angle: 112, size: 'size-7' },
+    { ring: 80, angle: 249, size: 'size-8' },
+];
+const RING_RADII = [48, 80, 112, 144, 176];
+const AvatarRadius = ({ avatars = [], ...props }) => {
+    return (jsxs("div", { "aria-hidden": "true", ...props, className: cx('pointer-events-none absolute top-1/2 left-1/2 size-120 -translate-x-1/2 -translate-y-1/2', props.className), style: {
+            maskImage: 'radial-gradient(circle, black 10%, transparent 70%)',
+            WebkitMaskImage: 'radial-gradient(circle, black 10%, transparent 70%)',
+            ...props.style,
+        }, children: [RING_RADII.map((radius) => (jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-secondary", style: { width: radius * 2, height: radius * 2 } }, radius))), avatars.slice(0, avatarSlots.length).map((avatar, i) => {
+                const slot = avatarSlots[i];
+                const rad = (slot.angle * Math.PI) / 180;
+                const x = Math.sin(rad) * slot.ring;
+                const y = -Math.cos(rad) * slot.ring;
+                return (jsx("div", { className: cx('absolute top-1/2 left-1/2 rounded-full bg-primary p-px shadow-xs ring-[0.5px] ring-black/10', slot.size), style: { transform: `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))` }, children: jsx("img", { src: avatar.src, alt: "", className: "size-full rounded-full object-cover outline-[0.5px] -outline-offset-[0.5px] outline-black/16" }) }, i));
+            })] }));
+};
+/** Avatar sizes per root size — ordered smallest to largest (left edge → center). */
+const rowStyles = {
+    sm: ['size-8 rounded-md', 'size-9 rounded-[7px]', 'size-10 rounded-lg', 'size-11 rounded-[9px]'],
+    md: ['size-10 rounded-lg', 'size-11 rounded-[9px]', 'size-12 rounded-[10px]'],
+    lg: ['size-10 rounded-lg', 'size-11 rounded-[9px]', 'size-12 rounded-[10px]'],
+};
+const AvatarRow = ({ avatars = [], children, ...props }) => {
+    const { size: rootSize } = useContext(RootContext);
+    const sizeKey = rootSize || 'md';
+    const sizes = rowStyles[sizeKey];
+    const count = sizes.length;
+    const leftAvatars = avatars.slice(0, count);
+    const rightAvatars = avatars.slice(count, count * 2);
+    const renderAvatar = (avatar, sizeClass, key) => (jsx("div", { className: cx('relative shrink-0 overflow-hidden outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]', sizeClass), children: jsx("img", { src: avatar.src, alt: avatar.alt || '', className: "size-full object-cover" }) }, key));
+    return (jsxs("div", { "aria-hidden": "true", ...props, className: cx('-m-1 flex items-center justify-center p-1', sizeKey === 'sm' ? 'gap-4' : sizeKey === 'md' ? 'gap-5' : 'gap-6', props.className), style: {
+            maskImage: 'radial-gradient(circle, black 5%, transparent 105%)',
+            WebkitMaskImage: 'radial-gradient(circle, black 5%, transparent 105%)',
+            ...props.style,
+        }, children: [jsx("div", { className: cx('flex items-center', sizeKey === 'sm' ? 'gap-3' : 'gap-4'), children: leftAvatars.map((avatar, i) => renderAvatar(avatar, sizes[i], i)) }), children, jsx("div", { className: cx('flex items-center', sizeKey === 'sm' ? 'gap-3' : 'gap-4'), children: rightAvatars.map((avatar, i) => renderAvatar(avatar, sizes[count - 1 - i], i + count)) })] }));
+};
+const gridStyles = {
+    sm: { avatar: 'size-8 rounded-md', inner: 'rounded-[5px]', gap: 'gap-2 pl-2', rowGap: 'gap-2' },
+    md: { avatar: 'size-10 rounded-lg', inner: 'rounded-[7px]', gap: 'gap-3 pl-3', rowGap: 'gap-3' },
+    lg: { avatar: 'size-12 rounded-[10px]', inner: 'rounded-[9px]', gap: 'gap-3 pl-3', rowGap: 'gap-3' },
+};
+const AvatarGrid = ({ avatars = [], ...props }) => {
+    const { size: rootSize } = useContext(RootContext);
+    const sizeKey = rootSize || 'md';
+    const config = gridStyles[sizeKey];
+    const mid = Math.ceil(avatars.length / 2);
+    const row1Base = avatars.slice(0, mid);
+    const row2Base = avatars.slice(mid);
+    const row1 = [...row1Base, ...row1Base, ...row1Base];
+    const row2 = [...row2Base, ...row2Base, ...row2Base];
+    const renderGridAvatar = (avatar, key) => (jsx("div", { className: cx('shrink-0 bg-primary p-px shadow-xs ring-[0.75px] ring-black/10', config.avatar), children: jsx("div", { className: cx('relative size-full overflow-hidden outline-[0.5px] -outline-offset-[0.5px] outline-black/16 before:absolute before:inset-0 before:rounded-[inherit] before:border before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]', config.inner), children: jsx("img", { src: avatar.src, alt: avatar.alt || '', className: "size-full object-cover" }) }) }, key));
+    return (jsxs("div", { "aria-hidden": "true", ...props, className: cx('-m-1 flex max-w-lg flex-col items-center overflow-x-clip p-1', config.rowGap, props.className), style: {
+            maskImage: 'radial-gradient(circle, black 10%, transparent 100%)',
+            WebkitMaskImage: 'radial-gradient(circle, black 10%, transparent 100%)',
+            ...props.style,
+        }, children: [jsxs("div", { className: "flex", children: [jsx("div", { className: cx('flex w-auto max-w-none shrink-0 animate-marquee [animation-duration:240s] motion-reduce:animate-none', config.gap), children: row1.map((avatar, i) => renderGridAvatar(avatar, i)) }), jsx("div", { className: cx('flex w-auto max-w-none shrink-0 animate-marquee [animation-duration:240s] motion-reduce:animate-none', config.gap), children: row1.map((avatar, i) => renderGridAvatar(avatar, i)) })] }), jsxs("div", { className: "flex", children: [jsx("div", { className: cx('flex w-auto max-w-none shrink-0 animate-marquee [animation-delay:-120s] [animation-duration:240s] direction-reverse motion-reduce:-translate-x-1/2 motion-reduce:animate-none', config.gap), children: row2.map((avatar, i) => renderGridAvatar(avatar, i + mid)) }), jsx("div", { className: cx('flex w-auto max-w-none shrink-0 animate-marquee [animation-delay:-120s] [animation-duration:240s] direction-reverse motion-reduce:-translate-x-1/2 motion-reduce:animate-none', config.gap), children: row2.map((avatar, i) => renderGridAvatar(avatar, i + mid)) })] })] }));
+};
+/**
+ * @summary placeholder shown when a list, table, or page has no data yet
+ */
+const EmptyState = Root;
+EmptyState.Title = Title;
+EmptyState.Header = Header;
+EmptyState.Footer = Footer;
+EmptyState.Content = Content;
+EmptyState.Description = Description;
+EmptyState.Illustration = Illustration;
+EmptyState.FeaturedIcon = FeaturedIcon;
+EmptyState.FileTypeIcon = FileTypeIcon;
+EmptyState.AvatarRadius = AvatarRadius;
+EmptyState.AvatarRow = AvatarRow;
+EmptyState.AvatarGrid = AvatarGrid;
+
+export { EmptyState };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var reactAriaComponents = require('react-aria-components');
+
+const DialogTrigger = reactAriaComponents.DialogTrigger;
+const ModalOverlay = (props) => {
+    return (jsxRuntime.jsx(reactAriaComponents.ModalOverlay, { ...props, className: (state) => cx.cx('fixed inset-0 z-50 flex min-h-dvh w-full items-end justify-center bg-overlay/70 px-4 outline-hidden backdrop-blur-[6px] sm:items-center sm:justify-center sm:px-8', 
+        // Vertical padding
+        'pt-(--modal-pt) pb-(--modal-pb) [--modal-pb:clamp(16px,8vh,64px)] [--modal-pt:16px] sm:[--modal-pb:32px] sm:[--modal-pt:32px]', 
+        // Animations
+        state.isEntering && 'duration-300 ease-out animate-in fade-in', state.isExiting && 'duration-200 ease-in animate-out fade-out', typeof props.className === 'function' ? props.className(state) : props.className) }));
+};
+const Modal = (props) => (jsxRuntime.jsx(reactAriaComponents.Modal, { ...props, className: (state) => cx.cx('rounded-xl bg-primary align-middle shadow-xl outline-hidden max-sm:overflow-y-auto sm:rounded-2xl', 
+    // Max height based on parent's vertical padding
+    'max-h-[calc(var(--visual-viewport-height)-var(--modal-pt)-var(--modal-pb))]', 
+    // Animations
+    state.isEntering && 'duration-300 ease-out animate-in zoom-in-95', state.isExiting && 'duration-200 ease-in animate-out zoom-out-95', typeof props.className === 'function' ? props.className(state) : props.className) }));
+const Dialog = (props) => (jsxRuntime.jsx(reactAriaComponents.Dialog, { ...props, className: cx.cx('relative max-h-[inherit] w-full overflow-y-auto outline-hidden', props.className) }));
+
+exports.Dialog = Dialog;
+exports.DialogTrigger = DialogTrigger;
+exports.Modal = Modal;
+exports.ModalOverlay = ModalOverlay;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":[null],"names":["AriaDialogTrigger","_jsx","AriaModalOverlay","cx","AriaModal","AriaDialog"],"mappings":";;;;;;AAWO,MAAM,aAAa,GAAGA;AAEtB,MAAM,YAAY,GAAG,CAAC,KAA4B,KAAI;AAC3D,IAAA,QACEC,cAAA,CAACC,gCAAgB,EAAA,EAAA,GACX,KAAK,EACT,SAAS,EAAE,CAAC,KAAK,KACfC,KAAE,CACA,mKAAmK;;QAEnK,+HAA+H;;AAE/H,QAAA,KAAK,CAAC,UAAU,IAAI,0CAA0C,EAC9D,KAAK,CAAC,SAAS,IAAI,2CAA2C,EAC9D,OAAO,KAAK,CAAC,SAAS,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,SAAS,CACjF,EAAA,CAEH;AAEN;AAEO,MAAM,KAAK,GAAG,CAAC,KAA4B,MAChDF,cAAA,CAACG,yBAAS,OACJ,KAAK,EACT,SAAS,EAAE,CAAC,KAAK,KACfD,KAAE,CACA,mGAAmG;;IAEnG,6EAA6E;;AAE7E,IAAA,KAAK,CAAC,UAAU,IAAI,6CAA6C,EACjE,KAAK,CAAC,SAAS,IAAI,8CAA8C,EACjE,OAAO,KAAK,CAAC,SAAS,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,SAAS,CACjF,EAAA,CAEH;AAGG,MAAM,MAAM,GAAG,CAAC,KAAsB,MAC3CF,cAAA,CAACI,0BAAU,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAEF,KAAE,CAAC,gEAAgE,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,CAAI;;;;;;;"}

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

@@ -0,0 +1,7 @@
+import type { DialogProps as AriaDialogProps, ModalOverlayProps as AriaModalOverlayProps } from 'react-aria-components';
+import { DialogTrigger as AriaDialogTrigger } from 'react-aria-components';
+export declare const DialogTrigger: typeof AriaDialogTrigger;
+export declare const ModalOverlay: (props: AriaModalOverlayProps) => import("react").JSX.Element;
+export declare const Modal: (props: AriaModalOverlayProps) => import("react").JSX.Element;
+export declare const Dialog: (props: AriaDialogProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,iBAAiB,IAAI,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACxH,OAAO,EAEL,aAAa,IAAI,iBAAiB,EAGnC,MAAM,uBAAuB,CAAC;AAE/B,eAAO,MAAM,aAAa,0BAAoB,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,OAAO,qBAAqB,gCAiBxD,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,qBAAqB,gCAejD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,OAAO,eAAe,gCAE5C,CAAC"}

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { DialogTrigger as DialogTrigger$1, Dialog as Dialog$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1 } from 'react-aria-components';
+
+const DialogTrigger = DialogTrigger$1;
+const ModalOverlay = (props) => {
+    return (jsx(ModalOverlay$1, { ...props, className: (state) => cx('fixed inset-0 z-50 flex min-h-dvh w-full items-end justify-center bg-overlay/70 px-4 outline-hidden backdrop-blur-[6px] sm:items-center sm:justify-center sm:px-8', 
+        // Vertical padding
+        'pt-(--modal-pt) pb-(--modal-pb) [--modal-pb:clamp(16px,8vh,64px)] [--modal-pt:16px] sm:[--modal-pb:32px] sm:[--modal-pt:32px]', 
+        // Animations
+        state.isEntering && 'duration-300 ease-out animate-in fade-in', state.isExiting && 'duration-200 ease-in animate-out fade-out', typeof props.className === 'function' ? props.className(state) : props.className) }));
+};
+const Modal = (props) => (jsx(Modal$1, { ...props, className: (state) => cx('rounded-xl bg-primary align-middle shadow-xl outline-hidden max-sm:overflow-y-auto sm:rounded-2xl', 
+    // Max height based on parent's vertical padding
+    'max-h-[calc(var(--visual-viewport-height)-var(--modal-pt)-var(--modal-pb))]', 
+    // Animations
+    state.isEntering && 'duration-300 ease-out animate-in zoom-in-95', state.isExiting && 'duration-200 ease-in animate-out zoom-out-95', typeof props.className === 'function' ? props.className(state) : props.className) }));
+const Dialog = (props) => (jsx(Dialog$1, { ...props, className: cx('relative max-h-[inherit] w-full overflow-y-auto outline-hidden', props.className) }));
+
+export { Dialog, DialogTrigger, Modal, ModalOverlay };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":[null],"names":["AriaDialogTrigger","_jsx","AriaModalOverlay","AriaModal","AriaDialog"],"mappings":";;;;AAWO,MAAM,aAAa,GAAGA;AAEtB,MAAM,YAAY,GAAG,CAAC,KAA4B,KAAI;AAC3D,IAAA,QACEC,GAAA,CAACC,cAAgB,EAAA,EAAA,GACX,KAAK,EACT,SAAS,EAAE,CAAC,KAAK,KACf,EAAE,CACA,mKAAmK;;QAEnK,+HAA+H;;AAE/H,QAAA,KAAK,CAAC,UAAU,IAAI,0CAA0C,EAC9D,KAAK,CAAC,SAAS,IAAI,2CAA2C,EAC9D,OAAO,KAAK,CAAC,SAAS,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,SAAS,CACjF,EAAA,CAEH;AAEN;AAEO,MAAM,KAAK,GAAG,CAAC,KAA4B,MAChDD,GAAA,CAACE,OAAS,OACJ,KAAK,EACT,SAAS,EAAE,CAAC,KAAK,KACf,EAAE,CACA,mGAAmG;;IAEnG,6EAA6E;;AAE7E,IAAA,KAAK,CAAC,UAAU,IAAI,6CAA6C,EACjE,KAAK,CAAC,SAAS,IAAI,8CAA8C,EACjE,OAAO,KAAK,CAAC,SAAS,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,SAAS,CACjF,EAAA,CAEH;AAGG,MAAM,MAAM,GAAG,CAAC,KAAsB,MAC3CF,GAAA,CAACG,QAAU,EAAA,EAAA,GAAK,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,gEAAgE,EAAE,KAAK,CAAC,SAAS,CAAC,EAAA,CAAI;;;;"}

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var multiSelect = require('@flipdish/ui-library/components/molecules/Select/components/multi-select');
+
+
+
+Object.defineProperty(exports, "MultiSelect", {
+	enumerable: true,
+	get: function () { return multiSelect.MultiSelect; }
+});
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

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

@@ -0,0 +1,2 @@
+export { MultiSelect } from '@flipdish/ui-library/components/molecules/Select/components/multi-select';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/MultiSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0EAA0E,CAAC"}

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

@@ -0,0 +1,2 @@
+export { MultiSelect } from '@flipdish/ui-library/components/molecules/Select/components/multi-select';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
+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 ProgressBar = require('@flipdish/ui-library/components/atoms/ProgressBar');
+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,
+};
+/**
+ * @summary toast notification led by a featured icon
+ */
+const IconNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, icon, progress, onClose, onConfirm, color = 'default', }) => {
+    const showProgress = typeof progress === 'number';
+    return (jsxRuntime.jsxs("div", { className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: icon || iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxRuntime.jsxs("div", { className: cx.cx('flex flex-1 flex-col gap-3 md:pr-8', color !== 'default' && 'md:pt-0.5', showProgress && 'gap-4'), children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), showProgress && jsxRuntime.jsx(ProgressBar.ProgressBar, { labelPosition: "bottom", value: progress, valueFormatter: (value) => `${value}% uploaded...` }), jsxRuntime.jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsxRuntime.jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+};
+/**
+ * @summary toast notification led by a sender's avatar
+ */
+const AvatarNotification = ({ name, content, avatar, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, date, onClose, onConfirm, }) => {
+    return (jsxRuntime.jsxs("div", { className: "relative z-[var(--z-index)] flex max-w-full flex-col items-start gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsxRuntime.jsx(Avatar.Avatar, { size: "md", src: avatar, alt: name, status: "online" }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 pr-8", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: name }), jsxRuntime.jsx("span", { className: "text-sm text-fg-quaternary", children: date })] }), jsxRuntime.jsx("p", { className: "text-sm text-fg-secondary", children: content })] }), jsxRuntime.jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsxRuntime.jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+};
+/**
+ * @summary toast notification featuring a banner image
+ */
+const ImageNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, imageMobile, imageDesktop, onClose, onConfirm, }) => {
+    return (jsxRuntime.jsxs("div", { style: {
+            '--width': '496px',
+        }, className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-3 rounded-xl bg-primary_alt p-4 shadow-lg max-md:ring-1 max-md:ring-secondary_alt xs:w-[var(--width)] xs:flex-row xs:gap-0 md:p-0", children: [jsxRuntime.jsx("div", { className: "-my-px hidden w-40 shrink-0 overflow-hidden rounded-l-xl outline-1 -outline-offset-1 outline-black/10 md:block", children: jsxRuntime.jsx("img", { "aria-hidden": "true", src: imageMobile, alt: "Image Mobile", className: "size-full object-cover" }) }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 rounded-r-xl bg-primary_alt md:gap-3 md:p-4 md:pl-5 md:ring-1 md:ring-secondary_alt", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 pr-8", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsxRuntime.jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), jsxRuntime.jsx("div", { className: "h-40 w-full overflow-hidden rounded-md bg-secondary md:hidden", children: jsxRuntime.jsx("img", { src: imageDesktop, alt: "Image Desktop", className: "size-full object-cover" }) }), jsxRuntime.jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsxRuntime.jsx(Button.Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsxRuntime.jsx(Button.Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsxRuntime.jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsxRuntime.jsx(CloseButton.CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+};
+
+exports.AvatarNotification = AvatarNotification;
+exports.IconNotification = IconNotification;
+exports.ImageNotification = ImageNotification;
+//# sourceMappingURL=index.cjs.map

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

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

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

@@ -0,0 +1,55 @@
+import type { FC } from 'react';
+interface IconNotificationProps {
+    title: string;
+    description: string;
+    confirmLabel?: string;
+    dismissLabel?: string;
+    hideDismissLabel?: boolean;
+    icon?: FC<{
+        className?: string;
+    }>;
+    color?: 'default' | 'brand' | 'gray' | 'error' | 'warning' | 'success';
+    progress?: number;
+    onClose?: () => void;
+    onConfirm?: () => void;
+}
+/**
+ * @summary toast notification led by a featured icon
+ */
+export declare const IconNotification: ({ title, description, confirmLabel, dismissLabel, hideDismissLabel, icon, progress, onClose, onConfirm, color, }: IconNotificationProps) => import("react").JSX.Element;
+interface AvatarNotificationProps {
+    name: string;
+    content: string;
+    avatar: string;
+    date: string;
+    confirmLabel: string;
+    dismissLabel?: string;
+    hideDismissLabel?: boolean;
+    icon?: FC<{
+        className?: string;
+    }>;
+    color?: 'default' | 'brand' | 'gray' | 'error' | 'warning' | 'success';
+    onClose?: () => void;
+    onConfirm?: () => void;
+}
+/**
+ * @summary toast notification led by a sender's avatar
+ */
+export declare const AvatarNotification: ({ name, content, avatar, confirmLabel, dismissLabel, hideDismissLabel, date, onClose, onConfirm, }: AvatarNotificationProps) => import("react").JSX.Element;
+interface ImageNotificationProps {
+    title: string;
+    description: string;
+    confirmLabel: string;
+    dismissLabel?: string;
+    hideDismissLabel?: boolean;
+    imageMobile: string;
+    imageDesktop: string;
+    onClose?: () => void;
+    onConfirm?: () => void;
+}
+/**
+ * @summary toast notification featuring a banner image
+ */
+export declare const ImageNotification: ({ title, description, confirmLabel, dismissLabel, hideDismissLabel, imageMobile, imageDesktop, onClose, onConfirm, }: ImageNotificationProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Notification/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAW/C,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,kHAW9B,qBAAqB,gCAuCvB,CAAC;AAEF,UAAU,uBAAuB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,oGAUhC,uBAAuB,gCAiCzB,CAAC;AAEF,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,sHAU/B,sBAAsB,gCA4CxB,CAAC"}

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

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CheckCircle, AlertCircle, InfoCircle } from '@flipdish/ui-icons';
+import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
+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 { ProgressBar } from '@flipdish/ui-library/components/atoms/ProgressBar';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+
+const iconMap = {
+    default: InfoCircle,
+    brand: InfoCircle,
+    gray: InfoCircle,
+    error: AlertCircle,
+    warning: AlertCircle,
+    success: CheckCircle,
+};
+/**
+ * @summary toast notification led by a featured icon
+ */
+const IconNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, icon, progress, onClose, onConfirm, color = 'default', }) => {
+    const showProgress = typeof progress === 'number';
+    return (jsxs("div", { className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsx(FeaturedIcon, { icon: icon || iconMap[color], color: color === 'default' ? 'gray' : color, theme: color === 'default' ? 'modern' : 'outline', size: "md" }), jsxs("div", { className: cx('flex flex-1 flex-col gap-3 md:pr-8', color !== 'default' && 'md:pt-0.5', showProgress && 'gap-4'), children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), showProgress && jsx(ProgressBar, { labelPosition: "bottom", value: progress, valueFormatter: (value) => `${value}% uploaded...` }), jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsx(CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+};
+/**
+ * @summary toast notification led by a sender's avatar
+ */
+const AvatarNotification = ({ name, content, avatar, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, date, onClose, onConfirm, }) => {
+    return (jsxs("div", { className: "relative z-[var(--z-index)] flex max-w-full flex-col items-start gap-4 rounded-xl bg-primary_alt p-4 shadow-lg ring ring-secondary_alt xs:w-[var(--width)] xs:flex-row", children: [jsx(Avatar, { size: "md", src: avatar, alt: name, status: "online" }), jsxs("div", { className: "flex flex-col gap-3 pr-8", children: [jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("p", { className: "text-sm font-semibold text-fg-primary", children: name }), jsx("span", { className: "text-sm text-fg-quaternary", children: date })] }), jsx("p", { className: "text-sm text-fg-secondary", children: content })] }), jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsx(CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+};
+/**
+ * @summary toast notification featuring a banner image
+ */
+const ImageNotification = ({ title, description, confirmLabel, dismissLabel = 'Dismiss', hideDismissLabel, imageMobile, imageDesktop, onClose, onConfirm, }) => {
+    return (jsxs("div", { style: {
+            '--width': '496px',
+        }, className: "relative z-[var(--z-index)] flex max-w-full flex-col gap-3 rounded-xl bg-primary_alt p-4 shadow-lg max-md:ring-1 max-md:ring-secondary_alt xs:w-[var(--width)] xs:flex-row xs:gap-0 md:p-0", children: [jsx("div", { className: "-my-px hidden w-40 shrink-0 overflow-hidden rounded-l-xl outline-1 -outline-offset-1 outline-black/10 md:block", children: jsx("img", { "aria-hidden": "true", src: imageMobile, alt: "Image Mobile", className: "size-full object-cover" }) }), jsxs("div", { className: "flex flex-col gap-4 rounded-r-xl bg-primary_alt md:gap-3 md:p-4 md:pl-5 md:ring-1 md:ring-secondary_alt", children: [jsxs("div", { className: "flex flex-col gap-1 pr-8", children: [jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }), jsx("p", { className: "text-sm text-fg-secondary", children: description })] }), jsx("div", { className: "h-40 w-full overflow-hidden rounded-md bg-secondary md:hidden", children: jsx("img", { src: imageDesktop, alt: "Image Desktop", className: "size-full object-cover" }) }), jsxs("div", { className: "flex gap-3", children: [!hideDismissLabel && (jsx(Button, { onClick: onClose, size: "sm", color: "link-gray", children: dismissLabel })), confirmLabel && (jsx(Button, { onClick: onConfirm, size: "sm", color: "link-color", children: confirmLabel }))] })] }), jsx("div", { className: "absolute top-2 right-2 flex items-center justify-center", children: jsx(CloseButton, { onClick: onClose, size: "sm", label: "Dismiss" }) })] }));
+};
+
+export { AvatarNotification, IconNotification, ImageNotification };
+//# sourceMappingURL=index.js.map

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

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