@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Image/src/Image.js

@@ -0,0 +1,456 @@
+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;
+};
+
+// 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/Image/src/Image.ts
+import { html as html2, nothing, svg } from "lit";
+import { property } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
+
+// components/Image/src/Image.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 {
+    --spacing: 0.25rem;
+    --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --aspect-video: 16 / 9;
+    --color-surface-elevated: inherit;
+    --color-text-tertiary: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .aspect-\\[3\\/4\\] {
+    aspect-ratio: 3/4;
+  }
+  .aspect-\\[4\\/3\\] {
+    aspect-ratio: 4/3;
+  }
+  .aspect-\\[21\\/9\\] {
+    aspect-ratio: 21/9;
+  }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-full {
+    height: 100%;
+  }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-none {
+    border-radius: 0;
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .bg-surface-elevated {
+    background-color: var(--color-surface-elevated);
+  }
+  .object-contain {
+    object-fit: contain;
+  }
+  .object-cover {
+    object-fit: cover;
+  }
+  .object-fill {
+    object-fit: fill;
+  }
+  .object-none {
+    object-fit: none;
+  }
+  .object-scale-down {
+    object-fit: scale-down;
+  }
+  .text-text-tertiary {
+    color: var(--color-text-tertiary);
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@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 {
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Image_default = styles2;
+
+// components/Image/src/Image.props.ts
+var imageFitValues = {
+  COVER: "cover",
+  CONTAIN: "contain",
+  FILL: "fill",
+  NONE: "none",
+  SCALE_DOWN: "scale-down"
+};
+var imageFitProps = enumCreator(Object.values(imageFitValues), "fit", String, { reflect: true });
+var imageAspectValues = {
+  AUTO: "auto",
+  SQUARE: "square",
+  VIDEO: "video",
+  PHOTO: "photo",
+  PORTRAIT: "portrait",
+  WIDE: "wide"
+};
+var imageAspectProps = enumCreator(Object.values(imageAspectValues), "aspect", String, { reflect: true });
+var imageRadiusValues = {
+  NONE: "none",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  FULL: "full"
+};
+var imageRadiusProps = enumCreator(Object.values(imageRadiusValues), "radius", String, { reflect: true });
+var imageLoadingValues = {
+  LAZY: "lazy",
+  EAGER: "eager"
+};
+var imageLoadingProps = enumCreator(Object.values(imageLoadingValues), "loading", 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/Image/src/Image.styles.ts
+var fitClasses = {
+  [imageFitValues.COVER]: ["object-cover"],
+  [imageFitValues.CONTAIN]: ["object-contain"],
+  [imageFitValues.FILL]: ["object-fill"],
+  [imageFitValues.NONE]: ["object-none"],
+  [imageFitValues.SCALE_DOWN]: ["object-scale-down"]
+};
+var aspectClasses = {
+  [imageAspectValues.AUTO]: [],
+  [imageAspectValues.SQUARE]: ["aspect-square"],
+  [imageAspectValues.VIDEO]: ["aspect-video"],
+  [imageAspectValues.PHOTO]: ["aspect-[4/3]"],
+  [imageAspectValues.PORTRAIT]: ["aspect-[3/4]"],
+  [imageAspectValues.WIDE]: ["aspect-[21/9]"]
+};
+var radiusClasses = {
+  [imageRadiusValues.NONE]: ["rounded-none"],
+  [imageRadiusValues.SM]: ["rounded-sm"],
+  [imageRadiusValues.MD]: ["rounded-md"],
+  [imageRadiusValues.LG]: ["rounded-lg"],
+  [imageRadiusValues.XL]: ["rounded-xl"],
+  [imageRadiusValues.FULL]: ["rounded-full"]
+};
+var classNames = (fit, aspect, radius) => clsx_default("block", "w-full", "h-full", fitClasses[fit], aspectClasses[aspect], radiusClasses[radius]);
+var wrapperClasses = (aspect, radius) => clsx_default("block", "overflow-hidden", aspectClasses[aspect], radiusClasses[radius]);
+var errorContainerClasses = (aspect, radius) => clsx_default("flex", "items-center", "justify-center", "w-full", "bg-surface-elevated", "text-text-tertiary", aspectClasses[aspect], radiusClasses[radius]);
+
+// components/Image/src/Image.ts
+var errorIcon = svg`<circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" />`;
+
+class Image extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.fit = imageFitValues.COVER;
+    this.aspect = imageAspectValues.AUTO;
+    this.radius = imageRadiusValues.NONE;
+    this.loading = imageLoadingValues.LAZY;
+    this.src = "";
+    this.alt = "";
+    this.srcset = "";
+    this.sizes = "";
+    this.fetchpriority = "";
+    this.fallbackSrc = "";
+    this._hasError = false;
+  }
+  static styles = [Base.styles, Image_default];
+  _handleError() {
+    this._hasError = true;
+    this.emit("dsgn-image-error", { src: this.src });
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("src") && changedProperties.get("src") !== undefined) {
+      this._hasError = false;
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  #renderError() {
+    return html2`<div
+      class="${errorContainerClasses(this.aspect, this.radius)}"
+      role=${this.alt ? "img" : "presentation"}
+      aria-label=${this.alt || nothing}
+    >
+      <slot name="error">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-8 h-8"
+          aria-hidden="true"
+        >
+          ${errorIcon}
+        </svg>
+      </slot>
+    </div>`;
+  }
+  #renderFallback() {
+    return html2`<div class="${wrapperClasses(this.aspect, this.radius)}">
+      <img
+        src=${this.fallbackSrc || nothing}
+        alt=${this.alt}
+        class="${classNames(this.fit, this.aspect, this.radius)}"
+      />
+    </div>`;
+  }
+  render() {
+    if (this._hasError || !this.src) {
+      return this.fallbackSrc ? this.#renderFallback() : this.#renderError();
+    }
+    return html2`<div class="${wrapperClasses(this.aspect, this.radius)}">
+      <img
+        src=${this.src || nothing}
+        alt=${this.alt}
+        loading=${this.loading}
+        fetchpriority=${this.fetchpriority || nothing}
+        srcset=${this.srcset || nothing}
+        sizes=${this.sizes || nothing}
+        width=${this.width ?? nothing}
+        height=${this.height ?? nothing}
+        class="${classNames(this.fit, this.aspect, this.radius)}"
+        @error=${this._handleError}
+      />
+    </div>`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Image.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...imageFitProps })
+], Image.prototype, "fit", undefined);
+__legacyDecorateClassTS([
+  property({ ...imageAspectProps })
+], Image.prototype, "aspect", undefined);
+__legacyDecorateClassTS([
+  property({ ...imageRadiusProps })
+], Image.prototype, "radius", undefined);
+__legacyDecorateClassTS([
+  property({ ...imageLoadingProps })
+], Image.prototype, "loading", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Image.prototype, "src", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Image.prototype, "alt", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Image.prototype, "srcset", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Image.prototype, "sizes", undefined);
+__legacyDecorateClassTS([
+  property({ type: Number })
+], Image.prototype, "width", undefined);
+__legacyDecorateClassTS([
+  property({ type: Number })
+], Image.prototype, "height", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "fetchpriority" })
+], Image.prototype, "fetchpriority", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "fallback-src" })
+], Image.prototype, "fallbackSrc", undefined);
+__legacyDecorateClassTS([
+  state()
+], Image.prototype, "_hasError", undefined);
+defineElement("dsgn-image", Image);
+export {
+  Image
+};

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

