@minutemailer/kit 1.3.0 → 1.5.0

package/components/details-content.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export declare function DetailsContent({ children, onClose, close, }: {
+    children: ReactNode;
+    onClose?: () => void;
+    close?: boolean;
+}): import("react").ReactPortal | null;

package/components/details-content.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../components/ui/button.js';
+import { Close } from '../icons/index.js';
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useDetails } from './minutemailer-kit.js';
+export function DetailsContent({ children, onClose = () => { }, close = false, }) {
+    const { mountNode, setVisible } = useDetails();
+    useEffect(() => {
+        setVisible(true);
+        return () => setVisible(false);
+    }, [setVisible]);
+    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);
+}

package/components/details.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+export declare function Details({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/components/details.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { cn } from '../utils/utils.js';
+import { useDetails } from './minutemailer-kit.js';
+export function Details({ children }) {
+    const ref = useRef(null);
+    const { visible, setMountNode } = useDetails();
+    useEffect(() => {
+        if (ref.current) {
+            setMountNode(ref.current);
+        }
+        return () => setMountNode(null);
+    }, [setMountNode]);
+    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,8 @@ 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(--border)',
     };
     // Include both filled and unfilled portions in the same data
     const chartData = [

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/minutemailer-kit.d.ts

@@ -4,16 +4,25 @@ type S3Config = {
     cloudFrontUrl: string;
     resizeCloudUrl: string;
 };
+type DetailsState = {
+    mountNode: HTMLDivElement | null;
+    visible: boolean;
+    setMountNode: (node: HTMLDivElement | null) => void;
+    setVisible: (visible: boolean) => void;
+};
 type ContextValue = {
     t: (key: string) => string;
     s3?: S3Config;
+    details: DetailsState;
 };
-export declare const Context: import("react").Context<ContextValue>;
+export declare const Context: import("react").Context<ContextValue | null>;
 type MinutemailerKitProps = {
     children: ReactNode;
     t: (key: string) => string;
     s3?: S3Config;
 };
 export declare function MinutemailerKit({ children, t, s3 }: MinutemailerKitProps): import("react/jsx-runtime").JSX.Element;
+export declare function useMinutemailerKit(): ContextValue;
 export declare function useS3Config(): S3Config;
+export declare function useDetails(): DetailsState;
 export {};

package/components/minutemailer-kit.js

@@ -1,15 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
-export const Context = createContext({
-    t: (key) => key,
-});
+import { createContext, useContext, useState } from 'react';
+export const Context = createContext(null);
 export function MinutemailerKit({ children, t, s3 }) {
-    return _jsx(Context.Provider, { value: { t, s3 }, children: children });
+    const [mountNode, setMountNode] = useState(null);
+    const [visible, setVisible] = useState(false);
+    return (_jsx(Context.Provider, { value: {
+            t,
+            s3,
+            details: { mountNode, visible, setMountNode, setVisible },
+        }, children: children }));
 }
-export function useS3Config() {
+export function useMinutemailerKit() {
     const context = useContext(Context);
+    if (!context) {
+        throw new Error('useMinutemailerKit must be used within MinutemailerKit');
+    }
+    return context;
+}
+export function useS3Config() {
+    const context = useMinutemailerKit();
     if (!context.s3) {
         throw new Error('S3 configuration not provided in MinutemailerKit');
     }
     return context.s3;
 }
+export function useDetails() {
+    const context = useMinutemailerKit();
+    return context.details;
+}

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: "h-4 w-4 shrink-0 transition-transform duration-200" })] }) }));
 }
 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/badge.js

@@ -8,7 +8,7 @@ const badgeVariants = cva('inline-flex items-center justify-center rounded-full
             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.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: {

package/components/ui/calendar.js

@@ -18,8 +18,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             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),
+            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),
@@ -30,10 +30,10 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             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),
             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),
@@ -68,6 +68,6 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
     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/chart.js

@@ -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")}

package/components/ui/dialog.js

@@ -18,7 +18,7 @@ function DialogOverlay({ className, ...props }) {
     return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-8 shadow-lg duration-200 sm:max-w-lg', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-8 shadow-lg duration-200 sm:max-w-lg', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-muted data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));

package/components/ui/dropdown-menu.js

