@coffer-org/web-ui 4.0.0

package/dist/components/ui/rating.js

@@ -0,0 +1,501 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Star } from 'lucide-react';
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import * as DirectionPrimitive from '@radix-ui/react-direction';
+import * as React from 'react';
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { cn } from "../../lib/utils.js";
+import { VisuallyHiddenInput } from "../visually-hidden-input.js";
+import { useAsRef } from "../../hooks/use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect.js";
+import { useLazyRef } from "../../hooks/use-lazy-ref.js";
+const ROOT_NAME = 'Rating';
+const ITEM_NAME = 'RatingItem';
+const ENTRY_FOCUS = 'ratingFocusGroup.onEntryFocus';
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+function getItemId(id, value) {
+    return `${id}-item-${value}`;
+}
+function getPartialFillGradientId(id, step) {
+    return `partial-fill-gradient-${id}-${step}`;
+}
+const MAP_KEY_TO_FOCUS_INTENT = {
+    ArrowLeft: 'prev',
+    ArrowUp: 'prev',
+    ArrowRight: 'next',
+    ArrowDown: 'next',
+    Home: 'first',
+    End: 'last',
+};
+function getDirectionAwareKey(key, dir) {
+    if (dir !== 'rtl')
+        return key;
+    return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;
+}
+function getFocusIntent(event, dir, orientation) {
+    const key = getDirectionAwareKey(event.key, dir);
+    if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key))
+        return undefined;
+    if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key))
+        return undefined;
+    return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst(candidates, preventScroll = false) {
+    const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+    for (const candidateRef of candidates) {
+        const candidate = candidateRef.current;
+        if (!candidate)
+            continue;
+        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
+            return;
+        candidate.focus({ preventScroll });
+        if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)
+            return;
+    }
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+    const context = React.useContext(StoreContext);
+    if (!context) {
+        throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+    }
+    return context;
+}
+function useStore(selector, ogStore) {
+    const contextStore = React.useContext(StoreContext);
+    const store = ogStore ?? contextStore;
+    if (!store) {
+        throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
+    }
+    const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+    return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const RatingContext = React.createContext(null);
+function useRatingContext(consumerName) {
+    const context = React.useContext(RatingContext);
+    if (!context) {
+        throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+    }
+    return context;
+}
+const FocusContext = React.createContext(null);
+function useFocusContext(consumerName) {
+    const context = React.useContext(FocusContext);
+    if (!context) {
+        throw new Error(`\`${consumerName}\` must be used within \`FocusProvider\``);
+    }
+    return context;
+}
+function Rating(props) {
+    const { value: valueProp, defaultValue = 0, onValueChange, onHover, onFocus: onFocusProp, onMouseDown: onMouseDownProp, dir: dirProp, orientation = 'horizontal', activationMode = 'automatic', size = 'default', max = 5, step = 1, clearable = false, asChild, disabled = false, readOnly = false, required = false, className, id, name, ref, ...rootProps } = props;
+    const dir = DirectionPrimitive.useDirection(dirProp);
+    const instanceId = React.useId();
+    const rootId = id ?? instanceId;
+    const listenersRef = useLazyRef(() => new Set());
+    const stateRef = useLazyRef(() => ({
+        value: valueProp ?? defaultValue,
+        hoveredValue: null,
+    }));
+    const propsRef = useAsRef({
+        onValueChange,
+        onHover,
+        onFocus: onFocusProp,
+        onMouseDown: onMouseDownProp,
+        step,
+    });
+    const store = React.useMemo(() => {
+        return {
+            subscribe: (cb) => {
+                listenersRef.current.add(cb);
+                return () => listenersRef.current.delete(cb);
+            },
+            getState: () => stateRef.current,
+            setState: (key, value) => {
+                if (Object.is(stateRef.current[key], value))
+                    return;
+                if (key === 'value' && typeof value === 'number') {
+                    stateRef.current.value = value;
+                    propsRef.current.onValueChange?.(value);
+                }
+                else if (key === 'hoveredValue') {
+                    stateRef.current.hoveredValue = value;
+                    propsRef.current.onHover?.(value);
+                }
+                else {
+                    stateRef.current[key] = value;
+                }
+                store.notify();
+            },
+            notify: () => {
+                for (const cb of listenersRef.current) {
+                    cb();
+                }
+            },
+        };
+    }, [listenersRef, stateRef, propsRef]);
+    useIsomorphicLayoutEffect(() => {
+        if (valueProp === undefined || Object.is(stateRef.current.value, valueProp))
+            return;
+        stateRef.current.value = valueProp;
+        store.notify();
+    }, [valueProp]);
+    const value = useStore((state) => state.value, store);
+    const [formTrigger, setFormTrigger] = React.useState(null);
+    const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+    const isFormControl = formTrigger ? !!formTrigger.closest('form') : true;
+    const [tabStopId, setTabStopId] = React.useState(null);
+    const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
+    const [focusableItemCount, setFocusableItemCount] = React.useState(0);
+    const isClickFocusRef = React.useRef(false);
+    const itemsRef = React.useRef(new Map());
+    const autoIndexMapRef = React.useRef(new Map());
+    const nextAutoIndexRef = React.useRef(0);
+    const getAutoIndex = React.useCallback((instanceId) => {
+        const existingIndex = autoIndexMapRef.current.get(instanceId);
+        if (existingIndex !== undefined) {
+            return existingIndex;
+        }
+        const newIndex = nextAutoIndexRef.current++;
+        autoIndexMapRef.current.set(instanceId, newIndex);
+        return newIndex;
+    }, []);
+    const onItemFocus = React.useCallback((tabStopId) => {
+        setTabStopId(tabStopId);
+    }, []);
+    const onItemShiftTab = React.useCallback(() => {
+        setIsTabbingBackOut(true);
+    }, []);
+    const onFocusableItemAdd = React.useCallback(() => {
+        setFocusableItemCount((prevCount) => prevCount + 1);
+    }, []);
+    const onFocusableItemRemove = React.useCallback(() => {
+        setFocusableItemCount((prevCount) => prevCount - 1);
+    }, []);
+    const onItemRegister = React.useCallback((item) => {
+        itemsRef.current.set(item.id, item);
+    }, []);
+    const onItemUnregister = React.useCallback((id) => {
+        itemsRef.current.delete(id);
+    }, []);
+    const getItems = React.useCallback(() => {
+        return Array.from(itemsRef.current.values())
+            .filter((item) => item.ref.current)
+            .sort((a, b) => {
+            const elementA = a.ref.current;
+            const elementB = b.ref.current;
+            if (!elementA || !elementB)
+                return 0;
+            const position = elementA.compareDocumentPosition(elementB);
+            if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+                return -1;
+            }
+            if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+                return 1;
+            }
+            return 0;
+        });
+    }, []);
+    const onBlur = React.useCallback((event) => {
+        rootProps.onBlur?.(event);
+        if (event.defaultPrevented)
+            return;
+        setIsTabbingBackOut(false);
+    }, [rootProps.onBlur]);
+    const onFocus = React.useCallback((event) => {
+        propsRef.current.onFocus?.(event);
+        if (event.defaultPrevented)
+            return;
+        const isKeyboardFocus = !isClickFocusRef.current;
+        if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+            const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+            event.currentTarget.dispatchEvent(entryFocusEvent);
+            if (!entryFocusEvent.defaultPrevented) {
+                const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
+                const selectedItem = propsRef.current.step < 1
+                    ? items.find((item) => item.value === Math.ceil(value))
+                    : items.find((item) => item.value === value);
+                const currentItem = items.find((item) => item.id === tabStopId);
+                const candidateItems = [selectedItem, currentItem, ...items].filter(Boolean);
+                const candidateRefs = candidateItems.map((item) => item.ref);
+                focusFirst(candidateRefs, false);
+            }
+        }
+        isClickFocusRef.current = false;
+    }, [propsRef, isTabbingBackOut, value, tabStopId]);
+    const onMouseDown = React.useCallback((event) => {
+        propsRef.current.onMouseDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        isClickFocusRef.current = true;
+    }, [propsRef]);
+    const contextValue = React.useMemo(() => ({
+        rootId,
+        dir,
+        orientation,
+        activationMode,
+        disabled,
+        readOnly,
+        size,
+        max,
+        step,
+        clearable,
+        getAutoIndex,
+    }), [rootId, dir, orientation, activationMode, disabled, readOnly, size, max, step, clearable, getAutoIndex]);
+    const focusContextValue = React.useMemo(() => ({
+        tabStopId,
+        onItemFocus,
+        onItemShiftTab,
+        onFocusableItemAdd,
+        onFocusableItemRemove,
+        onItemRegister,
+        onItemUnregister,
+        getItems,
+    }), [
+        tabStopId,
+        onItemFocus,
+        onItemShiftTab,
+        onFocusableItemAdd,
+        onFocusableItemRemove,
+        onItemRegister,
+        onItemUnregister,
+        getItems,
+    ]);
+    const RootPrimitive = asChild ? SlotPrimitive.Slot : 'div';
+    return (_jsx(StoreContext.Provider, { value: store, children: _jsx(RatingContext.Provider, { value: contextValue, children: _jsxs(FocusContext.Provider, { value: focusContextValue, children: [_jsx(RootPrimitive, { id: rootId, role: "radiogroup", "aria-orientation": orientation, "data-disabled": disabled ? '' : undefined, "data-readonly": readOnly ? '' : undefined, "data-orientation": orientation, "data-slot": "rating", dir: dir, tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0, ...rootProps, ref: composedRef, className: cn('flex gap-1 text-primary outline-none', orientation === 'horizontal' ? 'flex-row items-center' : 'flex-col items-start', className), onBlur: onBlur, onFocus: onFocus, onMouseDown: onMouseDown }), _jsx("svg", { width: "0", height: "0", style: { position: 'absolute' }, children: _jsx("defs", { children: _jsx("linearGradient", { id: getPartialFillGradientId(rootId, step), children: dir === 'rtl' ? (_jsxs(_Fragment, { children: [_jsx("stop", { offset: "50%", stopColor: "transparent" }), _jsx("stop", { offset: "50%", stopColor: "currentColor" })] })) : (_jsxs(_Fragment, { children: [_jsx("stop", { offset: "50%", stopColor: "currentColor" }), _jsx("stop", { offset: "50%", stopColor: "transparent" })] })) }) }) }), isFormControl && (_jsx(VisuallyHiddenInput, { type: "hidden", control: formTrigger, name: name, value: value, disabled: disabled, readOnly: readOnly, required: required }))] }) }) }));
+}
+function RatingItem(props) {
+    const { index, asChild, onClick: onClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, onMouseDown: onMouseDownProp, onMouseEnter: onMouseEnterProp, onMouseMove: onMouseMoveProp, onMouseLeave: onMouseLeaveProp, disabled, className, children, ref, ...itemProps } = props;
+    const itemRef = React.useRef(null);
+    const composedRef = useComposedRefs(ref, itemRef);
+    const context = useRatingContext(ITEM_NAME);
+    const instanceId = React.useId();
+    const actualIndex = React.useMemo(() => {
+        if (index !== undefined) {
+            return index;
+        }
+        return context.getAutoIndex(instanceId);
+    }, [index, context, instanceId]);
+    const itemValue = actualIndex + 1;
+    const store = useStoreContext(ITEM_NAME);
+    const focusContext = useFocusContext(ITEM_NAME);
+    const value = useStore((state) => state.value);
+    const hoveredValue = useStore((state) => state.hoveredValue);
+    const clearable = context.clearable;
+    const step = context.step;
+    const activationMode = context.activationMode;
+    const itemId = getItemId(context.rootId, itemValue);
+    const isDisabled = context.disabled || disabled;
+    const isReadOnly = context.readOnly;
+    const isTabStop = focusContext.tabStopId === itemId;
+    const displayValue = hoveredValue ?? value;
+    const isFilled = displayValue >= itemValue;
+    const isPartiallyFilled = step < 1 && displayValue >= itemValue - step && displayValue < itemValue;
+    const isHovered = hoveredValue !== null && hoveredValue < itemValue;
+    const isMouseClickRef = React.useRef(false);
+    const propsRef = useAsRef({
+        onClick: onClickProp,
+        onFocus: onFocusProp,
+        onKeyDown: onKeyDownProp,
+        onMouseDown: onMouseDownProp,
+        onMouseEnter: onMouseEnterProp,
+        onMouseMove: onMouseMoveProp,
+        onMouseLeave: onMouseLeaveProp,
+    });
+    useIsomorphicLayoutEffect(() => {
+        focusContext.onItemRegister({
+            id: itemId,
+            ref: itemRef,
+            value: itemValue,
+            disabled: !!isDisabled,
+        });
+        if (!isDisabled) {
+            focusContext.onFocusableItemAdd();
+        }
+        return () => {
+            focusContext.onItemUnregister(itemId);
+            if (!isDisabled) {
+                focusContext.onFocusableItemRemove();
+            }
+        };
+    }, [focusContext, itemId, itemValue, isDisabled]);
+    const onClick = React.useCallback((event) => {
+        propsRef.current.onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (!isDisabled && !isReadOnly) {
+            let newValue = itemValue;
+            if (step < 1) {
+                const rect = event.currentTarget.getBoundingClientRect();
+                const clickX = event.clientX - rect.left;
+                const isLeftHalf = clickX < rect.width / 2;
+                if (context.dir === 'rtl') {
+                    if (!isLeftHalf) {
+                        newValue = itemValue - step;
+                    }
+                }
+                else {
+                    if (isLeftHalf) {
+                        newValue = itemValue - step;
+                    }
+                }
+            }
+            if (clearable && value === newValue) {
+                newValue = 0;
+            }
+            store.setState('value', newValue);
+        }
+    }, [isDisabled, isReadOnly, clearable, step, value, itemValue, store, context.dir, propsRef]);
+    const onFocus = React.useCallback((event) => {
+        propsRef.current.onFocus?.(event);
+        if (event.defaultPrevented)
+            return;
+        focusContext.onItemFocus(itemId);
+        const isKeyboardFocus = !isMouseClickRef.current;
+        if (!isDisabled && !isReadOnly && activationMode !== 'manual' && isKeyboardFocus) {
+            const isHalfStepValue = step < 1 && value === itemValue - step;
+            if (!isHalfStepValue) {
+                const newValue = clearable && value === itemValue ? 0 : itemValue;
+                store.setState('value', newValue);
+            }
+        }
+        isMouseClickRef.current = false;
+    }, [focusContext, itemId, activationMode, isDisabled, isReadOnly, clearable, value, itemValue, step, store, propsRef]);
+    const onKeyDown = React.useCallback((event) => {
+        propsRef.current.onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        if ((event.key === 'Enter' || event.key === ' ') && activationMode === 'manual') {
+            event.preventDefault();
+            if (!isDisabled && !isReadOnly && itemRef.current) {
+                itemRef.current.click();
+            }
+            return;
+        }
+        if (event.key === 'Tab' && event.shiftKey) {
+            focusContext.onItemShiftTab();
+            return;
+        }
+        if (event.target !== event.currentTarget)
+            return;
+        const focusIntent = getFocusIntent(event, context.dir, context.orientation);
+        if (focusIntent !== undefined) {
+            if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)
+                return;
+            event.preventDefault();
+            if (step < 1 && (focusIntent === 'prev' || focusIntent === 'next')) {
+                if (!isDisabled && !isReadOnly) {
+                    let newValue = value;
+                    if (focusIntent === 'next') {
+                        newValue = Math.min(value + step, context.max);
+                    }
+                    else {
+                        newValue = Math.max(value - step, 0);
+                    }
+                    store.setState('value', newValue);
+                    const items = focusContext.getItems().filter((item) => !item.disabled);
+                    const targetItem = items.find((item) => item.value === Math.ceil(newValue));
+                    if (targetItem?.ref.current) {
+                        queueMicrotask(() => targetItem.ref.current?.focus());
+                    }
+                }
+                return;
+            }
+            const items = focusContext.getItems().filter((item) => !item.disabled);
+            let candidateRefs = items.map((item) => item.ref);
+            if (focusIntent === 'last') {
+                candidateRefs.reverse();
+            }
+            else if (focusIntent === 'prev' || focusIntent === 'next') {
+                if (focusIntent === 'prev')
+                    candidateRefs.reverse();
+                const currentIndex = candidateRefs.findIndex((ref) => ref.current === event.currentTarget);
+                candidateRefs = candidateRefs.slice(currentIndex + 1);
+            }
+            queueMicrotask(() => focusFirst(candidateRefs));
+        }
+    }, [
+        focusContext,
+        context.dir,
+        context.orientation,
+        activationMode,
+        isDisabled,
+        isReadOnly,
+        step,
+        value,
+        context.max,
+        store,
+        propsRef,
+    ]);
+    const onMouseDown = React.useCallback((event) => {
+        propsRef.current.onMouseDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        isMouseClickRef.current = true;
+        if (isDisabled) {
+            event.preventDefault();
+        }
+        else {
+            focusContext.onItemFocus(itemId);
+        }
+    }, [focusContext, itemId, isDisabled, propsRef]);
+    const onMouseEnter = React.useCallback((event) => {
+        propsRef.current.onMouseEnter?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (!isDisabled && !isReadOnly) {
+            let hoverValue = itemValue;
+            if (step < 1) {
+                const rect = event.currentTarget.getBoundingClientRect();
+                const mouseX = event.clientX - rect.left;
+                const isLeftHalf = mouseX < rect.width / 2;
+                if (context.dir === 'rtl') {
+                    if (!isLeftHalf) {
+                        hoverValue = itemValue - step;
+                    }
+                }
+                else {
+                    if (isLeftHalf) {
+                        hoverValue = itemValue - step;
+                    }
+                }
+            }
+            store.setState('hoveredValue', hoverValue);
+        }
+    }, [isDisabled, isReadOnly, step, itemValue, store, context.dir, propsRef]);
+    const onMouseLeave = React.useCallback((event) => {
+        propsRef.current.onMouseLeave?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (!isDisabled && !isReadOnly) {
+            store.setState('hoveredValue', null);
+        }
+    }, [isDisabled, isReadOnly, store, propsRef]);
+    const onMouseMove = React.useCallback((event) => {
+        propsRef.current.onMouseMove?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (!isDisabled && !isReadOnly && step < 1) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            const mouseX = event.clientX - rect.left;
+            const isLeftHalf = mouseX < rect.width / 2;
+            let hoverValue = itemValue;
+            if (context.dir === 'rtl') {
+                hoverValue = !isLeftHalf ? itemValue - step : itemValue;
+            }
+            else {
+                hoverValue = isLeftHalf ? itemValue - step : itemValue;
+            }
+            store.setState('hoveredValue', hoverValue);
+        }
+    }, [isDisabled, isReadOnly, step, itemValue, store, context.dir, propsRef]);
+    const dataState = isFilled ? 'full' : isPartiallyFilled ? 'partial' : 'empty';
+    const ItemPrimitive = asChild ? SlotPrimitive.Slot : 'button';
+    return (_jsx(ItemPrimitive, { role: "radio", type: "button", id: itemId, "aria-checked": isFilled, "aria-posinset": itemValue, "aria-setsize": context.max, "data-disabled": isDisabled ? '' : undefined, "data-readonly": isReadOnly ? '' : undefined, "data-state": isFilled ? 'full' : isPartiallyFilled ? 'partial' : 'empty', "data-hovered": isHovered ? '' : undefined, "data-slot": "rating-item", disabled: isDisabled, tabIndex: isTabStop ? 0 : -1, ...itemProps, ref: composedRef, style: {
+            ...itemProps.style,
+            ...(isPartiallyFilled && {
+                '--partial-fill': `url(#${getPartialFillGradientId(context.rootId, step)})`,
+            }),
+        }, className: cn('inline-flex items-center justify-center rounded transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50', "[&_svg:not([class*='size-'])]:size-full [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:transition-colors [&_svg]:duration-200 data-[state=empty]:[&_svg]:fill-transparent data-[state=full]:[&_svg]:fill-current data-[state=partial]:[&_svg]:fill-(--partial-fill)", context.size === 'sm' ? 'size-4' : context.size === 'lg' ? 'size-6' : 'size-5', className), onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, children: typeof children === 'function' ? children(dataState) : (children ?? _jsx(Star, {})) }));
+}
+export { Rating, RatingItem, useStore as useRating };

