@a-type/ui 5.0.21 → 6.0.0

package/dist/components/relativeTime/RelativeTime.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.stories.js","sourceRoot":"","sources":["../../../src/components/relativeTime/RelativeTime.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACL,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,GAAG,CAAC;QACjC,UAAU,EAAE,KAAK;KACjB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACmC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}

package/dist/components/relativeTime/index.js

@@ -0,0 +1,2 @@
+export * from './RelativeTime.js';
+//# sourceMappingURL=index.js.map

package/dist/components/relativeTime/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/relativeTime/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/components/richEditor/index.js

@@ -0,0 +1,5 @@
+import clsx from 'clsx';
+import cls from './richEditor.module.css';
+export const tipTapClassName = clsx(cls.root);
+export const tipTapReadonlyClassName = clsx(cls.readonly);
+//# sourceMappingURL=index.js.map

package/dist/components/richEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/richEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC"}

package/dist/components/richEditor/richEditor.module.css

@@ -0,0 +1,102 @@
+.root {
+	@apply --mx-text-secondary;
+	width: 100%;
+
+	& .ProseMirror {
+		box-shadow: inset var(--m-shadow-sm);
+		@apply --mx-control;
+		@apply --mx-focus;
+	}
+
+	& h1,
+	& h2,
+	& h3,
+	& p {
+		margin-top: 0;
+	}
+
+	& h1 {
+		@apply --mx-text-primary;
+		&:not(:first-child) {
+			margin-top: var(--m-spacing-xl);
+		}
+	}
+	& h2 {
+		@apply --mx-text-secondary;
+		font-weight: var(--m-text-primary-weight);
+		&:not(:first-child) {
+			margin-top: var(--m-spacing-lg);
+		}
+	}
+	& h3 {
+		@apply --mx-text-ambient;
+		font-weight: var(--m-text-primary-weight);
+		text-transform: uppercase;
+		&:not(:first-child) {
+			margin-top: var(--m-spacing-md);
+		}
+	}
+	& h4 {
+		@apply --mx-text-ambient;
+		font-weight: var(--m-text-primary-weight);
+		&:not(:first-child) {
+			margin-top: var(--m-spacing-md);
+		}
+	}
+	& p {
+		@apply --mx-text-secondary;
+		margin-bottom: var(--m-spacing-md);
+	}
+	& a {
+		text-decoration: underline;
+		&:hover {
+			text-decoration: underline;
+		}
+		@apply --mx-focus;
+	}
+	& blockquote {
+		border-left: 4px solid var(--m-color-neutral-heavy);
+		padding-left: var(--m-spacing-md);
+		font-style: italic;
+		margin-block: var(--m-spacing-md);
+		margin-inline-start: var(--m-spacing-md);
+		padding-inline: var(--m-spacing-md);
+		@apply --mx-bg(var(--m-color-neutral-wash));
+	}
+	& ul {
+		list-style: disc;
+	}
+	& ol {
+		list-style: decimal;
+	}
+	& ul,
+	& ol {
+		padding-inline-start: var(--m-spacing-lg);
+		margin-block: var(--m-spacing-md);
+	}
+	& li {
+		margin-block-end: var(--m-spacing-xs);
+	}
+	& mark {
+		@apply --mx-bg(var(--m-color-main-wash));
+	}
+	& strong {
+		font-weight: var(--m-typography-weight-bold);
+	}
+	& em {
+		font-style: italic;
+	}
+	& hr {
+		border: none;
+		border-top: var(--m-lineWidth) solid var(--m-color-neutral-heavy);
+		margin-block: var(--m-spacing-lg);
+	}
+}
+
+.readonly {
+	& .ProseMirror {
+		@apply --mx-bg(transparent);
+		box-shadow: none;
+		border-width: 0;
+	}
+}

