@dilipod/ui 0.4.26 → 0.4.28

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.26",
+  "version": "0.4.28",
   "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"
   },

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/components/input.tsx

@@ -15,7 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
+          'flex h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none focus-visible:border-gray-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
           error
             ? 'border-red-500'
             : 'border-gray-300',

package/src/components/select.tsx

@@ -17,7 +17,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
           className={cn(
             'h-10 w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)]',
             'placeholder:text-gray-500',
-            'focus-visible:outline-none',
+            'focus-visible:outline-none focus-visible:border-gray-500',
             'disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors',
             'appearance-none pr-10',
             error

package/src/components/textarea.tsx

@@ -14,7 +14,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors resize-none',
+          'flex min-h-[80px] w-full rounded-sm border bg-white px-3 py-2 text-base text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none focus-visible:border-gray-500 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors resize-none',
           error
             ? 'border-red-500'
             : 'border-gray-300',

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,16 @@ 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'
+
 // Utilities
 export { cn } from './lib/utils'
 

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 })
+}