@dilipod/ui 0.4.27 → 0.4.29

package/dist/index.mjs

@@ -24,6 +24,7 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ToastPrimitives from '@radix-ui/react-toast';
+import { differenceInHours, differenceInMinutes, formatDistanceToNow } from 'date-fns';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -391,6 +392,7 @@ __export(index_exports, {
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   EmptyState: () => EmptyState,
   ErrorState: () => ErrorState,
+  ExpandableSection: () => ExpandableSection,
   FilePreview: () => FilePreview,
   FlowchartDiagram: () => FlowchartDiagram,
   FormField: () => FormField,
@@ -490,17 +492,27 @@ __export(index_exports, {
   WorkflowViewer: () => WorkflowViewer,
   alertVariants: () => alertVariants,
   badgeVariants: () => badgeVariants,
+  buttonHtml: () => buttonHtml,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  emailTemplate: () => emailTemplate,
+  formatCentsToEuros: () => formatCentsToEuros,
+  formatDuration: () => formatDuration,
+  formatEuros: () => formatEuros,
+  formatRelativeTime: () => formatRelativeTime,
   getDateRangeFromPreset: () => getDateRangeFromPreset,
   iconBoxVariants: () => iconBoxVariants,
+  infoBoxHtml: () => infoBoxHtml,
   metricCardVariants: () => metricCardVariants,
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
+  noteBoxHtml: () => noteBoxHtml,
   progressVariants: () => progressVariants,
   statVariants: () => statVariants,
   tagVariants: () => tagVariants,
   toast: () => toast,
   usageBarVariants: () => usageBarVariants,
+  useExpandedSections: () => useExpandedSections,
+  useServiceWorker: () => useServiceWorker,
   useToast: () => useToast,
   valueVariants: () => valueVariants
 });
@@ -6736,10 +6748,218 @@ function WorkerSpec({ documentation, className }) {
     ] })
   ] }) });
 }
