@g4rcez/components 4.0.2 → 4.1.2

package/dist/components/form/formReset.jsx

@@ -0,0 +1,17 @@
+const inputFields = ["INPUT", "SELECT"];
+export const formReset = (form) => {
+    if (!form)
+        return;
+    const elements = Array.from(form.elements);
+    elements.forEach((field) => {
+        if (!inputFields.includes(field.tagName))
+            return;
+        if (field.tagName === "INPUT") {
+            field.value = field.defaultValue;
+        }
+        if (field.tagName === "SELECT") {
+            field.value = "";
+        }
+        field.setAttribute("data-initialized", "false");
+    });
+};

package/dist/components/form/free-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,GAAG,IAAI,QAAQ,CAC/E,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,EAChF,UAAU,CACb,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,CAAC,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,GAAG,EACpI,SAAS,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,EAChD,aAAa,OAAO,GAAG,UAAU,EACjC,cAAc,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACrC,WAAW,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,4CAyGtC,CAAC"}
+{"version":3,"file":"free-text.d.ts","sourceRoot":"","sources":["../../../src/components/form/free-text.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,KAAK,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;AAExC,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,UAAU,SAAS,GAAG,IAAI,QAAQ,CAC/E,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC,EAChF,UAAU,CACb,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,CAAC,IAAI,SAAS,gBAAgB,GAAG,mBAAmB,EAAE,KAAK,SAAS,GAAG,EACpI,SAAS,OAAO,GAAG,UAAU,GAAG,OAAO,SAAS,EAChD,aAAa,OAAO,GAAG,UAAU,EACjC,cAAc,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACrC,WAAW,CAAC,EAAE,EAAE,IAAI,KAAK,MAAM,IAAI,4CA2GtC,CAAC"}

package/dist/components/form/free-text.jsx

@@ -0,0 +1,41 @@
+"use client";
+import React, { forwardRef, useEffect, useRef } from "react";
+import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
+import { InputField } from "./input-field";
+export const createFreeText = (Element, elementName, defaultProps, register) => {
+    const FreeText = forwardRef(({ info, left, next, error, right, container, rightLabel, interactive, optionalText, type = "text", labelClassName, feedback = null, hideLeft = false, loading, hiddenLabel, ...props }, ref) => {
+        const Render = Element;
+        const id = props.id ?? props.name;
+        const inputRef = useRef(null);
+        useEffect(() => {
+            if (inputRef.current === null)
+                return;
+            const input = inputRef.current;
+            const focus = initializeInputDataset(inputRef.current);
+            const registered = register?.(input);
+            const goNextInputImpl = (e) => {
+                const event = e;
+                if (event.key === "Enter" && input.enterKeyHint === "next") {
+                    const focusNext = input.getAttribute("data-next");
+                    if (focusNext) {
+                        const el = document.getElementById(focusNext);
+                        if (el) {
+                            el.focus();
+                            return void event.preventDefault();
+                        }
+                    }
+                }
+            };
+            input.addEventListener("keydown", goNextInputImpl);
+            return () => {
+                registered?.();
+                focus();
+                input.removeEventListener("keydown", goNextInputImpl);
+            };
+        }, []);
+        return (<InputField {...defaultProps} info={info} left={left} error={error} right={right} form={props.form} loading={loading} name={props.name} feedback={feedback} hideLeft={hideLeft} title={props.title} rightLabel={rightLabel} disabled={props.disabled} hiddenLabel={hiddenLabel} interactive={interactive} required={props.required} componentName={elementName} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder} container={css(container, defaultProps.container)}>
+                    <Render {...defaultProps} {...props} id={id} name={id} type={type} data-next={next} aria-busy={loading} aria-invalid={!!error} aria-disabled={props.disabled} aria-readonly={props.readOnly} aria-describedby={error ? `${id}-error` : undefined} ref={mergeRefs(ref, inputRef)} className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-base 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", "resize-y group-focus-within:border-primary group-hover:border-primary", "disabled:cursor-not-allowed disabled:text-disabled", props.className)}/>
+                </InputField>);
+    });
+    return FreeText;
+};

