@a-type/ui 5.0.22 → 6.0.0

package/dist/components/horizontalList/HorizontalList.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface HorizontalListProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    onCanOpenChange?: (canOpen: boolean) => void;
+    openDirection?: 'up' | 'down';
+    disableInternalOpenToggle?: boolean;
+    style?: React.CSSProperties;
+}
+export declare function HorizontalList({ open: externalOpen, onOpenChange, children, className, contentClassName, onCanOpenChange, openDirection, disableInternalOpenToggle, ...rest }: HorizontalListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/horizontalList/HorizontalList.js

@@ -0,0 +1,119 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '../button/index.js';
+import { CollapsibleSimple } from '../collapsible/Collapsible.js';
+import { Icon } from '../icon/index.js';
+import { ScrollArea } from '../scrollArea/ScrollArea.js';
+import cls from './HorizontalList.module.css';
+export function HorizontalList(_a) {
+    var { open: externalOpen, onOpenChange, children, className, contentClassName, onCanOpenChange, openDirection = 'down', disableInternalOpenToggle } = _a, rest = __rest(_a, ["open", "onOpenChange", "children", "className", "contentClassName", "onCanOpenChange", "openDirection", "disableInternalOpenToggle"]);
+    const contentRef = useRef(null);
+    const containerRef = useRef(null);
+    const rememberedWidth = useRef(0);
+    const lastCanOpenChangeEmitted = useRef(undefined);
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = externalOpen !== null && externalOpen !== void 0 ? externalOpen : internalOpen;
+    const toggleOpen = useCallback(() => {
+        if (externalOpen === undefined) {
+            setInternalOpen((prev) => !prev);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!open);
+    }, [externalOpen, onOpenChange, open]);
+    const [internalCanOpen, setInternalCanOpen] = useState(false);
+    const emitCanOpenChange = useCallback((canOpen) => {
+        if (canOpen !== lastCanOpenChangeEmitted.current) {
+            lastCanOpenChangeEmitted.current = canOpen;
+            setInternalCanOpen(canOpen);
+            onCanOpenChange === null || onCanOpenChange === void 0 ? void 0 : onCanOpenChange(canOpen);
+        }
+    }, [onCanOpenChange]);
+    useEffect(() => {
+        const content = contentRef.current;
+        const container = containerRef.current;
+        if (!content || !container) {
+            return;
+        }
+        const contentWidth = content.scrollWidth;
+        const containerHeight = container.offsetHeight;
+        const containerWidth = container.offsetWidth;
+        if (open && contentWidth > containerWidth) {
+            // measure content width and animate to container width
+            rememberedWidth.current = contentWidth;
+            content.style.setProperty('width', `${containerWidth}px`);
+            content.style.setProperty('flex-wrap', 'wrap');
+            // force measure to get the new height
+            const contentHeight = content.offsetHeight;
+            container
+                .animate([
+                { height: `${containerHeight}px` },
+                { height: `${contentHeight}px` },
+            ], {
+                easing: 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+                duration: 200,
+            })
+                .finished.then(() => {
+                emitCanOpenChange(true);
+            });
+        }
+        else {
+            content.style.setProperty('width', `max-content`);
+            content.style.setProperty('flex-wrap', 'nowrap');
+            // force measure to get new height
+            const contentHeight = content.offsetHeight;
+            container
+                .animate([
+                {
+                    height: `${containerHeight}px`,
+                },
+                {
+                    height: `${contentHeight}px`,
+                },
+            ], {
+                easing: 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+                duration: 200,
+            })
+                .finished.then(() => {
+                requestAnimationFrame(() => {
+                    const canOpen = container.scrollWidth > container.offsetWidth;
+                    emitCanOpenChange(canOpen);
+                });
+            });
+        }
+    }, [open, contentRef, containerRef]);
+    useEffect(() => {
+        if (!containerRef.current || !contentRef.current) {
+            return;
+        }
+        if (open)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            const content = contentRef.current;
+            const container = containerRef.current;
+            if (!content || !container) {
+                return;
+            }
+            const canOpen = container.scrollWidth > container.offsetWidth;
+            emitCanOpenChange(canOpen);
+        });
+        resizeObserver.observe(containerRef.current);
+        resizeObserver.observe(contentRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [contentRef, containerRef, open]);
+    const chevronFlip = openDirection === 'down' ? open : !open;
+    return (_jsxs(ScrollArea.Root, Object.assign({ className: clsx(cls.root, className), "data-state": open ? 'open' : 'closed' }, rest, { children: [_jsx(ScrollArea.Viewport, { ref: containerRef, children: _jsxs("div", { className: clsx(cls.content, contentClassName), ref: contentRef, children: [_jsx(CollapsibleSimple, { horizontal: true, open: internalCanOpen && !disableInternalOpenToggle, "data-can-open": internalCanOpen, "data-disabled": disableInternalOpenToggle ? '' : undefined, className: cls.toggleButtonWrapper, children: _jsx(Button, { onClick: toggleOpen, emphasis: "ghost", className: clsx(cls.toggleButton), "data-open": open, "aria-label": open ? 'Collapse list' : 'Expand list', children: _jsx(Icon, { name: "chevron", className: clsx(cls.chevronIcon), "data-flip": chevronFlip }) }) }), children] }) }), _jsx(ScrollArea.Scrollbar, {}), _jsx(ScrollArea.Scrollbar, { orientation: "horizontal" })] })));
+}
+//# sourceMappingURL=HorizontalList.js.map

package/dist/components/horizontalList/HorizontalList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalList.js","sourceRoot":"","sources":["../../../src/components/horizontalList/HorizontalList.tsx"],"names":[],"mappings":"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"}

package/dist/components/horizontalList/HorizontalList.module.css

@@ -0,0 +1,50 @@
+.root {
+	width: 100%;
+	max-height: 300px;
+	display: flex;
+	flex-direction: column;
+}
+
+.viewport {
+	display: flex;
+	flex-direction: row;
+}
+
+.content {
+	width: max-content;
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-sm);
+	padding: var(--m-spacing-sm) var(--m-spacing-sm) var(--m-spacing-md)
+		var(--m-spacing-sm);
+}
+
+.toggleButton {
+	&[data-open='false'] {
+		height: 100%;
+		border-inline-end: var(--m-lineWidth) solid var(--m-color-neutral);
+		border-top-left-radius: var(--m-radius-sm);
+		border-bottom-left-radius: var(--m-radius-sm);
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}
+
+.toggleButtonWrapper {
+	position: sticky;
+	left: 0;
+	height: 100%;
+	top: var(--m-spacing-sm);
+	z-index: 1;
+	flex-shrink: 0;
+	@apply --mx-bg(inherit);
+}
+
+.chevronIcon {
+	transition: transform var(--m-duration) var(--m-easing);
+	&[data-flip='true'] {
+		transform: rotate(180deg);
+	}
+}

package/dist/components/horizontalList/HorizontalList.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { HorizontalList } from './HorizontalList.js';
+declare const meta: {
+    title: string;
+    component: typeof HorizontalList;
+    argTypes: {};
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+        onCanOpenChange: () => void;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof HorizontalList>;
+export declare const Default: Story;
+export declare const CantOpen: Story;

package/dist/components/horizontalList/HorizontalList.stories.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
+import { HorizontalList } from './HorizontalList.js';
+const meta = {
+    title: 'Components/HorizontalList',
+    component: HorizontalList,
+    argTypes: {},
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", children: "One" }), _jsx(Button, { size: "small", children: "Two" }), _jsx(Button, { size: "small", children: "Three" }), _jsx(Button, { size: "small", children: "Four but long" }), _jsx(Button, { size: "small", children: "Five" }), _jsx(Button, { size: "small", children: "Six" }), _jsx(Button, { size: "small", children: "Seven" }), _jsx(Button, { size: "small", children: "Eight" }), _jsx(Button, { size: "small", children: "Nine" }), _jsx(Button, { size: "small", children: "Ten" }), _jsx(Button, { size: "small", children: "Eleven" }), _jsx(Button, { size: "small", children: "Twelve" }), _jsx(Button, { size: "small", children: "Thirteen" }), _jsx(Button, { size: "small", children: "Fourteen and long" }), _jsx(Button, { size: "small", children: "Fifteen" }), _jsx(Button, { size: "small", children: "Sixteen" }), _jsx(Button, { size: "small", children: "Seventeen" }), _jsx(Button, { size: "small", children: "Eighteen" }), _jsx(Button, { size: "small", children: "Nineteen" }), _jsx(Button, { size: "small", children: "Twenty" }), _jsx(Button, { size: "small", children: "Twenty one" }), _jsx(Button, { size: "small", children: "Twenty two" }), _jsx(Button, { size: "small", children: "Twenty three" }), _jsx(Button, { size: "small", children: "Twenty four" }), _jsx(Button, { emphasis: "primary", style: {
+                        position: 'sticky',
+                        bottom: 8,
+                        right: 8,
+                        marginLeft: 'auto',
+                        flexShrink: 0,
+                        boxShadow: 'var(--m-shadow-sm)',
+                    }, children: _jsx(Icon, { name: "plus" }) })] })),
+        onCanOpenChange: () => { },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        const [open, setOpen] = useState(false);
+        return (_jsx("div", { style: {
+                height: '100%',
+                minHeight: '80vh',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                backgroundColor: 'var(--m-color-neutral-ink)',
+            }, children: _jsxs("div", { style: {
+                    width: 400,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    alignItems: 'stretch',
+                    backgroundColor: 'var(--m-color-neutral-paper)',
+                }, children: [_jsx(Button, { toggled: open, onClick: () => setOpen(!open), style: {
+                            marginBottom: '0.25rem',
+                            marginRight: '0.25rem',
+                            marginTop: 'auto',
+                            alignSelf: 'flex-end',
+                        }, children: open ? 'Close' : 'Open' }), _jsx(HorizontalList, Object.assign({ style: {
+                            borderTop: '1px solid var(--m-color-neutral)',
+                            maxHeight: 200,
+                        }, openDirection: "up" }, args, { open: open, onOpenChange: setOpen }))] }) }));
+    },
+};
+export const CantOpen = {
+    render: (args) => {
+        const [more, setMore] = useState(false);
+        return (_jsx("div", { style: {
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'stretch',
+                justifyContent: 'flex-end',
+                backgroundColor: 'var(--m-color-neutral-paper)',
+            }, children: _jsxs(HorizontalList, Object.assign({ style: {
+                    maxHeight: 200,
+                    borderTop: '1px solid var(--m-color-neutral)',
+                }, openDirection: "up" }, args, { children: [_jsx(Button, { size: "small", toggled: more, onClick: () => setMore(!more), children: "More" }), _jsx(Button, { size: "small", children: "One" }), _jsx(Button, { size: "small", children: "Two" }), more && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", children: "Three" }), _jsx(Button, { size: "small", children: "Four" }), _jsx(Button, { size: "small", children: "Five" }), _jsx(Button, { size: "small", children: "Six" }), _jsx(Button, { size: "small", children: "Seven" }), _jsx(Button, { size: "small", children: "Eight" }), _jsx(Button, { size: "small", children: "Nine" }), _jsx(Button, { size: "small", children: "Ten" }), _jsx(Button, { size: "small", children: "Eleven" }), _jsx(Button, { size: "small", children: "Twelve" }), _jsx(Button, { size: "small", children: "Thirteen" }), _jsx(Button, { size: "small", children: "Fourteen" }), _jsx(Button, { size: "small", children: "Fifteen" })] })), _jsx(Button, { color: "primary", style: {
+                            position: 'sticky',
+                            bottom: 8,
+                            right: 8,
+                            marginLeft: 'auto',
+                            flexShrink: 0,
+                            boxShadow: 'var(--m-shadow-sm)',
+                        }, children: _jsx(Icon, { name: "plus" }) })] })) }));
+    },
+};
+//# sourceMappingURL=HorizontalList.stories.js.map

