@a-type/ui 5.0.22 → 6.0.0

package/dist/components/lightbox/Lightbox.module.css

@@ -0,0 +1,104 @@
+.trigger {
+	cursor: pointer;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@apply --mx-shadow;
+		--mx-ring-value: --fn-focus-ring();
+		border-radius: var(--m-action-radius);
+	}
+}
+
+.title {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.close {
+	position: absolute;
+	right: var(--m-spacing-md);
+	top: var(--m-spacing-md);
+}
+
+.overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	backdrop-filter: blur(4px);
+	transition: opacity 0.2s ease;
+
+	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-bg-faded(50%);
+
+	&[data-state='closed'] {
+		opacity: 0;
+	}
+}
+
+.contentRoot {
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	z-index: 1001;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: 100%;
+	max-height: 85vh;
+	width: 90vw;
+	max-width: 100%;
+
+	padding: var(--m-spacing-lg);
+	border: none;
+	background: none;
+	pointer-events: none;
+
+	transform: translate(-50%, -50%);
+	transition:
+		opacity 0.2s ease,
+		transform 0.2s ease;
+
+	&[data-state='closed'] {
+		opacity: 0;
+		transform: translate(-50%, -45%) scale(0.95);
+	}
+}
+
+.contentInner {
+	max-height: 100%;
+	max-width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	pointer-events: none;
+
+	& > * {
+		pointer-events: auto;
+	}
+}
+
+.pointerEventsAuto {
+	pointer-events: auto;
+}
+
+.image {
+	object-fit: contain;
+	max-height: 100%;
+	max-width: 100%;
+	min-height: 80px;
+	min-width: 80px;
+}

package/dist/components/lightbox/Lightbox.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Lightbox } from './Lightbox.js';
+declare const meta: {
+    title: string;
+    component: (({ children, }: Omit<import("./Lightbox.js").LightboxProps, "children"> & {
+        children?: import("react").ReactElement;
+    }) => import("react/jsx-runtime").JSX.Element) & {
+        Overlay: import("react").FunctionComponent<Omit<import("@base-ui/react").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Content: (props: import("@base-ui/react").AlertDialogPopupProps) => import("react/jsx-runtime").JSX.Element;
+        Image: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>;
+        Root: typeof import("@base-ui/react").DialogRoot;
+        Trigger: import("react").FunctionComponent<import("@base-ui/react").AlertDialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>>;
+        Close: (props: import("@base-ui/react").AlertDialogCloseProps) => import("react/jsx-runtime").JSX.Element;
+        Title: () => import("react/jsx-runtime").JSX.Element;
+        Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Lightbox>;
+export declare const Default: Story;

package/dist/components/lightbox/Lightbox.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Lightbox } from './Lightbox.js';
+const meta = {
+    title: 'Components/Lightbox',
+    component: Lightbox,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return (_jsx(Lightbox, Object.assign({}, args, { children: _jsx(Lightbox.Image, { src: "https://resources.biscuits.club/images/pashka.jpg", alt: "Sample" }) })));
+    },
+};
+//# sourceMappingURL=Lightbox.stories.js.map

package/dist/components/lightbox/Lightbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.stories.js","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,KAAC,QAAQ,oBAAK,IAAI,cACjB,KAAC,QAAQ,CAAC,KAAK,IACd,GAAG,EAAC,mDAAmD,EACvD,GAAG,EAAC,QAAQ,GACX,IACQ,CACX,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/lists/lists.js

@@ -0,0 +1,13 @@
+import { withClassName } from '../../hooks.js';
+import cls from './lists.module.css';
+const OlBase = withClassName('ol', cls.ol);
+const OlItem = withClassName('li');
+export const Ol = Object.assign(OlBase, {
+    Item: OlItem,
+});
+const UlBase = withClassName('ul', cls.ul);
+const UlItem = withClassName('li');
+export const Ul = Object.assign(UlBase, {
+    Item: UlItem,
+});
+//# sourceMappingURL=lists.js.map

package/dist/components/lists/lists.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lists.js","sourceRoot":"","sources":["../../../src/components/lists/lists.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,GAAG,MAAM,oBAAoB,CAAC;AAErC,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAC3C,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;AAEnC,MAAM,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IACvC,IAAI,EAAE,MAAM;CACZ,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAC3C,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;AAEnC,MAAM,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IACvC,IAAI,EAAE,MAAM;CACZ,CAAC,CAAC"}

package/dist/components/lists/lists.module.css

@@ -0,0 +1,21 @@
+.ol,
+.ul {
+	list-style-position: inside;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-sm);
+
+	& > li {
+		margin-left: var(--m-spacing-sm);
+	}
+}
+
+.ol {
+	list-style: decimal;
+}
+
+.ul {
+	list-style: disc;
+}

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

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const OrderedList: Story;
+export declare const UnorderedList: Story;

