@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/components/Select.es.js

@@ -0,0 +1,300 @@
+"use client";
+import { defaultBorderMixin, focusedDisabled } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { usePortalContainer } from "../hooks/PortalContainerContext.es.js";
+import { iconSize } from "../icons/Icon.es.js";
+import { SelectInputLabel } from "./common/SelectInputLabel.es.js";
+import React, { Children, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+//#region src/components/Select.tsx
+/**
+* Above this many options a closed select renders only the one it shows.
+*
+* Radix renders a closed select's items anyway — into a detached fragment, so
+* that a letter typed on the focused trigger can pick one, and inside a form
+* into the hidden native `<select>` as well. An enum field paid for its whole
+* list on every render of the form around it: 500 options were 100 ms to mount
+* and 17 ms per re-render in jsdom, linear in the count. Small lists keep
+* Radix's own behaviour untouched; long ones answer typed letters here
+* ({@link findNextOption}) and render their items when opened.
+*/
+var LAZY_OPTIONS_THRESHOLD = 50;
+/** How long typed letters accumulate into one search — Radix's own window. */
+var TYPEAHEAD_RESET_MS = 1e3;
+/**
+* The `SelectItem`s among `children`, in document order: through fragments,
+* `SelectGroup`s and any other element wrapping them. An item rendered by a
+* component of the caller's own is not seen, so such a list never counts as
+* long and keeps the default behaviour.
+*/
+function collectOptions(children, into = []) {
+	Children.forEach(children, (child) => {
+		if (!React.isValidElement(child)) return;
+		if (child.type === SelectItem) {
+			const props = child.props;
+			into.push({
+				element: child,
+				value: String(props.value),
+				disabled: Boolean(props.disabled)
+			});
+			return;
+		}
+		const nested = child.props.children;
+		if (nested !== void 0) collectOptions(nested, into);
+	});
+	return into;
+}
+/** The text a node would render, as far as its elements' own children say. */
+function textOf(node) {
+	if (node === null || node === void 0 || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(textOf).join("");
+	if (React.isValidElement(node)) return textOf(node.props.children);
+	return "";
+}
+/**
+* What a typed letter matches an option against: its `textValue`, else the
+* text of its children, else its value. Radix reads the rendered text, which
+* an unrendered item does not have — an item whose label is drawn by a
+* component (a chip) passes `textValue`.
+*/
+function optionLabel(option) {
+	const { textValue, children } = option.element.props;
+	if (textValue !== void 0) return textValue;
+	return textOf(children).trim() || option.value;
+}
+/**
+* Radix's `findNextItem`, over options that are not rendered: the next option
+* after the current one whose label starts with the search; the same letter
+* typed again cycles through the options it starts.
+*/
+function findNextOption(options, search, current) {
+	if (options.length === 0) return void 0;
+	const normalizedSearch = (search.length > 1 && Array.from(search).every((char) => char === search[0]) ? search[0] : search).toLowerCase();
+	const start = Math.max(current ? options.indexOf(current) : -1, 0);
+	let wrapped = options.map((_, index) => options[(start + index) % options.length]);
+	if (normalizedSearch.length === 1) wrapped = wrapped.filter((option) => option !== current);
+	const next = wrapped.find((option) => optionLabel(option).toLowerCase().startsWith(normalizedSearch));
+	return next !== current ? next : void 0;
+}
+var Select = forwardRef(({ inputRef, open, name, fullWidth = false, id, onOpenChange, value, onChange, onValueChange, className, inputClassName, viewportClassName, placeholder, renderValue, label, size = "large", error, disabled, padding = true, position = "item-aligned", endAdornment, invisible, chevron = true, triggerContent, children, dataType = "string", portalContainer: manualContainer, "aria-label": ariaLabel, ...props }, ref) => {
+	const [openInternal, setOpenInternal] = useState(open ?? false);
+	useEffect(() => {
+		setOpenInternal(open ?? false);
+	}, [open]);
+	const contextContainer = usePortalContainer();
+	const finalContainer = manualContainer ?? contextContainer ?? void 0;
+	const onValueChangeInternal = useCallback((newValue) => {
+		let typedValue = newValue;
+		if (dataType === "boolean") {
+			if (newValue === "true") typedValue = true;
+			else if (newValue === "false") typedValue = false;
+		} else if (dataType === "number") {
+			if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
+		}
+		onValueChange?.(typedValue);
+		if (onChange) onChange({ target: {
+			name,
+			value: typedValue
+		} });
+	}, [
+		onChange,
+		onValueChange,
+		name,
+		dataType
+	]);
+	const hasValue = Array.isArray(value) ? value.length > 0 : value != null && value !== "" && value !== void 0;
+	const stringValue = value !== void 0 ? String(value) : void 0;
+	const options = useMemo(() => collectOptions(children), [children]);
+	const lazyOptions = options.length > LAZY_OPTIONS_THRESHOLD;
+	const renderedOptions = !lazyOptions || openInternal ? children : options.find((option) => option.value === stringValue)?.element ?? null;
+	const typeahead = useRef({ search: "" });
+	useEffect(() => () => clearTimeout(typeahead.current.timer), []);
+	const resetTypeahead = useCallback(() => {
+		clearTimeout(typeahead.current.timer);
+		typeahead.current.search = "";
+	}, []);
+	const onTriggerKeyDown = useCallback((event) => {
+		if (!lazyOptions || disabled) return;
+		if (event.ctrlKey || event.altKey || event.metaKey || event.key.length !== 1) return;
+		const state = typeahead.current;
+		if (event.key === " " && state.search === "") return;
+		const search = state.search + event.key;
+		state.search = search;
+		clearTimeout(state.timer);
+		state.timer = setTimeout(() => {
+			state.search = "";
+		}, TYPEAHEAD_RESET_MS);
+		const enabled = options.filter((option) => !option.disabled);
+		const next = findNextOption(enabled, search, enabled.find((option) => option.value === stringValue));
+		if (next) onValueChangeInternal(next.value);
+	}, [
+		lazyOptions,
+		disabled,
+		options,
+		stringValue,
+		onValueChangeInternal
+	]);
+	const hasEmptyOption = useMemo(() => options.some((option) => option.value === ""), [options]);
+	const onRootValueChange = useCallback((newValue) => {
+		if (lazyOptions && newValue === "" && !hasEmptyOption) return;
+		onValueChangeInternal(newValue);
+	}, [
+		lazyOptions,
+		hasEmptyOption,
+		onValueChangeInternal
+	]);
+	const displayChildren = useMemo(() => {
+		if (!hasValue || renderValue) return null;
+		let found = null;
+		Children.forEach(children, (child) => {
+			if (React.isValidElement(child) && String(child.props.value) === String(value)) found = child.props.children;
+		});
+		return found;
+	}, [
+		children,
+		hasValue,
+		renderValue,
+		value
+	]);
+	const emptyItemDisplay = useMemo(() => {
+		if (stringValue !== "") return null;
+		const emptyItem = Children.toArray(children).find((child) => React.isValidElement(child) && String(child.props.value) === "");
+		if (!emptyItem) return null;
+		return value !== void 0 && renderValue ? renderValue(value) : emptyItem.props.children;
+	}, [
+		children,
+		renderValue,
+		stringValue,
+		value
+	]);
+	const bare = triggerContent !== void 0;
+	const bareContent = bare ? /* @__PURE__ */ jsx("div", {
+		className: "flex w-full",
+		children: triggerContent
+	}) : void 0;
+	const controlHeight = {
+		"min-h-[28px]": size === "smallest",
+		"min-h-[32px]": size === "small",
+		"min-h-[40px]": size === "medium",
+		"min-h-[48px]": size === "large"
+	};
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Root, {
+		name,
+		value: stringValue,
+		open: openInternal,
+		disabled,
+		onValueChange: onRootValueChange,
+		onOpenChange: (open) => {
+			if (open) resetTypeahead();
+			onOpenChange?.(open);
+			setOpenInternal(open);
+		},
+		...props,
+		children: [
+			typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, {
+				error,
+				children: label
+			}) : label,
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("select-none", !bare && "rounded-lg text-sm", !bare && (invisible ? "bg-transparent" : "bg-surface-field border border-hairline"), !bare && (disabled ? "bg-surface-field/60" : invisible ? "" : "transition-colors duration-150 hover:bg-surface-field-hover"), "relative flex items-center", className, !bare && controlHeight, {
+					"w-fit": !fullWidth,
+					"w-full": fullWidth
+				}),
+				children: [/* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+					ref: inputRef,
+					id,
+					asChild: false,
+					type: "button",
+					onKeyDown: onTriggerKeyDown,
+					"aria-label": ariaLabel ?? (typeof label === "string" ? label : typeof renderValue === "string" ? renderValue : "Select an option"),
+					"aria-invalid": error || void 0,
+					className: cls("h-full", padding && !bare ? {
+						"px-4": size === "large",
+						"px-3": size === "medium",
+						"px-2": size === "small" || size === "smallest"
+					} : "", "outline-hidden focus:outline-hidden", "outline-none focus:outline-none", "select-none", !bare && [
+						"rounded-lg text-sm",
+						error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
+						error ? "border border-red-500 dark:border-red-600" : "",
+						disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
+						controlHeight
+					], "relative flex flex-row items-center", {
+						"w-full": fullWidth,
+						"w-fit": !fullWidth
+					}, inputClassName),
+					children: [/* @__PURE__ */ jsx("div", {
+						ref,
+						className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", !bare && controlHeight),
+						children: /* @__PURE__ */ jsx(SelectPrimitive.Value, {
+							onClick: (e) => {
+								e.preventDefault();
+								e.stopPropagation();
+							},
+							placeholder: bareContent ?? emptyItemDisplay ?? placeholder,
+							className: "w-full",
+							children: bareContent ?? (hasValue && value !== void 0 && renderValue ? renderValue(value) : displayChildren || placeholder)
+						})
+					}), chevron && !bare && /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+							size: size === "large" ? iconSize.medium : iconSize.small,
+							className: cls("transition", open ? "rotate-180" : "", {
+								"px-2": size === "large",
+								"px-1": size === "medium" || size === "small"
+							})
+						})
+					})]
+				}), endAdornment && /* @__PURE__ */ jsx("div", {
+					className: cls("h-full flex items-center absolute right-0 pr-12"),
+					onClick: (e) => {
+						e.preventDefault();
+						e.stopPropagation();
+					},
+					children: endAdornment
+				})]
+			}),
+			/* @__PURE__ */ jsx(SelectPrimitive.Portal, {
+				container: finalContainer,
+				children: /* @__PURE__ */ jsx(SelectPrimitive.Content, {
+					position,
+					className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-surface-card p-2 rounded-lg shadow-lg", defaultBorderMixin),
+					children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+						className: cls("p-1", viewportClassName),
+						style: { maxHeight: "var(--radix-select-content-available-height)" },
+						children: renderedOptions
+					})
+				})
+			})
+		]
+	});
+});
+Select.displayName = "Select";
+var SelectItem = React.memo(function SelectItem({ value, children, disabled, className, textValue }) {
+	const stringValue = String(value);
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+		value: stringValue,
+		disabled,
+		textValue,
+		className: cls("w-full", "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300", "focus:z-10", "data-[state=checked]:bg-surface-active focus:bg-surface-hover", "data-[state=checked]:focus:bg-surface-active", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", "[&>*]:w-full", "overflow-visible", className),
+		children: [/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }), /* @__PURE__ */ jsx("div", {
+			className: "absolute left-1 data-[state=checked]:block hidden",
+			children: /* @__PURE__ */ jsx(CheckIcon, { size: iconSize.smallest })
+		})]
+	}, stringValue);
+});
+var SelectGroup = React.memo(function SelectGroup({ label, children, className }) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Group, {
+		className: "mt-6 first:mt-2",
+		children: [/* @__PURE__ */ jsx(SelectPrimitive.Label, {
+			className: cls("text-xs text-surface-accent-900 dark:text-white uppercase tracking-wider font-semibold", "px-2 py-2", className),
+			children: label
+		}), children]
+	});
+});
+//#endregion
+export { Select, SelectGroup, SelectItem };
+
+//# sourceMappingURL=Select.es.js.map