package/dist/components/horizontalList/HorizontalList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalList.stories.js","sourceRoot":"","sources":["../../../src/components/horizontalList/HorizontalList.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/icon/Icon.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRender } from '@base-ui/react/use-render';
+import classNames from 'clsx';
+import { Spinner } from '../spinner/Spinner.js';
+import cls from './Icon.module.css';
+import { useIconLoading } from './IconLoadingContext.js';
+export const Icon = function Icon(_a) {
+    var { ref, name, size = 15, className, loading: loadingProp, render } = _a, rest = __rest(_a, ["ref", "name", "size", "className", "loading", "render"]);
+    const loadingContext = useIconLoading();
+    const loading = loadingProp !== false && (loadingProp || loadingContext);
+    const slotted = useRender({
+        defaultTagName: 'svg',
+        ref,
+        props: Object.assign({ className: classNames('icon', cls.root, className), width: size, height: size, children: _jsx("use", { xlinkHref: `#icon-${name}` }) }, rest),
+        state: {
+            size,
+            name,
+            loading,
+            icon: true,
+        },
+        render,
+    });
+    if (loading) {
+        return (_jsx(Spinner, { size: size, "data-icon": true, className: classNames('icon', cls.spinner, className) }));
+    }
+    return slotted;
+};
+//# sourceMappingURL=Icon.js.map

