@g4rcez/components 0.0.34 → 0.0.35

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,cAAc;;;;mFA6BnB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,gBAAgB,CAC9E,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,EAChF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,GAsB7E,CAAC;AAEZ,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,KAAK,4CAkBvC,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,cAAc;;;;mFA6BnB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,gBAAgB,CAC9E,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,EAChF,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,GAsB7E,CAAC;AAEZ,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,KAAK,4CAkBvC,CAAC"}

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

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

package/dist/components/core/resizable.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { motion, useMotionValue } from "framer-motion";
 import { useEffect, useMemo, useState } from "react";
+import { isSsr } from "../../lib/fns";
 const defaultState = {
     x: 0,
     y: 0,
@@ -15,28 +16,30 @@ const defaultState = {
 const useElementRect = () => {
     const [element, ref] = useState(null);
     const motion = useMotionValue(defaultState);
-    const observer = useMemo(() => new window.ResizeObserver((entries) => {
-        if (entries[0]) {
-            const rect = entries[0].contentRect;
-            motion.set({
-                x: rect.x,
-                y: rect.y,
-                width: rect.width,
-                height: rect.height,
-                top: rect.top,
-                left: rect.left,
-                bottom: rect.bottom,
-                right: rect.right,
-            });
-        }
-    }), []);
+    const observer = useMemo(() => isSsr()
+        ? null
+        : new window.ResizeObserver((entries) => {
+            if (entries[0]) {
+                const rect = entries[0].contentRect;
+                motion.set({
+                    x: rect.x,
+                    y: rect.y,
+                    width: rect.width,
+                    height: rect.height,
+                    top: rect.top,
+                    left: rect.left,
+                    bottom: rect.bottom,
+                    right: rect.right,
+                });
+            }
+        }), []);
     useEffect(() => {
         if (!element)
             return;
+        if (observer === null)
+            return;
         observer.observe(element);
-        return () => {
-            observer.disconnect();
-        };
+        return () => observer.disconnect();
     }, [element]);
     return [ref, motion];
 };

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

@@ -2,13 +2,17 @@ import { type VariantProps } from "class-variance-authority";
 import React from "react";
 import { Label } from "../../types";
 import { PolymorphicProps } from "./polymorph";
+declare const indicatorVariant: (props?: ({
+    theme?: "main" | "warn" | "danger" | "secondary" | "success" | "info" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const tagVariants: (props?: ({
     size?: "big" | "small" | "default" | "icon" | null | undefined;
-    theme?: "main" | "disabled" | "loading" | "raw" | "warn" | "danger" | "secondary" | "success" | "info" | null | undefined;
+    theme?: "main" | "disabled" | "loading" | "raw" | "warn" | "danger" | "secondary" | "success" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export type TagProps<T extends React.ElementType = "span"> = PolymorphicProps<VariantProps<typeof tagVariants> & Partial<{
     icon: Label;
     loading: boolean;
+    indicator: VariantProps<typeof indicatorVariant>["theme"];
 }>, T>;
 export declare const Tag: <T extends React.ElementType = "span">(props: TagProps<T>) => any;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,WAAW;;;mFAwBhB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,YAAY,CAAC,OAAO,WAAW,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,EAC7E,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAUrE,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,gBAAgB;;mFAWpB,CAAC;AAEH,QAAA,MAAM,WAAW;;;mFAyBhB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,YAAY,CAAC,OAAO,WAAW,CAAC,GAC5B,OAAO,CAAC;IACJ,IAAI,EAAE,KAAK,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC7D,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAWrE,CAAC"}

package/dist/components/core/tag.js

@@ -1,9 +1,21 @@
 import { __rest } from "tslib";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
+const indicatorVariant = cva("size-2.5 aspect-square rounded-full border-0", {
+    variants: {
+        theme: {
+            warn: "bg-warn",
+            info: "bg-info",
+            main: "bg-primary",
+            danger: "bg-danger",
+            success: "bg-success",
+            secondary: "bg-secondary",
+        },
+    },
+});
 const tagVariants = cva("inline-flex rounded-pill gap-1.5 text-main-foreground border-2 border-transparent items-center justify-center align-middle whitespace-nowrap", {
     variants: {
         size: {
@@ -14,20 +26,21 @@ const tagVariants = cva("inline-flex rounded-pill gap-1.5 text-main-foreground b
         },
         theme: {
             raw: "",
-            main: "bg-primary-subtle text-primary-hover",
             warn: "bg-warn-subtle text-warn-hover",
+            info: "bg-info-subtle text-info-hover",
+            main: "bg-primary-subtle text-primary-hover",
             danger: "bg-danger-subtle text-danger-hover",
-            secondary: "bg-secondary-background text-secondary-foreground",
             success: "bg-success-subtle text-success-hover",
-            info: "bg-info-subtle text-info-hover",
-            loading: "animate-pulse bg-disabled duration-700 opacity-70",
             disabled: "bg-disabled duration-700 opacity-70",
+            loading: "animate-pulse bg-disabled duration-700 opacity-70",
+            secondary: "bg-secondary-background text-secondary-foreground",
+            neutral: "bg-transparent border-card-border border text-foreground",
         },
     },
     defaultVariants: { theme: "main", size: "default" },
 });
 export const Tag = forwardRef(function Tag(_a, ref) {
     var _b;
-    var { className, icon, loading, theme, size } = _a, props = __rest(_a, ["className", "icon", "loading", "theme", "size"]);
-    return (_jsxs(Polymorph, Object.assign({}, props, { ref: ref, "data-theme": theme, as: (_b = props.as) !== null && _b !== void 0 ? _b : "span", className: css(tagVariants({ size, theme }), className), children: [props.children, icon] })));
+    var { className, indicator = undefined, icon, loading, theme, size } = _a, props = __rest(_a, ["className", "indicator", "icon", "loading", "theme", "size"]);
+    return (_jsxs(Polymorph, Object.assign({}, props, { ref: ref, "data-theme": theme, as: (_b = props.as) !== null && _b !== void 0 ? _b : "span", className: css(tagVariants({ size, theme }), className), children: [indicator ? _jsx("span", { className: indicatorVariant({ theme: indicator }) }) : null, icon, props.children] })));
 });

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

@@ -1,11 +1,42 @@
+import React from "react";
 import { Locales } from "the-mask-input";
-export type CalendarProps = {
-    disabledDate?: (date: Date) => boolean;
-    date?: Date;
-    locale?: Locales;
-    markToday?: boolean;
-    autoFocusToday?: boolean;
-    onChange?: (d: Date | undefined) => void;
+type Range = {
+    from?: Date;
+    to?: Date;
 };
-export declare const Calendar: ({ locale, disabledDate, markToday, autoFocusToday, date, onChange }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+type OnChangeDate = (d: Date | undefined) => void;
+type OnChangeRange = (d: Range | undefined) => void;
+export type CalendarProps<T extends "date" | "range" | undefined = undefined> = Partial<{
+    locale: Locales;
+    markToday: boolean;
+    rangeMode: boolean;
+    changeOnlyOnClick: boolean;
+    onChangeMonth: (d: Date) => void;
+    onChangeYear: (d: Date) => void;
+    RenderOnDay: React.FC<{
+        date: Date;
+    }>;
+    disabledDate: (date: Date) => boolean;
+    styles: Partial<{
+        day: string;
+        week: string;
+        weekDay: string;
+        dayFrame: string;
+        calendar: string;
+    }>;
+} & (T extends "date" ? {
+    date: Date;
+    onChange: OnChangeDate;
+} : T extends "range" ? {
+    range: Range;
+    onChange: OnChangeRange;
+} : {}) & ({
+    date: Date;
+    onChange: OnChangeDate;
+} | {
+    range: Range;
+    onChange: OnChangeRange;
+})>;
+export declare const Calendar: ({ RenderOnDay, changeOnlyOnClick, disabledDate, locale, markToday, onChangeMonth, onChangeYear, rangeMode, onChange, styles, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=calendar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAoBvD,MAAM,MAAM,aAAa,GAAG;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,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,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5C,CAAC;AAmDF,eAAO,MAAM,QAAQ,wEAAuF,aAAa,4CAqMxH,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,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,iBAAiB,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,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,MAAM,EAAE,OAAO,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACN,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,YAAY,CAAA;CAAE,GAAG,CAAC,SAAS,OAAO,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAA;CAAE,GAAG,EAAE,CAAC,GAChI,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;AAoDF,eAAO,MAAM,QAAQ,4IAYlB,aAAa,4CAgRf,CAAC"}

package/dist/components/display/calendar.js

@@ -1,17 +1,19 @@
 "use client";
+import { __rest } from "tslib";
 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 { addDays, addMonths, addWeeks, addYears, eachDayOfInterval, endOfWeek, isAfter, isBefore, 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 { useEffect, useRef } 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 { useTranslations } from "../../hooks/use-translate-context";
 import { css } from "../../lib/dom";
-import { Resizable } from "../core/resizable";
-const transition = { type: "spring", bounce: 0.1, duration: 0.3 };
-const dir = (mod) => (n = 1) => ({ x: `${100 * mod * n}%`, opacity: 0.5 });
+import { splitInto } from "../../lib/fns";
+const transition = { type: "spring", bounce: 0.3, duration: 0.6 };
+const dir = (mod) => (n = 1) => ({ x: `${100 * mod * n}%`, opacity: 0.25 });
 const variants = {
     middle: { x: "0%", opacity: 1 },
     enter: dir(1),
@@ -29,67 +31,73 @@ const getOptionsMonth = (date, locale) => Array.from({ length: 12 }).map((_, i)
     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);
-    },
+    ArrowLeft: (date, duration) => (duration === "days" ? subDays(date, 1) : subMonths(date, 1)),
+    ArrowRight: (date, duration) => (duration === "days" ? addDays(date, 1) : addMonths(date, 1)),
+    ArrowUp: (date, duration) => (duration === "days" ? subWeeks(date, 1) : subYears(date, 1)),
+    ArrowDown: (date, duration) => (duration === "days" ? addWeeks(date, 1) : addYears(date, 1)),
 };
-const focusDate = (next, delay = 0) => {
+const focusDate = (origin, root, next, delay = 0) => {
     const d = next.toISOString();
     const select = () => {
-        const element = document.querySelector(`button[data-date="${d}"]`);
-        if (element)
-            return element.focus({ preventScroll: false });
+        var _a;
+        if (!!(origin === null || origin === void 0 ? void 0 : origin.dataset.focustrap)) {
+            const el = (_a = root.current) === null || _a === void 0 ? void 0 : _a.querySelector(`button[data-focustrap="${origin === null || origin === void 0 ? void 0 : origin.dataset.focustrap}"]`);
+            return setTimeout(() => el === null || el === void 0 ? void 0 : el.focus({ preventScroll: false }), delay);
+        }
+        if (root.current) {
+            const element = root.current.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, disabledDate, markToday = true, autoFocusToday = true, date, onChange }) => {
+const inRange = (start, middle, end) => {
+    if (start === undefined || end === undefined)
+        return false;
+    return isAfter(middle, start) && isBefore(middle, end);
+};
+export const Calendar = (_a) => {
+    var { RenderOnDay, changeOnlyOnClick = false, disabledDate, locale, markToday = true, onChangeMonth, onChangeYear, rangeMode = false, onChange, styles } = _a, props = __rest(_a, ["RenderOnDay", "changeOnlyOnClick", "disabledDate", "locale", "markToday", "onChangeMonth", "onChangeYear", "rangeMode", "onChange", "styles"]);
+    const translate = useTranslations();
+    const root = useRef(null);
+    const { date, range } = props;
     const now = date || new Date();
+    const monthClicked = useRef(null);
     const [state, dispatch] = useReducer({
         date: now,
         isAnimating: false,
         year: formatYear(now),
-        direction: undefined,
         months: getOptionsMonth(now, locale),
+        direction: undefined,
+        range: { from: range === null || range === void 0 ? void 0 : range.from, to: range === null || range === void 0 ? void 0 : range.to },
+        selectMode: (rangeMode ? "from" : undefined),
         week: eachDayOfInterval({ start: startOfWeek(now), end: endOfWeek(now) }),
     }, (get) => ({
         onChangeYear: (year) => ({ year }),
         setToday: () => ({ date: startOfDay(new Date()) }),
         onExitComplete: () => {
-            focusDate(get.state().date, 200);
+            focusDate(monthClicked.current || null, root, get.state().date, 200);
+            monthClicked.current = null;
             return { isAnimating: false };
         },
         date: (callback) => {
             const newDate = callback(get.state().date);
             return { date: newDate, year: formatYear(newDate) };
         },
-        nextMonth: () => {
+        nextMonth: (e) => {
+            monthClicked.current = e.currentTarget;
             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: () => {
+        previousMonth: (e) => {
+            monthClicked.current = e.currentTarget;
             const state = get.state();
             if (state.isAnimating)
                 return state;
@@ -97,41 +105,86 @@ export const Calendar = ({ locale, disabledDate, markToday = true, autoFocusToda
             return { date, isAnimating: true, direction: -1, year: formatYear(date) };
         },
         onSelectDate: (e) => {
+            const state = get.state();
+            const isRangeMode = e.currentTarget.dataset.range === "true";
             const d = e.currentTarget.dataset.date || "";
             const date = new Date(d);
-            return { date, year: formatYear(date) };
+            return {
+                date,
+                year: formatYear(date),
+                selectMode: state.selectMode === undefined ? undefined : state.selectMode === "from" ? "to" : "from",
+                range: !isRangeMode
+                    ? state.range
+                    : {
+                        from: state.selectMode === "from" ? date : state.range.from,
+                        to: state.selectMode === "to" ? date : state.range.to,
+                    },
+            };
         },
         onChangeMonth: (e) => {
             const value = e.target.value;
             const array = Array.from(e.target.options);
             const month = array.find((x) => x.value === value);
+            const state = get.state();
             if (month) {
                 const i = month.dataset.index || "";
                 const d = new Date(get.state().date);
                 d.setMonth(+i);
-                return { date: d, year: formatYear(d) };
+                return Object.assign(Object.assign({}, state), { date: d, year: formatYear(d) });
             }
-            return get.state();
+            return state;
         },
         onKeyDown: (e) => {
             const key = e.key;
+            const state = get.state();
             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) };
+                    focusDate(e.target, root, date);
+                    return Object.assign(Object.assign({}, state), { date, year: formatYear(date) });
                 }
             }
             return get.state();
         },
-    }));
-    const days = createDays(state.date);
+    }), {
+        props: { onChangeMonth, onChangeYear },
+        postMiddleware: [
+            (state, _, args) => {
+                var _a, _b;
+                const isValidMethod = args.method === "onChangeMonth" || args.method === "previousMonth" || args.method === "nextMonth";
+                if (isValidMethod)
+                    (_b = (_a = args.props).onChangeMonth) === null || _b === void 0 ? void 0 : _b.call(_a, state.date);
+                return state;
+            },
+            (state, _, args) => {
+                var _a, _b;
+                const isValidMethod = args.method === "onChangeYear";
+                if (isValidMethod)
+                    (_b = (_a = args.props).onChangeYear) === null || _b === void 0 ? void 0 : _b.call(_a, state.date);
+                return state;
+            },
+            (state, _, args) => {
+                const isValidMethod = args.method === "onSelectDate" || args.method === "setToday" || args.method === "onKeyDown";
+                if (rangeMode && isValidMethod && changeOnlyOnClick) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(state.range);
+                    return state;
+                }
+                if (isValidMethod && changeOnlyOnClick)
+                    onChange === null || onChange === void 0 ? void 0 : onChange(state.date);
+                return state;
+            },
+        ],
+    });
+    const zip = splitInto(createDays(state.date), 7);
     const currentAsString = state.date.toISOString();
     const monthString = formatMonth(state.date, locale);
-    useEffect(() => onChange === null || onChange === void 0 ? void 0 : onChange(state.date), [currentAsString]);
+    useEffect(() => {
+        if (!changeOnlyOnClick)
+            onChange === null || onChange === void 0 ? void 0 : onChange(state.date);
+    }, [currentAsString]);
     const defer = useDebounce((y) => {
         dispatch.date((prev) => {
             const d = new Date(prev);
@@ -139,19 +192,24 @@ export const Calendar = ({ locale, disabledDate, markToday = true, autoFocusToda
             return d;
         });
     }, 1200);
-    const onChangeYear = (e) => {
+    const internalOnChangeYear = (e) => {
         const value = e.currentTarget.value;
         dispatch.onChangeYear(value);
+        onChangeYear === null || onChangeYear === void 0 ? void 0 : onChangeYear(new Date(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, { initial: false, mode: "popLayout", presenceAffectsLayout: true, 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", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { 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", { style: { width: `${monthString.length}ch` }, value: monthString, onChange: dispatch.onChangeMonth, className: "w-fit cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", 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 cursor-pointer appearance-none bg-transparent hover:text-primary" })] }) }), _jsx(motion.button, { variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", 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: "text-sm font-medium capitalize", children: dayOfWeek.toLocaleDateString(locale, { weekday: "short" }) }, dayOfWeek.toString()))) }), _jsx(motion.ul, { onKeyDown: dispatch.onKeyDown, variants: variants, custom: state.direction, className: "mt-4 grid grid-cols-7 gap-y-4 pb-2", children: days.map((day) => {
-                                            const key = day.toISOString();
-                                            const isSelected = key === currentAsString;
-                                            const today = isToday(day) && markToday;
-                                            const disabledByFn = (disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(day)) || false;
-                                            const disableDate = !isSameMonth(day, state.date) || disabledByFn;
-                                            return (_jsx("li", { className: "flex w-full items-center justify-center", children: _jsx("button", { type: "button", "data-date": key, disabled: disabledByFn, onClick: dispatch.onSelectDate, "data-view": state.date.getMonth().toString(), className: css(`flex size-8 items-center justify-center rounded-full font-semibold proportional-nums disabled:cursor-not-allowed ${today ? "text-primary" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`), children: day.getDate() }) }, key));
-                                        }) })] }, monthString) }) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "duration-300 transition-transform hover:scale-105", type: "button", onClick: dispatch.setToday, children: "Today" }) })] }) }));
+    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { ref: root, className: css("relative overflow-hidden", styles === null || styles === void 0 ? void 0 : 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, "data-focustrap": "prev", variants: removeImmediately, onClick: dispatch.previousMonth, className: "z-calendar rounded-full p-1.5 hover:bg-primary", 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", { style: { width: `${monthString.length}ch` }, value: monthString, onChange: dispatch.onChangeMonth, className: "w-fit cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", children: state.months }), _jsx(TheMaskInput, { mask: "int", value: state.year, maxLength: 4, placeholder: "YYYY", 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, "data-focustrap": "next", variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", 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%)",
+                                            } })] }), _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 === null || styles === void 0 ? void 0 : styles.weekDay), children: dayOfWeek.toLocaleDateString(locale, { weekday: "short" }) }, dayOfWeek.toString()))) }) }), _jsx(motion.tbody, { layout: true, variants: variants, custom: state.direction, onKeyDown: dispatch.onKeyDown, className: css(styles === null || styles === void 0 ? void 0 : styles.week), children: zip.map((week, index) => (_jsx("tr", { className: styles === null || styles === void 0 ? void 0 : styles.week, children: week.map((day) => {
+                                                    var _a, _b, _c, _d;
+                                                    const key = day.toISOString();
+                                                    const isSelected = rangeMode
+                                                        ? key === ((_a = range === null || range === void 0 ? void 0 : range.to) === null || _a === void 0 ? void 0 : _a.toISOString()) || key === ((_b = range === null || range === void 0 ? void 0 : range.from) === null || _b === void 0 ? void 0 : _b.toISOString())
+                                                        : key === (date === null || date === void 0 ? void 0 : date.toISOString());
+                                                    const today = isToday(day) && markToday;
+                                                    const disabledByFn = (disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(day)) || false;
+                                                    const disableDate = !isSameMonth(day, state.date) || disabledByFn;
+                                                    const isInRange = rangeMode ? inRange(range === null || range === void 0 ? void 0 : range.from, day, range === null || range === void 0 ? void 0 : range.to) : false;
+                                                    return (_jsxs("td", { align: "center", className: css("relative", styles === null || styles === void 0 ? void 0 : styles.dayFrame), children: [_jsxs("button", { type: "button", "data-date": key, disabled: disabledByFn, "data-range": rangeMode, onClick: dispatch.onSelectDate, "data-view": state.date.getMonth().toString(), className: css(`flex size-10 items-center justify-center rounded-full font-semibold proportional-nums disabled:cursor-not-allowed ${today ? "text-primary" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, styles === null || styles === void 0 ? void 0 : styles.day, isInRange ? "size-10 border border-dashed border-card-border" : ""), children: [day.getDate(), isSelected && ((_c = state.range.from) === null || _c === void 0 ? void 0 : _c.toISOString()) === key ? (_jsx("span", { className: "absolute -top-2 left-0 h-full w-full", children: _jsx("span", { className: "text-xs", children: translate.calendarFromDate }) })) : null, isSelected && ((_d = state.range.to) === null || _d === void 0 ? void 0 : _d.toISOString()) === key ? (_jsx("span", { className: "absolute -top-2 left-0 h-full w-full", children: _jsx("span", { className: "text-xs", children: translate.calendarToDate }) })) : null] }), RenderOnDay ? _jsx(RenderOnDay, { date: day }) : null] }, key));
+                                                }) }, `week-${week.length}-${index}`))) })] })] }, monthString) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "duration-300 transition-transform hover:scale-105", type: "button", onClick: dispatch.setToday, children: "Today" }) })] }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,EAAE,CAAC;AA6D5B,eAAO,MAAM,YAAY,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CAoEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,EAAE,CAAC;AA2D5B,eAAO,MAAM,YAAY,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CAoEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}

package/dist/components/display/list.js

@@ -3,9 +3,7 @@ import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDis
 import { AnimatePresence, motion, MotionConfig } from "framer-motion";
 import { XIcon } from "lucide-react";
 import React, { Fragment, useCallback, useId, useState } from "react";
-const FloatItem = ({ item, context, setter, get, refs }) => {
-    return (_jsx(FloatingPortal, { children: _jsx(MotionConfig, { reducedMotion: "user", transition: { type: "tween", stiffness: 25, duration: 0.2 }, children: _jsxs(AnimatePresence, { presenceAffectsLayout: true, children: [_jsx(AnimatePresence, { children: item ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "pointer-events-none fixed inset-0 top-0 z-floating h-screen w-screen bg-floating-overlay/70" })) : null }), _jsx(AnimatePresence, { children: item ? (_jsx(FloatingOverlay, { lockScroll: true, className: "absolute inset-0 z-tooltip flex items-center justify-center", children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, Object.assign({ layout: true, layoutId: `item-${item.id}`, className: "relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow", ref: refs.setFloating }, get(), { children: [_jsx("nav", { className: "absolute right-4 top-1 lg:right-2", children: _jsx("button", { type: "button", onClick: setter, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) }), _jsxs("header", { className: "flex w-full flex-wrap items-center justify-between gap-2", children: [_jsx("h3", { className: "min-w-full text-balance text-2xl font-medium", children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), item.children] })) }) })) : null })] }) }) }));
-};
+const FloatItem = ({ item, context, setter, get, refs }) => (_jsx(FloatingPortal, { children: _jsx(MotionConfig, { reducedMotion: "user", transition: { type: "tween", stiffness: 25, duration: 0.2 }, children: _jsxs(AnimatePresence, { presenceAffectsLayout: true, children: [_jsx(AnimatePresence, { children: item ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "pointer-events-none fixed inset-0 top-0 z-floating h-screen w-screen bg-floating-overlay/70" })) : null }), _jsx(AnimatePresence, { children: item ? (_jsx(FloatingOverlay, { lockScroll: true, className: "absolute inset-0 z-tooltip flex items-center justify-center", children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, Object.assign({ layout: true, layoutId: `item-${item.id}`, className: "relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow", ref: refs.setFloating }, get(), { children: [_jsx("nav", { className: "absolute right-4 top-1 lg:right-2", children: _jsx("button", { type: "button", onClick: setter, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) }), _jsxs("header", { className: "flex w-full flex-wrap items-center justify-between gap-2", children: [_jsx("h3", { className: "min-w-full text-balance text-2xl font-medium", children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), item.children] })) }) })) : null })] }) }) }));
 export const AnimatedList = (props) => {
     const [selected, setSelected] = useState(null);
     const id = useId();

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

@@ -0,0 +1,32 @@
+import React from "react";
+declare const typeMap: {
+    tag: () => null;
+    custom: () => null;
+    record: ({ item }: {
+        item: TimelineItemProps;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export type TimelineItemType = keyof typeof typeMap;
+export type TimelineItemProps = {
+    id: string | number;
+    date: Date;
+    type: TimelineItemType;
+    avatar?: {
+        img?: string;
+        name: string;
+        profile?: string;
+    };
+    text?: string;
+    custom?: React.FC<{
+        item: TimelineItemProps;
+    }>;
+};
+export type TimelineProps = {
+    items: TimelineItemProps[];
+    Custom?: React.FC<{
+        item: TimelineItemProps;
+    }>;
+};
+export declare const Timeline: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/display/timeline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,QAAA,MAAM,OAAO;;;;cA4B+B,iBAAiB;;CAAI,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,OAAO,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,gBAAgB,CAAC;IACvB,MAAM,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,iBAAiB,CAAA;KAAE,CAAC,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,iBAAiB,CAAA;KAAE,CAAC,CAAA;CAAE,CAAC;AAE3G,eAAO,MAAM,QAAQ,UAAW,aAAa,4CAyB5C,CAAC"}

package/dist/components/display/timeline.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessagesSquareIcon } from "lucide-react";
+import { Fragment } from "react";
+const typeMap = {
+    tag: () => null,
+    custom: () => null,
+    record: ({ item }) => {
+        var _a, _b, _c, _d;
+        return (_jsxs(Fragment, { children: [_jsxs("div", { className: "relative", children: [_jsx("img", { src: (_a = item.avatar) === null || _a === void 0 ? void 0 : _a.img, alt: (_b = item.avatar) === null || _b === void 0 ? void 0 : _b.name, className: "flex aspect-square size-12 items-center justify-center rounded-full bg-primary-hover" }), _jsx("span", { className: "absolute -bottom-0.5 -right-1 rounded-full rounded-tl bg-card-background px-0.5 py-px", children: _jsx(MessagesSquareIcon, { "aria-hidden": "true", className: "aspect-square size-5" }) })] }), _jsxs("div", { className: "min-w-0 flex-1 text-foreground", children: [_jsxs("div", { children: [_jsx("a", { href: (_c = item.avatar) === null || _c === void 0 ? void 0 : _c.profile, className: "text-base font-medium text-primary", children: (_d = item.avatar) === null || _d === void 0 ? void 0 : _d.name }), _jsxs("p", { className: "mt-0.5 text-sm", children: ["Commented ", item.date.toISOString()] })] }), _jsx("div", { className: "mt-2 text-wrap text-sm", children: _jsx("p", { children: item.text }) })] })] }));
+    },
+};
+export const Timeline = (props) => {
+    return (_jsx("div", { className: "flow-root", children: _jsx("ul", { role: "list", className: "-mb-8", children: props.items.map((item, index) => {
+                var _a;
+                const Render = (_a = typeMap[item.type]) !== null && _a !== void 0 ? _a : null;
+                if (Render === null && props.Custom) {
+                    return _jsx(props.Custom, { item: item });
+                }
+                return (_jsx("li", { children: _jsxs("div", { className: "relative pb-8", children: [index !== props.items.length - 1 ? (_jsx("span", { "aria-hidden": "true", className: "absolute left-5 top-5 -ml-px h-full w-0.5 bg-card-border" })) : null, _jsx("div", { className: "relative flex items-start space-x-3", children: _jsx(Render, { item: item }) })] }) }, item.id));
+            }) }) }));
+};

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":"AAgBA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAE7F,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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;IACtD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CA0E/D,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/floating/dropdown.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAoC,MAAM,OAAO,CAAC;AAE7F,KAAK,aAAa,GAAG;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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;IACtD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CAoE/D,CAAC"}

package/dist/components/floating/dropdown.js

@@ -3,7 +3,6 @@ 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";
 export const Dropdown = (props) => {
-    var _a, _b;
     const headingId = useId();
     const [open, setOpen] = useState(props.open);
     const arrowRef = useRef(null);
@@ -36,5 +35,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(props.buttonProps), { type: "button", children: props.trigger })), open && (_jsx(FloatingPortal, { id: `${headingId}-portal`, children: _jsx(FloatingFocusManager, { restoreFocus: (_a = props.restoreFocus) !== null && _a !== void 0 ? _a : true, returnFocus: (_b = props.restoreFocus) !== null && _b !== void 0 ? _b : true, visuallyHiddenDismiss: 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] })) }) }))] }));
+    return (_jsxs(Fragment, { children: [_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(props.buttonProps), { type: "button", children: props.trigger })), open && (_jsx(FloatingPortal, { preserveTabOrder: true, id: `${headingId}-portal`, children: _jsx(FloatingFocusManager, { guards: true, restoreFocus: true, returnFocus: true, visuallyHiddenDismiss: true, context: context, modal: false, children: _jsxs("div", Object.assign({ className: "relative isolate z-floating min-w-96 rounded-lg border border-floating-border bg-floating-background p-6 shadow-2xl", 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: "text-left text-2xl font-medium leading-snug tracking-wide", children: props.title }) }), props.children] })) }) }))] }));
 };

package/dist/components/floating/expand.d.ts

@@ -0,0 +1,9 @@
+import { motion } from "framer-motion";
+import { PropsWithChildren } from "react";
+import { Label, Override } from "../../types";
+import { ButtonProps } from "../core/button";
+export type ExpandProps = Override<ButtonProps<typeof motion.button>, {
+    trigger: Label;
+}>;
+export declare const Expand: (props: PropsWithChildren<ExpandProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=expand.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../src/components/floating/expand.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAU,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE;IAAE,OAAO,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAE1F,eAAO,MAAM,MAAM,UAAW,iBAAiB,CAAC,WAAW,CAAC,4CA4C3D,CAAC"}