package/dist/components/richEditor/richEditor.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    argTypes: {
+        readonly: {
+            control: "boolean";
+        };
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<{
+    readonly: boolean;
+}>;
+export declare const Default: Story;

package/dist/components/richEditor/richEditor.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { tipTapClassName, tipTapReadonlyClassName } from './index.js';
+const meta = {
+    title: 'Components/RichEditor',
+    argTypes: {
+        readonly: { control: 'boolean' },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return (_jsx("div", { className: clsx(tipTapClassName, args.readonly && tipTapReadonlyClassName), children: _jsxs("div", { className: "ProseMirror", children: [_jsx("p", { children: paragraphText }), _jsx("h1", { children: "Heading 1" }), _jsx("p", { children: paragraphText }), _jsx("h2", { children: "Heading 2" }), _jsx("p", { children: paragraphText }), _jsx("p", { children: paragraphText }), _jsx("hr", {}), _jsx("p", { children: paragraphText }), _jsx("blockquote", { children: paragraphText }), _jsx("h3", { children: "Heading 3" }), _jsxs("ul", { children: [_jsx("li", { children: paragraphText }), _jsx("li", { children: paragraphText })] }), _jsx("p", { children: paragraphText }), _jsxs("ol", { children: [_jsx("li", { children: paragraphText }), _jsx("li", { children: paragraphText })] }), _jsx("h4", { children: "Heading 4" }), _jsx("p", { children: paragraphText }), _jsxs("p", { children: [_jsx("mark", { children: "Highlighted" }), " text"] }), _jsx("p", { children: _jsx("a", { href: "#", children: "Link" }) }), _jsxs("p", { children: [_jsx("strong", { children: "Bold" }), " text"] }), _jsxs("p", { children: [_jsx("em", { children: "Italic" }), " text"] })] }) }));
+    },
+};
+const paragraphText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
+Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum`;
+//# sourceMappingURL=richEditor.stories.js.map

package/dist/components/richEditor/richEditor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"richEditor.stories.js","sourceRoot":"","sources":["../../../src/components/richEditor/richEditor.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAEtE,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE;QACT,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAChC;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACqC,CAAC;AAExC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,cACC,SAAS,EAAE,IAAI,CACd,eAAe,EACf,IAAI,CAAC,QAAQ,IAAI,uBAAuB,CACxC,YAED,eAAK,SAAS,EAAC,aAAa,aAC3B,sBAAI,aAAa,GAAK,EACtB,qCAAkB,EAClB,sBAAI,aAAa,GAAK,EACtB,qCAAkB,EAClB,sBAAI,aAAa,GAAK,EACtB,sBAAI,aAAa,GAAK,EACtB,cAAM,EACN,sBAAI,aAAa,GAAK,EAEtB,+BAAa,aAAa,GAAc,EACxC,qCAAkB,EAClB,yBACC,uBAAK,aAAa,GAAM,EACxB,uBAAK,aAAa,GAAM,IACpB,EACL,sBAAI,aAAa,GAAK,EACtB,yBACC,uBAAK,aAAa,GAAM,EACxB,uBAAK,aAAa,GAAM,IACpB,EACL,qCAAkB,EAClB,sBAAI,aAAa,GAAK,EACtB,wBACC,yCAAwB,aACrB,EACJ,sBACC,YAAG,IAAI,EAAC,GAAG,qBAAS,GACjB,EACJ,wBACC,oCAAqB,aAClB,EACJ,wBACC,kCAAe,aACZ,IACC,GACD,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,aAAa,GAAG;;;;8GAIwF,CAAC"}

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

@@ -0,0 +1,34 @@
+import { ScrollArea as BaseScrollArea, ScrollAreaContentProps, ScrollAreaRootProps, ScrollAreaScrollbarProps } from '@base-ui/react/scroll-area';
+import { Ref } from 'react';
+export type * from '@base-ui/react/scroll-area';
+export declare const ScrollAreaRoot: import("react").FunctionComponent<Omit<ScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const StyledScrollAreaViewport: import("react").FunctionComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaVerticalFades: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ScrollAreaHorizontalFades: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ScrollAreaViewportFades: () => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollAreaContent: import("react").FunctionComponent<ScrollAreaContentProps & {
+    ref?: Ref<HTMLDivElement>;
+}>;
+export declare const ScrollAreaThumb: import("react").FunctionComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ScrollAreaScrollbar: import("react").FunctionComponent<ScrollAreaScrollbarProps>;
+export declare const ScrollAreaCorner: import("react").FunctionComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaCornerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface ScrollAreaViewportProps extends BaseScrollArea.Viewport.Props {
+    direction?: 'vertical' | 'horizontal' | 'both';
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const ScrollArea: (({ disableFades, direction, ...props }: ScrollAreaRootProps & {
+    disableFades?: boolean;
+    direction?: "vertical" | "horizontal" | "both";
+}) => import("react/jsx-runtime").JSX.Element) & {
+    Root: import("react").FunctionComponent<Omit<ScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").FunctionComponent<ScrollAreaContentProps & {
+        ref?: Ref<HTMLDivElement>;
+    }>;
+    Viewport: ({ direction, ...props }: ScrollAreaViewportProps) => import("react/jsx-runtime").JSX.Element;
+    Scrollbar: import("react").FunctionComponent<ScrollAreaScrollbarProps>;
+    Thumb: import("react").FunctionComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Corner: import("react").FunctionComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaCornerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ViewportFades: () => import("react/jsx-runtime").JSX.Element;
+    VerticalFades: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    HorizontalFades: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+};

package/dist/components/scrollArea/ScrollArea.js

@@ -0,0 +1,57 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea as BaseScrollArea, } from '@base-ui/react/scroll-area';
+import { withClassName } from '../../hooks.js';
+import cls from './ScrollArea.module.css';
+export const ScrollAreaRoot = withClassName(BaseScrollArea.Root, cls.root);
+export const StyledScrollAreaViewport = withClassName(BaseScrollArea.Viewport, cls.viewport);
+export const ScrollAreaVerticalFades = withClassName('div', cls.verticalFades);
+export const ScrollAreaHorizontalFades = withClassName('div', cls.horizontalFades);
+export const ScrollAreaViewportFades = () => (_jsxs(_Fragment, { children: [_jsx(ScrollAreaVerticalFades, {}), _jsx(ScrollAreaHorizontalFades, {})] }));
+const BaseScrollContentWithoutMinWidth = (props) => (_jsx(BaseScrollArea.Content, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { minWidth: undefined }) })));
+BaseScrollContentWithoutMinWidth.displayName = 'ScrollAreaContent';
+export const ScrollAreaContent = withClassName(BaseScrollContentWithoutMinWidth, cls.content);
+export const ScrollAreaThumb = withClassName(BaseScrollArea.Thumb, cls.thumb);
+const ComposedScrollbar = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(BaseScrollArea.Scrollbar, Object.assign({}, props, { children: children !== null && children !== void 0 ? children : _jsx(ScrollAreaThumb, {}) })));
+};
+ComposedScrollbar.displayName = 'ScrollAreaScrollbar';
+export const ScrollAreaScrollbar = withClassName(ComposedScrollbar, cls.scrollbar);
+export const ScrollAreaCorner = withClassName(BaseScrollArea.Corner, cls.corner);
+const ScrollAreaViewport = (_a) => {
+    var { direction } = _a, props = __rest(_a, ["direction"]);
+    return (_jsx(StyledScrollAreaViewport, Object.assign({}, props, { style: {
+            overflow: direction === 'vertical'
+                ? 'clip scroll'
+                : direction === 'horizontal'
+                    ? 'scroll clip'
+                    : 'scroll scroll',
+        }, "data-scroll-direction": direction })));
+};
+const ScrollAreaDefault = (_a) => {
+    var { disableFades, direction } = _a, props = __rest(_a, ["disableFades", "direction"]);
+    return (_jsxs(ScrollAreaRoot, Object.assign({}, props, { children: [_jsxs(ScrollAreaViewport, { direction: direction, children: [props.children, !disableFades && _jsx(ScrollAreaViewportFades, {})] }), direction !== 'horizontal' && _jsx(ScrollAreaScrollbar, {}), direction !== 'vertical' && (_jsx(ScrollAreaScrollbar, { orientation: "horizontal" })), _jsx(ScrollAreaCorner, {})] })));
+};
+export const ScrollArea = Object.assign(ScrollAreaDefault, {
+    Root: ScrollAreaRoot,
+    Content: ScrollAreaContent,
+    Viewport: ScrollAreaViewport,
+    Scrollbar: ScrollAreaScrollbar,
+    Thumb: ScrollAreaThumb,
+    Corner: ScrollAreaCorner,
+    ViewportFades: ScrollAreaViewportFades,
+    VerticalFades: ScrollAreaVerticalFades,
+    HorizontalFades: ScrollAreaHorizontalFades,
+});
+//# sourceMappingURL=ScrollArea.js.map

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

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

package/dist/components/scrollArea/ScrollArea.module.css

@@ -0,0 +1,187 @@
+.root {
+	box-sizing: border-box;
+	min-height: 0;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.viewport {
+	height: 100%;
+	min-height: 0;
+	@apply --mx-shadow;
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+	}
+}
+
+.verticalFades {
+	--scroll-area-overflow-y-end: inherit;
+	--scroll-area-overflow-y-start: inherit;
+
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+
+	&::before {
+		content: '';
+		--scroll-area-overflow-y-start: inherit;
+
+		position: absolute;
+		left: 0;
+		top: 0;
+		display: block;
+		height: min(40px, var(--scroll-area-overflow-y-start, 40px));
+		width: 100%;
+		transition: height var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(
+			to bottom,
+			var(--mx-bg-ref) 0%,
+			transparent 100%
+		);
+	}
+
+	&::after {
+		content: '';
+		--scroll-area-overflow-y-end: inherit;
+
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		display: block;
+		height: min(40px, var(--scroll-area-overflow-y-end, 40px));
+		width: 100%;
+		transition: height var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(to top, var(--mx-bg-ref) 0%, transparent 100%);
+	}
+}
+
+.horizontalFades {
+	--scroll-area-overflow-x-end: inherit;
+	--scroll-area-overflow-x-start: inherit;
+
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+
+	&::before {
+		content: '';
+		--scroll-area-overflow-x-start: inherit;
+
+		position: absolute;
+		left: 0;
+		top: 0;
+		display: block;
+		height: 100%;
+		width: min(40px, var(--scroll-area-overflow-x-start, 40px));
+		transition: width var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(
+			to right,
+			var(--mx-bg-ref) 0%,
+			transparent 100%
+		);
+	}
+
+	&::after {
+		content: '';
+		--scroll-area-overflow-x-end: inherit;
+
+		position: absolute;
+		right: 0;
+		top: 0;
+		display: block;
+		height: 100%;
+		width: min(40px, var(--scroll-area-overflow-x-end, 40px));
+		transition: width var(--m-duration) var(--m-easing);
+
+		background: linear-gradient(to left, var(--mx-bg-ref) 0%, transparent 100%);
+	}
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+
+	[data-scroll-direction='horizontal'] > &,
+	[data-scroll-direction='both'] > & {
+		min-width: min-content;
+	}
+}
+
+.thumb {
+	@apply --mx-bg(var(--mx-fg-ref));
+	@apply --mx-bg-faded(25%);
+	border-radius: 9999px;
+
+	&[data-orientation='vertical'] {
+		width: 100%;
+	}
+	&[data-orientation='horizontal'] {
+		height: 100%;
+	}
+}
+
+.scrollbar {
+	pointer-events: none;
+	position: relative;
+	margin: 1px;
+	display: flex;
+	user-select: none;
+	opacity: 0;
+	border-radius: 9999px;
+	touch-action: none;
+	transition:
+		opacity,
+		height,
+		width var(--m-duration) var(--m-easing);
+
+	@apply --mx-bg(var(--mx-fg-ref));
+	@apply --mx-bg-faded(5%);
+
+	&[data-hovering] {
+		pointer-events: auto;
+		opacity: 1;
+	}
+	&[data-scrolling] {
+		transition-duration: 0;
+	}
+
+	&::before {
+		content: '';
+		position: absolute;
+	}
+
+	&[data-orientation='vertical'] {
+		width: 4px;
+		justify-content: center;
+		&::before {
+			height: 100%;
+			width: 20px;
+		}
+		&:hover::before {
+			width: 8px;
+		}
+	}
+	&[data-orientation='horizontal'] {
+		height: 4px;
+		align-items: center;
+		&::before {
+			width: 100%;
+			height: 20px;
+		}
+		&:hover::before {
+			height: 8px;
+		}
+	}
+}
+
+.corner {
+	@apply --mx-bg(transparent);
+}

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

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    argTypes: {
+        direction: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+    args: {
+        direction: "vertical";
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<{
+    direction: 'vertical' | 'horizontal' | 'both';
+}>;
+export declare const Default: Story;
+export declare const ConstraintTest: Story;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Input } from '../input/Input.js';
+import { ScrollArea } from './ScrollArea.js';
+const meta = {
+    title: 'Components/ScrollArea',
+    argTypes: {
+        direction: {
+            control: { type: 'select' },
+            options: ['vertical', 'horizontal', 'both'],
+        },
+    },
+    args: {
+        direction: 'vertical',
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render({ direction }) {
+        return (_jsx(ScrollArea, { direction: direction, style: { height: '200px', width: '400px' }, children: _jsx(ScrollArea.Content, { style: {
+                    width: direction === 'horizontal' ? '10000px' : undefined,
+                    height: direction === 'both' ? '10000px' : undefined,
+                }, children: _jsx(Content, {}) }) }));
+    },
+};
+export const ConstraintTest = {
+    render({ direction }) {
+        return (_jsx(ScrollArea, { direction: direction, style: { height: 300, width: 300 }, children: _jsxs(ScrollArea.Content, { children: [_jsxs(Box, { gap: true, children: [_jsx(Input, { placeholder: "Test input" }), _jsx(Button, { children: "Submit" })] }), _jsx(Content, {})] }) }));
+    },
+};
+function Content() {
+    return (_jsxs(_Fragment, { children: [_jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sollicitudin ornare. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue. Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget metus. Vestibulum commodo. Ut rhoncus gravida arcu." }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sollicitudin ornare. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue. Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget metus. Vestibulum commodo. Ut rhoncus gravida arcu." }), _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sollicitudin ornare. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue. Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget metus. Vestibulum commodo. Ut rhoncus gravida arcu." })] }));
+}
+//# sourceMappingURL=ScrollArea.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.stories.js","sourceRoot":"","sources":["../../../src/components/scrollArea/ScrollArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE;QACT,SAAS,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,MAAM,CAAC;SAC3C;KACD;IACD,IAAI,EAAE;QACL,SAAS,EAAE,UAAU;KACrB;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiE,CAAC;AAEpE,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,EAAE,SAAS,EAAE;QACnB,OAAO,CACN,KAAC,UAAU,IACV,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAE1C,KAAC,UAAU,CAAC,OAAO,IAClB,KAAK,EAAE;oBACN,KAAK,EAAE,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;oBACzD,MAAM,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;iBACpD,YAED,KAAC,OAAO,KAAG,GACS,GACT,CACb,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACpC,MAAM,CAAC,EAAE,SAAS,EAAE;QACnB,OAAO,CACN,KAAC,UAAU,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,YACnE,MAAC,UAAU,CAAC,OAAO,eAClB,MAAC,GAAG,IAAC,GAAG,mBACP,KAAC,KAAK,IAAC,WAAW,EAAC,YAAY,GAAG,EAClC,KAAC,MAAM,yBAAgB,IAClB,EACN,KAAC,OAAO,KAAG,IACS,GACT,CACb,CAAC;IACH,CAAC;CACD,CAAC;AAEF,SAAS,OAAO;IACf,OAAO,CACN,8BACC,4sCAmBI,EACJ,4sCAmBI,EACJ,4sCAmBI,IACF,CACH,CAAC;AACH,CAAC"}

package/dist/components/select/Select.d.ts

@@ -0,0 +1,56 @@
+import { Select as BaseSelect, SelectArrowProps, SelectIconProps, SelectItemIndicatorProps, SelectItemProps, SelectPopupProps, SelectPositionerProps, SelectRootProps } from '@base-ui/react/select';
+import { Ref } from 'react';
+import { ButtonProps } from '../button/Button.js';
+export declare const SelectItem: ({ ref: forwardedRef, children, className, ...props }: SelectItemProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectItemRoot: import("react").FunctionComponent<Omit<SelectItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const SelectItemIndicatorRoot: import("react").FunctionComponent<Omit<SelectItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectItemIndicator: (props: SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectItemText: import("react").FunctionComponent<Omit<import("@base-ui/react/select").SelectItemTextProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectRoot: typeof BaseSelect.Root;
+export declare const selectTriggerClassName: string;
+export declare const SelectTriggerBase: import("react").FunctionComponent<Omit<import("@base-ui/react/select").SelectTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const UnstyledSelectTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type SelectTriggerProps = ButtonProps;
+export declare const SelectTrigger: ({ ref, children, render, placeholder, ...props }: SelectTriggerProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+    placeholder?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectValue: import("react").FunctionComponent<Omit<import("@base-ui/react/select").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SelectGroupLabel: import("react").FunctionComponent<Omit<import("@base-ui/react/select").SelectGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: import("react").FunctionComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectIcon: ({ ref: forwardedRef, className, ...props }: SelectIconProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectArrow: ({ className, ...props }: SelectArrowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectContent: ({ ref: forwardedRef, children, className, side, sideOffset, align, alignOffset, alignItemWithTrigger, disableAnchorTracking, arrowPadding, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, ...props }: SelectPopupProps & SelectPositionerProps & {
+    ref?: Ref<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface SelectProps<T extends string = string> extends SelectRootProps<T> {
+}
+export declare const Select: typeof BaseSelect.Root & {
+    Root: typeof BaseSelect.Root;
+    Item: ({ ref: forwardedRef, children, className, ...props }: SelectItemProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: ({ ref, children, render, placeholder, ...props }: SelectTriggerProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+        placeholder?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Value: import("react").FunctionComponent<Omit<import("@base-ui/react/select").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    GroupLabel: import("react").FunctionComponent<Omit<import("@base-ui/react/select").SelectGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").FunctionComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Icon: ({ ref: forwardedRef, className, ...props }: SelectIconProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ ref: forwardedRef, children, className, side, sideOffset, align, alignOffset, alignItemWithTrigger, disableAnchorTracking, arrowPadding, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, ...props }: SelectPopupProps & SelectPositionerProps & {
+        ref?: Ref<HTMLDivElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Arrow: ({ className, ...props }: SelectArrowProps) => import("react/jsx-runtime").JSX.Element;
+    ItemRoot: import("react").FunctionComponent<Omit<SelectItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    ItemText: import("react").FunctionComponent<Omit<import("@base-ui/react/select").SelectItemTextProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: (props: SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+};