@a-type/ui 5.0.21 → 6.0.0

package/dist/components/imageUploader/ImageUploader.js

@@ -0,0 +1,165 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames, { clsx } from 'clsx';
+import { createContext, useCallback, useContext, useEffect, useId, useState, } from 'react';
+import { Button } from '../button/index.js';
+import { CameraDeviceSelector, CameraFullscreenButton, CameraRoot, CameraShutterButton, } from '../camera/index.js';
+import { Icon } from '../icon/index.js';
+import cls from './ImageUploader.module.css';
+/**
+ * Renders an image if one is already set, and allows either clicking
+ * on the image to select a new one, or dragging a new image onto the
+ * component to replace the existing one.
+ */
+export function ImageUploaderRoot(_a) {
+    var { value, onChange: handleChange, maxDimension, children } = _a, rest = __rest(_a, ["value", "onChange", "maxDimension", "children"]);
+    const inputId = useId();
+    const [dragging, setDragging] = useState(false);
+    const [draggingOver, setDraggingOver] = useState(false);
+    const onDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraggingOver(true);
+    }, []);
+    const onDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraggingOver(false);
+    }, []);
+    const onDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraggingOver(true);
+    }, []);
+    const onChange = useCallback(async (file) => {
+        if (!file) {
+            handleChange(null);
+        }
+        else if (maxDimension) {
+            let resizer = await import('browser-image-resizer');
+            // @ts-ignore
+            resizer = resizer.readAndCompressImage ? resizer : resizer.default;
+            if (!resizer || !resizer.readAndCompressImage) {
+                // fallback. this happens in dev environments using untransformed TS.
+                // TODO: fix this.
+                console.warn('browser-image-resizer not available, uploading original image');
+                handleChange(file);
+                return;
+            }
+            const resizedImage = await resizer.readAndCompressImage(file, {
+                maxWidth: maxDimension,
+                maxHeight: maxDimension,
+                mimeType: file.type,
+            });
+            handleChange(new File([resizedImage], file.name, { type: file.type }));
+        }
+        else {
+            handleChange(file);
+        }
+    }, [handleChange, maxDimension]);
+    const onDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDraggingOver(false);
+        if (e.dataTransfer.files.length > 0) {
+            onChange(e.dataTransfer.files[0]);
+        }
+    }, [onChange]);
+    const onDragStart = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(true);
+    }, []);
+    const onDragEnd = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+    }, []);
+    const onFileChange = useCallback((e) => {
+        if (e.target.files && e.target.files.length > 0) {
+            onChange(e.target.files[0]);
+        }
+    }, [onChange]);
+    const onFileClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    return (_jsx(ImageUploaderContext.Provider, { value: { inputId, dragging, draggingOver, value, onChange }, children: _jsxs("div", Object.assign({ className: classNames('@mode-neutral', cls.root, rest.className), onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onDragStart: onDragStart, onDragEnd: onDragEnd }, rest, { children: [_jsx("input", { type: "file", accept: "image/*", onChange: onFileChange, onClick: onFileClick, className: cls.input, id: inputId }), children] })) }));
+}
+const ImageUploaderContext = createContext(null);
+function useUploaderContext() {
+    const context = useContext(ImageUploaderContext);
+    if (!context) {
+        throw new Error('ImageUploaderContext not found');
+    }
+    return context;
+}
+function ImageUploaderPrebuilt(_a) {
+    var { crossOrigin = 'anonymous' } = _a, props = __rest(_a, ["crossOrigin"]);
+    const [cameraOpen, setCameraOpen] = useState(false);
+    const openCamera = () => setCameraOpen(true);
+    return (_jsxs(ImageUploaderRoot, Object.assign({}, props, { children: [_jsx(ImageUploaderDisplay, { crossOrigin: crossOrigin }), _jsxs(ImageUploaderEmptyControls, { children: [_jsx(ImageUploaderFileButton, {}), _jsxs(Button, { emphasis: "ghost", size: "small", onClick: openCamera, children: [_jsx(Icon, { name: "camera" }), _jsx("span", { children: "Camera" })] })] }), !props.value && cameraOpen && (_jsxs(CameraRoot, { className: cls.cameraRoot, format: "image/png", onCapture: (file) => {
+                    props.onChange(file);
+                    setCameraOpen(false);
+                }, facingMode: props.facingMode, children: [_jsx(CameraShutterButton, {}), _jsx(CameraDeviceSelector, {}), _jsx(CameraFullscreenButton, {}), _jsx(Button, { onClick: () => setCameraOpen(false), emphasis: "ghost", size: "small", className: cls.cameraCancelButton, children: "Cancel" })] })), _jsx(ImageUploaderRemoveButton, {})] })));
+}
+export function ImageUploaderFileButton(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { inputId, dragging } = useUploaderContext();
+    const [focused, setFocused] = useState(false);
+    useEffect(() => {
+        function updateFocus(ev) {
+            setFocused(ev.target === document.activeElement);
+        }
+        setTimeout(() => {
+            const input = document.getElementById(inputId);
+            if (input) {
+                input.addEventListener('focus', updateFocus);
+                input.addEventListener('blur', updateFocus);
+            }
+        }, 0);
+        return () => {
+            const input = document.getElementById(inputId);
+            if (input) {
+                input.removeEventListener('focus', updateFocus);
+                input.removeEventListener('blur', updateFocus);
+            }
+        };
+    }, [inputId]);
+    return (_jsx(Button, Object.assign({ emphasis: "ghost", size: "small", render: _jsx("label", { htmlFor: inputId }), visuallyFocused: focused }, props, { children: children !== null && children !== void 0 ? children : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "upload" }), _jsx("span", { children: dragging ? 'Drop' : 'Upload' })] })) })));
+}
+export function ImageUploaderRemoveButton(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const { value, onChange } = useUploaderContext();
+    if (!value)
+        return null;
+    return (_jsx(Button, Object.assign({ emphasis: "ghost", className: clsx(cls.removeButton, className), onClick: () => onChange(null) }, rest, { children: _jsx(Icon, { name: "x" }) })));
+}
+export function ImageUploaderDisplay(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const { value } = useUploaderContext();
+    return value ? (_jsx("img", Object.assign({ src: value, className: clsx(cls.imagePreview, className) }, rest))) : null;
+}
+export function ImageUploaderEmptyControls({ children, className, }) {
+    const { value, draggingOver } = useUploaderContext();
+    if (value)
+        return null;
+    return (_jsx("div", { className: classNames(cls.emptyControls, className), "data-dragging-over": draggingOver, children: children }));
+}
+export const ImageUploader = Object.assign(ImageUploaderPrebuilt, {
+    Root: ImageUploaderRoot,
+    FileButton: ImageUploaderFileButton,
+    RemoveButton: ImageUploaderRemoveButton,
+    Display: ImageUploaderDisplay,
+    EmptyControls: ImageUploaderEmptyControls,
+});
+//# sourceMappingURL=ImageUploader.js.map

