@visitwonders/assembly 0.1.0

package/dist/form/country-select.js

@@ -0,0 +1,336 @@
+import "./country-select.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { eq } from 'ember-truth-helpers';
+import Popover from '../overlay/popover.js';
+import Icon from '../media/icon.js';
+import { Search, ChevronDown } from 'lucide';
+import { countryByCode, getCountryFlagUrl, filterCountries, getSuggestedCountryFromLocale, searchCountries } from './country-data.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Main Component
+// ============================================================================
+let countrySelectIdCounter = 0;
+class CountrySelect extends Component {
+  static {
+    g(this.prototype, "isOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isOpen = (i(this, "isOpen"), void 0);
+  static {
+    g(this.prototype, "activeIndex", [tracked], function () {
+      return -1;
+    });
+  }
+  #activeIndex = (i(this, "activeIndex"), void 0);
+  static {
+    g(this.prototype, "searchQuery", [tracked], function () {
+      return '';
+    });
+  }
+  #searchQuery = (i(this, "searchQuery"), void 0);
+  listboxId = `country-select-listbox-${++countrySelectIdCounter}`;
+  triggerElement = null;
+  searchInputElement = null;
+  listboxElement = null;
+  get showFlag() {
+    return this.args.showFlag ?? true;
+  }
+  get selectedCountry() {
+    if (!this.args.value) return undefined;
+    return countryByCode.get(this.args.value.toUpperCase());
+  }
+  get displayText() {
+    if (!this.selectedCountry) return '';
+    let text = this.selectedCountry.name;
+    if (this.args.displayDialCode) {
+      text += ` (${this.selectedCountry.dialCode})`;
+    }
+    return text;
+  }
+  get triggerDisplayText() {
+    return this.displayText || this.args.placeholder || '';
+  }
+  get selectedCountryFlagUrl() {
+    if (!this.showFlag || !this.selectedCountry) return undefined;
+    return getCountryFlagUrl(this.selectedCountry.code);
+  }
+  get baseCountries() {
+    return filterCountries({
+      includeOnly: this.args.includeOnly,
+      exclude: this.args.exclude
+    });
+  }
+  get suggestedCodes() {
+    const codes = [];
+    // Add explicitly suggested countries
+    if (this.args.suggestedCountries) {
+      codes.push(...this.args.suggestedCountries.map(c => c.toUpperCase()));
+    }
+    // Add locale-based suggestion
+    if (this.args.prioritizeByLocale) {
+      const localeCode = getSuggestedCountryFromLocale();
+      if (localeCode && !codes.includes(localeCode)) {
+        codes.unshift(localeCode);
+      }
+    }
+    // Filter to only include countries that are in baseCountries
+    const baseCodeSet = new Set(this.baseCountries.map(c => c.code));
+    return codes.filter(code => baseCodeSet.has(code));
+  }
+  get suggestedCountries() {
+    if (this.suggestedCodes.length === 0) return [];
+    return this.suggestedCodes.map(code => countryByCode.get(code)).filter(c => c !== undefined);
+  }
+  get otherCountries() {
+    if (this.suggestedCodes.length === 0) return this.baseCountries;
+    const suggestedSet = new Set(this.suggestedCodes);
+    return this.baseCountries.filter(c => !suggestedSet.has(c.code));
+  }
+  get filteredSuggestedCountries() {
+    if (!this.searchQuery.trim()) return this.suggestedCountries;
+    return searchCountries(this.searchQuery, this.suggestedCountries);
+  }
+  get filteredOtherCountries() {
+    if (!this.searchQuery.trim()) return this.otherCountries;
+    return searchCountries(this.searchQuery, this.otherCountries);
+  }
+  // Pre-compute countries with their global indices
+  get suggestedWithIndex() {
+    return this.filteredSuggestedCountries.map((country, index) => ({
+      country,
+      globalIndex: index
+    }));
+  }
+  get otherWithIndex() {
+    const offset = this.filteredSuggestedCountries.length;
+    return this.filteredOtherCountries.map((country, index) => ({
+      country,
+      globalIndex: offset + index
+    }));
+  }
+  get allFilteredCountries() {
+    return [...this.filteredSuggestedCountries, ...this.filteredOtherCountries];
+  }
+  get hasSuggested() {
+    return this.filteredSuggestedCountries.length > 0;
+  }
+  get hasOther() {
+    return this.filteredOtherCountries.length > 0;
+  }
+  get hasResults() {
+    return this.allFilteredCountries.length > 0;
+  }
+  get activeCountry() {
+    if (this.activeIndex < 0) return undefined;
+    return this.allFilteredCountries[this.activeIndex];
+  }
+  get activeDescendantId() {
+    if (!this.activeCountry || this.activeIndex < 0) return undefined;
+    const isSuggested = this.activeIndex < this.filteredSuggestedCountries.length;
+    const prefix = isSuggested ? 'suggested' : 'other';
+    return `${this.listboxId}-${prefix}-${this.activeCountry.code}`;
+  }
+  get ariaExpanded() {
+    return this.isOpen ? 'true' : 'false';
+  }
+  get ariaRequired() {
+    return this.args.isRequired ? 'true' : undefined;
+  }
+  get ariaInvalid() {
+    return this.args.isInvalid ? 'true' : undefined;
+  }
+  isSelected = code => {
+    return this.args.value?.toUpperCase() === code;
+  };
+  // Setup trigger element reference and event handlers
+  setupTrigger = modifier(element => {
+    this.triggerElement = element;
+    element.addEventListener('keydown', this.handleTriggerKeyDown);
+    element.addEventListener('focus', this.handleFocus);
+    element.addEventListener('blur', this.handleBlur);
+    return () => {
+      element.removeEventListener('keydown', this.handleTriggerKeyDown);
+      element.removeEventListener('focus', this.handleFocus);
+      element.removeEventListener('blur', this.handleBlur);
+      this.triggerElement = null;
+    };
+  });
+  // Setup search input element reference
+  setupSearchInput = modifier(element => {
+    this.searchInputElement = element;
+    // Focus the search input when dropdown opens (prevent scroll to avoid jumping)
+    element.focus({
+      preventScroll: true
+    });
+    element.addEventListener('keydown', this.handleSearchKeyDown);
+    return () => {
+      element.removeEventListener('keydown', this.handleSearchKeyDown);
+      this.searchInputElement = null;
+    };
+  });
+  // Setup listbox element reference
+  setupListbox = modifier(element => {
+    this.listboxElement = element;
+    return () => {
+      this.listboxElement = null;
+    };
+  });
+  handleFocus = event => {
+    this.args.onFocus?.(event);
+  };
+  handleBlur = event => {
+    this.args.onBlur?.(event);
+  };
+  handleTriggerKeyDown = event => {
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+      case 'ArrowDown':
+      case 'ArrowUp':
+        if (!this.isOpen) {
+          event.preventDefault();
+          this.openDropdown();
+        }
+        break;
+      case 'Escape':
+        if (this.isOpen) {
+          event.preventDefault();
+          this.closeDropdown();
+        }
+        break;
+    }
+  };
+  handleSearchKeyDown = event => {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.moveActiveOption(1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.moveActiveOption(-1);
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (this.activeCountry) {
+          this.selectCountry(this.activeCountry.code);
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        this.closeDropdown();
+        break;
+      case 'Tab':
+        this.closeDropdown();
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.activeIndex = 0;
+        this.scrollActiveIntoView();
+        break;
+      case 'End':
+        event.preventDefault();
+        this.activeIndex = this.allFilteredCountries.length - 1;
+        this.scrollActiveIntoView();
+        break;
+    }
+  };
+  handleSearchInput = event => {
+    const target = event.target;
+    this.searchQuery = target.value;
+    // Reset active index when search changes
+    this.activeIndex = this.allFilteredCountries.length > 0 ? 0 : -1;
+  };
+  moveActiveOption(direction) {
+    const count = this.allFilteredCountries.length;
+    if (count === 0) return;
+    if (this.activeIndex < 0) {
+      this.activeIndex = direction === 1 ? 0 : count - 1;
+    } else {
+      this.activeIndex = (this.activeIndex + direction + count) % count;
+    }
+    this.scrollActiveIntoView();
+  }
+  scrollActiveIntoView() {
+    if (!this.activeCountry || !this.listboxElement || this.activeIndex < 0) return;
+    const activeId = this.activeDescendantId;
+    if (!activeId) return;
+    const optionElement = this.listboxElement.querySelector(`#${activeId}`);
+    optionElement?.scrollIntoView({
+      block: 'nearest'
+    });
+  }
+  openDropdown = () => {
+    if (this.args.isDisabled) return;
+    this.isOpen = true;
+    this.searchQuery = '';
+    // Set initial active to selected country or first option
+    if (this.args.value) {
+      const index = this.allFilteredCountries.findIndex(c => c.code === this.args.value?.toUpperCase());
+      this.activeIndex = index >= 0 ? index : 0;
+    } else {
+      this.activeIndex = this.allFilteredCountries.length > 0 ? 0 : -1;
+    }
+  };
+  closeDropdown = () => {
+    this.isOpen = false;
+    this.activeIndex = -1;
+    this.searchQuery = '';
+    this.triggerElement?.focus();
+  };
+  toggleDropdown = () => {
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  };
+  handleOpenChange = open => {
+    if (open) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  };
+  selectCountry = code => {
+    this.args.onChange?.(code);
+    this.closeDropdown();
+  };
+  handleOptionClick = code => {
+    return event => {
+      event.preventDefault();
+      this.selectCountry(code);
+    };
+  };
+  handleOptionMouseEnter = index => {
+    return () => {
+      this.activeIndex = index;
+    };
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<Popover @trigger=\"manual\" @open={{this.isOpen}} @onOpenChange={{this.handleOpenChange}} @dismissOnClickOutside={{true}} @dismissOnEscape={{true}} class=\"country-select_e5533d0a6\" data-invalid={{if @isInvalid \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-open={{if this.isOpen \"true\"}} data-test-country-select ...attributes as |popover|>\n  {{!-- Hidden input for form submission --}}\n  {{#if @name}}\n    <input type=\"hidden\" name={{@name}} value={{@value}} data-test-country-select-input />\n  {{/if}}\n\n  <popover.Trigger {{this.setupTrigger}} {{on \"click\" this.toggleDropdown}} class=\"country-select-trigger_e5533d0a6\" id={{@id}} role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded={{this.ariaExpanded}} aria-controls={{this.listboxId}} aria-required={{this.ariaRequired}} aria-invalid={{this.ariaInvalid}} aria-describedby={{@aria-describedby}} disabled={{@isDisabled}} data-test-country-select-trigger>\n    {{#if this.selectedCountryFlagUrl}}\n      <img src={{this.selectedCountryFlagUrl}} alt class=\"country-select-trigger-flag_e5533d0a6\" data-test-country-select-trigger-flag />\n    {{/if}}\n    <span class=\"country-select-trigger-text_e5533d0a6\" data-placeholder={{unless this.selectedCountry \"true\"}} data-test-country-select-trigger-text>{{this.triggerDisplayText}}</span>\n    <Icon @icon={{ChevronDown}} @size=\"sm\" class=\"country-select-trigger-icon_e5533d0a6\" />\n  </popover.Trigger>\n\n  <popover.Content @side=\"bottom\" @align=\"start\" @sideOffset={{4}} @animation=\"scale\" class=\"country-select-popover-content_e5533d0a6\">\n    {{!-- Search input at top of dropdown --}}\n    <div class=\"country-select-search_e5533d0a6\">\n      <div class=\"country-select-search-wrapper_e5533d0a6\">\n        <span class=\"country-select-search-icon_e5533d0a6\" aria-hidden=\"true\">\n          <Icon @icon={{Search}} @size=\"sm\" />\n        </span>\n        <input type=\"text\" {{this.setupSearchInput}} {{on \"input\" this.handleSearchInput}} class=\"country-select-search-input_e5533d0a6\" value={{this.searchQuery}} placeholder=\"Search countries...\" autocomplete=\"off\" aria-label=\"Search countries\" aria-controls={{this.listboxId}} aria-activedescendant={{this.activeDescendantId}} data-test-country-select-search />\n      </div>\n    </div>\n\n    <div id={{this.listboxId}} role=\"listbox\" class=\"country-select-listbox_e5533d0a6\" tabindex=\"-1\" {{this.setupListbox}} data-test-country-select-listbox>\n      {{#unless this.hasResults}}\n        <div class=\"country-select-empty_e5533d0a6\" data-test-country-select-empty>\n          No countries found\n        </div>\n      {{/unless}}\n\n      {{#if this.hasSuggested}}\n        <div role=\"presentation\" class=\"country-select-group_e5533d0a6\" data-test-country-select-group=\"suggested\">\n          <div class=\"country-select-group-label_e5533d0a6\" role=\"presentation\" id=\"{{this.listboxId}}-suggested-label\">Suggested</div>\n        </div>\n        {{#each this.suggestedWithIndex as |item|}}\n          {{!-- template-lint-disable require-presentational-children --}}\n          <div id=\"{{this.listboxId}}-suggested-{{item.country.code}}\" role=\"option\" class=\"country-select-option_e5533d0a6\" aria-selected={{if (this.isSelected item.country.code) \"true\" \"false\"}} data-active={{if (eq this.activeIndex item.globalIndex) \"true\"}} data-selected={{if (this.isSelected item.country.code) \"true\"}} {{on \"click\" (this.handleOptionClick item.country.code)}} {{on \"mouseenter\" (this.handleOptionMouseEnter item.globalIndex)}} data-test-country-select-option data-test-country-code={{item.country.code}}>\n            {{#if this.showFlag}}\n              <img src={{getCountryFlagUrl item.country.code}} alt class=\"country-select-option-flag_e5533d0a6\" loading=\"lazy\" data-test-country-select-option-flag />\n            {{/if}}\n            <span class=\"country-select-option-name_e5533d0a6\">{{item.country.name}}</span>\n            {{#if @showDialCode}}\n              <span class=\"country-select-option-dial-code_e5533d0a6\">{{item.country.dialCode}}</span>\n            {{/if}}\n            <span class=\"country-select-option-check_e5533d0a6\" aria-hidden=\"true\"></span>\n          </div>\n        {{/each}}\n      {{/if}}\n\n      {{#if this.hasOther}}\n        {{#if this.hasSuggested}}\n          <div role=\"presentation\" class=\"country-select-group_e5533d0a6\" data-test-country-select-group=\"all\">\n            <div class=\"country-select-group-label_e5533d0a6\" role=\"presentation\" id=\"{{this.listboxId}}-all-label\">All Countries</div>\n          </div>\n        {{/if}}\n        {{#each this.otherWithIndex as |item|}}\n          {{!-- template-lint-disable require-presentational-children --}}\n          <div id=\"{{this.listboxId}}-other-{{item.country.code}}\" role=\"option\" class=\"country-select-option_e5533d0a6\" aria-selected={{if (this.isSelected item.country.code) \"true\" \"false\"}} data-active={{if (eq this.activeIndex item.globalIndex) \"true\"}} data-selected={{if (this.isSelected item.country.code) \"true\"}} {{on \"click\" (this.handleOptionClick item.country.code)}} {{on \"mouseenter\" (this.handleOptionMouseEnter item.globalIndex)}} data-test-country-select-option data-test-country-code={{item.country.code}}>\n            {{#if this.showFlag}}\n              <img src={{getCountryFlagUrl item.country.code}} alt class=\"country-select-option-flag_e5533d0a6\" loading=\"lazy\" data-test-country-select-option-flag />\n            {{/if}}\n            <span class=\"country-select-option-name_e5533d0a6\">{{item.country.name}}</span>\n            {{#if @showDialCode}}\n              <span class=\"country-select-option-dial-code_e5533d0a6\">{{item.country.dialCode}}</span>\n            {{/if}}\n            <span class=\"country-select-option-check_e5533d0a6\" aria-hidden=\"true\"></span>\n          </div>\n        {{/each}}\n      {{/if}}\n    </div>\n  </popover.Content>\n</Popover>", {
+      strictMode: true,
+      scope: () => ({
+        Popover,
+        on,
+        Icon,
+        ChevronDown,
+        Search,
+        eq,
+        getCountryFlagUrl
+      })
+    }), this);
+  }
+}
+
+export { CountrySelect as default };
+//# sourceMappingURL=country-select.js.map

