@jmruthers/pace-core 0.5.183 → 0.5.185

package/dist/components.d.ts

@@ -1,10 +1,10 @@
-export { a as UnifiedAuthContextType, c as UnifiedAuthProvider, b as UnifiedAuthProviderProps, u as useUnifiedAuth } from './UnifiedAuthProvider-F86d7dSi.js';
-export { A as Alert, m as AlertDescription, l as AlertTitle, n as Avatar, p as AvatarFallback, o as AvatarImage, q as Badge, r as BadgeProps, s as BadgeVariant, B as Button, a as ButtonProps, a3 as Calendar, a4 as CalendarProps, C as Card, g as CardActions, bc as CardActionsProps, f as CardContent, e as CardDescription, c as CardFooter, b as CardHeader, h as CardProps, d as CardTitle, t as Checkbox, D as Dialog, G as DialogBody, z as DialogClose, E as DialogContent, bf as DialogContentProps, K as DialogDescription, bk as DialogDescriptionProps, H as DialogFooter, bi as DialogFooterProps, F as DialogHeader, bh as DialogHeaderProps, x as DialogOverlay, bg as DialogOverlayProps, w as DialogPortal, bd as DialogProps, bl as DialogSize, J as DialogTitle, bj as DialogTitleProps, y as DialogTrigger, be as DialogTriggerProps, aF as ErrorBoundary, bn as ErrorBoundaryProps, bo as ErrorBoundaryState, aJ as EventSelector, aO as FileDisplay, aP as FileDisplayProps, aM as FileUpload, aN as FileUploadProps, ar as Footer, as as FooterProps, ak as Form, al as FormField, an as FormFieldProps, am as FormProps, aq as Header, I as Input, i as InputProps, L as Label, j as LabelProps, aG as LoadingSpinner, ao as LoginForm, ap as LoginFormProps, av as NavigationItem, at as NavigationMenu, au as NavigationMenuProps, aK as OrganisationSelector, bm as OrganisationSelectorProps, az as PaceAppLayout, aA as PaceAppLayoutProps, aB as PaceLoginPage, aC as PaceLoginPageProps, P as Progress, v as ProgressProps, aD as ProtectedRoute, aE as ProtectedRouteProps, b5 as PublicPageFooter, bb as PublicPageFooterProps, b4 as PublicPageHeader, ba as PublicPageHeaderProps, b3 as PublicPageLayout, b9 as PublicPageLayoutProps, b6 as PublicPageProvider, M as Select, R as SelectContent, N as SelectGroup, V as SelectItem, U as SelectLabel, W as SelectSeparator, Q as SelectTrigger, O as SelectValue, aH as SessionRestorationLoader, aI as SessionRestorationLoaderProps, S as Switch, u as SwitchProps, aX as Table, aZ as TableBody, a_ as TableCaption, a$ as TableCell, b0 as TableFooter, b1 as TableHead, aY as TableHeader, b2 as TableRow, X as Tabs, _ as TabsContent, a2 as TabsContentProps, Y as TabsList, a0 as TabsListProps, $ as TabsProps, Z as TabsTrigger, a1 as TabsTriggerProps, T as Textarea, k as TextareaProps, a5 as Toast, a7 as ToastAction, ad as ToastActionElement, ac as ToastClose, ab as ToastDescription, ae as ToastProps, a8 as ToastProvider, aa as ToastTitle, a9 as ToastViewport, a6 as Toaster, af as Tooltip, ah as TooltipContent, ai as TooltipProvider, aj as TooltipRoot, ag as TooltipTrigger, aW as UseFileReferenceForRecordReturn, aU as UseFileReferenceOptions, aV as UseFileReferenceReturn, ax as UserMenu, aQ as useFileReference, aS as useFileReferenceById, aR as useFileReferenceForRecord, aT as useFilesByCategory, b8 as useIsPublicPage, b7 as usePublicPageContext } from './index-Bl--n7-T.js';
+export { a as UnifiedAuthContextType, d as UnifiedAuthProvider, c as UnifiedAuthProviderProps, u as useUnifiedAuth } from './UnifiedAuthProvider-BG0AL5eE.js';
+export { A as Alert, n as AlertDescription, m as AlertTitle, o as Avatar, q as AvatarFallback, p as AvatarImage, r as Badge, s as BadgeProps, t as BadgeVariant, B as Button, a as ButtonProps, al as Calendar, am as CalendarProps, C as Card, g as CardActions, i as CardActionsProps, f as CardContent, e as CardDescription, c as CardFooter, b as CardHeader, h as CardProps, d as CardTitle, u as Checkbox, J as Dialog, U as DialogBody, O as DialogClose, Q as DialogContent, _ as DialogContentProps, X as DialogDescription, a3 as DialogDescriptionProps, V as DialogFooter, a1 as DialogFooterProps, R as DialogHeader, a0 as DialogHeaderProps, M as DialogOverlay, $ as DialogOverlayProps, K as DialogPortal, Y as DialogProps, a4 as DialogSize, W as DialogTitle, a2 as DialogTitleProps, N as DialogTrigger, Z as DialogTriggerProps, aT as ErrorBoundary, aU as ErrorBoundaryProps, aV as ErrorBoundaryState, aZ as EventSelector, b0 as FileDisplay, b1 as FileDisplayProps, a_ as FileUpload, a$ as FileUploadProps, aJ as Footer, aK as FooterProps, aC as Form, aD as FormField, aF as FormFieldProps, aE as FormProps, aI as Header, I as Input, j as InputProps, L as Label, k as LabelProps, aW as LoadingSpinner, aG as LoginForm, aH as LoginFormProps, aP as NavigationItem, aN as NavigationMenu, aO as NavigationMenuProps, aQ as OrganisationSelector, aR as OrganisationSelectorProps, bj as PaceAppLayout, bi as PaceAppLayoutProps, bl as PaceLoginPage, bk as PaceLoginPageProps, P as Progress, w as ProgressProps, aL as ProtectedRoute, aM as ProtectedRouteProps, bb as PublicPageFooter, bh as PublicPageFooterProps, ba as PublicPageHeader, bg as PublicPageHeaderProps, b9 as PublicPageLayout, bf as PublicPageLayoutProps, bc as PublicPageProvider, a5 as Select, a9 as SelectContent, a6 as SelectGroup, ab as SelectItem, aa as SelectLabel, ac as SelectSeparator, a8 as SelectTrigger, a7 as SelectValue, aX as SessionRestorationLoader, aY as SessionRestorationLoaderProps, S as Switch, v as SwitchProps, x as Table, z as TableBody, D as TableCaption, E as TableCell, F as TableFooter, G as TableHead, y as TableHeader, H as TableRow, ad as Tabs, ag as TabsContent, ak as TabsContentProps, ae as TabsList, ai as TabsListProps, ah as TabsProps, af as TabsTrigger, aj as TabsTriggerProps, T as Textarea, l as TextareaProps, an as Toast, ap as ToastAction, av as ToastActionElement, au as ToastClose, at as ToastDescription, aw as ToastProps, aq as ToastProvider, as as ToastTitle, ar as ToastViewport, ao as Toaster, ax as Tooltip, az as TooltipContent, aA as TooltipProvider, aB as TooltipRoot, ay as TooltipTrigger, b8 as UseFileReferenceForRecordReturn, b6 as UseFileReferenceOptions, b7 as UseFileReferenceReturn, aS as UserMenu, b2 as useFileReference, b4 as useFileReferenceById, b3 as useFileReferenceForRecord, b5 as useFilesByCategory, be as useIsPublicPage, bd as usePublicPageContext } from './PublicPageProvider-BABf6JCh.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 export { u as useToast } from './useToast-C8gR5ir4.js';
-export { D as DataTable, a as DataTableProps } from './DataTable-Bz8ffqyA.js';
-export { A as AggregateConfig, D as DataRecord, g as DataTableAction, a as DataTableColumn, j as DataTableToolbarButton, f as EmptyStateConfig, G as GetRowId } from './types-_x1f4QBF.js';
-export { b as FileCategory, a as FileMetadata, F as FileReference, c as FileUploadOptions } from './file-reference-D06mEEWW.js';
-import 'react/jsx-runtime';
+export { D as DataTable, a as DataTableProps } from './DataTable-Z9NLVJh0.js';
+export { A as AggregateConfig, c as DataRecord, a as DataTableAction, D as DataTableColumn, b as DataTableToolbarButton, E as EmptyStateConfig, G as GetRowId } from './types-DUyCRSTj.js';
+export { F as FileCategory, b as FileMetadata, a as FileReference, c as FileUploadOptions } from './file-reference-BjR39ktt.js';
 import 'react';
 import '@supabase/supabase-js';
 import './event-CW5YB_2p.js';
@@ -24,3 +24,179 @@ import 'react-hook-form';
 import 'zod';
 import './types-UU913iLA.js';
 import '@tanstack/react-table';
+
+/**
+ * @file DateTimeField Component
+ * @package @jmruthers/pace-core
+ * @module Components/DateTimeField
+ * @since 0.1.0
+ *
+ * Form input component for datetime values with timezone support.
+ * Handles UTC ↔ timezone conversion automatically.
+ *
+ * Features:
+ * - Automatic UTC ↔ timezone conversion
+ * - Prevents unwanted conversions during user editing
+ * - Shows timezone information when not UTC
+ * - Supports both ISO string and Date object values
+ * - Uses native datetime-local input type
+ * - Accessible form field with proper labels
+ *
+ * @example
+ * ```tsx
+ * import { DateTimeField } from '@jmruthers/pace-core/components';
+ * import { useState } from 'react';
+ *
+ * function EventForm() {
+ *   const [startTime, setStartTime] = useState<string>();
+ *
+ *   return (
+ *     <DateTimeField
+ *       label="Start Time"
+ *       value={startTime}
+ *       onChange={setStartTime}
+ *       timezone="America/New_York"
+ *       required
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @accessibility
+ * - Proper label association with htmlFor
+ * - Required field indicators
+ * - Screen reader friendly
+ * - Keyboard navigation support
+ * - Focus management
+ */
+/**
+ * Props for the DateTimeField component
+ */
+interface DateTimeFieldProps {
+    /**
+     * Field label
+     */
+    label: string;
+    /**
+     * UTC date value (ISO string, Date object, or undefined)
+     */
+    value: string | Date | undefined;
+    /**
+     * Change handler that receives UTC value (ISO string or Date object)
+     */
+    onChange: (value: string | Date | undefined) => void;
+    /**
+     * Target timezone for display (default: 'UTC')
+     */
+    timezone?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * If true, onChange returns Date object instead of ISO string
+     */
+    returnAsDate?: boolean;
+    /**
+     * Input id (auto-generated if not provided)
+     */
+    id?: string;
+    /**
+     * Helper text to display below the label
+     */
+    helperText?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+}
+/**
+ * DateTimeField component
+ * Form input for datetime values with automatic timezone conversion
+ *
+ * @param props - DateTimeField configuration
+ * @returns JSX.Element - The rendered datetime field
+ */
+declare function DateTimeField({ label, value, onChange, timezone, required, className, returnAsDate, id, helperText, error }: DateTimeFieldProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * @file DatePickerWithTimezone Component
+ * @package @jmruthers/pace-core
+ * @module Components/DatePickerWithTimezone
+ * @since 0.1.0
+ *
+ * Date picker component that displays timezone information alongside the calendar.
+ * Provides a calendar interface with timezone context for date selection.
+ *
+ * Features:
+ * - Calendar date selection
+ * - Timezone display (shows "Local" when matches user timezone)
+ * - Optional "Done" button
+ * - Accessible date selection
+ * - Keyboard navigation support
+ *
+ * @example
+ * ```tsx
+ * import { DatePickerWithTimezone } from '@jmruthers/pace-core/components';
+ * import { useState } from 'react';
+ *
+ * function DateSelector() {
+ *   const [date, setDate] = useState<Date>();
+ *
+ *   return (
+ *     <DatePickerWithTimezone
+ *       selected={date}
+ *       onSelect={setDate}
+ *       timezone="America/New_York"
+ *       onDone={() => console.log('Date selected')}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @accessibility
+ * - WCAG 2.1 AA compliant
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ * - Focus management
+ * - Proper ARIA attributes
+ */
+/**
+ * Props for the DatePickerWithTimezone component
+ */
+interface DatePickerWithTimezoneProps {
+    /**
+     * Currently selected date
+     */
+    selected?: Date;
+    /**
+     * Date selection handler
+     */
+    onSelect: (date: Date | undefined) => void;
+    /**
+     * Optional callback when "Done" button is clicked
+     */
+    onDone?: () => void;
+    /**
+     * Timezone to display (defaults to user's timezone)
+     */
+    timezone?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * DatePickerWithTimezone component
+ * Date picker with timezone information display
+ *
+ * @param props - DatePickerWithTimezone configuration
+ * @returns JSX.Element - The rendered date picker with timezone
+ */
+declare function DatePickerWithTimezone({ selected, onSelect, onDone, timezone, className }: DatePickerWithTimezoneProps): react_jsx_runtime.JSX.Element;
+
+export { DatePickerWithTimezone, type DatePickerWithTimezoneProps, DateTimeField, type DateTimeFieldProps };

package/dist/components.js

@@ -49,7 +49,7 @@ import {
   useFileReferenceById,
   useFileReferenceForRecord,
   useFilesByCategory
-} from "./chunk-QETLRQI6.js";
+} from "./chunk-HC67NW5K.js";
 import {
   Alert,
   AlertDescription,
@@ -90,39 +90,183 @@ import {
   TooltipProvider,
   TooltipRoot,
   TooltipTrigger
-} from "./chunk-QUVSNGIP.js";
-import "./chunk-RA3JUFMW.js";
-import "./chunk-M7W4CP3M.js";
+} from "./chunk-HGPQUCBC.js";
+import "./chunk-445GEP27.js";
+import "./chunk-U6WNSFX5.js";
 import "./chunk-FSFQFJCU.js";
 import {
   ErrorBoundary,
   PublicPageProvider,
   useIsPublicPage,
   usePublicPageContext
-} from "./chunk-MI7HBHN3.js";
+} from "./chunk-MX3EIJGQ.js";
 import {
   useToast
 } from "./chunk-6C4YBBJM.js";
-import "./chunk-QCDXODCA.js";
+import "./chunk-XAUHJD3L.js";
 import "./chunk-KQCRWDSA.js";
 import {
   UnifiedAuthProvider,
   useUnifiedAuth
-} from "./chunk-FUEYYMX5.js";
+} from "./chunk-FXFJRTKI.js";
 import {
   FileCategory
-} from "./chunk-UHNYIBXL.js";
+} from "./chunk-IXSNYUCT.js";
 import "./chunk-QXHPKYJV.js";
 import {
-  LoadingSpinner
-} from "./chunk-KUEN3HFB.js";
-import "./chunk-R77UEZ4E.js";
+  LoadingSpinner,
+  fromZonedTime,
+  getUserTimeZone,
+  toZonedTime
+} from "./chunk-THRPYOFK.js";
+import {
+  cn
+} from "./chunk-R77UEZ4E.js";
 import "./chunk-F2IMUDXZ.js";
 import "./chunk-FMUCXFII.js";
 import "./chunk-VBXEHIUJ.js";
 import "./chunk-SQGMNID3.js";
 import "./chunk-PWLANIRT.js";
 import "./chunk-7D4SUZUM.js";
+
+// src/components/DateTimeField/DateTimeField.tsx
+import * as React from "react";
+import { format, parse } from "date-fns";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DateTimeField({
+  label,
+  value,
+  onChange,
+  timezone = "UTC",
+  required = false,
+  className,
+  returnAsDate = false,
+  id,
+  helperText,
+  error
+}) {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const fieldId = id || `datetime-field-${React.useId()}`;
+  const getDisplayValue = React.useCallback(() => {
+    if (!value) {
+      return "";
+    }
+    try {
+      let dateObj;
+      if (typeof value === "string") {
+        dateObj = new Date(value);
+      } else {
+        dateObj = value;
+      }
+      if (!dateObj || isNaN(dateObj.getTime())) {
+        return "";
+      }
+      const zonedDate = toZonedTime(dateObj, timezone);
+      return format(zonedDate, "yyyy-MM-dd'T'HH:mm");
+    } catch {
+      return "";
+    }
+  }, [value, timezone]);
+  const displayValue = isEditing ? void 0 : getDisplayValue();
+  const handleChange = React.useCallback((e) => {
+    setIsEditing(true);
+    const inputValue = e.target.value;
+    if (!inputValue) {
+      onChange(void 0);
+      return;
+    }
+    try {
+      const localDate = parse(inputValue, "yyyy-MM-dd'T'HH:mm", /* @__PURE__ */ new Date());
+      if (isNaN(localDate.getTime())) {
+        onChange(void 0);
+        return;
+      }
+      const utcDate = fromZonedTime(localDate, timezone);
+      if (returnAsDate) {
+        onChange(utcDate);
+      } else {
+        onChange(utcDate.toISOString());
+      }
+    } catch {
+      onChange(void 0);
+    }
+  }, [timezone, returnAsDate, onChange]);
+  const handleBlur = React.useCallback(() => {
+    setIsEditing(false);
+  }, []);
+  const getTimezoneDisplay = React.useCallback(() => {
+    if (timezone === "UTC") {
+      return "";
+    }
+    const userTz = getUserTimeZone();
+    if (timezone === userTz) {
+      return "Local";
+    }
+    return timezone;
+  }, [timezone]);
+  const timezoneDisplay = getTimezoneDisplay();
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, required, helperText, error, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: inputRef,
+          id: fieldId,
+          type: "datetime-local",
+          value: displayValue,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          required,
+          error: !!error,
+          className: "w-full"
+        }
+      ),
+      timezoneDisplay && /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none", children: timezoneDisplay })
+    ] })
+  ] });
+}
+
+// src/components/DatePickerWithTimezone/DatePickerWithTimezone.tsx
+import { Clock } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DatePickerWithTimezone({
+  selected,
+  onSelect,
+  onDone,
+  timezone,
+  className
+}) {
+  const userTimezone = getUserTimeZone();
+  const displayTimezone = timezone || userTimezone;
+  const timezoneDisplay = displayTimezone === userTimezone ? "Local" : displayTimezone;
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx2("div", { className: "p-3", children: /* @__PURE__ */ jsx2(
+      Calendar,
+      {
+        mode: "single",
+        selected,
+        onSelect,
+        initialFocus: true,
+        captionLayout: "dropdown-buttons",
+        fromYear: 1900,
+        toYear: 2100,
+        className: "p-0"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-t border-border px-3 py-2", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx2(Clock, { className: "h-4 w-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs2("span", { children: [
+          "Timezone: ",
+          /* @__PURE__ */ jsx2("span", { "aria-label": `Timezone ${timezoneDisplay}`, children: timezoneDisplay })
+        ] })
+      ] }),
+      onDone && /* @__PURE__ */ jsx2(Button, { onClick: onDone, size: "sm", className: "h-8", children: "Done" })
+    ] })
+  ] });
+}
 export {
   Alert,
   AlertDescription,
@@ -142,6 +286,8 @@ export {
   CardTitle,
   Checkbox,
   DataTable,
+  DatePickerWithTimezone,
+  DateTimeField,
   Dialog,
   DialogBody,
   DialogClose,

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/components/DateTimeField/DateTimeField.tsx","../src/components/DatePickerWithTimezone/DatePickerWithTimezone.tsx"],"sourcesContent":["/**\n * @file DateTimeField Component\n * @package @jmruthers/pace-core\n * @module Components/DateTimeField\n * @since 0.1.0\n *\n * Form input component for datetime values with timezone support.\n * Handles UTC ↔ timezone conversion automatically.\n *\n * Features:\n * - Automatic UTC ↔ timezone conversion\n * - Prevents unwanted conversions during user editing\n * - Shows timezone information when not UTC\n * - Supports both ISO string and Date object values\n * - Uses native datetime-local input type\n * - Accessible form field with proper labels\n *\n * @example\n * ```tsx\n * import { DateTimeField } from '@jmruthers/pace-core/components';\n * import { useState } from 'react';\n *\n * function EventForm() {\n *   const [startTime, setStartTime] = useState<string>();\n *\n *   return (\n *     <DateTimeField\n *       label=\"Start Time\"\n *       value={startTime}\n *       onChange={setStartTime}\n *       timezone=\"America/New_York\"\n *       required\n *     />\n *   );\n * }\n * ```\n *\n * @accessibility\n * - Proper label association with htmlFor\n * - Required field indicators\n * - Screen reader friendly\n * - Keyboard navigation support\n * - Focus management\n */\n\nimport * as React from 'react';\nimport { format, parse } from 'date-fns';\nimport { Label } from '../Label';\nimport { Input } from '../Input';\nimport { cn } from '../../utils/core/cn';\nimport { toZonedTime, fromZonedTime, getUserTimeZone } from '../../utils/timezone';\n\n/**\n * Props for the DateTimeField component\n */\nexport interface DateTimeFieldProps {\n  /**\n   * Field label\n   */\n  label: string;\n  /**\n   * UTC date value (ISO string, Date object, or undefined)\n   */\n  value: string | Date | undefined;\n  /**\n   * Change handler that receives UTC value (ISO string or Date object)\n   */\n  onChange: (value: string | Date | undefined) => void;\n  /**\n   * Target timezone for display (default: 'UTC')\n   */\n  timezone?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n  /**\n   * If true, onChange returns Date object instead of ISO string\n   */\n  returnAsDate?: boolean;\n  /**\n   * Input id (auto-generated if not provided)\n   */\n  id?: string;\n  /**\n   * Helper text to display below the label\n   */\n  helperText?: string;\n  /**\n   * Error message to display\n   */\n  error?: string;\n}\n\n/**\n * DateTimeField component\n * Form input for datetime values with automatic timezone conversion\n *\n * @param props - DateTimeField configuration\n * @returns JSX.Element - The rendered datetime field\n */\nexport function DateTimeField({\n  label,\n  value,\n  onChange,\n  timezone = 'UTC',\n  required = false,\n  className,\n  returnAsDate = false,\n  id,\n  helperText,\n  error\n}: DateTimeFieldProps) {\n  const [isEditing, setIsEditing] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const fieldId = id || `datetime-field-${React.useId()}`;\n\n  // Convert UTC value to timezone for display\n  const getDisplayValue = React.useCallback((): string => {\n    if (!value) {\n      return '';\n    }\n\n    try {\n      let dateObj: Date;\n      if (typeof value === 'string') {\n        dateObj = new Date(value);\n      } else {\n        dateObj = value;\n      }\n\n      if (!dateObj || isNaN(dateObj.getTime())) {\n        return '';\n      }\n\n      // Convert UTC to timezone\n      const zonedDate = toZonedTime(dateObj, timezone);\n\n      // Format for datetime-local input (YYYY-MM-DDTHH:mm)\n      return format(zonedDate, \"yyyy-MM-dd'T'HH:mm\");\n    } catch {\n      return '';\n    }\n  }, [value, timezone]);\n\n  const displayValue = isEditing ? undefined : getDisplayValue();\n\n  // Handle input change\n  const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    setIsEditing(true);\n    const inputValue = e.target.value;\n\n    if (!inputValue) {\n      onChange(undefined);\n      return;\n    }\n\n    try {\n      // Parse the datetime-local value (in timezone)\n      const localDate = parse(inputValue, \"yyyy-MM-dd'T'HH:mm\", new Date());\n\n      if (isNaN(localDate.getTime())) {\n        onChange(undefined);\n        return;\n      }\n\n      // Convert from timezone to UTC\n      const utcDate = fromZonedTime(localDate, timezone);\n\n      // Return as ISO string or Date object\n      if (returnAsDate) {\n        onChange(utcDate);\n      } else {\n        onChange(utcDate.toISOString());\n      }\n    } catch {\n      onChange(undefined);\n    }\n  }, [timezone, returnAsDate, onChange]);\n\n  // Handle blur to stop editing mode\n  const handleBlur = React.useCallback(() => {\n    setIsEditing(false);\n  }, []);\n\n  // Get timezone display text\n  const getTimezoneDisplay = React.useCallback((): string => {\n    if (timezone === 'UTC') {\n      return '';\n    }\n\n    const userTz = getUserTimeZone();\n    if (timezone === userTz) {\n      return 'Local';\n    }\n\n    return timezone;\n  }, [timezone]);\n\n  const timezoneDisplay = getTimezoneDisplay();\n\n  return (\n    <div className={cn('space-y-2', className)}>\n      <Label htmlFor={fieldId} required={required} helperText={helperText} error={error}>\n        {label}\n      </Label>\n      <div className=\"relative\">\n        <Input\n          ref={inputRef}\n          id={fieldId}\n          type=\"datetime-local\"\n          value={displayValue}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          required={required}\n          error={!!error}\n          className=\"w-full\"\n        />\n        {timezoneDisplay && (\n          <span className=\"absolute right-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground pointer-events-none\">\n            {timezoneDisplay}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n\n","/**\n * @file DatePickerWithTimezone Component\n * @package @jmruthers/pace-core\n * @module Components/DatePickerWithTimezone\n * @since 0.1.0\n *\n * Date picker component that displays timezone information alongside the calendar.\n * Provides a calendar interface with timezone context for date selection.\n *\n * Features:\n * - Calendar date selection\n * - Timezone display (shows \"Local\" when matches user timezone)\n * - Optional \"Done\" button\n * - Accessible date selection\n * - Keyboard navigation support\n *\n * @example\n * ```tsx\n * import { DatePickerWithTimezone } from '@jmruthers/pace-core/components';\n * import { useState } from 'react';\n *\n * function DateSelector() {\n *   const [date, setDate] = useState<Date>();\n *\n *   return (\n *     <DatePickerWithTimezone\n *       selected={date}\n *       onSelect={setDate}\n *       timezone=\"America/New_York\"\n *       onDone={() => console.log('Date selected')}\n *     />\n *   );\n * }\n * ```\n *\n * @accessibility\n * - WCAG 2.1 AA compliant\n * - Keyboard navigation support\n * - Screen reader friendly\n * - Focus management\n * - Proper ARIA attributes\n */\n\nimport * as React from 'react';\nimport { Calendar } from '../Calendar';\nimport { Button } from '../Button';\nimport { Clock } from 'lucide-react';\nimport { getUserTimeZone } from '../../utils/timezone';\nimport { cn } from '../../utils/core/cn';\n\n/**\n * Props for the DatePickerWithTimezone component\n */\nexport interface DatePickerWithTimezoneProps {\n  /**\n   * Currently selected date\n   */\n  selected?: Date;\n  /**\n   * Date selection handler\n   */\n  onSelect: (date: Date | undefined) => void;\n  /**\n   * Optional callback when \"Done\" button is clicked\n   */\n  onDone?: () => void;\n  /**\n   * Timezone to display (defaults to user's timezone)\n   */\n  timezone?: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * DatePickerWithTimezone component\n * Date picker with timezone information display\n *\n * @param props - DatePickerWithTimezone configuration\n * @returns JSX.Element - The rendered date picker with timezone\n */\nexport function DatePickerWithTimezone({\n  selected,\n  onSelect,\n  onDone,\n  timezone,\n  className\n}: DatePickerWithTimezoneProps) {\n  const userTimezone = getUserTimeZone();\n  const displayTimezone = timezone || userTimezone;\n  const timezoneDisplay = displayTimezone === userTimezone ? 'Local' : displayTimezone;\n\n  return (\n    <div className={cn('flex flex-col', className)}>\n      <div className=\"p-3\">\n        <Calendar\n          mode=\"single\"\n          selected={selected}\n          onSelect={onSelect}\n          initialFocus\n          captionLayout=\"dropdown-buttons\"\n          fromYear={1900}\n          toYear={2100}\n          className=\"p-0\"\n        />\n      </div>\n\n      <div className=\"flex items-center justify-between border-t border-border px-3 py-2\">\n        <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n          <Clock className=\"h-4 w-4\" aria-hidden=\"true\" />\n          <span>\n            Timezone: <span aria-label={`Timezone ${timezoneDisplay}`}>{timezoneDisplay}</span>\n          </span>\n        </div>\n        {onDone && (\n          <Button onClick={onDone} size=\"sm\" className=\"h-8\">\n            Done\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n"],"mappings":"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","names":["jsx","jsxs"]}