package/dist/components/imageUploader/ImageUploader.js.map

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

package/dist/components/imageUploader/ImageUploader.module.css

@@ -0,0 +1,67 @@
+.root {
+	position: relative;
+	border-radius: var(--m-surface-radius);
+}
+
+.input {
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+	opacity: 0;
+}
+
+.cameraRoot {
+	position: absolute;
+	z-index: 1;
+	height: 100%;
+	width: 100%;
+}
+
+.cameraCancelButton {
+	position: absolute;
+	top: var(--m-spacing-sm);
+	left: var(--m-spacing-sm);
+	@apply --mx-fg(var(--m-color-neutral-paper));
+}
+
+.removeButton {
+	position: absolute;
+	top: var(--m-spacing-sm);
+	right: var(--m-spacing-sm);
+	z-index: 10;
+	height: 32px;
+	width: 32px;
+	cursor: pointer;
+	padding: var(--m-spacing-sm);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-fg(var(--m-surface-ambient-fg));
+	@apply --mx-shadow;
+	border-radius: var(--m-radius-lg);
+	border: none;
+}
+
+.imagePreview {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+	border-radius: inherit;
+}
+
+.emptyControls {
+	position: absolute;
+	inset: 0;
+	min-height: 120px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--m-spacing-sm);
+	@apply --mx-bg(var(--m-surface-primary-bg));
+	@apply --mx-fg(var(--m-surface-primary-fg));
+	border-radius: inherit;
+
+	&[dragging-over='true'] {
+		@apply --mx-bg-heavier(2);
+	}
+}