package/dist/components/Select.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.es.js","names":[],"sources":["../../src/components/Select.tsx"],"sourcesContent":["\n\"use client\";\nimport { CheckIcon, ChevronDownIcon } from \"lucide-react\";\nimport { iconSize } from \"../icons/Icon\";\nimport React, { ChangeEvent, Children, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport {\n    defaultBorderMixin,\n    fieldBackgroundDisabledMixin,\n    fieldBackgroundHoverMixin,\n    fieldBackgroundInvisibleMixin,\n    fieldBackgroundMixin,\n    focusedDisabled\n} from \"../styles\";\n\nimport { cls } from \"../util\";\nimport { SelectInputLabel } from \"./common/SelectInputLabel\";\nimport { usePortalContainer } from \"../hooks/PortalContainerContext\";\n\nexport type SelectValue = string | number | boolean;\n\n/**\n * Above this many options a closed select renders only the one it shows.\n *\n * Radix renders a closed select's items anyway — into a detached fragment, so\n * that a letter typed on the focused trigger can pick one, and inside a form\n * into the hidden native `<select>` as well. An enum field paid for its whole\n * list on every render of the form around it: 500 options were 100 ms to mount\n * and 17 ms per re-render in jsdom, linear in the count. Small lists keep\n * Radix's own behaviour untouched; long ones answer typed letters here\n * ({@link findNextOption}) and render their items when opened.\n */\nconst LAZY_OPTIONS_THRESHOLD = 50;\n\n/** How long typed letters accumulate into one search — Radix's own window. */\nconst TYPEAHEAD_RESET_MS = 1000;\n\ntype SelectOption = {\n    element: React.ReactElement<SelectItemProps<SelectValue>>,\n    value: string,\n    disabled: boolean\n};\n\n/**\n * The `SelectItem`s among `children`, in document order: through fragments,\n * `SelectGroup`s and any other element wrapping them. An item rendered by a\n * component of the caller's own is not seen, so such a list never counts as\n * long and keeps the default behaviour.\n */\nfunction collectOptions(children: React.ReactNode, into: SelectOption[] = []): SelectOption[] {\n    Children.forEach(children, (child) => {\n        if (!React.isValidElement(child)) return;\n        if (child.type === SelectItem) {\n            const props = child.props as SelectItemProps<SelectValue>;\n            into.push({\n                element: child as React.ReactElement<SelectItemProps<SelectValue>>,\n                value: String(props.value),\n                disabled: Boolean(props.disabled)\n            });\n            return;\n        }\n        const nested = (child.props as { children?: React.ReactNode }).children;\n        if (nested !== undefined) collectOptions(nested, into);\n    });\n    return into;\n}\n\n/** The text a node would render, as far as its elements' own children say. */\nfunction textOf(node: React.ReactNode): string {\n    if (node === null || node === undefined || typeof node === \"boolean\") return \"\";\n    if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n    if (Array.isArray(node)) return node.map(textOf).join(\"\");\n    if (React.isValidElement(node)) return textOf((node.props as { children?: React.ReactNode }).children);\n    return \"\";\n}\n\n/**\n * What a typed letter matches an option against: its `textValue`, else the\n * text of its children, else its value. Radix reads the rendered text, which\n * an unrendered item does not have — an item whose label is drawn by a\n * component (a chip) passes `textValue`.\n */\nfunction optionLabel(option: SelectOption): string {\n    const { textValue, children } = option.element.props;\n    if (textValue !== undefined) return textValue;\n    return textOf(children).trim() || option.value;\n}\n\n/**\n * Radix's `findNextItem`, over options that are not rendered: the next option\n * after the current one whose label starts with the search; the same letter\n * typed again cycles through the options it starts.\n */\nfunction findNextOption(options: SelectOption[], search: string, current: SelectOption | undefined): SelectOption | undefined {\n    if (options.length === 0) return undefined;\n    const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);\n    const normalizedSearch = (isRepeated ? search[0] : search).toLowerCase();\n    const start = Math.max(current ? options.indexOf(current) : -1, 0);\n    let wrapped = options.map((_, index) => options[(start + index) % options.length]);\n    if (normalizedSearch.length === 1) wrapped = wrapped.filter((option) => option !== current);\n    const next = wrapped.find((option) => optionLabel(option).toLowerCase().startsWith(normalizedSearch));\n    return next !== current ? next : undefined;\n}\n\nexport type SelectProps<T extends SelectValue = string> = {\n    open?: boolean,\n    name?: string,\n    fullWidth?: boolean,\n    id?: string,\n    onOpenChange?: (open: boolean) => void,\n    value?: T,\n    className?: string,\n    inputClassName?: string,\n    viewportClassName?: string,\n    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,\n    onValueChange?: (updatedValue: T) => void,\n    placeholder?: React.ReactNode,\n    renderValue?: (value: T) => React.ReactNode,\n    size?: \"smallest\" | \"small\" | \"medium\" | \"large\",\n    label?: React.ReactNode | string,\n    disabled?: boolean,\n    error?: boolean,\n    position?: \"item-aligned\" | \"popper\",\n    endAdornment?: React.ReactNode,\n    inputRef?: React.Ref<HTMLButtonElement>,\n    padding?: boolean,\n    invisible?: boolean,\n    /**\n     * Whether the trigger draws its own chevron. A table cell turns it off:\n     * the cell draws one opener for every kind of editor, in the same place.\n     */\n    chevron?: boolean,\n    /**\n     * Replaces everything the trigger draws — the value, the box, its padding,\n     * its height and the chevron — with this node. For a caller that frames\n     * the select itself: a table cell passes the preview it shows at rest, so\n     * selecting the cell moves nothing.\n     */\n    triggerContent?: React.ReactNode,\n    children?: React.ReactNode;\n    dataType?: \"string\" | \"number\" | \"boolean\";\n    portalContainer?: HTMLElement | null; // Explicitly added to props type if missing\n    /**\n     * Accessible name for the trigger, for a select whose `label` is a node\n     * rather than a string — or which shows no label at all.\n     *\n     * Without it such a select announces the literal fallback \"Select an\n     * option\", which is indistinguishable from every other unlabelled select\n     * on the screen.\n     */\n    \"aria-label\"?: string;\n};\n\nexport const Select = forwardRef<HTMLDivElement, SelectProps>(({\n    inputRef,\n    open,\n    name,\n    fullWidth = false,\n    id,\n    onOpenChange,\n    value,\n    onChange,\n    onValueChange,\n    className,\n    inputClassName,\n    viewportClassName,\n    placeholder,\n    renderValue,\n    label,\n    size = \"large\",\n    error,\n    disabled,\n    padding = true,\n    position = \"item-aligned\",\n    endAdornment,\n    invisible,\n    chevron = true,\n    triggerContent,\n    children,\n    dataType = \"string\",\n    portalContainer: manualContainer, // Rename to avoid confusion\n    \"aria-label\": ariaLabel,\n    ...props\n}, ref) => {\n\n    const [openInternal, setOpenInternal] = useState(open ?? false);\n\n    useEffect(() => {\n        setOpenInternal(open ?? false);\n    }, [open]);\n\n    // Get the portal container from context\n    const contextContainer = usePortalContainer();\n\n    // Resolve final container (Manual Prop > Context Container > Undefined/Body)\n    const finalContainer = (manualContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;\n\n    const onValueChangeInternal = useCallback((newValue: string) => {\n        let typedValue: SelectValue = newValue;\n        if (dataType === \"boolean\") {\n            if (newValue === \"true\") typedValue = true;\n            else if (newValue === \"false\") typedValue = false;\n        } else if (dataType === \"number\") {\n            if (!isNaN(Number(newValue)) && newValue.trim() !== \"\") typedValue = Number(newValue);\n        }\n\n        onValueChange?.(typedValue as SelectValue & typeof value);\n        if (onChange) {\n            const event = {\n                target: {\n                    name,\n                    value: typedValue\n                }\n            } as ChangeEvent<HTMLSelectElement>;\n            onChange(event);\n        }\n    }, [onChange, onValueChange, name, dataType]);\n\n    const hasValue = Array.isArray(value) ? value.length > 0 : (value != null && value !== \"\" && value !== undefined);\n    const stringValue = value !== undefined ? String(value) : undefined;\n\n    // A long list renders its items only while open; closed, it renders the\n    // one it shows, which keeps that option in the native `<select>` a form\n    // submits. See LAZY_OPTIONS_THRESHOLD.\n    const options = useMemo(() => collectOptions(children), [children]);\n    const lazyOptions = options.length > LAZY_OPTIONS_THRESHOLD;\n    const renderedOptions = !lazyOptions || openInternal\n        ? children\n        : (options.find((option) => option.value === stringValue)?.element ?? null);\n\n    // Type-ahead on the closed trigger of a long list, where Radix has no\n    // rendered items to search. Radix's own handler still runs after this one\n    // and finds nothing to change; it keeps its own buffer in step, so a space\n    // typed mid-search does not open the list, as before.\n    const typeahead = useRef<{ search: string, timer?: ReturnType<typeof setTimeout> }>({ search: \"\" });\n    useEffect(() => () => clearTimeout(typeahead.current.timer), []);\n    const resetTypeahead = useCallback(() => {\n        clearTimeout(typeahead.current.timer);\n        typeahead.current.search = \"\";\n    }, []);\n    const onTriggerKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (!lazyOptions || disabled) return;\n        if (event.ctrlKey || event.altKey || event.metaKey || event.key.length !== 1) return;\n        const state = typeahead.current;\n        // A space starts nothing: it opens the list.\n        if (event.key === \" \" && state.search === \"\") return;\n        const search = state.search + event.key;\n        state.search = search;\n        clearTimeout(state.timer);\n        state.timer = setTimeout(() => {\n            state.search = \"\";\n        }, TYPEAHEAD_RESET_MS);\n        const enabled = options.filter((option) => !option.disabled);\n        const current = enabled.find((option) => option.value === stringValue);\n        const next = findNextOption(enabled, search, current);\n        if (next) onValueChangeInternal(next.value);\n    }, [lazyOptions, disabled, options, stringValue, onValueChangeInternal]);\n\n    // Inside a form Radix mirrors the value into a hidden native `<select>` and\n    // reports whatever that select then holds. A closed long list has only its\n    // shown option in there, so when the value moves to another option — typed,\n    // or set by the form — the select has no match for one commit and reports\n    // \"\", a change nobody made, which would clear the field. A real \"\" can only\n    // come from an option whose value is \"\".\n    const hasEmptyOption = useMemo(() => options.some((option) => option.value === \"\"), [options]);\n    const onRootValueChange = useCallback((newValue: string) => {\n        if (lazyOptions && newValue === \"\" && !hasEmptyOption) return;\n        onValueChangeInternal(newValue);\n    }, [lazyOptions, hasEmptyOption, onValueChangeInternal]);\n\n    const displayChildren = useMemo(() => {\n        if (!hasValue || renderValue) return null;\n\n        // Find the child that matches the current value to display its content\n        let found: React.ReactNode = null;\n        Children.forEach(children, (child) => {\n            if (React.isValidElement<SelectItemProps>(child) && String(child.props.value) === String(value)) {\n                found = child.props.children;\n            }\n        });\n        return found;\n    }, [children, hasValue, renderValue, value]);\n\n    // Radix reads a value of \"\" as nothing selected and shows the placeholder\n    // slot, whatever the Value's children say. So an item whose value really is\n    // \"\" (an \"inherit the default\" choice) is shown through that slot, or the\n    // trigger stays blank while it is the selected one.\n    const emptyItemDisplay = useMemo(() => {\n        if (stringValue !== \"\") return null;\n        const emptyItem = Children.toArray(children).find((child): child is React.ReactElement<SelectItemProps> =>\n            React.isValidElement<SelectItemProps>(child) && String(child.props.value) === \"\");\n        if (!emptyItem) return null;\n        return value !== undefined && renderValue ? renderValue(value) : emptyItem.props.children;\n    }, [children, renderValue, stringValue, value]);\n\n    const bare = triggerContent !== undefined;\n    // Radix's value slot is an inline `span` that drops the class it is\n    // given, so a chip inside it sits on a text baseline and the slot stands\n    // a pixel taller than the chip. A block of its own takes it off the line.\n    const bareContent = bare ? <div className={\"flex w-full\"}>{triggerContent}</div> : undefined;\n\n    const controlHeight = {\n        \"min-h-[28px]\": size === \"smallest\",\n        \"min-h-[32px]\": size === \"small\",\n        \"min-h-[40px]\": size === \"medium\",\n        \"min-h-[48px]\": size === \"large\"\n    };\n\n    return (\n        <SelectPrimitive.Root\n            name={name}\n            value={stringValue}\n            open={openInternal}\n            disabled={disabled}\n            onValueChange={onRootValueChange}\n            onOpenChange={(open) => {\n                if (open) resetTypeahead();\n                onOpenChange?.(open);\n                setOpenInternal(open);\n            }}\n            {...props}>\n            {typeof label === \"string\" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}\n            <div className={cls(\n                \"select-none\",\n                !bare && \"rounded-lg text-sm\",\n                !bare && (invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin),\n                // An invisible field has no hover fill of its own: whatever frames it (a table cell) carries the hover.\n                !bare && (disabled ? fieldBackgroundDisabledMixin : (invisible ? \"\" : fieldBackgroundHoverMixin)),\n                \"relative flex items-center\",\n                className,\n                !bare && controlHeight,\n                {\n                    \"w-fit\": !fullWidth,\n                    \"w-full\": fullWidth\n                }\n            )}>\n                <SelectPrimitive.Trigger\n                    ref={inputRef}\n                    id={id}\n                    asChild={false}\n                    type=\"button\"\n                    onKeyDown={onTriggerKeyDown}\n                    // A `label` that is an element — which every entity form\n                    // passes, because the label carries the property's type\n                    // icon — fell through to a hard-coded English literal, so\n                    // every enum field in every form announced itself as\n                    // \"Select an option\". Callers pass `aria-label` now; the\n                    // literal stays as the last resort, and is unreachable for\n                    // anything that names itself.\n                    aria-label={ariaLabel ?? (typeof label === \"string\" ? label : (typeof renderValue === \"string\" ? renderValue : \"Select an option\"))}\n                    aria-invalid={error || undefined}\n                    className={cls(\n                        \"h-full\",\n                        padding && !bare ? {\n                            \"px-4\": size === \"large\",\n                            \"px-3\": size === \"medium\",\n                            \"px-2\": size === \"small\" || size === \"smallest\"\n                        } : \"\",\n                        \"outline-hidden focus:outline-hidden\",\n                        \"outline-none focus:outline-none\",\n                        \"select-none\",\n                        !bare && [\n                            \"rounded-lg text-sm\",\n                            error ? \"text-red-500 dark:text-red-600\" : \"focus:text-text-primary dark:focus:text-text-primary-dark\",\n                            error ? \"border border-red-500 dark:border-red-600\" : \"\",\n                            disabled ? \"text-surface-accent-600 dark:text-surface-accent-400\" : \"text-surface-accent-800 dark:text-white\",\n                            controlHeight\n                        ],\n                        \"relative flex flex-row items-center\",\n                        {\n                            \"w-full\": fullWidth,\n                            \"w-fit\": !fullWidth\n                        },\n                        inputClassName\n                    )}\n                >\n                    <div\n                        ref={ref}\n                        className={cls(\n                            \"flex-grow max-w-full flex flex-row gap-2 items-center\",\n                            \"overflow-visible\",\n                            !bare && controlHeight\n                        )}>\n                        <SelectPrimitive.Value\n                            onClick={(e) => {\n                                e.preventDefault();\n                                e.stopPropagation();\n                            }}\n                            placeholder={bareContent ?? emptyItemDisplay ?? placeholder}\n                            className={\"w-full\"}>\n\n                            {bareContent ?? (hasValue && value !== undefined && renderValue\n                                ? renderValue(value)\n                                : (displayChildren || placeholder)\n                            )}\n\n                        </SelectPrimitive.Value>\n                    </div>\n\n                    {chevron && !bare && <SelectPrimitive.Icon asChild>\n                        <ChevronDownIcon size={size === \"large\" ? iconSize.medium : iconSize.small}\n                            className={cls(\"transition\", open ? \"rotate-180\" : \"\", {\n                                \"px-2\": size === \"large\",\n                                \"px-1\": size === \"medium\" || size === \"small\"\n                            })}/>\n                    </SelectPrimitive.Icon>}\n                </SelectPrimitive.Trigger>\n\n                {endAdornment && (\n                    <div\n                        className={cls(\"h-full flex items-center absolute right-0 pr-12\")}\n                        onClick={(e) => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                        }}>\n                        {endAdornment}\n                    </div>\n                )}\n            </div>\n\n            {/* Pass the calculated finalContainer */}\n            <SelectPrimitive.Portal container={finalContainer}>\n                <SelectPrimitive.Content position={position}\n                    className={cls(focusedDisabled, \"z-50 relative overflow-hidden border bg-surface-card p-2 rounded-lg shadow-lg\", defaultBorderMixin)}>\n                    <SelectPrimitive.Viewport className={cls(\"p-1\", viewportClassName)}\n                        style={{ maxHeight: \"var(--radix-select-content-available-height)\" }}>\n                        {renderedOptions}\n                    </SelectPrimitive.Viewport>\n                </SelectPrimitive.Content>\n            </SelectPrimitive.Portal>\n        </SelectPrimitive.Root>\n    );\n});\n\nSelect.displayName = \"Select\";\n\nexport type SelectItemProps<T extends SelectValue = string> = {\n    value: T,\n    children?: React.ReactNode,\n    disabled?: boolean,\n    className?: string,\n    /**\n     * The text a letter typed on the focused select matches this option by.\n     * Defaults to the option's text. Set it when the option is drawn by a\n     * component (a chip, an icon with a name inside it): a closed select with\n     * more than 50 options does not render them, so their text cannot be read.\n     */\n    textValue?: string,\n};\n\nexport const SelectItem = React.memo(function SelectItem<T extends SelectValue = string>({\n    value,\n    children,\n    disabled,\n    className,\n    textValue\n}: SelectItemProps<T>) {\n    // Convert value to string for Radix UI\n    const stringValue = String(value);\n\n    return <SelectPrimitive.Item\n        key={stringValue}\n        value={stringValue}\n        disabled={disabled}\n        textValue={textValue}\n        className={cls(\n            \"w-full\",\n            \"relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300\",\n            \"focus:z-10\",\n            \"data-[state=checked]:bg-surface-active focus:bg-surface-hover\",\n            \"data-[state=checked]:focus:bg-surface-active\",\n            disabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n            \"[&>*]:w-full\",\n            \"overflow-visible\",\n            className\n        )}>\n        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n        <div\n            className=\"absolute left-1 data-[state=checked]:block hidden\">\n            <CheckIcon size={iconSize.smallest}/>\n        </div>\n    </SelectPrimitive.Item>;\n});\n\nexport type SelectGroupProps = {\n    label: React.ReactNode,\n    children: React.ReactNode,\n    className?: string\n};\n\nexport const SelectGroup = React.memo(function SelectGroup({\n    label,\n    children,\n    className\n}: SelectGroupProps) {\n    // The items go inside the group and the label is Radix's own, so the\n    // `role=\"group\"` holds its options and is named by the label.\n    return <SelectPrimitive.Group className=\"mt-6 first:mt-2\">\n        <SelectPrimitive.Label\n            className={cls(\n                \"text-xs text-surface-accent-900 dark:text-white uppercase tracking-wider font-semibold\",\n                \"px-2 py-2\",\n                className\n            )}>\n            {label}\n        </SelectPrimitive.Label>\n        {children}\n    </SelectPrimitive.Group>;\n});\n"],"mappings":"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"}

