@visitwonders/assembly 0.1.0

package/dist/form/date-picker.js

@@ -0,0 +1,366 @@
+import "./date-picker.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { guidFor } from '@ember/object/internals';
+import { isBefore, isAfter, isSameDay, isValid, format, parse } from 'date-fns';
+import Popover from '../overlay/popover.js';
+import Icon from '../media/icon.js';
+import { Calendar as Calendar$1, X } from 'lucide';
+import Calendar from './calendar.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Date Parsing Utilities
+// ============================================================================
+/** Supported input formats for parsing user input */
+const PARSE_FORMATS = ['dd/MM/yyyy', 'dd-MM-yyyy', 'd/M/yyyy', 'd-M-yyyy', 'yyyy-MM-dd', 'dd.MM.yyyy', 'd.M.yyyy'];
+/**
+ * Try to parse a date string using multiple formats
+ */
+function parseDateString(input) {
+  if (!input || !input.trim()) return null;
+  const trimmed = input.trim();
+  // Try each format until one works
+  for (const fmt of PARSE_FORMATS) {
+    try {
+      const parsed = parse(trimmed, fmt, new Date());
+      if (isValid(parsed)) {
+        return parsed;
+      }
+    } catch {
+      // Continue to next format
+    }
+  }
+  return null;
+}
+/**
+ * Format a date for display
+ */
+function formatDate(date, dateFormat) {
+  if (!date || !isValid(date)) return '';
+  return format(date, dateFormat);
+}
+/**
+ * Format a date for form submission (ISO format)
+ */
+function formatDateForSubmission(date) {
+  if (!date || !isValid(date)) return '';
+  return format(date, 'yyyy-MM-dd');
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+let datePickerIdCounter = 0;
+class DatePicker extends Component {
+  static {
+    g(this.prototype, "isOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isOpen = (i(this, "isOpen"), void 0);
+  static {
+    g(this.prototype, "inputValue", [tracked], function () {
+      return '';
+    });
+  }
+  #inputValue = (i(this, "inputValue"), void 0);
+  static {
+    g(this.prototype, "internalValue", [tracked], function () {
+      return null;
+    });
+  }
+  #internalValue = (i(this, "internalValue"), void 0);
+  static {
+    g(this.prototype, "hasInternalValueChanged", [tracked], function () {
+      return false;
+    });
+  }
+  #hasInternalValueChanged = (i(this, "hasInternalValueChanged"), void 0);
+  static {
+    g(this.prototype, "skipInputReset", [tracked], function () {
+      return false;
+    });
+  }
+  #skipInputReset = (i(this, "skipInputReset"), void 0);
+  /** Flag to prevent closeDropdown from resetting inputValue after a successful typed submission */
+  calendarId = `date-picker-calendar-${++datePickerIdCounter}`;
+  inputElement = null;
+  get componentId() {
+    return this.args.id || guidFor(this);
+  }
+  get dateFormat() {
+    return this.args.format ?? 'dd/MM/yyyy';
+  }
+  get closeOnSelect() {
+    return this.args.closeOnSelect ?? true;
+  }
+  get allowTextInput() {
+    return this.args.allowTextInput ?? true;
+  }
+  get showIcon() {
+    return this.args.showIcon ?? true;
+  }
+  get clearable() {
+    return this.args.clearable ?? false;
+  }
+  get weekStartsOn() {
+    return this.args.weekStartsOn ?? 0;
+  }
+  get showOutsideDays() {
+    return this.args.showOutsideDays ?? true;
+  }
+  get showToday() {
+    return this.args.showToday ?? true;
+  }
+  /** Check if component is controlled */
+  get isControlled() {
+    return this.args.value !== undefined;
+  }
+  /** Get current selected value (controlled or uncontrolled) */
+  get selectedValue() {
+    if (this.isControlled) {
+      return this.args.value ?? null;
+    }
+    if (this.args.defaultValue !== undefined && !this.hasInternalValueChanged) {
+      return this.args.defaultValue;
+    }
+    return this.internalValue;
+  }
+  /** Value for Calendar component (converts null to undefined) */
+  get calendarValue() {
+    return this.selectedValue ?? undefined;
+  }
+  get displayValue() {
+    return formatDate(this.selectedValue, this.dateFormat);
+  }
+  /** The value to show in the input field */
+  get inputDisplayValue() {
+    // When dropdown is open, show what user is typing
+    if (this.isOpen) {
+      return this.inputValue;
+    }
+    // After submitting a typed value, show the submitted value until args.value syncs
+    if (this.skipInputReset) {
+      return this.inputValue;
+    }
+    // Otherwise show the current selected value
+    return this.displayValue;
+  }
+  get placeholder() {
+    return this.args.placeholder ?? this.dateFormat.toLowerCase();
+  }
+  get showClearButton() {
+    return this.clearable && this.selectedValue !== null && !this.args.isDisabled && !this.args.isReadOnly;
+  }
+  get ariaExpanded() {
+    return this.isOpen ? 'true' : 'false';
+  }
+  get ariaRequired() {
+    return this.args.isRequired ? 'true' : undefined;
+  }
+  get ariaInvalid() {
+    return this.args.isInvalid ? 'true' : undefined;
+  }
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  setupInput = modifier(element => {
+    this.inputElement = element;
+    return () => {
+      this.inputElement = null;
+    };
+  });
+  // ============================================================================
+  // Event Handlers
+  // ============================================================================
+  handleInputClick = event => {
+    // Stop propagation to prevent the Popover trigger from toggling
+    event.stopPropagation();
+    if (!this.args.isDisabled && !this.args.isReadOnly) {
+      this.openDropdown();
+    }
+  };
+  handleInputFocus = event => {
+    this.args.onFocus?.(event);
+  };
+  handleInputBlur = event => {
+    // Parse and validate text input on blur
+    if (this.allowTextInput && this.inputValue !== this.displayValue) {
+      this.parseAndSubmitTypedValue();
+    }
+    this.args.onBlur?.(event);
+  };
+  /** Parse the typed input value, validate, and submit */
+  parseAndSubmitTypedValue() {
+    // If input is empty, clear the value
+    if (!this.inputValue.trim()) {
+      this.setValue(null);
+      return true;
+    }
+    const parsed = parseDateString(this.inputValue);
+    if (parsed) {
+      // Check constraints
+      let isValidDate = true;
+      if (this.args.minDate && isBefore(parsed, this.args.minDate)) {
+        isValidDate = false;
+      }
+      if (this.args.maxDate && isAfter(parsed, this.args.maxDate)) {
+        isValidDate = false;
+      }
+      // Check disabled dates
+      if (this.args.disabledDates) {
+        if (Array.isArray(this.args.disabledDates)) {
+          if (this.args.disabledDates.some(d => isSameDay(d, parsed))) {
+            isValidDate = false;
+          }
+        } else if (this.args.disabledDates(parsed)) {
+          isValidDate = false;
+        }
+      }
+      // Check disabled days of week
+      if (this.args.disabledDaysOfWeek?.includes(parsed.getDay())) {
+        isValidDate = false;
+      }
+      if (isValidDate) {
+        this.setValue(parsed);
+        // Update inputValue to the formatted new value immediately
+        this.inputValue = formatDate(parsed, this.dateFormat);
+        // Prevent closeDropdown from resetting inputValue
+        this.skipInputReset = true;
+        return true;
+      }
+    }
+    // Reset input to display value on invalid input
+    this.inputValue = this.displayValue;
+    return false;
+  }
+  handleInputChange = event => {
+    const target = event.target;
+    this.inputValue = target.value;
+  };
+  handleKeyDown = event => {
+    if (this.args.isDisabled) return;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.isOpen) {
+          this.openDropdown();
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.isOpen) {
+          this.openDropdown();
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        event.stopPropagation();
+        // If user typed a custom value, parse and submit it
+        if (this.allowTextInput && this.inputValue !== this.displayValue) {
+          this.parseAndSubmitTypedValue();
+          this.closeDropdown();
+        } else if (!this.isOpen) {
+          this.openDropdown();
+        }
+        break;
+      case 'Escape':
+        if (this.isOpen) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.closeDropdown();
+        }
+        break;
+      case 'Tab':
+        // Parse typed value before closing
+        if (this.allowTextInput && this.inputValue !== this.displayValue) {
+          this.parseAndSubmitTypedValue();
+        }
+        if (this.isOpen) {
+          this.closeDropdown();
+        }
+        break;
+    }
+  };
+  handleCalendarSelect = date => {
+    this.setValue(date);
+    if (this.closeOnSelect) {
+      this.closeDropdown();
+      this.inputElement?.focus();
+    }
+  };
+  handleClearClick = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    this.setValue(null);
+    this.inputElement?.focus();
+  };
+  // ============================================================================
+  // Methods
+  // ============================================================================
+  setValue(date) {
+    if (!this.isControlled) {
+      this.hasInternalValueChanged = true;
+      this.internalValue = date;
+    }
+    this.args.onChange?.(date);
+    this.inputValue = formatDate(date, this.dateFormat);
+  }
+  openDropdown = () => {
+    if (this.args.isDisabled || this.args.isReadOnly) return;
+    this.isOpen = true;
+    this.skipInputReset = false;
+    this.inputValue = this.displayValue;
+    this.args.onOpenChange?.(true);
+  };
+  closeDropdown = () => {
+    this.isOpen = false;
+    // Only reset inputValue if we didn't just submit a typed value
+    if (!this.skipInputReset) {
+      this.inputValue = this.displayValue;
+    }
+    this.args.onOpenChange?.(false);
+  };
+  toggleDropdown = () => {
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  };
+  handleOpenChange = open => {
+    if (open) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  };
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("<Popover @trigger=\"click\" @open={{this.isOpen}} @onOpenChange={{this.handleOpenChange}} @dismissOnClickOutside={{true}} @dismissOnEscape={{true}} class=\"date-picker_e103d84e0\" data-invalid={{if @isInvalid \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-readonly={{if @isReadOnly \"true\"}} data-open={{if this.isOpen \"true\"}} data-test-date-picker ...attributes as |popover|>\n  {{!-- Hidden input for form submission --}}\n  {{#if @name}}\n    <input type=\"hidden\" name={{@name}} value={{formatDateForSubmission this.selectedValue}} data-test-date-picker-hidden-input />\n  {{/if}}\n\n  <popover.Trigger class=\"date-picker-trigger-wrapper_e103d84e0\" disabled={{@isDisabled}} data-test-date-picker-trigger-wrapper>\n    <div class=\"date-picker-input-wrapper_e103d84e0\">\n      {{!-- template-lint-disable no-redundant-role --}}\n      <input id={{this.componentId}} type=\"text\" role=\"combobox\" class=\"date-picker-input_e103d84e0\" aria-haspopup=\"dialog\" aria-expanded={{this.ariaExpanded}} aria-controls={{this.calendarId}} aria-required={{this.ariaRequired}} aria-invalid={{this.ariaInvalid}} aria-describedby={{@aria-describedby}} placeholder={{this.placeholder}} value={{this.inputDisplayValue}} disabled={{@isDisabled}} readonly={{if this.allowTextInput @isReadOnly true}} autocomplete=\"off\" {{this.setupInput}} {{on \"click\" this.handleInputClick}} {{on \"focus\" this.handleInputFocus}} {{on \"blur\" this.handleInputBlur}} {{on \"input\" this.handleInputChange}} {{on \"keydown\" this.handleKeyDown}} data-test-date-picker-input />\n\n      {{#if this.showClearButton}}\n        <button type=\"button\" class=\"date-picker-clear_e103d84e0\" aria-label=\"Clear date\" {{on \"click\" this.handleClearClick}} data-test-date-picker-clear>\n          <Icon @icon={{X}} @size=\"sm\" />\n        </button>\n      {{/if}}\n\n      {{#if this.showIcon}}\n        <span class=\"date-picker-trigger_e103d84e0\" aria-hidden=\"true\" data-test-date-picker-trigger>\n          <Icon @icon={{CalendarIcon}} @size=\"sm\" />\n        </span>\n      {{/if}}\n    </div>\n  </popover.Trigger>\n\n  <popover.Content @side=\"bottom\" @align=\"start\" @sideOffset={{4}} @animation=\"scale\" class=\"date-picker-popover-content_e103d84e0\" aria-label=\"Choose date\">\n    <Calendar id={{this.calendarId}} @mode=\"single\" @value={{this.calendarValue}} @onChange={{this.handleCalendarSelect}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{this.weekStartsOn}} @showOutsideDays={{this.showOutsideDays}} @showToday={{this.showToday}} data-test-date-picker-calendar />\n  </popover.Content>\n</Popover>", {
+      strictMode: true,
+      scope: () => ({
+        Popover,
+        formatDateForSubmission,
+        on,
+        Icon,
+        X,
+        CalendarIcon: Calendar$1,
+        Calendar
+      })
+    }), this);
+  }
+}
+
+export { DatePicker as default, formatDate, formatDateForSubmission, parseDateString };
+//# sourceMappingURL=date-picker.js.map

