@dilipod/ui 0.4.27 → 0.4.29

package/dist/lib/email.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Email Template Helpers
+ *
+ * Shared branded email template and HTML building blocks.
+ * Used by both platform and admin apps via their local `lib/email.ts` re-exports.
+ */
+/**
+ * Wrap email body content in the standard Dilipod branded template.
+ *
+ * Usage:
+ *   emailTemplate({
+ *     body: '<h2>Hello</h2><p>Content here</p>',
+ *   })
+ *
+ * Or with a preheader (hidden preview text in email clients):
+ *   emailTemplate({
+ *     preheader: 'Quick summary shown in inbox',
+ *     body: '...',
+ *   })
+ */
+export declare function emailTemplate({ body, preheader }: {
+    body: string;
+    preheader?: string;
+}): string;
+/**
+ * Render a CTA button for use inside emailTemplate body.
+ *
+ *   buttonHtml({ text: 'Reset Password', href: 'https://...' })
+ *   buttonHtml({ text: 'View Incident', href: '...', variant: 'danger' })
+ */
+export declare function buttonHtml({ text, href, variant, }: {
+    text: string;
+    href: string;
+    variant?: 'primary' | 'danger';
+}): string;
+/**
+ * Render an info box (grey background) for key details.
+ *
+ *   infoBoxHtml('<strong>Status:</strong> Deployed')
+ */
+export declare function infoBoxHtml(innerHtml: string): string;
+/**
+ * Render a warning/note box (yellow background).
+ *
+ *   noteBoxHtml('This link expires in 1 hour.')
+ */
+export declare function noteBoxHtml(text: string): string;
+//# sourceMappingURL=email.d.ts.map

package/dist/lib/email.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../src/lib/email.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CA0E/F;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,OAAmB,GACpB,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B,GAAG,MAAM,CAYT;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAIhD"}

package/dist/lib/formatting.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Formatting Utilities
+ *
+ * Shared text, currency, duration, and date formatting used across apps.
+ */
+/**
+ * Convert a cent value to euros (numeric).
+ * e.g. 2900 → 29
+ */
+export declare function formatCentsToEuros(cents: number): string;
+/**
+ * Format a euro value as a display string.
+ * e.g. 299 → "€299" or 299.5 with decimals=2 → "€299.50"
+ */
+export declare function formatEuros(euros: number, decimals?: number): string;
+/**
+ * Format milliseconds as a human-readable duration.
+ * e.g. 1500 → "1.5s"
+ */
+export declare function formatDuration(ms: number): string;
+/**
+ * Format a date into a compact relative-time string.
+ * Returns "—" for null/undefined, "5m" for < 1 hour, "2h" for < 48 hours,
+ * or a relative distance like "3 days" for older dates.
+ */
+export declare function formatRelativeTime(date: Date | string | null): string;
+//# sourceMappingURL=formatting.d.ts.map

package/dist/lib/formatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../src/lib/formatting.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAExD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAKpE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAUrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.4.27",
+  "version": "0.4.29",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",
@@ -81,6 +81,7 @@
     "@xyflow/react": "^12.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "tailwind-merge": "^3.3.0",
     "tailwindcss-animate": "^1.0.7"
   },
@@ -110,7 +111,7 @@
     "tailwindcss": "^4.1.8",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",
-    "vite": "^7.3.1",
+    "vite": "^6.0.0",
     "vitest": "^1.2.0"
   }
 }