package/dist/components/ui/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): React.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): React.JSX.Element;
+export { ScrollArea, ScrollBar };

package/dist/components/ui/scroll-area.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from "../../lib/utils.js";
+function ScrollArea({ className, children, ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn('relative', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = 'vertical', ...props }) {
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn('flex touch-none p-px transition-colors select-none', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border" }) }));
+}
+export { ScrollArea, ScrollBar };

package/dist/components/ui/select-combobox.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { OptionIcon } from '@coffer-org/sdk/fields';
+export interface ComboboxItem {
+    value: string;
+    title: string;
+    subtitle?: string;
+    icon?: OptionIcon;
+    node?: React.ReactNode;
+}
+export declare function Combobox({ value, onChange, items, placeholder, triggerClassName, }: {
+    value: string;
+    onChange: (v: string) => void;
+    items: ComboboxItem[];
+    placeholder?: string;
+    triggerClassName?: string;
+}): React.JSX.Element;
+export declare function ChipsCombobox({ selected, onChange, items, placeholder, labelOf, chipClassName, chipStyle, }: {
+    selected: string[];
+    onChange: (next: string[]) => void;
+    items: ComboboxItem[];
+    placeholder?: string;
+    labelOf?: (value: string) => string;
+    chipClassName?: (value: string) => string;
+    chipStyle?: (value: string) => React.CSSProperties;
+}): React.JSX.Element;

package/dist/components/ui/select-combobox.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { Button } from "./button.js";
+import { ChevronDown } from 'lucide-react';
+import { OptionIconView } from "./option-icon.js";
+import { OptionList } from "../../render/option-list.js";
+import { MultipleChips } from "../../render/multiple-chips.js";
+function ItemRow({ it }) {
+    if (it.node)
+        return _jsx("span", { className: "min-w-0 flex-1 truncate", children: it.node });
+    return (_jsxs(_Fragment, { children: [it.icon && _jsx(OptionIconView, { icon: it.icon, size: "xs" }), _jsx("span", { className: "min-w-0 truncate", children: it.title }), it.subtitle && it.subtitle !== it.title && _jsx("span", { className: "text-muted text-xs shrink-0", children: it.subtitle })] }));
+}
+export function Combobox({ value, onChange, items, placeholder, triggerClassName = 'w-full justify-between gap-2 px-2 font-normal', }) {
+    const [open, setOpen] = React.useState(false);
+    const usable = React.useMemo(() => items.filter((it) => it?.value != null), [items]);
+    const selected = React.useMemo(() => usable.find((it) => it.value === value), [usable, value]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, className: triggerClassName, onKeyDown: (e) => {
+                        if (e.key === 'ArrowDown') {
+                            e.preventDefault();
+                            setOpen(true);
+                        }
+                    }, children: [selected ? (_jsx("span", { className: "flex min-w-0 items-center gap-1.5", children: _jsx(ItemRow, { it: selected }) })) : (_jsx("span", { className: "truncate text-muted-foreground", children: placeholder })), _jsx(ChevronDown, { size: 16, className: "shrink-0 text-muted" })] }) }), _jsx(PopoverContent, { align: "start", className: "w-(--radix-popover-trigger-width) min-w-52 p-2", children: _jsx(OptionList, { literal: true, options: usable, value: value, multiple: false, onPick: (v) => {
+                        onChange(String(v));
+                        setOpen(false);
+                    } }) })] }));
+}
+export function ChipsCombobox({ selected, onChange, items, placeholder, labelOf, chipClassName, chipStyle, }) {
+    const byValue = React.useMemo(() => new Map(items.map((it) => [it.value, it])), [items]);
+    const available = items.filter((it) => !selected.includes(it.value));
+    const label = (v) => labelOf?.(v) ?? byValue.get(v)?.title ?? v;
+    return (_jsx(MultipleChips, { items: selected, content: (v) => {
+            const it = byValue.get(String(v));
+            return (_jsxs(_Fragment, { children: [it?.icon && _jsx(OptionIconView, { icon: it.icon, size: "xs" }), label(String(v))] }));
+        }, chipClassName: chipClassName ? (v) => chipClassName(String(v)) : undefined, chipStyle: chipStyle ? (v) => chipStyle(String(v)) : undefined, onRemove: (idx) => onChange(selected.filter((_, i) => i !== idx)), editor: available.length > 0 ? (_jsx(Combobox, { value: "", onChange: (v) => v && onChange([...selected, v]), items: available, placeholder: placeholder })) : null }));
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/ui/select.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from "../../lib/utils.js";
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-input bg-background px-3 py-1 text-sm text-foreground transition-colors', 'data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-60" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('relative z-50 max-h-96 min-w-32 overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-xs font-semibold text-muted-foreground', className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none', 'focus:bg-elevated focus:text-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4 text-accent" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-border', className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/ui/separator.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };

package/dist/components/ui/separator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from "../../lib/utils.js";
+const Separator = React.forwardRef(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px', className), ...props })));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export { Separator };

package/dist/components/ui/switch.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

package/dist/components/ui/switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from "../../lib/utils.js";
+const Switch = React.forwardRef(({ className, ...props }, ref) => (_jsx(SwitchPrimitive.Root, { ref: ref, className: cn('peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-border', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { className: cn('pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0') }) })));
+Switch.displayName = SwitchPrimitive.Root.displayName;
+export { Switch };