package/dist/form/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/form/date-range-picker-field.js

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import Control from './control.js';
+import DateRangePicker from './date-range-picker.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+class DateRangePickerField extends Component {
+  get isInvalid() {
+    return !!this.args.error;
+  }
+  get isLabelHidden() {
+    return this.args.labelVisibility === 'hidden';
+  }
+  /** Build aria-describedby from the control's help text and error message IDs */
+  getAriaDescribedBy = controlId => {
+    const parts = [];
+    if (this.args.helpText) {
+      parts.push(`${controlId}-help-text`);
+    }
+    if (this.args.error) {
+      parts.push(`${controlId}-error-message`);
+    }
+    return parts.length > 0 ? parts.join(' ') : undefined;
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <DateRangePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @defaultValue={{@defaultValue}} @startPlaceholder={{@startPlaceholder}} @endPlaceholder={{@endPlaceholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @presets={{@presets}} @allowTextInput={{@allowTextInput}} @showIcon={{@showIcon}} @clearable={{@clearable}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} @onOpenChange={{@onOpenChange}} data-test-date-range-picker-field />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
+      strictMode: true,
+      scope: () => ({
+        Control,
+        DateRangePicker
+      })
+    }), this);
+  }
+}
+
+export { DateRangePickerField as default };
+//# sourceMappingURL=date-range-picker-field.js.map