@@ -12,22 +12,22 @@ function DropdownMenuTrigger({ ...props }) {
     return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
 }
 function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', className), ...props }) }));
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn('bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', className), ...props }) }));
 }
 function DropdownMenuGroup({ ...props }) {
     return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
 }
 function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-muted focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
-    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("focus:bg-muted focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
 }
 function DropdownMenuRadioGroup({ ...props }) {
     return (_jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
 }
 function DropdownMenuRadioItem({ className, children, ...props }) {
-    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("focus:bg-muted focus:text-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
 }
 function DropdownMenuLabel({ className, inset, ...props }) {
     return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className), ...props }));
@@ -42,9 +42,9 @@ function DropdownMenuSub({ ...props }) {
     return (_jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props }));
 }
 function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
-    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn('focus:bg-muted focus:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
 }
 function DropdownMenuSubContent({ className, ...props }) {
-    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', className), ...props }));
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn('bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', className), ...props }));
 }
 export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/components/ui/input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/utils.js';
 function Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn('file:text-foreground placeholder:text-muted-foreground/70 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-11 w-full min-w-0 rounded-md border bg-muted px-4 py-2 text-base shadow-xs transition-all outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm hover:border-muted-foreground/30 hover:bg-muted/30', 'focus-visible:border-secondary focus-visible:ring-secondary/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', className), ...props }));
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn('file:text-foreground placeholder:text-muted-foreground/70 selection:bg-primary selection:text-primary-foreground dark:bg-border/30 border-border flex h-11 w-full min-w-0 rounded-md border bg-muted px-4 py-2 text-base shadow-xs transition-all outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm hover:border-muted-foreground/30 hover:bg-muted/30', 'focus-visible:border-secondary focus-visible:ring-secondary/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', className), ...props }));
 }
 export { Input };

package/components/ui/pagination.js

@@ -11,7 +11,7 @@ function PaginationItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "pagination-item", className: cn('', className), ...props }));
 }
 function PaginationLink({ className, isActive, size = 'icon', ...props }) {
-    return (_jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", className: cn('inline-flex h-10 w-10 items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', isActive && 'bg-accent text-accent-foreground', className), ...props }));
+    return (_jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", className: cn('inline-flex h-10 w-10 items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', isActive && 'bg-muted text-foreground', className), ...props }));
 }
 function PaginationPrevious({ className, ...props }) {
     return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", "data-slot": "pagination-previous", size: "default", className: cn('w-auto gap-1 px-2.5', className), ...props, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), _jsx("span", { children: "Previous" })] }));

package/components/ui/popover.js

@@ -8,7 +8,7 @@ function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
 }
 function PopoverAnchor({ ...props }) {
     return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });

package/components/ui/sidebar.js

@@ -86,19 +86,19 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
                     '--sidebar-width': SIDEBAR_WIDTH,
                     '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
                     ...style,
-                }, className: cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className), ...props, children: children }) }) }));
+                }, className: cn('group/sidebar-wrapper has-data-[variant=inset]:bg-card flex min-h-svh w-full', className), ...props, children: children }) }) }));
 }
 function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }) {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === 'none') {
-        return (_jsx("div", { "data-slot": "sidebar", className: cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className), ...props, children: children }));
+        return (_jsx("div", { "data-slot": "sidebar", className: cn('bg-card text-card-foreground flex h-full w-(--sidebar-width) flex-col', className), ...props, children: children }));
     }
     if (isMobile) {
-        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
+        return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "bg-card text-card-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
                     '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
                 }, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
     }
-    return (_jsxs("div", { className: "group peer text-sidebar-foreground hidden sm:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+    return (_jsxs("div", { className: "group peer text-card-foreground hidden sm:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
                     : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { "data-slot": "sidebar-container", className: cn('fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear sm:flex', side === 'left'
                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
@@ -106,7 +106,7 @@ function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas'
                 // Adjust the padding for floating and inset variants.
                 variant === 'floating' || variant === 'inset'
                     ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm", children: children }) })] }));
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "bg-card group-data-[variant=floating]:border-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm", children: children }) })] }));
 }
 function SidebarTrigger({ className, onClick, ...props }) {
     const { toggleSidebar } = useSidebar();
@@ -117,10 +117,10 @@ function SidebarTrigger({ className, onClick, ...props }) {
 }
 function SidebarRail({ className, ...props }) {
     const { toggleSidebar } = useSidebar();
-    return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
+    return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'hover:group-data-[collapsible=offcanvas]:bg-card group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
 }
 function SidebarInset({ className, ...props }) {
-    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-accent relative flex w-full flex-1 flex-col', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className), ...props }));
+    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-muted relative flex w-full flex-1 flex-col', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className), ...props }));
 }
 function SidebarInput({ className, ...props }) {
     return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('bg-background h-8 w-full shadow-none', className), ...props }));