package/dist/components/form/input-field.d.ts

@@ -13,22 +13,22 @@ export type FeedbackProps = React.PropsWithChildren<Partial<{
 }>>;
 export declare const InputFeedback: ({ reportStatus, id, hideLeft, className, info, children, title }: FeedbackProps) => React.JSX.Element;
 export type InputFieldProps<T extends "input" | "select" | "textarea"> = PolymorphicProps<Partial<Override<FeedbackProps, {
-    loading: boolean;
-    componentName: string;
+    id: string;
     info: Label;
-    labelClassName: string;
-    error: string;
-    hideLeft: boolean;
-    interactive: boolean;
-    container: string;
     left: Label;
-    feedback: Label;
-    optionalText: string;
+    name: string;
     right: Label;
+    error: string;
+    feedback: Label;
+    loading: boolean;
+    container: string;
+    hideLeft: boolean;
     rightLabel: Label;
-    id: string;
-    name: string;
     placeholder: string;
+    interactive: boolean;
+    optionalText: string;
+    componentName: string;
+    labelClassName: string;
 }>>, T>;
 export declare const InputField: <T extends "input" | "select" | "textarea">(props: PropsWithChildren<InputFieldProps<T>>) => React.ReactElement;
 //# sourceMappingURL=input-field.d.ts.map

package/dist/components/form/input-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACxB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,sBA+CpH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,KAAK,CAAC;IACZ,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,KAAK,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,KAAK,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACvB,CACJ,CACJ,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAmFpH,CAAC"}
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACxB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,sBA+CpH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CAC1B,CACJ,CACJ,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAE,KAAK,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAiGG,CAAC"}

package/dist/components/form/input-field.jsx

