@minutemailer/kit 1.4.1 → 2.0.0

package/components/details-content.js

@@ -13,5 +13,5 @@ export function DetailsContent({ children, onClose = () => { }, close = false, }
     if (!mountNode) {
         return null;
     }
-    return createPortal(_jsxs("div", { className: "p-4", children: [close && (_jsx("div", { className: "absolute top-4 right-4", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, children: _jsx(Close, {}) }) })), _jsx("div", { children: children })] }), mountNode);
+    return createPortal(_jsxs("div", { className: "p-4", children: [close && (_jsx("div", { className: "absolute top-4 right-4", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, "aria-label": "Close", children: _jsx(Close, {}) }) })), _jsx("div", { children: children })] }), mountNode);
 }

package/components/details.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { motion } from 'motion/react';
+import { cn } from '../utils/utils.js';
 import { useDetails } from './minutemailer-kit.js';
 export function Details({ children }) {
     const ref = useRef(null);
@@ -11,5 +11,5 @@ export function Details({ children }) {
         }
         return () => setMountNode(null);
     }, [setMountNode]);
-    return (_jsx(motion.div, { initial: { translateX: visible ? 0 : '100%', translateY: 0 }, animate: { translateX: visible ? 0 : '100%', translateY: 0 }, className: "fixed top-(--header-height) right-0 bottom-0 z-25 bg-background w-full max-w-[658px] shadow-md", ref: ref, children: children }, "details"));
+    return (_jsx("div", { ref: ref, className: cn('fixed top-(--header-height) right-0 bottom-0 z-25 bg-background w-full max-w-[658px] shadow-md transition-transform duration-300 ease-out', visible ? 'translate-x-0' : 'translate-x-full'), children: children }));
 }

package/components/donut-chart.js

