@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Background/src/Background.js

@@ -0,0 +1,576 @@
+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;
+};
+
+// ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/is-server.js
+var NODE_MODE = false;
+var isServer = NODE_MODE;
+
+// ../../node_modules/.bun/@lit-labs+observers@2.1.0/node_modules/@lit-labs/observers/development/intersection-controller.js
+class IntersectionController {
+  constructor(host, { target, config, callback, skipInitial }) {
+    this._targets = new Set;
+    this._skipInitial = false;
+    this._unobservedUpdate = false;
+    this._host = host;
+    if (target !== null) {
+      this._targets.add(target ?? host);
+    }
+    this._skipInitial = skipInitial ?? this._skipInitial;
+    this.callback = callback;
+    if (isServer) {
+      return;
+    }
+    if (!window.IntersectionObserver) {
+      console.warn(`IntersectionController error: browser does not support IntersectionObserver.`);
+      return;
+    }
+    this._observer = new IntersectionObserver((entries) => {
+      const unobservedUpdate = this._unobservedUpdate;
+      this._unobservedUpdate = false;
+      if (this._skipInitial && unobservedUpdate) {
+        return;
+      }
+      this.handleChanges(entries);
+      this._host.requestUpdate();
+    }, config);
+    host.addController(this);
+  }
+  handleChanges(entries) {
+    this.value = this.callback?.(entries, this._observer);
+  }
+  hostConnected() {
+    for (const target of this._targets) {
+      this.observe(target);
+    }
+  }
+  hostDisconnected() {
+    this.disconnect();
+  }
+  async hostUpdated() {
+    const pendingRecords = this._observer.takeRecords();
+    if (pendingRecords.length) {
+      this.handleChanges(pendingRecords);
+    }
+  }
+  observe(target) {
+    this._targets.add(target);
+    this._observer.observe(target);
+    this._unobservedUpdate = true;
+  }
+  unobserve(target) {
+    this._targets.delete(target);
+    this._observer.unobserve(target);
+  }
+  disconnect() {
+    this._observer.disconnect();
+  }
+}
+
+// components/Background/src/Background.ts
+import { html as html3, nothing } from "lit";
+import { property } 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/motion.ts
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var cachedMatchMedia;
+var cachedQuery = null;
+function prefersReducedMotion() {
+  const mm = typeof matchMedia === "function" ? matchMedia : undefined;
+  if (mm !== cachedMatchMedia) {
+    cachedMatchMedia = mm;
+    cachedQuery = mm ? mm(REDUCED_MOTION_QUERY) : null;
+  }
+  return cachedQuery?.matches ?? false;
+}
+
+// common/controllers/AuroraMeshController.ts
+var X_MIN = -15;
+var X_MAX = 70;
+var Y_MIN = -20;
+var Y_MAX = 60;
+var TRANSITION_RATIO = 0.85;
+var rand = (min, max) => Math.random() * (max - min) + min;
+var DEFAULT_AURORA_BLOBS = [
+  {
+    minSize: 500,
+    maxSize: 900,
+    minOpacity: 0.1,
+    maxOpacity: 0.24,
+    interval: 5500
+  },
+  {
+    minSize: 300,
+    maxSize: 600,
+    minOpacity: 0.06,
+    maxOpacity: 0.16,
+    interval: 4200
+  },
+  {
+    minSize: 200,
+    maxSize: 450,
+    minOpacity: 0.04,
+    maxOpacity: 0.12,
+    interval: 3500
+  }
+];
+
+class AuroraMeshController {
+  get blobs() {
+    return this._states;
+  }
+  get running() {
+    return this._timers.some((id) => id !== null);
+  }
+  constructor(host, options = {}, canRun = () => true) {
+    this.paused = false;
+    this.host = host;
+    this._configs = options.blobs ?? DEFAULT_AURORA_BLOBS;
+    this._opacityScale = options.opacityScale ?? 1;
+    this._canRun = canRun;
+    this._timers = this._configs.map(() => null);
+    this._states = this._configs.map((config) => this._randomState(config));
+    host.addController(this);
+  }
+  hostDisconnected() {
+    this._stopAll();
+  }
+  hostUpdated() {
+    this._reconcile();
+  }
+  setOpacityScale(scale) {
+    const prev = this._opacityScale || 1;
+    this._opacityScale = scale;
+    this._states = this._states.map((state) => ({
+      ...state,
+      opacity: state.opacity / prev * scale
+    }));
+    this.host.requestUpdate();
+  }
+  pause() {
+    this.paused = true;
+    this._stopAll();
+    this.host.requestUpdate();
+  }
+  resume() {
+    this.paused = false;
+    this.host.requestUpdate();
+  }
+  get _allowed() {
+    return !this.paused && !prefersReducedMotion() && this._canRun();
+  }
+  _reconcile() {
+    if (this._allowed && !this.running) {
+      this._startAll();
+    } else if (!this._allowed && this.running) {
+      this._stopAll();
+    }
+  }
+  _randomState(config) {
+    return {
+      x: rand(X_MIN, X_MAX),
+      y: rand(Y_MIN, Y_MAX),
+      size: rand(config.minSize, config.maxSize),
+      opacity: rand(config.minOpacity, config.maxOpacity) * this._opacityScale,
+      transitionMs: config.transitionMs ?? config.interval * TRANSITION_RATIO
+    };
+  }
+  _startAll() {
+    this._configs.forEach((config, i) => {
+      if (this._timers[i] !== null)
+        return;
+      this._timers[i] = setInterval(() => {
+        this._states[i] = this._randomState(config);
+        this.host.requestUpdate();
+      }, config.interval);
+    });
+  }
+  _stopAll() {
+    this._timers.forEach((id, i) => {
+      if (id !== null) {
+        clearInterval(id);
+        this._timers[i] = null;
+      }
+    });
+  }
+}
+
+// common/helpers/aurora-mesh.ts
+import { html as html2 } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+var HEIGHT_RATIO = 0.75;
+var BLUR_PX = 80;
+var BASE_SIZE = 600;
+var EASE = "cubic-bezier(0.4, 0, 0.2, 1)";
+var DEFAULT_GRADIENT = "radial-gradient(circle, " + "var(--dsgn-aurora-color-1, var(--color-orange-500)) 0%, " + "var(--dsgn-aurora-color-2, var(--color-orange-600)) 35%, " + "var(--dsgn-aurora-color-3, var(--color-orange-900)) 65%, " + "transparent 80%)";
+var CONTAINER_STYLE = {
+  position: "absolute",
+  inset: "0",
+  overflow: "hidden",
+  pointerEvents: "none",
+  zIndex: "0"
+};
+var blobStyle = (b) => ({
+  position: "absolute",
+  width: `${BASE_SIZE}px`,
+  height: `${BASE_SIZE * HEIGHT_RATIO}px`,
+  left: "0",
+  top: "0",
+  transform: `translate(-50%, -50%) scale(${b.size / BASE_SIZE})`,
+  borderRadius: "50%",
+  background: `var(--dsgn-aurora-gradient, ${DEFAULT_GRADIENT})`,
+  filter: `blur(${BLUR_PX}px)`,
+  opacity: `${b.opacity}`,
+  transition: `transform ${b.transitionMs}ms ease, ` + `opacity ${b.transitionMs}ms ease`,
+  pointerEvents: "none"
+});
+var driftStyle = (b) => ({
+  position: "absolute",
+  inset: "0",
+  transform: `translate(${b.x}%, ${b.y}%)`,
+  transition: `transform ${b.transitionMs}ms ${EASE}`,
+  pointerEvents: "none"
+});
+var renderAuroraMesh = (controller) => html2`
+  <div
+    class="aurora-mesh"
+    aria-hidden="true"
+    style=${styleMap(CONTAINER_STYLE)}
+  >
+    ${controller.blobs.map((b) => html2`
+        <div style=${styleMap(driftStyle(b))}>
+          <div style=${styleMap(blobStyle(b))}></div>
+        </div>
+      `)}
+  </div>
+`;
+
+// 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/Background/src/Background.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 {
+    --color-brand-subtle: inherit;
+    --color-page: inherit;
+    --color-text-primary: inherit;
+  }
+}
+@layer utilities {
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .bg-page {
+    background-color: var(--color-page);
+  }
+  .bg-linear-to-b {
+    --tw-gradient-position: to bottom;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to bottom in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-brand-subtle {
+    --tw-gradient-from: var(--color-brand-subtle);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-page {
+    --tw-gradient-to: var(--color-page);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@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-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Background_default = styles2;
+
+// components/Background/src/Background.props.ts
+var backgroundVariantValues = {
+  SOLID: "solid",
+  GRADIENT: "gradient"
+};
+var backgroundVariantProps = enumCreator(Object.values(backgroundVariantValues), "variant", String, { reflect: true });
+var auroraIntensityValues = {
+  SUBTLE: "subtle",
+  NORMAL: "normal",
+  VIVID: "vivid"
+};
+var INTENSITY_SCALE = {
+  subtle: 0.6,
+  normal: 1,
+  vivid: 1.5
+};
+var backgroundIntensityProps = enumCreator(Object.values(auroraIntensityValues), "intensity", 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/Background/src/Background.styles.ts
+var variantClasses = {
+  solid: "bg-page",
+  gradient: ["bg-linear-to-b", "from-brand-subtle", "to-page"]
+};
+var wrapperClassNames = (variant) => {
+  return clsx_default("relative", "w-full", "overflow-hidden", "text-text-primary", variantClasses[variant]);
+};
+var contentClassNames = () => {
+  return clsx_default("relative", "z-10");
+};
+
+// components/Background/src/Background.ts
+class Background extends Base {
+  static styles = [Base.styles, Background_default];
+  constructor() {
+    super();
+    this._inView = new IntersectionController(this, {
+      config: { threshold: 0 },
+      callback: (entries) => entries[entries.length - 1]?.isIntersecting ?? false
+    });
+    this.variant = backgroundVariantValues.SOLID;
+    this.aurora = false;
+    this.intensity = auroraIntensityValues.NORMAL;
+    this.surface = surfaceValues.DARK;
+    this._mesh = new AuroraMeshController(this, { opacityScale: INTENSITY_SCALE[this.intensity] }, () => this.aurora && this._inView.value === true);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    if (changedProperties.has("intensity")) {
+      this._mesh.setOpacityScale(INTENSITY_SCALE[this.intensity]);
+    }
+  }
+  render() {
+    return html3`<div class="${wrapperClassNames(this.variant)}">
+      ${this.aurora ? renderAuroraMesh(this._mesh) : nothing}
+      <div class="${contentClassNames()}">
+        <slot></slot>
+      </div>
+    </div>`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...backgroundVariantProps })
+], Background.prototype, "variant", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Background.prototype, "aurora", undefined);
+__legacyDecorateClassTS([
+  property({ ...backgroundIntensityProps })
+], Background.prototype, "intensity", undefined);
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Background.prototype, "surface", undefined);
+defineElement("dsgn-background", Background);
+export {
+  Background
+};

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

@@ -0,0 +1,20 @@
+export declare const backgroundVariantValues: {
+    readonly SOLID: "solid";
+    readonly GRADIENT: "gradient";
+};
+export type BackgroundVariantType = (typeof backgroundVariantValues)[keyof typeof backgroundVariantValues];
+export declare const backgroundVariantProps: import("lit").PropertyDeclaration<unknown, unknown>;
+/**
+ * Brightness steps for the aurora overlay. Defined here (a Lit-free module) so
+ * `@ds-gn/ui/background/props` stays safe to import in non-DOM contexts
+ * (e.g. the Sanity seed scripts). Background is the sole aurora-mesh consumer.
+ */
+export declare const auroraIntensityValues: {
+    readonly SUBTLE: "subtle";
+    readonly NORMAL: "normal";
+    readonly VIVID: "vivid";
+};
+export type AuroraIntensityType = (typeof auroraIntensityValues)[keyof typeof auroraIntensityValues];
+/** Opacity multipliers applied to every blob, keyed by intensity step. */
+export declare const INTENSITY_SCALE: Record<AuroraIntensityType, number>;
+export declare const backgroundIntensityProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,47 @@
+// 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/Background/src/Background.props.ts
+var backgroundVariantValues = {
+  SOLID: "solid",
+  GRADIENT: "gradient"
+};
+var backgroundVariantProps = enumCreator(Object.values(backgroundVariantValues), "variant", String, { reflect: true });
+var auroraIntensityValues = {
+  SUBTLE: "subtle",
+  NORMAL: "normal",
+  VIVID: "vivid"
+};
+var INTENSITY_SCALE = {
+  subtle: 0.6,
+  normal: 1,
+  vivid: 1.5
+};
+var backgroundIntensityProps = enumCreator(Object.values(auroraIntensityValues), "intensity", String, { reflect: true });
+export {
+  INTENSITY_SCALE,
+  auroraIntensityValues,
+  backgroundIntensityProps,
+  backgroundVariantProps,
+  backgroundVariantValues
+};

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

@@ -0,0 +1,3 @@
+import type { BackgroundVariantType } from './Background.props.js';
+export declare const wrapperClassNames: (variant: BackgroundVariantType) => string;
+export declare const contentClassNames: () => string;

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

@@ -0,0 +1,28 @@
+import '../../../types/global.d.ts';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type CSSResultGroup } from 'lit';
+import { type BadgeSizeType, type BadgeVariantType } from './Badge.props.js';
+/** @slot - Badge label. */
+export declare class Badge extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    /**
+     * Visual variant
+     */
+    variant: BadgeVariantType;
+    /**
+     * Size variant
+     */
+    size: BadgeSizeType;
+    render(): import("lit").TemplateResult<1>;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-badge': Badge;
+    }
+}