@@ -0,0 +1,35 @@
+export declare const imageFitValues: {
+    readonly COVER: "cover";
+    readonly CONTAIN: "contain";
+    readonly FILL: "fill";
+    readonly NONE: "none";
+    readonly SCALE_DOWN: "scale-down";
+};
+export type ImageFitType = (typeof imageFitValues)[keyof typeof imageFitValues];
+export declare const imageFitProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const imageAspectValues: {
+    readonly AUTO: "auto";
+    readonly SQUARE: "square";
+    readonly VIDEO: "video";
+    readonly PHOTO: "photo";
+    readonly PORTRAIT: "portrait";
+    readonly WIDE: "wide";
+};
+export type ImageAspectType = (typeof imageAspectValues)[keyof typeof imageAspectValues];
+export declare const imageAspectProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const imageRadiusValues: {
+    readonly NONE: "none";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly FULL: "full";
+};
+export type ImageRadiusType = (typeof imageRadiusValues)[keyof typeof imageRadiusValues];
+export declare const imageRadiusProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const imageLoadingValues: {
+    readonly LAZY: "lazy";
+    readonly EAGER: "eager";
+};
+export type ImageLoadingType = (typeof imageLoadingValues)[keyof typeof imageLoadingValues];
+export declare const imageLoadingProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,65 @@
+// 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/Image/src/Image.props.ts
+var imageFitValues = {
+  COVER: "cover",
+  CONTAIN: "contain",
+  FILL: "fill",
+  NONE: "none",
+  SCALE_DOWN: "scale-down"
+};
+var imageFitProps = enumCreator(Object.values(imageFitValues), "fit", String, { reflect: true });
+var imageAspectValues = {
+  AUTO: "auto",
+  SQUARE: "square",
+  VIDEO: "video",
+  PHOTO: "photo",
+  PORTRAIT: "portrait",
+  WIDE: "wide"
+};
+var imageAspectProps = enumCreator(Object.values(imageAspectValues), "aspect", String, { reflect: true });
+var imageRadiusValues = {
+  NONE: "none",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  FULL: "full"
+};
+var imageRadiusProps = enumCreator(Object.values(imageRadiusValues), "radius", String, { reflect: true });
+var imageLoadingValues = {
+  LAZY: "lazy",
+  EAGER: "eager"
+};
+var imageLoadingProps = enumCreator(Object.values(imageLoadingValues), "loading", String, { reflect: true });
+export {
+  imageAspectProps,
+  imageAspectValues,
+  imageFitProps,
+  imageFitValues,
+  imageLoadingProps,
+  imageLoadingValues,
+  imageRadiusProps,
+  imageRadiusValues
+};

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

