beez-ui 0.4.0

package/dist/components/animated-theme-toggler.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useSyncExternalStore } from "react";
+import { Monitor, Moon, Sun, SunMoon } from "lucide-react";
+import { flushSync } from "react-dom";
+import { useTheme } from "next-themes";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { cn } from "../lib/utils.js";
+const THEME_OPTIONS = [
+    {
+        icon: Sun,
+        label: "Claro",
+        value: "light",
+    },
+    {
+        icon: Moon,
+        label: "Oscuro",
+        value: "dark",
+    },
+    {
+        icon: Monitor,
+        label: "Sistema",
+        value: "system",
+    },
+];
+/** Restricts transition styling to theme changes initiated by this component. */
+const THEME_TRANSITION_CLASS = "BeezThemeTransition";
+/** Respects user preferences when deciding whether to animate a theme change. */
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+export const AnimatedThemeToggler = ({ className, duration = 400, disabled, theme: controlledTheme, resolvedTheme: controlledResolvedTheme, onThemeChange: controlledOnThemeChange, ...props }) => {
+    const providerTheme = useTheme();
+    const theme = controlledTheme ?? providerTheme.theme;
+    const resolvedTheme = controlledResolvedTheme ?? providerTheme.resolvedTheme;
+    const onThemeChange = controlledOnThemeChange ?? providerTheme.setTheme;
+    const buttonRef = useRef(null);
+    const isHydrated = useSyncExternalStore(() => () => undefined, () => true, () => false);
+    const isThemeReady = isHydrated &&
+        (resolvedTheme === "light" || resolvedTheme === "dark");
+    const isDark = resolvedTheme === "dark";
+    const selectedTheme = theme === "light" || theme === "dark" || theme === "system"
+        ? theme
+        : "system";
+    const isDisabled = !isThemeReady || disabled;
+    const selectTheme = useCallback((nextTheme) => {
+        const button = buttonRef.current;
+        if (!button || typeof document === "undefined" || isDisabled) {
+            return;
+        }
+        const { top, left, width, height } = button.getBoundingClientRect();
+        const x = left + width / 2;
+        const y = top + height / 2;
+        const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+        const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+        const maxRadius = Math.hypot(Math.max(x, viewportWidth - x), Math.max(y, viewportHeight - y));
+        const applyTheme = () => {
+            onThemeChange(nextTheme);
+        };
+        if (typeof document.startViewTransition !== "function" ||
+            typeof document.documentElement.animate !== "function" ||
+            window.matchMedia?.(REDUCED_MOTION_QUERY).matches) {
+            applyTheme();
+            return;
+        }
+        document.documentElement.classList.add(THEME_TRANSITION_CLASS);
+        const transition = document.startViewTransition(() => {
+            flushSync(applyTheme);
+        });
+        void transition.ready.then(() => {
+            return document.documentElement.animate({
+                clipPath: [
+                    `circle(0px at ${x}px ${y}px)`,
+                    `circle(${maxRadius}px at ${x}px ${y}px)`,
+                ],
+            }, {
+                duration,
+                easing: "ease-in-out",
+                pseudoElement: "::view-transition-new(root)",
+            }).finished;
+        }).catch(() => {
+            // Skipped transitions retain the applied theme without an unhandled rejection.
+        }).finally(() => {
+            document.documentElement.classList.remove(THEME_TRANSITION_CLASS);
+        });
+    }, [duration, isDisabled, onThemeChange]);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", ref: buttonRef, disabled: isDisabled, className: cn(className), ...props, children: [!isThemeReady ? _jsx(SunMoon, { "aria-hidden": "true" }) : isDark ? _jsx(Moon, { "aria-hidden": "true" }) : _jsx(Sun, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Alternar tema" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-44 rounded-xl p-2", side: "bottom", sideOffset: 8, children: _jsx(DropdownMenuRadioGroup, { onValueChange: (nextTheme) => {
+                        selectTheme(nextTheme);
+                    }, value: selectedTheme, children: THEME_OPTIONS.map(({ icon: Icon, label, value }) => (_jsxs(DropdownMenuRadioItem, { className: "h-11 gap-3 px-3 pr-9 text-base", value: value, children: [_jsx(Icon, { "aria-hidden": "true", className: "size-5" }), _jsx("span", { children: label })] }, value))) }) })] }));
+};

