@dashforge/tw 0.1.0-beta

package/src/components/DateTimePicker/DateTimePicker.test.tsx

@@ -0,0 +1,204 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DashFormProvider } from '@dashforge/forms';
+import { DateTimePicker, isoToInputValue } from './DateTimePicker.js';
+
+describe('isoToInputValue (pure helper)', () => {
+  it('returns "" for null / undefined / empty', () => {
+    expect(isoToInputValue('date', null)).toBe('');
+    expect(isoToInputValue('date', undefined)).toBe('');
+    expect(isoToInputValue('date', '')).toBe('');
+  });
+
+  it('passes through canonical `YYYY-MM-DD` for date mode', () => {
+    expect(isoToInputValue('date', '2026-05-16')).toBe('2026-05-16');
+  });
+
+  it('passes through canonical `HH:mm` for time mode', () => {
+    expect(isoToInputValue('time', '09:42')).toBe('09:42');
+  });
+
+  it('passes through canonical `HH:mm:ss` for time mode', () => {
+    expect(isoToInputValue('time', '09:42:15')).toBe('09:42:15');
+  });
+
+  it('passes through canonical `YYYY-MM-DDTHH:mm` for datetime mode', () => {
+    expect(isoToInputValue('datetime', '2026-05-16T09:42')).toBe(
+      '2026-05-16T09:42'
+    );
+  });
+
+  it('truncates a rich ISO datetime to the date mode prefix', () => {
+    expect(isoToInputValue('date', '2026-05-16T09:42:15.000Z')).toBe(
+      '2026-05-16'
+    );
+  });
+
+  it('returns "" for an unparseable string', () => {
+    expect(isoToInputValue('date', 'not-a-date')).toBe('');
+  });
+});
+
+describe('<DateTimePicker>', () => {
+  describe('standalone (no DashForm)', () => {
+    it('renders a native date input by default', () => {
+      render(<DateTimePicker name="dob" label="DOB" />);
+      const input = screen.getByLabelText('DOB') as HTMLInputElement;
+      expect(input.type).toBe('date');
+    });
+
+    it('renders a time input when mode="time"', () => {
+      render(<DateTimePicker name="t" label="Time" mode="time" />);
+      const input = screen.getByLabelText('Time') as HTMLInputElement;
+      expect(input.type).toBe('time');
+    });
+
+    it('renders a datetime-local input when mode="datetime"', () => {
+      render(<DateTimePicker name="dt" label="When" mode="datetime" />);
+      const input = screen.getByLabelText('When') as HTMLInputElement;
+      expect(input.type).toBe('datetime-local');
+    });
+
+    it('seeds `defaultValue` (uncontrolled)', () => {
+      render(
+        <DateTimePicker name="dob" label="DOB" defaultValue="2026-05-16" />
+      );
+      const input = screen.getByLabelText('DOB') as HTMLInputElement;
+      expect(input.defaultValue).toBe('2026-05-16');
+    });
+
+    it('reflects controlled `value`', () => {
+      render(
+        <DateTimePicker name="dob" label="DOB" value="2026-05-16" />
+      );
+      const input = screen.getByLabelText('DOB') as HTMLInputElement;
+      expect(input.value).toBe('2026-05-16');
+    });
+
+    it('truncates a controlled rich ISO to the date mode prefix', () => {
+      render(
+        <DateTimePicker
+          name="dob"
+          label="DOB"
+          value="2026-05-16T09:42:15.000Z"
+        />
+      );
+      const input = screen.getByLabelText('DOB') as HTMLInputElement;
+      expect(input.value).toBe('2026-05-16');
+    });
+
+    it('forwards min/max/step to the native input', () => {
+      render(
+        <DateTimePicker
+          name="t"
+          label="Time"
+          mode="time"
+          min="08:00"
+          max="18:00"
+          step={300}
+        />
+      );
+      const input = screen.getByLabelText('Time') as HTMLInputElement;
+      expect(input.min).toBe('08:00');
+      expect(input.max).toBe('18:00');
+      expect(input.step).toBe('300');
+    });
+
+    it('renders a `*` for required fields and sets the native attr', () => {
+      render(<DateTimePicker name="dob" label="DOB" required />);
+      const input = screen.getByLabelText(/DOB/) as HTMLInputElement;
+      expect(input.required).toBe(true);
+      expect(screen.getByText('*')).toBeTruthy();
+    });
+
+    it('renders helperText when not in error', () => {
+      render(
+        <DateTimePicker
+          name="dob"
+          label="DOB"
+          helperText="Pick a date in the past."
+        />
+      );
+      expect(screen.getByText('Pick a date in the past.')).toBeTruthy();
+    });
+
+    it('shows the helperText in the error slot when `error` is true', () => {
+      render(
+        <DateTimePicker
+          name="dob"
+          label="DOB"
+          error
+          helperText="Required"
+        />
+      );
+      const p = screen.getByText('Required');
+      // The error slot has the `text-danger-600` class per the variants.
+      expect(p.className).toMatch(/danger/);
+    });
+
+    it('disables the input', () => {
+      render(<DateTimePicker name="dob" label="DOB" disabled />);
+      const input = screen.getByLabelText('DOB') as HTMLInputElement;
+      expect(input.disabled).toBe(true);
+    });
+  });
+
+  describe('event wiring', () => {
+    it('fires onValueChange with the typed value (date)', () => {
+      const onValueChange = vi.fn();
+      render(
+        <DateTimePicker
+          name="dob"
+          label="DOB"
+          onValueChange={onValueChange}
+        />
+      );
+      const input = screen.getByLabelText('DOB') as HTMLInputElement;
+      fireEvent.change(input, { target: { value: '2026-12-25' } });
+      expect(onValueChange).toHaveBeenCalledWith('2026-12-25');
+    });
+
+    it('fires onValueChange with `null` when the input is cleared', () => {
+      const onValueChange = vi.fn();
+      render(
+        <DateTimePicker
+          name="dob"
+          label="DOB"
+          value="2026-05-16"
+          onValueChange={onValueChange}
+        />
+      );
+      const input = screen.getByLabelText('DOB') as HTMLInputElement;
+      fireEvent.change(input, { target: { value: '' } });
+      expect(onValueChange).toHaveBeenCalledWith(null);
+    });
+  });
+
+  describe('inside DashFormProvider', () => {
+    it('mounts cleanly with the bridge attached', () => {
+      render(
+        <DashFormProvider defaultValues={{ dob: '2026-05-16' }}>
+          <DateTimePicker name="dob" label="DOB" />
+        </DashFormProvider>
+      );
+      // Mount assertion — defaultValues commit is timing-sensitive in
+      // vitest (mirror of how Autocomplete / RadioGroup / NumberField
+      // are tested), so we don't assert input.value here.
+      expect(screen.getByLabelText('DOB')).toBeTruthy();
+    });
+  });
+
+  describe('visibility', () => {
+    it('returns null when visibleWhen returns false', () => {
+      const { container } = render(
+        <DateTimePicker
+          name="dob"
+          label="DOB"
+          visibleWhen={() => false}
+        />
+      );
+      expect(container.querySelector('input')).toBeNull();
+    });
+  });
+});