package/dist/components/icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAA2B,MAAM,2BAA2B,CAAC;AAC/E,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAYzD,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,IAAI,CAAC,EAUjC;QAViC,EACjC,GAAG,EACH,IAAI,EACJ,IAAI,GAAG,EAAE,EACT,SAAS,EACT,OAAO,EAAE,WAAW,EACpB,MAAM,OAIN,EAHG,IAAI,cAP0B,yDAQjC,CADO;IAIP,MAAM,cAAc,GAAG,cAAc,EAAE,CAAC;IACxC,MAAM,OAAO,GAAG,WAAW,KAAK,KAAK,IAAI,CAAC,WAAW,IAAI,cAAc,CAAC,CAAC;IAEzE,MAAM,OAAO,GAAG,SAAS,CAAC;QACzB,cAAc,EAAE,KAAK;QACrB,GAAG;QACH,KAAK,kBACJ,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClD,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,cAAK,SAAS,EAAE,SAAS,IAAI,EAAE,GAAI,IAC1C,IAAI,CACP;QACD,KAAK,EAAE;YACN,IAAI;YACJ,IAAI;YACJ,OAAO;YACP,IAAI,EAAE,IAAI;SACV;QACD,MAAM;KACN,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACb,OAAO,CACN,KAAC,OAAO,IACP,IAAI,EAAE,IAAI,qBAEV,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,GACpD,CACF,CAAC;IACH,CAAC;IAED,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC"}