package/dist/form/country-select.js.map

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

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

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import Control from './control.js';
+import DatePicker from './date-picker.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+class DatePickerField 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  <DatePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @defaultValue={{@defaultValue}} @placeholder={{@placeholder}} @format={{@format}} @minDate={{@minDate}} @maxDate={{@maxDate}} @disabledDates={{@disabledDates}} @disabledDaysOfWeek={{@disabledDaysOfWeek}} @weekStartsOn={{@weekStartsOn}} @showOutsideDays={{@showOutsideDays}} @showToday={{@showToday}} @allowTextInput={{@allowTextInput}} @closeOnSelect={{@closeOnSelect}} @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-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,
+        DatePicker
+      })
+    }), this);
+  }
+}
+
+export { DatePickerField as default };
+//# sourceMappingURL=date-picker-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-field.js","sources":["../../src/form/date-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport DatePicker, { type DateFormat } from './date-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface DatePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected date value */\n    value?: Date | null;\n\n    /** Default value (uncontrolled) */\n    defaultValue?: Date | null;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: 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    /** Allow typing in the input */\n    allowTextInput?: boolean;\n\n    /** Close dropdown when a date is selected */\n    closeOnSelect?: 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 for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: Date | 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 DatePickerField extends Component<DatePickerFieldSignature> {\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      <DatePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @defaultValue={{@defaultValue}}\n        @placeholder={{@placeholder}}\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        @allowTextInput={{@allowTextInput}}\n        @closeOnSelect={{@closeOnSelect}}\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-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":["DatePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","DatePicker"],"mappings":";;;;;;AA6Fe,MAAMA,wBAAwBC,SAAA,CAAU;EACrD,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,qrCAAA,EAmDA;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-picker.css