@@ -132,7 +132,7 @@ function SidebarFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className), ...props }));
 }
 function SidebarSeparator({ className, ...props }) {
-    return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className), ...props }));
+    return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn('bg-border mx-2 w-auto', className), ...props }));
 }
 function SidebarContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className), ...props }));
@@ -142,11 +142,11 @@ function SidebarGroup({ className, ...props }) {
 }
 function SidebarGroupLabel({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'div';
-    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-card-foreground/70 ring-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
 }
 function SidebarGroupAction({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn('text-card-foreground ring-ring hover:bg-muted hover:text-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 md:after:hidden', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
@@ -159,11 +159,11 @@ function SidebarMenu({ className, ...props }) {
 function SidebarMenuItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
 }
-const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:mx-auto! group-data-[collapsible=icon]:p-2! group-data-[collapsible=icon]:justify-center [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-ring transition-[width,height,padding] hover:bg-muted hover:text-foreground focus-visible:ring-2 active:bg-muted active:text-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-muted font-medium data-[active=true]:text-foreground data-[state=open]:hover:bg-muted data-[state=open]:hover:text-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:mx-auto! group-data-[collapsible=icon]:p-2! group-data-[collapsible=icon]:justify-center [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
-            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-            outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+            default: 'hover:bg-muted hover:text-foreground',
+            outline: 'bg-background shadow-[0_0_0_1px_var(--border)] hover:bg-muted hover:text-foreground hover:shadow-[0_0_0_1px_var(--muted)]',
         },
         size: {
             default: 'h-8 text-sm',
@@ -192,13 +192,13 @@ function SidebarMenuButton({ asChild = false, isActive = false, variant = 'defau
 }
 function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn('text-card-foreground ring-ring hover:bg-muted hover:text-foreground peer-hover/menu-button:text-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 md:after:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
-            'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className), ...props }));
+            'peer-data-[active=true]/menu-button:text-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className), ...props }));
 }
 function SidebarMenuBadge({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('text-card-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none', 'peer-hover/menu-button:text-foreground peer-data-[active=true]/menu-button:text-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
     // Random width between 50 to 90%.
@@ -210,13 +210,13 @@ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
                 } })] }));
 }
 function SidebarMenuSub({ className, ...props }) {
-    return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn('border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn('border-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 function SidebarMenuSubItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn('group/menu-sub-item relative', className), ...props }));
 }
 function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false, className, ...props }) {
     const Comp = asChild ? Slot : 'a';
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-card-foreground ring-ring hover:bg-muted hover:text-foreground active:bg-muted active:text-foreground [&>svg]:text-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-muted data-[active=true]:text-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

package/components/ui/skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/utils.js';
 function Skeleton({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-accent animate-pulse rounded-md', className), ...props }));
+    return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-muted animate-pulse rounded-md', className), ...props }));
 }
 export { Skeleton };

package/components/ui/switch.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: 'sm' | 'default';
+}): import("react/jsx-runtime").JSX.Element;
+export { Switch };

package/components/ui/switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from '../../utils/utils.js';
+function Switch({ className, size = 'default', ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-border focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0') }) }));
+}
+export { Switch };

package/components/ui/textarea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/utils.js';
 function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn('placeholder:text-muted-foreground/70 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex field-sizing-content min-h-16 w-full min-w-0 rounded-md border bg-muted px-4 py-2 text-base shadow-xs transition-all outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm hover:border-muted-foreground/30 hover:bg-muted/30', 'focus-visible:border-secondary focus-visible:ring-secondary/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', className), ...props }));
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn('placeholder:text-muted-foreground/70 selection:bg-primary selection:text-primary-foreground dark:bg-border/30 border-border flex field-sizing-content min-h-16 w-full min-w-0 rounded-md border bg-muted px-4 py-2 text-base shadow-xs transition-all outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm hover:border-muted-foreground/30 hover:bg-muted/30', 'focus-visible:border-secondary focus-visible:ring-secondary/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', className), ...props }));
 }
 export { Textarea };

