@flipdish/ui-library 0.2.2 → 0.3.0

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

@@ -0,0 +1,163 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import useEmblaCarousel from 'embla-carousel-react';
+import { createContext, isValidElement, cloneElement, useState, useCallback, useEffect, useContext } from 'react';
+
+const CarouselContext = createContext(null);
+const useCarousel = () => {
+    const context = useContext(CarouselContext);
+    if (!context) {
+        throw new Error('The `useCarousel` hook must be used within a <Carousel />');
+    }
+    return context;
+};
+const CarouselRoot = ({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }) => {
+    const [carouselRef, api] = useEmblaCarousel({
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+    }, plugins);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState([]);
+    const onInit = useCallback((api) => {
+        if (!api)
+            return;
+        setScrollSnaps(api.scrollSnapList());
+    }, []);
+    const onSelect = useCallback((api) => {
+        if (!api)
+            return;
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+        setSelectedIndex(api.selectedScrollSnap());
+    }, []);
+    const scrollPrev = useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+    const scrollNext = useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            scrollPrev();
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [scrollPrev, scrollNext]);
+    useEffect(() => {
+        if (!api || !setApi)
+            return;
+        setApi(api);
+    }, [api, setApi]);
+    useEffect(() => {
+        if (!api)
+            return;
+        onInit(api);
+        onSelect(api);
+        api.on('reInit', onInit);
+        api.on('reInit', onSelect);
+        api.on('select', onSelect);
+        return () => {
+            api?.off('select', onSelect);
+        };
+    }, [api, onInit, onSelect]);
+    return (jsx(CarouselContext.Provider, { value: {
+            carouselRef,
+            api: api,
+            opts,
+            orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+            scrollPrev,
+            scrollNext,
+            canScrollPrev,
+            canScrollNext,
+            selectedIndex,
+            scrollSnaps,
+        }, children: jsx("div", { onKeyDownCapture: handleKeyDown, className: cx('relative', className), role: "region", "aria-roledescription": "carousel", ...props, children: children }) }));
+};
+const CarouselContent = ({ className, overflowHidden = true, ...props }) => {
+    const { carouselRef, orientation } = useCarousel();
+    return (jsx("div", { ref: carouselRef, className: cx('h-full w-full', overflowHidden && 'overflow-hidden'), children: jsx("div", { className: cx('flex max-h-full', orientation === 'horizontal' ? '' : 'flex-col', className), ...props }) }));
+};
+const CarouselItem = ({ className, ...props }) => {
+    return (
+    // biome-ignore lint/a11y/useSemanticElements: This is a custom component and we need to use a div to wrap the children
+    jsx("div", { role: "group", "aria-roledescription": "slide", className: cx('min-w-0 shrink-0 grow-0 basis-full', className), ...props }));
+};
+const Trigger = ({ className, children, asChild, direction, style, ...props }) => {
+    const { scrollPrev, canScrollNext, scrollNext, canScrollPrev } = useCarousel();
+    const isDisabled = direction === 'prev' ? !canScrollPrev : !canScrollNext;
+    const handleClick = () => {
+        if (isDisabled)
+            return;
+        direction === 'prev' ? scrollPrev() : scrollNext();
+    };
+    const computedClassName = typeof className === 'function' ? className({ isDisabled }) : className;
+    const defaultAriaLabel = direction === 'prev' ? 'Previous slide' : 'Next slide';
+    // If the children is a render prop, we need to pass the necessary props to the render prop.
+    if (typeof children === 'function') {
+        return jsx(Fragment, { children: children({ isDisabled, onClick: handleClick }) });
+    }
+    // If the children is a valid element, we need to clone it and pass the necessary props to the cloned element.
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: handleClick,
+            disabled: isDisabled,
+            'aria-label': defaultAriaLabel,
+            style: { ...children.props.style, ...style },
+            className: [computedClassName, children.props.className].filter(Boolean).join(' ') || undefined,
+        });
+    }
+    return (jsx("button", { "aria-label": defaultAriaLabel, disabled: isDisabled, className: computedClassName, onClick: handleClick, ...props, children: children }));
+};
+const CarouselPrevTrigger = (props) => jsx(Trigger, { ...props, direction: "prev" });
+const CarouselNextTrigger = (props) => jsx(Trigger, { ...props, direction: "next" });
+const CarouselIndicator = ({ index, isSelected = false, children, asChild, className, style }) => {
+    const { api, selectedIndex } = useCarousel();
+    isSelected = isSelected || selectedIndex === index;
+    const handleClick = () => {
+        api?.scrollTo(index);
+    };
+    const computedClassName = typeof className === 'function' ? className({ isSelected }) : className;
+    const defaultAriaLabel = 'Go to slide' + (index + 1);
+    // If the children is a render prop, we need to pass the necessary props to the render prop.
+    if (typeof children === 'function') {
+        return jsx(Fragment, { children: children({ isSelected, onClick: handleClick }) });
+    }
+    // If the children is a valid element, we need to clone it and pass the necessary props to the cloned element.
+    if (asChild && isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: handleClick,
+            'aria-label': defaultAriaLabel,
+            'aria-current': isSelected ? 'true' : undefined,
+            style: { ...children.props.style, ...style },
+            className: [computedClassName, children.props.className].filter(Boolean).join(' ') || undefined,
+        });
+    }
+    return (
+    // biome-ignore lint/a11y/useButtonType: This is a custom component and we need to use a button to wrap the children
+    jsx("button", { "aria-label": defaultAriaLabel, "aria-current": isSelected ? 'true' : undefined, className: computedClassName, onClick: handleClick, children: children }));
+};
+const CarouselIndicatorGroup = ({ children, ...props }) => {
+    const { scrollSnaps } = useCarousel();
+    // If the children is a render prop, we need to pass the index to the render prop.
+    if (typeof children === 'function') {
+        return jsx("nav", { ...props, children: scrollSnaps.map((index) => children({ index })) });
+    }
+    return jsx("nav", { ...props, children: children });
+};
+const Carousel = {
+    Root: CarouselRoot,
+    Content: CarouselContent,
+    Item: CarouselItem,
+    PrevTrigger: CarouselPrevTrigger,
+    NextTrigger: CarouselNextTrigger,
+    IndicatorGroup: CarouselIndicatorGroup,
+    Indicator: CarouselIndicator,
+};
+
+export { Carousel, CarouselContext, useCarousel };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,128 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var hastUtilToJsxRuntime = require('hast-util-to-jsx-runtime');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var web = require('shiki/bundle/web');
+require('@/components/application/code-snippet/code-snippet.style.css');
+var Button = require('@flipdish/ui-library/components/atoms/Button');
+var UtilityButton = require('@flipdish/ui-library/components/atoms/UtilityButton');
+var useClipboard = require('@flipdish/ui-library/hooks/useClipboard');
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+const highlight = async (code, lang) => {
+    const out = await web.codeToHast(code, {
+        lang: lang,
+        defaultColor: 'light',
+        themes: {
+            light: 'github-light',
+            dark: 'github-dark',
+        },
+        colorReplacements: {
+            'github-light': {
+                '#24292e': 'var(--color-text-primary)',
+                '#005cc5': 'var(--color-utility-blue-600)',
+                '#d73a49': 'var(--color-utility-pink-600)',
+                '#6f42c1': 'var(--color-utility-brand-600)',
+                '#032f62': 'var(--color-primary)',
+            },
+            'github-dark': {
+                '#e1e4e8': 'var(--color-text-primary)',
+                '#79b8ff': 'var(--color-utility-blue-600)',
+                '#f97583': 'var(--color-utility-pink-600)',
+                '#b392f0': 'var(--color-utility-brand-600)',
+                '#9ecbff': 'var(--color-primary)',
+            },
+        },
+    });
+    return hastUtilToJsxRuntime.toJsxRuntime(out, {
+        Fragment: React.Fragment,
+        jsx: jsxRuntime.jsx,
+        jsxs: jsxRuntime.jsxs,
+    });
+};
+/**
+ * Tabs context – shares a root ref so the header copy button can find the
+ * active panel's code text without fragile global DOM queries.
+ */
+const TabsRefContext = React.createContext(null);
+/**
+ * Gradient CSS custom properties for the "Show more" overlay.
+ */
+const gradientStyles = {
+    '--gradient-light': 'rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 4.7%, rgba(255, 255, 255, 0.04) 8.9%, rgba(255, 255, 255, 0.07) 12.8%, rgba(255, 255, 255, 0.10) 16.56%, rgba(255, 255, 255, 0.14) 20.37%, rgba(255, 255, 255, 0.18) 24.4%, rgba(255, 255, 255, 0.23) 28.83%, rgba(255, 255, 255, 0.29) 33.84%, rgba(255, 255, 255, 0.35) 39.6%, rgba(255, 255, 255, 0.43) 46.3%, rgba(255, 255, 255, 0.52) 54.1%, rgba(255, 255, 255, 0.62) 63.2%, rgba(255, 255, 255, 0.73) 73.76%, rgba(255, 255, 255, 0.86) 85.97%, #FFFFFF 100%',
+    '--gradient-dark': 'rgba(12, 14, 18, 0) 0%, rgba(12, 14, 18, 0.02) 4.7%, rgba(12, 14, 18, 0.04) 8.9%, rgba(12, 14, 18, 0.07) 12.8%, rgba(12, 14, 18, 0.10) 16.56%, rgba(12, 14, 18, 0.14) 20.37%, rgba(12, 14, 18, 0.18) 24.4%, rgba(12, 14, 18, 0.23) 28.83%, rgba(12, 14, 18, 0.29) 33.84%, rgba(12, 14, 18, 0.35) 39.6%, rgba(12, 14, 18, 0.43) 46.3%, rgba(12, 14, 18, 0.52) 54.1%, rgba(12, 14, 18, 0.62) 63.2%, rgba(12, 14, 18, 0.73) 73.76%, rgba(12, 14, 18, 0.86) 85.97%, rgb(12, 14, 18) 100%',
+};
+const CodeSnippetComponent = ({ children, code, language, showLineNumbers = true, maxHeight, onExpand, className, modern = true, ...otherProps }) => {
+    const [nodes, setNodes] = React.useState(children);
+    const { copy, copied } = useClipboard.useClipboard();
+    const contentRef = React.useRef(null);
+    const [expanded, setExpanded] = React.useState(false);
+    const [exceedsMaxHeight, setExceedsMaxHeight] = React.useState(false);
+    const isInsideTabs = React.useContext(TabsRefContext) !== null;
+    React.useLayoutEffect(() => {
+        if (!code)
+            return;
+        void highlight(code, language).then(setNodes);
+    }, [code, language]);
+    // Measure whether content exceeds maxHeight
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to include maxHeight, nodes, and children in the dependency array to re-measure the content height
+    React.useEffect(() => {
+        if (!maxHeight || !contentRef.current)
+            return;
+        setExceedsMaxHeight(contentRef.current.scrollHeight > maxHeight - 10);
+    }, [maxHeight, nodes, children]);
+    const codeText = code ?? '';
+    const isCollapsible = maxHeight != null && exceedsMaxHeight;
+    const isModern = isInsideTabs || modern;
+    const codeBlock = (jsxRuntime.jsxs("div", { ...otherProps, className: cx.cx('group/code-snippet relative max-w-full overflow-clip rounded-xl bg-primary ring-1', isModern ? 'shadow-lg ring-secondary_alt' : 'ring-secondary', className), children: [jsxRuntime.jsx("div", { ref: contentRef, className: cx.cx('[&>.shiki]:overflow-x-auto [&>code]:w-full', 'font-mono text-sm leading-[22px] whitespace-pre', showLineNumbers ? 'line-numbers' : 'p-4', !expanded && isCollapsible && 'overflow-y-hidden', isCollapsible && 'pb-12'), style: {
+                    maxHeight: expanded || !maxHeight ? 'none' : maxHeight,
+                }, children: nodes ?? code ?? jsxRuntime.jsx("p", { children: "Loading..." }) }), isCollapsible && (jsxRuntime.jsx("div", { style: gradientStyles, className: cx.cx('inset-x-0 bottom-0 flex items-end justify-center bg-linear-(--gradient-light) pb-6 dark:bg-linear-(--gradient-dark)', expanded ? 'sticky h-17' : 'absolute h-47'), children: jsxRuntime.jsx(Button.Button, { color: "secondary", size: "sm", onClick: () => setExpanded(!expanded), children: expanded ? 'Show less' : 'Show more' }) })), (codeText || onExpand) && (jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition duration-100 ease-linear group-hover/code-snippet:opacity-100 has-[:focus-visible]:opacity-100", children: [onExpand && jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "xs", color: "tertiary", icon: uiIcons.Expand06, tooltip: "Expand", onClick: onExpand }), codeText && jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "xs", color: "tertiary", icon: copied ? uiIcons.Check : uiIcons.Copy01, tooltip: "Copy", onClick: () => copy(codeText) })] }))] }));
+    // Inside tabs: tabs component already provides the outer wrapper
+    if (isInsideTabs)
+        return codeBlock;
+    // Modern style (no line numbers): wrap in the shadow container
+    if (isModern) {
+        return jsxRuntime.jsx("div", { className: "rounded-[20px] bg-secondary_alt p-2 ring-1 ring-secondary ring-inset", children: codeBlock });
+    }
+    // Line numbers: just the code block with a simple border
+    return codeBlock;
+};
+const CodeSnippetTabs = ({ children, className, ...otherProps }) => {
+    const rootRef = React.useRef(null);
+    return (jsxRuntime.jsx(TabsRefContext, { value: rootRef, children: jsxRuntime.jsx(reactAriaComponents.Tabs, { ref: rootRef, keyboardActivation: "manual", ...otherProps, className: (values) => cx.cx('group/code-tabs rounded-t-xl rounded-b-[20px] bg-secondary_alt shadow-xs ring-1 ring-secondary ring-inset', typeof className === 'function' ? className(values) : className), children: children }) }));
+};
+const CodeSnippetTabList = ({ children, className, ...otherProps }) => {
+    const { copy, copied } = useClipboard.useClipboard();
+    const tabsRef = React.useContext(TabsRefContext);
+    const handleCopy = () => {
+        const root = tabsRef?.current;
+        if (!root)
+            return;
+        const activePanel = root.querySelector('[role="tabpanel"]:not([hidden])');
+        const text = activePanel?.textContent?.trim() ?? '';
+        if (text)
+            copy(text);
+    };
+    return (jsxRuntime.jsxs("div", { className: "relative flex items-start", children: [jsxRuntime.jsx(reactAriaComponents.TabList, { ...otherProps, className: (values) => cx.cx('flex flex-1 items-center overflow-auto px-3 pt-2 pb-2', typeof className === 'function' ? className(values) : className), children: children }), jsxRuntime.jsx("div", { className: "flex shrink-0 items-center pt-2 pr-2", children: jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "xs", color: "tertiary", icon: copied ? uiIcons.Check : uiIcons.Copy01, tooltip: "Copy", onClick: handleCopy }) })] }));
+};
+const CodeSnippetTab = ({ children, className, ...otherProps }) => {
+    return (jsxRuntime.jsx(reactAriaComponents.Tab, { ...otherProps, className: (state) => cx.cx('z-10 flex cursor-pointer items-center justify-center gap-2 rounded-md px-2 py-1 text-sm font-semibold whitespace-nowrap text-quaternary outline-0 outline-offset-2 outline-focus-ring transition duration-100 ease-linear', (state.isSelected || state.isHovered) && 'text-primary', state.isFocusVisible && 'outline-2', typeof className === 'function' ? className(state) : className), children: children }));
+};
+const CodeSnippetTabPanel = ({ children, className, ...otherProps }) => {
+    return (jsxRuntime.jsx(reactAriaComponents.TabPanel, { ...otherProps, className: (state) => cx.cx('px-2 pb-2', typeof className === 'function' ? className(state) : className), children: children }));
+};
+/**
+ * @summary displays formatted, copyable code blocks with optional tabs
+ */
+const CodeSnippet = CodeSnippetComponent;
+CodeSnippet.Tabs = CodeSnippetTabs;
+CodeSnippet.TabList = CodeSnippetTabList;
+CodeSnippet.Tab = CodeSnippetTab;
+CodeSnippet.TabPanel = CodeSnippetTabPanel;
+
+exports.CodeSnippet = CodeSnippet;
+exports.highlight = highlight;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"sourcesContent":[null],"names":["codeToHast","toJsxRuntime","Fragment","jsx","jsxs","createContext","useState","useClipboard","useRef","useContext","useLayoutEffect","useEffect","_jsxs","cx","_jsx","Button","ButtonUtility","Expand06","Check","Copy01","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

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

@@ -0,0 +1,65 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { TabListProps, TabPanelProps, TabProps, TabsProps } from 'react-aria-components';
+import type { SpecialLanguage, StringLiteralUnion } from 'shiki/bundle/web';
+import '@/components/application/code-snippet/code-snippet.style.css';
+type SupportedLanguages = 'tsx' | 'js' | 'jsx' | 'ts' | 'typescript' | 'javascript' | 'json' | 'html' | 'bash' | 'css';
+type Languages = StringLiteralUnion<SupportedLanguages | SpecialLanguage>;
+export declare const highlight: (code: string, lang: Languages) => Promise<JSX.Element>;
+interface CodeSnippetProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The code to be syntax highlighted. Can be provided in two ways:
+     * 1. As a string via this prop for client-side highlighting
+     * 2. As pre-highlighted nodes via children prop for server-side highlighting
+     */
+    code?: string;
+    /**
+     * The programming language of the code snippet.
+     * Determines syntax highlighting rules.
+     */
+    language: Languages;
+    /**
+     * Whether to display line numbers alongside the code.
+     * When true, renders with a simple border.
+     * When false, renders inside a modern shadow wrapper.
+     * @default true
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Maximum height (in px) before the "Show more" overlay appears.
+     * When omitted, the code block displays at full height.
+     */
+    maxHeight?: number;
+    /**
+     * Callback fired when the expand button is clicked.
+     * The expand button is only rendered when this prop is provided.
+     */
+    onExpand?: () => void;
+    /**
+     * Pre-highlighted code nodes that were generated on the server.
+     * Alternative to passing raw code string via the `code` prop.
+     */
+    children?: ReactNode;
+    /**
+     * Whether to show the modern shadow wrapper.
+     */
+    modern?: boolean;
+}
+declare const CodeSnippetComponent: ({ children, code, language, showLineNumbers, maxHeight, onExpand, className, modern, ...otherProps }: CodeSnippetProps) => import("react").JSX.Element;
+declare const CodeSnippetTabs: ({ children, className, ...otherProps }: TabsProps) => import("react").JSX.Element;
+declare const CodeSnippetTabList: <T extends object>({ children, className, ...otherProps }: TabListProps<T>) => import("react").JSX.Element;
+interface CodeSnippetTabProps extends TabProps {
+    children: ReactNode;
+}
+declare const CodeSnippetTab: ({ children, className, ...otherProps }: CodeSnippetTabProps) => import("react").JSX.Element;
+declare const CodeSnippetTabPanel: ({ children, className, ...otherProps }: TabPanelProps) => import("react").JSX.Element;
+/**
+ * @summary displays formatted, copyable code blocks with optional tabs
+ */
+export declare const CodeSnippet: typeof CodeSnippetComponent & {
+    Tabs: typeof CodeSnippetTabs;
+    TabList: typeof CodeSnippetTabList;
+    Tab: typeof CodeSnippetTab;
+    TabPanel: typeof CodeSnippetTabPanel;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9F,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,OAAO,8DAA8D,CAAC;AAMtE,KAAK,kBAAkB,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,YAAY,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AACvH,KAAK,SAAS,GAAG,kBAAkB,CAAC,kBAAkB,GAAG,eAAe,CAAC,CAAC;AAE1E,eAAO,MAAM,SAAS,GAAU,MAAM,MAAM,EAAE,MAAM,SAAS,yBA+B5D,CAAC;AAmBF,UAAU,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,QAAA,MAAM,oBAAoB,GAAI,sGAU3B,gBAAgB,gCAqFlB,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,wCAAwC,SAAS,gCAoBzE,CAAC;AAEF,QAAA,MAAM,kBAAkB,GAAI,CAAC,SAAS,MAAM,EAAE,wCAAwC,YAAY,CAAC,CAAC,CAAC,gCA4BpG,CAAC;AAEF,UAAU,mBAAoB,SAAQ,QAAQ;IAC5C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,GAAI,wCAAwC,mBAAmB,gCAgBlF,CAAC;AAEF,QAAA,MAAM,mBAAmB,GAAI,wCAAwC,aAAa,gCAMjF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAA2B,OAAO,oBAAoB,GAAG;IAC/E,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,GAAG,EAAE,OAAO,cAAc,CAAC;IAC3B,QAAQ,EAAE,OAAO,mBAAmB,CAAC;CACtC,CAAC"}

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

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Expand06, Check, Copy01 } from '@flipdish/ui-icons';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { createContext, useState, useRef, useContext, useLayoutEffect, useEffect, Fragment } from 'react';
+import { Tabs, TabList, Tab, TabPanel } from 'react-aria-components';
+import { codeToHast } from 'shiki/bundle/web';
+import '@/components/application/code-snippet/code-snippet.style.css';
+import { Button } from '@flipdish/ui-library/components/atoms/Button';
+import { ButtonUtility } from '@flipdish/ui-library/components/atoms/UtilityButton';
+import { useClipboard } from '@flipdish/ui-library/hooks/useClipboard';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+
+const highlight = async (code, lang) => {
+    const out = await codeToHast(code, {
+        lang: lang,
+        defaultColor: 'light',
+        themes: {
+            light: 'github-light',
+            dark: 'github-dark',
+        },
+        colorReplacements: {
+            'github-light': {
+                '#24292e': 'var(--color-text-primary)',
+                '#005cc5': 'var(--color-utility-blue-600)',
+                '#d73a49': 'var(--color-utility-pink-600)',
+                '#6f42c1': 'var(--color-utility-brand-600)',
+                '#032f62': 'var(--color-primary)',
+            },
+            'github-dark': {
+                '#e1e4e8': 'var(--color-text-primary)',
+                '#79b8ff': 'var(--color-utility-blue-600)',
+                '#f97583': 'var(--color-utility-pink-600)',
+                '#b392f0': 'var(--color-utility-brand-600)',
+                '#9ecbff': 'var(--color-primary)',
+            },
+        },
+    });
+    return toJsxRuntime(out, {
+        Fragment,
+        jsx,
+        jsxs,
+    });
+};
+/**
+ * Tabs context – shares a root ref so the header copy button can find the
+ * active panel's code text without fragile global DOM queries.
+ */
+const TabsRefContext = createContext(null);
+/**
+ * Gradient CSS custom properties for the "Show more" overlay.
+ */
+const gradientStyles = {
+    '--gradient-light': 'rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 4.7%, rgba(255, 255, 255, 0.04) 8.9%, rgba(255, 255, 255, 0.07) 12.8%, rgba(255, 255, 255, 0.10) 16.56%, rgba(255, 255, 255, 0.14) 20.37%, rgba(255, 255, 255, 0.18) 24.4%, rgba(255, 255, 255, 0.23) 28.83%, rgba(255, 255, 255, 0.29) 33.84%, rgba(255, 255, 255, 0.35) 39.6%, rgba(255, 255, 255, 0.43) 46.3%, rgba(255, 255, 255, 0.52) 54.1%, rgba(255, 255, 255, 0.62) 63.2%, rgba(255, 255, 255, 0.73) 73.76%, rgba(255, 255, 255, 0.86) 85.97%, #FFFFFF 100%',
+    '--gradient-dark': 'rgba(12, 14, 18, 0) 0%, rgba(12, 14, 18, 0.02) 4.7%, rgba(12, 14, 18, 0.04) 8.9%, rgba(12, 14, 18, 0.07) 12.8%, rgba(12, 14, 18, 0.10) 16.56%, rgba(12, 14, 18, 0.14) 20.37%, rgba(12, 14, 18, 0.18) 24.4%, rgba(12, 14, 18, 0.23) 28.83%, rgba(12, 14, 18, 0.29) 33.84%, rgba(12, 14, 18, 0.35) 39.6%, rgba(12, 14, 18, 0.43) 46.3%, rgba(12, 14, 18, 0.52) 54.1%, rgba(12, 14, 18, 0.62) 63.2%, rgba(12, 14, 18, 0.73) 73.76%, rgba(12, 14, 18, 0.86) 85.97%, rgb(12, 14, 18) 100%',
+};
+const CodeSnippetComponent = ({ children, code, language, showLineNumbers = true, maxHeight, onExpand, className, modern = true, ...otherProps }) => {
+    const [nodes, setNodes] = useState(children);
+    const { copy, copied } = useClipboard();
+    const contentRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);
+    const isInsideTabs = useContext(TabsRefContext) !== null;
+    useLayoutEffect(() => {
+        if (!code)
+            return;
+        void highlight(code, language).then(setNodes);
+    }, [code, language]);
+    // Measure whether content exceeds maxHeight
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to include maxHeight, nodes, and children in the dependency array to re-measure the content height
+    useEffect(() => {
+        if (!maxHeight || !contentRef.current)
+            return;
+        setExceedsMaxHeight(contentRef.current.scrollHeight > maxHeight - 10);
+    }, [maxHeight, nodes, children]);
+    const codeText = code ?? '';
+    const isCollapsible = maxHeight != null && exceedsMaxHeight;
+    const isModern = isInsideTabs || modern;
+    const codeBlock = (jsxs("div", { ...otherProps, className: cx('group/code-snippet relative max-w-full overflow-clip rounded-xl bg-primary ring-1', isModern ? 'shadow-lg ring-secondary_alt' : 'ring-secondary', className), children: [jsx("div", { ref: contentRef, className: cx('[&>.shiki]:overflow-x-auto [&>code]:w-full', 'font-mono text-sm leading-[22px] whitespace-pre', showLineNumbers ? 'line-numbers' : 'p-4', !expanded && isCollapsible && 'overflow-y-hidden', isCollapsible && 'pb-12'), style: {
+                    maxHeight: expanded || !maxHeight ? 'none' : maxHeight,
+                }, children: nodes ?? code ?? jsx("p", { children: "Loading..." }) }), isCollapsible && (jsx("div", { style: gradientStyles, className: cx('inset-x-0 bottom-0 flex items-end justify-center bg-linear-(--gradient-light) pb-6 dark:bg-linear-(--gradient-dark)', expanded ? 'sticky h-17' : 'absolute h-47'), children: jsx(Button, { color: "secondary", size: "sm", onClick: () => setExpanded(!expanded), children: expanded ? 'Show less' : 'Show more' }) })), (codeText || onExpand) && (jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition duration-100 ease-linear group-hover/code-snippet:opacity-100 has-[:focus-visible]:opacity-100", children: [onExpand && jsx(ButtonUtility, { size: "xs", color: "tertiary", icon: Expand06, tooltip: "Expand", onClick: onExpand }), codeText && jsx(ButtonUtility, { size: "xs", color: "tertiary", icon: copied ? Check : Copy01, tooltip: "Copy", onClick: () => copy(codeText) })] }))] }));
+    // Inside tabs: tabs component already provides the outer wrapper
+    if (isInsideTabs)
+        return codeBlock;
+    // Modern style (no line numbers): wrap in the shadow container
+    if (isModern) {
+        return jsx("div", { className: "rounded-[20px] bg-secondary_alt p-2 ring-1 ring-secondary ring-inset", children: codeBlock });
+    }
+    // Line numbers: just the code block with a simple border
+    return codeBlock;
+};
+const CodeSnippetTabs = ({ children, className, ...otherProps }) => {
+    const rootRef = useRef(null);
+    return (jsx(TabsRefContext, { value: rootRef, children: jsx(Tabs, { ref: rootRef, keyboardActivation: "manual", ...otherProps, className: (values) => cx('group/code-tabs rounded-t-xl rounded-b-[20px] bg-secondary_alt shadow-xs ring-1 ring-secondary ring-inset', typeof className === 'function' ? className(values) : className), children: children }) }));
+};
+const CodeSnippetTabList = ({ children, className, ...otherProps }) => {
+    const { copy, copied } = useClipboard();
+    const tabsRef = useContext(TabsRefContext);
+    const handleCopy = () => {
+        const root = tabsRef?.current;
+        if (!root)
+            return;
+        const activePanel = root.querySelector('[role="tabpanel"]:not([hidden])');
+        const text = activePanel?.textContent?.trim() ?? '';
+        if (text)
+            copy(text);
+    };
+    return (jsxs("div", { className: "relative flex items-start", children: [jsx(TabList, { ...otherProps, className: (values) => cx('flex flex-1 items-center overflow-auto px-3 pt-2 pb-2', typeof className === 'function' ? className(values) : className), children: children }), jsx("div", { className: "flex shrink-0 items-center pt-2 pr-2", children: jsx(ButtonUtility, { size: "xs", color: "tertiary", icon: copied ? Check : Copy01, tooltip: "Copy", onClick: handleCopy }) })] }));
+};
+const CodeSnippetTab = ({ children, className, ...otherProps }) => {
+    return (jsx(Tab, { ...otherProps, className: (state) => cx('z-10 flex cursor-pointer items-center justify-center gap-2 rounded-md px-2 py-1 text-sm font-semibold whitespace-nowrap text-quaternary outline-0 outline-offset-2 outline-focus-ring transition duration-100 ease-linear', (state.isSelected || state.isHovered) && 'text-primary', state.isFocusVisible && 'outline-2', typeof className === 'function' ? className(state) : className), children: children }));
+};
+const CodeSnippetTabPanel = ({ children, className, ...otherProps }) => {
+    return (jsx(TabPanel, { ...otherProps, className: (state) => cx('px-2 pb-2', typeof className === 'function' ? className(state) : className), children: children }));
+};
+/**
+ * @summary displays formatted, copyable code blocks with optional tabs
+ */
+const CodeSnippet = CodeSnippetComponent;
+CodeSnippet.Tabs = CodeSnippetTabs;
+CodeSnippet.TabList = CodeSnippetTabList;
+CodeSnippet.Tab = CodeSnippetTab;
+CodeSnippet.TabPanel = CodeSnippetTabPanel;
+
+export { CodeSnippet, highlight };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+const ContentDivider = ({ type, children, className }) => {
+    const styles = {
+        'single-line': 'flex items-center gap-x-2',
+        'dual-line': 'flex justify-center gap-x-2 border-y border-secondary py-3',
+        'background-fill': 'flex justify-center gap-x-2 rounded-lg bg-secondary py-2',
+    };
+    return (jsxRuntime.jsxs("div", { className: cx.cx('w-full shrink-0', styles[type], className), children: [type === 'single-line' && jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border-secondary" }), children, type === 'single-line' && jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border-secondary" })] }));
+};
+
+exports.ContentDivider = ContentDivider;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/ContentDivider/index.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx"],"mappings":";;;;;AASO,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAuB,KAAI;AACnF,IAAA,MAAM,MAAM,GAAG;AACb,QAAA,aAAa,EAAE,2BAA2B;AAC1C,QAAA,WAAW,EAAE,4DAA4D;AACzE,QAAA,iBAAiB,EAAE,0DAA0D;KAC9E;AAED,IAAA,QACEA,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,KAAE,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC3D,IAAI,KAAK,aAAa,IAAIC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,GAAG,EAC7E,QAAQ,EACR,IAAI,KAAK,aAAa,IAAIA,wBAAK,SAAS,EAAC,iCAAiC,EAAA,CAAG,CAAA,EAAA,CAC1E;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+interface ContentDividerProps {
+    type: 'single-line' | 'dual-line' | 'background-fill';
+    children: ReactNode;
+    className?: string;
+}
+export declare const ContentDivider: ({ type, children, className }: ContentDividerProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ContentDivider/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,aAAa,GAAG,WAAW,GAAG,iBAAiB,CAAC;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,GAAI,+BAA+B,mBAAmB,gCAchF,CAAC"}

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

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+
+const ContentDivider = ({ type, children, className }) => {
+    const styles = {
+        'single-line': 'flex items-center gap-x-2',
+        'dual-line': 'flex justify-center gap-x-2 border-y border-secondary py-3',
+        'background-fill': 'flex justify-center gap-x-2 rounded-lg bg-secondary py-2',
+    };
+    return (jsxs("div", { className: cx('w-full shrink-0', styles[type], className), children: [type === 'single-line' && jsx("div", { className: "h-px flex-1 bg-border-secondary" }), children, type === 'single-line' && jsx("div", { className: "h-px flex-1 bg-border-secondary" })] }));
+};
+
+export { ContentDivider };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/ContentDivider/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AASO,MAAM,cAAc,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAuB,KAAI;AACnF,IAAA,MAAM,MAAM,GAAG;AACb,QAAA,aAAa,EAAE,2BAA2B;AAC1C,QAAA,WAAW,EAAE,4DAA4D;AACzE,QAAA,iBAAiB,EAAE,0DAA0D;KAC9E;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAC3D,IAAI,KAAK,aAAa,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,GAAG,EAC7E,QAAQ,EACR,IAAI,KAAK,aAAa,IAAIA,aAAK,SAAS,EAAC,iCAAiC,EAAA,CAAG,CAAA,EAAA,CAC1E;AAEV;;;;"}

package/dist/components/molecules/CreditCard/components/icons.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const PaypassIcon = (props) => {
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: this is an icon
+    jsxRuntime.jsxs("svg", { width: "20", height: "24", viewBox: "0 0 20 24", fill: "none", ...props, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1307_7682)", children: jsxRuntime.jsx("path", { d: "M15.1429 1.28571C17.0236 4.54326 18.0138 8.23849 18.0138 12C18.0138 15.7615 17.0236 19.4567 15.1429 22.7143M10.4286 3.64285C11.8956 6.18374 12.6679 9.06602 12.6679 12C12.6679 14.934 11.8956 17.8162 10.4286 20.3571M5.92859 5.80713C6.98933 7.66394 7.54777 9.77022 7.54777 11.9143C7.54777 14.0583 6.98933 16.1646 5.92859 18.0214M1.42859 8.14285C2.19306 9.29983 2.59834 10.6362 2.59834 12C2.59834 13.3638 2.19306 14.7002 1.42859 15.8571", stroke: "currentColor", strokeWidth: "2.57143", strokeLinecap: "round" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_1307_7682", children: jsxRuntime.jsx("rect", { width: "20", height: "24", fill: "white" }) }) })] }));
+};
+const MastercardIconWhite = (props) => {
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: this is an icon
+    jsxRuntime.jsxs("svg", { width: "30", height: "19", viewBox: "0 0 30 19", fill: "none", ...props, children: [jsxRuntime.jsx("path", { opacity: "0.5", fillRule: "evenodd", clipRule: "evenodd", d: "M14.9053 16.4392C13.3266 17.7699 11.2787 18.5733 9.04092 18.5733C4.04776 18.5733 0 14.5737 0 9.63994C0 4.70619 4.04776 0.706604 9.04092 0.706604C11.2787 0.706604 13.3266 1.50993 14.9053 2.84066C16.484 1.50993 18.5319 0.706604 20.7697 0.706604C25.7629 0.706604 29.8106 4.70619 29.8106 9.63994C29.8106 14.5737 25.7629 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.7699 14.9053 16.4392Z", fill: "white" }), jsxRuntime.jsx("path", { opacity: "0.5", fillRule: "evenodd", clipRule: "evenodd", d: "M14.9053 16.4392C16.8492 14.8007 18.0818 12.3625 18.0818 9.63994C18.0818 6.91733 16.8492 4.47919 14.9053 2.84066C16.484 1.50993 18.5319 0.706604 20.7697 0.706604C25.7628 0.706604 29.8106 4.70619 29.8106 9.63994C29.8106 14.5737 25.7628 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.7699 14.9053 16.4392Z", fill: "white" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.9053 16.4392C16.8492 14.8007 18.0818 12.3625 18.0818 9.63995C18.0818 6.91736 16.8492 4.47924 14.9053 2.8407C12.9614 4.47924 11.7288 6.91736 11.7288 9.63995C11.7288 12.3625 12.9614 14.8007 14.9053 16.4392Z", fill: "white" })] }));
+};
+const MastercardIcon = (props) => {
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: this is an icon
+    jsxRuntime.jsxs("svg", { width: "30", height: "19", viewBox: "0 0 30 19", fill: "none", ...props, children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.9053 16.4393C13.3266 17.77 11.2787 18.5733 9.04092 18.5733C4.04776 18.5733 0 14.5737 0 9.64C0 4.70625 4.04776 0.706665 9.04092 0.706665C11.2787 0.706665 13.3266 1.51 14.9053 2.84072C16.484 1.51 18.5319 0.706665 20.7697 0.706665C25.7629 0.706665 29.8106 4.70625 29.8106 9.64C29.8106 14.5737 25.7629 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.77 14.9053 16.4393Z", fill: "#ED0006" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.9053 16.4393C16.8492 14.8007 18.0818 12.3626 18.0818 9.64C18.0818 6.91739 16.8492 4.47925 14.9053 2.84072C16.484 1.50999 18.5319 0.706665 20.7697 0.706665C25.7628 0.706665 29.8106 4.70625 29.8106 9.64C29.8106 14.5737 25.7628 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.77 14.9053 16.4393Z", fill: "#F9A000" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.9053 16.4393C16.8492 14.8008 18.0818 12.3627 18.0818 9.64007C18.0818 6.91748 16.8492 4.47936 14.9053 2.84082C12.9614 4.47936 11.7288 6.91748 11.7288 9.64007C11.7288 12.3627 12.9614 14.8008 14.9053 16.4393Z", fill: "#FF5E00" })] }));
+};
+
+exports.MastercardIcon = MastercardIcon;
+exports.MastercardIconWhite = MastercardIconWhite;
+exports.PaypassIcon = PaypassIcon;
+//# sourceMappingURL=icons.cjs.map