package/dist/components/Separator.es.js

@@ -0,0 +1,20 @@
+import { cls } from "../util/cls.es.js";
+import { jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+//#region src/components/Separator.tsx
+function Separator({ orientation, decorative, className }) {
+	if (orientation === "horizontal") return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
+		decorative,
+		orientation: "horizontal",
+		className: cls("bg-hairline data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)
+	});
+	else return /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
+		className: cls("bg-hairline data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className),
+		decorative,
+		orientation: "vertical"
+	});
+}
+//#endregion
+export { Separator };
+
+//# sourceMappingURL=Separator.es.js.map

package/dist/components/Separator.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.es.js","names":[],"sources":["../../src/components/Separator.tsx"],"sourcesContent":["import * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport { cls } from \"../util\";\n\nexport function Separator({\n                              orientation,\n                              decorative,\n                              className\n                          }: {\n    orientation: \"horizontal\" | \"vertical\",\n    decorative?: boolean,\n    className?: string\n}) {\n    if (orientation === \"horizontal\")\n        return (\n            <SeparatorPrimitive.Root\n                decorative={decorative}\n                orientation=\"horizontal\"\n                className={cls(\"bg-hairline data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4\", className)}/>\n        );\n    else\n        return (\n            <SeparatorPrimitive.Root\n                className={cls(\"bg-hairline data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4\", className)}\n                decorative={decorative}\n                orientation=\"vertical\"\n            />\n        );\n}\n"],"mappings":";;;;AAGA,SAAgB,UAAU,EACI,aACA,YACA,aAK3B;CACC,IAAI,gBAAgB,cAChB,OACI,oBAAC,mBAAmB,MAApB;EACgB;EACZ,aAAY;EACZ,WAAW,IAAI,gKAAgK,SAAS;CAAG,CAAA;MAGnM,OACI,oBAAC,mBAAmB,MAApB;EACI,WAAW,IAAI,gKAAgK,SAAS;EAC5K;EACZ,aAAY;CACf,CAAA;AAEb"}

