@g4rcez/components 0.0.73 → 0.1.0

package/dist/preset/preset.tailwind.js

@@ -48,7 +48,7 @@ var config = {
         plugin(function (_a) {
             var addVariant = _a.addVariant, theme = _a.theme, matchUtilities = _a.matchUtilities;
             addVariant("link", ["&:hover", "&:active"]);
-            addVariant("landing", ["&"]);
+            addVariant("hocus", ["&:hover", "&:focus"]);
             addVariant("group-assert", [":merge(.group):valid:has(.input:valid:not(:placeholder-shown)) &"]);
             addVariant("group-error", [
                 ":merge(.group):invalid:has(.input:not(:focus):invalid[data-initialized=true]) &",

package/dist/preset.tailwind.js

@@ -36,7 +36,7 @@ const config = {
         forms({ strategy: "class" }),
         plugin(function ({ addVariant, theme, matchUtilities }) {
             addVariant("link", ["&:hover", "&:active"]);
-            addVariant("landing", ["&"]);
+            addVariant("hocus", ["&:hover", "&:focus"]);
             addVariant("group-assert", [`:merge(.group):valid:has(.input:valid:not(:placeholder-shown)) &`]);
             addVariant("group-error", [
                 `:merge(.group):invalid:has(.input:not(:focus):invalid[data-initialized=true]) &`,

package/dist/src/components/display/alert.js

@@ -32,5 +32,5 @@ const alertVariants = cva("p-4 w-full block border relative rounded-lg text-sm",
 });
 export const Alert = forwardRef(function Alert({ className, theme, Icon, onClose, open = true, ...props }, ref) {
     const close = () => onClose?.(false);
-    return (_jsx("div", { "data-open": !!open, "aria-hidden": !open, "data-component": "alert", className: css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none"), children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, { ...props, ref: ref, role: "alert", "data-theme": theme, as: props.as ?? "div", className: css(alertVariants({ theme }), className), children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [!Icon && theme === "success" ? _jsx(CheckCircleIcon, { size: 20 }) : null, !Icon && theme === "info" ? _jsx(InfoIcon, { size: 20 }) : null, !Icon && theme === "danger" ? _jsx(TriangleAlertIcon, { size: 20 }) : null, Icon, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, onClose !== undefined ? (_jsx("button", { type: "button", onClick: close, className: "absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger", children: _jsx(XIcon, { size: 20 }) })) : null] }) }) }));
+    return (_jsx("div", { "data-open": !!open, "aria-hidden": !open, "data-component": "alert", className: css("isolate w-full", open ? "pointer-events-auto" : "pointer-events-none"), children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, { ...props, ref: ref, role: "alert", "data-theme": theme, as: props.as ?? "div", className: css(alertVariants({ theme }), className), children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [!Icon && theme === "success" ? _jsx(CheckCircleIcon, { size: 20 }) : null, !Icon && theme === "info" ? _jsx(InfoIcon, { size: 20 }) : null, !Icon && theme === "danger" ? _jsx(TriangleAlertIcon, { size: 20 }) : null, Icon, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, onClose !== undefined && open ? (_jsx("button", { type: "button", onClick: close, className: "absolute right-3 top-3 text-foreground transition-colors duration-300 ease-in-out hover:text-danger", children: _jsx(XIcon, { size: 20 }) })) : null] }) }) }));
 });

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

@@ -6,12 +6,13 @@ type Range = {
 };
 type OnChangeDate = (d: Date | undefined) => void;
 type OnChangeRange = (d: Range | undefined) => void;
+type DateStyle = (d: Date) => string;
 type CalendarStyles = Partial<{
-    day: string;
-    week: string;
-    weekDay: string;
-    dayFrame: string;
-    calendar: string;
+    day: string | DateStyle;
+    weekDay: string | DateStyle;
+    dayFrame: string | DateStyle;
+    week: string | ((week: Date[]) => string);
+    calendar: string | ((daysOfMonth: Date[]) => string);
 }>;
 export type CalendarProps<T extends "date" | "range" | undefined = undefined> = Partial<{
     locale: Locales;

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAqBvD,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExC,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;AAElD,KAAK,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;AAEpD,KAAK,cAAc,GAAG,OAAO,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,IAAI,OAAO,CACrF;IACE,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACtC,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1C,GAAG,CAAC,CAAC,SAAS,MAAM,GACjB;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAE,GACtC,CAAC,SAAS,OAAO,GACjB;IACA,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,aAAa,CAAC;CACzB,GACC,EAAE,CAAC,GACP,CAAC;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE,CAAC,CACrF,CAAC;AA0HF,eAAO,MAAM,QAAQ,mKAclB,aAAa,4CAiPf,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAqBvD,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExC,KAAK,YAAY,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;AAElD,KAAK,aAAa,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;AAEpD,KAAK,SAAS,GAAG,CAAC,CAAC,EAAE,IAAI,KAAK,MAAM,CAAC;AAErC,KAAK,cAAc,GAAG,OAAO,CAAC;IAC1B,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;IAC1C,QAAQ,EAAE,MAAM,GAAG,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC,CAAC;CACxD,CAAC,CAAC;AAEH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,IAAI,OAAO,CACnF;IACI,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,cAAc,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACtC,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,GAAG,CAAC,CAAC,SAAS,MAAM,GACf;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAE,GACtC,CAAC,SAAS,OAAO,GACf;IACI,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,aAAa,CAAC;CAC3B,GACD,EAAE,CAAC,GACP,CAAC;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE,CAAC,CAC3F,CAAC;AAwIF,eAAO,MAAM,QAAQ,mKAclB,aAAa,4CAkQf,CAAC"}

package/dist/src/components/display/calendar.js

@@ -60,17 +60,21 @@ const inRange = (start, middle, end) => {
 };
 const CalendarBody = (props) => {
     const translate = useTranslations();
-    return (_jsx(motion.tbody, { layout: true, variants: variants, custom: props.direction, onKeyDown: props.onKeyDown, className: css(props.styles?.week), children: props.zip.map((week, index) => (_jsx("tr", { className: props.styles?.week, children: week.map((day) => {
-                const key = day.toISOString();
-                const isSelected = props.rangeMode
-                    ? key === props.range?.to?.toISOString() || key === props.range?.from?.toISOString()
-                    : key === props.date?.toISOString();
-                const today = isToday(day) && props.markToday;
-                const disabledByFn = props.disabledDate?.(day) || false;
-                const disableDate = !isSameMonth(day, props.stateDate) || disabledByFn;
-                const isInRange = props.rangeMode ? inRange(props.range?.from, day, props.range?.to) : false;
-                return (_jsxs("td", { align: "center", className: css("relative", props.styles?.dayFrame), children: [_jsxs("button", { type: "button", "data-date": key, disabled: disabledByFn, "data-range": props.rangeMode, onClick: props.dispatch.onSelectDate, "data-view": props.stateDate.getMonth().toString(), className: css(`flex size-10 items-center justify-center rounded-full proportional-nums disabled:cursor-not-allowed ${today ? "text-emphasis" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, props.styles?.day, isInRange && props.markRange ? "size-10 border border-dashed border-card-border" : ""), children: [day.getDate(), isSelected && props.stateRange.from?.toISOString() === key ? (_jsx("span", { className: "absolute -top-2 left-0 h-full w-full", children: _jsx("span", { className: "text-xs text-foreground", children: props.labelRange?.from ?? translate.calendarFromDate }) })) : null, isSelected && props.stateRange.to?.toISOString() === key ? (_jsx("span", { className: "absolute -top-2 left-0 h-full w-full", children: _jsx("span", { className: "text-xs text-foreground", children: props.labelRange?.to ?? translate.calendarToDate }) })) : null] }), props.RenderOnDay ? _jsx(props.RenderOnDay, { date: day }) : null] }, key));
-            }) }, `week-${week.length}-${index}`))) }));
+    return (_jsx(motion.tbody, { layout: true, variants: variants, custom: props.direction, onKeyDown: props.onKeyDown, className: css(props.styles?.week), children: props.zip.map((week, index) => {
+            const weekClassName = Is.function(props.styles?.week) ? props.styles?.week(week) : props.styles?.week;
+            return (_jsx("tr", { className: weekClassName, children: week.map((day) => {
+                    const key = day.toISOString();
+                    const isSelected = props.rangeMode
+                        ? key === props.range?.to?.toISOString() || key === props.range?.from?.toISOString()
+                        : key === props.date?.toISOString();
+                    const today = isToday(day) && props.markToday;
+                    const disabledByFn = props.disabledDate?.(day) || false;
+                    const sameMonth = isSameMonth(day, props.stateDate);
+                    const disableDate = !sameMonth || disabledByFn;
+                    const isInRange = props.rangeMode ? inRange(props.range?.from, day, props.range?.to) : false;
+                    return (_jsxs("td", { align: "center", className: css("relative", Is.function(props.styles?.dayFrame) ? props.styles?.dayFrame(day) : props.styles?.dayFrame), children: [_jsxs("button", { type: "button", "data-date": key, disabled: disabledByFn, "data-samemonth": sameMonth, "data-range": props.rangeMode, onClick: props.dispatch.onSelectDate, "data-view": props.stateDate.getMonth().toString(), className: css(`flex size-10 items-center justify-center rounded-full proportional-nums disabled:cursor-not-allowed ${today ? "text-emphasis" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, isInRange && props.markRange ? "size-10 border border-dashed border-card-border" : "", Is.function(props.styles?.day) ? props.styles?.day(day) : props.styles?.day), children: [day.getDate(), isSelected && props.stateRange.from?.toISOString() === key ? (_jsx("span", { className: "absolute -top-2 left-0 h-full w-full", children: _jsx("span", { className: "text-xs text-foreground", children: props.labelRange?.from ?? translate.calendarFromDate }) })) : null, isSelected && props.stateRange.to?.toISOString() === key ? (_jsx("span", { className: "absolute -top-2 left-0 h-full w-full", children: _jsx("span", { className: "text-xs text-foreground", children: props.labelRange?.to ?? translate.calendarToDate }) })) : null] }), props.RenderOnDay ? _jsx(props.RenderOnDay, { date: day }) : null] }, key));
+                }) }, `week-${week.length}-${index}`));
+        }) }));
 };
 export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, disabledDate, locale, markToday = true, onChangeMonth, onChangeYear, rangeMode = false, onChange, styles, markRange = true, ...props }) => {
     const id = useRef(uuid());
@@ -189,7 +193,8 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
             },
         ],
     });
-    const zip = splitInto(createDays(state.date), 7);
+    const allDaysOfMonth = createDays(state.date);
+    const zip = splitInto(allDaysOfMonth, 7);
     const currentAsString = state.date.toISOString();
     const monthString = formatMonth(state.date, currentLocale);
     useEffect(() => {
@@ -209,5 +214,7 @@ export const Calendar = ({ RenderOnDay, changeOnlyOnClick = false, labelRange, d
         onChangeYear?.(new Date(value));
         defer(value);
     };
-    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { "data-component": "calendar", ref: root, className: css("relative overflow-hidden", styles?.calendar), children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", 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, { layout: true, type: "button", "data-focustrap": "prev", variants: removeImmediately, onClick: dispatch.previousMonth, title: translations.calendarBackMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { layout: true, variants: variants, custom: state.direction, className: "absolute inset-0 isolate z-normal flex items-center justify-center font-semibold", children: _jsxs("span", { className: "flex w-fit items-center justify-center gap-0.5 py-1", children: [_jsx("select", { value: monthString, onChange: dispatch.onChangeMonth, style: { width: `${monthString.length + 1}ch` }, className: "cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", children: state.months }), _jsx(TheMaskInput, { mask: "int", maxLength: 4, placeholder: "YYYY", value: state.year, onChange: internalOnChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 cursor-pointer appearance-none bg-transparent hover:text-primary" })] }) }), _jsx(motion.button, { layout: true, type: "button", "data-focustrap": "next", variants: removeImmediately, onClick: dispatch.nextMonth, title: translations.calendarNextMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground", 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%)" } })] }), _jsxs(motion.table, { className: "mt-2 table min-w-full table-auto border-0", children: [_jsx("thead", { children: _jsx("tr", { children: state.week.map((dayOfWeek) => (_jsx("th", { className: css("py-2 text-sm font-medium capitalize", styles?.weekDay), children: dayOfWeek.toLocaleDateString(currentLocale, { weekday: "short" }) }, dayOfWeek.toString()))) }) }), _jsx(CalendarBody, { zip: zip, range: range, styles: styles, date: date || null, dispatch: dispatch, markRange: markRange, markToday: markToday, rangeMode: rangeMode, stateDate: state.date, labelRange: labelRange, stateRange: state.range, RenderOnDay: RenderOnDay, direction: state.direction, disabledDate: disabledDate, onKeyDown: dispatch.onKeyDown })] })] }, monthString) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "transition-transform duration-300 hover:scale-105", type: "button", onClick: dispatch.setToday, children: translations.calendarToday }) })] }) }));
+    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { "data-component": "calendar", ref: root, className: css("relative overflow-hidden", Is.function(styles?.calendar) ? styles?.calendar(allDaysOfMonth) : styles?.calendar), children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", 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, { layout: true, type: "button", "data-focustrap": "prev", variants: removeImmediately, onClick: dispatch.previousMonth, title: translations.calendarBackMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { layout: true, variants: variants, custom: state.direction, className: "absolute inset-0 isolate z-normal flex items-center justify-center font-semibold", children: _jsxs("span", { className: "flex w-fit items-center justify-center gap-0.5 py-1", children: [_jsx("select", { "aria-label": translations.calendarMonthLabel, value: monthString, onChange: dispatch.onChangeMonth, style: { width: `${monthString.length + 1}ch` }, className: "cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", children: state.months }), _jsx(TheMaskInput, { mask: "int", maxLength: 4, placeholder: "YYYY", value: state.year, onChange: internalOnChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 cursor-pointer appearance-none bg-transparent hover:text-primary" })] }) }), _jsx(motion.button, { layout: true, type: "button", "data-focustrap": "next", variants: removeImmediately, onClick: dispatch.nextMonth, title: translations.calendarNextMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary hover:text-primary-foreground", 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%)",
+                                            } })] }), _jsxs(motion.table, { className: "mt-2 table min-w-full table-auto border-0", children: [_jsx("thead", { children: _jsx("tr", { children: state.week.map((dayOfWeek) => (_jsx("th", { role: "columnheader", className: css("py-2 text-sm font-medium capitalize", Is.function(styles?.weekDay) ? styles.weekDay(dayOfWeek) : styles?.weekDay), children: dayOfWeek.toLocaleDateString(currentLocale, { weekday: "short" }) }, dayOfWeek.toString()))) }) }), _jsx(CalendarBody, { zip: zip, range: range, styles: styles, date: date || null, dispatch: dispatch, markRange: markRange, markToday: markToday, rangeMode: rangeMode, stateDate: state.date, labelRange: labelRange, stateRange: state.range, RenderOnDay: RenderOnDay, direction: state.direction, disabledDate: disabledDate, onKeyDown: dispatch.onKeyDown })] })] }, monthString) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "transition-transform duration-300 hover:scale-105", type: "button", onClick: dispatch.setToday, children: translations.calendarToday }) })] }) }));
 };

