@g4rcez/components 3.0.0-0 → 3.0.0

package/dist/components/form/date-picker.jsx

@@ -35,8 +35,8 @@ const partValues = {
 };
 const formatParts = (datetimeFormat, date) => {
     try {
-        return datetimeFormat.formatToParts(date).map(x => {
-            if ((x.type === "literal" && x.value === ", ")) {
+        return datetimeFormat.formatToParts(date).map((x) => {
+            if (x.type === "literal" && x.value === ", ") {
                 return { type: x.type, value: " " };
             }
             return x;
@@ -98,18 +98,18 @@ export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate,
     };
     const validDate = isValid(innerDate);
     const htmlValue = validDate ? innerDate.toISOString() : undefined;
-    const CalendarComponent = <Calendar {...props} type={type} locale={locale} changeOnlyOnClick markToday={markToday} onChange={onChangeDate} disabledDate={disabledDate} date={validDate ? innerDate : undefined}/>;
+    const CalendarComponent = (<Calendar {...props} type={type} locale={locale} changeOnlyOnClick markToday={markToday} onChange={onChangeDate} disabledDate={disabledDate} date={validDate ? innerDate : undefined}/>);
     return (<Fragment>
-                <Input {...props} mask={mask} value={value} id={undefined} name={undefined} data-value={htmlValue} formNoValidate={!open} data-target={props.name} data-component="date-picker" onChange={onChangeDateInput} required={props.required ?? true} error={open ? undefined : props.error} placeholder={props.placeholder || translation.datepickerPlaceholder(placeholder)} right={floating ? <Fragment>
-                            <input data-origin={props.name} defaultValue={htmlValue} form={props.form} hidden id={props.name} name={props.name} ref={externalRef} type="date"/>
-                            <Dropdown open={open} onChange={setOpen} buttonProps={{ "aria-describedby": labelId }} trigger={<span aria-labelledby={labelId}>
-                                        <span id={labelId} className="sr-only">
-                                            {translation.datePickerCalendarButtonLabel}
-                                        </span>
-                                        <CalendarIcon />
-                                    </span>}>
-                                {CalendarComponent}
-                            </Dropdown>
-                        </Fragment> : null}/>
+                <Input {...props} mask={mask} value={value} id={undefined} name={undefined} data-value={htmlValue} formNoValidate={!open} data-target={props.name} data-component="date-picker" onChange={onChangeDateInput} required={props.required ?? true} error={open ? undefined : props.error} placeholder={props.placeholder || translation.datepickerPlaceholder(placeholder)} right={floating ? (<Fragment>
+                                <input data-origin={props.name} defaultValue={htmlValue} form={props.form} hidden id={props.name} name={props.name} ref={externalRef} type="date"/>
+                                <Dropdown open={open} onChange={setOpen} buttonProps={{ "aria-describedby": labelId }} trigger={<span aria-labelledby={labelId}>
+                                            <span id={labelId} className="sr-only">
+                                                {translation.datePickerCalendarButtonLabel}
+                                            </span>
+                                            <CalendarIcon />
+                                        </span>}>
+                                    {CalendarComponent}
+                                </Dropdown>
+                            </Fragment>) : null}/>
             </Fragment>);
 });

package/dist/components/form/file-upload.jsx

@@ -47,30 +47,30 @@ const ItemViewer = (props) => {
         props.onDeleteFile?.(props.file);
     };
     const Icon = extensionMap[props.file.name.split(".").at(-1)] ?? FileIcon;
-    const Element = info.type === "img" ? (<img src={info.url} className="object-contain w-full" alt={props.file.name}/>) : (<Icon strokeWidth={2} absoluteStrokeWidth size={48}/>);
-    return (<li className="flex flex-row gap-4 justify-between w-full border-b border-card-border last:border-b-transparent">
+    const Element = info.type === "img" ? (<img src={info.url} className="w-full object-contain" alt={props.file.name}/>) : (<Icon strokeWidth={2} absoluteStrokeWidth size={48}/>);
+    return (<li className="flex w-full flex-row justify-between gap-4 border-b border-card-border last:border-b-transparent">
             <div className="flex flex-col gap-4">
-                <div className="flex flex-row gap-4 items-center">
-                    <button type="button" onClick={onViewFile} className="flex overflow-hidden justify-center items-center max-w-16 m-2 size-16">
+                <div className="flex flex-row items-center gap-4">
+                    <button type="button" onClick={onViewFile} className="m-2 flex size-16 max-w-16 items-center justify-center overflow-hidden">
                         {Element}
                     </button>
-                    <div className="flex flex-col justify-start items-start text-left">
+                    <div className="flex flex-col items-start justify-start text-left">
                         <span>{props.file.name}</span>
                         <span className="text-sm italic">{info.size}</span>
                     </div>
                 </div>
-                {props.File ? (<div className="flex-1 min-w-full">
+                {props.File ? (<div className="min-w-full flex-1">
                         <props.File file={props.file}/>
                     </div>) : null}
             </div>
-            <div className="flex justify-start py-4 transition-colors duration-300 ease-linear align-start hover:text-danger-hover">
-                <button onClick={onDeleteFile} type="button" className="flex justify-center items-center size-6">
+            <div className="align-start flex justify-start py-4 transition-colors duration-300 ease-linear hover:text-danger-hover">
+                <button onClick={onDeleteFile} type="button" className="flex size-6 items-center justify-center">
                     <XIcon size={16}/>
                 </button>
             </div>
         </li>);
 };
-const FilesList = (props) => (<ul className="space-y-8 w-full">
+const FilesList = (props) => (<ul className="w-full space-y-8">
         {props.files.map((file) => {
         return <ItemViewer File={props.File} onDeleteFile={props.onDeleteFile} key={file.name} file={file}/>;
     })}
@@ -78,13 +78,13 @@ const FilesList = (props) => (<ul className="space-y-8 w-full">
 const Idle = (props) => {
     const t = useTranslations();
     const Icon = props.dragging ? FolderOpenIcon : FolderIcon;
-    return (<div className="flex flex-col justify-center items-center">
-            <div className="flex flex-col gap-2 justify-center items-center">
+    return (<div className="flex flex-col items-center justify-center">
+            <div className="flex flex-col items-center justify-center gap-2">
                 <Icon className="text-primary" size={80}/>
             </div>
-            <div className="flex flex-col gap-1 items-center my-4">
+            <div className="my-4 flex flex-col items-center gap-1">
                 <p>{t.uploadIdle}</p>
-                <button className="underline text-primary" type="button">
+                <button className="text-primary underline" type="button">
                     {t.uploadIdleButton}
                 </button>
             </div>

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,4CAuGtC,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,4CAyGtC,CAAC"}

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

@@ -3,7 +3,7 @@ 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, ...props }, ref) => {
+    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);
@@ -33,8 +33,8 @@ export const createFreeText = (Element, elementName, defaultProps, register) =>
                 input.removeEventListener("keydown", goNextInputImpl);
             };
         }, []);
-        return (<InputField {...defaultProps} info={info} left={left} error={error} right={right} loading={loading} form={props.form} name={props.name} feedback={feedback} hideLeft={hideLeft} title={props.title} container={css(container, defaultProps.container)} rightLabel={rightLabel} disabled={props.disabled} interactive={interactive} required={props.required} componentName={elementName} id={props.name || props.id} optionalText={optionalText} labelClassName={labelClassName} placeholder={props.placeholder}>
-                    <Render {...defaultProps} {...props} id={id} name={id} type={type} data-next={next} aria-busy={props.disabled} aria-disabled={props.disabled} aria-readonly={props.readOnly} 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-hidden 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)}/>
+        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={props.disabled} aria-disabled={props.disabled} aria-readonly={props.readOnly} 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

@@ -5,10 +5,11 @@ export type FeedbackProps = React.PropsWithChildren<Partial<{
     id: string;
     info: Label;
     title: Label;
-    hideLeft?: boolean;
-    className?: string;
+    hideLeft: boolean;
+    className: string;
     placeholder: string;
     reportStatus: boolean;
+    hiddenLabel: boolean;
 }>>;
 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, {

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,CACjD,OAAO,CAAC;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC,CACH,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,kEAA0E,aAAa,sBA0CpH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACvF,OAAO,CACL,QAAQ,CACN,aAAa,EACb;IACE,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;CACrB,CACF,CACF,EACD,CAAC,CACF,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,YA6EpH,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,sBAmDpH,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"}

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

@@ -5,50 +5,52 @@ 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("max-w-full justify-between w-fit", hideLeft && children === null ? "hidden" : "flex", className)}>
-    {hideLeft ? null : (<span className="flex flex-1 gap-1 items-center transition-colors group-disabled:text-disabled group-error:text-danger group-hover:text-primary group-focus-within:text-primary">
-        {title}
-        {reportStatus || info ? (<span className="flex gap-1 justify-center items-center">
-            {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} strokeWidth={1} absoluteStrokeWidth/>
-                </span>}>
-                <div id={id ? `tooltip-info-content-${id}` : undefined} className="w-full max-w-48 whitespace-break-spaces wrap-break-word">{info}</div>
-              </Tooltip>) : null}
-            {reportStatus ? (<span className="flex items-center h-3 min-w-6">
-                <CheckCircle className="hidden opacity-0 transition-opacity aspect-square size-3 group-assert:block group-assert:text-success group-assert:opacity-100" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
-                <XCircle className="hidden opacity-0 transition-opacity aspect-square size-3 group-error:block group-error:opacity-100" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
-              </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, }, ref) => {
+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} strokeWidth={1} absoluteStrokeWidth/>
+                                    </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">
+                                <CheckCircle 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} strokeWidth={1} absoluteStrokeWidth/>
+                                <XCircle className="hidden aspect-square size-3 opacity-0 transition-opacity group-error:block group-error:opacity-100" aria-hidden="true" size={16} strokeWidth={1} absoluteStrokeWidth/>
+                            </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 max-w-full min-w-0 flex-col items-start", container)}>
-        <label form={form} htmlFor={ID} className="inline-flex relative flex-row flex-wrap gap-1 justify-between w-full max-w-full text-sm transition-colors cursor-text empty:hidden text-field-label group-disabled:cursor-not-allowed group-error:text-danger">
-          <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 aria-disabled:text-disabled group-hover:text-primary group-focus-within:text-primary">
-                    {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 pl-2 whitespace-nowrap">{left}</span> : null}
-            {children}
-            {right ? <span className="flex flex-nowrap gap-2 pr-2 whitespace-nowrap">{right}</span> : null}
-          </div>
-        </label>
-        <p 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>);
+    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 ? null : (<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 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>);
 });

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,CACrC,eAAe,CAAC,OAAO,CAAC,EACxB;IACE,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;CAC/C,CACF,CAAC;AA0DF,eAAO,MAAM,WAAW,wGAuavB,CAAC"}
+{"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"}

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

@@ -24,9 +24,9 @@ const transitionStyles = {
 };
 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>);
+    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 Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
     return <motion.li {...props} ref={ref} className="last:rounded-t-lg"/>;
@@ -50,10 +50,10 @@ const OverflowControl = (props) => {
             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>);
+            {!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]);
@@ -208,38 +208,38 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                 e.stopPropagation();
                 onSelect(x, i);
             }}>
