@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Input/src/Input.js

@@ -0,0 +1,648 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+// components/Input/src/Input.ts
+import { html as html2, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/surface/surface.props.ts
+var surfaceValues = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
+
+// components/Input/src/Input.css
+import { css as css2 } from "lit";
+var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    --spacing: 0.25rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --font-weight-medium: 500;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --color-error: inherit;
+    --color-input-bg: inherit;
+    --color-input-border: inherit;
+    --color-input-error-text: inherit;
+    --color-input-focus: inherit;
+    --color-input-placeholder: inherit;
+    --color-input-text: inherit;
+    --color-text-primary: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .mb-1\\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .max-h-0 {
+    max-height: calc(var(--spacing) * 0);
+  }
+  .max-h-12 {
+    max-height: calc(var(--spacing) * 12);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-0 {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-error {
+    border-color: var(--color-error);
+  }
+  .border-input-border {
+    border-color: var(--color-input-border);
+  }
+  .bg-input-bg {
+    background-color: var(--color-input-bg);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-1\\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .pt-1\\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
+  .text-left {
+    text-align: left;
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .text-input-error-text {
+    color: var(--color-input-error-text);
+  }
+  .text-input-text {
+    color: var(--color-input-text);
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .placeholder-input-placeholder {
+    &::placeholder {
+      color: var(--color-input-placeholder);
+    }
+  }
+  .opacity-50 {
+    opacity: 50%;
+  }
+  .transition-\\[max-height\\] {
+    transition-property: max-height;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .duration-\\[250ms\\] {
+    --tw-duration: 250ms;
+    transition-duration: 250ms;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .focus\\:border-error {
+    &:focus {
+      border-color: var(--color-error);
+    }
+  }
+  .focus\\:border-input-focus {
+    &:focus {
+      border-color: var(--color-input-focus);
+    }
+  }
+  .focus\\:ring-2 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus\\:ring-error {
+    &:focus {
+      --tw-ring-color: var(--color-error);
+    }
+  }
+  .focus\\:ring-input-focus {
+    &:focus {
+      --tw-ring-color: var(--color-input-focus);
+    }
+  }
+  .focus\\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Input_default = styles2;
+
+// components/Input/src/Input.props.ts
+var inputTypeValues = {
+  TEXT: "text",
+  EMAIL: "email"
+};
+var inputTypeProps = enumCreator(Object.values(inputTypeValues), "type", String, { reflect: true });
+var inputSizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var inputSizeProps = enumCreator(Object.values(inputSizeValues), "size", String, { reflect: true });
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// components/Input/src/Input.styles.ts
+var baseClasses = [
+  "w-full",
+  "bg-input-bg",
+  "border",
+  "border-input-border",
+  "text-input-text",
+  "placeholder-input-placeholder",
+  "rounded-full",
+  "font-sans",
+  "transition-colors",
+  "duration-200",
+  "focus:outline-none",
+  "focus:ring-2",
+  "focus:ring-input-focus",
+  "focus:border-input-focus"
+];
+var errorClasses = ["border-error", "focus:ring-error", "focus:border-error"];
+var disabledClasses = ["opacity-50", "cursor-not-allowed"];
+var sizeClasses = {
+  [inputSizeValues.SM]: ["px-3", "py-1.5", "text-sm"],
+  [inputSizeValues.MD]: ["px-4", "h-10", "text-base"],
+  [inputSizeValues.LG]: ["px-4", "py-3", "text-lg"]
+};
+var classNames = (size, hasError, disabled) => clsx_default(baseClasses, sizeClasses[size], hasError && errorClasses, disabled && disabledClasses);
+var wrapperClasses = () => clsx_default("flex", "flex-col");
+var labelClasses = () => clsx_default("block", "text-sm", "font-medium", "text-text-primary", "mb-1.5");
+var errorWrapClasses = (hasError) => clsx_default("overflow-hidden", "transition-[max-height]", "duration-[250ms]", "ease-out", hasError ? "max-h-12" : "max-h-0");
+var errorMessageClasses = (hasError) => clsx_default("block", "text-sm", "text-left", "text-input-error-text", "pt-1.5", "transition-transform", "duration-[250ms]", "ease-out", hasError ? "translate-y-0" : "-translate-y-full");
+
+// components/Input/src/Input.ts
+class Input extends Base {
+  static styles = [Base.styles, Input_default];
+  static formAssociated = true;
+  #internals;
+  constructor() {
+    super();
+    this.surface = surfaceValues.LIGHT;
+    this.type = inputTypeValues.TEXT;
+    this.placeholder = "";
+    this.label = "";
+    this.ariaLabel = "";
+    this.error = "";
+    this.size = inputSizeValues.MD;
+    this.value = "";
+    this.name = "";
+    this.disabled = false;
+    this.required = false;
+    this._formDisabled = false;
+    this.#internals = this.attachInternals();
+  }
+  get isDisabled() {
+    return this.disabled || this._formDisabled;
+  }
+  _syncValidity() {
+    const input = this.shadowRoot?.querySelector("input");
+    if (!input)
+      return;
+    if (input.validity.valid) {
+      this.#internals.setValidity({});
+    } else {
+      this.#internals.setValidity(input.validity, input.validationMessage, input);
+    }
+  }
+  _handleInput(e) {
+    const target = e.target;
+    this.value = target.value;
+    this.#internals.setFormValue(this.value);
+    this._syncValidity();
+    this.emit("dsgn-input", { value: this.value, name: this.name });
+  }
+  formResetCallback() {
+    this.value = "";
+    this.error = "";
+    this.#internals.setFormValue("");
+    this.#internals.setValidity({});
+  }
+  formDisabledCallback(disabled) {
+    this._formDisabled = disabled;
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    if (changedProperties.has("value")) {
+      this.#internals.setFormValue(this.value);
+    }
+    if (changedProperties.has("value") || changedProperties.has("disabled") || changedProperties.has("_formDisabled")) {
+      this._syncValidity();
+    }
+  }
+  render() {
+    return html2`
+      <div class="${wrapperClasses()}">
+        ${this.label ? html2`<label class="${labelClasses()}" for="input"
+              >${this.label}</label
+            >` : nothing}
+        <input
+          id="input"
+          type="${this.type}"
+          class="${classNames(this.size, !!this.error, this.isDisabled)}"
+          placeholder="${this.placeholder || nothing}"
+          aria-label="${this.ariaLabel || nothing}"
+          .value="${this.value}"
+          ?disabled="${this.isDisabled}"
+          ?required="${this.required}"
+          @input="${this._handleInput}"
+        />
+        <div class="${errorWrapClasses(!!this.error)}">
+          <span class="${errorMessageClasses(!!this.error)}">
+            ${this.error}
+          </span>
+        </div>
+      </div>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Input.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...inputTypeProps })
+], Input.prototype, "type", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Input.prototype, "placeholder", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Input.prototype, "label", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "aria-label" })
+], Input.prototype, "ariaLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Input.prototype, "error", undefined);
+__legacyDecorateClassTS([
+  property({ ...inputSizeProps })
+], Input.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Input.prototype, "value", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, reflect: true })
+], Input.prototype, "name", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Input.prototype, "disabled", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Input.prototype, "required", undefined);
+__legacyDecorateClassTS([
+  state()
+], Input.prototype, "_formDisabled", undefined);
+defineElement("dsgn-input", Input);
+export {
+  Input
+};

package/dist/components/Input/src/Input.playground.d.ts

@@ -0,0 +1,2 @@
+import type { PlaygroundDefinition } from '../../../playground/types.js';
+export declare const playground: PlaygroundDefinition;

package/dist/components/Input/src/Input.props.d.ts

@@ -0,0 +1,13 @@
+export declare const inputTypeValues: {
+    readonly TEXT: "text";
+    readonly EMAIL: "email";
+};
+export type InputTypeType = (typeof inputTypeValues)[keyof typeof inputTypeValues];
+export declare const inputTypeProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const inputSizeValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export type InputSizeType = (typeof inputSizeValues)[keyof typeof inputSizeValues];
+export declare const inputSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;

package/dist/components/Input/src/Input.props.js

@@ -0,0 +1,41 @@
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// components/Input/src/Input.props.ts
+var inputTypeValues = {
+  TEXT: "text",
+  EMAIL: "email"
+};
+var inputTypeProps = enumCreator(Object.values(inputTypeValues), "type", String, { reflect: true });
+var inputSizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var inputSizeProps = enumCreator(Object.values(inputSizeValues), "size", String, { reflect: true });
+export {
+  inputSizeProps,
+  inputSizeValues,
+  inputTypeProps,
+  inputTypeValues
+};

package/dist/components/Input/src/Input.styles.d.ts

@@ -0,0 +1,6 @@
+import { type InputSizeType } from './Input.props.js';
+export declare const classNames: (size: InputSizeType, hasError: boolean, disabled: boolean) => string;
+export declare const wrapperClasses: () => string;
+export declare const labelClasses: () => string;
+export declare const errorWrapClasses: (hasError: boolean) => string;
+export declare const errorMessageClasses: (hasError: boolean) => string;