package/dist/components/Sheet.es.js

@@ -0,0 +1,73 @@
+"use client";
+import { defaultBorderMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { PortalContainerProvider, usePortalContainer } from "../hooks/PortalContainerContext.es.js";
+import { useRestoreInterruptedFocus } from "../hooks/useRestoreInterruptedFocus.es.js";
+import { useModalFocus } from "../hooks/useModalFocus.es.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+//#region src/components/Sheet.tsx
+var Sheet = ({ children, side = "right", title, modal = true, includeBackgroundOverlay = true, open, onOpenChange, onPointerDownOutside, onInteractOutside, initialFocus, onOpenAutoFocus, onCloseAutoFocus, transparent, className, style, overlayClassName, overlayZIndex = "z-50", overlayStyle, portalContainer, ...props }) => {
+	const [displayed, setDisplayed] = useState(false);
+	const [contentEl, setContentEl] = useState(null);
+	useRestoreInterruptedFocus(contentEl);
+	const focus = useModalFocus({
+		open,
+		initialFocus,
+		onOpenAutoFocus,
+		onCloseAutoFocus
+	});
+	const contextContainer = usePortalContainer();
+	const finalContainer = portalContainer ?? contextContainer ?? void 0;
+	useEffect(() => {
+		const raf = requestAnimationFrame(() => {
+			setDisplayed(open);
+		});
+		return () => cancelAnimationFrame(raf);
+	}, [open]);
+	const transformValue = {
+		top: "-translate-y-full",
+		bottom: "translate-y-full",
+		left: "-translate-x-full",
+		right: "translate-x-full"
+	};
+	const borderClass = {
+		top: "border-b",
+		bottom: "border-t",
+		left: "border-r",
+		right: "border-l"
+	};
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		open: displayed || open,
+		modal,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, {
+			container: finalContainer,
+			children: [includeBackgroundOverlay && /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+				className: cls("outline-none", "fixed inset-0 bg-surface-scrim", "backdrop-blur-sm transition-all duration-100 motion-reduce:transition-none", overlayZIndex, overlayClassName),
+				style: overlayStyle
+			}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+				...props,
+				ref: setContentEl,
+				onOpenAutoFocus: focus.onOpenAutoFocus,
+				onCloseAutoFocus: focus.onCloseAutoFocus,
+				onPointerDownOutside,
+				onInteractOutside,
+				className: cls("outline-none", borderClass[side], defaultBorderMixin, "text-surface-accent-900 dark:text-white", "fixed transform z-50 transition-[transform,opacity] ease-in-out motion-reduce:transition-none", !displayed ? "duration-150" : "duration-100", "outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0", transparent ? "" : "shadow-md bg-surface-card", side === "top" || side === "bottom" ? "w-full" : "h-full", side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0", displayed && open ? "opacity-100" : "opacity-50", !displayed || !open ? transformValue[side] : "", className),
+				style,
+				children: [/* @__PURE__ */ jsx(DialogPrimitive.Title, {
+					className: "sr-only outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0",
+					children: title ?? "Sheet"
+				}), /* @__PURE__ */ jsx(PortalContainerProvider, {
+					container: contentEl,
+					children
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { Sheet };
+
+//# sourceMappingURL=Sheet.es.js.map

package/dist/components/Sheet.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.es.js","names":[],"sources":["../../src/components/Sheet.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from \"react\";\nimport { cls } from \"../util\";\nimport { defaultBorderMixin } from \"../styles\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { usePortalContainer, PortalContainerProvider } from \"../hooks/PortalContainerContext\";\nimport { useRestoreInterruptedFocus } from \"../hooks/useRestoreInterruptedFocus\";\nimport { useModalFocus } from \"../hooks/useModalFocus\";\n\ninterface SheetProps {\n    children: React.ReactNode;\n    open: boolean;\n    title?: string;\n    modal?: boolean;\n    includeBackgroundOverlay?: boolean;\n    side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    darkBackground?: boolean;\n    transparent?: boolean;\n    onOpenChange?: (open: boolean) => void;\n    onPointerDownOutside?: (e: Event) => void;\n    onInteractOutside?: (e: Event) => void;\n    /**\n     * The element to focus when the sheet opens. Without it the sheet focuses\n     * itself, so a screen reader announces it by its title and a phone does\n     * not raise its keyboard.\n     */\n    initialFocus?: React.RefObject<HTMLElement | null>;\n    /** Called as the sheet opens, before focus moves into it. `preventDefault()` keeps focus where it is. */\n    onOpenAutoFocus?: (e: Event) => void;\n    /**\n     * Called when focus is about to return after the sheet closes. By default\n     * it goes back to the element that had it when the sheet opened.\n     */\n    onCloseAutoFocus?: (e: Event) => void;\n    className?: string;\n    style?: React.CSSProperties;\n    overlayClassName?: string;\n    overlayZIndex?: string;\n    overlayStyle?: React.CSSProperties;\n    portalContainer?: HTMLElement | null;\n}\n\nexport const Sheet: React.FC<SheetProps> = ({\n    children,\n    side = \"right\",\n    title,\n    modal = true,\n    includeBackgroundOverlay = true,\n    open,\n    onOpenChange,\n    onPointerDownOutside,\n    onInteractOutside,\n    initialFocus,\n    onOpenAutoFocus,\n    onCloseAutoFocus,\n    transparent,\n    className,\n    style,\n    overlayClassName,\n    overlayZIndex = \"z-50\",\n    overlayStyle,\n    portalContainer,\n    ...props\n}) => {\n    const [displayed, setDisplayed] = useState(false);\n    const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null);\n    // Popups portal into the content, which is also the focus trap's container:\n    // one closing on blur used to drop a Tab onto the panel itself.\n    useRestoreInterruptedFocus(contentEl);\n    const focus = useModalFocus({\n        open,\n        initialFocus,\n        onOpenAutoFocus,\n        onCloseAutoFocus\n    });\n\n    // Get the portal container from context\n    const contextContainer = usePortalContainer();\n\n    // Prioritize manual prop, fallback to context container\n    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;\n\n    useEffect(() => {\n        const raf = requestAnimationFrame(() => {\n            setDisplayed(open);\n        });\n        return () => cancelAnimationFrame(raf);\n    }, [open]);\n\n    const transformValue: Record<string, string> = {\n        top: \"-translate-y-full\",\n        bottom: \"translate-y-full\",\n        left: \"-translate-x-full\",\n        right: \"translate-x-full\"\n    };\n\n    const borderClass: Record<string, string> = {\n        top: \"border-b\",\n        bottom: \"border-t\",\n        left: \"border-r\",\n        right: \"border-l\"\n    };\n\n    return (\n        <DialogPrimitive.Root open={displayed || open}\n            modal={modal}\n            onOpenChange={onOpenChange}>\n            <DialogPrimitive.Portal container={finalContainer}>\n                {includeBackgroundOverlay && <DialogPrimitive.Overlay\n                    className={cls(\n                        \"outline-none\",\n                        \"fixed inset-0 bg-surface-scrim\",\n                        \"backdrop-blur-sm transition-all duration-100 motion-reduce:transition-none\",\n                        overlayZIndex,\n                        overlayClassName\n                    )}\n                    style={overlayStyle}\n                />}\n                <DialogPrimitive.Content\n                    {...props}\n                    ref={setContentEl}\n                    onOpenAutoFocus={focus.onOpenAutoFocus}\n                    onCloseAutoFocus={focus.onCloseAutoFocus}\n                    onPointerDownOutside={onPointerDownOutside}\n                    onInteractOutside={onInteractOutside}\n                    className={cls(\n                        \"outline-none\",\n                        borderClass[side],\n                        defaultBorderMixin,\n                        // No `will-change: transform` / `transform-gpu` here, however\n                        // tempting the layer hint is on a panel this size. Either one\n                        // makes this element a *containing block* for its\n                        // `position: fixed` descendants, and everything portaled into\n                        // the panel below — a Select dropdown, above all — is fixed and\n                        // positioned in viewport coordinates. Inside a containing block\n                        // those coordinates are resolved against the panel instead, so\n                        // every popup was displaced by the panel's own offset and a\n                        // right-hand Select opened its list off the edge of the screen:\n                        // the dropdown was open, just nowhere anyone could see it.\n                        \"text-surface-accent-900 dark:text-white\",\n                        \"fixed transform z-50 transition-[transform,opacity] ease-in-out motion-reduce:transition-none\",\n                        !displayed ? \"duration-150\" : \"duration-100\",\n                        \"outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0\",\n                        transparent ? \"\" : \"shadow-md bg-surface-card\",\n                        side === \"top\" || side === \"bottom\" ? \"w-full\" : \"h-full\",\n                        side === \"left\" || side === \"top\" ? \"left-0 top-0\" : \"right-0 bottom-0\",\n                        displayed && open ? \"opacity-100\" : \"opacity-50\",\n                        !displayed || !open ? transformValue[side] : \"\",\n                        className\n                    )}\n                    style={style}\n                >\n                    <DialogPrimitive.Title className=\"sr-only outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus:ring-0\">\n                        {title ?? \"Sheet\"}\n                    </DialogPrimitive.Title>\n                    <PortalContainerProvider container={contentEl}>\n                        {children}\n                    </PortalContainerProvider>\n                </DialogPrimitive.Content>\n            </DialogPrimitive.Portal>\n        </DialogPrimitive.Root>\n    );\n};\n"],"mappings":";;;;;;;;;;AA0CA,IAAa,SAA+B,EACxC,UACA,OAAO,SACP,OACA,QAAQ,MACR,2BAA2B,MAC3B,MACA,cACA,sBACA,mBACA,cACA,iBACA,kBACA,aACA,WACA,OACA,kBACA,gBAAgB,QAChB,cACA,iBACA,GAAG,YACD;CACF,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CAGtE,2BAA2B,SAAS;CACpC,MAAM,QAAQ,cAAc;EACxB;EACA;EACA;EACA;CACJ,CAAC;CAGD,MAAM,mBAAmB,mBAAmB;CAG5C,MAAM,iBAAkB,mBAAmB,oBAAoB,KAAA;CAE/D,gBAAgB;EACZ,MAAM,MAAM,4BAA4B;GACpC,aAAa,IAAI;EACrB,CAAC;EACD,aAAa,qBAAqB,GAAG;CACzC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,iBAAyC;EAC3C,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;CACX;CAEA,MAAM,cAAsC;EACxC,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;CACX;CAEA,OACI,oBAAC,gBAAgB,MAAjB;EAAsB,MAAM,aAAa;EAC9B;EACO;YACd,qBAAC,gBAAgB,QAAjB;GAAwB,WAAW;aAAnC,CACK,4BAA4B,oBAAC,gBAAgB,SAAjB;IACzB,WAAW,IACP,gBACA,kCACA,8EACA,eACA,gBACJ;IACA,OAAO;GACV,CAAA,GACD,qBAAC,gBAAgB,SAAjB;IACI,GAAI;IACJ,KAAK;IACL,iBAAiB,MAAM;IACvB,kBAAkB,MAAM;IACF;IACH;IACnB,WAAW,IACP,gBACA,YAAY,OACZ,oBAWA,2CACA,iGACA,CAAC,YAAY,iBAAiB,gBAC9B,gGACA,cAAc,KAAK,6BACnB,SAAS,SAAS,SAAS,WAAW,WAAW,UACjD,SAAS,UAAU,SAAS,QAAQ,iBAAiB,oBACrD,aAAa,OAAO,gBAAgB,cACpC,CAAC,aAAa,CAAC,OAAO,eAAe,QAAQ,IAC7C,SACJ;IACO;cAhCX,CAkCI,oBAAC,gBAAgB,OAAjB;KAAuB,WAAU;eAC5B,SAAS;IACS,CAAA,GACvB,oBAAC,yBAAD;KAAyB,WAAW;KAC/B;IACoB,CAAA,CACJ;KACL;;CACN,CAAA;AAE9B"}

package/dist/components/Skeleton.es.js

@@ -0,0 +1,33 @@
+import { cls } from "../util/cls.es.js";
+import { useInjectStyles } from "../hooks/useInjectStyles.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Skeleton.tsx
+var styles = `
+@keyframes shimmer {
+  0% {
+    transform: translateX(-150%);
+  }
+  100% {
+    transform: translateX(150%);
+  }
+}
+`;
+function Skeleton({ width, height, className }) {
+	useInjectStyles("Skeleton", styles);
+	return /* @__PURE__ */ jsx("span", {
+		style: {
+			width: width === void 0 ? void 0 : `${width}px`,
+			height: height === void 0 ? void 0 : `${height}px`
+		},
+		className: cls("block relative overflow-hidden", "bg-surface-raised rounded-md", "max-w-full max-h-full", width === void 0 ? "w-full" : void 0, height === void 0 ? "h-3" : void 0, className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/50 dark:via-white/8 to-transparent",
+			style: { animation: "shimmer 1.8s ease-in-out infinite" }
+		})
+	});
+}
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=Skeleton.es.js.map

package/dist/components/Skeleton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.es.js","names":[],"sources":["../../src/components/Skeleton.tsx"],"sourcesContent":["import React from \"react\";\nimport { cls } from \"../util\";\nimport { useInjectStyles } from \"../hooks\";\n\nexport type SkeletonProps = {\n    width?: number;\n    height?: number;\n    className?: string;\n}\n\nconst styles = `\n@keyframes shimmer {\n  0% {\n    transform: translateX(-150%);\n  }\n  100% {\n    transform: translateX(150%);\n  }\n}\n`;\n\nexport function Skeleton({\n                             width,\n                             height,\n                             className\n                         }: SkeletonProps) {\n\n    useInjectStyles(\"Skeleton\", styles);\n\n    return <span\n        style={{\n            width: width === undefined ? undefined : `${width}px`,\n            height: height === undefined ? undefined : `${height}px`\n        }}\n        className={\n        cls(\n            \"block relative overflow-hidden\",\n            \"bg-surface-raised rounded-md\",\n            \"max-w-full max-h-full\",\n            // The defaults are classes, not inline styles, so that a caller can\n            // override them: an inline style beats every utility, which is why\n            // `<Skeleton className=\"w-full h-full\"/>` inside a 40px thumbnail\n            // box used to render a 12px bar. The `width`/`height` props still\n            // win over any class, since those do land inline.\n            width === undefined ? \"w-full\" : undefined,\n            height === undefined ? \"h-3\" : undefined,\n            className)\n    }>\n        <span\n            className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/50 dark:via-white/8 to-transparent\"\n            style={{ animation: \"shimmer 1.8s ease-in-out infinite\" }}\n        />\n    </span>;\n}\n"],"mappings":";;;;;AAUA,IAAM,SAAS;;;;;;;;;;AAWf,SAAgB,SAAS,EACI,OACA,QACA,aACc;CAEvC,gBAAgB,YAAY,MAAM;CAElC,OAAO,oBAAC,QAAD;EACH,OAAO;GACH,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,GAAG,MAAM;GAClD,QAAQ,WAAW,KAAA,IAAY,KAAA,IAAY,GAAG,OAAO;EACzD;EACA,WACA,IACI,kCACA,gCACA,yBAMA,UAAU,KAAA,IAAY,WAAW,KAAA,GACjC,WAAW,KAAA,IAAY,QAAQ,KAAA,GAC/B,SAAS;YAEb,oBAAC,QAAD;GACI,WAAU;GACV,OAAO,EAAE,WAAW,oCAAoC;EAC3D,CAAA;CACC,CAAA;AACV"}

package/dist/components/Slider.es.js

@@ -0,0 +1,56 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+//#region src/components/Slider.tsx
+function SliderThumb(props) {
+	return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, {
+		open: props.hovered,
+		children: [/* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: cls({
+				"border-primary bg-primary outline-none": !props.props.disabled,
+				"border-surface-raised-hover bg-surface-raised-hover": props.props.disabled
+			}, props.classes, "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-primary/50", "hover:ring-4 hover:ring-primary hover:ring-primary/25", "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50") })
+		}), /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+			side: "top",
+			sideOffset: 5,
+			className: cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-800/95 dark:bg-surface-raised-hover font-medium text-white shadow-2xl select-none duration-400 ease-in transform opacity-100"),
+			children: props.props.value?.[props.index]
+		})]
+	});
+}
+var Slider = React$1.forwardRef(({ className, size = "regular", ...props }, ref) => {
+	const [hovered, setHovered] = React$1.useState(false);
+	const thumbSizeClasses = size === "small" ? "h-4 w-4" : "h-6 w-6";
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+		delayDuration: 200,
+		children: /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
+			ref,
+			onMouseEnter: () => setHovered(true),
+			onMouseLeave: () => setHovered(false),
+			className: cls("relative flex w-full touch-none select-none items-center", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
+				style: { height: size === "small" ? 4 : 8 },
+				className: "relative w-full grow overflow-hidden rounded-full bg-surface-active",
+				children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: cls("absolute h-full", {
+					"bg-primary": !props.disabled,
+					"bg-surface-raised-hover": props.disabled
+				}) })
+			}), (props.value ?? props.defaultValue ?? [0]).map((_, index) => /* @__PURE__ */ jsx(SliderThumb, {
+				index,
+				props,
+				hovered,
+				classes: thumbSizeClasses
+			}, index))]
+		})
+	});
+});
+Slider.displayName = "Slider";
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=Slider.es.js.map