-            <XIcon size={14}/>
-          </button>}>
-        {x.label ?? x.value}
-      </Tag>));
+                        <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({
+    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}>
+                            <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-hidden 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 text-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({
+    })} 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>
+                            <FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>
+                                <div {...getFloatingProps({
             ref: refs.setFloating,
             style: {
                 ...transitions.styles,
@@ -248,8 +248,8 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                 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-sm border-b transition-colors outline-hidden 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) => {
+        })} data-floating="true" className="shadow-floating isolate z-floating m-0 max-h-96 w-full origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground">
+                                    <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 border-b border-input-border bg-transparent px-input-x py-input-y outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary" onKeyDown={(event) => {
                 if (event.key === "ArrowDown") {
                     let next = index + 1;
                     if (next > displayList.length - 1)
@@ -279,12 +279,12 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                     }
                 }
             }}/>
-                  {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={() => {
+                                    {isEmpty ? (<li role="option" 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} data-floating="true" ref={removeScrollRef} animate={{ height: isEmpty ? "auto" : h }} style={scrollableContainerStyle} className="max-h-72 w-full overscroll-contain" onAnimationComplete={() => {
                     if (!open)
                         return setH(0);
                     const ul = refs.floating.current;
@@ -292,7 +292,7 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                     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) => {
+                                            <Virtuoso ref={virtuoso} hidden={isEmpty} data={displayList} components={components} style={scrollableContainerStyle} 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;
@@ -307,22 +307,22 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                         "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) => {
+                                                            <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>);
+                                                            <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>);
+                                        </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/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,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,oGAyGlB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6D,MAAM,OAAO,CAAC;AAGlF,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,oGA2GlB,CAAC"}

package/dist/components/form/select.jsx

@@ -4,7 +4,7 @@ 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) => {
+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;
@@ -25,14 +25,14 @@ export const Select = forwardRef(({ required = true, options, info, selectContai
         };
     }, []);
     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}>
+    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">
                             <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-hidden transition-colors group-error:text-danger group-error:placeholder-input-mask-error", "data-[selected=false]:text-input-placeholder", props.className)}>
+                <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>

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

package/dist/components/form/slider.jsx

@@ -25,9 +25,9 @@ const Thumb = (props) => {
         observer.observe(html, { attributeFilter: ["aria-valuenow"] });
         return () => observer.disconnect();
     }, []);
-    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-solid active:cursor-grabbing">
-      {float}
-    </Tooltip>);
+    return (<Tooltip title="" ref={ref} as={Base.Thumb} enabled={props.tooltip} className="focus-within::scale-105 block size-5 cursor-grab rounded-full border-2 border-input-border bg-input-switch shadow-shadow-floating focus-within:border-primary focus-within:outline active:cursor-grabbing">
+            {float}
+        </Tooltip>);
 };
 export const Slider = (props) => {
     const { tooltip, className, defaultValue, value, ...restProps } = props;
@@ -35,11 +35,11 @@ export const Slider = (props) => {
     const array = defaultValue || value || [];
     const locale = useLocale();
     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>);
+            <Base.Control className={css("relative flex h-5 w-full touch-none select-none items-center", className)}>
+                <Base.Track className="relative h-2 grow rounded-full 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

@@ -34,8 +34,8 @@ export const Switch = forwardRef(({ children, loading, container, error, ...prop
     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 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-300 ease-in-out focus:outline-hidden 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-sm 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 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>

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

@@ -8,7 +8,7 @@ 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"/>;
+        return <li {...props} ref={ref} className="flex items-center justify-between gap-1"/>;
     }),
     List: forwardRef(function InnerList(props, ref) {
         return <ul {...props} ref={ref} className="space-y-3"/>;
@@ -18,9 +18,9 @@ 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">
+            <div className="flex w-fit min-w-64 flex-col space-y-4 whitespace-nowrap rounded-lg border border-card-border py-8">
                 <header className="border-b border-card-border pb-2"></header>
-                <div className="px-8 space-y-2">
+                <div className="space-y-2 px-8">
                     <Input rightLabel="" title="Search" placeholder="Looking for..."/>
                     <Virtuoso height={h} useWindowScroll data={props.source} components={components} itemContent={(_, row) => (<Fragment>
                                 <Checkbox>

package/dist/components/index.d.ts

@@ -39,6 +39,8 @@ export * from "./form/transfer-list";
 export * from "./core/render-on-view";
 export * from "./display/notifications";
 export * from "./floating/command-palette";
+export { CommandPalette as Commander } from "./floating/command-palette";
+export * from "./page-calendar";
 export { formReset } from "./form/formReset";
 export { createColumns, createOptionCols, type ColType, useTablePreferences, type TablePagination } from "./table/table-lib";
 //# sourceMappingURL=index.d.ts.map

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,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,cAAc,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACzE,cAAc,iBAAiB,CAAC;AAChC,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"}