@a-type/ui 0.8.27 → 0.8.29

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ScrollAreaProps } from '../scrollArea/ScrollArea.js';
+export interface HorizontalListProps {
+    open?: boolean;
+    children: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    background?: ScrollAreaProps['background'];
+}
+export declare function HorizontalList({ open, children, className, contentClassName, background, ...rest }: HorizontalListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,78 @@
+// @unocss-include
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const ScrollArea_js_1 = require("../scrollArea/ScrollArea.js");
+function HorizontalList(_a) {
+    var { open, children, className, contentClassName, background } = _a, rest = __rest(_a, ["open", "children", "className", "contentClassName", "background"]);
+    const contentRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const rememberedWidth = (0, react_1.useRef)(0);
+    (0, react_1.useEffect)(() => {
+        const content = contentRef.current;
+        const container = containerRef.current;
+        if (!content || !container) {
+            return;
+        }
+        const contentWidth = content.offsetWidth;
+        const containerHeight = container.offsetHeight;
+        if (open) {
+            // measure content width and animate to container width
+            const containerWidth = container.offsetWidth;
+            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;
+            console.log({ containerHeight, contentHeight });
+            container
+                .animate([
+                { height: `${containerHeight}px` },
+                { height: `${contentHeight}px` },
+            ], {
+                easing: 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
+                duration: 200,
+            })
+                .finished.then(() => { });
+        }
+        else {
+            content.style.setProperty('width', `auto`);
+            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(() => { });
+        }
+    }, [open, contentRef, containerRef]);
+    return ((0, jsx_runtime_1.jsxs)(ScrollArea_js_1.ScrollAreaRoot, Object.assign({ className: (0, clsx_1.default)('flex flex-col', 'layer-components:max-h-300px', className), background: background, "data-state": open ? 'open' : 'closed' }, rest, { children: [(0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollAreaViewport, Object.assign({ ref: containerRef }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)('layer-components:px-3 layer-components:pt-3 layer-components:pb-4 layer-components:gap-2', 'flex flex-row gap-2 flex-shrink-0 w-max-content w-auto)', contentClassName), ref: contentRef }, { children: children })) })), (0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollAreaScrollbar, {}), (0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollAreaScrollbar, { orientation: "horizontal" })] })));
+}
+exports.HorizontalList = HorizontalList;
+//# sourceMappingURL=HorizontalList.js.map

package/dist/cjs/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/cjs/components/horizontalList/HorizontalList.stories.d.ts

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

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

