@g4rcez/components 5.0.1 → 5.0.3

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

@@ -0,0 +1,352 @@
+"use client";
+import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingOverlay, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useTransitionStyles, } from "@floating-ui/react";
+import { CaretDownIcon, XIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "motion/react";
+import React, { forwardRef, Fragment, useEffect, useId, 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 { fzf } from "../../lib/fzf";
+import { Tag } from "../core/tag";
+import { InputField } from "./input-field";
+const MIN_SIZE = 40;
+const Frag = (props) => <Fragment>{props.children}</Fragment>;
+const transitionStyles = {
+    duration: 200,
+    initial: { transform: "scaleY(0)", opacity: 0.2 },
+    open: { transform: "scaleY(1)", opacity: 1 },
+    close: { transform: "scaleY(0)", opacity: 0 },
+};
+const EMPTY_NODES = [];
+const EMPTY_VALUES = [];
+const List = forwardRef(function VirtualList({ context, ...props }, ref) {
+    return <motion.div {...props} id={context?.listboxId} ref={ref} role="listbox" className="last:rounded-t-dropdown-radius"/>;
+});
+const Item = forwardRef(function VirtualList({ context: _context, ...props }, ref) {
+    return (<motion.div {...props} ref={ref} role="presentation" className="w-full">
+            <AnimatePresence>{props.children}</AnimatePresence>
+        </motion.div>);
+});
+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 scroller = useRef(null);
+    const map = useMemo(() => new Dict(options.map((x) => [x.value, x])), [options]);
+    const fieldset = useRef(null);
+    const virtuoso = useRef(null);
+    const searchInputRef = useRef(null);
+    const defaults = props.value ?? props.defaultValue ?? EMPTY_VALUES;
+    const translation = useTranslations();
+    const generatedId = useId();
+    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 [_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(EMPTY_NODES);
+    const [, tick] = useState(0);
+    const [h, setH] = useState(() => Math.min(320, MIN_SIZE * options.length));
+    const removeScrollRef = useRemoveScroll(open, "block-only");
+    const innerOptions = useMemo(() => (dynamicOption && shadow !== "" ? [{ value: shadow, label: shadow, "data-dynamic": "true" }, ...options] : options), [dynamicOption, shadow, options]);
+    const list = useMemo(() => shadow.length === 0
+        ? innerOptions
+        : fzf(innerOptions, "value", [
+            { key: "value", value: shadow },
+            { key: "label", value: shadow },
+        ]), [innerOptions, shadow]);
+    const displayList = useMemo(() => list.filter((x) => x.hidden !== true), [list]);
+    const values = useMemo(() => Array.from(value.keys()), [value]);
+    const isEmpty = displayList.length === 0;
+    const openDropdown = () => flushSync(() => setOpen(true));
+    const setClosed = () => {
+        setOpen(false);
+        setH(0);
+    };
+    const { x, y, strategy, refs, context, placement } = useFloating({
+        open,
+        transform: true,
+        placement: "bottom-start",
+        strategy: "absolute",
+        onOpenChange: setOpen,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(4),
+            autoPlacement({
+                allowedPlacements: ["top-start", "bottom-start"],
+                alignment: "start",
+            }),
+            size({
+                padding: 10,
+                elementContext: "reference",
+                apply(args) {
+                    const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
+                    const mw = `${fieldset.current?.getBoundingClientRect().width || DEFAULT_SIZE}px`;
+                    Object.assign(args.elements.floating.style, {
+                        width: mw,
+                        maxWidth: mw,
+                    });
+                },
+            }),
+        ],
+    });
+    const isTopPlacement = placement === "top" || placement === "top-start";
+    const transitions = useTransitionStyles(context, transitionStyles);
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        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 (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);
+    }, [refs.reference]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const id = requestAnimationFrame(() => tick((n) => n + 1));
+        return () => cancelAnimationFrame(id);
+    }, [open]);
+    useEffect(() => {
+        if (!open) {
+            setH(0);
+            return;
+        }
+        const id = setTimeout(() => setH(Math.min(320, displayList.length * MIN_SIZE)), 100);
+        return () => clearTimeout(id);
+    }, [open, displayList.length]);
+    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 opts = clone.map((x) => x.value);
+        input?.setAttribute("data-value", JSON.stringify(opts));
+        if (onChangeOptions)
+            onChangeOptions(opts);
+        setLabel((prev) => prev.concat(opt.label ?? ""));
+        setShadow("");
+        setIndex(i);
+        searchInputRef.current?.focus();
+    };
+    const onChange = (event) => {
+        const v = event.target.value;
+        setShadow(v);
+        if (!open && v === "")
+            return setOpen(true);
+        event.target.name = props.name || "";
+        return v ? setOpen(true) : undefined;
+    };
+    const onCaretDownClick = () => {
+        openDropdown();
+        setShadow("");
+        refs.reference.current?.focus();
+    };
+    const onFocus = () => {
+        openDropdown();
+        setShadow("");
+    };
+    const onClose = () => {
+        refs.reference.current?.setAttribute("data-value", "[]");
+        setShadow("");
+        setValue(new Dict());
+        onChangeOptions?.([]);
+        setClosed();
+    };
+    const id = props.id || props.name || generatedId;
+    const shadowId = `${id}-shadow`;
+    const listboxId = `${shadowId}-listbox`;
+    const activeOptionId = open && index !== null && displayList[index] ? `${shadowId}-option-${index}` : undefined;
+    const tags = value.map((x, i) => (<Tag size="small" key={`MultiSelect-${x.value}-x`} icon={<button type="button" aria-label={`Remove ${x.label ?? x.value}`} className="text-current hover:text-danger focus:text-danger" onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onSelect(x, i);
+            }}>
+                        <XIcon size={14} aria-hidden="true"/>
+                    </button>}>
+                {x.label ?? x.value}
+            </Tag>));
+    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={id} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} right={<span className="flex items-center gap-0.5">
+                        {right}
+                        <button type="button" className="transition-colors link:text-primary" onClick={onCaretDownClick}>
+                            <CaretDownIcon size={20}/>
+                            <span className="sr-only">{translation.inputCaretDown}</span>
+                        </button>
+                        {value ? (<button type="button" onClick={onClose} aria-label={translation.inputCloseValue} 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>}>
+                <div {...getReferenceProps({
+        ...props,
+        tabIndex: open ? -1 : 0,
+        onFocus,
+        id: shadowId,
+        role: open ? "presentation" : "combobox",
+        name: shadowId,
+        ref: refs.setReference,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
+        "aria-activedescendant": activeOptionId,
+        "aria-labelledby": `${id}-label`,
+    })} data-name={id} data-target={id} data-shadow="true" data-error={!!error} data-value={values.join(",")} className={css("input placeholder-input-mask group h-input-height w-full text-input-text", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-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-input-gap whitespace-nowrap text-left", "max-w-full overflow-x-auto truncate overflow-ellipsis", props.className)}>
+                    {values.length > 0 ? null : <span className="text-input-placeholder">{props.placeholder}</span>}
+                    <OverflowControl label={selectedLabel}>{tags}</OverflowControl>
+                </div>
+                <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || values || undefined}/>
+                <FloatingPortal preserveTabOrder>
+                    {open ? (<FloatingOverlay lockScroll className="z-floating">
+                            <FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={searchInputRef} visuallyHiddenDismiss>
+                                <div {...getFloatingProps({
+            ref: refs.setFloating,
+            style: {
+                ...transitions.styles,
+                left: x,
+                top: y ?? 0,
+                position: strategy,
+            },
+        })} data-floating="true" className={css("relative shadow-floating overflow-clip isolate z-floating m-0 max-h-dropdown-max-h list-none overscroll-contain rounded-dropdown-radius border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")}>
+                                    <input ref={searchInputRef} value={shadow} onChange={onChange} title={props.title} role="combobox" aria-autocomplete="list" aria-expanded={open} aria-haspopup="listbox" aria-controls={listboxId} aria-activedescendant={activeOptionId} aria-labelledby={`${id}-label`} autoComplete="off" placeholder={translation.multiSelectInnerPlaceholder} className="input placeholder-input-mask group mb-1 h-input-height w-full flex-1 rounded-none border-b border-input-border bg-transparent px-input-padding-x py-input-padding-y outline-none transition-colors focus:border-primary" onKeyDown={(event) => {
+                if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    let next = index === null ? 0 : index + 1;
+                    if (next > displayList.length - 1)
+                        next = 0;
+                    virtuoso.current?.scrollIntoView({ index: next });
+                    return setIndex(next);
+                }
+                if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    let next = index === null ? displayList.length - 1 : index - 1;
+                    if (next < 0)
+                        next = displayList.length - 1;
+                    virtuoso.current?.scrollIntoView({ index: next });
+                    return setIndex(next);
+                }
+                if (event.key === "Escape") {
+                    event.preventDefault();
+                    return setClosed();
+                }
+                if (event.key === "Enter" || event.key === " " || event.code === "Space") {
+                    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 className="w-full border-b border-tooltip-border last:border-transparent">
+                                            <span className="flex w-full justify-between p-menu-item-p text-left text-disabled">
+                                                {emptyMessage || translation.autocompleteEmpty}
+                                            </span>
+                                        </li>) : null}
+                                    {isEmpty ? null : (<motion.div initial={false} animate={{ height: isEmpty ? "auto" : h }} className="max-h-72 w-full overscroll-contain" onAnimationComplete={() => {
+                    if (!open) {
+                        setH(0);
+                        return;
+                    }
+                    const li = refs.floating.current?.querySelector("li");
+                    const sum = (li?.getBoundingClientRect().height ?? MIN_SIZE) * displayList.length;
+                    flushSync(() => setH(Math.min(320, sum + 2)));
+                }}>
+                                            <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} context={{ listboxId }} style={{ height: h }} initialItemCount={displayList.length} defaultItemHeight={MIN_SIZE} components={components} totalListHeightChanged={(totalHeight) => setH(Math.min(320, totalHeight))} scrollerRef={(e) => {
+                    scroller.current = e;
+                    removeScrollRef.current = e;
+                }} className="max-h-72 border-floating-border bg-floating-background p-0 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 (<div id={`${shadowId}-option-${i}`} data-value={option.value} {...getItemProps({
+                        ref: (node) => {
+                            listRef.current[i] = node;
+                        },
+                        role: "option",
+                        "aria-selected": active,
+                        "aria-disabled": option.disabled,
+                        tabIndex: -1,
+                        onClick: () => {
+                            if (!option.disabled)
+                                onSelect(option, i);
+                        },
+                    })} className={css("flex w-full max-w-full cursor-pointer items-center justify-start p-menu-item-p text-left hover:bg-floating-hover focus:bg-floating-hover", active || selected ? "bg-floating-hover text-floating-foreground" : "")}>
+                                                            <span aria-hidden="true" data-selected={active} className="mr-checkbox-gap inline-block size-checkbox-size rounded-checkbox-radius border border-card-border data-[selected=true]:bg-primary"/>
+                                                            <Label {...option} label={option.label} value={option.value}>
+                                                                {children}
+                                                            </Label>
+                                                        </div>);
+                }}/>
+                                        </motion.div>)}
+                                    <div className="gap-menu-item-gap sticky bottom-0 flex w-full flex-nowrap items-center overflow-x-auto rounded-b-dropdown-radius bg-floating-background p-menu-item-p">
+                                        {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

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

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

@@ -0,0 +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,gDAAqD,aAAa,sBAiB1F,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: _size, ...props }) => (<label data-component="radiobox" data-disabled={props.disabled} aria-disabled={props.disabled} className={css("group flex items-center gap-radiobox-gap font-normal data-[disabled=true]:cursor-not-allowed")}>
+        <input {...props} type="radio" className={css("app form-radio inline-block size-radiobox-size 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)}/>
+        {children}
+    </label>);

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { Override } from "../../types";
+import { InputFieldProps } from "./input-field";
+export type OptionProps = Override<React.ComponentProps<"option">, {
+    value: string;
+    "data-dynamic"?: string;
+} & Partial<Record<`data-${string}`, string>>>;
+export type SelectProps = Override<InputFieldProps<"select">, {
+    options: OptionProps[];
+    selectContainer?: string;
+}>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC9B;IACI,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,oGA+GlB,CAAC"}

package/dist/components/form/select.js

@@ -1,77 +1,81 @@
 "use client";
 import { o as e, t, u as n } from "../../dom-Bn4wY_Zx.js";
 import { t as r } from "../../CaretDown.es-BXl0Ixp3.js";
-import { n as i } from "../../input-field-B_whI66Q.js";
-import { t as a } from "../../use-translations-DTLfPE3_.js";
-import { createElement as o, forwardRef as s, useEffect as c, useImperativeHandle as l, useRef as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { n as i } from "../../input-field-ffx1MbHo.js";
+import { t as a } from "../../use-translations-BE4PuhLm.js";
+import { createElement as o, forwardRef as s, useEffect as c, useId as l, useImperativeHandle as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/form/select.tsx
-var p = s(({ required: s = !0, options: p, info: m, selectContainer: h = "", feedback: g = null, labelClassName: _, interactive: v, rightLabel: y, hiddenLabel: b, loading: x, optionalText: S, container: C, hideLeft: w = !1, right: T, left: E, error: D, ...O }, k) => {
-	let A = a(), j = u(null), M = O.id ?? O.name;
-	return l(k, () => j.current), c(() => {
-		if (j.current === null) return;
-		let t = new AbortController(), n = j.current, r = e(j.current);
+var m = s(({ required: s = !0, options: m, info: h, selectContainer: g = "", feedback: _ = null, labelClassName: v, interactive: y, rightLabel: b, hiddenLabel: x, loading: S, optionalText: C, container: w, hideLeft: T = !1, right: E, left: D, error: O, ...k }, A) => {
+	let j = a(), M = d(null), N = l(), P = k.id ?? k.name ?? N, F = [
+		k["aria-describedby"],
+		_ ? `${P}-feedback` : void 0,
+		O ? `${P}-error` : void 0
+	].filter(Boolean).join(" ") || void 0;
+	return u(A, () => M.current), c(() => {
+		if (M.current === null) return;
+		let t = new AbortController(), n = M.current, r = e(M.current);
 		return n.addEventListener("change", () => n.setAttribute("data-selected", "true"), {
 			once: !0,
 			signal: t.signal
 		}), () => {
 			r(), t.abort();
 		};
-	}, []), /* @__PURE__ */ d(i, {
-		info: m,
-		left: E,
-		error: D,
-		form: O.form,
-		loading: x,
-		name: O.name,
-		feedback: g,
-		hideLeft: w,
+	}, []), /* @__PURE__ */ f(i, {
+		info: h,
+		left: D,
+		error: O,
+		form: k.form,
+		loading: S,
+		name: k.name ?? P,
+		feedback: _,
+		hideLeft: T,
 		required: s,
-		title: O.title,
-		container: C,
+		title: k.title,
+		container: w,
 		componentName: "select",
-		rightLabel: y,
-		hiddenLabel: b,
-		interactive: v,
-		id: O.name || O.id,
-		optionalText: S,
-		labelClassName: _,
-		placeholder: O.placeholder,
-		right: /* @__PURE__ */ f("label", {
-			htmlFor: M,
-			children: [T, /* @__PURE__ */ f("button", {
-				onClick: () => j.current?.focus(),
-				type: "button",
-				className: "mt-2 transition-colors hover:text-primary",
-				children: [/* @__PURE__ */ d(r, { size: 20 }), /* @__PURE__ */ d("span", {
-					className: "sr-only",
-					children: A.inputCaretDown
-				})]
+		rightLabel: b,
+		hiddenLabel: x,
+		interactive: y,
+		id: P,
+		optionalText: C,
+		labelClassName: v,
+		placeholder: k.placeholder,
+		right: /* @__PURE__ */ p("span", { children: [E, /* @__PURE__ */ p("button", {
+			onClick: () => M.current?.focus(),
+			type: "button",
+			className: "mt-2 transition-colors hover:text-primary",
+			children: [/* @__PURE__ */ f(r, { size: 20 }), /* @__PURE__ */ f("span", {
+				className: "sr-only",
+				children: j.inputCaretDown
 			})]
-		}),
-		children: /* @__PURE__ */ f("select", {
-			...O,
-			id: M,
-			name: M,
+		})] }),
+		children: /* @__PURE__ */ p("select", {
+			...k,
+			id: P,
+			name: k.name ?? P,
 			required: s,
-			ref: n(k, j),
-			"data-selected": !!O.value || !1,
-			title: typeof O.title == "string" ? O.title : void 0,
-			className: t("input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text", "bg-transparent px-input-padding-x py-input-padding-y 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", O.className),
-			children: [/* @__PURE__ */ d("option", {
+			ref: n(A, M),
+			"aria-invalid": O ? !0 : k["aria-invalid"],
+			"aria-labelledby": `${P}-label`,
+			"aria-describedby": F,
+			"data-selected": !!k.value || !1,
+			title: typeof k.title == "string" ? k.title : void 0,
+			className: t("input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text", "bg-transparent px-input-padding-x py-input-padding-y 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", k.className),
+			children: [/* @__PURE__ */ f("option", {
 				value: "",
 				disabled: !0,
 				hidden: !0,
-				children: O.placeholder
-			}), p.map((e) => /* @__PURE__ */ o("option", {
+				children: k.placeholder
+			}), m.map((e) => /* @__PURE__ */ o("option", {
 				...e,
 				value: e.value,
-				key: `${M}-select-option-${e.value}`
+				key: `${P}-select-option-${e.value}`
 			}, e.label ?? e.value))]
 		})
 	});
 });
 //#endregion
-export { p as Select };
+export { m as Select };
 
 //# sourceMappingURL=select.js.map

package/dist/components/form/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../src/components/form/select.tsx"],"sourcesContent":["\"use client\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css, initializeInputDataset, mergeRefs } from \"../../lib/dom\";\nimport { Override } from \"../../types\";\nimport { InputField, InputFieldProps } from \"./input-field\";\n\nexport type OptionProps = Override<\n    React.ComponentProps<\"option\">,\n    {\n        value: string;\n        \"data-dynamic\"?: string;\n    } & Partial<Record<`data-${string}`, string>>\n>;\n\nexport type SelectProps = Override<\n    InputFieldProps<\"select\">,\n    {\n        options: OptionProps[];\n        selectContainer?: string;\n    }\n>;\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (\n        {\n            required = true,\n            options,\n            info,\n            selectContainer: _selectContainer = \"\",\n            feedback = null,\n            labelClassName,\n            interactive,\n            rightLabel,\n            hiddenLabel,\n            loading,\n            optionalText,\n            container,\n            hideLeft = false,\n            right,\n            left,\n            error,\n            ...props\n        }: SelectProps,\n        ref\n    ) => {\n        const translation = useTranslations();\n        const inputRef = useRef<HTMLSelectElement>(null);\n        const id = props.id ?? props.name;\n        useImperativeHandle(ref, () => inputRef.current!);\n\n        useEffect(() => {\n            if (inputRef.current === null) return;\n            const controller = new AbortController();\n            const input = inputRef.current;\n            const focus = initializeInputDataset(inputRef.current);\n            input.addEventListener(\"change\", () => input.setAttribute(\"data-selected\", \"true\"), {\n                once: true,\n                signal: controller.signal,\n            });\n            return () => {\n                focus();\n                controller.abort();\n            };\n        }, []);\n\n        const onClickLabel = () => inputRef.current?.focus();\n\n        return (\n            <InputField<\"select\">\n                info={info}\n                left={left}\n                error={error}\n                form={props.form}\n                loading={loading}\n                name={props.name}\n                feedback={feedback}\n                hideLeft={hideLeft}\n                required={required}\n                title={props.title}\n                container={container}\n                componentName=\"select\"\n                rightLabel={rightLabel}\n                hiddenLabel={hiddenLabel}\n                interactive={interactive}\n                id={props.name || props.id}\n                optionalText={optionalText}\n                labelClassName={labelClassName}\n                placeholder={props.placeholder}\n                right={\n                    <label htmlFor={id}>\n                        {right}\n                        <button onClick={onClickLabel} type=\"button\" className=\"mt-2 transition-colors hover:text-primary\">\n                            <CaretDownIcon size={20} />\n                            <span className=\"sr-only\">{translation.inputCaretDown}</span>\n                        </button>\n                    </label>\n                }\n            >\n                <select\n                    {...props}\n                    id={id}\n                    name={id}\n                    required={required}\n                    ref={mergeRefs(ref, inputRef)}\n                    data-selected={!!props.value || false}\n                    title={typeof props.title === \"string\" ? props.title : undefined}\n                    className={css(\n                        \"input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text\",\n                        \"bg-transparent px-input-padding-x py-input-padding-y text-foreground placeholder-input-placeholder\",\n                        \"outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error\",\n                        \"data-[selected=false]:text-input-placeholder\",\n                        props.className\n                    )}\n                >\n                    <option value=\"\" disabled hidden>\n                        {props.placeholder}\n                    </option>\n                    {options.map((option) => (\n                        <option\n                            {...option}\n                            value={option.value}\n                            key={`${id}-select-option-${option.value}`}\n                        >\n                            {option.label ?? option.value}\n                        </option>\n                    ))}\n                </select>\n            </InputField>\n        );\n    }\n);\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAS,GAEd,EACI,cAAW,IACX,YACA,SACA,iBAAiB,IAAmB,IACpC,cAAW,MACX,mBACA,gBACA,eACA,gBACA,YACA,iBACA,cACA,cAAW,IACX,UACA,SACA,UACA,GAAG,KAEP,MACC;CACD,IAAM,IAAc,EAAgB,GAC9B,IAAW,EAA0B,IAAI,GACzC,IAAK,EAAM,MAAM,EAAM;CAoB7B,OAnBA,EAAoB,SAAW,EAAS,OAAQ,GAEhD,QAAgB;EACZ,IAAI,EAAS,YAAY,MAAM;EAC/B,IAAM,IAAa,IAAI,gBAAgB,GACjC,IAAQ,EAAS,SACjB,IAAQ,EAAuB,EAAS,OAAO;EAKrD,OAJA,EAAM,iBAAiB,gBAAgB,EAAM,aAAa,iBAAiB,MAAM,GAAG;GAChF,MAAM;GACN,QAAQ,EAAW;EACvB,CAAC,SACY;GAET,AADA,EAAM,GACN,EAAW,MAAM;EACrB;CACJ,GAAG,CAAC,CAAC,GAKD,kBAAC,GAAD;EACU;EACA;EACC;EACP,MAAM,EAAM;EACH;EACT,MAAM,EAAM;EACF;EACA;EACA;EACV,OAAO,EAAM;EACF;EACX,eAAc;EACF;EACC;EACA;EACb,IAAI,EAAM,QAAQ,EAAM;EACV;EACE;EAChB,aAAa,EAAM;EACnB,OACI,kBAAC,SAAD;GAAO,SAAS;aAAhB,CACK,GACD,kBAAC,UAAD;IAAQ,eA1BG,EAAS,SAAS,MAAM;IA0BJ,MAAK;IAAS,WAAU;cAAvD,CACI,kBAAC,GAAD,EAAe,MAAM,GAAK,CAAA,GAC1B,kBAAC,QAAD;KAAM,WAAU;eAAW,EAAY;IAAqB,CAAA,CACxD;KACL;;YAGX,kBAAC,UAAD;GACI,GAAI;GACA;GACJ,MAAM;GACI;GACV,KAAK,EAAU,GAAK,CAAQ;GAC5B,iBAAe,CAAC,CAAC,EAAM,SAAS;GAChC,OAAO,OAAO,EAAM,SAAU,WAAW,EAAM,QAAQ,KAAA;GACvD,WAAW,EACP,wGACA,sGACA,mGACA,gDACA,EAAM,SACV;aAdJ,CAgBI,kBAAC,UAAD;IAAQ,OAAM;IAAG,UAAA;IAAS,QAAA;cACrB,EAAM;GACH,CAAA,GACP,EAAQ,KAAK,MACV,kBAAC,UAAD;IACI,GAAI;IACJ,OAAO,EAAO;IACd,KAAK,GAAG,EAAG,iBAAiB,EAAO;GAG/B,GADH,EAAO,SAAS,EAAO,KACpB,CACX,CACG;;CACA,CAAA;AAEpB,CACJ"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../src/components/form/select.tsx"],"sourcesContent":["\"use client\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css, initializeInputDataset, mergeRefs } from \"../../lib/dom\";\nimport { Override } from \"../../types\";\nimport { InputField, InputFieldProps } from \"./input-field\";\n\nexport type OptionProps = Override<\n    React.ComponentProps<\"option\">,\n    {\n        value: string;\n        \"data-dynamic\"?: string;\n    } & Partial<Record<`data-${string}`, string>>\n>;\n\nexport type SelectProps = Override<\n    InputFieldProps<\"select\">,\n    {\n        options: OptionProps[];\n        selectContainer?: string;\n    }\n>;\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n    (\n        {\n            required = true,\n            options,\n            info,\n            selectContainer: _selectContainer = \"\",\n            feedback = null,\n            labelClassName,\n            interactive,\n            rightLabel,\n            hiddenLabel,\n            loading,\n            optionalText,\n            container,\n            hideLeft = false,\n            right,\n            left,\n            error,\n            ...props\n        }: SelectProps,\n        ref\n    ) => {\n        const translation = useTranslations();\n        const inputRef = useRef<HTMLSelectElement>(null);\n        const generatedId = useId();\n        const id = props.id ?? props.name ?? generatedId;\n        const describedBy =\n            [props[\"aria-describedby\"], feedback ? `${id}-feedback` : undefined, error ? `${id}-error` : undefined].filter(Boolean).join(\" \") ||\n            undefined;\n        useImperativeHandle(ref, () => inputRef.current!);\n\n        useEffect(() => {\n            if (inputRef.current === null) return;\n            const controller = new AbortController();\n            const input = inputRef.current;\n            const focus = initializeInputDataset(inputRef.current);\n            input.addEventListener(\"change\", () => input.setAttribute(\"data-selected\", \"true\"), {\n                once: true,\n                signal: controller.signal,\n            });\n            return () => {\n                focus();\n                controller.abort();\n            };\n        }, []);\n\n        const onClickLabel = () => inputRef.current?.focus();\n\n        return (\n            <InputField<\"select\">\n                info={info}\n                left={left}\n                error={error}\n                form={props.form}\n                loading={loading}\n                name={props.name ?? id}\n                feedback={feedback}\n                hideLeft={hideLeft}\n                required={required}\n                title={props.title}\n                container={container}\n                componentName=\"select\"\n                rightLabel={rightLabel}\n                hiddenLabel={hiddenLabel}\n                interactive={interactive}\n                id={id}\n                optionalText={optionalText}\n                labelClassName={labelClassName}\n                placeholder={props.placeholder}\n                right={\n                    <span>\n                        {right}\n                        <button onClick={onClickLabel} type=\"button\" className=\"mt-2 transition-colors hover:text-primary\">\n                            <CaretDownIcon size={20} />\n                            <span className=\"sr-only\">{translation.inputCaretDown}</span>\n                        </button>\n                    </span>\n                }\n            >\n                <select\n                    {...props}\n                    id={id}\n                    name={props.name ?? id}\n                    required={required}\n                    ref={mergeRefs(ref, inputRef)}\n                    aria-invalid={error ? true : props[\"aria-invalid\"]}\n                    aria-labelledby={`${id}-label`}\n                    aria-describedby={describedBy}\n                    data-selected={!!props.value || false}\n                    title={typeof props.title === \"string\" ? props.title : undefined}\n                    className={css(\n                        \"input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text\",\n                        \"bg-transparent px-input-padding-x py-input-padding-y text-foreground placeholder-input-placeholder\",\n                        \"outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error\",\n                        \"data-[selected=false]:text-input-placeholder\",\n                        props.className\n                    )}\n                >\n                    <option value=\"\" disabled hidden>\n                        {props.placeholder}\n                    </option>\n                    {options.map((option) => (\n                        <option {...option} value={option.value} key={`${id}-select-option-${option.value}`}>\n                            {option.label ?? option.value}\n                        </option>\n                    ))}\n                </select>\n            </InputField>\n        );\n    }\n);\n"],"mappings":";;;;;;;;AAwBA,IAAa,IAAS,GAEd,EACI,cAAW,IACX,YACA,SACA,iBAAiB,IAAmB,IACpC,cAAW,MACX,mBACA,gBACA,eACA,gBACA,YACA,iBACA,cACA,cAAW,IACX,UACA,SACA,UACA,GAAG,KAEP,MACC;CACD,IAAM,IAAc,EAAgB,GAC9B,IAAW,EAA0B,IAAI,GACzC,IAAc,EAAM,GACpB,IAAK,EAAM,MAAM,EAAM,QAAQ,GAC/B,IACF;EAAC,EAAM;EAAqB,IAAW,GAAG,EAAG,aAAa,KAAA;EAAW,IAAQ,GAAG,EAAG,UAAU,KAAA;CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAChI,KAAA;CAoBJ,OAnBA,EAAoB,SAAW,EAAS,OAAQ,GAEhD,QAAgB;EACZ,IAAI,EAAS,YAAY,MAAM;EAC/B,IAAM,IAAa,IAAI,gBAAgB,GACjC,IAAQ,EAAS,SACjB,IAAQ,EAAuB,EAAS,OAAO;EAKrD,OAJA,EAAM,iBAAiB,gBAAgB,EAAM,aAAa,iBAAiB,MAAM,GAAG;GAChF,MAAM;GACN,QAAQ,EAAW;EACvB,CAAC,SACY;GAET,AADA,EAAM,GACN,EAAW,MAAM;EACrB;CACJ,GAAG,CAAC,CAAC,GAKD,kBAAC,GAAD;EACU;EACA;EACC;EACP,MAAM,EAAM;EACH;EACT,MAAM,EAAM,QAAQ;EACV;EACA;EACA;EACV,OAAO,EAAM;EACF;EACX,eAAc;EACF;EACC;EACA;EACT;EACU;EACE;EAChB,aAAa,EAAM;EACnB,OACI,kBAAC,QAAD,EAAA,UAAA,CACK,GACD,kBAAC,UAAD;GAAQ,eA1BG,EAAS,SAAS,MAAM;GA0BJ,MAAK;GAAS,WAAU;aAAvD,CACI,kBAAC,GAAD,EAAe,MAAM,GAAK,CAAA,GAC1B,kBAAC,QAAD;IAAM,WAAU;cAAW,EAAY;GAAqB,CAAA,CACxD;IACN,EAAA,CAAA;YAGV,kBAAC,UAAD;GACI,GAAI;GACA;GACJ,MAAM,EAAM,QAAQ;GACV;GACV,KAAK,EAAU,GAAK,CAAQ;GAC5B,gBAAc,IAAQ,KAAO,EAAM;GACnC,mBAAiB,GAAG,EAAG;GACvB,oBAAkB;GAClB,iBAAe,CAAC,CAAC,EAAM,SAAS;GAChC,OAAO,OAAO,EAAM,SAAU,WAAW,EAAM,QAAQ,KAAA;GACvD,WAAW,EACP,wGACA,sGACA,mGACA,gDACA,EAAM,SACV;aAjBJ,CAmBI,kBAAC,UAAD;IAAQ,OAAM;IAAG,UAAA;IAAS,QAAA;cACrB,EAAM;GACH,CAAA,GACP,EAAQ,KAAK,MACV,kBAAC,UAAD;IAAQ,GAAI;IAAQ,OAAO,EAAO;IAAO,KAAK,GAAG,EAAG,iBAAiB,EAAO;GAEpE,GADH,EAAO,SAAS,EAAO,KACpB,CACX,CACG;;CACA,CAAA;AAEpB,CACJ"}

package/dist/components/form/select.jsx

@@ -0,0 +1,47 @@
+"use client";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import React, { forwardRef, useEffect, useId, 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: _selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, hiddenLabel, loading, optionalText, container, hideLeft = false, right, left, error, ...props }, ref) => {
+    const translation = useTranslations();
+    const inputRef = useRef(null);
+    const generatedId = useId();
+    const id = props.id ?? props.name ?? generatedId;
+    const describedBy = [props["aria-describedby"], feedback ? `${id}-feedback` : undefined, error ? `${id}-error` : undefined].filter(Boolean).join(" ") ||
+        undefined;
+    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 ?? id} feedback={feedback} hideLeft={hideLeft} required={required} title={props.title} container={container} componentName="select" rightLabel={rightLabel} hiddenLabel={hiddenLabel} interactive={interactive} id={id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} right={<span>
+                        {right}
+                        <button onClick={onClickLabel} type="button" className="mt-2 transition-colors hover:text-primary">
+                            <CaretDownIcon size={20}/>
+                            <span className="sr-only">{translation.inputCaretDown}</span>
+                        </button>
+                    </span>}>
+                <select {...props} id={id} name={props.name ?? id} required={required} ref={mergeRefs(ref, inputRef)} aria-invalid={error ? true : props["aria-invalid"]} aria-labelledby={`${id}-label`} aria-describedby={describedBy} data-selected={!!props.value || false} title={typeof props.title === "string" ? props.title : undefined} className={css("input select group h-input-height w-full flex-1 appearance-none rounded-input-radius text-input-text", "bg-transparent px-input-padding-x py-input-padding-y 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} key={`${id}-select-option-${option.value}`}>
+                            {option.label ?? option.value}
+                        </option>))}
+                </select>
+            </InputField>);
+});

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

@@ -0,0 +1,7 @@
+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.Element;
+export {};
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +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;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAmCF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,gCAgBxC,CAAC"}

package/dist/components/form/slider.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../slider-TX9hiHO-.js";
+export { e as Slider };