agnosticui-core 2.0.0-alpha.2

package/dist/components/Input/core/_Input.js

@@ -0,0 +1,602 @@
+import { LitElement as f, css as v, html as d, nothing as o } from "lit";
+import { n as i } from "../../../property-CemaeiRl.js";
+import { r as b } from "../../../state-CovhUvdr.js";
+import { e as y } from "../../../query-BykXNUlT.js";
+import { o as l } from "../../../if-defined-C8i28hSj.js";
+import { hasSlotContent as u } from "../../../utils/slot.js";
+import { formControlStyles as m } from "../../../shared/form-control-styles.js";
+import { createFormControlIds as $, buildAriaDescribedBy as x, isHorizontalLabel as c } from "../../../shared/form-control-utils.js";
+var w = Object.defineProperty, a = (g, t, n, r) => {
+  for (var s = void 0, p = g.length - 1, _; p >= 0; p--)
+    (_ = g[p]) && (s = _(t, n, s) || s);
+  return s && w(t, n, s), s;
+};
+const h = class h extends f {
+  constructor() {
+    super(), this._ids = $("ag-input"), this._hasLeftAddon = !1, this._hasRightAddon = !1, this.label = "", this.labelHidden = !1, this.labelPosition = "top", this.noLabel = !1, this.ariaLabel = "", this.type = "text", this.value = "", this.placeholder = "", this.rows = 4, this.cols = 50, this.size = "default", this.capsule = !1, this.rounded = !1, this.underlined = !1, this.underlinedWithBackground = !1, this.inline = !1, this.required = !1, this.disabled = !1, this.readonly = !1, this.invalid = !1, this.errorMessage = "", this.helpText = "";
+  }
+  /**
+   * Expose the internal input element for external access
+   */
+  get controlElement() {
+    return this._inputElement;
+  }
+  /**
+   * Get the current value of the input
+   */
+  getValue() {
+    return this._inputElement?.value ?? "";
+  }
+  /**
+   * Set the value of the input
+   */
+  setValue(t) {
+    this._inputElement && (this._inputElement.value = t, this.value = t);
+  }
+  /**
+   * Focus the input element
+   */
+  focus() {
+    this._inputElement?.focus();
+  }
+  /**
+   * Blur the input element
+   */
+  blur() {
+    this._inputElement?.blur();
+  }
+  /**
+   * Select the text in the input
+   */
+  select() {
+    this._inputElement?.select();
+  }
+  /**
+   * Handle slot changes to detect addons
+   */
+  _handleSlotChange(t) {
+    const n = t.target, r = n.name;
+    r === "addon-left" ? this._hasLeftAddon = u(n) : r === "addon-right" && (this._hasRightAddon = u(n)), this.requestUpdate();
+  }
+  /**
+   * Handle input events
+   */
+  _handleInput(t) {
+    const n = t.target;
+    this.value = n.value, this.onInput && this.onInput(t);
+  }
+  /**
+   * Handle change events
+   */
+  _handleChange(t) {
+    const n = t.target;
+    this.value = n.value, this.onChange && this.onChange(t);
+  }
+  /**
+   * Handle focus events
+   */
+  _handleFocus(t) {
+    this.dispatchEvent(
+      new FocusEvent("focus", {
+        bubbles: !0,
+        composed: !0,
+        relatedTarget: t.relatedTarget
+      })
+    ), this.onFocus && this.onFocus(t);
+  }
+  /**
+   * Handle blur events
+   */
+  _handleBlur(t) {
+    this.dispatchEvent(
+      new FocusEvent("blur", {
+        bubbles: !0,
+        composed: !0,
+        relatedTarget: t.relatedTarget
+      })
+    ), this.onBlur && this.onBlur(t);
+  }
+  /**
+   * Handle click events
+   */
+  _handleClick(t) {
+    this.onClick && this.onClick(t);
+  }
+  /**
+   * Build ARIA describedby attribute
+   */
+  _getAriaDescribedBy() {
+    return x({
+      helperId: this._ids.helperId,
+      errorId: this._ids.errorId,
+      hasHelper: !!this.helpText,
+      hasError: this.invalid && !!this.errorMessage
+    });
+  }
+  /**
+   * Render the input or textarea element
+   */
+  _renderInputElement() {
+    const t = this.type === "textarea", n = this._getAriaDescribedBy(), r = [];
+    return n && r.push(n), t ? d`
+        <textarea
+          id="${this._ids.inputId}"
+          part="ag-textarea"
+          class="ag-input__textarea"
+          .value="${this.value}"
+          placeholder="${l(this.placeholder || void 0)}"
+          rows="${this.rows}"
+          cols="${this.cols}"
+          ?required="${this.required}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
+          aria-required="${this.required ? "true" : "false"}"
+          aria-invalid="${this.invalid ? "true" : "false"}"
+          aria-label="${l(this.ariaLabel || void 0)}"
+          aria-describedby="${r.length > 0 ? r.join(" ") : l(void 0)}"
+          @click=${this._handleClick}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+        ></textarea>
+      ` : d`
+      <input
+        type="${this.type}"
+        id="${this._ids.inputId}"
+        part="ag-input"
+        class="ag-input__input"
+        .value="${this.value}"
+        placeholder="${l(this.placeholder || void 0)}"
+        ?required="${this.required}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        aria-required="${this.required ? "true" : "false"}"
+        aria-invalid="${this.invalid ? "true" : "false"}"
+        aria-label="${l(this.ariaLabel || void 0)}"
+        aria-describedby="${r.length > 0 ? r.join(" ") : l(void 0)}"
+        @click=${this._handleClick}
+        @input=${this._handleInput}
+        @change=${this._handleChange}
+        @focus=${this._handleFocus}
+        @blur=${this._handleBlur}
+      />
+    `;
+  }
+  firstUpdated() {
+    setTimeout(() => {
+      const t = this.shadowRoot?.querySelector('slot[name="addon-left"]'), n = this.shadowRoot?.querySelector('slot[name="addon-right"]'), r = this._hasLeftAddon, s = this._hasRightAddon;
+      this._hasLeftAddon = u(t), this._hasRightAddon = u(n), (r !== this._hasLeftAddon || s !== this._hasRightAddon) && this.requestUpdate();
+    }, 0);
+  }
+  /**
+   * Render custom label for Input (using shared utility but customized for Input)
+   */
+  _renderLabel() {
+    if (!this.label || this.noLabel) return o;
+    const t = [];
+    return c(this.labelPosition) ? (t.push("ag-form-control__label--horizontal"), t.push(`ag-form-control__label--${this.labelPosition}`), t.push("ag-input__label--horizontal"), t.push(`ag-input__label--${this.labelPosition}`)) : this.labelPosition === "bottom" && (t.push(`ag-form-control__label--${this.labelPosition}`), t.push(`ag-input__label--${this.labelPosition}`)), d`
+      <label
+        id="${this._ids.labelId}"
+        for="${this._ids.inputId}"
+        class="ag-form-control__label ag-input__label ${this.labelHidden ? "ag-form-control__label--hidden ag-input__label--hidden" : ""} ${t.join(" ")}"
+        part="ag-input-label"
+      >
+        ${this.label}
+        ${this.required ? d`
+              <span class="ag-form-control__required ag-input__required" part="ag-input-required" aria-hidden="true">*</span>
+            ` : o}
+      </label>
+    `;
+  }
+  /**
+   * Render custom helper text for Input
+   */
+  _renderHelper() {
+    return this.helpText ? d`
+      <div
+        id="${this._ids.helperId}"
+        class="ag-form-control__helper ag-input__help"
+        part="ag-input-help"
+      >
+        ${this.helpText}
+      </div>
+    ` : o;
+  }
+  /**
+   * Render custom error message for Input
+   */
+  _renderError() {
+    return d`
+      <div
+        id="${this._ids.errorId}"
+        class="ag-form-control__error ag-input__error"
+        part="ag-input-error"
+        ?hidden="${!this.invalid || !this.errorMessage}"
+      >
+        ${this.errorMessage || ""}
+      </div>
+    `;
+  }
+  render() {
+    const t = this._hasLeftAddon || this._hasRightAddon, n = c(this.labelPosition), r = ["ag-input"];
+    this.size === "small" && r.push("ag-input--small"), this.size === "large" && r.push("ag-input--large"), this.rounded && r.push("ag-input--rounded"), this.underlined && r.push("ag-input--underlined"), this.underlinedWithBackground && r.push("ag-input--underlined-with-background");
+    const s = t ? d`
+          <div class="ag-input__field" part="ag-input-field-wrapper">
+            ${this._hasLeftAddon ? d`
+                  <div class="ag-input__addon ag-input__addon--left" part="ag-input-addon-left">
+                    <slot name="addon-left" @slotchange=${this._handleSlotChange}></slot>
+                  </div>
+                ` : d`
+                  <slot name="addon-left" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
+                `}
+
+            ${this._renderInputElement()}
+
+            ${this._hasRightAddon ? d`
+                  <div class="ag-input__addon ag-input__addon--right" part="ag-input-addon-right">
+                    <slot name="addon-right" @slotchange=${this._handleSlotChange}></slot>
+                  </div>
+                ` : d`
+                  <slot name="addon-right" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
+                `}
+          </div>
+        ` : d`
+          ${this._renderInputElement()}
+          <slot name="addon-left" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
+          <slot name="addon-right" @slotchange=${this._handleSlotChange} style="display: none;"></slot>
+        `;
+    return n ? d`
+        <div class="${r.join(" ")}" part="ag-input-wrapper">
+          <div class="ag-form-control--horizontal">
+            ${this._renderLabel()}
+            ${s}
+          </div>
+          ${this.helpText ? this._renderHelper() : o}
+          ${this._renderError()}
+        </div>
+      ` : this.labelPosition === "bottom" ? d`
+        <div class="${r.join(" ")}" part="ag-input-wrapper">
+          ${s}
+          ${this.helpText ? this._renderHelper() : o}
+          ${this._renderError()}
+          ${this._renderLabel()}
+        </div>
+      ` : d`
+      <div class="${r.join(" ")}" part="ag-input-wrapper">
+        ${this._renderLabel()}
+        ${this.helpText ? this._renderHelper() : o}
+        ${this._renderError()}
+        ${s}
+      </div>
+    `;
+  }
+};
+h.styles = [
+  m,
+  v`
+      :host {
+        display: block;
+      }
+
+      :host([inline]) {
+        display: inline-block;
+      }
+
+      /* Wrapper with size classes */
+      .ag-input {
+        display: block;
+      }
+
+      .ag-input--small {
+        /* Size-specific wrapper styling if needed */
+      }
+
+      .ag-input--large {
+        /* Size-specific wrapper styling if needed */
+      }
+
+      .ag-input--rounded {
+        /* Rounded variant wrapper styling if needed */
+      }
+
+      .ag-input--underlined {
+        /* Underlined variant wrapper styling if needed */
+      }
+
+      .ag-input--underlined-with-background {
+        /* Underlined with background wrapper styling if needed */
+      }
+
+      /* Input & Textarea Base Styles */
+      .ag-input__input,
+      .ag-input__textarea {
+        box-sizing: border-box;
+        width: 100%;
+        padding: var(--ag-space-2) var(--ag-space-3);
+        font-size: var(--ag-font-size-base);
+        line-height: var(--ag-line-height-base);
+        color: var(--ag-text-primary);
+        background-color: var(--ag-background-primary);
+        border: 1px solid var(--ag-border-subtle);
+        border-radius: 0;
+        transition: all var(--ag-motion-medium);
+      }
+
+      .ag-input__input::placeholder,
+      .ag-input__textarea::placeholder {
+        color: var(--ag-text-muted);
+        opacity: 1;
+      }
+
+      .ag-input__input:focus-visible,
+      .ag-input__textarea:focus-visible {
+        outline: var(--ag-focus-width) solid rgba(var(--ag-focus), 0.5);
+        outline-offset: var(--ag-focus-offset);
+        border-color: rgba(var(--ag-focus), 0.6);
+      }
+
+      .ag-input__textarea {
+        resize: vertical;
+        font-family: inherit; /* Ensure textarea uses same font as input */
+      }
+
+      /* Sizes */
+      :host([size="small"]) .ag-input__input,
+      :host([size="small"]) .ag-input__textarea {
+        padding: var(--ag-space-1) var(--ag-space-2);
+        font-size: var(--ag-font-size-sm);
+      }
+
+      :host([size="large"]) .ag-input__input,
+      :host([size="large"]) .ag-input__textarea {
+        padding: var(--ag-space-3) var(--ag-space-4);
+        font-size: var(--ag-font-size-lg);
+      }
+
+      /* Variants */
+      :host([capsule]) .ag-input__input,
+      :host([capsule]) .ag-input__textarea {
+        border-radius: var(--ag-radius-full);
+      }
+
+      :host([rounded]) .ag-input__input,
+      :host([rounded]) .ag-input__textarea {
+        border-radius: var(--ag-radius-md);
+      }
+
+      :host([underlined]) .ag-input__input,
+      :host([underlined]) .ag-input__textarea {
+        border-radius: 0;
+        border-width: 0 0 1px 0;
+      }
+
+      :host([underlined-with-background]) .ag-input__input,
+      :host([underlined-with-background]) .ag-input__textarea {
+        border-radius: 0;
+        border-width: 0 0 1px 0;
+        background-color: var(--ag-background-secondary);
+      }
+
+      /* States */
+      :host([disabled]) .ag-input__input,
+      :host([disabled]) .ag-input__textarea {
+        background-color: var(--ag-background-disabled);
+        color: var(--ag-text-muted);
+        cursor: not-allowed;
+      }
+
+      :host([invalid]) .ag-input__input,
+      :host([invalid]) .ag-input__textarea {
+        border-color: var(--ag-error-text);
+      }
+
+      :host([invalid]) .ag-input__input:focus-visible,
+      :host([invalid]) .ag-input__textarea:focus-visible {
+        border-color: rgba(var(--ag-danger-rgb), 0.6);
+        outline-color: rgba(var(--ag-danger-rgb), 0.5);
+      }
+
+      /* Addons */
+      .ag-input__field {
+        display: flex;
+        align-items: stretch;
+      }
+
+      .ag-input__addon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--ag-space-2) var(--ag-space-3);
+        font-size: var(--ag-font-size-base);
+        line-height: var(--ag-line-height-base);
+        color: var(--ag-text-primary);
+        border: 1px solid var(--ag-border-subtle);
+      }
+
+      .ag-input__addon--left {
+        border-inline-end: 0;
+        border-radius: var(--ag-radius-md) 0 0 var(--ag-radius-md);
+      }
+
+      .ag-input__addon--right {
+        border-inline-start: 0;
+        border-radius: 0 var(--ag-radius-md) var(--ag-radius-md) 0;
+      }
+
+      /* When left addon is present */
+      .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
+      .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+
+      /* When right addon is present */
+      .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
+      .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      .ag-input__field .ag-input__input,
+      .ag-input__field .ag-input__textarea {
+        flex: 1;
+      }
+
+      /* Capsule variant with addons */
+      :host([capsule]) .ag-input__addon--left {
+        border-radius: var(--ag-radius-full) 0 0 var(--ag-radius-full);
+        padding: var(--ag-space-2) var(--ag-space-4);
+      }
+
+      :host([capsule]) .ag-input__addon--right {
+        border-radius: 0 var(--ag-radius-full) var(--ag-radius-full) 0;
+        padding: var(--ag-space-2) var(--ag-space-4);
+      }
+
+      /* Remove border on INPUT where it meets the addon for capsule */
+      :host([capsule]) .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
+      :host([capsule]) .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea {
+        border-inline-start: 0;
+      }
+
+      :host([capsule]) .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
+      :host([capsule]) .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea {
+        border-inline-end: 0;
+      }
+
+      /* Underlined variant with addons */
+      :host([underlined]) .ag-input__addon,
+      :host([underlined-with-background]) .ag-input__addon {
+        border-top: 0;
+        border-radius: 0;
+        background: transparent;
+      }
+
+      :host([underlined]) .ag-input__addon--left,
+      :host([underlined-with-background]) .ag-input__addon--left {
+        border-inline-start: 0;
+        border-inline-end: 0;
+      }
+
+      :host([underlined]) .ag-input__addon--right,
+      :host([underlined-with-background]) .ag-input__addon--right {
+        border-inline-end: 0;
+        border-inline-start: 0;
+      }
+
+      /* Remove border on INPUT where it meets the addon for underlined */
+      :host([underlined]) .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
+      :host([underlined]) .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea,
+      :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--left) .ag-input__input,
+      :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--left) .ag-input__textarea {
+        border-inline-start: 0;
+      }
+
+      :host([underlined]) .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
+      :host([underlined]) .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea,
+      :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--right) .ag-input__input,
+      :host([underlined-with-background]) .ag-input__field:has(.ag-input__addon--right) .ag-input__textarea {
+        border-inline-end: 0;
+      }
+
+      /* Underlined with background variant - add background to addon */
+      :host([underlined-with-background]) .ag-input__addon {
+        background-color: var(--ag-background-secondary);
+      }
+    `
+];
+let e = h;
+a([
+  y("input, textarea")
+], e.prototype, "_inputElement");
+a([
+  i({ type: String })
+], e.prototype, "label");
+a([
+  i({ type: Boolean, attribute: "label-hidden" })
+], e.prototype, "labelHidden");
+a([
+  i({ type: String, attribute: "label-position" })
+], e.prototype, "labelPosition");
+a([
+  i({ type: Boolean, attribute: "no-label" })
+], e.prototype, "noLabel");
+a([
+  i({ type: String, attribute: "aria-label" })
+], e.prototype, "ariaLabel");
+a([
+  i({ type: String })
+], e.prototype, "type");
+a([
+  i({ type: String, reflect: !0 })
+], e.prototype, "value");
+a([
+  i({ type: String })
+], e.prototype, "placeholder");
+a([
+  i({ type: Number })
+], e.prototype, "rows");
+a([
+  i({ type: Number })
+], e.prototype, "cols");
+a([
+  i({ type: String, reflect: !0 })
+], e.prototype, "size");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "capsule");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "rounded");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "underlined");
+a([
+  i({ type: Boolean, reflect: !0, attribute: "underlined-with-background" })
+], e.prototype, "underlinedWithBackground");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "inline");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "required");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "readonly");
+a([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "invalid");
+a([
+  i({ type: String, attribute: "error-message" })
+], e.prototype, "errorMessage");
+a([
+  i({ type: String, attribute: "help-text" })
+], e.prototype, "helpText");
+a([
+  i({ attribute: !1 })
+], e.prototype, "onClick");
+a([
+  i({ attribute: !1 })
+], e.prototype, "onInput");
+a([
+  i({ attribute: !1 })
+], e.prototype, "onChange");
+a([
+  i({ attribute: !1 })
+], e.prototype, "onFocus");
+a([
+  i({ attribute: !1 })
+], e.prototype, "onBlur");
+a([
+  b()
+], e.prototype, "_hasLeftAddon");
+a([
+  b()
+], e.prototype, "_hasRightAddon");
+export {
+  e as AgInput
+};

package/dist/components/Input/react/ReactInput.d.ts

@@ -0,0 +1,21 @@
+import { AgInput, InputProps } from '../core/Input';
+import * as React from 'react';
+/**
+ * React-specific props for Input
+ *
+ * Following AgnosticUI v2 event conventions:
+ * - All events are native (click, input, change, focus, blur)
+ * - Native events work automatically in React, no event mapping needed
+ */
+export interface ReactInputProps extends InputProps {
+    children?: React.ReactNode;
+    className?: string;
+    id?: string;
+    onClick?: (event: MouseEvent) => void;
+    onInput?: (event: InputEvent) => void;
+    onChange?: (event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+}
+export declare const ReactInput: import('@lit/react').ReactWebComponent<AgInput, {}>;
+//# sourceMappingURL=ReactInput.d.ts.map

package/dist/components/Input/react/ReactInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/react/ReactInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;GAMG;AACH,MAAM,WAAW,eAAgB,SAAQ,UAAU;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAKD,eAAO,MAAM,UAAU,qDAOrB,CAAC"}

package/dist/components/Input/react/ReactInput.js

@@ -0,0 +1,15 @@
+import * as t from "react";
+import { o as e } from "../../../create-component-BPMDMe-q.js";
+import "../core/Input.js";
+import { AgInput as o } from "../core/_Input.js";
+const p = e({
+  tagName: "ag-input",
+  elementClass: o,
+  react: t,
+  events: {
+    // Native events don't need to be mapped - they work automatically
+  }
+});
+export {
+  p as ReactInput
+};

package/dist/components/Input/react/ReactInput.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReactInput.spec.d.ts.map

package/dist/components/Input/react/ReactInput.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactInput.spec.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/react/ReactInput.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Input/react/ReactInput.spec.js

@@ -0,0 +1,36 @@
+import { j as o } from "../../../jsx-runtime-BzflLqGi.js";
+import { v as i, d as t, b as u, a as c, i as r, r as s, w as n, g as a } from "../../../react.esm-D32Kml16.js";
+import "react";
+import { ReactInput as l } from "./ReactInput.js";
+const p = i.spyOn(console, "log").mockImplementation(() => {
+});
+t("ReactInput Wrapper", () => {
+  u(() => {
+    p.mockClear();
+  }), c(() => {
+    document.body.innerHTML = "";
+  }), t("Basic Rendering", () => {
+    r("should render without errors", async () => {
+      s(/* @__PURE__ */ o.jsx(l, { label: "Test Input" })), await n(() => {
+        const e = document.querySelector("ag-input");
+        a(e).toBeInTheDocument();
+      });
+    });
+  }), t("Props Pass-Through", () => {
+    r("should pass ARIA attributes to web component", async () => {
+      s(
+        /* @__PURE__ */ o.jsx(
+          l,
+          {
+            label: "Input",
+            "aria-label": "Custom input label",
+            "labelled-by": "custom-label-id"
+          }
+        )
+      ), await n(() => {
+        const e = document.querySelector("ag-input");
+        a(e.getAttribute("aria-label")).toBe("Custom input label"), a(e.getAttribute("labelled-by")).toBe("custom-label-id");
+      });
+    });
+  });
+});

package/dist/components/Input/react/index.d.ts

@@ -0,0 +1,3 @@
+export { ReactInput } from './ReactInput';
+export type { ReactInputProps } from './ReactInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Input/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}