@@ -0,0 +1,177 @@
+/* src/form/date-picker.css */
+/* Date Picker Container */
+.date-picker_e103d84e0 {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Trigger Wrapper - Reset button styles from popover.Trigger */
+.date-picker-trigger-wrapper_e103d84e0 {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  text-align: inherit;
+  cursor: text;
+}
+
+.date-picker-trigger-wrapper_e103d84e0:disabled {
+  cursor: not-allowed;
+}
+
+/* Input Wrapper */
+.date-picker-input-wrapper_e103d84e0 {
+  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-picker-input-wrapper_e103d84e0:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Invalid state */
+.date-picker_e103d84e0[data-invalid="true"] .date-picker-input-wrapper_e103d84e0 {
+  border-color: var(--color-border-critical);
+}
+
+.date-picker_e103d84e0[data-invalid="true"] .date-picker-input-wrapper_e103d84e0:focus-within {
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* Disabled state */
+.date-picker_e103d84e0[data-disabled="true"] .date-picker-input-wrapper_e103d84e0 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+/* Read-only state */
+.date-picker_e103d84e0[data-readonly="true"] .date-picker-input-wrapper_e103d84e0 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-readonly);
+}
+
+/* Input Element */
+.date-picker-input_e103d84e0 {
+  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: left;
+}
+
+.date-picker-input_e103d84e0:focus {
+  outline: none;
+}
+
+.date-picker-input_e103d84e0::placeholder {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+}
+
+.date-picker-input_e103d84e0:disabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.date-picker-input_e103d84e0:read-only {
+  cursor: default;
+}
+
+/* Clear Button */
+.date-picker-clear_e103d84e0 {
+  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-picker-clear_e103d84e0:hover {
+  color: var(--color-icon-primary);
+  background-color: var(--color-bg-surface-hover);
+}
+
+.date-picker-clear_e103d84e0:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
+}
+
+/* Dropdown Trigger Icon */
+.date-picker-trigger_e103d84e0 {
+  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-picker-trigger_e103d84e0:hover {
+  background-color: var(--color-bg-surface-hover);
+  color: var(--color-icon-primary);
+}
+
+.date-picker-trigger_e103d84e0:active {
+  background-color: var(--color-bg-surface-pressed);
+}
+
+.date-picker_e103d84e0[data-disabled="true"] .date-picker-trigger_e103d84e0 {
+  color: var(--color-icon-disabled);
+  border-left-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+.date-picker_e103d84e0[data-disabled="true"] .date-picker-trigger_e103d84e0:hover {
+  background-color: transparent;
+}
+
+.date-picker_e103d84e0[data-invalid="true"] .date-picker-trigger_e103d84e0 {
+  border-left-color: var(--color-border-critical);
+}
+
+/* Popover Content - override default popover padding */
+.date-picker-popover-content_e103d84e0 {
+  padding: 0;
+}
+
+/* Remove Calendar's own border and shadow when inside DatePicker popover */
+.date-picker-popover-content_e103d84e0 .calendar_e103d84e0 {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}