@ds-gn/ui 0.0.0-stage → 0.5.0

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

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

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

@@ -0,0 +1,19 @@
+export declare const headingSizeValues: {
+    readonly H1: "h1";
+    readonly H2: "h2";
+    readonly H3: "h3";
+    readonly H4: "h4";
+    readonly H5: "h5";
+    readonly H6: "h6";
+    readonly HERO: "hero";
+};
+export type HeadingSizeType = (typeof headingSizeValues)[keyof typeof headingSizeValues];
+export declare const headingSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const headingWeightValues: {
+    readonly NORMAL: "normal";
+    readonly SEMIBOLD: "semibold";
+    readonly BOLD: "bold";
+    readonly EXTRABOLD: "extrabold";
+};
+export type HeadingWeightType = (typeof headingWeightValues)[keyof typeof headingWeightValues];
+export declare const headingWeightProps: import("lit").PropertyDeclaration<unknown, unknown>;

package/dist/components/Heading/src/Heading.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/Heading/src/Heading.props.ts
+var headingSizeValues = {
+  H1: "h1",
+  H2: "h2",
+  H3: "h3",
+  H4: "h4",
+  H5: "h5",
+  H6: "h6",
+  HERO: "hero"
+};
+var headingSizeProps = enumCreator(Object.values(headingSizeValues), "heading-size", String, { reflect: true, attribute: "heading-size" });
+var headingWeightValues = {
+  NORMAL: "normal",
+  SEMIBOLD: "semibold",
+  BOLD: "bold",
+  EXTRABOLD: "extrabold"
+};
+var headingWeightProps = enumCreator(Object.values(headingWeightValues), "heading-weight", String, { reflect: true, attribute: "heading-weight" });
+export {
+  headingSizeProps,
+  headingSizeValues,
+  headingWeightProps,
+  headingWeightValues
+};

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

@@ -0,0 +1,4 @@
+import type { SurfaceType } from '../../../common/props/surface/surface.props.js';
+import type { HeadingSizeType, HeadingWeightType } from './Heading.props.js';
+export declare const classNames: (surface: SurfaceType, size: HeadingSizeType, weight: HeadingWeightType) => string;
+export declare const animatedWordClassNames: (currentIndex: number) => string;

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

@@ -0,0 +1,28 @@
+import '../../../types/global.d.ts';
+import '../../Button/src/Button.js';
+import '../../Heading/src/Heading.js';
+import '../../Stack/src/Stack.js';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type HeadingBlockAlignmentType } from './HeadingBlock.props.js';
+/**
+ * @slot eyebrow - Optional eyebrow text.
+ * @slot heading - Heading content.
+ * @slot description - Supporting description.
+ * @slot action-primary - Primary action.
+ * @slot action-secondary - Secondary action.
+ */
+export declare class HeadingBlock extends Base {
+    static styles: CSSResultGroup;
+    surface: SurfaceType;
+    alignment: HeadingBlockAlignmentType;
+    private get _eyebrow();
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-heading-block': HeadingBlock;
+    }
+}

package/dist/components/HeadingBlock/src/HeadingBlock.js