package/dist/components/lists/lists.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Ol, Ul } from './lists.js';
+const meta = {
+    title: 'Components/lists',
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const OrderedList = {
+    render(args) {
+        return (_jsxs(Ol, Object.assign({}, args, { children: [_jsx(Ol.Item, { children: "First item" }), _jsx(Ol.Item, { children: "Second item" }), _jsx(Ol.Item, { children: "Third item" })] })));
+    },
+};
+export const UnorderedList = {
+    render(args) {
+        return (_jsxs(Ul, Object.assign({}, args, { children: [_jsx(Ul.Item, { children: "First item" }), _jsx(Ul.Item, { children: "Second item" }), _jsx(Ul.Item, { children: "Third item" })] })));
+    },
+};
+//# sourceMappingURL=lists.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lists.stories.js","sourceRoot":"","sources":["../../../src/components/lists/lists.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEpC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,WAAW,GAAU;IACjC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,EAAE,oBAAK,IAAI,eACX,KAAC,EAAE,CAAC,IAAI,6BAAqB,EAC7B,KAAC,EAAE,CAAC,IAAI,8BAAsB,EAC9B,KAAC,EAAE,CAAC,IAAI,6BAAqB,KACzB,CACL,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IACnC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,EAAE,oBAAK,IAAI,eACX,KAAC,EAAE,CAAC,IAAI,6BAAqB,EAC7B,KAAC,EAAE,CAAC,IAAI,8BAAsB,EAC9B,KAAC,EAAE,CAAC,IAAI,6BAAqB,KACzB,CACL,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/liveUpdateTextField/LiveUpdateTextField.js

@@ -0,0 +1,68 @@
+'use client';
+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 { debounce } from '@a-type/utils';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { Input } from '../input/Input.js';
+import { TextArea } from '../textArea/TextArea.js';
+/**
+ * An extension of TextField which keeps a local realtime value in state and
+ * periodically reports changes to the parent. Use this to connect
+ * to the API and update a value from the field directly.
+ *
+ * This component is optimistic and will not respond to external changes while focused.
+ */
+export const LiveUpdateTextField = function LiveUpdateTextField(_a) {
+    var { ref, value, onChange, debounceMs = 500, onFocus, onBlur, textArea, type } = _a, rest = __rest(_a, ["ref", "value", "onChange", "debounceMs", "onFocus", "onBlur", "textArea", "type"]);
+    const [displayValue, setDisplayValue] = useState(value || '');
+    const ignoreUpdates = useRef(false);
+    const didChange = useRef(false);
+    const handleFocus = useCallback((ev) => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
+        ignoreUpdates.current = true;
+    }, [onFocus]);
+    const handleBlur = useCallback((ev) => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
+        ignoreUpdates.current = false;
+        // immediately send update if the user typed anything.
+        // otherwise pull the latest remote value
+        if (didChange.current) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(displayValue);
+        }
+        else {
+            setDisplayValue(value || '');
+        }
+        didChange.current = false;
+    }, [onBlur, displayValue, onChange, value]);
+    useEffect(() => {
+        if (ignoreUpdates.current) {
+            return;
+        }
+        setDisplayValue(value || '');
+    }, [value]);
+    // every once in a while, send an update to parent
+    const debouncedOnChange = useMemo(() => debounce(onChange || (() => { }), debounceMs), [onChange, debounceMs]);
+    // update local state instantly and parent eventually
+    const handleValueChange = useCallback((value) => {
+        setDisplayValue(value);
+        debouncedOnChange(value);
+        didChange.current = true;
+    }, [debouncedOnChange]);
+    if (textArea) {
+        return (_jsx(TextArea, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, autoSize: true }, rest)));
+    }
+    else {
+        return (_jsx(Input, Object.assign({ ref: ref, onFocus: handleFocus, onBlur: handleBlur, value: displayValue, onValueChange: handleValueChange, type: type }, rest)));
+    }
+};
+//# sourceMappingURL=LiveUpdateTextField.js.map

package/dist/components/liveUpdateTextField/LiveUpdateTextField.js.map

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

package/dist/components/liveUpdateTextField/LiveUpdateTextField.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { LiveUpdateTextField } from './LiveUpdateTextField.js';
+declare const meta: {
+    title: string;
+    component: ({ ref, value, onChange, debounceMs, onFocus, onBlur, textArea, type, ...rest }: import("./LiveUpdateTextField.js").LiveUpdateTextFieldProps) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof LiveUpdateTextField>;
+export declare const Default: Story;

package/dist/components/liveUpdateTextField/LiveUpdateTextField.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LiveUpdateTextField } from './LiveUpdateTextField.js';
+const meta = {
+    title: 'Components/LiveUpdateTextField',
+    component: LiveUpdateTextField,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        const [value, setValue] = useState('Initial value');
+        return _jsx(LiveUpdateTextField, Object.assign({}, args, { value: value, onChange: setValue }));
+    },
+};
+//# sourceMappingURL=LiveUpdateTextField.stories.js.map