package/dist/components/Slider.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.es.js","names":[],"sources":["../../src/components/Slider.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cls } from \"../util\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nexport interface SliderProps {\n    className?: string;\n    name?: string;\n    disabled?: boolean;\n    orientation?: React.AriaAttributes[\"aria-orientation\"];\n    dir?: \"ltr\" | \"rtl\";\n    min?: number;\n    max?: number;\n    step?: number;\n    minStepsBetweenThumbs?: number;\n    value?: number[];\n    defaultValue?: number[];\n    onValueChange?: (value: number[]) => void;\n    onValueCommit?: (value: number[]) => void;\n    inverted?: boolean;\n    form?: string;\n    size?: \"small\" | \"regular\";\n}\n\nfunction SliderThumb(props: {\n    props: Omit<React.PropsWithoutRef<SliderProps>, \"size\" | \"className\">,\n    index: number,\n    hovered: boolean,\n    classes: string\n}) {\n    return <TooltipPrimitive.Root open={props.hovered}>\n        <TooltipPrimitive.Trigger asChild>\n            <SliderPrimitive.Thumb\n                className={cls({\n                        \"border-primary bg-primary outline-none\": !props.props.disabled,\n                        \"border-surface-raised-hover bg-surface-raised-hover\": props.props.disabled\n                    },\n                    props.classes,\n                    \"focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-primary/50\",\n                    \"hover:ring-4 hover:ring-primary hover:ring-primary/25\",\n                    \"block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\")}\n\n            />\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Content side=\"top\"\n                                  sideOffset={5}\n                                  className={cls(\n                                      \"TooltipContent\",\n                                      \"max-w-lg leading-relaxed\",\n                                      \"z-50 rounded-md px-3 py-2 text-xs leading-none bg-surface-800/95 dark:bg-surface-raised-hover font-medium text-white shadow-2xl select-none duration-400 ease-in transform opacity-100\"\n                                  )}>\n            {props.props.value?.[props.index]}\n        </TooltipPrimitive.Content>\n    </TooltipPrimitive.Root>;\n}\n\nconst Slider = React.forwardRef<\n    React.ElementRef<typeof SliderPrimitive.Root>,\n    SliderProps\n>(({\n       className,\n       size = \"regular\",\n       ...props\n   }, ref) => {\n    const [hovered, setHovered] = React.useState(false);\n\n    const thumbSizeClasses =\n        size === \"small\"\n            ? \"h-4 w-4\" // Smaller size for the thumb\n            : \"h-6 w-6\"; // Default size\n\n    return (\n        <TooltipPrimitive.Provider delayDuration={200}>\n            <SliderPrimitive.Root\n                ref={ref}\n                onMouseEnter={() => setHovered(true)}\n                onMouseLeave={() => setHovered(false)}\n                className={cls(\n                    \"relative flex w-full touch-none select-none items-center\",\n                    className\n                )}\n                {...props}\n            >\n                <SliderPrimitive.Track\n                    style={{ height: size === \"small\" ? 4 : 8 }}\n                    className={\"relative w-full grow overflow-hidden rounded-full bg-surface-active\"}>\n\n                    <SliderPrimitive.Range\n                        className={cls(\"absolute h-full\", {\n                            \"bg-primary\": !props.disabled,\n                            \"bg-surface-raised-hover\": props.disabled\n                        })}\n                    />\n                </SliderPrimitive.Track>\n\n                {(props.value ?? props.defaultValue ?? [0]).map((_, index) => <SliderThumb\n                    key={index}\n                    index={index}\n                    props={props}\n                    hovered={hovered}\n                    classes={thumbSizeClasses}/>)}\n            </SliderPrimitive.Root>\n        </TooltipPrimitive.Provider>\n    );\n});\n\nSlider.displayName = \"Slider\";\n\nexport { Slider };\n"],"mappings":";;;;;;;AAyBA,SAAS,YAAY,OAKlB;CACC,OAAO,qBAAC,iBAAiB,MAAlB;EAAuB,MAAM,MAAM;YAAnC,CACH,oBAAC,iBAAiB,SAAlB;GAA0B,SAAA;aACtB,oBAAC,gBAAgB,OAAjB,EACI,WAAW,IAAI;IACP,0CAA0C,CAAC,MAAM,MAAM;IACvD,uDAAuD,MAAM,MAAM;GACvE,GACA,MAAM,SACN,iFACA,yDACA,kHAAkH,EAEzH,CAAA;EACqB,CAAA,GAC1B,oBAAC,iBAAiB,SAAlB;GAA0B,MAAK;GACL,YAAY;GACZ,WAAW,IACP,kBACA,4BACA,wLACJ;aACrB,MAAM,MAAM,QAAQ,MAAM;EACL,CAAA,CACP;;AAC3B;AAEA,IAAM,SAAS,QAAM,YAGlB,EACI,WACA,OAAO,WACP,GAAG,SACJ,QAAQ;CACV,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,KAAK;CAElD,MAAM,mBACF,SAAS,UACH,YACA;CAEV,OACI,oBAAC,iBAAiB,UAAlB;EAA2B,eAAe;YACtC,qBAAC,gBAAgB,MAAjB;GACS;GACL,oBAAoB,WAAW,IAAI;GACnC,oBAAoB,WAAW,KAAK;GACpC,WAAW,IACP,4DACA,SACJ;GACA,GAAI;aARR,CAUI,oBAAC,gBAAgB,OAAjB;IACI,OAAO,EAAE,QAAQ,SAAS,UAAU,IAAI,EAAE;IAC1C,WAAW;cAEX,oBAAC,gBAAgB,OAAjB,EACI,WAAW,IAAI,mBAAmB;KAC9B,cAAc,CAAC,MAAM;KACrB,2BAA2B,MAAM;IACrC,CAAC,EACJ,CAAA;GACkB,CAAA,IAErB,MAAM,SAAS,MAAM,gBAAgB,CAAC,CAAC,EAAA,CAAG,KAAK,GAAG,UAAU,oBAAC,aAAD;IAEnD;IACA;IACE;IACT,SAAS;GAAkB,GAJtB,KAIsB,CAAC,CACd;;CACC,CAAA;AAEnC,CAAC;AAED,OAAO,cAAc"}