package/hooks/use-i18n.js

@@ -1,6 +1,5 @@
-import { useContext } from 'react';
-import { Context } from '../components/minutemailer-kit.js';
+import { useMinutemailerKit } from '../components/minutemailer-kit.js';
 export function useI18n() {
-    const { t } = useContext(Context);
-    return t;
+    const context = useMinutemailerKit();
+    return context.t;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@minutemailer/kit",
-    "version": "1.3.0",
+    "version": "1.5.0",
     "description": "Minutemailer UI Kit",
     "license": "MIT",
     "author": "Minutemailer",
@@ -53,6 +53,7 @@
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@tailwindcss/vite": "^4.1.14",
@@ -60,6 +61,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.544.0",
+        "motion": "^12.23.26",
         "next-themes": "^0.4.6",
         "react-day-picker": "^9.11.1",
         "react-hook-form": "^7.63.0",

package/styles.css

@@ -1,79 +1,171 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
+    /* Radius */
     --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
+
+    /* Base Colors - Green */
+    --color-green-100: var(--green-100);
+    --color-green-200: var(--green-200);
+    --color-green-300: var(--green-300);
+    --color-green-400: var(--green-400);
+    --color-green-500: var(--green-500);
+
+    /* Base Colors - Gray (Black scale) */
+    --color-gray-100: var(--gray-100);
+    --color-gray-200: var(--gray-200);
+    --color-gray-300: var(--gray-300);
+    --color-gray-400: var(--gray-400);
+    --color-gray-500: var(--gray-500);
+
+    /* Base Colors - Blue */
+    --color-blue-100: var(--blue-100);
+    --color-blue-200: var(--blue-200);
+    --color-blue-300: var(--blue-300);
+    --color-blue-400: var(--blue-400);
+    --color-blue-500: var(--blue-500);
+
+    /* Base Colors - Red */
+    --color-red-100: var(--red-100);
+    --color-red-200: var(--red-200);
+    --color-red-300: var(--red-300);
+    --color-red-400: var(--red-400);
+    --color-red-500: var(--red-500);
+
+    /* Base Colors - Orange */
+    --color-orange-100: var(--orange-100);
+    --color-orange-200: var(--orange-200);
+    --color-orange-300: var(--orange-300);
+    --color-orange-400: var(--orange-400);
+    --color-orange-500: var(--orange-500);
+
+    /* Base Colors - Purple */
+    --color-purple-100: var(--purple-100);
+    --color-purple-200: var(--purple-200);
+    --color-purple-300: var(--purple-300);
+    --color-purple-400: var(--purple-400);
+    --color-purple-500: var(--purple-500);
+
+    /* Semantic Colors */
     --color-background: var(--background);
     --color-foreground: var(--foreground);
     --color-card: var(--card);
     --color-card-foreground: var(--card-foreground);
-    --color-popover: var(--popover);
-    --color-popover-foreground: var(--popover-foreground);
     --color-primary: var(--primary);
     --color-primary-foreground: var(--primary-foreground);
     --color-secondary: var(--secondary);
     --color-secondary-foreground: var(--secondary-foreground);
-    --color-link: var(--link);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-info: var(--info);
+    --color-info-foreground: var(--info-foreground);
     --color-muted: var(--muted);
     --color-muted-foreground: var(--muted-foreground);
-    --color-accent: var(--accent);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-destructive: var(--destructive);
+    --color-link: var(--link);
     --color-border: var(--border);
-    --color-input: var(--input);
     --color-ring: var(--ring);
-    --color-chart-1: var(--chart-1);
-    --color-chart-2: var(--chart-2);
-    --color-chart-3: var(--chart-3);
-    --color-chart-4: var(--chart-4);
-    --color-chart-5: var(--chart-5);
-    --color-sidebar: var(--sidebar);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-ring: var(--sidebar-ring);
 }
 
 :root {
     --font-sans: Inter, system-ui, sans-serif;
     --radius: 0.375rem;
+
+    /* Base Colors - Green (light to dark) */
+    --green-100: oklch(0.96 0.04 155);
+    --green-200: oklch(0.85 0.14 155);
+    --green-300: oklch(0.68 0.17 158);
+    --green-400: oklch(0.58 0.14 160);
+    --green-500: oklch(0.35 0.08 165);
+
+    /* Base Colors - Gray (light to dark) */
+    --gray-100: oklch(0.97 0 0);
+    --gray-200: oklch(0.87 0 0);
+    --gray-300: oklch(0.62 0 0);
+    --gray-400: oklch(0.42 0 0);
+    --gray-500: oklch(0.20 0 0);
+
+    /* Base Colors - Blue (light to dark) */
+    --blue-100: oklch(0.95 0.03 240);
+    --blue-200: oklch(0.88 0.08 240);
+    --blue-300: oklch(0.65 0.19 255);
+    --blue-400: oklch(0.55 0.19 255);
+    --blue-500: oklch(0.35 0.12 250);
+
+    /* Base Colors - Red (light to dark) */
+    --red-100: oklch(0.96 0.02 20);
+    --red-200: oklch(0.85 0.08 20);
+    --red-300: oklch(0.60 0.20 25);
+    --red-400: oklch(0.50 0.18 25);
+    --red-500: oklch(0.30 0.10 25);
+
+    /* Base Colors - Orange (light to dark) */
+    --orange-100: oklch(0.97 0.04 95);
+    --orange-200: oklch(0.88 0.12 95);
+    --orange-300: oklch(0.75 0.16 70);
+    --orange-400: oklch(0.60 0.14 70);
+    --orange-500: oklch(0.35 0.08 50);
+
+    /* Base Colors - Purple (light to dark) */
+    --purple-100: oklch(0.96 0.02 290);
+    --purple-200: oklch(0.85 0.06 290);
+    --purple-300: oklch(0.60 0.12 290);
+    --purple-400: oklch(0.50 0.14 290);
+    --purple-500: oklch(0.30 0.12 290);
+
+    /* Semantic Colors - Light Mode */
     --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
+    --foreground: var(--gray-500);
     --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.683 0.178 158.484);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.656 0.173 256.68);