package/dist/components/liveUpdateTextField/LiveUpdateTextField.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveUpdateTextField.stories.js","sourceRoot":"","sources":["../../../src/components/liveUpdateTextField/LiveUpdateTextField.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,gCAAgC;IACvC,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC0C,CAAC;AAE7C,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;QACpD,OAAO,KAAC,mBAAmB,oBAAK,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;IAC5E,CAAC;CACD,CAAC"}

package/dist/components/liveUpdateTextField/index.js

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

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

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

package/dist/components/marquee/marquee.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+export interface MarqueeProps extends ComponentProps<'div'> {
+    timeout?: number;
+}
+export declare function Marquee({ className, children, timeout, ...rest }: MarqueeProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Marquee {
+    var Item: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
+}

package/dist/components/marquee/marquee.js

@@ -0,0 +1,33 @@
+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 { clsx } from 'clsx';
+import { Children, useEffect, useState } from 'react';
+import { withClassName } from '../../hooks.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './marquee.module.css';
+export function Marquee(_a) {
+    var { className, children, timeout = 5000 } = _a, rest = __rest(_a, ["className", "children", "timeout"]);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const offset = `${currentIndex * -100}%`;
+    const childCount = Children.count(children);
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            setCurrentIndex((currentIndex + 1) % childCount);
+        }, timeout);
+        return () => clearTimeout(timeoutId);
+    }, [currentIndex, childCount, timeout]);
+    return (_jsx("div", Object.assign({ className: clsx(cls.root, className) }, rest, { children: _jsx("div", { className: clsx(cls.inner), style: { transform: `translateX(${offset})` }, children: children }) })));
+}
+const MarqueeItem = withClassName(SlotDiv, cls.item);
+Marquee.Item = MarqueeItem;
+//# sourceMappingURL=marquee.js.map

package/dist/components/marquee/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.js","sourceRoot":"","sources":["../../../src/components/marquee/marquee.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAkB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAMvC,MAAM,UAAU,OAAO,CAAC,EAKT;QALS,EACvB,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,IAAI,OAEA,EADX,IAAI,cAJgB,oCAKvB,CADO;IAEP,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,GAAG,YAAY,GAAG,CAAC,GAAG,GAAG,CAAC;IAEzC,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YACjC,eAAe,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC;QAClD,CAAC,EAAE,OAAO,CAAC,CAAC;QAEZ,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAExC,OAAO,CACN,4BAAK,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IAAM,IAAI,cAClD,cACC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAC1B,KAAK,EAAE,EAAE,SAAS,EAAE,cAAc,MAAM,GAAG,EAAE,YAE5C,QAAQ,GACJ,IACD,CACN,CAAC;AACH,CAAC;AAED,MAAM,WAAW,GAAG,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;AAErD,OAAO,CAAC,IAAI,GAAG,WAAW,CAAC"}

package/dist/components/marquee/marquee.module.css

@@ -0,0 +1,32 @@
+.root {
+	position: relative;
+	height: 100%;
+	width: 100%;
+	overflow: clip;
+}
+
+.inner {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	overflow: visible;
+	transition: transform var(--m-duration-long) var(--m-easing);
+}
+
+.item {
+	height: 100%;
+	width: 100%;
+	min-width: 0;
+	flex-shrink: 0;
+	object-fit: cover;
+
+	& img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+}

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Marquee } from './marquee.js';
+declare const meta: {
+    title: string;
+    component: typeof Marquee;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Marquee>;
+export declare const Default: Story;

package/dist/components/marquee/marquee.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Marquee } from './marquee.js';
+const meta = {
+    title: 'Components/Marquee',
+    component: Marquee,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(params) {
+        return (_jsxs(Marquee, Object.assign({ style: { height: 200 } }, params, { children: [_jsx(Marquee.Item, { children: _jsx("img", { src: "https://resources.biscuits.club/images/pashka.jpg" }) }), _jsx(Marquee.Item, { className: "bg-primary-wash color-main-heavy text-primary", style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }, children: "Hello, world" }), _jsx(Marquee.Item, { render: _jsx("img", { src: "https://resources.biscuits.club/images/pashka.jpg" }) })] })));
+    },
+};
+//# sourceMappingURL=marquee.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.stories.js","sourceRoot":"","sources":["../../../src/components/marquee/marquee.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC8B,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,MAAM;QACZ,OAAO,CACN,MAAC,OAAO,kBAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,IAAM,MAAM,eAC1C,KAAC,OAAO,CAAC,IAAI,cACZ,cAAK,GAAG,EAAC,mDAAmD,GAAG,GACjD,EACf,KAAC,OAAO,CAAC,IAAI,IACZ,SAAS,EAAC,+CAA+C,EACzD,KAAK,EAAE;wBACN,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;qBACxB,6BAGa,EACf,KAAC,OAAO,CAAC,IAAI,IACZ,MAAM,EACL,cAAK,GAAG,EAAC,mDAAmD,GAAG,GAE/D,KACO,CACV,CAAC;IACH,CAAC;CACD,CAAC"}