@minutemailer/kit 1.5.0 → 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/donut-chart.js

@@ -4,7 +4,19 @@ import { ChartContainer } from '../components/ui/chart.js';
 export function DonutChart({ percentage, size = 120 }) {
     const COLORS = {
         filled: 'var(--primary)',
-        unfilled: 'var(--border)',
+        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/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-muted/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,7 +2,7 @@ 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',

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

@@ -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,34 +1,31 @@
-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-border shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root),
-            dropdown: cn('absolute bg-card 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-muted', defaultClassNames.range_start),
             range_middle: cn('rounded-none', defaultClassNames.range_middle),
@@ -55,13 +52,26 @@ 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]);

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 })] }) }));
 }
@@ -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, };

package/components/ui/dropdown-menu.d.ts

@@ -1,25 +1,25 @@
-import * as React from 'react';
+import { type ComponentProps } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+declare function DropdownMenu({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
     variant?: 'default' | 'destructive';
 }): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };