@visitwonders/assembly 0.1.0

package/dist/form/search-input.js

@@ -0,0 +1,87 @@
+import "./search-input.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { Search } from 'lucide';
+import Icon from '../media/icon.js';
+import { on } from '@ember/modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+class SearchInput extends Component {
+  static {
+    g(this.prototype, "isFocused", [tracked], function () {
+      return false;
+    });
+  }
+  #isFocused = (i(this, "isFocused"), void 0);
+  static {
+    g(this.prototype, "value", [tracked], function () {
+      return this.args.value || '';
+    });
+  }
+  #value = (i(this, "value"), void 0);
+  get inputId() {
+    return guidFor(this);
+  }
+  get size() {
+    return this.args.size || 'medium';
+  }
+  get hasError() {
+    return !!this.args.error;
+  }
+  handleInput(event) {
+    const target = event.target;
+    this.value = target.value;
+    this.args.onInput?.(target.value, event);
+  }
+  static {
+    n(this.prototype, "handleInput", [action]);
+  }
+  handleChange(event) {
+    const target = event.target;
+    this.args.onChange?.(target.value, event);
+  }
+  static {
+    n(this.prototype, "handleChange", [action]);
+  }
+  handleFocus(event) {
+    this.isFocused = true;
+    this.args.onFocus?.(event);
+  }
+  static {
+    n(this.prototype, "handleFocus", [action]);
+  }
+  handleBlur(event) {
+    this.isFocused = false;
+    this.args.onBlur?.(event);
+  }
+  static {
+    n(this.prototype, "handleBlur", [action]);
+  }
+  handleKeyUp(event) {
+    if (event.key === 'Enter') {
+      this.args.onSearch?.(this.value);
+    }
+  }
+  static {
+    n(this.prototype, "handleKeyUp", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"field_e35e7cf3c\" ...attributes>\n  {{#if @label}}\n    <label for={{this.inputId}} class=\"label_e35e7cf3c\">\n      {{@label}}\n      {{#if @required}}\n        <span class=\"required_e35e7cf3c\">*</span>\n      {{/if}}\n    </label>\n  {{/if}}\n\n  <div class=\"input-wrapper_e35e7cf3c\">\n    <span class=\"search-icon_e35e7cf3c\">\n      <Icon @icon={{Search}} @size={{16}} />\n    </span>\n    <input id={{this.inputId}} type=\"search\" name={{@name}} value={{this.value}} placeholder={{@placeholder}} disabled={{@disabled}} readonly={{@readonly}} required={{@required}} autocomplete={{@autocomplete}} class=\"input_e35e7cf3c\" data-size={{this.size}} data-error={{if this.hasError \"true\"}} {{on \"input\" this.handleInput}} {{on \"change\" this.handleChange}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} {{on \"keyup\" this.handleKeyUp}} />\n  </div>\n\n  {{#if @helperText}}\n    <p class=\"helper-text_e35e7cf3c\">{{@helperText}}</p>\n  {{/if}}\n\n  {{#if @error}}\n    <p class=\"error-text_e35e7cf3c\">{{@error}}</p>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        Icon,
+        Search,
+        on
+      })
+    }), this);
+  }
+}
+
+export { SearchInput as default };
+//# sourceMappingURL=search-input.js.map

package/dist/form/search-input.js.map

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

package/dist/form/select-field.js

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import Control from './control.js';
+import Select from './select.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+class SelectField 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}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <Select @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-select-field as |select|>\n    {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n  </Select>\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,
+        Select,
+        hash
+      })
+    }), this);
+  }
+}
+
+export { SelectField as default };
+//# sourceMappingURL=select-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.js","sources":["../../src/form/select-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\nimport type { WithBoundArgs } from '@glint/template';\n\nimport Control from './control.gts';\nimport Select, { SelectOption, SelectOptionGroup } from './select.gts';\n\nimport './select.css';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface SelectFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected value */\n    value?: string;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Help text displayed below the select */\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    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: string) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Option: WithBoundArgs<typeof SelectOption, 'ctx'>;\n        OptionGroup: typeof SelectOptionGroup;\n      },\n    ];\n  };\n}\n\nexport default class SelectField extends Component<SelectFieldSignature> {\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      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\n\n      <Select\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-select-field\n        as |select|\n      >\n        {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n      </Select>\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":["SelectField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","Select","hash"],"mappings":";;;;;;;AA4De,MAAMA,oBAAoBC,SAAA,CAAU;EACjD,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,+yBAAA,EAsCA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;QAAAC,MAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/select.css

