@g4rcez/components 0.0.38 → 0.0.40

package/dist/src/components/form/date-picker.js

@@ -0,0 +1,78 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format, isValid, parse, startOfDay } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { forwardRef, Fragment, useId, useMemo, useState } from "react";
+import { Is } from "sidekicker";
+import { useTranslations } from "../../hooks/use-translate-context";
+import { Calendar } from "../display/calendar";
+import { Dropdown } from "../floating/dropdown";
+import { Input } from "./input";
+const fixedDate = new Date(1970, 11, 31);
+const parts = {
+    year: () => [/\d/, /\d/, /\d/, /\d/],
+    month: () => [/\d/, /\d/],
+    day: () => [/\d/, /\d/],
+    literal: (str) => str.split(""),
+};
+const placeholders = {
+    year: () => "yyyy",
+    month: () => "MM",
+    day: () => "dd",
+    literal: (str) => str,
+};
+const partValues = {
+    literal: (date, str) => str,
+    year: (date) => date.getFullYear(),
+    day: (date) => date.getDate().toString().padStart(2, "0"),
+    month: (date) => (date.getMonth() + 1).toString().padStart(2, "0"),
+};
+const formatParts = (datetimeFormat, date) => {
+    try {
+        return datetimeFormat.formatToParts(date);
+    }
+    catch (e) {
+        return [];
+    }
+};
+export const DatePicker = forwardRef((_a, externalRef) => {
+    var _b;
+    var { date, locale, disabledDate, onChange, markToday } = _a, props = __rest(_a, ["date", "locale", "disabledDate", "onChange", "markToday"]);
+    const labelId = useId();
+    const translation = useTranslations();
+    const datetimeFormat = useMemo(() => new Intl.DateTimeFormat(locale), [locale]);
+    const [innerDate, setInnerDate] = useState(date || undefined);
+    const [open, setOpen] = useState(false);
+    const mask = formatParts(datetimeFormat, fixedDate).flatMap((x) => (Is.keyof(parts, x.type) ? parts[x.type](x.value) : []));
+    const placeholder = formatParts(datetimeFormat, fixedDate).reduce((acc, x) => acc + (Is.keyof(placeholders, x.type) ? placeholders[x.type](x.value) : ""), "");
+    const [value, setValue] = useState(!innerDate
+        ? ""
+        : formatParts(datetimeFormat, innerDate).reduce((acc, x) => acc + (Is.keyof(parts, x.type) ? partValues[x.type](innerDate, x.value) : ""), ""));
+    const onChangeDateInput = (e) => {
+        const v = e.target.value;
+        setValue(v);
+        if (mask.length === v.length) {
+            const matches = mask.every((x, i) => {
+                const c = v.charAt(i);
+                return typeof x === "string" ? c === x : x.test(c);
+            });
+            if (matches) {
+                const d = startOfDay(parse(v, placeholder, new Date()));
+                setInnerDate(d);
+                return onChange === null || onChange === void 0 ? void 0 : onChange(d);
+            }
+        }
+        setInnerDate(undefined);
+        return onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+    };
+    const onChangeDate = (d) => {
+        setInnerDate(d);
+        onChange === null || onChange === void 0 ? void 0 : onChange(d);
+        if (d)
+            return setValue(format(d, placeholder));
+        return setValue("");
+    };
+    const validDate = isValid(innerDate);
+    const htmlValue = validDate ? innerDate.toISOString() : undefined;
+    return (_jsx(Input, Object.assign({}, props, { mask: mask, value: value, "data-value": htmlValue, "data-target": props.name, className: "uppercase", formNoValidate: !open, placeholder: placeholder, onChange: onChangeDateInput, required: (_b = props.required) !== null && _b !== void 0 ? _b : true, error: open ? undefined : props.error, name: undefined, id: undefined, right: _jsxs(Fragment, { children: [_jsx("input", { "data-origin": props.name, hidden: true, type: "date", id: props.name, ref: externalRef, name: props.name, defaultValue: htmlValue }), _jsx(Dropdown, { open: open, onChange: setOpen, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), buttonProps: { "aria-describedby": labelId }, children: _jsx(Calendar, Object.assign({}, props, { locale: locale, changeOnlyOnClick: true, markToday: markToday, onChange: onChangeDate, disabledDate: disabledDate, date: validDate ? innerDate : undefined })) })] }) })));
+});

