aeico-components 0.1.1

package/src/tabs/tab.ts

@@ -0,0 +1,62 @@
+import type { Props } from 'aeico';
+import tabStyle from '../styles/components/tab.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+
+class Tab extends AeicoComponent {
+  static props: Props = {
+    active: { type: Boolean },
+    disabled: { type: Boolean },
+    panel: { type: String },
+  };
+
+  declare active?: boolean;
+  declare disabled?: boolean;
+  declare panel?: string;
+
+  protected static styles = [tabStyle];
+
+  connectedCallback() {
+    this.setAttribute('slot', 'tab');
+    super.connectedCallback();
+    this.listen('click', this._handleClick);
+  }
+
+  private _handleClick = () => {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent('_tab-click', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  protected render() {
+    return html(({ button, slot }) => {
+      button(
+        {
+          part: 'tab',
+          type: 'button',
+          role: 'tab',
+          'aria-selected': this.active,
+          'aria-disabled': this.disabled,
+          disabled: this.disabled,
+        },
+        () => {
+          slot();
+        },
+      );
+    });
+  }
+}
+
+Tab.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-tab': Tab;
+  }
+}
+
+export default Tab;

package/src/tabs/tabs.ts

@@ -0,0 +1,134 @@
+import type { Props } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import tabsStyle from '../styles/components/tabs.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import type Tab from './tab';
+
+class Tabs extends AeicoComponent {
+  static props: Props = {
+    activeIndex: { type: Number },
+  };
+
+  declare activeIndex?: number;
+
+  protected static styles = [styleVariables, tabsStyle];
+
+  private _observer: MutationObserver | null = null;
+
+  private get _tabs(): Tab[] {
+    return [...this.children].filter(
+      (el) => el.tagName.toLowerCase() === 'ae-tab',
+    ) as unknown as Tab[];
+  }
+
+  private get _panels(): HTMLElement[] {
+    return [...this.children].filter(
+      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',
+    ) as HTMLElement[];
+  }
+
+  private _getPairs(): [Tab, HTMLElement | null][] {
+    const tabs = this._tabs;
+    const panels = this._panels;
+
+    const idMap = new Map<string, HTMLElement>();
+    for (const panel of panels) {
+      const id = panel.id;
+      if (id) idMap.set(id, panel);
+    }
+
+    const usedPanels = new Set<HTMLElement>();
+    const pairs: [Tab, HTMLElement | null][] = [];
+
+    // First pass: ID-matched tabs
+    for (const tab of tabs) {
+      const panelId = tab.panel;
+      if (panelId) {
+        const panel = idMap.get(panelId) ?? null;
+        if (panel) usedPanels.add(panel);
+        pairs.push([tab, panel]);
+      }
+    }
+
+    // Second pass: position-matched tabs (no panel attr)
+    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));
+    let posIndex = 0;
+    for (const tab of tabs) {
+      if (!tab.panel) {
+        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);
+        posIndex++;
+      }
+    }
+
+    return pairs;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen('_tab-click', this._handleTabClick);
+    this._observer = new MutationObserver(() => this.update());
+    this._observer.observe(this, { childList: true });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._observer?.disconnect();
+    this._observer = null;
+  }
+
+  protected onUpdated() {
+    this._syncActive();
+  }
+
+  private _handleTabClick = (e: Event) => {
+    const pairs = this._getPairs();
+    const target = e.target as Element;
+    const index = pairs.findIndex(([tab]) => tab === target);
+    if (index !== -1) this.selectTab(index);
+  };
+
+  private _syncActive() {
+    const activeIndex = this.activeIndex ?? 0;
+    const pairs = this._getPairs();
+
+    pairs.forEach(([tab, panel], i) => {
+      const isActive = i === activeIndex;
+      if (isActive) {
+        tab.setAttribute('active', '');
+        panel?.setAttribute('active', '');
+      } else {
+        tab.removeAttribute('active');
+        panel?.removeAttribute('active');
+      }
+    });
+  }
+
+  selectTab(index: number): void {
+    const pairs = this._getPairs();
+    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;
+    this.activeIndex = index;
+    this.emit('change', { detail: { index } });
+  }
+
+  protected render() {
+    return html(({ nav, div, slot }) => {
+      nav({ part: 'tab-nav', role: 'tablist' }, () => {
+        slot({ name: 'tab' });
+      });
+      div({ part: 'panels' }, () => {
+        slot();
+      });
+    });
+  }
+}
+
+Tabs.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-tabs': Tabs;
+  }
+}
+
+export default Tabs;

package/src/tag/defines.ts