@@ -0,0 +1,28 @@
+// @unocss-include
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const HorizontalList_js_1 = require("./HorizontalList.js");
+const button_js_1 = require("../button.js");
+const icon_js_1 = require("../icon.js");
+const react_1 = require("react");
+const meta = {
+    title: 'HorizontalList',
+    component: HorizontalList_js_1.HorizontalList,
+    argTypes: {},
+    args: {
+        children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "One" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Two" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Three" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Four but long" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Five" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Six" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Seven" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Eight" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Nine" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Ten" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Eleven" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Twelve" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Thirteen" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Fourteen and long" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Fifteen" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Sixteen" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Seventeen" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Eighteen" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Nineteen" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Twenty" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Twenty one" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Twenty two" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Twenty three" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Twenty four" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "primary", className: "sticky right-2 bottom-2 flex-shrink-0 shadow-sm ml-auto" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "plus" }) }))] })),
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+exports.Default = {
+    render: (args) => {
+        const [open, setOpen] = (0, react_1.useState)(false);
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "bg-black flex flex-col items-center h-full" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white w-400px flex flex-col items-stretch h-full" }, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ toggled: open, onClick: () => setOpen(!open), className: "mt-auto mb-1 mr-1 self-end" }, { children: open ? 'Close' : 'Open' })), (0, jsx_runtime_1.jsx)(HorizontalList_js_1.HorizontalList, Object.assign({ className: "border-t border-t-solid border-t-black max-h-200px", open: open }, args))] })) })));
+    },
+};
+//# sourceMappingURL=HorizontalList.stories.js.map

package/dist/cjs/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":";;;;AACA,2DAAqD;AACrD,4CAAsC;AACtC,wCAAkC;AAClC,iCAAiC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,kCAAc;IACzB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,6DACC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,yBAAa,EACjC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,yBAAa,EACjC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,2BAAe,EACnC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,mCAAuB,EAC3C,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,0BAAc,EAClC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,yBAAa,EACjC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,2BAAe,EACnC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,2BAAe,EACnC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,0BAAc,EAClC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,yBAAa,EACjC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,4BAAgB,EACpC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,4BAAgB,EACpC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,8BAAkB,EACtC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,uCAA2B,EAC/C,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,6BAAiB,EACrC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,6BAAiB,EACrC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,+BAAmB,EACvC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,8BAAkB,EACtC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,8BAAkB,EACtC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,4BAAgB,EACpC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,gCAAoB,EACxC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,gCAAoB,EACxC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,kCAAsB,EAC1C,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,iCAAqB,EACzC,uBAAC,kBAAM,kBACN,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,yDAAyD,gBAEnE,uBAAC,cAAI,IAAC,IAAI,EAAC,MAAM,GAAG,IACZ,IACP,CACH;KACD;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACqC,CAAC;AAExC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;QACxC,OAAO,CACN,8CAAK,SAAS,EAAC,4CAA4C,gBAC1D,+CAAK,SAAS,EAAC,qDAAqD,iBACnE,uBAAC,kBAAM,kBACN,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAC7B,SAAS,EAAC,4BAA4B,gBAErC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,IAChB,EACT,uBAAC,kCAAc,kBACd,SAAS,EAAC,oDAAoD,EAC9D,IAAI,EAAE,IAAI,IACN,IAAI,EACP,KACG,IACD,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

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

@@ -0,0 +1 @@
+export * from './horizontalList/HorizontalList.js';

package/dist/cjs/components/horizontalList.js

@@ -0,0 +1,19 @@
+// @unocss-include
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./horizontalList/HorizontalList.js"), exports);
+//# sourceMappingURL=horizontalList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"horizontalList.js","sourceRoot":"","sources":["../../../src/components/horizontalList.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,qEAAmD"}

package/dist/cjs/components/scrollArea/ScrollArea.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" resolution-mode="require"/>
+import * as Primitive from '@radix-ui/react-scroll-area';
+export interface ScrollAreaRootProps extends Primitive.ScrollAreaProps {
+    background?: 'white' | 'wash' | 'primary-wash' | 'primary' | 'black';
+}
+export declare const ScrollAreaRoot: import("react").ForwardRefExoticComponent<ScrollAreaRootProps & import("react").RefAttributes<any>>;
+export declare const ScrollAreaViewport: import("react").FunctionComponent<Omit<Primitive.ScrollAreaViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>;
+export declare const ScrollAreaScrollbarRoot: import("react").FunctionComponent<Omit<Primitive.ScrollAreaScrollbarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>;
+export declare const ScrollAreaThumb: import("react").FunctionComponent<Omit<Primitive.ScrollAreaThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>;
+export declare const ScrollAreaScrollbar: import("react").ForwardRefExoticComponent<Primitive.ScrollAreaScrollbarProps & import("react").RefAttributes<any>>;
+export interface ScrollAreaProps extends Primitive.ScrollAreaProps {
+    background?: ScrollAreaRootProps['background'];
+    orientation?: 'vertical' | 'both';
+}
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<any>>;

package/dist/cjs/components/scrollArea/ScrollArea.js

@@ -0,0 +1,69 @@
+// @unocss-include
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollArea = exports.ScrollAreaScrollbar = exports.ScrollAreaThumb = exports.ScrollAreaScrollbarRoot = exports.ScrollAreaViewport = exports.ScrollAreaRoot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Primitive = __importStar(require("@radix-ui/react-scroll-area"));
+const hooks_js_1 = require("../../hooks.js");
+const react_1 = require("react");
+const ScrollAreaRootImpl = (0, hooks_js_1.withClassName)(Primitive.Root, 'overflow-hidden bg-[var(--bg)]', 'layer-components:[--bg:var(--color-wash)] layer-components:[--shadow:var(--color-shadow-1))]');
+exports.ScrollAreaRoot = (0, react_1.forwardRef)(function ScrollAreaRoot(_a, ref) {
+    var { background = 'wash' } = _a, props = __rest(_a, ["background"]);
+    const bgStyle = (0, react_1.useMemo)(() => ({
+        '--bg': `var(--color-${background})`,
+        '--shadow': `var(--color-${shadowMap[background]})`,
+    }), [background]);
+    return (0, jsx_runtime_1.jsx)(ScrollAreaRootImpl, Object.assign({ ref: ref, style: bgStyle }, props));
+});
+exports.ScrollAreaViewport = (0, hooks_js_1.withClassName)(Primitive.Viewport, 'h-full w-full', '[background:linear-gradient(var(--bg)_30%,rgba(255,255,255,0))_center_top,linear-gradient(rgba(255,255,255,0),var(--bg)_70%)_center_bottom,radial-gradient(farthest-side_at_50%_0,var(--shadow),rgba(0,0,0,0))_center_top,radial-gradient(farthest-side_at_50%_100%,var(--shadow),rgba(0,0,0,0))_center_bottom]', '![background-repeat:no-repeat] ![background-size:100%_40px,100%_40px,100%_14px,100%_14px]', '![background-attachment:local,local,scroll,scroll]');
+exports.ScrollAreaScrollbarRoot = (0, hooks_js_1.withClassName)(Primitive.Scrollbar, 'layer-components:flex layer-components:select-none layer-components:touch-none layer-components:p-0.5 layer-components:bg-gray-2 layer-components:transition-colors layer-components:duration-160ms layer-components:ease-out', 'layer-components:hover:bg-gray-3', 'layer-components:[&[data-orientation=vertical]]:w-2.5', 'layer-components:[&[data-orientation=horizontal]]:flex-col layer-components:[&[data-orientation=horizontal]]:h-2.5');
+exports.ScrollAreaThumb = (0, hooks_js_1.withClassName)(Primitive.Thumb, 'layer-components:flex-1 layer-components:rounded-lg layer-components:relative layer-components:bg-gray-5', 'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:min-w-44px before:min-h-44px');
+exports.ScrollAreaScrollbar = (0, react_1.forwardRef)(function ScrollAreaScrollbar(props, ref) {
+    return ((0, jsx_runtime_1.jsx)(exports.ScrollAreaScrollbarRoot, Object.assign({}, props, { ref: ref }, { children: (0, jsx_runtime_1.jsx)(exports.ScrollAreaThumb, {}) })));
+});
+exports.ScrollArea = (0, react_1.forwardRef)(function ScrollArea(_a, ref) {
+    var { children, orientation } = _a, props = __rest(_a, ["children", "orientation"]);
+    return ((0, jsx_runtime_1.jsxs)(exports.ScrollAreaRoot, Object.assign({ ref: ref }, props, { children: [(0, jsx_runtime_1.jsx)(exports.ScrollAreaViewport, { children: children }), (0, jsx_runtime_1.jsx)(exports.ScrollAreaScrollbar, {}), orientation === 'both' && ((0, jsx_runtime_1.jsx)(exports.ScrollAreaScrollbar, { orientation: "horizontal" }))] })));
+});
+const shadowMap = {
+    white: 'shadow-1',
+    wash: 'shadow-1',
+    'primary-wash': 'shadow-2',
+    primary: 'shadow-1',
+    black: 'overlay',
+};
+//# sourceMappingURL=ScrollArea.js.map

package/dist/cjs/components/scrollArea/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sourceRoot":"","sources":["../../../../src/components/scrollArea/ScrollArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAAyD;AACzD,6CAA+C;AAC/C,iCAA4C;AAE5C,MAAM,kBAAkB,GAAG,IAAA,wBAAa,EACvC,SAAS,CAAC,IAAI,EACd,gCAAgC,EAChC,+EAA+E,CAC/E,CAAC;AAMW,QAAA,cAAc,GAAG,IAAA,kBAAU,EACvC,SAAS,cAAc,CAAC,EAAiC,EAAE,GAAG;QAAtC,EAAE,UAAU,GAAG,MAAM,OAAY,EAAP,KAAK,cAA/B,cAAiC,CAAF;IACtD,MAAM,OAAO,GAAQ,IAAA,eAAO,EAC3B,GAAG,EAAE,CAAC,CAAC;QACN,MAAM,EAAE,eAAe,UAAU,GAAG;QACpC,UAAU,EAAE,eAAe,SAAS,CAAC,UAAU,CAAC,GAAG;KACnD,CAAC,EACF,CAAC,UAAU,CAAC,CACZ,CAAC;IACF,OAAO,uBAAC,kBAAkB,kBAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,IAAM,KAAK,EAAI,CAAC;AACpE,CAAC,CACD,CAAC;AAEW,QAAA,kBAAkB,GAAG,IAAA,wBAAa,EAC9C,SAAS,CAAC,QAAQ,EAClB,eAAe,EACf,iTAAiT,EACjT,2FAA2F,EAC3F,oDAAoD,CACpD,CAAC;AAEW,QAAA,uBAAuB,GAAG,IAAA,wBAAa,EACnD,SAAS,CAAC,SAAS,EACnB,0GAA0G,EAC1G,kCAAkC,EAClC,uDAAuD,EACvD,oEAAoE,CACpE,CAAC;AAEW,QAAA,eAAe,GAAG,IAAA,wBAAa,EAC3C,SAAS,CAAC,KAAK,EACf,yDAAyD,EACzD,gHAAgH,CAChH,CAAC;AAEW,QAAA,mBAAmB,GAAG,IAAA,kBAAU,EAG3C,SAAS,mBAAmB,CAAC,KAAK,EAAE,GAAG;IACxC,OAAO,CACN,uBAAC,+BAAuB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,gBAC3C,uBAAC,uBAAe,KAAG,IACM,CAC1B,CAAC;AACH,CAAC,CAAC,CAAC;AAOU,QAAA,UAAU,GAAG,IAAA,kBAAU,EAAuB,SAAS,UAAU,CAC7E,EAAmC,EACnC,GAAG;QADH,EAAE,QAAQ,EAAE,WAAW,OAAY,EAAP,KAAK,cAAjC,2BAAmC,CAAF;IAGjC,OAAO,CACN,wBAAC,sBAAc,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,eAClC,uBAAC,0BAAkB,cAAE,QAAQ,GAAsB,EACnD,uBAAC,2BAAmB,KAAG,EACtB,WAAW,KAAK,MAAM,IAAI,CAC1B,uBAAC,2BAAmB,IAAC,WAAW,EAAC,YAAY,GAAG,CAChD,KACe,CACjB,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG;IACjB,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,UAAU;IAChB,cAAc,EAAE,UAAU;IAC1B,OAAO,EAAE,UAAU;IACnB,KAAK,EAAE,SAAS;CAChB,CAAC"}

package/dist/cjs/components/scrollArea.d.ts

@@ -0,0 +1 @@
+export * from './scrollArea/ScrollArea.js';

package/dist/cjs/components/scrollArea.js

@@ -0,0 +1,19 @@
+// @unocss-include
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./scrollArea/ScrollArea.js"), exports);
+//# sourceMappingURL=scrollArea.js.map

package/dist/cjs/components/scrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollArea.js","sourceRoot":"","sources":["../../../src/components/scrollArea.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6DAA2C"}