@@ -0,0 +1,288 @@
+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/HeadingBlock/src/HeadingBlock.ts
+import"../../Button/src/Button.js";
+import"../../Heading/src/Heading.js";
+import"../../Stack/src/Stack.js";
+import { html as html2, 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/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/HeadingBlock/src/HeadingBlock.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-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --spacing: 0.25rem;
+    --container-2xl: 42rem;
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --color-eyebrow: inherit;
+    --color-text-secondary: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .-mb-2 {
+    margin-bottom: calc(var(--spacing) * -2);
+  }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-\\[11px\\] {
+    font-size: 11px;
+  }
+  .tracking-\\[0\\.06em\\] {
+    --tw-tracking: 0.06em;
+    letter-spacing: 0.06em;
+  }
+  .text-eyebrow {
+    color: var(--color-eyebrow);
+  }
+  .text-text-secondary {
+    color: var(--color-text-secondary);
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .md\\:-mb-3 {
+    @media (width >= 48rem) {
+      margin-bottom: calc(var(--spacing) * -3);
+    }
+  }
+  .md\\:text-lg {
+    @media (width >= 48rem) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@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-tracking: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var HeadingBlock_default = styles2;
+
+// components/HeadingBlock/src/HeadingBlock.props.ts
+var headingBlockAlignmentValues = {
+  START: "start",
+  CENTER: "center"
+};
+var headingBlockAlignmentProps = enumCreator(Object.values(headingBlockAlignmentValues), "alignment", 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/HeadingBlock/src/HeadingBlock.styles.ts
+var eyebrowClassNames = () => clsx_default("font-mono", "text-[11px]", "tracking-[0.06em]", "uppercase", "text-eyebrow", "-mb-2", "md:-mb-3");
+var descriptionClassNames = () => {
+  return clsx_default("text-base", "md:text-lg", "text-text-secondary", "max-w-2xl");
+};
+
+// components/HeadingBlock/src/HeadingBlock.ts
+class HeadingBlock extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.alignment = headingBlockAlignmentValues.START;
+  }
+  static styles = [Base.styles, HeadingBlock_default];
+  get _eyebrow() {
+    return this.querySelector('[slot="eyebrow"]');
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  render() {
+    const align = this.alignment === "center" ? "center" : "start";
+    return html2`
+      <dsgn-stack direction="vertical" gap="md" align=${align}>
+        ${this._eyebrow ? html2`<div class="${eyebrowClassNames()}">
+              <slot name="eyebrow"></slot>
+            </div>` : nothing}
+        <slot name="heading"></slot>
+        <div class="${descriptionClassNames()}">
+          <slot name="description"></slot>
+        </div>
+        <dsgn-stack direction="horizontal" gap="sm" align=${align} wrap>
+          <slot name="action-primary"></slot>
+          <slot name="action-secondary"></slot>
+        </dsgn-stack>
+      </dsgn-stack>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], HeadingBlock.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...headingBlockAlignmentProps })
+], HeadingBlock.prototype, "alignment", undefined);
+defineElement("dsgn-heading-block", HeadingBlock);
+export {
+  HeadingBlock
+};

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

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

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

@@ -0,0 +1,6 @@
+export declare const headingBlockAlignmentValues: {
+    readonly START: "start";
+    readonly CENTER: "center";
+};
+export type HeadingBlockAlignmentType = (typeof headingBlockAlignmentValues)[keyof typeof headingBlockAlignmentValues];
+export declare const headingBlockAlignmentProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,33 @@
+// 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/HeadingBlock/src/HeadingBlock.props.ts
+var headingBlockAlignmentValues = {
+  START: "start",
+  CENTER: "center"
+};
+var headingBlockAlignmentProps = enumCreator(Object.values(headingBlockAlignmentValues), "alignment", String, { reflect: true });
+export {
+  headingBlockAlignmentProps,
+  headingBlockAlignmentValues
+};

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

@@ -0,0 +1,2 @@
+export declare const eyebrowClassNames: () => string;
+export declare const descriptionClassNames: () => string;

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

@@ -0,0 +1,42 @@
+import '../../../types/global.d.ts';
+import '../../Container/src/Container.js';
+import '../../FormBlock/src/FormBlock.js';
+import '../../Grid/src/Grid.js';
+import '../../HeadingBlock/src/HeadingBlock.js';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type HeroContentAlignType, type HeroLayoutType, type HeroMinHeightType } from './Hero.props.js';
+/**
+ * @slot content - Primary hero content.
+ * @slot form - Hero form content.
+ * @slot asset - Hero media or visual content.
+ * @slot features - Supporting feature content.
+ */
+export declare class Hero extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    /**
+     * Layout arrangement of content and asset
+     */
+    layout: HeroLayoutType;
+    /**
+     * Minimum height of the hero section
+     */
+    minHeight: HeroMinHeightType;
+    /**
+     * Horizontal alignment of content, form, and features in the centered layout.
+     * Has no effect on asset-right / asset-left / asset-background layouts.
+     */
+    contentAlign: HeroContentAlignType;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-hero': Hero;
+    }
+}