@@ -0,0 +1,12 @@
+export type TagColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';
+export type TagVariant = 'filled' | 'outlined' | 'faint' | 'subtle' | 'text';
+export type TagSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg';

package/src/tag/index.ts

@@ -0,0 +1,3 @@
+export { default } from './tag';
+export type { TagProps } from './tag';
+export type { TagColor, TagVariant, TagSize } from './defines';

package/src/tag/tag.ts

@@ -0,0 +1,85 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import tagStyle from '../styles/components/tag.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import type { TagColor, TagSize, TagVariant } from './defines';
+import { prop } from 'aeico';
+
+/**
+ * Tag Component
+ *
+ * An inline label component with optional dismiss button.
+ * Supports the same color, variant, and size options as Button.
+ *
+ * @example
+ * ```html
+ * <ae-tag color="primary" variant="faint">Label</ae-tag>
+ * <ae-tag color="success" variant="outlined" dismissible>Removable</ae-tag>
+ * <ae-tag color="danger" size="sm">
+ *   <ae-icon slot="start" name="warning"></ae-icon>
+ *   Error
+ * </ae-tag>
+ * ```
+ */
+class Tag extends AeicoComponent {
+  protected static styles = [styleVariables, sizeCSS, colorCSS, tagStyle];
+
+  @prop({ type: String })
+  accessor color: TagColor | undefined;
+
+  @prop({ type: String })
+  accessor variant: TagVariant | undefined;
+
+  @prop({ type: String })
+  accessor size: TagSize | undefined;
+
+  @prop({ type: Boolean })
+  accessor dismissible: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @prop({ type: Boolean })
+  accessor pill: boolean = false;
+
+  protected render() {
+    return html(({ span, button, slot }) => {
+      span({ part: 'tag', className: 'tag' }, () => {
+        slot({ name: 'start' });
+        span({ className: 'tag-content' }, () => {
+          slot();
+        });
+        slot({ name: 'end' });
+        button(
+          {
+            type: 'button',
+            className: 'tag-dismiss',
+            'aria-label': 'dismiss',
+            '@click': (e: Event) => {
+              e.stopPropagation();
+              if (this.disabled) return;
+              this.emit('dismiss');
+            },
+          },
+          () => {
+            span({ textContent: '\u00d7' });
+          },
+        );
+      });
+    });
+  }
+}
+
+Tag.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-tag': Tag;
+  }
+}
+
+export default Tag;
+export type TagProps = InferProps<typeof Tag>;

package/src/text-input/index.ts

@@ -0,0 +1,2 @@
+export { default, default as TextInput } from './text-input';
+export type { TextInputProps } from './text-input';

package/src/text-input/text-input.ts

@@ -0,0 +1,75 @@
+import AeicoField from '../aeico-field';
+import type { InferProps, Props } from 'aeico';
+import { html } from 'aeico';
+import variables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import style from '../styles/components/text-input.css?inline';
+
+class TextInput extends AeicoField {
+  protected fieldElement: HTMLInputElement | null = null;
+
+  static tagName = 'text-input';
+
+  static props: Props = {
+    placeholder: { type: String },
+    type: { type: String },
+  };
+
+  declare placeholder?: string;
+  declare type?: string;
+
+  protected static styles = [variables, sizeCSS, style];
+
+  render() {
+    return html(({ div, input }) => {
+      div({ className: 'input-container' }, () => {
+        this.fieldElement = input({
+          type: this.type || 'text',
+          placeholder: this.placeholder || '',
+          '@input': this.boundOnChange,
+        });
+
+        this.renderActionButtons();
+      });
+
+      if (this.fieldElement && this.value != null) {
+        this.fieldElement.value = String(this.value);
+      }
+      this.updateClearButtonVisibility();
+    });
+  }
+
+  /**
+   * Update clear button visibility based on input value
+   */
+  private updateClearButtonVisibility() {
+    if (this.clearBtn && this.fieldElement) {
+      const hasValue = this.fieldElement.value.length > 0;
+      this.clearBtn.style.display = hasValue ? '' : 'none';
+    }
+  }
+
+  /**
+   * Write value to the input element (DOM only)
+   */
+  protected writeValue(value: string): void {
+    const strValue = String(value || '');
+
+    if (this.fieldElement) {
+      this.fieldElement.value = strValue;
+    }
+
+    this.updateClearButtonVisibility();
+  }
+}
+
+TextInput.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-text-input': TextInput;
+  }
+}
+
+export default TextInput;
+export type TextInputProps = InferProps<typeof TextInput>;

package/src/utils.ts

@@ -0,0 +1,6 @@
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+
+export function toKebab(str: string): string {
+  const cleaned = str.replace(/^[_\d]+/, '');
+  return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}