@g4rcez/components 0.0.18 → 0.0.19

package/dist/components/core/resizable.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const Resizable: ({ children }: React.PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=resizable.d.ts.map

package/dist/components/core/resizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/core/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,SAAS,iBAAkB,KAAK,CAAC,iBAAiB,4CAO9D,CAAC"}

package/dist/components/core/resizable.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import useMeasure from "react-use-measure";
+export const Resizable = ({ children }) => {
+    const [ref, bounds] = useMeasure();
+    return (_jsx(motion.div, { animate: { height: bounds.height > 0 ? bounds.height : 'auto' }, children: _jsx("div", { ref: ref, children: children }) }));
+};

package/dist/components/display/calendar.d.ts

@@ -0,0 +1,11 @@
+import { Locales } from "the-mask-input";
+type CalendarProps = {
+    date?: Date;
+    locale?: Locales;
+    markToday?: boolean;
+    autoFocusToday?: boolean;
+    onChange?: (d: Date) => void;
+};
+export declare const Calendar: ({ locale, markToday, autoFocusToday, date, onChange }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/display/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAmBvD,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC,CAAC;AAmDF,eAAO,MAAM,QAAQ,0DAAyE,aAAa,4CA0L1G,CAAC"}

package/dist/components/display/calendar.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { addDays, addMonths, addWeeks, addYears, eachDayOfInterval, endOfWeek, isSameMonth, isToday, startOfDay, startOfMonth, startOfWeek, subDays, subMonths, subWeeks, subYears, } from "date-fns";
+import { AnimatePresence, motion, MotionConfig } from "framer-motion";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { useEffect } from "react";
+import { Is } from "sidekicker";
+import TheMaskInput from "the-mask-input";
+import { useReducer } from "use-typed-reducer";
+import { useDebounce } from "../../hooks/use-debounce";
+import { Resizable } from "../core/resizable";
+const transition = { type: "tween", bounce: 0.15, duration: 0.3 };
+const dir = (mod) => (n = 1) => ({ x: `${100 * mod * n}%`, opacity: 0.5 });
+const variants = {
+    middle: { x: "0%", opacity: 1 },
+    enter: dir(1),
+    exit: dir(-1),
+};
+const removeImmediately = { exit: { visibility: "hidden" } };
+const createDays = (month) => {
+    const start = startOfWeek(startOfMonth(month));
+    return eachDayOfInterval({ start, end: addDays(start, 41) });
+};
+const formatMonth = (d, locale) => d.toLocaleDateString(locale, { month: "long" });
+const getOptionsMonth = (date, locale) => Array.from({ length: 12 }).map((_, i) => {
+    const month = startOfMonth(new Date(date).setMonth(i));
+    const label = formatMonth(month, locale);
+    return (_jsx("option", { value: label, "data-index": i, children: label }, label));
+});
+const onChangeUsingKeyboard = {
+    ArrowLeft: (date, duration) => {
+        if (duration === "days")
+            return subDays(date, 1);
+        return subMonths(date, 1);
+    },
+    ArrowRight: (date, duration) => {
+        if (duration === "days")
+            return addDays(date, 1);
+        return addMonths(date, 1);
+    },
+    ArrowUp: (date, duration) => {
+        if (duration === "days")
+            return subWeeks(date, 1);
+        return subYears(date, 1);
+    },
+    ArrowDown: (date, duration) => {
+        if (duration === "days")
+            return addWeeks(date, 1);
+        return addYears(date, 1);
+    },
+};
+const focusDate = (next, delay = 0) => {
+    const d = next.toISOString();
+    const select = () => {
+        const element = document.querySelector(`button[data-date="${d}"]`);
+        if (element)
+            return element.focus({ preventScroll: false });
+    };
+    if (delay === 0)
+        select();
+    setTimeout(select, delay);
+};
+const formatYear = (now) => now.getFullYear().toString().padStart(4, "0");
+export const Calendar = ({ locale, markToday = true, autoFocusToday = true, date, onChange }) => {
+    const now = date || new Date();
+    const [state, dispatch] = useReducer({
+        date: now,
+        isAnimating: false,
+        year: formatYear(now),
+        direction: undefined,
+        months: getOptionsMonth(now, locale),
+        week: eachDayOfInterval({ start: startOfWeek(now), end: endOfWeek(now) }),
+    }, (get) => ({
+        onChangeYear: (year) => ({ year }),
+        setToday: () => ({ date: startOfDay(new Date()) }),
+        onExitComplete: () => {
+            focusDate(get.state().date, 200);
+            return { isAnimating: false };
+        },
+        date: (callback) => {
+            const newDate = callback(get.state().date);
+            return { date: newDate, year: formatYear(newDate) };
+        },
+        nextMonth: () => {
+            const state = get.state();
+            if (state.isAnimating)
+                return state;
+            const date = addMonths(state.date, 1);
+            return { date, isAnimating: true, direction: 1, year: formatYear(date) };
+        },
+        previousMonth: () => {
+            const state = get.state();
+            if (state.isAnimating)
+                return state;
+            const date = subMonths(state.date, 1);
+            return { date, isAnimating: true, direction: -1, year: formatYear(date) };
+        },
+        onSelectDate: (e) => {
+            const d = e.currentTarget.dataset.date || "";
+            const date = new Date(d);
+            return { date, year: formatYear(date) };
+        },
+        onChangeMonth: (e) => {
+            const value = e.target.value;
+            const array = Array.from(e.target.options);
+            const month = array.find((x) => x.value === value);
+            if (month) {
+                const i = month.dataset.index || "";
+                const d = new Date(get.state().date);
+                d.setMonth(+i);
+                return { date: d, year: formatYear(d) };
+            }
+            return get.state();
+        },
+        onKeyDown: (e) => {
+            const key = e.key;
+            if (key in onChangeUsingKeyboard) {
+                if (key === "ArrowUp" || key === "ArrowDown")
+                    e.preventDefault();
+                const prev = get.state().date;
+                const date = Is.keyof(onChangeUsingKeyboard, key) ? onChangeUsingKeyboard[key](prev, e.shiftKey ? "month" : "days") : null;
+                if (date !== null) {
+                    focusDate(date);
+                    return { date, year: formatYear(date) };
+                }
+            }
+            return get.state();
+        },
+    }));
+    const days = createDays(state.date);
+    const currentAsString = state.date.toISOString();
+    const monthString = formatMonth(state.date, locale);
+    useEffect(() => onChange === null || onChange === void 0 ? void 0 : onChange(state.date), [currentAsString]);
+    const defer = useDebounce((y) => {
+        dispatch.date((prev) => {
+            const d = new Date(prev);
+            d.setFullYear(+y);
+            return d;
+        });
+    }, 700);
+    const onChangeYear = (e) => {
+        const value = e.currentTarget.value;
+        dispatch.onChangeYear(value);
+        defer(value);
+    };
+    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { className: "relative overflow-hidden", children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(Resizable, { children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { onClick: dispatch.previousMonth, variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary-subtle", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { variants: variants, custom: state.direction, className: "absolute z-normal isolate inset-0 flex items-center justify-center font-semibold", children: _jsxs("span", { className: "w-fit flex items-center justify-center gap-0.5 py-1", children: [_jsx("select", { style: { width: `${monthString.length}ch` }, value: monthString, onChange: dispatch.onChangeMonth, className: "appearance-none capitalize bg-transparent proportional-nums hover:text-primary cursor-pointer w-fit", children: state.months }), _jsx(TheMaskInput, { mask: "int", value: state.year, maxLength: 4, placeholder: "YYYY", onChange: onChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 bg-transparent appearance-none hover:text-primary cursor-pointer" })] }) }), _jsx(motion.button, { variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary-subtle", onClick: dispatch.nextMonth, children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: {
+                                                    backgroundImage: "linear-gradient(to right, hsla(var(--card-background)) 15%, transparent 30%, transparent 70%, hsla(var(--card-background)) 85%)",
+                                                } })] }), _jsx("div", { className: "mt-4 grid grid-cols-7 gap-y-4", children: state.week.map((dayOfWeek) => (_jsx("span", { className: "font-medium capitalize text-sm", children: dayOfWeek.toLocaleDateString(locale, { weekday: "short" }) }, dayOfWeek.toString()))) }), _jsx(motion.ul, { onKeyDown: dispatch.onKeyDown, variants: variants, custom: state.direction, className: "mt-4 pb-2 grid grid-cols-7 gap-y-4", children: days.map((day) => {
+                                            const key = day.toISOString();
+                                            const isSelected = key === currentAsString;
+                                            const today = isToday(day) && markToday;
+                                            return (_jsx("li", { className: "w-full flex items-center justify-center", children: _jsx("button", { type: "button", "data-date": key, onClick: dispatch.onSelectDate, "data-view": state.date.getMonth().toString(), className: `size-8 rounded-full font-semibold flex items-center justify-center proportional-nums ${today ? "text-primary" : ""} ${isSameMonth(day, state.date) ? "" : "text-disabled"} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, children: day.getDate() }) }, key));
+                                        }) })] }, monthString) }) }) }), _jsx("footer", { className: "text-center text-primary mt-2", children: _jsx("button", { type: "button", onClick: dispatch.setToday, children: "Today" }) })] }) }));
+};

package/dist/components/display/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAEzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,MAAM,MAAM,SAAS,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAI/F,eAAO,MAAM,IAAI,UAAW,iBAAiB,CAAC,SAAS,CAAC,4CAgGvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpD,eAAO,MAAM,GAAG,UAAW,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAEzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,MAAM,MAAM,SAAS,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAI/F,eAAO,MAAM,IAAI,UAAW,iBAAiB,CAAC,SAAS,CAAC,4CAgGvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC;AAEpD,eAAO,MAAM,GAAG,UAAW,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}

package/dist/components/display/tabs.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { motion, useMotionValue } from "framer-motion";
 import React, { createContext, Fragment, useContext, useEffect, useRef } from "react";

package/dist/components/floating/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/floating/dropdown.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAmB,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAE7F,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CA4D/D,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/floating/dropdown.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,EAAmB,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAE7F,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CA4D/D,CAAC"}

package/dist/components/floating/dropdown.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { arrow, autoUpdate, flip, FloatingArrow, FloatingFocusManager, FloatingPortal, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
 import { Fragment, useId, useMemo, useRef, useState } from "react";
@@ -26,5 +27,5 @@ export const Dropdown = (props) => {
     const dismiss = useDismiss(context);
     const role = useRole(context);
     const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
-    return (_jsxs(Fragment, { children: [_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { type: "button", children: props.trigger })), open && (_jsx(FloatingPortal, { id: `${headingId}-portal`, children: _jsx(FloatingFocusManager, { returnFocus: true, visuallyHiddenDismiss: true, restoreFocus: true, context: context, modal: false, children: _jsxs("div", Object.assign({ className: "bg-floating-background relative min-w-96 isolate z-floating border shadow-2xl p-6 border-floating-border rounded-lg", ref: refs.setFloating, style: floatingStyles, "aria-labelledby": headingId }, getFloatingProps(), { children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-floating-background stroke-floating-border" }), _jsx("header", { className: "mb-2", children: _jsx("h3", { className: "leading-snug font-medium text-2xl tracking-tight text-left", children: props.title }) }), props.children] })) }) }))] }));
+    return (_jsxs(Fragment, { children: [_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { type: "button", children: props.trigger })), open && (_jsx(FloatingPortal, { id: `${headingId}-portal`, children: _jsx(FloatingFocusManager, { returnFocus: true, visuallyHiddenDismiss: true, restoreFocus: true, context: context, modal: false, children: _jsxs("div", Object.assign({ className: "bg-floating-background relative min-w-96 isolate z-floating border shadow-2xl p-6 border-floating-border rounded-lg", ref: refs.setFloating, style: floatingStyles, "aria-labelledby": headingId }, getFloatingProps(), { children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-floating-background stroke-floating-border" }), _jsx("header", { className: "mb-2", children: _jsx("h3", { className: "leading-snug font-medium text-2xl tracking-wide text-left", children: props.title }) }), props.children] })) }) }))] }));
 };

package/dist/components/floating/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE9C,KAAK,YAAY,GAAG,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,EAAE;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAEzG,eAAO,MAAM,OAAO,sCAAuC,YAAY,4CA6CtE,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE9C,KAAK,YAAY,GAAG,QAAQ,CAAC,gBAAgB,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,EAAE;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAEzG,eAAO,MAAM,OAAO,sCAAuC,YAAY,4CA6CtE,CAAC"}

package/dist/components/floating/tooltip.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
@@ -28,5 +29,5 @@ export const Tooltip = (_a) => {
     const dismiss = useDismiss(context);
     const role = useRole(context, { role: "tooltip" });
     const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
-    return (_jsxs(Fragment, { children: [_jsx(Component, Object.assign({ ref: refs.setReference }, getReferenceProps(props), { children: title })), _jsx(FloatingPortal, { children: isOpen && (_jsxs(Polymorph, Object.assign({}, getFloatingProps(), { ref: refs.setFloating, style: floatingStyles, className: "bg-tooltip-background text-tooltip-foreground border border-tooltip-border p-3 rounded-lg", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] }))) })] }));
+    return (_jsxs(Fragment, { children: [_jsx(Component, Object.assign({ ref: refs.setReference }, getReferenceProps(props), { children: title })), _jsx(FloatingPortal, { children: isOpen && (_jsxs(Polymorph, Object.assign({}, getFloatingProps(), { ref: refs.setFloating, style: floatingStyles, className: "bg-tooltip-background z-tooltip text-tooltip-foreground border border-tooltip-border p-3 rounded-lg", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] }))) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,8FAWjB,CAAC;AAEH,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAaF,eAAO,MAAM,YAAY,mGAoKvB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,8FAWjB,CAAC;AAEH,KAAK,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAaF,eAAO,MAAM,YAAY,mGAsKvB,CAAC"}

package/dist/components/form/autocomplete.js

@@ -6,9 +6,9 @@ import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDism
 import Fuzzy from "fuzzy-search";
 import { ChevronDown } from "lucide-react";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import { InputField } from "./input-field";
 import { usePrevious } from "../../hooks/use-previous";
-import { css } from "../../lib/dom";
+import { css, dispatchInput } from "../../lib/dom";
+import { InputField } from "./input-field";
 export const Option = forwardRef((_a, ref) => {
     var _b;
     var { selected, active, onClick, option } = _a, rest = __rest(_a, ["selected", "active", "onClick", "option"]);
@@ -16,7 +16,7 @@ export const Option = forwardRef((_a, ref) => {
 });
 const transitionStyles = {
     duration: 300,
-    initial: { transform: "scaleY(0)", opacity: 0.2 },
+    initial: { transform: "scaleY(0)", opacity: 0.4 },
     open: { transform: "scaleY(1)", opacity: 1 },
     close: { transform: "scaleY(0)", opacity: 0 },
 };
@@ -79,6 +79,7 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
     ]);
     const onSelect = (opt) => {
         setValue(opt.value);
+        dispatchInput(refs.reference.current, opt.value);
         setOpen(false);
         setShadow("");
     };
@@ -97,6 +98,7 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
     const onClose = () => {
         setShadow("");
         setValue("");
+        dispatchInput(refs.reference.current, "");
         setOpen(false);
     };
     return (_jsxs("fieldset", { className: "relative w-auto", children: [_jsx(InputField, Object.assign({}, props, { required: required, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx(ChevronDown, { size: 20 }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "link:text-danger transition-colors", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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" }) }) })) : null] }), children: _jsx("input", Object.assign({}, getReferenceProps(Object.assign(Object.assign({}, props), { onChange,

package/dist/components/form/date-picker.d.ts

@@ -0,0 +1,11 @@
+import { Locales } from "the-mask-input";
+import { Override } from "../../types";
+import { InputProps } from "./input";
+type DatePickerProps = Override<InputProps, {
+    date?: Date;
+    locale?: Locales;
+    onChange?: (date: Date) => void;
+}>;
+export declare const DatePicker: (props: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/form/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,eAAe,GAAG,QAAQ,CAC3B,UAAU,EACV;IACI,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACnC,CACJ,CAAC;AAyBF,eAAO,MAAM,UAAU,UAAW,eAAe,4CAyDhD,CAAC"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format, parse, startOfDay } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Fragment, useState } from "react";
+import { Is } from "sidekicker";
+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"),
+};
+export const DatePicker = (props) => {
+    var _a;
+    const locale = new Intl.DateTimeFormat(props.locale);
+    const [date, setDate] = useState(props.date || undefined);
+    const [open, setOpen] = useState(false);
+    const mask = locale.formatToParts(fixedDate).flatMap((x) => (Is.keyof(parts, x.type) ? parts[x.type](x.value) : []));
+    const placeholder = locale
+        .formatToParts(fixedDate)
+        .reduce((acc, x) => acc + (Is.keyof(placeholders, x.type) ? placeholders[x.type](x.value) : ""), "");
+    const [value, setValue] = useState(!date ? "" : locale.formatToParts(date).reduce((acc, x) => acc + (Is.keyof(parts, x.type) ? partValues[x.type](date, x.value) : ""), ""));
+    const onChange = (e) => {
+        var _a;
+        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()));
+                setDate(d);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, d);
+            }
+        }
+    };
+    const onChangeDate = (d) => {
+        var _a;
+        setDate(d);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, d);
+        setValue(format(d, placeholder));
+    };
+    return (_jsx(Input, Object.assign({}, props, { mask: mask, value: value, onChange: onChange, className: "uppercase", formNoValidate: !open, placeholder: placeholder, required: (_a = props.required) !== null && _a !== void 0 ? _a : true, error: open ? undefined : props.error, name: props.name ? `${props.name}-picker` : props.name, right: _jsxs(Fragment, { children: [_jsx("input", { defaultValue: date === null || date === void 0 ? void 0 : date.toISOString(), hidden: true, type: "date", name: props.name }), _jsx(Dropdown, { trigger: _jsx(CalendarIcon, {}), onChange: setOpen, open: open, children: _jsx(Calendar, { date: date, onChange: onChangeDate, locale: props.locale }) })] }) })));
+};

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/form/file-upload.tsx"],"names":[],"mappings":"AAEA,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"}
+{"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/components/form/file-upload.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileIcon, Trash2Icon, UploadIcon } from "lucide-react";

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/form/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,KAAK,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CAAC;AAEhH,eAAO,MAAM,MAAM,2BAA4B,WAAW,4CAmCzD,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/form/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,KAAK,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE,CAAC;AAEhH,eAAO,MAAM,MAAM,2BAA4B,WAAW,4CAmCzD,CAAC"}

package/dist/components/form/switch.js

@@ -1,3 +1,4 @@
+"use client";
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";

package/dist/components/index.d.ts

@@ -8,12 +8,14 @@ export * from "./form/switch";
 export * from "./form/input-field";
 export * from "./form/transfer-list";
 export * from "./form/checkbox";
+export * from "./form/date-picker";
 export * from "./core/button";
 export * from "./core/polymorph";
 export * from "./core/tag";
 export * from "./display/card";
 export * from "./display/stats";
 export * from "./display/tabs";
+export * from "./display/calendar";
 export * from "./floating/dropdown";
 export * from "./floating/tooltip";
 export * from "./floating/modal";

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

package/dist/components/index.js

@@ -8,12 +8,14 @@ export * from "./form/switch";
 export * from "./form/input-field";
 export * from "./form/transfer-list";
 export * from "./form/checkbox";
+export * from "./form/date-picker";
 export * from "./core/button";
 export * from "./core/polymorph";
 export * from "./core/tag";
 export * from "./display/card";
 export * from "./display/stats";
 export * from "./display/tabs";
+export * from "./display/calendar";
 export * from "./floating/dropdown";
 export * from "./floating/tooltip";
 export * from "./floating/modal";

package/dist/components/table/thead.js

@@ -15,6 +15,6 @@ const HeaderChild = (props) => {
         const id = e.currentTarget.dataset.id || "";
         return props.setFilters((prev) => prev.filter((x) => x.id !== id));
     };
-    return (_jsx(Reorder.Item, Object.assign({}, props.header.thProps, { as: "th", exit: exit, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, value: props.header, whileDrag: whileDrag, animate: targetTransitionAnimate, className: `hidden px-2 py-4 first:table-cell md:table-cell ${(_b = (_a = props.header.thProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""}`, children: _jsx("span", { className: "flex items-center justify-between", children: _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Dropdown, { title: `Filter by ${getLabel(props.header)}`, arrow: true, trigger: _jsx(SearchIcon, { size: 14 }), children: (ownFilters.length === 0) === null ? null : (_jsxs("ul", { className: "font-medium", children: [ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))), _jsx("li", { children: _jsxs("button", { onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header))), className: "flex items-center", children: [_jsx(PlusIcon, { size: 14 }), " Add"] }) })] })) }), _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), _jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })] }) }) })));
+    return (_jsx(Reorder.Item, Object.assign({}, props.header.thProps, { as: "th", exit: exit, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, value: props.header, whileDrag: whileDrag, animate: targetTransitionAnimate, className: `hidden font-medium text-secondary px-2 py-4 first:table-cell md:table-cell ${(_b = (_a = props.header.thProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""}`, children: _jsx("span", { className: "flex items-center justify-between", children: _jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Dropdown, { title: `Filter by ${getLabel(props.header)}`, arrow: true, trigger: _jsx(SearchIcon, { size: 14 }), children: (ownFilters.length === 0) === null ? null : (_jsxs("ul", { className: "font-medium", children: [ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))), _jsx("li", { children: _jsxs("button", { onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header))), className: "flex items-center", children: [_jsx(PlusIcon, { size: 14 }), " Add"] }) })] })) }), _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), _jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })] }) }) })));
 };
 export const TableHeader = (props) => (_jsx(Reorder.Group, { as: "tr", axis: "x", drag: true, layout: true, layoutRoot: true, layoutScroll: true, initial: false, values: props.headers, onReorder: props.setCols, className: "bg-table-background border-none text-lg", children: _jsx(AnimatePresence, { children: props.headers.map((header) => (_jsx(HeaderChild, { setFilters: props.setFilters, filters: props.filters, setSorters: props.setSorters, sorters: props.sorters, header: header }, `header-child-item-${header.id}`))) }) }));

package/dist/hooks/use-debounce.d.ts

@@ -0,0 +1,4 @@
+type Fn = (...a: any[]) => any;
+export declare function useDebounce<T extends Fn>(fn: T, delay: number): (...args: any[]) => void;
+export {};
+//# sourceMappingURL=use-debounce.d.ts.map

package/dist/hooks/use-debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.d.ts","sourceRoot":"","sources":["../../src/hooks/use-debounce.ts"],"names":[],"mappings":"AAEA,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;AAU/B,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,4BAG7D"}

package/dist/hooks/use-debounce.js

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+const debounce = (fn, ms = 0) => {
+    let timeoutId = undefined;
+    return function debounced(...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => fn(...args), ms);
+    };
+};
+export function useDebounce(fn, delay) {
+    const debouncedValue = useRef(debounce(fn, delay));
+    return debouncedValue.current;
+}