@@ -0,0 +1,201 @@
+/* src/form/select.css */
+/* ===================================
+ * Select Component
+ * Custom dropdown using Popover
+ * =================================== */
+
+.select_ebb583c5d {
+  display: inline-flex;
+  width: 100%;
+}
+
+/* ===================================
+ * Trigger Button
+ * =================================== */
+
+.select_ebb583c5d .select-trigger_ebb583c5d {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--input-height-md);
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  padding: 0 var(--input-padding-horizontal-md);
+  font-family: inherit;
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  cursor: pointer;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+  text-align: left;
+}
+
+.select-trigger_ebb583c5d:hover:not(:disabled) {
+  border-color: var(--color-border-control-hover);
+}
+
+.select-trigger_ebb583c5d:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+.select-trigger_ebb583c5d:disabled {
+  background-color: var(--color-bg-disabled);
+  color: var(--color-text-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+.select-trigger-text_ebb583c5d {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select-trigger-text_ebb583c5d[data-placeholder="true"] {
+  color: var(--color-text-tertiary);
+}
+
+.select-trigger-icon_ebb583c5d {
+  flex-shrink: 0;
+  margin-left: var(--spacing-2);
+  color: var(--color-text-tertiary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--transition-fast);
+}
+
+/* Rotate icon when open */
+.select_ebb583c5d[data-open="true"] .select-trigger-icon_ebb583c5d {
+  transform: rotate(180deg);
+}
+
+/* ===================================
+ * Invalid State
+ * =================================== */
+
+.select_ebb583c5d[data-invalid="true"] .select-trigger_ebb583c5d {
+  border-color: var(--color-border-critical);
+}
+
+.select_ebb583c5d[data-invalid="true"] .select-trigger_ebb583c5d:focus {
+  border-color: var(--color-border-critical);
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* ===================================
+ * Disabled State
+ * =================================== */
+
+.select_ebb583c5d[data-disabled="true"] .select-trigger-icon_ebb583c5d {
+  color: var(--color-text-disabled);
+}
+
+/* ===================================
+ * Popover Content
+ * =================================== */
+
+.select-popover-content_ebb583c5d {
+  min-width: 180px;
+  max-height: 300px;
+  padding: var(--spacing-1);
+  overflow: hidden;
+}
+
+.select-listbox_ebb583c5d {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+/* ===================================
+ * Options
+ * =================================== */
+
+.select-option_ebb583c5d {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-13);
+  line-height: var(--line-height-1-25);
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--transition-fast);
+}
+
+.select-option_ebb583c5d:hover:not([data-disabled="true"]) {
+  background-color: var(--color-bg-neutral-subtle);
+}
+
+.select-option_ebb583c5d[data-active="true"]:not([data-disabled="true"]) {
+  background-color: var(--color-bg-neutral-subtle);
+}
+
+.select-option_ebb583c5d[data-selected="true"] {
+  color: var(--color-text-accent);
+  font-weight: var(--font-weight-medium);
+}
+
+.select-option_ebb583c5d[data-disabled="true"] {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.select-option-content_ebb583c5d {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Checkmark indicator using CSS */
+.select-option-check_ebb583c5d {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+
+.select-option-check_ebb583c5d::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 5px;
+  height: 10px;
+  border: solid currentColor;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* ===================================
+ * Option Groups
+ * =================================== */
+
+.select-option-group_ebb583c5d {
+  padding: var(--spacing-1) 0;
+}
+
+.select-option-group_ebb583c5d:not(:first-child) {
+  border-top: 1px solid var(--color-border-subtle);
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-2);
+}
+
+.select-option-group-label_ebb583c5d {
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-2);
+  font-size: var(--font-size-11);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}