package/dist/src/components/floating/menu.d.ts

@@ -1,14 +1,14 @@
 import { LucideProps } from "lucide-react";
 import React from "react";
-import { Override } from "../../types";
 export type MenuProps = Partial<{
-    FloatingComponent: React.ElementType;
-    floatingClassName: string;
     hover: boolean;
+    open?: boolean;
     nested: boolean;
-    isParent: boolean;
     asChild: boolean;
+    isParent: boolean;
     children: React.ReactNode;
+    floatingClassName: string;
+    FloatingComponent: React.ElementType;
 } & ({
     label: string;
 } | {
@@ -16,34 +16,31 @@ export type MenuProps = Partial<{
     title: string;
 })>;
 type MenuItemProps = {
-    label: string;
-    disabled?: boolean;
-    Right?: React.FC<LucideProps>;
-} | {
-    label: React.ReactElement;
     title: string;
     disabled?: boolean;
     Right?: React.FC<LucideProps>;
 };
-export declare const MenuItem: React.ForwardRefExoticComponent<Override<React.ButtonHTMLAttributes<HTMLButtonElement>, MenuItemProps> & React.RefAttributes<HTMLButtonElement>>;
-export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "asChild" | "FloatingComponent" | "floatingClassName" | "nested" | "isParent"> & Partial<{
-    FloatingComponent: React.ElementType;
-    floatingClassName: string;
+export declare const MenuItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof MenuItemProps> & MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "open" | "children" | "hover" | "asChild" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
     hover: boolean;
+    open?: boolean;
     nested: boolean;
-    isParent: boolean;
     asChild: boolean;
+    isParent: boolean;
     children: React.ReactNode;
+    floatingClassName: string;
+    FloatingComponent: React.ElementType;
 } & {
     label: string;
-}>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "asChild" | "FloatingComponent" | "floatingClassName" | "nested" | "isParent"> & Partial<{
-    FloatingComponent: React.ElementType;
-    floatingClassName: string;
+}>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "open" | "children" | "hover" | "asChild" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
     hover: boolean;
+    open?: boolean;
     nested: boolean;
-    isParent: boolean;
     asChild: boolean;
+    isParent: boolean;
     children: React.ReactNode;
+    floatingClassName: string;
+    FloatingComponent: React.ElementType;
 } & {
     label: React.ReactElement;
     title: string;

package/dist/src/components/floating/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAA2E,MAAM,OAAO,CAAC;AAGhG,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA0BvC,MAAM,MAAM,SAAS,GAAG,OAAO,CAC7B;IACE,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC;IACrC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACvE,CAAC;AA8KF,KAAK,aAAa,GACd;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,GACpE;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpG,eAAO,MAAM,QAAQ,kJAkCpB,CAAC;AAEF,eAAO,MAAM,IAAI;uBA9NM,KAAK,CAAC,WAAW;uBACjB,MAAM;WAClB,OAAO;YACN,OAAO;cACL,OAAO;aACR,OAAO;cACN,KAAK,CAAC,SAAS;;WACb,MAAM;;uBAPC,KAAK,CAAC,WAAW;uBACjB,MAAM;WAClB,OAAO;YACN,OAAO;cACL,OAAO;aACR,OAAO;cACN,KAAK,CAAC,SAAS;;WACO,KAAK,CAAC,YAAY;WAAS,MAAM;qDAgOnE,CAAC"}
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/menu.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,KAA2E,MAAM,OAAO,CAAC;AA6BhG,MAAM,MAAM,SAAS,GAAG,OAAO,CAC3B;IACI,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAAC;CACxC,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACzE,CAAC;AA4KF,KAAK,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAE1F,eAAO,MAAM,QAAQ,oKAmCpB,CAAC;AAEF,eAAO,MAAM,IAAI;WA5NF,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;cACP,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WAC1B,MAAM;;WART,OAAO;WACP,OAAO;YACN,OAAO;aACN,OAAO;cACN,OAAO;cACP,KAAK,CAAC,SAAS;uBACN,MAAM;uBACN,KAAK,CAAC,WAAW;;WACN,KAAK,CAAC,YAAY;WAAS,MAAM;qDA6NrE,CAAC"}

package/dist/src/components/floating/menu.js

@@ -14,8 +14,8 @@ const MenuContext = createContext({
     setActiveIndex: () => { },
     setHasFocusInside: () => { },
 });
-const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", hover = true, isParent, floatingClassName = "", label, ...props }, forwardedRef) => {
-    const [isOpen, setIsOpen] = useState(false);
+const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", hover = true, open, isParent, floatingClassName = "", label, ...props }, forwardedRef) => {
+    const [isOpen, setIsOpen] = useState(open ?? false);
     const [hasFocusInside, setHasFocusInside] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);
     const elementsRef = useRef([]);