@@ -0,0 +1,4 @@
+import { type ImageAspectType, type ImageFitType, type ImageRadiusType } from './Image.props.js';
+export declare const classNames: (fit: ImageFitType, aspect: ImageAspectType, radius: ImageRadiusType) => string;
+export declare const wrapperClasses: (aspect: ImageAspectType, radius: ImageRadiusType) => string;
+export declare const errorContainerClasses: (aspect: ImageAspectType, radius: ImageRadiusType) => string;

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

@@ -0,0 +1,60 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type InputSizeType, type InputTypeType } from './Input.props.js';
+/**
+ * @fires dsgn-input - Fired when the value changes; `detail` is `{ value, name }`.
+ */
+export declare class Input extends Base {
+    #private;
+    static styles: CSSResultGroup;
+    static formAssociated: boolean;
+    constructor();
+    surface: SurfaceType;
+    type: InputTypeType;
+    placeholder: string;
+    label: string;
+    ariaLabel: string;
+    error: string;
+    size: InputSizeType;
+    /**
+     * Current value. Deliberately not reflected: a native `<input>`'s `value`
+     * content attribute is the *default* value, not the live one, so reflecting
+     * would overwrite the author's `value=""` default on every keystroke.
+     */
+    value: string;
+    /**
+     * Field name under which the value is submitted. Reflected because the browser
+     * builds a form's entry list from the `name` **content attribute**, not the
+     * IDL property — so a name set only as a property (e.g. via the React wrapper)
+     * would leave the host without the attribute and the value would be silently
+     * dropped from `FormData`.
+     */
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    /**
+     * Disabled state inherited from an ancestor `<fieldset>`/form owner, kept
+     * separate from the authored `disabled` property. Writing the inherited state
+     * back into `disabled` would reflect a `disabled` attribute the author never
+     * set — and because the element's own attribute keeps its effective state
+     * disabled, re-enabling the fieldset would not change that state, so no
+     * `formDisabledCallback(false)` would arrive to undo it and the control would
+     * be stuck disabled forever.
+     */
+    private _formDisabled;
+    /** Authored `disabled` combined with any state inherited from the form. */
+    private get isDisabled();
+    private _syncValidity;
+    private _handleInput;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-input': Input;
+    }
+}