@g4rcez/components 2.0.31 → 2.0.33

package/dist/components/form/multi-select.jsx

@@ -0,0 +1,328 @@
+"use client";
+import { autoUpdate, FloatingFocusManager, FloatingOverlay, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
+import { ChevronDown, XIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import React, { forwardRef, Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { Virtuoso } from "react-virtuoso";
+import { useRemoveScroll } from "../../hooks/use-remove-scroll";
+import { useTranslations } from "../../hooks/use-translations";
+import { Dict } from "../../lib/dict";
+import { css, getRemainingSize, initializeInputDataset } from "../../lib/dom";
+import { noop } from "../../lib/fns";
+import { fzf } from "../../lib/fzf";
+import { Tag } from "../core/tag";
+import { Checkbox } from "./checkbox";
+import { InputField } from "./input-field";
+const MIN_SIZE = 40;
+const Frag = (props) => <Fragment>{props.children}</Fragment>;
+const transitionStyles = {
+    duration: 300,
+    initial: { transform: "scaleY(0)", opacity: 0.2 },
+    open: { transform: "scaleY(1)", opacity: 1 },
+    close: { transform: "scaleY(0)", opacity: 0 },
+};
+const emptyRef = [];
+const List = forwardRef(function VirtualList(props, ref) {
+    return (<motion.ul {...props} role="listbox" ref={ref} className="w-full rounded-b-lg border-b last:border-transparent border-tooltip-border">
+      <AnimatePresence>{props.children}</AnimatePresence>
+    </motion.ul>);
+});
+const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
+    return <motion.li {...props} ref={ref} className="last:rounded-t-lg"/>;
+});
+const components = { List, Item };
+const OverflowControl = (props) => {
+    const translate = useTranslations();
+    const ref = useRef(null);
+    const countable = React.Children.count(props.children);
+    const [normalView, setNormalView] = useState(false);
+    useEffect(() => {
+        if (ref.current === null)
+            return;
+        const parent = ref.current.parentElement.getBoundingClientRect();
+        const items = Array.from(ref.current.querySelectorAll("[data-component='tag']"));
+        const child = items.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0);
+        const hasOnlyCounter = ref.current.querySelectorAll("[data-multicounter]").length;
+        if (hasOnlyCounter && countable <= 3)
+            return setNormalView(false);
+        if (child > parent.width)
+            return setNormalView(true);
+    }, [countable]);
+    return (<span ref={ref} className="flex flex-nowrap gap-x-2">
+      {!normalView ? (props.children) : (<Tag size="small" data-multicounter="true">
+          {countable} {translate.multiSelectSelectedLabel}
+        </Tag>)}
+    </span>);
+};
+export const MultiSelect = forwardRef(({ left, error, right, options, container, rightLabel, interactive, emptyMessage, optionalText, selectedLabel, labelClassName, feedback = null, hideLeft = false, required = false, dynamicOption = false, onChangeOptions, ...props }, externalRef) => {
+    const map = useMemo(() => new Dict(options.map((x) => [x.value, x])), [options]);
+    const fieldset = useRef(null);
+    const virtuoso = useRef(null);
+    const defaults = props.value ?? props.defaultValue ?? emptyRef;
+    const translation = useTranslations();
+    const [h, setH] = useState(0);
+    const [open, setOpen] = useState(false);
+    const [shadow, setShadow] = useState("");
+    const [value, setValue] = useState(() => {
+        const d = new Dict();
+        defaults.forEach((x) => {
+            const result = map.get(x);
+            return result ? d.set(x, result) : undefined;
+        });
+        return d;
+    });
+    const values = useMemo(() => Array.from(value.keys()), [value]);
+    const [label, setLabel] = useState(() => {
+        const d = new Set(defaults);
+        return options.reduce((acc, x) => (d.has(x.value) ? [...acc, x.label ?? x.value] : acc), []) ?? defaults;
+    });
+    const [index, setIndex] = useState(null);
+    const listRef = useRef(emptyRef);
+    const innerOptions = dynamicOption && shadow !== ""
+        ? [
+            {
+                value: shadow,
+                label: shadow,
+                "data-dynamic": "true",
+            },
+            ...options,
+        ]
+        : options;
+    const list = shadow.length === 0
+        ? innerOptions
+        : fzf(innerOptions, "value", [
+            { key: "value", value: shadow },
+            { key: "label", value: shadow },
+        ]);
+    const removeScrollRef = useRemoveScroll(open, "block-only");
+    const displayList = list.filter((x) => x.hidden !== true);
+    const isEmpty = displayList.length === 0;
+    const { x, y, strategy, refs, context } = useFloating({
+        open,
+        transform: true,
+        placement: "bottom-start",
+        strategy: "absolute",
+        onOpenChange: setOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(4),
+            size({
+                padding: 10,
+                elementContext: "reference",
+                apply(args) {
+                    const ul = args.elements.floating.querySelector("ul");
+                    const fullSize = ul?.getBoundingClientRect().height || 0;
+                    const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
+                    const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE, args.availableHeight);
+                    const size = displayList.length === 0 ? MIN_SIZE : Math.min(maxH, DEFAULT_SIZE, fullSize);
+                    const mw = `${fieldset.current.getBoundingClientRect().width}px`;
+                    Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw, height: size });
+                },
+            }),
+        ],
+    });
+    const transitions = useTransitionStyles(context, transitionStyles);
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        useRole(context, { role: "listbox" }),
+        useDismiss(context),
+        useListNavigation(context, {
+            cols: 0,
+            listRef,
+            loop: true,
+            virtual: true,
+            allowEscape: true,
+            activeIndex: index,
+            selectedIndex: index,
+            focusItemOnOpen: "auto",
+            openOnArrowKeyDown: true,
+            scrollItemIntoView: true,
+            onNavigate: (n) => setIndex((prev) => n ?? prev),
+        }),
+    ]);
+    useEffect(() => {
+        if (!open)
+            return setH(0);
+        const inputRef = refs.reference;
+        if (inputRef.current === null)
+            return;
+        const s = getRemainingSize(inputRef.current, window.innerHeight);
+        setTimeout(() => setH(Math.min(s, displayList.length * 40)), 100);
+    }, [shadow, open, refs.reference]);
+    useEffect(() => {
+        if (props.value) {
+            setValue(new Dict(props.value.map((x) => [x, map.get(x)])));
+        }
+    }, [props.value, map]);
+    useEffect(() => {
+        const input = refs.reference.current;
+        if (!input)
+            return;
+        return initializeInputDataset(input);
+    }, []);
+    const onSelect = (opt, i) => {
+        const clone = value.clone((c) => {
+            if (c.has(opt.value))
+                return c.remove(opt.value);
+            return c.set(opt.value, opt);
+        });
+        setValue(clone);
+        const input = refs.reference.current;
+        if (!input)
+            return;
+        const options = clone.map((x) => x.value);
+        input?.setAttribute("data-value", JSON.stringify(options));
+        if (onChangeOptions)
+            onChangeOptions(options);
+        setLabel((prev) => prev.concat(opt.label ?? ""));
+        setShadow("");
+        setIndex(i);
+    };
+    const onChange = (event) => {
+        const value = event.target.value;
+        setShadow(value);
+        if (!open && value === "")
+            return setOpen(true);
+        event.target.name = props.name || "";
+        return value ? setOpen(true) : undefined;
+    };
+    const onCaretDownClick = () => {
+        setOpen(true);
+        setShadow("");
+        refs.reference.current?.focus();
+    };
+    const onFocus = () => {
+        setOpen(true);
+        setShadow("");
+    };
+    const onClose = () => {
+        refs.reference.current?.setAttribute("data-value", "[]");
+        setShadow("");
+        setOpen(false);
+        setValue(new Dict());
+        onChangeOptions?.([]);
+    };
+    const id = props.id || props.name;
+    const tags = value.map((x, i) => (<Tag size="small" key={`MultiSelect-${x.value}-x`} icon={<button type="button" className="text-current hover:text-danger focus:text-danger" onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onSelect(x, i);
+            }}>
+            <XIcon size={14}/>
+          </button>}>
+        {x.label ?? x.value}
+      </Tag>));
+    const scrollableContainerStyle = { height: isEmpty ? "0" : value.size === 0 ? h - 49 : h - 86 };
+    return (<InputField {...props} left={left} error={error} ref={fieldset} form={props.form} name={props.name} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} id={props.name || props.id} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} right={<span className="flex gap-0.5 items-center">
+            {right}
+            <button type="button" className="transition-colors link:text-primary" onClick={onCaretDownClick}>
+              <ChevronDown size={20}/>
+              <span className="sr-only">{translation.inputCaretDown}</span>
+            </button>
+            {value ? (<button type="button" onClick={onClose} className="transition-colors link:text-danger">
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"/>
+                </svg>
+              </button>) : null}
+          </span>}>
+        <ul {...getReferenceProps({
+        ...props,
+        onFocus,
+        id: `${id}-shadow`,
+        name: `${id}-shadow`,
+        ref: refs.setReference,
+    })} tabIndex={0} role="button" data-name={id} data-target={id} data-shadow="true" data-error={!!error} aria-autocomplete="list" data-value={values.join(",")} className={css("input text-base placeholder-input-mask group h-input-height w-full", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", "flex flex-row items-center gap-2 whitespace-nowrap text-left", "max-w-full overflow-x-auto truncate overflow-ellipsis", props.className)}>
+          {values.length > 0 ? null : <li className="text-input-placeholder">{props.placeholder}</li>}
+          <OverflowControl label={selectedLabel}>{tags}</OverflowControl>
+        </ul>
+        <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || values || undefined}/>
+        <FloatingPortal preserveTabOrder>
+          {open ? (<FloatingOverlay lockScroll>
+              <FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>
+                <div {...getFloatingProps({
+            ref: refs.setFloating,
+            style: {
+                ...transitions.styles,
+                top: y ?? 0,
+                position: strategy,
+                left: x,
+                height: h - (values.length === 0 ? 65 : 30),
+            },
+        })} data-floating="true" className="overscroll-contain p-0 m-0 w-full max-h-96 list-none rounded-t-lg rounded-b-lg border shadow-floating isolate z-floating origin-[top_center] border-floating-border bg-floating-background text-foreground">
+                  <input autoFocus value={shadow} onChange={onChange} title={props.title} placeholder={translation.multiSelectInnerPlaceholder} className="flex-1 mb-1 w-full h-10 bg-transparent rounded border-b transition-colors outline-none focus:ring-2 focus:ring-inset input placeholder-input-mask group border-input-border px-input-x py-input-y focus:ring-primary" onKeyDown={(event) => {
+                if (event.key === "ArrowDown") {
+                    let next = index + 1;
+                    if (next > displayList.length - 1)
+                        next = 0;
+                    virtuoso.current?.scrollIntoView({ index: next });
+                    return setIndex(next);
+                }
+                if (event.key === "ArrowUp") {
+                    let next = index - 1;
+                    if (next < 0)
+                        next = displayList.length - 1;
+                    virtuoso.current?.scrollIntoView({ index: next });
+                    return setIndex(next);
+                }
+                if (event.key === "Escape") {
+                    event.currentTarget.blur();
+                    return setOpen(false);
+                }
+                if (event.key === "Enter") {
+                    if (index !== null && displayList[index]) {
+                        event.preventDefault();
+                        return onSelect(displayList[index], index);
+                    }
+                    if (displayList.length === 1) {
+                        event.preventDefault();
+                        return onSelect(displayList[0], 0);
+                    }
+                }
+            }}/>
+                  {isEmpty ? (<li role="option" className="w-full border-b last:border-transparent border-tooltip-border">
+                      <span className="flex justify-between p-2 w-full text-left text-disabled">
+                        {emptyMessage || translation.autocompleteEmpty}
+                      </span>
+                    </li>) : null}
+                  {isEmpty ? null : (<motion.div initial={false} data-floating="true" ref={removeScrollRef} animate={{ height: isEmpty ? "auto" : h }} style={scrollableContainerStyle} className="overscroll-contain w-full max-h-72" onAnimationComplete={() => {
+                    if (!open)
+                        return setH(0);
+                    const ul = refs.floating.current;
+                    const li = ul.querySelectorAll("li").item(0);
+                    const sum = (li ? li.getBoundingClientRect().height : 40) * displayList.length;
+                    return flushSync(() => setH(sum + 2));
+                }}>
+                      <Virtuoso ref={virtuoso} hidden={isEmpty} data={displayList} components={components} style={scrollableContainerStyle} className="p-0 max-h-72 border-floating-border bg-floating-background text-foreground" itemContent={(i, option) => {
+                    const Label = option.Render ?? Frag;
+                    const active = value.has(option.value) || value.has(option.label ?? "");
+                    const selected = index === i;
+                    const children = option.label ?? option.value;
+                    return (<button data-value={option.value} {...getItemProps({
+                        ref: (node) => void (listRef.current[i] = node),
+                        role: "option",
+                        type: "button",
+                        "aria-checked": active,
+                        "aria-current": active,
+                        "aria-selected": active,
+                        "aria-busy": option.disabled,
+                        onClick: () => onSelect(option, i),
+                    })} className={`flex w-full max-w-full cursor-pointer items-center justify-start p-2 text-left hover:bg-floating-hover focus:bg-floating-hover ${active || selected ? "bg-floating-hover text-floating-foreground" : ""}`}>
+                              <Checkbox onChange={noop} checked={active} aria-checked={active} onClick={(e) => {
+                            e.stopPropagation();
+                            onSelect(option, i);
+                        }}/>
+                              <Label {...props} label={option.label} value={option.value} children={children}/>
+                            </button>);
+                }}/>
+                    </motion.div>)}
+                  <div className="flex overflow-x-auto sticky bottom-0 flex-nowrap gap-2 items-center p-2 w-full rounded-b-lg bg-floating-background">
+                    {value.size === 0 ? (<Tag theme="muted" size="small">
+                        {translation.autocompleteEmpty}
+                      </Tag>) : (tags)}
+                  </div>
+                </div>
+              </FloatingFocusManager>
+            </FloatingOverlay>) : null}
+        </FloatingPortal>
+      </InputField>);
+});