@@ -55,7 +55,7 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
         listRef: elementsRef,
         activeIndex,
         nested: isNested,
-        onNavigate: setActiveIndex
+        onNavigate: setActiveIndex,
     });
     const typeahead = useTypeahead(context, {
         activeIndex,
@@ -63,9 +63,7 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
         resetMs: TYPEAHEAD_RESET_DELAY,
         onMatch: isOpen ? setActiveIndex : undefined,
     });
-    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-        hoverModule, click, role, dismiss, listNavigation, typeahead
-    ]);
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([hoverModule, click, role, dismiss, listNavigation, typeahead]);
     useEffect(() => {
         if (!tree)
             return;
@@ -90,14 +88,14 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
         }
     }, [tree, isOpen, nodeId, parentId]);
     const className = isParent ? props.className : css(menuItemClassName(props.className));
-    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, { children: label, ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, className: className, ...getReferenceProps(parent.getItemProps({
+    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, { ...getReferenceProps(parent.getItemProps({
                         ...props,
                         onFocus(event) {
                             props.onFocus?.(event);
                             setHasFocusInside(false);
                             parent.setHasFocusInside(true);
                         },
-                    })) })) : (_jsxs("button", { type: "button", className: className, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, ...getReferenceProps(parent.getItemProps({
+                    })), children: label, ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, className: className })) : (_jsxs("button", { type: "button", className: className, "data-open": isOpen ? "" : undefined, "data-nested": isNested ? "" : undefined, role: isNested ? "menuitem" : undefined, "data-focus-inside": hasFocusInside ? "" : undefined, ref: useMergeRefs([refs.setReference, item.ref, forwardedRef]), tabIndex: !isNested ? undefined : parent.activeIndex === item.index ? 0 : -1, ...getReferenceProps(parent.getItemProps({
                         ...props,
                         onFocus(event) {
                             props.onFocus?.(event);
@@ -106,12 +104,12 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
                         },
                     })), children: [label, isNested && (_jsxs("span", { style: { marginLeft: 10, fontSize: 10 }, children: [_jsx("span", { className: "sr-only", children: "Next menu" }), _jsx(ChevronRightIcon, { size: 14 })] }))] })) }), _jsx(MenuContext.Provider, { value: { activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: !isNested, children: _jsx(FloatingComponent, { ...getFloatingProps(), ref: refs.setFloating, style: { ...props.style, ...floatingStyles }, className: css("isolate z-tooltip flex flex-col items-start rounded-lg border border-floating-border bg-floating-background text-left shadow-xl outline-none", floatingClassName), children: children }) }) })) }) })] }));
 });