package/dist/components/avatar.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+/** Accepts native image props and nullable image sources from application results. */
+export type AvatarImageProps = Omit<React.ComponentProps<"img">, "src"> & {
+    src?: string | null;
+};
+declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
+    size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+/** Delegates loading, failure and fallback synchronization to the avatar primitive. */
+declare function AvatarImage({ alt, className, src, ...props }: AvatarImageProps): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/components/avatar.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { cn } from "../lib/utils.js";
+import { useBeezUIComponents } from "../providers/beez-ui-provider.js";
+function Avatar({ className, size = "default", ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
+}
+/** Delegates loading, failure and fallback synchronization to the avatar primitive. */
+function AvatarImage({ alt = "", className, src, ...props }) {
+    const { Image: ImageComponent = "img" } = useBeezUIComponents();
+    return (_jsx(AvatarPrimitive.Image, { render: _jsx(ImageComponent, {}), keepMounted: true, alt: alt, "data-slot": "avatar-image", className: cn("absolute inset-0 aspect-square size-full rounded-full object-cover data-[loading]:opacity-0 data-[error]:hidden", className), src: src ?? undefined, loading: "lazy", decoding: "async", ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };

package/dist/components/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/badge.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "../lib/utils.js";
+const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+            destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+            outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+            ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "span";
+    return (_jsx(Comp, { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/components/button.d.ts

@@ -0,0 +1,10 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react").JSX.Element;
+export { Button, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "../lib/utils.js";
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/80",
+            outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+            icon: "size-8",
+            "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+            "icon-lg": "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : ButtonPrimitive;
+    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

package/dist/components/calendar.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { DayPicker, type DayButton, type Locale } from "react-day-picker";
+import { Button } from "./button.js";
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
+    locale?: Partial<Locale>;
+}): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/components/calendar.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { es } from "react-day-picker/locale";
+import { DayPicker, getDefaultClassNames, } from "react-day-picker";
+import { cn } from "../lib/utils.js";
+import { Button, buttonVariants } from "./button.js";
+import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale = es, formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: cn("w-fit", defaultClassNames.root),
+            months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+            month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+            nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+            month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+            dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+            dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+            dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+            caption_label: cn("font-medium select-none", captionLayout === "label"
+                ? "text-sm"
+                : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+            month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+            weekdays: cn("flex", defaultClassNames.weekdays),
+            weekday: cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+            week: cn("mt-2 flex w-full", defaultClassNames.week),
+            week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+            week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+            day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber
+                ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+                : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
+            range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
+            range_middle: cn("rounded-none", defaultClassNames.range_middle),
+            range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
+            today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+            outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+            disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+            hidden: cn("invisible", defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === "left") {
+                    return (_jsx(ChevronLeft, { className: cn("size-4", className), ...props }));
+                }
+                if (orientation === "right") {
+                    return (_jsx(ChevronRight, { className: cn("size-4", className), ...props }));
+                }
+                return (_jsx(ChevronDown, { className: cn("size-4", className), ...props }));
+            },
+            DayButton: ({ ...props }) => (_jsx(CalendarDayButton, { locale: locale, ...props })),
+            WeekNumber: ({ children, ...props }) => {
+                return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+}
+export { Calendar, CalendarDayButton };

package/dist/components/card.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/card.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function Card({ className, size = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-4 group-data-[size=sm]/card:px-3", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/carousel.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { Button } from "./button.js";
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+} & CarouselProps;
+declare function useCarousel(): CarouselContextProps;
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
+declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };

package/dist/components/carousel.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+    const context = React.useContext(CarouselContext);
+    if (!context) {
+        throw new Error("useCarousel must be used within a <Carousel />");
+    }
+    return context;
+}
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+    const [carouselRef, api] = useEmblaCarousel({
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+    }, plugins);
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const onSelect = React.useCallback((api) => {
+        if (!api)
+            return;
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+    }, []);
+    const scrollPrev = React.useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+    const scrollNext = React.useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+    const handleKeyDown = React.useCallback((event) => {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            scrollPrev();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [scrollPrev, scrollNext]);
+    React.useEffect(() => {
+        if (!api || !setApi)
+            return;
+        setApi(api);
+    }, [api, setApi]);
+    React.useEffect(() => {
+        if (!api)
+            return;
+        let isMounted = true;
+        queueMicrotask(() => {
+            if (isMounted) {
+                onSelect(api);
+            }
+        });
+        api.on("reInit", onSelect);
+        api.on("select", onSelect);
+        return () => {
+            isMounted = false;
+            api?.off("reInit", onSelect);
+            api?.off("select", onSelect);
+        };
+    }, [api, onSelect]);
+    return (_jsx(CarouselContext.Provider, { value: {
+            carouselRef,
+            api: api,
+            opts,
+            orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+            scrollPrev,
+            scrollNext,
+            canScrollPrev,
+            canScrollNext,
+        }, children: _jsx("div", { onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children: children }) }));
+}
+function CarouselContent({ className, ...props }) {
+    const { carouselRef, orientation } = useCarousel();
+    return (_jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: _jsx("div", { className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className), ...props }) }));
+}
+function CarouselItem({ className, ...props }) {
+    const { orientation } = useCarousel();
+    return (_jsx("div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className), ...props }));
+}
+function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }) {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return (_jsxs(Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
+            ? "top-1/2 -left-12 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: [_jsx(ChevronLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Previous slide" })] }));
+}
+function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }) {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return (_jsxs(Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
+            ? "top-1/2 -right-12 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: [_jsx(ChevronRightIcon, {}), _jsx("span", { className: "sr-only", children: "Next slide" })] }));
+}
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+export { Checkbox };

package/dist/components/checkbox.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { CheckIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+}
+export { Checkbox };

package/dist/components/data-table.d.ts

@@ -0,0 +1,117 @@
+import * as React from "react";
+import type { ColumnDef, OnChangeFn, SortingState, VisibilityState } from "@tanstack/react-table";
+import { type AppliedFilter, type FilterQualifierConfig } from "./filter-query-grammar.js";
+export type { DataTableColumnFilterValue } from "../types/data-table.js";
+/**
+ * Controles imperativos de la barra unificada que la tabla expone vía
+ * `queryFilterControlsRef`, para que el consumidor sincronice la barra desde
+ * fuera (p. ej. al clickear un chip de carpeta).
+ */
+export interface DataTableQueryFilterControls {
+    /** Devuelve el texto actual de la barra unificada. */
+    getQueryText: () => string;
+    /** Reemplaza el texto completo de la barra y aplica los filtros parseados. */
+    setQueryText: (query: string) => void;
+    /**
+     * Reemplaza los filtros de carpeta de la barra: deja un único `carpeta:<id>`
+     * (o ninguno si `folderId` es `null`), preservando el resto de los filtros.
+     */
+    setSingleFolderFilter: (folderId: string | null) => void;
+}
+export interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    emptyMessage: string;
+    toolbarActions?: React.ReactNode;
+    onVisibleRowsChange?: (visibleRows: TData[]) => void;
+    onCellClick?: (event: React.MouseEvent<HTMLTableCellElement>, row: TData, columnId: string) => void;
+    getRowClassName?: (row: TData) => string | undefined;
+    sorting?: SortingState;
+    onSortingChange?: (sorting: SortingState) => void;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    filterColumnId?: string;
+    filterLabel?: string;
+    filterPlaceholder?: string;
+    filterExtraContent?: React.ReactNode;
+    filterValue?: string;
+    onFilterValueChange?: (value: string) => void;
+    /**
+     * Cuando se provee, agrega una barra de query unificada estilo GitHub
+     * (autocompletado de `clave:valor`) por encima de los controles de filtro
+     * clásicos. Ambas vistas comparten la misma fuente de verdad: la barra parsea
+     * la query y escribe en los canales de descripción, exclusiones y avanzados,
+     * y se re-sincroniza cuando esos controles clásicos cambian.
+     */
+    queryFilterConfig?: FilterQualifierConfig[];
+    queryFilterPlaceholder?: string;
+    queryFilterLabel?: string;
+    /**
+     * Notifica los filtros estructurados parseados desde la barra unificada
+     * (cualquier kind, con o sin columna, incluyendo negados) para que el
+     * consumidor los aplique con su propio predicado de dominio.
+     */
+    onAppliedFiltersChange?: (appliedFilters: AppliedFilter[]) => void;
+    /** Ref para acceder a los controles imperativos de la barra unificada. */
+    queryFilterControlsRef?: React.MutableRefObject<DataTableQueryFilterControls | null>;
+    /** Acción opcional dentro del input de la barra unificada, al final derecho. */
+    queryFilterTrailingAction?: React.ReactNode;
+    /**
+     * Agrupa visualmente las filas por adyacencia: cuando la clave de grupo de una
+     * fila difiere de la anterior se intercala una fila de encabezado. Las filas
+     * deben venir pre-ordenadas por grupo. El objeto debe ser memoizado por el
+     * consumidor (invalida la memo del cuerpo de la tabla).
+     */
+    rowGroups?: {
+        getGroupKey: (row: TData) => string;
+        /**
+         * Valor de orden del grupo de una fila (comparable con <). Cuando se
+         * provee, los grupos se ordenan por este valor; si no, quedan en orden de
+         * primera aparición. Las filas se particionan por clave en ambos casos,
+         * así que un grupo nunca se repite aunque las filas lleguen intercaladas
+         * (p. ej. con orden manual del usuario).
+         */
+        getGroupSortValue?: (row: TData) => number | string;
+        renderGroupHeader: (groupKey: string, groupRowCount: number) => React.ReactNode;
+        /** Grupos cuyas filas están colapsadas (solo se ve su encabezado). */
+        collapsedGroupKeys?: ReadonlySet<string>;
+        /**
+         * Colapsa/expande el grupo desde su encabezado (estilo accordion). Sin este
+         * callback los encabezados no son interactivos.
+         */
+        onGroupToggle?: (groupKey: string) => void;
+    };
+    showExcludeFilterToggle?: boolean;
+    excludeFilterValues?: string[];
+    onExcludeFilterValuesChange?: (values: string[]) => void;
+    excludeFilterPlaceholder?: string;
+    excludeFilterLabel?: string;
+    excludeFilterToggleLabel?: string;
+    excludeFilterRowsCountByValue?: Record<string, number>;
+    excludeFilterUniqueRowsCount?: number;
+    showColumnVisibilityToggle?: boolean;
+    columnVisibilityButtonLabel?: string;
+    columnVisibilityMenuLabel?: string;
+    /**
+     * Ítems extra al tope del menú de columnas (p. ej. preferencias de vista);
+     * se separan de la sección de columnas con un separador.
+     */
+    columnVisibilityMenuExtraContent?: React.ReactNode;
+    sortingBadgeLabelOverrides?: Record<string, string>;
+    /**
+     * Ids de columnas de orden "internas" (p. ej. la posición de grupo) que el
+     * badge de orden y su botón "Quitar orden" deben ignorar.
+     */
+    sortingBadgeIgnoredColumnIds?: ReadonlySet<string>;
+    selectAllColumnsLabel?: string;
+    deselectAllColumnsLabel?: string;
+    hideableColumnsDefaultVisibility?: VisibilityState;
+}
+export interface DataTableColumnMeta {
+    label?: string;
+    cellClassName?: string;
+    headerClassName?: string;
+    isClickable?: boolean;
+    onHeaderClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
+}
+export declare function DataTable<TData, TValue>({ columns, data, emptyMessage, toolbarActions, onVisibleRowsChange, onCellClick, getRowClassName, sorting: controlledSorting, onSortingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, filterColumnId, filterLabel, filterPlaceholder, filterExtraContent, filterValue: controlledFilterValue, onFilterValueChange, queryFilterConfig, queryFilterPlaceholder, queryFilterLabel, onAppliedFiltersChange, queryFilterControlsRef, queryFilterTrailingAction, rowGroups, showExcludeFilterToggle, excludeFilterValues: controlledExcludeFilterValues, onExcludeFilterValuesChange, excludeFilterPlaceholder, excludeFilterLabel, excludeFilterToggleLabel, excludeFilterRowsCountByValue, excludeFilterUniqueRowsCount, showColumnVisibilityToggle, columnVisibilityButtonLabel, columnVisibilityMenuLabel, columnVisibilityMenuExtraContent, sortingBadgeLabelOverrides, sortingBadgeIgnoredColumnIds, selectAllColumnsLabel, deselectAllColumnsLabel, hideableColumnsDefaultVisibility, }: DataTableProps<TData, TValue>): React.JSX.Element;