package/dist/form/date-range-picker-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-field.js","sources":["../../src/form/date-range-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DateRangePicker, {\n  type DateFormat,\n  type DateRangePreset,\n  type DateRange,\n} from './date-range-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DateRangePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected date range value */\n    value?: DateRange | null;\n\n    /** Default value (uncontrolled) */\n    defaultValue?: DateRange | null;\n\n    /** Placeholder text for start date */\n    startPlaceholder?: string;\n\n    /** Placeholder text for end date */\n    endPlaceholder?: string;\n\n    /** Date format for display and parsing (date-fns format) */\n    format?: DateFormat;\n\n    /** Minimum allowed date */\n    minDate?: Date;\n\n    /** Maximum allowed date */\n    maxDate?: Date;\n\n    /** Array of disabled dates or a function to check if a date is disabled */\n    disabledDates?: Date[] | ((date: Date) => boolean);\n\n    /** Array of day numbers (0-6, Sunday-Saturday) to disable */\n    disabledDaysOfWeek?: number[];\n\n    /** Day to start the week on (0 = Sunday, 1 = Monday, etc.) */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /** Show days from adjacent months */\n    showOutsideDays?: boolean;\n\n    /** Show today indicator */\n    showToday?: boolean;\n\n    /** Preset date range options */\n    presets?: DateRangePreset[];\n\n    /** Allow typing in the inputs */\n    allowTextInput?: boolean;\n\n    /** Show calendar icon */\n    showIcon?: boolean;\n\n    /** Show clear button when value is selected */\n    clearable?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name prefix for forms (creates {name}_start and {name}_end) */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: DateRange | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n\n    /** Open state change handler */\n    onOpenChange?: (open: boolean) => void;\n  };\n}\n\nexport default class DateRangePickerField extends Component<DateRangePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\n\n      <DateRangePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @defaultValue={{@defaultValue}}\n        @startPlaceholder={{@startPlaceholder}}\n        @endPlaceholder={{@endPlaceholder}}\n        @format={{@format}}\n        @minDate={{@minDate}}\n        @maxDate={{@maxDate}}\n        @disabledDates={{@disabledDates}}\n        @disabledDaysOfWeek={{@disabledDaysOfWeek}}\n        @weekStartsOn={{@weekStartsOn}}\n        @showOutsideDays={{@showOutsideDays}}\n        @showToday={{@showToday}}\n        @presets={{@presets}}\n        @allowTextInput={{@allowTextInput}}\n        @showIcon={{@showIcon}}\n        @clearable={{@clearable}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        @onOpenChange={{@onOpenChange}}\n        data-test-date-range-picker-field\n      />\n\n      {{#if @helpText}}\n        <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n      {{/if}}\n\n      {{#if @error}}\n        <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n      {{/if}}\n    </Control>\n  </template>\n}\n"],"names":["DateRangePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DateRangePicker"],"mappings":";;;;;;AAoGe,MAAMA,6BAA6BC,SAAA,CAAU;EAC1D,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,kuCAAA,EAoDA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/date-range-picker.css

@@ -0,0 +1,259 @@
+/* src/form/date-range-picker.css */
+/* Date Range Picker Container */
+.date-range-picker_e973c8cc7 {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Trigger Wrapper - Reset button styles from popover.Trigger */
+.date-range-picker-trigger-wrapper_e973c8cc7 {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  text-align: inherit;
+  cursor: text;
+}
+
+.date-range-picker-trigger-wrapper_e973c8cc7:disabled {
+  cursor: not-allowed;
+}
+
+/* Input Wrapper */
+.date-range-picker-input-wrapper_e973c8cc7 {
+  display: flex;
+  align-items: stretch;
+  height: var(--input-height-md);
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg);
+  font-size: var(--font-size-md);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+/* Focus state */
+.date-range-picker-input-wrapper_e973c8cc7:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Invalid state */
+.date-range-picker_e973c8cc7[data-invalid="true"] .date-range-picker-input-wrapper_e973c8cc7 {
+  border-color: var(--color-border-critical);
+}
+
+.date-range-picker_e973c8cc7[data-invalid="true"]
+  .date-range-picker-input-wrapper_e973c8cc7:focus-within {
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* Disabled state */
+.date-range-picker_e973c8cc7[data-disabled="true"] .date-range-picker-input-wrapper_e973c8cc7 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+/* Read-only state */
+.date-range-picker_e973c8cc7[data-readonly="true"] .date-range-picker-input-wrapper_e973c8cc7 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-readonly);
+}
+
+/* Calendar Icon (prefix) */
+.date-range-picker-icon_e973c8cc7 {
+  display: flex;
+  align-items: center;
+  padding-left: var(--spacing-3);
+  color: var(--color-icon-secondary);
+}
+
+.date-range-picker_e973c8cc7[data-disabled="true"] .date-range-picker-icon_e973c8cc7 {
+  color: var(--color-icon-disabled);
+}
+
+/* Input Elements */
+.date-range-picker-input_e973c8cc7 {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--spacing-2);
+  border: none;
+  background: transparent;
+  color: var(--color-text);
+  font-family: var(--font-family-mono);
+  font-size: inherit;
+  line-height: var(--line-height-tight);
+  text-align: center;
+}
+
+.date-range-picker-input_e973c8cc7:focus {
+  outline: none;
+}
+
+.date-range-picker-input_e973c8cc7::placeholder {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+}
+
+.date-range-picker-input_e973c8cc7:disabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.date-range-picker-input_e973c8cc7:read-only {
+  cursor: default;
+}
+
+/* Active input highlight */
+.date-range-picker-input_e973c8cc7[data-active="true"] {
+  background-color: color-mix(
+    in srgb,
+    var(--color-bg-fill-accent) 10%,
+    transparent
+  );
+}
+
+/* Separator */
+.date-range-picker-separator_e973c8cc7 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--spacing-1);
+  color: var(--color-icon-secondary);
+}
+
+.date-range-picker_e973c8cc7[data-disabled="true"] .date-range-picker-separator_e973c8cc7 {
+  color: var(--color-icon-disabled);
+}
+
+/* Clear Button */
+.date-range-picker-clear_e973c8cc7 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.date-range-picker-clear_e973c8cc7:hover {
+  color: var(--color-icon-primary);
+  background-color: var(--color-bg-surface-hover);
+}
+
+.date-range-picker-clear_e973c8cc7:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
+}
+
+/* Dropdown Trigger Icon */
+.date-range-picker-trigger_e973c8cc7 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  border-left: var(--border-width-1) solid var(--color-border-control);
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  border-top-right-radius: calc(var(--radius-md) - 1px);
+  border-bottom-right-radius: calc(var(--radius-md) - 1px);
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.date-range-picker-trigger_e973c8cc7:hover {
+  background-color: var(--color-bg-surface-hover);
+  color: var(--color-icon-primary);
+}
+
+.date-range-picker-trigger_e973c8cc7:active {
+  background-color: var(--color-bg-surface-pressed);
+}
+
+.date-range-picker_e973c8cc7[data-disabled="true"] .date-range-picker-trigger_e973c8cc7 {
+  color: var(--color-icon-disabled);
+  border-left-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+.date-range-picker_e973c8cc7[data-disabled="true"] .date-range-picker-trigger_e973c8cc7:hover {
+  background-color: transparent;
+}
+
+.date-range-picker_e973c8cc7[data-invalid="true"] .date-range-picker-trigger_e973c8cc7 {
+  border-left-color: var(--color-border-critical);
+}
+
+/* Popover Content */
+.date-range-picker-popover-content_e973c8cc7 {
+  padding: 0;
+}
+
+/* Popover Inner - contains presets sidebar and calendar */
+.date-range-picker-popover-inner_e973c8cc7 {
+  display: flex;
+}
+
+/* Presets Sidebar */
+.date-range-picker-presets_e973c8cc7 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  padding: var(--spacing-3);
+  border-right: var(--border-width-1) solid var(--color-border-subtle);
+  background-color: var(--color-bg-surface-secondary);
+  min-width: 140px;
+}
+
+.date-range-picker-preset_e973c8cc7 {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: none;
+  background: transparent;
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family-sans);
+  text-align: left;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.date-range-picker-preset_e973c8cc7:hover {
+  background-color: var(--color-bg-fill-interactive-hover);
+}
+
+.date-range-picker-preset_e973c8cc7:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Calendar Container */
+.date-range-picker-calendar-container_e973c8cc7 {
+  padding: 0;
+}
+
+/* Remove Calendar's own border when inside DateRangePicker popover */
+.date-range-picker-popover-content_e973c8cc7 .calendar_e973c8cc7 {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}