package/dist/components/imageUploader/ImageUploader.stories.d.ts

@@ -0,0 +1,39 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { ImageUploader } from './ImageUploader.js';
+declare const meta: {
+    title: string;
+    component: (({ crossOrigin, ...props }: Omit<import("./ImageUploader.js").ImageUploaderProps, "children"> & {
+        facingMode?: "user" | "environment";
+        crossOrigin?: import("react").ImgHTMLAttributes<HTMLImageElement>["crossOrigin"];
+    }) => import("react/jsx-runtime").JSX.Element) & {
+        Root: typeof import("./ImageUploader.js").ImageUploaderRoot;
+        FileButton: typeof import("./ImageUploader.js").ImageUploaderFileButton;
+        RemoveButton: typeof import("./ImageUploader.js").ImageUploaderRemoveButton;
+        Display: typeof import("./ImageUploader.js").ImageUploaderDisplay;
+        EmptyControls: typeof import("./ImageUploader.js").ImageUploaderEmptyControls;
+    };
+    argTypes: {
+        onChange: {
+            action: string;
+        };
+        maxDimension: {
+            control: {
+                type: "number";
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+    args: {
+        style: {
+            width: number;
+            height: number;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof ImageUploader>;
+export declare const Default: Story;

package/dist/components/imageUploader/ImageUploader.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ImageUploader } from './ImageUploader.js';
+const meta = {
+    title: 'Components/ImageUploader',
+    component: ImageUploader,
+    argTypes: {
+        onChange: { action: 'change' },
+        maxDimension: { control: { type: 'number' } },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+    args: {
+        style: { width: 256, height: 256 },
+    },
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(ImageUploaderDemo, {}),
+};
+function ImageUploaderDemo() {
+    const [value, setValue] = useState(null);
+    return (_jsx(ImageUploader, { onChange: (file) => file ? setValue(URL.createObjectURL(file)) : setValue(null), value: value, style: { width: 256, height: 256 } }));
+}
+//# sourceMappingURL=ImageUploader.stories.js.map

package/dist/components/imageUploader/ImageUploader.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploader.stories.js","sourceRoot":"","sources":["../../../src/components/imageUploader/ImageUploader.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACT,QAAQ,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;QAC9B,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC7C;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE;QACL,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;KAClC;CACoC,CAAC;AAEvC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,iBAAiB,KAAG;CACnC,CAAC;AAEF,SAAS,iBAAiB;IACzB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAExD,OAAO,CACN,KAAC,aAAa,IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAClB,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAE5D,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GACjC,CACF,CAAC;AACH,CAAC"}

package/dist/components/imageUploader/UploadIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function UploadIcon(props) {
+    return (_jsx("svg", Object.assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { d: "M1.5 10V11.5C1.5 12.6046 2.39543 13.5 3.5 13.5H11.5C12.6046 13.5 13.5 12.6046 13.5 11.5V10M7.5 10.5V1M7.5 1L4 4M7.5 1L11 4", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) })));
+}
+//# sourceMappingURL=UploadIcon.js.map

package/dist/components/imageUploader/UploadIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadIcon.js","sourceRoot":"","sources":["../../../src/components/imageUploader/UploadIcon.tsx"],"names":[],"mappings":";AAIA,MAAM,UAAU,UAAU,CAAC,KAAsB;IAChD,OAAO,CACN,4BACC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAC9B,KAAK,cAET,eACC,CAAC,EAAC,4HAA4H,EAC9H,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACrB,IACG,CACN,CAAC;AACH,CAAC"}

package/dist/components/imageUploader/index.js

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

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

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

package/dist/components/index.d.ts

@@ -0,0 +1,59 @@
+export * from '@base-ui/react/use-render';
+export * from './actions/index.js';
+export * from './autocomplete/Autocomplete.js';
+export * from './avatar/index.js';
+export * from './box/Box.js';
+export * from './button/index.js';
+export * from './camera/index.js';
+export * from './card/index.js';
+export * from './checkbox/index.js';
+export * from './chip/index.js';
+export * from './collapsible/index.js';
+export * from './colorMode/ColorModeToggle.js';
+export * from './combobox/Combobox.js';
+export * from './contextMenu/contextMenu.js';
+export * from './datePicker/index.js';
+export * from './dialog/index.js';
+export * from './divider/index.js';
+export * from './dropdownMenu/index.js';
+export * from './editableText/EditableText.js';
+export * from './emojiPicker/EmojiPicker.js';
+export * from './errorBoundary/index.js';
+export * from './forms/index.js';
+export * from './horizontalList/HorizontalList.js';
+export * from './icon/index.js';
+export * from './imageUploader/index.js';
+export * from './infiniteLoadTrigger/InfiniteLoadTrigger.js';
+export * from './input/index.js';
+export * from './layouts/index.js';
+export * from './lists/lists.js';
+export * from './liveUpdateTextField/index.js';
+export * from './marquee/marquee.js';
+export * from './masonry/masonry.js';
+export * from './navBar/index.js';
+export * from './note/index.js';
+export * from './numberStepper/index.js';
+export * from './particles/index.js';
+export * from './peek/index.js';
+export * from './popover/index.js';
+export * from './progress/Progress.js';
+export * from './provider/Provider.js';
+export * from './pwaInstall/index.js';
+export * from './quickAction/QuickAction.js';
+export * from './relativeTime/index.js';
+export * from './richEditor/index.js';
+export * from './scrollArea/ScrollArea.js';
+export * from './select/index.js';
+export * from './skeletons/skeletons.js';
+export * from './slider/index.js';
+export * from './spinner/index.js';
+export * from './switch/index.js';
+export * from './tabs/tabs.js';
+export * from './textArea/index.js';
+export * from './toasts/toasts.js';
+export * from './toggleGroup/toggleGroup.js';
+export * from './tooltip/index.js';
+export * from './typography/index.js';
+export * from './utility/HideWhileKeyboardOpen.js';
+export * from './utility/SlotDiv.js';
+export * from './viewport/index.js';

package/dist/components/index.js

@@ -0,0 +1,60 @@
+export * from '@base-ui/react/use-render';
+export * from './actions/index.js';
+export * from './autocomplete/Autocomplete.js';
+export * from './avatar/index.js';
+export * from './box/Box.js';
+export * from './button/index.js';
+export * from './camera/index.js';
+export * from './card/index.js';
+export * from './checkbox/index.js';
+export * from './chip/index.js';
+export * from './collapsible/index.js';
+export * from './colorMode/ColorModeToggle.js';
+export * from './combobox/Combobox.js';
+export * from './contextMenu/contextMenu.js';
+export * from './datePicker/index.js';
+export * from './dialog/index.js';
+export * from './divider/index.js';
+export * from './dropdownMenu/index.js';
+export * from './editableText/EditableText.js';
+export * from './emojiPicker/EmojiPicker.js';
+export * from './errorBoundary/index.js';
+export * from './forms/index.js';
+export * from './horizontalList/HorizontalList.js';
+export * from './icon/index.js';
+export * from './imageUploader/index.js';
+export * from './infiniteLoadTrigger/InfiniteLoadTrigger.js';
+export * from './input/index.js';
+export * from './layouts/index.js';
+export * from './lists/lists.js';
+export * from './liveUpdateTextField/index.js';
+export * from './marquee/marquee.js';
+export * from './masonry/masonry.js';
+export * from './navBar/index.js';
+export * from './note/index.js';
+export * from './numberStepper/index.js';
+export * from './particles/index.js';
+export * from './peek/index.js';
+export * from './popover/index.js';
+export * from './progress/Progress.js';
+export * from './provider/Provider.js';
+export * from './pwaInstall/index.js';
+export * from './quickAction/QuickAction.js';
+export * from './relativeTime/index.js';
+export * from './richEditor/index.js';
+export * from './scrollArea/ScrollArea.js';
+export * from './select/index.js';
+export * from './skeletons/skeletons.js';
+export * from './slider/index.js';
+export * from './spinner/index.js';
+export * from './switch/index.js';
+export * from './tabs/tabs.js';
+export * from './textArea/index.js';
+export * from './toasts/toasts.js';
+export * from './toggleGroup/toggleGroup.js';
+export * from './tooltip/index.js';
+export * from './typography/index.js';
+export * from './utility/HideWhileKeyboardOpen.js';
+export * from './utility/SlotDiv.js';
+export * from './viewport/index.js';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8CAA8C,CAAC;AAC7D,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/dist/components/infiniteLoadTrigger/InfiniteLoadTrigger.js

@@ -0,0 +1,34 @@
+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 classNames from 'clsx';
+import { useEffect, useRef } from 'react';
+import { useStableCallback } from '../../hooks.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+export const InfiniteLoadTrigger = function InfiniteLoadTrigger(_a) {
+    var { ref, className, onVisible } = _a, rest = __rest(_a, ["ref", "className", "onVisible"]);
+    const innerRef = useRef(null);
+    const stableOnVisible = useStableCallback(onVisible);
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                stableOnVisible();
+            }
+        });
+        observer.observe(innerRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [stableOnVisible]);
+    return (_jsx("div", Object.assign({ ref: useMergedRef(ref, innerRef), className: classNames('flex flex-col items-center', className) }, rest)));
+};
+//# sourceMappingURL=InfiniteLoadTrigger.js.map