-export const MenuItem = React.forwardRef(({ label, title, Right, disabled, ...props }, forwardedRef) => {
+export const MenuItem = React.forwardRef(({ title, Right, disabled, children, ...props }, forwardedRef) => {
     const menu = useContext(MenuContext);
-    const item = useListItem({ label: disabled ? null : typeof label === "string" ? label : title });
+    const item = useListItem({ label: disabled ? null : title });
     const tree = useFloatingTree();
     const isActive = item.index === menu.activeIndex;
-    return (_jsxs("button", { ...props, type: "button", role: "menuitem", disabled: disabled, "data-active": isActive, "data-open": menu.isOpen, tabIndex: isActive ? 0 : -1, ref: useMergeRefs([item.ref, forwardedRef]), className: menuItemClassName(`${props.className ?? ""} ${isActive ? "bg-primary text-primary-foreground" : ""}`), ...menu.getItemProps({
+    return (_jsxs("button", { ...props, title: title, type: "button", role: "menuitem", disabled: disabled, "data-active": isActive, "data-open": menu.isOpen, tabIndex: isActive ? 0 : -1, ref: useMergeRefs([item.ref, forwardedRef]), className: menuItemClassName(`${props.className ?? ""} ${isActive ? "bg-primary text-primary-foreground" : ""}`), ...menu.getItemProps({
             onClick(event) {
                 props.onClick?.(event);
                 tree?.events.emit("click");
@@ -120,7 +118,7 @@ export const MenuItem = React.forwardRef(({ label, title, Right, disabled, ...pr
                 props.onFocus?.(event);
                 menu.setHasFocusInside(true);
             },
-        }), children: [label, Right ? _jsx(Right, { size: 16 }) : null] }));
+        }), children: [children, Right ? _jsx(Right, { size: 16 }) : null] }));
 });
 export const Menu = React.forwardRef((props, ref) => {
     const parentId = useFloatingParentNodeId();

package/dist/src/components/floating/modal.d.ts

@@ -1,9 +1,14 @@
 import { HTMLMotionProps } from "motion/react";
 import React, { PropsWithChildren } from "react";
 import { Label, Override } from "../../types";
-export type ModalProps = Override<HTMLMotionProps<"div">, {
-    open: boolean;
+export type ModalProps = Override<HTMLMotionProps<"div">, ({
+    title: Label;
+    ariaTitle?: string;
+} | {
+    ariaTitle: string;
     title?: Label;
+}) & {
+    open: boolean;
     footer?: Label;
     asChild?: boolean;
     layoutId?: string;
@@ -18,5 +23,5 @@ export type ModalProps = Override<HTMLMotionProps<"div">, {
     type?: "dialog" | "drawer" | "sheet";
     onChange: (nextState: boolean) => void;
 }>;
-export declare const Modal: ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer, closable, forceType, overlayClassName, type: _type, position: propsPosition, overlayClickClose, ...props }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer, closable, forceType, overlayClassName, type: _type, position: propsPosition, overlayClickClose, ariaTitle, ...props }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=modal.d.ts.map

package/dist/src/components/floating/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AAEnI,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2D9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC/B,eAAe,CAAC,KAAK,CAAC,EACtB;IACE,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CACF,CAAC;AAoEF,eAAO,MAAM,KAAK,0MAkBf,iBAAiB,CAAC,UAAU,CAAC,4CAyG/B,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AAEnI,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2D9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACJ,CAAC;AAoEF,eAAO,MAAM,KAAK,qNAmBf,iBAAiB,CAAC,UAAU,CAAC,4CAmH/B,CAAC"}

package/dist/src/components/floating/modal.js

@@ -11,9 +11,9 @@ import { useMediaQuery } from "../../hooks/use-media-query";
 import { css } from "../../lib/dom";
 const animationDuration = "600ms";
 const drawerLeft = {
-    initial: { translateX: ["-30%", "0%"], opacity: 0.8, animationDuration },
-    enter: { translateX: ["-30%", "0%"], opacity: 1, animationDuration },
     exit: { translateX: ["0%", "-30%"], opacity: 0, animationDuration },
+    enter: { translateX: ["-30%", "0%"], opacity: 1, animationDuration },
+    initial: { translateX: ["-30%", "0%"], opacity: 0.8, animationDuration },
 };
 const drawerRight = {
     initial: { translateX: ["30%", "0%"], opacity: 0.8 },
@@ -33,7 +33,7 @@ const animations = {
         exit: { opacity: 0, scale: 0.97, animationDuration },
     },
 };
-const variants = cva("isolate z-floating border border-card-border ring-0 outline-0 appearance-none flex flex-col gap-4 flex-nowrap min-w-xs bg-floating-background", {
+const variants = cva("z-floating border border-card-border ring-0 outline-0 appearance-none flex flex-col gap-4 flex-nowrap min-w-xs bg-floating-background", {
     variants: {
         type: {
             drawer: "max-h-screen max-w-[90%] absolute w-fit h-screen min-h-0",
@@ -78,7 +78,7 @@ const Draggable = (props) => {
                 : "left-2 top-1/2 h-10 w-2"), children: props.sheet ? _jsx("div", { className: "h-2 w-1/4 rounded-lg bg-floating-border" }) : null }));
 };
 const positions = { drawer: "right", sheet: "none", dialog: "none" };
-export const Modal = ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer = true, closable = true, forceType = false, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, ...props }) => {
+export const Modal = ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer = true, closable = true, forceType = false, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, ariaTitle, ...props }) => {
     const headingId = useId();
     const descriptionId = useId();
     const isDesktop = useMediaQuery("(min-width: 64rem)");
@@ -97,5 +97,10 @@ export const Modal = ({ open, title, footer, asChild, trigger, children, layoutI
     const onClose = () => onChange(false);
     return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: refs.setReference, ...getReferenceProps({
                         layoutId: layoutId,
-                    }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(RemoveScroll, { enabled: true, forwardProps: true, removeScrollBar: true, inert: true, noIsolation: true, children: _jsx(FloatingOverlay, { lockScroll: true, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", initial: "initial", variants: animation, "data-component": "modal", ref: refs.setFloating, "aria-modal": open, layoutId: layoutId, "aria-labelledby": headingId, "aria-describedby": descriptionId, className: css(variants({ position, type }), className), style: type === "drawer" ? { width: value } : { height: value }, ...getFloatingProps(), children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { className: "border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: title })) : null })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8 py-1", children: children }), footer ? _jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: footer }) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, parent: refs.floating, position: position, sheet: type === "sheet", value: value })) : null] }) }) }) })) : null }) })] }));
+                    }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(RemoveScroll, { enabled: true, forwardProps: true, removeScrollBar: true, inert: true, noIsolation: true, children: _jsx(FloatingOverlay, { lockScroll: true, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", initial: "initial", variants: animation, "data-component": "modal", ref: refs.setFloating, "aria-modal": open, layoutId: layoutId, className: css(variants({ position, type }), className), style: type === "drawer" ? { width: value } : { height: value }, ...(title
+                                        ? {
+                                            "aria-labelledby": headingId,
+                                            "aria-describedby": descriptionId,
+                                        }
+                                        : { "aria-label": ariaTitle }), ...getFloatingProps(), children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: title })) : null })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8 py-1", children: children }), footer ? _jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: footer }) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, parent: refs.floating, position: position, sheet: type === "sheet", value: value })) : null] }) }) }) })) : null }) })] }));
 };

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

@@ -9,11 +9,11 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<Omit<Inpu
     markToday: boolean;
     rangeMode: boolean;
     styles: Partial<{
-        day: string;
-        week: string;
-        weekDay: string;
-        dayFrame: string;
-        calendar: string;
+        day: string | ((d: Date) => string);
+        weekDay: string | ((d: Date) => string);
+        dayFrame: string | ((d: Date) => string);
+        week: string | ((week: Date[]) => string);
+        calendar: string | ((daysOfMonth: Date[]) => string);
     }>;
     changeOnlyOnClick: boolean;
     onChangeYear: (d: Date) => void;
@@ -38,11 +38,11 @@ export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<Omit<Inpu
     markToday: boolean;
     rangeMode: boolean;
     styles: Partial<{
-        day: string;
-        week: string;
-        weekDay: string;
-        dayFrame: string;
-        calendar: string;
+        day: string | ((d: Date) => string);
+        weekDay: string | ((d: Date) => string);
+        dayFrame: string | ((d: Date) => string);
+        week: string | ((week: Date[]) => string);
+        calendar: string | ((daysOfMonth: Date[]) => string);
     }>;
     changeOnlyOnClick: boolean;
     onChangeYear: (d: Date) => void;

package/dist/src/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;AAG5E,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,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,4CA6ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,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,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;AAG5E,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,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,4CA8ChH,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,QAAQ,GAAG,UAAU,IAAI,gBAAgB,CACrF,OAAO,CACH,QAAQ,CACJ,aAAa,EACb;IACI,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,YA6EpH,CAAC"}

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

@@ -5,7 +5,7 @@ import { forwardRef, Fragment } from "react";
 import { useTranslations, useTweaks } from "../../hooks/use-components-provider";
 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-disabled:text-disabled group-error:text-danger", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex items-center justify-center gap-1", children: [info ? (_jsx(Tooltip, { as: "button", type: "button", 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: _jsx("div", { className: "w-full max-w-48 whitespace-break-spaces break-words", 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 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-disabled:text-disabled group-error:text-danger", children: [title, reportStatus || info ? (_jsxs("span", { className: "flex items-center justify-center gap-1", children: [info ? (_jsx(Tooltip, { as: "button", type: "button", "aria-description": info, 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: _jsx("div", { className: "w-full max-w-48 whitespace-break-spaces break-words", 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 = 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) => {
     const tweaks = useTweaks();
     const reportStatusDefault = reportStatus !== undefined ? reportStatus : tweaks.input.iconFeedback;

package/dist/src/hooks/use-components-provider.d.ts

@@ -53,6 +53,7 @@ declare const defaultTranslations: {
     calendarToday: string;
     calendarBackMonth: string;
     calendarNextMonth: string;
+    calendarMonthLabel: string;
     multiComboboxSelectedLabel: string;
     multiComboboxInnerPlaceholder: string;
 };
@@ -122,6 +123,7 @@ export declare const useTranslations: () => {
     calendarToday: string;
     calendarBackMonth: string;
     calendarNextMonth: string;
+    calendarMonthLabel: string;
     multiComboboxSelectedLabel: string;
     multiComboboxInnerPlaceholder: string;
 };

package/dist/src/hooks/use-components-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA2B,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAgDa;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;CActI,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC;AAEtD,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE;QACL,YAAY,EAAE,OAAO,CAAC;KACvB,CAAC;CACH,CAAC;AAeF,KAAK,YAAY,GAAG,OAAO,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;CAC7B,CAAC,CAAC;AASH,eAAO,MAAM,kBAAkB,UAAW,iBAAiB,CAAC,YAAY,CAAC,4CAWxE,CAAC;AAEF,eAAO,MAAM,SAAS,YAAa,OAAO,KAAG,OAAO,GAAG,SAKtD,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAvEU;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;CA2EtI,CAAC;AAEF,eAAO,MAAM,cAAc,wCAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,MAI5B,CAAC"}
+{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA2B,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAgDa;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;CAetI,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC;AAEtD,MAAM,MAAM,MAAM,GAAG;IACnB,KAAK,EAAE;QACL,YAAY,EAAE,OAAO,CAAC;KACvB,CAAC;CACH,CAAC;AAeF,KAAK,YAAY,GAAG,OAAO,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;CAC7B,CAAC,CAAC;AASH,eAAO,MAAM,kBAAkB,UAAW,iBAAiB,CAAC,YAAY,CAAC,4CAWxE,CAAC;AAEF,eAAO,MAAM,SAAS,YAAa,OAAO,KAAG,OAAO,GAAG,SAKtD,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAxEU;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;CA4EtI,CAAC;AAEF,eAAO,MAAM,cAAc,wCAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,MAI5B,CAAC"}

package/dist/src/hooks/use-components-provider.js

@@ -48,6 +48,7 @@ const defaultTranslations = {
     calendarToday: "Today",
     calendarBackMonth: "Back month",
     calendarNextMonth: "Next month",
+    calendarMonthLabel: "Month",
     multiComboboxSelectedLabel: "Selected",
     multiComboboxInnerPlaceholder: "Search...",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@g4rcez/components",
-  "version": "0.0.73",
+  "version": "0.1.0",
   "sideEffects": false,
   "private": false,
   "packageManager": "pnpm@8.15.3",