@@ -0,0 +1,58 @@
+"use client";
+import { CheckCircleIcon, InfoIcon, XCircleIcon } from "@phosphor-icons/react";
+import React, { forwardRef, Fragment } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { useTweaks } from "../../hooks/use-tweaks";
+import { css } from "../../lib/dom";
+import { Tooltip } from "../floating/tooltip";
+export const InputFeedback = ({ reportStatus, id, hideLeft = false, className, info, children, title }) => (<span className={css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className)}>
+        {hideLeft ? null : (<span className="flex items-center gap-1 transition-colors group-focus-within:text-primary group-hover:text-primary group-disabled:text-disabled group-error:text-danger">
+                {title}
+                {reportStatus || info ? (<span className="flex items-center justify-center gap-1">
+                        {info ? (<Tooltip as="button" type="button" aria-label={typeof info === "string" ? info : undefined} aria-describedby={typeof info === "string" ? undefined : id ? `tooltip-info-content-${id}` : undefined} title={<span className="cursor-help">
+                                        <InfoIcon className="aspect-square size-3" aria-hidden="true" size={16}/>
+                                    </span>}>
+                                <div id={id ? `tooltip-info-content-${id}` : undefined} className="w-full max-w-48 whitespace-break-spaces break-words">
+                                    {info}
+                                </div>
+                            </Tooltip>) : null}
+                        {reportStatus ? (<span className="flex h-3 min-w-6 items-center">
+                                <CheckCircleIcon className="hidden aspect-square size-3 opacity-0 transition-opacity group-assert:block group-assert:text-success group-assert:opacity-100" aria-hidden="true" size={16}/>
+                                <XCircleIcon className="hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100" aria-hidden="true" size={16}/>
+                            </span>) : null}
+                    </span>) : null}
+            </span>)}
+        {children}
+    </span>);
+export const InputField = forwardRef(({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, componentName, placeholder, hideLeft = false, required, disabled, reportStatus, hiddenLabel, }, ref) => {
+    const tweaks = useTweaks();
+    const reportStatusDefault = reportStatus !== undefined ? reportStatus : tweaks.input.iconFeedback;
+    const ID = id ?? name;
+    const translation = useTranslations();
+    const optionalText = _optionalText ?? translation.inputOptionalLabel;
+    return (<fieldset ref={ref} form={form} disabled={disabled} data-error={!!error} aria-disabled={disabled} data-component={componentName} data-interactive={!!interactive} className={css("group flex min-h-0 min-w-0 max-w-full flex-col items-start", container)}>
+                <label form={form} htmlFor={ID} className="relative inline-flex w-full max-w-full cursor-text flex-row flex-wrap justify-between gap-1 text-field-label text-sm transition-colors empty:hidden group-disabled:cursor-not-allowed group-error:text-danger">
+                    {hiddenLabel ? (<span className="sr-only">
+                            <InputFeedback info={info} hideLeft={hideLeft} reportStatus={reportStatusDefault} title={title} placeholder={placeholder}/>
+                        </span>) : (<InputFeedback info={info} hideLeft={hideLeft} reportStatus={reportStatusDefault} title={title} placeholder={placeholder}>
+                            {optionalText || rightLabel ? (<Fragment>
+                                    {!required ? (<span aria-disabled={disabled} className="text-opacity-70 transition-colors group-focus-within:text-primary group-hover:text-primary aria-disabled:text-disabled">
+                                            {optionalText}
+                                        </span>) : null}
+                                    {rightLabel ? <Fragment>{rightLabel}</Fragment> : null}
+                                </Fragment>) : null}
+                        </InputFeedback>)}
+                    <div className={`group relative flex w-full flex-row flex-nowrap items-center gap-x-2 gap-y-1 rounded-md border border-input-border bg-transparent transition-colors group-hover:border-primary group-disabled:border-disabled group-error:border-danger ${labelClassName}`}>
+                        {left ? <span className="flex flex-nowrap gap-1 whitespace-nowrap pl-2">{left}</span> : null}
+                        {children}
+                        {right ? <span className="flex flex-nowrap gap-2 whitespace-nowrap pr-2">{right}</span> : null}
+                    </div>
+                </label>
+                <p id={`${ID}-error`} role="alert" className="mt-input-gap hidden whitespace-pre-wrap text-wrap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:flex group-error:flex group-error:text-danger">
+                    {error}
+                </p>
+                <p className="mt-input-gap text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden">
+                    {feedback}
+                </p>
+            </fieldset>);
+}); // forwardRef return is non-generic; cast restores the polymorphic signature

package/dist/components/form/input.js

@@ -1,4 +1,4 @@
-import { I as r } from "../../input-CrGrSnUt.js";
+import { I as r } from "../../input-_MVxmIpu.js";
 export {
   r as Input
 };

package/dist/components/form/input.jsx

@@ -0,0 +1,36 @@
+"use client";
+import MaskInput from "the-mask-input";
+import { createFreeText } from "./free-text";
+/**
+ * A text input component with advanced masking capabilities.
+ *
+ * Supports various input masks including:
+ * - Currency formatting with locale support
+ * - Percentage inputs
+ * - Custom regex patterns
+ * - Phone numbers, dates, and other formatted inputs
+ *
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input placeholder="Enter text..." />
+ *
+ * // Phone number mask
+ * <Input mask="(99) 99999-9999" placeholder="Phone" />
+ *
+ * // Currency input
+ * <Input mask="currency" currency="USD" locale="en-US" />
+ *
+ * // Percentage input
+ * <Input mask="percentage" />
+ *
+ * // Custom mask
+ * <Input mask={["999.999.999-99"]} placeholder="CPF" />
+ * ```
+ *
+ * @param props - Input props including mask, validation, and styling options
+ * @returns A masked input component with form integration
+ */
+export const Input = createFreeText(MaskInput, "input", {
+    type: "text",
+});

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AASlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA0DF,eAAO,MAAM,WAAW,wGAuavB,CAAC"}
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AASlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA8DF,eAAO,MAAM,WAAW,wGAocvB,CAAC"}

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