package/src/components/expandable-section.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../lib/utils'
+
+export interface ExpandableSectionProps {
+  /** Unique key for this section */
+  sectionKey: string
+  /** Section label text */
+  label: string
+  /** Optional icon rendered before the label */
+  icon?: React.ReactNode
+  /** Optional count badge after the label */
+  count?: number
+  /** Whether the section is currently expanded */
+  expanded: boolean
+  /** Toggle callback */
+  onToggle: (key: string) => void
+  /** Section content */
+  children: React.ReactNode
+  /** Additional class for the outer container */
+  className?: string
+  /** Additional class for the content area */
+  contentClassName?: string
+  /** Whether to render the section at all (default: true) */
+  show?: boolean
+}
+
+export function ExpandableSection({
+  sectionKey,
+  label,
+  icon,
+  count,
+  expanded,
+  onToggle,
+  children,
+  className,
+  contentClassName,
+  show = true,
+}: ExpandableSectionProps) {
+  if (!show) return null
+
+  return (
+    <div className={className}>
+      <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"
+      >
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          className={cn(
+            'shrink-0 transition-transform',
+            expanded ? 'rotate-0' : '-rotate-90'
+          )}
+        >
+          <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        {icon}
+        <span>{label}</span>
+        {count !== undefined && (
+          <span className="text-muted-foreground/60">({count})</span>
+        )}
+      </button>
+      {expanded && (
+        <div className={cn('mt-2 pl-4', contentClassName)}>
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Hook to manage expandable section state.
+ * Returns [expandedSections, toggleSection] tuple.
+ */
+export function useExpandedSections(initialExpanded: string[] = []) {
+  const [expanded, setExpanded] = React.useState<Set<string>>(
+    () => new Set(initialExpanded)
+  )
+
+  const toggle = React.useCallback((key: string) => {
+    setExpanded(prev => {
+      const next = new Set(prev)
+      if (next.has(key)) {
+        next.delete(key)
+      } else {
+        next.add(key)
+      }
+      return next
+    })
+  }, [])
+
+  const isExpanded = React.useCallback(
+    (key: string) => expanded.has(key),
+    [expanded]
+  )
+
+  return { expanded, toggle, isExpanded } as const
+}
+
+ExpandableSection.displayName = 'ExpandableSection'

package/src/hooks/use-service-worker.ts

@@ -0,0 +1,23 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function useServiceWorker() {
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker
+        .register('/sw.js')
+        .then((registration) => {
+          console.log('Service Worker registered:', registration.scope)
+
+          // Check for updates periodically
+          setInterval(() => {
+            registration.update()
+          }, 60 * 60 * 1000) // Check every hour
+        })
+        .catch((error) => {
+          console.error('Service Worker registration failed:', error)
+        })
+    }
+  }, [])
+}

package/src/index.ts

@@ -305,6 +305,19 @@ export type { WorkerSpecProps, WorkerSpecDocumentation, AnalysisSource, Analysis
 export { FlowchartDiagram } from './components/flowchart-diagram'
 export type { FlowchartDiagramProps } from './components/flowchart-diagram'
 
+// Expandable Section
+export { ExpandableSection, useExpandedSections } from './components/expandable-section'
+export type { ExpandableSectionProps } from './components/expandable-section'
+
+// Hooks
+export { useServiceWorker } from './hooks/use-service-worker'
+
+// Formatting Utilities
+export { formatCentsToEuros, formatEuros, formatDuration, formatRelativeTime } from './lib/formatting'
+
+// Email Template Helpers
+export { emailTemplate, buttonHtml, infoBoxHtml, noteBoxHtml } from './lib/email'
+
 // Utilities
 export { cn } from './lib/utils'
 

package/src/lib/email.ts

@@ -0,0 +1,146 @@
+/**
+ * Email Template Helpers
+ *
+ * Shared branded email template and HTML building blocks.
+ * Used by both platform and admin apps via their local `lib/email.ts` re-exports.
+ */
+
+/**
+ * Wrap email body content in the standard Dilipod branded template.
+ *
+ * Usage:
+ *   emailTemplate({
+ *     body: '<h2>Hello</h2><p>Content here</p>',
+ *   })
+ *
+ * Or with a preheader (hidden preview text in email clients):
+ *   emailTemplate({
+ *     preheader: 'Quick summary shown in inbox',
+ *     body: '...',
+ *   })
+ */
+export function emailTemplate({ body, preheader }: { body: string; preheader?: string }): string {
+  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; ${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>`
+}
+
+/**
+ * Render a CTA button for use inside emailTemplate body.
+ *
+ *   buttonHtml({ text: 'Reset Password', href: 'https://...' })
+ *   buttonHtml({ text: 'View Incident', href: '...', variant: 'danger' })
+ */
+export function buttonHtml({
+  text,
+  href,
+  variant = 'primary',
+}: {
+  text: string
+  href: string
+  variant?: 'primary' | 'danger'
+}): string {
+  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>`
+}
+
+/**
+ * Render an info box (grey background) for key details.
+ *
+ *   infoBoxHtml('<strong>Status:</strong> Deployed')
+ */
+export function infoBoxHtml(innerHtml: string): string {
+  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>`
+}
+
+/**
+ * Render a warning/note box (yellow background).
+ *
+ *   noteBoxHtml('This link expires in 1 hour.')
+ */
+export function noteBoxHtml(text: string): string {
+  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>`
+}

package/src/lib/formatting.ts

@@ -0,0 +1,51 @@
+/**
+ * Formatting Utilities
+ *
+ * Shared text, currency, duration, and date formatting used across apps.
+ */
+
+import { differenceInHours, differenceInMinutes, formatDistanceToNow } from 'date-fns'
+
+/**
+ * Convert a cent value to euros (numeric).
+ * e.g. 2900 → 29
+ */
+export function formatCentsToEuros(cents: number): string {
+  return `€${(cents / 100).toLocaleString()}`
+}
+
+/**
+ * Format a euro value as a display string.
+ * e.g. 299 → "€299" or 299.5 with decimals=2 → "€299.50"
+ */
+export function formatEuros(euros: number, decimals?: number): string {
+  if (decimals !== undefined) {
+    return `€${euros.toFixed(decimals)}`
+  }
+  return `€${euros.toLocaleString()}`
+}
+
+/**
+ * Format milliseconds as a human-readable duration.
+ * e.g. 1500 → "1.5s"
+ */
+export function formatDuration(ms: number): string {
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+/**
+ * Format a date into a compact relative-time string.
+ * Returns "—" for null/undefined, "5m" for < 1 hour, "2h" for < 48 hours,
+ * or a relative distance like "3 days" for older dates.
+ */
+export function formatRelativeTime(date: Date | string | null): string {
+  if (!date) return '—'
+  const d = typeof date === 'string' ? new Date(date) : date
+  const hours = differenceInHours(new Date(), d)
+  if (hours < 1) {
+    const mins = differenceInMinutes(new Date(), d)
+    return `${mins}m`
+  }
+  if (hours < 48) return `${hours}h`
+  return formatDistanceToNow(d, { addSuffix: false })
+}