package/dist/components/infiniteLoadTrigger/InfiniteLoadTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfiniteLoadTrigger.js","sourceRoot":"","sources":["../../../src/components/infiniteLoadTrigger/InfiniteLoadTrigger.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAQvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,mBAAmB,CAAC,EAO/D;QAP+D,EAC/D,GAAG,EACH,SAAS,EACT,SAAS,OAIT,EAHG,IAAI,cAJwD,iCAK/D,CADO;IAIP,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C,MAAM,eAAe,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACrD,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,EAAE;YACrD,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;gBAC/B,eAAe,EAAE,CAAC;YACnB,CAAC;QACF,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAQ,CAAC,CAAC;QACpC,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,UAAU,EAAE,CAAC;QACvB,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,OAAO,CACN,4BACC,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,EAChC,SAAS,EAAE,UAAU,CAAC,4BAA4B,EAAE,SAAS,CAAC,IAC1D,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/components/input/Input.d.ts

@@ -0,0 +1,17 @@
+import { InputProps as BaseInputProps } from '@base-ui/react/input';
+import { Ref } from 'react';
+export interface InputProps extends Omit<BaseInputProps, 'className'> {
+    autoSelect?: boolean;
+    /** Shuffle between random placeholders */
+    placeholders?: string[];
+    placeholdersIntervalMs?: number;
+    borderRef?: React.Ref<HTMLDivElement>;
+    startAccessory?: React.ReactNode;
+    endAccessory?: React.ReactNode;
+    className?: string;
+    ref?: Ref<HTMLInputElement>;
+}
+export declare const Input: (({ className, borderRef, startAccessory, endAccessory, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element) & {
+    Border: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/input/Input.js

@@ -0,0 +1,50 @@
+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 { Input as BaseInput, } from '@base-ui/react/input';
+import clsx from 'clsx';
+import { withClassName } from '../../hooks.js';
+import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
+import { inputInfo } from '../../systems/inputs.js';
+import cls from './Input.module.css';
+const InputBorder = withClassName('div', cls.inputBorder);
+const InnerInput = function InnerInput(_a) {
+    var { autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs = 5000, onValueChange } = _a, props = __rest(_a, ["autoSelect", "onFocus", "onBlur", "className", "placeholders", "placeholder", "placeholdersIntervalMs", "onValueChange"]);
+    const handleFocus = (ev) => {
+        if (autoSelect) {
+            ev.target.select();
+        }
+        if (inputInfo.lastPointerDown &&
+            Date.now() - inputInfo.lastPointerDown < 200) {
+            ev.currentTarget.setAttribute('data-focus-clicked', 'true');
+        }
+        else {
+            ev.currentTarget.setAttribute('data-focus-clicked', 'false');
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
+    };
+    const handleBlur = (ev) => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
+        ev.currentTarget.removeAttribute('data-focus-clicked');
+    };
+    const randomPlaceholder = useRotatingShuffledValue(placeholders !== null && placeholders !== void 0 ? placeholders : [], placeholdersIntervalMs);
+    return (_jsx(BaseInput, Object.assign({ placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder, onFocus: handleFocus, onValueChange: onValueChange, onBlur: handleBlur, className: clsx(cls.input, className) }, props)));
+};
+const InputDefault = function InputDefault(_a) {
+    var { className, borderRef, startAccessory, endAccessory } = _a, props = __rest(_a, ["className", "borderRef", "startAccessory", "endAccessory"]);
+    return (_jsxs(InputBorder, { ref: borderRef, className: className, children: [startAccessory, _jsx(InnerInput, Object.assign({}, props)), endAccessory] }));
+};
+export const Input = Object.assign(InputDefault, {
+    Border: InputBorder,
+    Input: InnerInput,
+});
+//# sourceMappingURL=Input.js.map

package/dist/components/input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,KAAK,IAAI,SAAS,GAElB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,GAAG,MAAM,oBAAoB,CAAC;AAErC,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;AAE1D,MAAM,UAAU,GAAG,SAAS,UAAU,CAAC,EAW1B;QAX0B,EACtC,UAAU,EACV,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,WAAW,EACX,sBAAsB,GAAG,IAAI,EAC7B,aAAa,OAGD,EADT,KAAK,cAV8B,0HAWtC,CADQ;IAER,MAAM,WAAW,GAA8B,CAAC,EAAE,EAAE,EAAE;QACrD,IAAI,UAAU,EAAE,CAAC;YAChB,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACpB,CAAC;QACD,IACC,SAAS,CAAC,eAAe;YACzB,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS,CAAC,eAAe,GAAG,GAAG,EAC3C,CAAC;YACF,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAC7D,CAAC;aAAM,CAAC;YACP,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC;QAC9D,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;IACf,CAAC,CAAC;IACF,MAAM,UAAU,GAA6B,CAAC,EAAE,EAAE,EAAE;QACnD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,EAAE,CAAC,CAAC;QACb,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,wBAAwB,CACjD,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAClB,sBAAsB,CACtB,CAAC;IAEF,OAAO,CACN,KAAC,SAAS,kBACT,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,iBAAiB,EAC7C,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,IACjC,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC;AAcF,MAAM,YAAY,GAAG,SAAS,YAAY,CAAC,EAM9B;QAN8B,EAC1C,SAAS,EACT,SAAS,EACT,cAAc,EACd,YAAY,OAEA,EADT,KAAK,cALkC,4DAM1C,CADQ;IAER,OAAO,CACN,MAAC,WAAW,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,aAC/C,cAAc,EACf,KAAC,UAAU,oBAAK,KAAK,EAAI,EACxB,YAAY,IACA,CACd,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IAChD,MAAM,EAAE,WAAW;IACnB,KAAK,EAAE,UAAU;CACjB,CAAC,CAAC"}