@@ -0,0 +1,336 @@
+"use client";
+import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingOverlay, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
+import { CaretDownIcon, XIcon } from "@phosphor-icons/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: 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 VirtualItem({ item, context, ...props }, ref) {
+    return <motion.li {...props} ref={ref} className="last:rounded-t-lg"/>;
+});
+const Item = forwardRef(function VirtualList({ context, ...props }, ref) {
+    return (<motion.ul {...props} role="listbox" ref={ref} className="w-full rounded-b-lg border-b border-tooltip-border last:border-transparent">
+            <AnimatePresence>{props.children}</AnimatePresence>
+        </motion.ul>);
+});
+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 defaults = props.value ?? props.defaultValue ?? EMPTY_VALUES;
+    const translation = useTranslations();
+    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([
+        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 (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);
+    }, []);
+    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);
+    };
+    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;
+    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={props.name || props.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>}>
+                <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 placeholder-input-mask group h-input-height w-full text-base", "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 className="z-floating">
+                            <FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} 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-96 list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", isTopPlacement ? "origin-[bottom_center]" : "origin-[top_center]")}>
+                                    <input autoFocus value={shadow} onChange={onChange} title={props.title} placeholder={translation.multiSelectInnerPlaceholder} className="input placeholder-input-mask group mb-1 h-10 w-full flex-1 rounded-none border-b border-input-border bg-transparent px-input-x py-input-y outline-none transition-colors focus:border-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 setClosed();
+                }
+                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 className="w-full border-b border-tooltip-border last:border-transparent">
+                                            <span className="flex w-full justify-between p-2 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} style={{ height: h }} 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 (<button data-value={option.value} {...getItemProps({
+                        ref: (node) => {
+                            listRef.current[i] = node;
+                        },
+                        role: "option",
+                        type: "button",
+                        "aria-checked": active,
+                        "aria-current": active,
+                        "aria-selected": active,
+                        "aria-disabled": 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 {...option} label={option.label} value={option.value}>
+                                                                {children}
+                                                            </Label>
+                                                        </button>);
+                }}/>
+                                        </motion.div>)}
+                                    <div className="sticky bottom-0 flex w-full flex-nowrap items-center gap-2 overflow-x-auto rounded-b-lg bg-floating-background p-2">
+                                        {value.size === 0 ? (<Tag theme="muted" size="small">
+                                                {translation.autocompleteEmpty}
+                                            </Tag>) : (tags)}
+                                    </div>
+                                </div>
+                            </FloatingFocusManager>
+                        </FloatingOverlay>) : null}
+                </FloatingPortal>
+            </InputField>);
+});

package/dist/components/form/radiobox.js

@@ -1,5 +1,5 @@
 import { jsxs as o, jsx as d } from "react/jsx-runtime";
-import { c as i } from "../../dom-Dl8XH0CK.js";
+import { c as i } from "../../dom-CyQHY7ID.js";
 const n = ({ children: r, className: e = "", size: l, ...a }) => /* @__PURE__ */ o(
   "label",
   {

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.js

@@ -1,9 +1,9 @@
 import { jsx as r, jsxs as a } from "react/jsx-runtime";
 import { forwardRef as R, useRef as E, useImperativeHandle as j, useEffect as z, createElement as A } from "react";
 import { e as D } from "../../CaretDown.es-Cj7klWI3.js";
-import { u as F } from "../../use-translations-BwLKTrZv.js";
-import { i as L, c as $, m as H } from "../../dom-Dl8XH0CK.js";
-import { I as S } from "../../input-field-5vYcz5tT.js";
+import { u as F } from "../../use-translations-DSltA7H_.js";
+import { i as L, c as $, m as H } from "../../dom-CyQHY7ID.js";
+import { I as S } from "../../input-field-CDCOODOl.js";
 const P = R(
   ({
     required: o = !0,

package/dist/components/form/select.jsx

@@ -0,0 +1,42 @@
+"use client";
+import { CaretDownIcon } from "@phosphor-icons/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, hiddenLabel, 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} hiddenLabel={hiddenLabel} 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">
+                            <CaretDownIcon 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 h-10 w-full flex-1 appearance-none rounded-md text-base", "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>);
+});