+function ExpandableSection({
+  sectionKey,
+  label,
+  icon,
+  count: count2,
+  expanded,
+  onToggle,
+  children,
+  className,
+  contentClassName,
+  show = true
+}) {
+  if (!show) return null;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => onToggle(sectionKey),
+        className: "flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors w-full text-left",
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              className: cn(
+                "shrink-0 transition-transform",
+                expanded ? "rotate-0" : "-rotate-90"
+              ),
+              children: /* @__PURE__ */ jsx("path", { d: "M2.5 4.5L6 8L9.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+            }
+          ),
+          icon,
+          /* @__PURE__ */ jsx("span", { children: label }),
+          count2 !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
+            "(",
+            count2,
+            ")"
+          ] })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { className: cn("mt-2 pl-4", contentClassName), children })
+  ] });
+}
+function useExpandedSections(initialExpanded = []) {
+  const [expanded, setExpanded] = React51.useState(
+    () => new Set(initialExpanded)
+  );
+  const toggle = React51.useCallback((key) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+  const isExpanded = React51.useCallback(
+    (key) => expanded.has(key),
+    [expanded]
+  );
+  return { expanded, toggle, isExpanded };
+}
+ExpandableSection.displayName = "ExpandableSection";
+function useServiceWorker() {
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker.register("/sw.js").then((registration) => {
+        console.log("Service Worker registered:", registration.scope);
+        setInterval(() => {
+          registration.update();
+        }, 60 * 60 * 1e3);
+      }).catch((error) => {
+        console.error("Service Worker registration failed:", error);
+      });
+    }
+  }, []);
+}
+function formatCentsToEuros(cents) {
+  return `\u20AC${(cents / 100).toLocaleString()}`;
+}
+function formatEuros(euros, decimals) {
+  if (decimals !== void 0) {
+    return `\u20AC${euros.toFixed(decimals)}`;
+  }
+  return `\u20AC${euros.toLocaleString()}`;
+}
+function formatDuration(ms) {
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
+function formatRelativeTime(date) {
+  if (!date) return "\u2014";
+  const d = typeof date === "string" ? new Date(date) : date;
+  const hours = differenceInHours(/* @__PURE__ */ new Date(), d);
+  if (hours < 1) {
+    const mins = differenceInMinutes(/* @__PURE__ */ new Date(), d);
+    return `${mins}m`;
+  }
+  if (hours < 48) return `${hours}h`;
+  return formatDistanceToNow(d, { addSuffix: false });
+}
+
+// src/lib/email.ts
+function emailTemplate({ body, preheader }) {
+  const preheaderHtml = preheader ? `<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">${preheader}</div>` : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="light" />
+  <meta name="supported-color-schemes" content="light" />
+  <title>Dilipod</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #f0f0f0; -webkit-font-smoothing: antialiased;">
+  ${preheaderHtml}
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f0f0f0;">
+    <tr>
+      <td align="center" style="padding: 40px 16px;">
+        <!-- Main card -->
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width: 560px;">
+          <!-- Logo header -->
+          <tr>
+            <td style="padding: 0 0 24px 0;">
+              <table role="presentation" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="width: 32px; height: 32px; background-color: #00e5cc; border-radius: 6px; text-align: center; vertical-align: middle; font-size: 16px; font-weight: 700; color: #111111; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+                    D
+                  </td>
+                  <td style="padding-left: 10px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 17px; font-weight: 600; color: #111111; letter-spacing: -0.2px;">
+                    Dilipod
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <!-- Content card -->
+          <tr>
+            <td>
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 6px; overflow: hidden; border: 1px solid #e2e2e2;">
+                <!-- Accent bar -->
+                <tr>
+                  <td style="height: 3px; background: linear-gradient(90deg, #00e5cc 0%, #00c8b5 100%); font-size: 0; line-height: 0;">&nbsp;</td>
+                </tr>
+                <!-- Body content -->
+                <tr>
+                  <td style="padding: 36px 40px 40px 40px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.7; color: #374151;">
+                    ${body}
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <!-- Footer -->
+          <tr>
+            <td style="padding: 24px 4px 0 4px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12px; color: #9ca3af;">
+                    &copy; ${(/* @__PURE__ */ new Date()).getFullYear()} Dilipod &mdash; Your Digital Workforce
+                  </td>
+                  <td align="right" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12px;">
+                    <a href="https://dilipod.com" style="color: #9ca3af; text-decoration: none;">dilipod.com</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+function buttonHtml({
+  text,
+  href,
+  variant = "primary"
+}) {
+  const bg = variant === "danger" ? "#dc2626" : "#111111";
+  const color = "#ffffff";
+  return `<table role="presentation" cellpadding="0" cellspacing="0" style="margin-top: 24px;">
+  <tr>
+    <td style="background-color: ${bg}; border-radius: 6px;">
+      <a href="${href}" style="display: inline-block; padding: 12px 32px; color: ${color}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; font-weight: 600; text-decoration: none;">
+        ${text} &rarr;
+      </a>
+    </td>
+  </tr>
+</table>`;
+}
+function infoBoxHtml(innerHtml) {
+  return `<div style="background-color: #f8fafb; padding: 16px 20px; border-radius: 6px; border: 1px solid #e5e7eb; margin: 20px 0; border-left: 3px solid #00e5cc;">
+  ${innerHtml}
+</div>`;
+}
+function noteBoxHtml(text) {
+  return `<div style="background-color: #fffbeb; padding: 14px 18px; border-radius: 6px; border: 1px solid #fde68a; margin: 20px 0; font-size: 13px; color: #92400e; border-left: 3px solid #f59e0b;">
+  ${text}
+</div>`;
+}
 
 // src/index.ts
 __reExport(index_exports, icons_exports);
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityTimeline, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, BreadcrumbLink, Breadcrumbs, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, ConfirmDialog, DateRangePicker, DateRangeSelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, FilePreview, FlowchartDiagram, FormField, IconBox, ImpactMetricsForm, Input, Label2 as Label, LabeledSlider, LabeledSwitch, Logo, Metric, MetricCard, MetricLabel, MetricSubtext, MetricValue, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupCard, RadioGroupItem, RadioGroupOption, ScenariosManager, Select, Separator2 as Separator, SettingsNav, SettingsNavLink, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SimplePagination, SimpleTooltip, Skeleton, SkeletonCard, SkeletonText, Slider, Stat, StepDots, StepProgress, SupportChat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsListUnderline, TabsTrigger, TabsTriggerUnderline, Tag, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastIcon, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, UsageBar, UsageChart, WorkerSpec, WorkflowFlow, WorkflowViewer, alertVariants, badgeVariants, buttonVariants, cn, getDateRangeFromPreset, iconBoxVariants, metricCardVariants, navigationMenuTriggerStyle, progressVariants, statVariants, tagVariants, toast, usageBarVariants, useToast, valueVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityTimeline, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, BreadcrumbLink, Breadcrumbs, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CodeBlock, ConfirmDialog, DateRangePicker, DateRangeSelect, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, ExpandableSection, FilePreview, FlowchartDiagram, FormField, IconBox, ImpactMetricsForm, Input, Label2 as Label, LabeledSlider, LabeledSwitch, Logo, Metric, MetricCard, MetricLabel, MetricSubtext, MetricValue, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupCard, RadioGroupItem, RadioGroupOption, ScenariosManager, Select, Separator2 as Separator, SettingsNav, SettingsNavLink, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SimplePagination, SimpleTooltip, Skeleton, SkeletonCard, SkeletonText, Slider, Stat, StepDots, StepProgress, SupportChat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsListUnderline, TabsTrigger, TabsTriggerUnderline, Tag, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastIcon, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, UsageBar, UsageChart, WorkerSpec, WorkflowFlow, WorkflowViewer, alertVariants, badgeVariants, buttonHtml, buttonVariants, cn, emailTemplate, formatCentsToEuros, formatDuration, formatEuros, formatRelativeTime, getDateRangeFromPreset, iconBoxVariants, infoBoxHtml, metricCardVariants, navigationMenuTriggerStyle, noteBoxHtml, progressVariants, statVariants, tagVariants, toast, usageBarVariants, useExpandedSections, useServiceWorker, useToast, valueVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map