package/dist/components/form/radiobox.d.ts

@@ -3,5 +3,5 @@ import { Override } from "../../types";
 export type RadioboxProps = Override<React.PropsWithChildren<React.ComponentProps<"input">>, {
     size?: "medium" | "large";
 }>;
-export declare const Radiobox: ({ children, className, size, ...props }: RadioboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Radiobox: ({ children, className, size, ...props }: RadioboxProps) => React.JSX.Element;
 //# sourceMappingURL=radiobox.d.ts.map

package/dist/components/form/radiobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radiobox.d.ts","sourceRoot":"","sources":["../../../src/components/form/radiobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,yCAA8C,aAAa,4CAkBnF,CAAC"}
+{"version":3,"file":"radiobox.d.ts","sourceRoot":"","sources":["../../../src/components/form/radiobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,yCAA8C,aAAa,sBAkBnF,CAAC"}

package/dist/components/form/radiobox.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { css } from "../../lib/dom";
+export const Radiobox = ({ children, className = "", size, ...props }) => (<label data-component="radiobox" data-disabled={props.disabled} aria-disabled={props.disabled} className="group flex items-center gap-2 font-normal data-[disabled=true]:cursor-not-allowed">
+        <input {...props} type="radio" className={css("app form-radio inline-block h-4 w-4 appearance-none rounded-full border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className)} {...props}/>
+        {children}
+    </label>);

package/dist/components/form/select.jsx

@@ -0,0 +1,42 @@
+"use client";
+import { ChevronDownIcon } from "lucide-react";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
+import { InputField } from "./input-field";
+export const Select = forwardRef(({ required = true, options, info, selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, loading, optionalText, container, hideLeft = false, right, left, error, ...props }, ref) => {
+    const translation = useTranslations();
+    const inputRef = useRef(null);
+    const id = props.id ?? props.name;
+    useImperativeHandle(ref, () => inputRef.current);
+    useEffect(() => {
+        if (inputRef.current === null)
+            return;
+        const controller = new AbortController();
+        const input = inputRef.current;
+        const focus = initializeInputDataset(inputRef.current);
+        input.addEventListener("change", () => input.setAttribute("data-selected", "true"), {
+            once: true,
+            signal: controller.signal,
+        });
+        return () => {
+            focus();
+            controller.abort();
+        };
+    }, []);
+    const onClickLabel = () => inputRef.current?.focus();
+    return (<InputField info={info} left={left} error={error} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} componentName="select" rightLabel={rightLabel} interactive={interactive} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} right={<label htmlFor={id}>
+                        {right}
+                        <button onClick={onClickLabel} type="button" className="mt-2 transition-colors hover:text-primary">
+                            <ChevronDownIcon size={20}/>
+                            <span className="sr-only">{translation.inputCaretDown}</span>
+                        </button>
+                    </label>}>
+                <select {...props} id={id} name={id} required={required} ref={mergeRefs(ref, inputRef)} data-selected={!!props.value || false} title={typeof props.title === "string" ? props.title : undefined} className={css("input select group text-base h-10 w-full flex-1 appearance-none rounded-md", "bg-transparent px-2 py-1 text-foreground placeholder-input-placeholder", "outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className)}>
+                    <option value="" disabled hidden>
+                        {props.placeholder}
+                    </option>
+                    {options.map((option) => (<option {...option} value={option.value} children={option.label ?? option.value} key={`${id}-select-option-${option.value}`}/>))}
+                </select>
+            </InputField>);
+});

package/dist/components/form/slider.d.ts

@@ -2,6 +2,6 @@ import { Slider as Base } from "@base-ui/react/slider";
 type SliderProps = Parameters<typeof Base.Root>[0] & {
     tooltip?: boolean;
 };
-export declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Slider: (props: SliderProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=slider.d.ts.map

package/dist/components/form/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/form/slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAQvD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAmCF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAuBxC,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/form/slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAQvD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAmCF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,gCAuBxC,CAAC"}

package/dist/components/form/{slider.js → slider.jsx}

@@ -1,5 +1,4 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slider as Base } from "@base-ui/react/slider";
 import { Is } from "sidekicker";
 import { css } from "../../lib/dom";
@@ -26,12 +25,21 @@ const Thumb = (props) => {
         observer.observe(html, { attributeFilter: ["aria-valuenow"] });
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Tooltip, { title: "", ref: ref, as: Base.Thumb, enabled: props.tooltip, className: "block rounded-full focus-within:border-primary focus-within::scale-105 bg-input-switch size-5 cursor-grab border-2 border-input-border shadow-shadow-floating focus-within:outline active:cursor-grabbing", children: float }));
+    return (<Tooltip title="" ref={ref} as={Base.Thumb} enabled={props.tooltip} className="block rounded-full focus-within:border-primary focus-within::scale-105 bg-input-switch size-5 cursor-grab border-2 border-input-border shadow-shadow-floating focus-within:outline active:cursor-grabbing">
+      {float}
+    </Tooltip>);
 };
 export const Slider = (props) => {
     const { tooltip, className, defaultValue, value, ...restProps } = props;
     const id = useRef(uuid());
     const array = defaultValue || value || [];
     const locale = useLocale();
-    return (_jsx(Base.Root, { ...restProps, value: value, locale: locale, defaultValue: defaultValue, children: _jsxs(Base.Control, { className: css("relative flex h-5 w-full touch-none select-none items-center", className), children: [_jsx(Base.Track, { className: "relative h-2 rounded-full grow bg-background", children: _jsx(Base.Indicator, { className: "absolute h-full rounded-full bg-primary" }) }), Array.isArray(array) ? array.map((_, i) => (_jsx(Thumb, { tooltip: tooltip ?? false }, `${id.current}-${i}`))) : null] }) }));
+    return (<Base.Root {...restProps} value={value} locale={locale} defaultValue={defaultValue}>
+      <Base.Control className={css("relative flex h-5 w-full touch-none select-none items-center", className)}>
+        <Base.Track className="relative h-2 rounded-full grow bg-background">
+          <Base.Indicator className="absolute h-full rounded-full bg-primary"/>
+        </Base.Track>
+        {Array.isArray(array) ? array.map((_, i) => (<Thumb tooltip={tooltip ?? false} key={`${id.current}-${i}`}/>)) : null}
+      </Base.Control>
+    </Base.Root>);
 };

package/dist/components/form/switch.jsx

@@ -0,0 +1,46 @@
+"use client";
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { css } from "../../lib/dom";
+export const Switch = forwardRef(({ children, loading, container, error, ...props }, ref) => {
+    const id = useId();
+    const [innerChecked, setInnerChecked] = useState(props.checked ?? false);
+    const checked = innerChecked;
+    const innerRef = useRef(null);
+    const stableOnChange = useStableRef(props.onChange);
+    useImperativeHandle(ref, () => innerRef.current);
+    useEffect(() => {
+        if (innerRef.current !== null) {
+            if (stableOnChange.current) {
+                const onChange = (e) => {
+                    if (stableOnChange.current)
+                        stableOnChange.current(e);
+                };
+                const ref = innerRef.current;
+                ref.addEventListener("change", onChange);
+                return () => ref?.removeEventListener("change", onChange);
+            }
+        }
+    }, []);
+    const onCheck = () => {
+        const checked = !innerRef.current?.checked;
+        setInnerChecked(checked);
+        props?.onCheck?.(checked);
+        if (innerRef.current !== null) {
+            innerRef.current.checked = checked;
+            innerRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+    };
+    return (<fieldset className={css("flex flex-col flex-wrap justify-center", container)} data-component="switch" disabled={props.disabled || loading}>
+            <span className="flex flex-row flex-wrap items-center">
+                <input {...props} hidden ref={innerRef} type="checkbox" checked={checked} id={props.id || id} data-trigger="change" data-checked={checked} disabled={props.disabled || loading} onChange={(e) => setInnerChecked(e.target.checked)}/>
+                <button type="button" role="switch" onClick={onCheck} aria-checked={checked} data-checked={checked} aria-labelledby={`${id}-label`} disabled={props.disabled || loading} className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 data-[checked=false]:bg-input-switch-bg data-[checked=true]:bg-primary">
+                    <span aria-hidden="true" data-checked={checked} className="inline-block aspect-square size-5 transform rounded-full shadow ring-0 transition duration-300 ease-in-out data-[checked=false]:translate-x-0 data-[checked=true]:translate-x-5 data-[checked=false]:bg-disabled data-[checked=true]:bg-input-switch"/>
+                </button>
+                <label htmlFor={props.id || id} className="ml-3 inline-block text-sm" id={`${id}-label`}>
+                    <span className="font-medium text-foreground">{children}</span>
+                </label>
+            </span>
+            <span className="mt-1 flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden">{error}</span>
+        </fieldset>);
+});

package/dist/components/form/task-list.d.ts

@@ -1,3 +1,3 @@
 import { ComponentProps, PropsWithChildren } from "react";
-export declare const TaskList: (props: PropsWithChildren<ComponentProps<"fieldset">>) => import("react/jsx-runtime").JSX.Element;
+export declare const TaskList: (props: PropsWithChildren<ComponentProps<"fieldset">>) => import("react").JSX.Element;
 //# sourceMappingURL=task-list.d.ts.map

package/dist/components/form/task-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"task-list.d.ts","sourceRoot":"","sources":["../../../src/components/form/task-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAErE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,4CA2B5E,CAAC"}
+{"version":3,"file":"task-list.d.ts","sourceRoot":"","sources":["../../../src/components/form/task-list.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAErE,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,gCA2B5E,CAAC"}

package/dist/components/form/{task-list.js → task-list.jsx}

@@ -1,5 +1,4 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { stagger, useAnimate } from "motion/react";
 import { useEffect } from "react";
 export const TaskList = (props) => {
@@ -23,5 +22,5 @@ export const TaskList = (props) => {
         container.addEventListener("change", handler);
         return () => container.removeEventListener("change", handler);
     }, []);
-    return _jsx("fieldset", { ...props, "data-component": "task-list", ref: ref });
+    return <fieldset {...props} data-component="task-list" ref={ref}/>;
 };

package/dist/components/form/transfer-list.d.ts

@@ -10,5 +10,5 @@ export type TransferListProps<T> = {
     setSource: SetState<T[]>;
     setTarget: SetState<T[]>;
 };
-export declare const TransferList: <T extends POJO, K extends keyof T>(props: TransferListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TransferList: <T extends POJO, K extends keyof T>(props: TransferListProps<T>) => React.JSX.Element;
 //# sourceMappingURL=transfer-list.d.ts.map

package/dist/components/form/transfer-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transfer-list.d.ts","sourceRoot":"","sources":["../../../src/components/form/transfer-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK7C,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IAC/B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;CAC5B,CAAC;AAWF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC,4CAgC1F,CAAC"}
+{"version":3,"file":"transfer-list.d.ts","sourceRoot":"","sources":["../../../src/components/form/transfer-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK7C,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;IAC/B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;CAC5B,CAAC;AAWF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC,sBAgC1F,CAAC"}

package/dist/components/form/transfer-list.jsx

@@ -0,0 +1,39 @@
+"use client";
+import { ChevronRightIcon } from "lucide-react";
+import React, { forwardRef, Fragment, useRef } from "react";
+import { Virtuoso } from "react-virtuoso";
+import { useParentHeight } from "../../hooks/use-parent";
+import { Button } from "../core/button";
+import { Checkbox } from "../form/checkbox";
+import { Input } from "./input";
+const components = {
+    Item: forwardRef(function InnerList(props, ref) {
+        return <li {...props} ref={ref} className="flex items-center gap-1 justify-between"/>;
+    }),
+    List: forwardRef(function InnerList(props, ref) {
+        return <ul {...props} ref={ref} className="space-y-3"/>;
+    }),
+};
+export const TransferList = (props) => {
+    const ref = useRef(null);
+    const h = useParentHeight(ref);
+    return (<div className="flex flex-row gap-4" ref={ref}>
+            <div className="py-8 space-y-4 min-w-64 w-fit flex flex-col whitespace-nowrap rounded-lg border border-card-border">
+                <header className="border-b border-card-border pb-2"></header>
+                <div className="px-8 space-y-2">
+                    <Input rightLabel="" title="Search" placeholder="Looking for..."/>
+                    <Virtuoso height={h} useWindowScroll data={props.source} components={components} itemContent={(_, row) => (<Fragment>
+                                <Checkbox>
+                                    <props.Item data={row}/>
+                                </Checkbox>
+                            </Fragment>)}/>
+                </div>
+            </div>
+            <div>
+                <Button>
+                    <ChevronRightIcon />
+                </Button>
+            </div>
+            <div></div>
+        </div>);
+};

package/dist/components/index.d.ts

@@ -8,8 +8,8 @@ export * from "./form/switch";
 export * from "./table/index";
 export * from "./display/card";
 export * from "./display/list";
-export * from "./display/tabs";
 export * from "./display/step";
+export * from "./display/tabs";
 export * from "./display/alert";
 export * from "./display/empty";
 export * from "./display/stats";
@@ -23,6 +23,7 @@ export * from "./form/task-list";
 export * from "./core/typography";
 export * from "./display/spinner";
 export * from "./floating/expand";
+export * from "./floating/wizard";
 export * from "./display/calendar";
 export * from "./display/progress";
 export * from "./display/timeline";

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/index.js

@@ -8,8 +8,8 @@ export * from "./form/switch";
 export * from "./table/index";
 export * from "./display/card";
 export * from "./display/list";
-export * from "./display/tabs";
 export * from "./display/step";
+export * from "./display/tabs";
 export * from "./display/alert";
 export * from "./display/empty";
 export * from "./display/stats";
@@ -23,6 +23,7 @@ export * from "./form/task-list";
 export * from "./core/typography";
 export * from "./display/spinner";
 export * from "./floating/expand";
+export * from "./floating/wizard";
 export * from "./display/calendar";
 export * from "./display/progress";
 export * from "./display/timeline";

package/dist/components/table/filter.d.ts

@@ -31,12 +31,12 @@ export declare const useOperators: () => {
     options: Partial<Record<ColType, OptionProps[]>>;
     operations: Operations;
 };
-export declare const Filter: <T extends object>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Filter: <T extends object>(props: Props<T>) => React.JSX.Element;
 type ColumnHeaderFilterProps<T extends object> = {
     filter: FilterConfig<T>;
     onDelete: (e: React.MouseEvent<HTMLButtonElement>) => void;
     set: React.Dispatch<React.SetStateAction<FilterConfig<T>[]>>;
 };
-export declare const ColumnHeaderFilter: <T extends object>({ filter, onDelete, set }: ColumnHeaderFilterProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnHeaderFilter: <T extends object>({ filter, onDelete, set }: ColumnHeaderFilterProps<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=filter.d.ts.map