package/dist/components/icon/Icon.module.css

@@ -0,0 +1,9 @@
+.root {
+	fill: none;
+	flex-shrink: 0;
+}
+
+.spinner {
+	display: inline-block;
+	flex-shrink: 0;
+}

package/dist/components/icon/Icon.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Icon } from './Icon.js';
+declare const meta: {
+    title: string;
+    component: ({ ref, name, size, className, loading: loadingProp, render, ...rest }: import("./Icon.js").IconProps & {
+        ref?: React.Ref<SVGSVGElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        name: {
+            control: {
+                type: "select";
+                options: readonly ["placeholder", "dots", "globe", "cart", "fridge", "book", "flag", "locate", "tag", "scan", "filter", "add_note", "drag_vertical", "note", "food", "magic", "convert", "offline", "profile", "add_person", "gift", "add_to_list", "check", "snowflake", "clock", "plus", "x", "refresh", "new_window", "warning", "upload", "download", "undo", "grabby", "copy", "maximize", "email", "link", "linkRemove", "camera", "calendar", "page", "gear", "lock", "lockOpen", "send", "pencil", "eye", "eyeClosed", "stopwatch", "zoomIn", "zoomOut", "picture", "arrowLeft", "arrowRight", "arrowUp", "arrowDown", "info", "cardsGrid", "cardsMixed", "cardsRows", "location", "waterDrop", "chevron", "refreshDisabled", "cloud", "cloudDisabled", "trash", "notAllowed", "connection", "connectionBreak", "connectionSplit", "search", "star", "bell", "bell-off", "home", "thermometer", "lightbulb", "next", "playPause", "pause", "previous", "skipStart", "skipEnd", "enterKey", "gamePiece", "share", "italic", "bold", "capitalization", "underline", "textAlignLeft", "textAlignRight", "textAlignCenter", "textJustify", "menu", "paragraph", "highlight", "pushLeft", "pushRight", "pushUp", "pushDown", "bulletList", "orderedList", "quote", "code", "newPage", "bug", "smile", "phone", "sun", "moon", "suitSpade", "suitClub", "suitDiamond", "suitHeart", "chat", "minus", "plus", "flame", "angles", "magnet", "boxSelect", "hand", "pin", "pinFilled"];
+            };
+        };
+    };
+    args: {
+        name: "placeholder";
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Default: Story;
+export declare const All: Story;

package/dist/components/icon/Icon.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../box/Box.js';
+import { Icon } from './Icon.js';
+import { iconNames } from './generated/iconNames.js';
+const meta = {
+    title: 'Components/Icon',
+    component: Icon,
+    argTypes: {
+        name: {
+            control: { type: 'select', options: iconNames },
+        },
+    },
+    args: {
+        name: 'placeholder',
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return _jsx(Icon, Object.assign({}, args));
+    },
+};
+export const All = {
+    render() {
+        return (_jsx("div", { style: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(6, 1fr)',
+                gap: 'var(--m-spacing-xs)',
+            }, children: iconNames.map((name) => (_jsxs(Box, { surface: "ambient", col: true, p: "sm", layout: "center center", border: true, children: [_jsx(Icon, { name: name, size: 25 }), _jsx("span", { style: {
+                            textAlign: 'center',
+                            fontSize: 'var(--m-text-ambient-size)',
+                        }, children: name })] }, name))) }));
+    },
+};
+//# sourceMappingURL=Icon.stories.js.map

package/dist/components/icon/Icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/Icon.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IACf,QAAQ,EAAE;QACT,IAAI,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE;SAC/C;KACD;IACD,IAAI,EAAE;QACL,IAAI,EAAE,aAAa;KACnB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,IAAI,oBAAK,IAAI,EAAI,CAAC;IAC3B,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAU;IACzB,MAAM;QACL,OAAO,CACN,cACC,KAAK,EAAE;gBACN,OAAO,EAAE,MAAM;gBACf,mBAAmB,EAAE,gBAAgB;gBACrC,GAAG,EAAE,qBAAqB;aAC1B,YAEA,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,MAAC,GAAG,IACH,OAAO,EAAC,SAAS,EACjB,GAAG,QACH,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,eAAe,EACtB,MAAM,mBAGN,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,EAC9B,eACC,KAAK,EAAE;4BACN,SAAS,EAAE,QAAQ;4BACnB,QAAQ,EAAE,4BAA4B;yBACtC,YAEA,IAAI,GACC,KAVF,IAAI,CAWJ,CACN,CAAC,GACG,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/icon/IconLoadingContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+const IconLoadingContext = createContext(false);
+export const IconLoadingProvider = IconLoadingContext.Provider;
+export function useIconLoading() {
+    return useContext(IconLoadingContext);
+}
+//# sourceMappingURL=IconLoadingContext.js.map

package/dist/components/icon/IconLoadingContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconLoadingContext.js","sourceRoot":"","sources":["../../../src/components/icon/IconLoadingContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,kBAAkB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;AAChD,MAAM,CAAC,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AAC/D,MAAM,UAAU,cAAc;IAC7B,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAC;AACvC,CAAC"}