@synthaxai/ui 1.0.0 → 1.2.0

package/dist/forms/DatePicker/DatePicker.svelte.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Date format options for the DatePicker.
+ */
+export type DateFormat = 'MM/DD/YYYY' | 'DD/MM/YYYY' | 'YYYY-MM-DD';
+/**
+ * Parses a date string into a Date object based on format.
+ */
+export declare function parseDate(value: string, format: DateFormat): Date | null;
+/**
+ * Formats a Date object into a string based on format.
+ */
+export declare function formatDate(date: Date | null, format: DateFormat): string;
+/**
+ * Calculates age from a date of birth.
+ */
+export declare function calculateAge(dob: Date): {
+    years: number;
+    months: number;
+    days: number;
+};
+/**
+ * Formats age for display.
+ */
+export declare function formatAge(dob: Date): string;
+import type { Snippet } from 'svelte';
+type InputSize = 'sm' | 'md' | 'lg';
+interface Props {
+    /** Unique identifier for the input */
+    id?: string;
+    /** Form field name */
+    name?: string;
+    /** Label text for the input */
+    label: string;
+    /** Current value as ISO date string (YYYY-MM-DD) or empty string */
+    value?: string;
+    /** Display format for the date */
+    format?: DateFormat;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readonly?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Hint text to display below the input */
+    hint?: string;
+    /** Success message when valid */
+    successMessage?: string;
+    /** Size of the input */
+    size?: InputSize;
+    /** Icon to display on the left */
+    iconLeft?: Snippet;
+    /** Whether to hide the label visually (still accessible) */
+    hideLabel?: boolean;
+    /** Additional CSS classes for the wrapper */
+    class?: string;
+    /** Show age calculation (for DOB fields) */
+    showAge?: boolean;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Disable dates in the past */
+    disablePast?: boolean;
+    /** Disable dates in the future */
+    disableFuture?: boolean;
+    /** Function to check if a specific date should be disabled */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Show clear button */
+    clearable?: boolean;
+    /** Show validation state immediately without waiting for interaction */
+    validateOnMount?: boolean;
+    /** Called when value changes */
+    onchange?: (value: string, date: Date | null) => void;
+    /** Called when calendar is opened */
+    onopen?: () => void;
+    /** Called when calendar is closed */
+    onclose?: () => void;
+    /** Called when clear button is clicked */
+    onclear?: () => void;
+    /** Test ID for e2e testing */
+    testId?: string;
+}
+/**
+ * DatePicker
+ *
+ * A fully accessible, healthcare-grade date picker component with:
+ * - Calendar popup with full keyboard navigation (WAI-ARIA dialog pattern)
+ * - Direct text input with automatic formatting
+ * - Age calculation display (critical for healthcare DOB fields)
+ * - Min/max date constraints
+ * - Past/future date restrictions
+ * - Disabled dates support
+ * - Focus trap and restoration
+ * - Screen reader announcements for month/year navigation
+ *
+ * Follows W3C APG Date Picker Dialog pattern:
+ * https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
+ *
+ * @example Basic usage
+ * <DatePicker
+ *   label="Date of Birth"
+ *   bind:value={dateOfBirth}
+ *   showAge
+ * />
+ *
+ * @example Appointment scheduling (no past dates)
+ * <DatePicker
+ *   label="Appointment Date"
+ *   bind:value={appointmentDate}
+ *   disablePast
+ *   minDate={new Date()}
+ * />
+ *
+ * @example Coverage period (date range)
+ * <DatePicker
+ *   label="Coverage Start"
+ *   bind:value={coverageStart}
+ *   minDate={new Date('2020-01-01')}
+ *   maxDate={new Date('2030-12-31')}
+ * />
+ */
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;
+//# sourceMappingURL=DatePicker.svelte.d.ts.map

package/dist/forms/DatePicker/DatePicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/DatePicker/DatePicker.svelte.ts"],"names":[],"mappings":"AAGC;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,CAAC;AAEpE;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,CAkCxE;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,MAAM,EAAE,UAAU,GAAG,MAAM,CAexE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAkBvF;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,IAAI,GAAG,MAAM,CAU3C;AAGF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOrC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,UAAU,KAAK;IACd,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wBAAwB;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACzC,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA4tBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/forms/DatePicker/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @synthaxai/ui - DatePicker Component
+ *
+ * A fully accessible date picker with calendar popup, input masking,
+ * and healthcare-specific features like age calculation.
+ */
+export { default as DatePicker } from './DatePicker.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/DatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/DatePicker/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/forms/DatePicker/index.js

@@ -0,0 +1,7 @@
+/**
+ * @synthaxai/ui - DatePicker Component
+ *
+ * A fully accessible date picker with calendar popup, input masking,
+ * and healthcare-specific features like age calculation.
+ */
+export { default as DatePicker } from './DatePicker.svelte';