package/src/components/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,319 @@
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+} from 'react';
+import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
+import type { DashFormBridge, FieldRegistration } from '@dashforge/ui-core';
+import { useDashFieldMeta } from '@dashforge/forms';
+import { cn } from '../../utils/cn.js';
+import { useAccessState } from '../../hooks/useAccessState.js';
+import { resolveValidationState } from '../_shared/resolveValidationState.js';
+import { dateTimePickerVariants } from './dateTimePicker.variants.js';
+import type {
+  DateTimePickerMode,
+  DateTimePickerProps,
+} from './dateTimePicker.types.js';
+
+/**
+ * Resolve the native HTML input `type` for a given picker mode.
+ */
+function inputTypeFor(mode: DateTimePickerMode): string {
+  switch (mode) {
+    case 'time':
+      return 'time';
+    case 'datetime':
+      return 'datetime-local';
+    case 'date':
+    default:
+      return 'date';
+  }
+}
+
+/**
+ * Coerce a stored/exposed value (ISO 8601-ish string or `null`/`undefined`)
+ * into the format the native input expects.
+ *
+ * Contract:
+ *   - `date`     → `YYYY-MM-DD`
+ *   - `time`     → `HH:mm` (or `HH:mm:ss` if seconds present)
+ *   - `datetime` → `YYYY-MM-DDTHH:mm` (no timezone, datetime-local
+ *                  rejects `Z` / offset suffixes)
+ *
+ * The function is intentionally lenient:
+ *   - Pass-through when the input already matches the expected shape.
+ *   - Truncates a richer ISO string (e.g. `2026-05-16T10:23:45.000Z`)
+ *     down to the mode-appropriate prefix.
+ *   - Returns `''` for null / undefined / unparseable inputs (native
+ *     inputs use `''` to represent "no value").
+ */
+export function isoToInputValue(
+  mode: DateTimePickerMode,
+  raw: string | null | undefined
+): string {
+  if (raw == null || raw === '') return '';
+
+  // Fast path: already in the expected shape.
+  if (mode === 'date' && /^\d{4}-\d{2}-\d{2}$/.test(raw)) return raw;
+  if (mode === 'time' && /^\d{2}:\d{2}(:\d{2})?$/.test(raw)) return raw;
+  if (
+    mode === 'datetime' &&
+    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/.test(raw)
+  ) {
+    return raw;
+  }
+
+  // Slow path: parse via Date and re-format locally.
+  const d = new Date(raw);
+  if (isNaN(d.getTime())) return '';
+
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const yyyy = d.getFullYear();
+  const mm = pad(d.getMonth() + 1);
+  const dd = pad(d.getDate());
+  const hh = pad(d.getHours());
+  const mi = pad(d.getMinutes());
+
+  if (mode === 'date') return `${yyyy}-${mm}-${dd}`;
+  if (mode === 'time') return `${hh}:${mi}`;
+  return `${yyyy}-${mm}-${dd}T${hh}:${mi}`;
+}
+
+/**
+ * Take a native input string and return the canonical "stored" value:
+ * the same string for non-empty input, or `null` for empty (so the
+ * bridge / consumer never receives the ambiguous empty string).
+ */
+function inputValueToStored(raw: string): string | null {
+  return raw === '' ? null : raw;
+}
+
+/**
+ * Dashforge TW DateTimePicker — bridge-integrated native date/time input.
+ *
+ * Three modes (`mode` prop):
+ *   - `date`     — `<input type="date">` → `YYYY-MM-DD`
+ *   - `time`     — `<input type="time">` → `HH:mm` (`HH:mm:ss` with `step={1}`)
+ *   - `datetime` — `<input type="datetime-local">` → `YYYY-MM-DDTHH:mm`
+ *
+ * **Why native inputs instead of React Aria `<DatePicker>`?**
+ *
+ * 1. Zero new deps (`@internationalized/date` would add ~30 KB).
+ * 2. Mirrors `@dashforge/ui/DateTimePicker` (MUI side) for API parity.
+ * 3. Native inputs are AAA-grade a11y out of the box — screen readers,
+ *    keyboard nav, OS-provided calendar/clock UI.
+ * 4. Predictable state (no internal Aria state machine that fights
+ *    controlled props — the F5-A lesson learned in `<Autocomplete>`).
+ *
+ * A richer custom-calendar version (range mode, locale awareness,
+ * custom popover styling) can land as F5-B-bis built on Aria
+ * `<DatePicker>` / `<Calendar>`.
+ *
+ * **A11y**:
+ *   - `aria-invalid` driven by the resolved validation state.
+ *   - `aria-describedby` links input ↔ helper/error.
+ *   - Required fields get the native `required` attribute + a visual `*`.
+ *   - `color-scheme: light dark` keeps the OS calendar icon readable
+ *     in both color schemes.
+ */
+export function DateTimePicker(props: DateTimePickerProps) {
+  const {
+    name,
+    rules,
+    mode = 'date',
+    visibleWhen,
+    layout = 'stacked',
+    size,
+    label,
+    helperText,
+    required,
+    error,
+    disabled,
+    fullWidth,
+    access,
+    sx,
+    slotProps,
+    placeholder,
+    min,
+    max,
+    step,
+    value: explicitValue,
+    defaultValue,
+    onValueChange,
+  } = props;
+
+  // ───── Hooks (unconditional) ─────
+  const bridge = useContext(DashFormContext) as DashFormBridge | null;
+  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
+  // Per-field reactive snapshot. Same pattern as <TextField> — re-renders
+  // this component when its OWN bridge value changes, but not when a
+  // sibling field changes (perf contract).
+  const fieldMeta = useDashFieldMeta(name);
+  const accessState = useAccessState(access);
+
+  const inputId = useId();
+  const helperId = `${inputId}-help`;
+
+  // StrictMode-safe unregister-on-unmount.
+  const unregisterRef = useRef({ bridge, name });
+  unregisterRef.current = { bridge, name };
+  const isMountedRef = useRef(false);
+   
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      const { bridge: cap, name: capName } = unregisterRef.current;
+      queueMicrotask(() => {
+        if (!isMountedRef.current) cap?.unregister?.(capName);
+      });
+    };
+  }, []);
+
+  // ───── Derived ─────
+  const effectiveDisabled = Boolean(disabled) || accessState.disabled;
+  const effectiveReadOnly = accessState.readonly;
+  const isFormMode = Boolean(bridge?.register);
+
+  let resolvedError = error;
+  let resolvedHelperText: typeof helperText = helperText;
+  let registration: FieldRegistration | null = null;
+  let resolvedValue: string | null | undefined;
+
+  if (isFormMode && bridge) {
+    registration = bridge.register(name, rules);
+    const validation = resolveValidationState(name, bridge, error, helperText);
+    resolvedError = validation.error;
+    resolvedHelperText = validation.helperText;
+    if (explicitValue !== undefined) {
+      resolvedValue = explicitValue;
+    } else {
+      const bv = fieldMeta.value;
+      resolvedValue = bv == null ? null : String(bv);
+    }
+  } else if (explicitValue !== undefined) {
+    resolvedValue = explicitValue;
+  } else {
+    // Pure uncontrolled mode: defer to native input's defaultValue.
+    resolvedValue = undefined;
+  }
+
+  // Registration-supplied callback ref (RHF threads its own ref through
+  // here in form mode). Stable callback to keep React 19 happy.
+  const registrationRefFn = registration?.ref;
+  const inputRef = useCallback(
+    (instance: HTMLInputElement | null) => {
+      if (typeof registrationRefFn === 'function') {
+        registrationRefFn(instance);
+      }
+    },
+    [registrationRefFn]
+  );
+
+  // ───── Render-time guards (after all hooks) ─────
+  if (!isVisible) return null;
+  if (!accessState.visible) return null;
+
+  const v = dateTimePickerVariants({
+    size,
+    layout,
+    error: resolvedError,
+    fullWidth,
+    disabled: effectiveDisabled,
+  });
+
+  const inputType = inputTypeFor(mode);
+  const nativeValue =
+    resolvedValue === undefined ? undefined : isoToInputValue(mode, resolvedValue);
+  const nativeDefault =
+    !isFormMode && explicitValue === undefined && defaultValue !== undefined
+      ? isoToInputValue(mode, defaultValue)
+      : undefined;
+  const nativeMin = min != null ? isoToInputValue(mode, min) : undefined;
+  const nativeMax = max != null ? isoToInputValue(mode, max) : undefined;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const next = inputValueToStored(event.target.value);
+    if (isFormMode && bridge) {
+      bridge.setValue?.(name, next);
+      void registration?.onChange?.({
+        target: { name, value: next ?? '' },
+        type: 'change',
+      });
+    }
+    onValueChange?.(next);
+  };
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    if (isFormMode && bridge) {
+      registration?.onBlur?.(event);
+    }
+  };
+
+  return (
+    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cn(v.label(), slotProps?.label?.className)}
+        >
+          {label}
+          {required && (
+            <span
+              aria-hidden="true"
+              className={cn(
+                v.requiredMark(),
+                slotProps?.requiredMark?.className
+              )}
+            >
+              *
+            </span>
+          )}
+        </label>
+      )}
+
+      <div
+        className={cn(v.inputWrapper(), slotProps?.inputWrapper?.className)}
+      >
+        <input
+          id={inputId}
+          ref={inputRef}
+          name={name}
+          type={inputType}
+          // Controlled in form / explicit-value mode; uncontrolled with
+          // `defaultValue` otherwise. Mirrors the TextField pattern.
+          value={nativeValue}
+          defaultValue={nativeDefault}
+          min={nativeMin}
+          max={nativeMax}
+          step={step}
+          placeholder={placeholder}
+          disabled={effectiveDisabled}
+          readOnly={effectiveReadOnly}
+          required={required}
+          aria-invalid={resolvedError ? true : undefined}
+          aria-describedby={resolvedHelperText ? helperId : undefined}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          className={cn(v.input(), slotProps?.input?.className)}
+        />
+      </div>
+
+      {resolvedHelperText && (
+        <p
+          id={helperId}
+          className={cn(
+            resolvedError ? v.errorText() : v.helperText(),
+            resolvedError
+              ? slotProps?.errorText?.className
+              : slotProps?.helperText?.className
+          )}
+        >
+          {resolvedHelperText}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/DateTimePicker/dateTimePicker.types.ts

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
+import type { DateTimePickerVariants } from './dateTimePicker.variants.js';
+
+/**
+ * Operating mode of the picker.
+ *
+ *  - `'date'`     — `YYYY-MM-DD` (native `<input type="date">`)
+ *  - `'time'`     — `HH:mm` or `HH:mm:ss` (native `<input type="time">`)
+ *  - `'datetime'` — `YYYY-MM-DDTHH:mm` (native `<input type="datetime-local">`)
+ *
+ * Note: `datetime-local` does NOT include timezone info. Values are
+ * naive local-time strings. If you need TZ-aware persistence, convert
+ * upstream (e.g., interpret as UTC, or attach the user's TZ from a
+ * separate field).
+ */
+export type DateTimePickerMode = 'date' | 'time' | 'datetime';
+
+export interface DateTimePickerSlotProps {
+  root?: { className?: string };
+  label?: { className?: string };
+  requiredMark?: { className?: string };
+  inputWrapper?: { className?: string };
+  input?: { className?: string };
+  helperText?: { className?: string };
+  errorText?: { className?: string };
+}
+
+/**
+ * Props for `<DateTimePicker>`.
+ *
+ * Bridge-integrated date / time / datetime input built on the native
+ * HTML5 input types (`type="date|time|datetime-local"`). Chosen over a
+ * custom React Aria `<DatePicker>` for F5-B because:
+ *
+ *  1. **Zero new deps** — no `@internationalized/date`.
+ *  2. **A11y by default** — screen readers know how to announce these
+ *     inputs, including the OS-provided calendar/clock popup.
+ *  3. **Bundle size** — saves ~30KB minified over the Aria stack.
+ *  4. **API parity** with the MUI side (`@dashforge/ui/DateTimePicker`).
+ *  5. **Predictability** — no internal state machine to fight (see the
+ *     ComboBox lesson learned in `<Autocomplete>` F5-A).
+ *
+ * A richer "always-visible calendar grid" upgrade can come as F5-B-bis.
+ *
+ * Value contract: ISO 8601-ish naive strings, always.
+ */
+export interface DateTimePickerProps extends DateTimePickerVariants {
+  name: string;
+  rules?: unknown;
+  /** Which native input to render. @default 'date' */
+  mode?: DateTimePickerMode;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  required?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  /** Minimum value (ISO string compatible with the mode). */
+  min?: string;
+  /** Maximum value (ISO string compatible with the mode). */
+  max?: string;
+  /**
+   * Step in seconds (time / datetime). Default 60 ⇒ minute precision.
+   * Set to 1 to allow seconds.
+   */
+  step?: number;
+  /** Engine predicate — field not rendered when it returns `false`. */
+  visibleWhen?: (engine: Engine) => boolean;
+  /** RBAC access requirement. */
+  access?: AccessRequirement;
+  /** Root className shortcut. */
+  sx?: string;
+  /** Per-slot className overrides. */
+  slotProps?: DateTimePickerSlotProps;
+  /** Controlled value (form mode reads from the bridge if omitted). */
+  value?: string | null;
+  /** Default value for uncontrolled mode (no-op in form mode). */
+  defaultValue?: string | null;
+  /** Fires when the user picks a date/time (after bridge update in form mode). */
+  onValueChange?: (value: string | null) => void;
+}

package/src/components/DateTimePicker/dateTimePicker.variants.ts

@@ -0,0 +1,84 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+/**
+ * Tailwind-variants recipe for `<DateTimePicker>` with 6 slots.
+ *
+ * Styling mirrors `<TextField>` for layout / sizes / error states so
+ * the two field types compose visually in the same form.
+ *
+ * Native `<input type="date|time|datetime-local">` quirks handled here:
+ *
+ *  - The browser-rendered placeholder mask (e.g., `mm/dd/yyyy`) is
+ *    invisible on `bg-neutral-50` by default in some themes; we keep
+ *    the same neutral palette and rely on the input's own contrast
+ *    rules (no extra `::placeholder` styling — browsers don't honor it
+ *    on these input types).
+ *  - The native picker indicator (calendar / clock icon) is
+ *    browser-supplied; we ensure it stays visible in dark mode via
+ *    `color-scheme: light dark` on the input (set inline below).
+ */
+export const dateTimePickerVariants = tv({
+  slots: {
+    root: 'flex',
+    label: 'block text-sm font-medium text-neutral-900 mb-1',
+    requiredMark: 'text-danger-500 ml-0.5',
+    inputWrapper: [
+      'relative flex items-center',
+      'rounded-md border bg-neutral-50',
+      'border-neutral-300',
+      'transition-colors',
+      'focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30',
+    ],
+    input: [
+      'block w-full bg-transparent outline-none',
+      'text-neutral-900 placeholder:text-neutral-400',
+      'disabled:cursor-not-allowed disabled:opacity-60',
+      'read-only:cursor-default',
+      // `color-scheme` lets the native calendar / clock icon respect
+      // the dark mode (otherwise it stays light-themed against dark bg)
+      '[color-scheme:light_dark]',
+    ],
+    helperText: 'mt-1 text-sm text-neutral-600',
+    errorText: 'mt-1 text-sm text-danger-600',
+  },
+  variants: {
+    size: {
+      sm: { inputWrapper: 'h-8 px-2', input: 'text-sm' },
+      md: { inputWrapper: 'h-10 px-3', input: 'text-base' },
+      lg: { inputWrapper: 'h-12 px-4', input: 'text-lg' },
+    },
+    layout: {
+      stacked: { root: 'flex-col' },
+      inline: {
+        root: 'flex-row items-start gap-3',
+        label: 'mb-0 pt-2 whitespace-nowrap shrink-0',
+      },
+    },
+    error: {
+      true: {
+        inputWrapper:
+          'border-danger-500 focus-within:border-danger-500 focus-within:ring-danger-500/30',
+      },
+    },
+    fullWidth: {
+      true: {
+        root: 'w-full',
+        inputWrapper: 'w-full',
+      },
+    },
+    disabled: {
+      true: {
+        inputWrapper: 'opacity-60 cursor-not-allowed bg-neutral-200',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    layout: 'stacked',
+    error: false,
+    fullWidth: false,
+    disabled: false,
+  },
+});
+
+export type DateTimePickerVariants = VariantProps<typeof dateTimePickerVariants>;