package/dist/src/components/form/file-upload.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { DropzoneProps } from "react-dropzone";
+import { Override } from "sidekicker";
+type Props = Override<React.ComponentProps<"input">, DropzoneProps> & {
+    onDeleteFile?: (file: File) => void;
+    files?: File[];
+    idle?: React.ReactElement;
+    onDrop?: (file: File[]) => void;
+};
+export declare const FileUpload: ({ idle, onDeleteFile, onDrop, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/src/components/form/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../../src/components/form/file-upload.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,GAAG;IAClE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACnC,CAAC;AAmGF,eAAO,MAAM,UAAU,6CAA4D,KAAK,4CAiBvF,CAAC"}

package/dist/src/components/form/file-upload.js

@@ -0,0 +1,62 @@
+"use client";
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileIcon, Trash2Icon, UploadIcon } from "lucide-react";
+import prettyBytes from "pretty-bytes";
+import { Fragment, useEffect, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Button } from "../core/button";
+const mime = {
+    isImage: (file) => file.type.includes("image"),
+};
+const FileViewer = (props) => {
+    const [info, setInfo] = useState({ url: "", type: "", size: "" });
+    useEffect(() => {
+        if (mime.isImage(props.file)) {
+            const url = URL.createObjectURL(props.file);
+            setInfo({ url, type: "img", size: prettyBytes(props.file.size) });
+            return () => {
+                URL.revokeObjectURL(url);
+            };
+        }
+        setInfo({ url: "", type: props.file.type, size: prettyBytes(props.file.size) });
+    }, [props.file]);
+    if (info.type === "img") {
+        return (_jsxs("div", { className: "flex flex-row gap-jade-200 items-center justify-between w-full", children: [_jsxs("header", { className: "flex flex-row gap-jade-200 items-center", children: [_jsx("img", { src: info.url, className: "size-jade-500 rounded-jade-xsmall", alt: `Miniatura do arquivo ${props.file.name}` }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: props.file.name }), _jsx("span", { children: info.size })] })] }), _jsx(Button, { className: "isolate", type: "button", theme: "raw", onClick: (e) => {
+                        var _a;
+                        e.stopPropagation();
+                        (_a = props.onDeleteFile) === null || _a === void 0 ? void 0 : _a.call(props, props.file);
+                    }, children: _jsx(Trash2Icon, {}) })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-row gap-jade-200 items-center justify-between w-full", children: [_jsxs("header", { className: "flex flex-row gap-4 items-center", children: [_jsx(FileIcon, { size: 48 }), _jsxs("div", { className: "flex flex-col text-left justify-start items-start", children: [_jsx("span", { children: props.file.name }), _jsx("span", { children: info.size })] })] }), _jsx(Button, { className: "isolate", type: "button", theme: "raw", onClick: (e) => {
+                    var _a;
+                    e.stopPropagation();
+                    (_a = props.onDeleteFile) === null || _a === void 0 ? void 0 : _a.call(props, props.file);
+                }, children: _jsx(Trash2Icon, { className: "text-danger" }) })] }));
+};
+const DefaultViewer = (props) => {
+    return (_jsx("ul", { className: "w-full space-y-jade-200", children: props.files.map((file) => {
+            return _jsx(FileViewer, { onDeleteFile: props.onDeleteFile, file: file }, file.name);
+        }) }));
+};
+const InteractiveArea = (props) => {
+    if (props.isDragActive) {
+        return _jsx("p", { children: "Solte os arquivos selecionados" });
+    }
+    if (props.files.length > 0) {
+        return _jsx(DefaultViewer, { onDeleteFile: props.onDeleteFile, files: props.files });
+    }
+    return _jsx(Fragment, { children: props.idle });
+};
+const DefaultIdle = (_jsxs("div", { className: "flex flex-col gap-4 justify-center items-center", children: [_jsx(UploadIcon, { size: 64 }), _jsxs("p", { children: ["You can drag your files or", " ", _jsx("button", { className: "text-primary underline", type: "button", children: "drag to here" })] })] }));
+export const FileUpload = (_a) => {
+    var _b, _c;
+    var { idle = DefaultIdle, onDeleteFile, onDrop } = _a, props = __rest(_a, ["idle", "onDeleteFile", "onDrop"]);
+    const [files, setFiles] = useState([]);
+    const drop = (x) => {
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(x);
+        setFiles(x);
+    };
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: drop });
+    return (_jsxs("div", Object.assign({}, getRootProps(), { "data-active": ((_b = props.files) === null || _b === void 0 ? void 0 : _b.length) ? props.files.length > 0 : false, className: "flex text-foreground flex-col items-center justify-center border-2 rounded-lg p-6 border-card-border data-[active=true]:bg-card-background data-[active=true]:border-solid data-[active=false]:border-dashed", children: [_jsx("input", Object.assign({}, getInputProps(props), { name: props.name, id: props.name })), _jsx(InteractiveArea, { onDeleteFile: onDeleteFile, isDragActive: isDragActive, idle: idle, files: (_c = props.files) !== null && _c !== void 0 ? _c : files })] })));
+};

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

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const formReset: (form?: HTMLFormElement | null) => void;
+export declare const Form: (props: React.ComponentProps<"form">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS,UAAW,eAAe,GAAG,IAAI,SAatD,CAAC;AAEF,eAAO,MAAM,IAAI,UAAW,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,4CAOvD,CAAC"}

package/dist/src/components/form/form.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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");
+    });
+};
+export const Form = (props) => {
+    const onSubmit = (e) => {
+        var _a;
+        e.persist();
+        e.preventDefault();
+        (_a = props.onSubmit) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    return _jsx("form", Object.assign({}, props, { onSubmit: onSubmit }));
+};

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

@@ -0,0 +1,30 @@
+import React, { PropsWithChildren } from "react";
+import { Label } from "../../types";
+import { PolymorphicProps } from "../core/polymorph";
+export type FeedbackProps = React.PropsWithChildren<Partial<{
+    info: Label;
+    title: Label;
+    hideLeft?: boolean;
+    className?: string;
+    placeholder: string;
+    reportStatus: boolean;
+}>>;
+export declare const InputFeedback: ({ reportStatus, hideLeft, className, info, children, title }: FeedbackProps) => import("react/jsx-runtime").JSX.Element;
+export type InputFieldProps<T extends "input" | "select"> = PolymorphicProps<Partial<{
+    info: Label;
+    labelClassName: string;
+    error: string;
+    hideLeft: boolean;
+    interactive: boolean;
+    container: string;
+    left: Label;
+    feedback: Label;
+    optionalText: string;
+    right: Label;
+    rightLabel: Label;
+    id: string;
+    name: string;
+    placeholder: string;
+}>, T>;
+export declare const InputField: <T extends "input" | "select">({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName, name, title, placeholder, hideLeft, required, }: PropsWithChildren<InputFieldProps<T>>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-field.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAC/C,OAAO,CAAC;IACJ,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;CACzB,CAAC,CACL,CAAC;AAEF,eAAO,MAAM,aAAa,iEAA0E,aAAa,4CA2ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,IAAI,gBAAgB,CACxE,OAAO,CAAC;IACJ,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,CAAC,EACF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,OAAO,GAAG,QAAQ,8LAmBpD,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,4CAqCvC,CAAC"}

package/dist/src/components/form/input-field.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, InfoIcon, XCircle } from "lucide-react";
+import { Fragment } from "react";
+import { useTranslations } from "../../hooks/use-translate-context";
+import { css } from "../../lib/dom";
+import { Tooltip } from "../floating/tooltip";
+export const InputFeedback = ({ reportStatus, hideLeft = false, className, info, children, title }) => (_jsxs("div", { className: css("w-full justify-between", hideLeft && children === null ? "hidden" : "flex", className), children: [hideLeft ? null : (_jsxs("span", { className: "flex items-center gap-1 transition-colors group-focus-within:text-primary group-hover:text-primary group-error:text-danger", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex items-center justify-center gap-1", children: [info ? (_jsx(Tooltip, { title: _jsxs("span", { className: "cursor-help", children: [_jsx("span", { className: "sr-only", children: info }), _jsx(InfoIcon, { className: "aspect-square size-3", "aria-hidden": "true", size: 16, strokeWidth: 1, absoluteStrokeWidth: true })] }), children: info })) : null, reportStatus ? (_jsxs(Fragment, { children: [_jsx(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: true }), _jsx(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: true })] })) : null] })) : null] })), children] }));
+export const InputField = ({ optionalText: _optionalText, left, rightLabel, container, feedback, interactive, right, info, children, error, form, id, labelClassName = "", name, title, placeholder, hideLeft, required, }) => {
+    const ID = id !== null && id !== void 0 ? id : name;
+    const translation = useTranslations();
+    const optionalText = _optionalText !== null && _optionalText !== void 0 ? _optionalText : translation.inputOptionalLabel;
+    return (_jsxs("fieldset", { form: form, "data-error": !!error, "data-interactive": !!interactive, className: css("group inline-flex w-full gap-input-gap", container), children: [_jsxs("label", { form: form, htmlFor: ID, className: "inline-flex w-full cursor-text flex-row flex-wrap justify-between gap-1 text-sm transition-colors empty:hidden group-hover:border-primary group-error:text-danger", children: [!hideLeft && !rightLabel ? (_jsx(InputFeedback, { info: info, hideLeft: hideLeft, reportStatus: true, title: title, placeholder: placeholder, children: optionalText || rightLabel ? (_jsxs(Fragment, { children: [!required ? _jsx("span", { className: "text-opacity-70", children: optionalText }) : null, rightLabel ? _jsx(Fragment, { children: rightLabel }) : null] })) : null })) : null, _jsxs("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-focus-within:border-primary group-hover:border-primary group-error:border-danger ${labelClassName} focus:ring-2 focus:ring-inset focus:ring-primary`, children: [left ? _jsx("span", { className: "absolute left-0 flex flex-nowrap gap-1 whitespace-nowrap pl-2", children: left }) : null, children, right ? _jsx("span", { className: "absolute right-0 flex flex-nowrap gap-2 whitespace-nowrap pr-1", children: right }) : null] })] }), _jsx("p", { className: "hidden text-xs empty:hidden group-has-[input:not(:focus):invalid[data-initialized=true]]:block group-error:block group-error:text-danger", children: error }), _jsx("p", { className: "text-xs empty:mt-0 empty:hidden group-has-[input:not(:focus):valid[data-initialized=true]]:block group-assert:block group-error:hidden", children: feedback })] }));
+};

package/dist/src/components/form/input.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { TheMaskProps } from "the-mask-input";
+import { Override } from "../../types";
+import { FeedbackProps, InputFieldProps } from "./input-field";
+export type InputProps = Override<InputFieldProps<"input">, TheMaskProps & FeedbackProps & {
+    next?: string;
+}>;
+export declare const Input: React.FC<InputProps>;
+//# sourceMappingURL=input.d.ts.map

package/dist/src/components/form/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE9G,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoF/B,CAAC"}

package/dist/src/components/form/input.js

@@ -0,0 +1,38 @@
+"use client";
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import MaskInput from "the-mask-input";
+import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
+import { InputField } from "./input-field";
+export const Input = forwardRef((_a, ref) => {
+    var _b;
+    var { type = "text", feedback = null, info, labelClassName, next, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error } = _a, props = __rest(_a, ["type", "feedback", "info", "labelClassName", "next", "interactive", "rightLabel", "optionalText", "container", "hideLeft", "right", "left", "error"]);
+    const id = (_b = props.id) !== null && _b !== void 0 ? _b : props.name;
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current === null)
+            return;
+        const input = inputRef.current;
+        const focus = initializeInputDataset(inputRef.current);
+        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 () => {
+            focus();
+            input.removeEventListener("keydown", goNextInputImpl);
+        };
+    }, []);
+    return (_jsx(InputField, { info: info, container: css("group inline-block w-full", container), error: error, feedback: feedback, hideLeft: hideLeft, left: left, optionalText: optionalText, right: right, rightLabel: rightLabel, interactive: interactive, form: props.form, id: props.name || props.id, name: props.name, labelClassName: labelClassName, title: props.title, placeholder: props.placeholder, required: props.required, children: _jsx(MaskInput, Object.assign({}, props, { type: type, "data-next": next, ref: mergeRefs(ref, inputRef), id: id, name: id, className: css("input  placeholder-input-mask h-input-height px-input-x py-input-y group w-full flex-1 rounded-md bg-transparent text-foreground outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!right ? "pe-input-inline" : "", !!left ? "ps-input-inline" : "", props.className) })) }));
+});

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

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

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

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

package/dist/src/components/form/radiobox.js

@@ -0,0 +1,7 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "../../lib/dom";
+export const Radiobox = (_a) => {
+    var { children, className = "", size } = _a, props = __rest(_a, ["children", "className", "size"]);
+    return (_jsxs("label", { "data-disabled": props.disabled, "aria-disabled": props.disabled, className: "group font-normal flex items-center gap-2 data-[disabled=true]:cursor-not-allowed", children: [_jsx("input", Object.assign({}, props, { type: "radio", className: css("form-radio rounded-full h-4 w-4 app border-card-border text-primary focus:ring-primary appearance-none inline-block bg-origin-border group-aria-disabled:cursor-not-allowed disabled:opacity-70", className) }, props)), children] }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select.tsx"],"names":[],"mappings":"AAEA,OAAO,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,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE/G,MAAM,MAAM,WAAW,GAAG,QAAQ,CAC9B,eAAe,CAAC,QAAQ,CAAC,EACzB;IACI,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEP,eAAO,MAAM,MAAM,oGA4FlB,CAAC"}

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

@@ -0,0 +1,33 @@
+"use client";
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useTranslations } from "../../hooks/use-translate-context";
+import { css, initializeInputDataset, mergeRefs } from "../../lib/dom";
+import { InputField } from "./input-field";
+export const Select = forwardRef((_a, ref) => {
+    var _b;
+    var { required = true, options, info, selectContainer = "", feedback = null, labelClassName, interactive, rightLabel, optionalText, container, hideLeft = false, right, left, error } = _a, props = __rest(_a, ["required", "options", "info", "selectContainer", "feedback", "labelClassName", "interactive", "rightLabel", "optionalText", "container", "hideLeft", "right", "left", "error"]);
+    const translation = useTranslations();
+    const inputRef = useRef(null);
+    const id = (_b = props.id) !== null && _b !== void 0 ? _b : props.name;
+    useImperativeHandle(ref, () => inputRef.current);
+    useEffect(() => {
+        if (inputRef.current === null)
+            return;
+        const input = inputRef.current;
+        const focus = initializeInputDataset(inputRef.current);
+        const change = () => input.setAttribute("data-selected", "true");
+        input.addEventListener("change", change);
+        return () => {
+            focus();
+            input.removeEventListener("change", change);
+        };
+    }, []);
+    const onClickLabel = () => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
+    return (_jsx(InputField, { container: css("group inline-block w-full", container), error: error, feedback: feedback, hideLeft: hideLeft, left: left, info: info, optionalText: optionalText, rightLabel: rightLabel, interactive: interactive, form: props.form, id: props.name || props.id, name: props.name, labelClassName: labelClassName, title: props.title, placeholder: props.placeholder, required: required, right: _jsx("label", { htmlFor: id, children: _jsxs("button", { onClick: onClickLabel, type: "button", className: "mt-2 transition-colors hover:text-primary", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }) }), children: _jsxs("select", Object.assign({}, props, { id: id, name: id, value: props.value, required: required, ref: mergeRefs(ref, inputRef), "data-selected": !!props.value || false, defaultValue: props.value ? undefined : "", className: css("input appearance-none select group h-10 py-1 px-2 w-full flex-1 rounded-md bg-transparent 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), children: [_jsx("option", { value: "", disabled: true, hidden: true, children: props.placeholder }), options.map((option) => {
+                    var _a;
+                    return (_jsx("option", Object.assign({}, option, { children: (_a = option.label) !== null && _a !== void 0 ? _a : option.value }), `${id}-select-option-${option.value}`));
+                })] })) }));
+});

package/dist/src/components/form/switch.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type SwitchProps = React.ComponentProps<"input"> & {
+    error?: string;
+    container?: string;
+    onCheck?: (nextValue: boolean) => void;
+};
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=switch.d.ts.map

package/dist/src/components/form/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8E,MAAM,OAAO,CAAC;AAInG,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,MAAM,mGAiEjB,CAAC"}

package/dist/src/components/form/switch.js

@@ -0,0 +1,39 @@
+"use client";
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { useCallbackRef } from "../../hooks/use-callback-ref";
+import { css } from "../../lib/dom";
+export const Switch = forwardRef((_a, ref) => {
+    var _b;
+    var { children, container, error } = _a, props = __rest(_a, ["children", "container", "error"]);
+    const id = useId();
+    const [innerChecked, setInnerChecked] = useState((_b = props.checked) !== null && _b !== void 0 ? _b : false);
+    const checked = innerChecked;
+    const innerRef = useRef(null);
+    const stableOnChange = useCallbackRef(props.onChange);
+    useImperativeHandle(ref, () => innerRef.current);
+    useEffect(() => {
+        if (innerRef.current !== null) {
+            if (stableOnChange.current) {
+                const onChange = (e) => {
+                    e.target.checked = !e.target.checked;
+                    stableOnChange.current && stableOnChange.current(e);
+                };
+                innerRef.current.addEventListener("change", onChange);
+                return () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", onChange); };
+            }
+        }
+    }, []);
+    const onCheck = () => {
+        var _a, _b;
+        const checked = !((_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.checked);
+        setInnerChecked(checked);
+        (_b = props === null || props === void 0 ? void 0 : props.onCheck) === null || _b === void 0 ? void 0 : _b.call(props, checked);
+        if (innerRef.current !== null) {
+            innerRef.current.checked = checked;
+            innerRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+        }
+    };
+    return (_jsxs("fieldset", { className: css("flex flex-wrap items-center", container), children: [_jsx("input", Object.assign({}, props, { checked: checked, "data-checked": checked, "data-trigger": "change", hidden: true, id: props.id || id, onChange: (e) => setInnerChecked(e.target.checked), ref: innerRef, type: "checkbox" })), _jsx("button", { type: "button", role: "switch", onClick: onCheck, "aria-checked": checked, "data-checked": checked, "aria-labelledby": `${id}-label`, 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", children: _jsx("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" }) }), _jsx("label", { htmlFor: props.id || id, className: "ml-3 inline-block text-sm", id: `${id}-label`, children: _jsx("span", { className: "font-medium text-foreground", children: children }) }), _jsx("span", { className: "mt-1 flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden", children: error })] }));
+});

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

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

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

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

package/dist/src/components/form/task-list.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { stagger, useAnimate } from "framer-motion";
+import { useEffect } from "react";
+export const TaskList = (props) => {
+    const [ref, animate] = useAnimate();
+    useEffect(() => {
+        const container = ref.current;
+        if (!container)
+            return;
+        const handler = (e) => {
+            const input = e.target;
+            const items = Array.from(container.querySelectorAll("input"));
+            const allTaskChecked = items.every((el) => el.checked && el.getAttribute("data-task") === "true");
+            const index = items.indexOf(input);
+            if (allTaskChecked && index !== -1) {
+                animate("input", { scale: [1, 1.35, 1], rotate: [0, 10, -10, 0] }, {
+                    duration: 0.5,
+                    delay: stagger(0.075, { from: index }),
+                });
+            }
+        };
+        container.addEventListener("change", handler);
+        return () => container.removeEventListener("change", handler);
+    }, []);
+    return _jsx("fieldset", Object.assign({}, props, { ref: ref }));
+};

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { POJO, SetState } from "../../types";
+export type TransferListProps<T> = {
+    source: T[];
+    target: T[];
+    Item: React.FC<{
+        data: T;
+    }>;
+    reference: keyof T;
+    setSource: SetState<T[]>;
+    setTarget: SetState<T[]>;
+};
+export declare const TransferList: <T extends POJO, K extends keyof T>(props: TransferListProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=transfer-list.d.ts.map

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

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

package/dist/src/components/form/transfer-list.js

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

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

@@ -0,0 +1,30 @@
+export * from "./core/button";
+export * from "./core/polymorph";
+export * from "./core/tag";
+export * from "./display/alert";
+export * from "./display/calendar";
+export * from "./display/card";
+export * from "./display/stats";
+export * from "./display/tabs";
+export * from "./floating/dropdown";
+export * from "./floating/expand";
+export * from "./floating/menu";
+export * from "./floating/modal";
+export * from "./floating/toolbar";
+export * from "./floating/tooltip";
+export * from "./form/autocomplete";
+export * from "./form/checkbox";
+export * from "./form/date-picker";
+export * from "./form/file-upload";
+export * from "./form/form";
+export * from "./form/input";
+export * from "./form/input-field";
+export * from "./form/radiobox";
+export * from "./form/select";
+export * from "./form/select";
+export * from "./form/switch";
+export * from "./form/task-list";
+export * from "./form/transfer-list";
+export * from "./table/index";
+export { createColumns, createOptionCols, type ColType, useTablePreferences, type TablePagination } from "./table/table-lib";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/src/components/index.js

@@ -0,0 +1,29 @@
+export * from "./core/button";
+export * from "./core/polymorph";
+export * from "./core/tag";
+export * from "./display/alert";
+export * from "./display/calendar";
+export * from "./display/card";
+export * from "./display/stats";
+export * from "./display/tabs";
+export * from "./floating/dropdown";
+export * from "./floating/expand";
+export * from "./floating/menu";
+export * from "./floating/modal";
+export * from "./floating/toolbar";
+export * from "./floating/tooltip";
+export * from "./form/autocomplete";
+export * from "./form/checkbox";
+export * from "./form/date-picker";
+export * from "./form/file-upload";
+export * from "./form/form";
+export * from "./form/input";
+export * from "./form/input-field";
+export * from "./form/radiobox";
+export * from "./form/select";
+export * from "./form/select";
+export * from "./form/switch";
+export * from "./form/task-list";
+export * from "./form/transfer-list";
+export * from "./table/index";
+export { createColumns, createOptionCols, useTablePreferences } from "./table/table-lib";