@@ -3,8 +3,20 @@ import { Cell, Label, Pie, PieChart } from 'recharts';
 import { ChartContainer } from '../components/ui/chart.js';
 export function DonutChart({ percentage, size = 120 }) {
     const COLORS = {
-        filled: 'oklch(0.683 0.178 158.484)', // Primary green
-        unfilled: 'oklch(0.922 0 0 / 0.3)', // Light gray transparent
+        filled: 'var(--primary)',
+        unfilled: 'var(--muted)',
+    };
+    // Determine font size class based on chart size
+    const getFontClass = () => {
+        if (size < 80)
+            return 'text-xs';
+        if (size < 120)
+            return 'text-sm';
+        if (size < 160)
+            return 'text-base';
+        if (size < 200)
+            return 'text-xl';
+        return 'text-2xl';
     };
     // Include both filled and unfilled portions in the same data
     const chartData = [
@@ -24,8 +36,8 @@ export function DonutChart({ percentage, size = 120 }) {
     return (_jsx(ChartContainer, { config: chartConfig, className: "aspect-square", style: { width: `${size}px`, height: `${size}px` }, children: _jsx(PieChart, { children: _jsxs(Pie, { data: chartData, dataKey: "value", nameKey: "name", innerRadius: "60%", outerRadius: "80%", startAngle: 90, endAngle: 450, paddingAngle: 0, stroke: "none", isAnimationActive: false, children: [_jsx(Cell, { fill: COLORS.filled, stroke: "none" }), _jsx(Cell, { fill: COLORS.unfilled, stroke: "none" }), _jsx(Label, { content: ({ viewBox }) => {
                             if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
                                 const centerX = Number(viewBox.cx);
-                                const centerY = Number(viewBox.cy) + 4;
-                                return (_jsx("text", { x: centerX, y: centerY, textAnchor: "middle", dominantBaseline: "middle", children: _jsxs("tspan", { x: centerX, y: centerY, fill: COLORS.filled, className: "text-base font-semibold", children: [percentage, "%"] }) }));
+                                const centerY = Number(viewBox.cy);
+                                return (_jsx("text", { x: centerX, y: centerY, textAnchor: "middle", dominantBaseline: "middle", children: _jsxs("tspan", { x: centerX, y: centerY, fill: COLORS.filled, className: `${getFontClass()} font-semibold`, children: [percentage, "%"] }) }));
                             }
                         } })] }) }) }));
 }

package/components/engagement-chart.js

@@ -15,11 +15,11 @@ const defaultData = [
 const chartConfig = {
     opens: {
         label: 'Opens',
-        color: 'oklch(0.683 0.178 158.484)', // Primary green
+        color: 'var(--primary)',
     },
     clicks: {
         label: 'Clicks',
-        color: 'oklch(0.656 0.173 256.68)', // Secondary purple
+        color: 'var(--secondary)',
     },
 };
 export function EngagementChart({ data = defaultData }) {

package/components/index.d.ts

@@ -0,0 +1,11 @@
+export { Confirm } from './confirm.js';
+export { Details } from './details.js';
+export { DetailsContent } from './details-content.js';
+export { DonutChart, type DonutChartProps } from './donut-chart.js';
+export { EngagementChart, type EngagementChartProps } from './engagement-chart.js';
+export { ImageSlot, type ImageSlotAction, type ImageSlotProps } from './image-slot.js';
+export { S3Image, type S3ImageProps } from './s3-image.js';
+export { Context, MinutemailerKit, useMinutemailerKit, useS3Config, useDetails, } from './minutemailer-kit.js';
+export { More, type MoreOption, type MoreProps } from './more.js';
+export { PageTabs, type PageTab, type PageTabsProps } from './page-tabs.js';
+export { ViewTitle, type ViewTitleProps } from './view-title.js';

package/components/index.js

@@ -0,0 +1,19 @@
+// Barrel export for composite/application-level components
+// Confirm Dialog
+export { Confirm } from './confirm.js';
+// Details
+export { Details } from './details.js';
+export { DetailsContent } from './details-content.js';
+// Charts
+export { DonutChart } from './donut-chart.js';
+export { EngagementChart } from './engagement-chart.js';
+// Image components
+export { ImageSlot } from './image-slot.js';
+export { S3Image } from './s3-image.js';
+// Minutemailer Kit (Context & Providers)
+export { Context, MinutemailerKit, useMinutemailerKit, useS3Config, useDetails, } from './minutemailer-kit.js';
+// More (Dropdown actions)
+export { More } from './more.js';
+// Page components
+export { PageTabs } from './page-tabs.js';
+export { ViewTitle } from './view-title.js';

package/components/more.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { type ComponentType } from 'react';
 export type MoreOption = {
     value: string;
     name: string;
-    icon?: React.ComponentType<any>;
+    icon?: ComponentType<Record<string, unknown>>;
     variant?: 'default' | 'destructive';
     disabled?: boolean;
     separator?: boolean;

package/components/more.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import { Fragment } from 'react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../components/ui/dropdown-menu.js';
 import { Button } from '../components/ui/button.js';
 import MoreIcon from '../icons/More.js';
@@ -10,5 +10,5 @@ export function More({ options, loading = false, onChange, disabled = false, })
             onChange(value);
         }
     };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", disabled: disabled || loading, "aria-label": "More options", children: loading ? _jsx(Spinner, {}) : _jsx(MoreIcon, {}) }) }), _jsx(DropdownMenuContent, { align: "end", children: options.map((option, index) => (_jsxs(React.Fragment, { children: [option.separator && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "py-2.5", variant: option.variant, disabled: option.disabled, onSelect: () => handleSelect(option.value), children: [option.icon && _jsx(option.icon, {}), option.name] })] }, option.value))) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", disabled: disabled || loading, "aria-label": "More options", children: loading ? _jsx(Spinner, {}) : _jsx(MoreIcon, {}) }) }), _jsx(DropdownMenuContent, { align: "end", children: options.map((option, index) => (_jsxs(Fragment, { children: [option.separator && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "py-2.5", variant: option.variant, disabled: option.disabled, onSelect: () => handleSelect(option.value), children: [option.icon && _jsx(option.icon, {}), option.name] })] }, option.value))) })] }));
 }