-    --secondary-foreground: oklch(0.985 0 0);
-    --link: oklch(0.553 0.16 252.505);
-    --muted: oklch(0.972 0.001 197.139);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
-    --chart-3: oklch(0.398 0.07 227.392);
-    --chart-4: oklch(0.828 0.189 84.429);
-    --chart-5: oklch(0.769 0.188 70.08);
-    --sidebar: oklch(1 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --card-foreground: var(--gray-500);
+    --primary: var(--green-300);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: var(--blue-300);
+    --secondary-foreground: oklch(1 0 0);
+    --destructive: var(--red-300);
+    --destructive-foreground: oklch(1 0 0);
+    --warning: var(--orange-300);
+    --warning-foreground: var(--gray-500);
+    --success: var(--green-300);
+    --success-foreground: oklch(1 0 0);
+    --info: var(--blue-300);
+    --info-foreground: oklch(1 0 0);
+    --muted: var(--gray-100);
+    --muted-foreground: var(--gray-300);
+    --link: var(--blue-400);
+    --border: var(--gray-200);
+    --ring: var(--gray-300);
+}
+
+.dark {
+    /* Semantic Colors - Dark Mode */
+    --background: var(--gray-500);
+    --foreground: oklch(0.98 0 0);
+    --card: var(--gray-400);
+    --card-foreground: oklch(0.98 0 0);
+    --primary: var(--green-200);
+    --primary-foreground: var(--gray-500);
+    --secondary: var(--blue-200);
+    --secondary-foreground: var(--gray-500);
+    --destructive: var(--red-300);
+    --destructive-foreground: oklch(1 0 0);
+    --warning: var(--orange-200);
+    --warning-foreground: var(--gray-500);
+    --success: var(--green-200);
+    --success-foreground: var(--gray-500);
+    --info: var(--blue-200);
+    --info-foreground: var(--gray-500);
+    --muted: var(--gray-400);
+    --muted-foreground: var(--gray-200);
+    --link: var(--blue-200);
+    --border: var(--gray-300);
+    --ring: var(--gray-200);
 }
 
 @layer base {
@@ -81,6 +173,6 @@
         @apply border-border outline-ring/50;
     }
     body {
-        @apply bg-accent text-foreground;
+        @apply bg-muted text-foreground;
     }
 }