package/components/page-tabs.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '../components/ui/button.js';
 import { cn } from '../utils/utils.js';
 export function PageTabs({ tabs, activeTab, onTabChange, className, }) {
-    return (_jsx("div", { className: cn('flex items-center border-b bg-background px-6', className), children: _jsx("div", { className: "flex h-12 items-center gap-6", children: tabs.map((tab) => (_jsx(Button, { variant: "ghost", className: cn('h-12 rounded-none border-b-2 px-2 font-medium hover:bg-transparent hover:text-foreground text-base', activeTab === tab.id
-                    ? 'border-black text-foreground'
+    return (_jsx("div", { className: cn('flex items-center border-b bg-background px-6', className), children: _jsx("div", { role: "tablist", className: "flex h-12 items-center gap-6", children: tabs.map((tab) => (_jsx(Button, { role: "tab", "aria-selected": activeTab === tab.id, variant: "ghost", className: cn('h-12 rounded-none border-b-2 px-2 font-medium hover:bg-transparent hover:text-foreground text-base', activeTab === tab.id
+                    ? 'border-foreground text-foreground'
                     : 'border-transparent text-muted-foreground'), onClick: () => onTabChange?.(tab.id), children: tab.label }, tab.id))) }) }));
 }

package/components/ui/accordion.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import { type ComponentProps } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ ...props }: ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/components/ui/accordion.js

@@ -9,7 +9,7 @@ function AccordionItem({ className, ...props }) {
     return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('border-b', className), ...props }));
 }
 function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", "data-slot": "accordion-header", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('flex flex-1 cursor-pointer items-center justify-between rounded-md px-4 py-5 font-medium transition-all hover:bg-accent/50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", "data-slot": "accordion-header", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('flex flex-1 cursor-pointer items-center justify-between rounded-md px-4 py-5 font-medium transition-all hover:bg-muted/50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDown, { className: "size-4 shrink-0 transition-transform duration-200", "aria-hidden": "true" })] }) }));
 }
 function AccordionContent({ className, children, ...props }) {
     return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden px-4 py-4 text-sm transition-all", ...props, children: _jsx("div", { className: cn('pb-4 pt-0', className), children: children }) }));

package/components/ui/alert.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import { type ComponentProps } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
-declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function Alert({ className, variant, ...props }: ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export { Alert, AlertTitle, AlertDescription };

package/components/ui/avatar.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { type ComponentProps } from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare function Avatar({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, children, ...props }: ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback };

package/components/ui/avatar.js

@@ -7,7 +7,27 @@ function Avatar({ className, ...props }) {
 function AvatarImage({ className, ...props }) {
     return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full', className), ...props }));
 }
-function AvatarFallback({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('bg-muted flex size-full items-center justify-center rounded-full', className), ...props }));
+// Avatar color combinations using design system tokens
+// Light mode: light bg (100) + dark text (500)
+// Dark mode: dark bg (500) + light text (100)
+const avatarColors = [
+    'bg-green-100 text-green-500 dark:bg-green-500 dark:text-green-100',
+    'bg-blue-100 text-blue-500 dark:bg-blue-500 dark:text-blue-100',
+    'bg-red-100 text-red-500 dark:bg-red-500 dark:text-red-100',
+    'bg-orange-100 text-orange-500 dark:bg-orange-500 dark:text-orange-100',
+    'bg-purple-100 text-purple-500 dark:bg-purple-500 dark:text-purple-100',
+];
+function getColorIndex(text) {
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+        hash = text.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return Math.abs(hash) % avatarColors.length;
+}
+function AvatarFallback({ className, children, ...props }) {
+    // Extract text content from children for color determination
+    const text = typeof children === 'string' ? children : '';
+    const colorClass = text ? avatarColors[getColorIndex(text)] : '';
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('flex size-full items-center justify-center rounded-full font-medium', text ? colorClass : 'bg-muted', className), ...props, children: children }));
 }
 export { Avatar, AvatarImage, AvatarFallback };

package/components/ui/badge.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import { type ComponentProps } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
     variant?: "default" | "destructive" | "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> & {
+declare function Badge({ className, variant, asChild, ...props }: ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };

package/components/ui/badge.js

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/utils.js';
-const badgeVariants = cva('inline-flex items-center justify-center rounded-full border px-4 py-2 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', {
+const badgeVariants = cva('inline-flex items-center justify-center rounded-full border px-4 py-2 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 [&>svg]:[stroke-width:2.5] gap-1.5 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', {
     variants: {
         variant: {
             default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
             secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
             destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+            outline: 'text-foreground [a&]:hover:bg-muted [a&]:hover:text-foreground',
         },
     },
     defaultVariants: {

package/components/ui/button.d.ts

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

package/components/ui/button.js

@@ -7,9 +7,9 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
         variant: {
             default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
             destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+            outline: 'border bg-background shadow-xs hover:bg-muted hover:text-foreground dark:bg-border/30 dark:border-border dark:hover:bg-border/50',
             secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50',
             link: 'text-primary underline-offset-4 hover:underline',
         },
         size: {
@@ -26,6 +26,6 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 });
 function Button({ className, variant, size, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size }), className), ...props }));
 }
 export { Button, buttonVariants };

package/components/ui/calendar.d.ts

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

package/components/ui/calendar.js

@@ -1,39 +1,36 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, } from 'react';
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react';
-import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { DayPicker, getDefaultClassNames, } from 'react-day-picker';
 import { cn } from '../../utils/utils.js';
 import { Button, buttonVariants } from '../../components/ui/button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../components/ui/dropdown-menu.js';
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
-    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[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, formatters: {
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('bg-background group/calendar p-5 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[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, formatters: {
             formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
             ...formatters,
         }, classNames: {
             root: cn('w-fit', defaultClassNames.root),
             months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
             month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
-            nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
-            button_previous: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous),
-            button_next: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
-            month_caption: cn('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
-            dropdowns: cn('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
-            dropdown_root: cn('relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root),
-            dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
-            caption_label: cn('select-none font-medium', captionLayout === 'label'
-                ? 'text-sm'
-                : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label),
+            nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between pointer-events-none', defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none pointer-events-auto', defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none pointer-events-auto', defaultClassNames.button_next),
+            month_caption: cn('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size) relative z-10', defaultClassNames.month_caption),
+            dropdowns: cn('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-0', defaultClassNames.dropdowns),
+            caption_label: cn('select-none font-medium text-sm', defaultClassNames.caption_label),
             table: 'w-full border-collapse',
-            weekdays: cn('flex', defaultClassNames.weekdays),
-            weekday: cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday),
-            week: cn('flex w-full mt-2', defaultClassNames.week),
+            weekdays: cn('flex gap-1', defaultClassNames.weekdays),
+            weekday: cn('text-muted-foreground rounded-md flex-1 font-normal text-xs select-none', defaultClassNames.weekday),
+            week: cn('flex w-full mt-1 gap-1', defaultClassNames.week),
             week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
-            week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
+            week_number: cn('text-xs select-none text-muted-foreground', defaultClassNames.week_number),
             day: cn('relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day),
-            range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
+            range_start: cn('rounded-l-md bg-muted', defaultClassNames.range_start),
             range_middle: cn('rounded-none', defaultClassNames.range_middle),
-            range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
-            today: cn('bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today),
+            range_end: cn('rounded-r-md bg-muted', defaultClassNames.range_end),
+            today: cn('bg-muted text-foreground rounded-md 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),
@@ -55,19 +52,32 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             WeekNumber: ({ children, ...props }) => {
                 return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
             },
+            Dropdown: CalendarDropdown,
             ...components,
         }, ...props }));
 }
+function CalendarDropdown({ value, options, onChange, 'aria-label': ariaLabel, }) {
+    const selectedOption = options?.find((option) => option.value === value);
+    const handleSelect = (newValue) => {
+        if (onChange) {
+            const syntheticEvent = {
+                target: { value: String(newValue) },
+            };
+            onChange(syntheticEvent);
+        }
+    };
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1 font-medium", "aria-label": ariaLabel, children: [selectedOption?.label, _jsx(ChevronDownIcon, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" })] }) }), _jsx(DropdownMenuContent, { align: "center", className: "max-h-64 overflow-y-auto", children: options?.map((option) => (_jsx(DropdownMenuItem, { onSelect: () => handleSelect(option.value), className: cn(option.value === value && 'bg-muted font-medium'), children: option.label }, option.value))) })] }));
+}
 function CalendarDayButton({ className, day, modifiers, ...props }) {
     const defaultClassNames = getDefaultClassNames();
-    const ref = React.useRef(null);
-    React.useEffect(() => {
+    const ref = useRef(null);
+    useEffect(() => {
         if (modifiers.focused)
             ref.current?.focus();
     }, [modifiers.focused]);
     return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "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('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
 }
 export { Calendar, CalendarDayButton };

package/components/ui/card.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+declare function Card({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/components/ui/card.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/utils.js';
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn('rounded-lg bg-card text-card-foreground', className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn('flex flex-col gap-1.5 p-6', className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn('font-semibold leading-none tracking-tight', className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn('text-sm text-muted-foreground', className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn('p-6 pt-0', className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center p-6 pt-0', className), ...props }));
+}
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/components/ui/chart.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
+import { type ComponentProps, type ComponentType, type ReactNode } from "react";
 import * as RechartsPrimitive from "recharts";
 export type ChartConfig = {
     [k in string]: {
-        label?: React.ReactNode;
-        icon?: React.ComponentType;
+        label?: ReactNode;
+        icon?: ComponentType;
     } & ({
         color?: string;
         theme?: never;
@@ -16,12 +16,12 @@ declare const THEMES: {
     readonly light: "";
     readonly dark: "";
 };
-export interface ChartContainerProps extends React.ComponentProps<"div"> {
+export interface ChartContainerProps extends ComponentProps<"div"> {
     config: ChartConfig;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
 }
 export declare function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
-export interface ChartTooltipProps extends React.ComponentProps<typeof RechartsPrimitive.Tooltip> {
+export interface ChartTooltipProps extends ComponentProps<typeof RechartsPrimitive.Tooltip> {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: "line" | "dot" | "dashed";
@@ -29,7 +29,7 @@ export interface ChartTooltipProps extends React.ComponentProps<typeof RechartsP
     labelKey?: string;
 }
 export declare function ChartTooltip({ ...props }: ChartTooltipProps): import("react/jsx-runtime").JSX.Element;
-export interface ChartTooltipContentProps extends Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, "content">, React.ComponentProps<"div"> {
+export interface ChartTooltipContentProps extends Omit<ComponentProps<typeof RechartsPrimitive.Tooltip>, "content">, ComponentProps<"div"> {
     hideLabel?: boolean;
     hideIndicator?: boolean;
     indicator?: "line" | "dot" | "dashed";

package/components/ui/chart.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
+import { createContext, useContext, useId, useMemo, } from "react";
 import * as RechartsPrimitive from "recharts";
 import { cn } from "../../utils/utils.js";
 const THEMES = { light: "", dark: "" };
 export function ChartContainer({ id, className, children, config, ...props }) {
-    const uniqueId = React.useId();
+    const uniqueId = useId();
     const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
     return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-chart": chartId, className: cn("flex aspect-video justify-center text-xs", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
 }
@@ -19,7 +19,7 @@ function ChartStyle({ id, config }) {
 [data-chart=${id}] {
 ${colorConfig
                 .map(([key, itemConfig]) => {
-                const color = itemConfig.theme?.light || itemConfig.color || `hsl(var(--chart-${key.charAt(key.length - 1)}))`;
+                const color = itemConfig.theme?.light || itemConfig.color || `var(--primary)`;
                 return `  --color-${key}: ${color};`;
             })
                 .join("\n")}
@@ -32,7 +32,7 @@ export function ChartTooltip({ ...props }) {
 }
 export function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
     const { config } = useChart();
-    const tooltipLabel = React.useMemo(() => {
+    const tooltipLabel = useMemo(() => {
         if (hideLabel || !payload?.length) {
             return null;
         }
@@ -62,7 +62,7 @@ export function ChartTooltipContent({ active, payload, className, indicator = "d
         return null;
     }
     const nestLabel = payload.length === 1 && indicator !== "dot";
-    return (_jsxs("div", { className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+    return (_jsxs("div", { role: "tooltip", className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
                     const key = `${nameKey || item.name || item.dataKey || "value"}`;
                     const itemConfig = getPayloadConfigFromPayload(config, item, key);
                     const indicatorColor = color || item.payload.fill || item.color;
@@ -78,9 +78,9 @@ export function ChartTooltipContent({ active, payload, className, indicator = "d
                 }) })] }));
 }
 // Chart Context
-const ChartContext = React.createContext(null);
+const ChartContext = createContext(null);
 function useChart() {
-    const context = React.useContext(ChartContext);
+    const context = useContext(ChartContext);
     if (!context) {
         throw new Error("useChart must be used within a <ChartContainer />");
     }

package/components/ui/checkbox.d.ts

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

package/components/ui/checkbox.js

@@ -4,6 +4,6 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 import { cn } from '../../utils/utils.js';
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer border-black/20 cursor-pointer hover:border-foreground/40 dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border-2 shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center transition-none", children: _jsx(CheckIcon, { className: "size-3.5 !text-white" }) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer border-border cursor-pointer hover:border-foreground/40 dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border-2 shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center transition-none", children: _jsx(CheckIcon, { className: "size-3.5 text-primary-foreground", strokeWidth: 3 }) }) }));
 }
 export { Checkbox };

package/components/ui/dialog.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
+import { type ComponentProps } from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };