@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Hero/src/Hero.js

@@ -0,0 +1,506 @@
+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/Hero/src/Hero.ts
+import"../../Container/src/Container.js";
+import"../../FormBlock/src/FormBlock.js";
+import"../../Grid/src/Grid.js";
+import"../../HeadingBlock/src/HeadingBlock.js";
+import { html as html2 } 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/Hero/src/Hero.ts
+import { containerSizeValues } from "../../Container/src/Container.props.js";
+import {
+  gridAlignValues,
+  gridColsValues,
+  gridGapValues
+} from "../../Grid/src/Grid.props.js";
+
+// components/Hero/src/Hero.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;
+    --color-black: #000;
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --color-text-tertiary: inherit;
+  }
+}
+@layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-\\[1\\] {
+    z-index: 1;
+  }
+  .col-1 {
+    grid-column: 1;
+  }
+  .col-2 {
+    grid-column: 2;
+  }
+  .-mx-4 {
+    margin-inline: calc(var(--spacing) * -4);
+  }
+  .mt-14 {
+    margin-top: calc(var(--spacing) * 14);
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
+  .h-full {
+    height: 100%;
+  }
+  .min-h-96 {
+    min-height: calc(var(--spacing) * 96);
+  }
+  .min-h-\\[32rem\\] {
+    min-height: 32rem;
+  }
+  .min-h-\\[40rem\\] {
+    min-height: 40rem;
+  }
+  .min-h-\\[inherit\\] {
+    min-height: inherit;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-stretch {
+    align-items: stretch;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .gap-10 {
+    gap: calc(var(--spacing) * 10);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .bg-black\\/50 {
+    background-color: color-mix(in srgb, #000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .tracking-\\[0\\.02em\\] {
+    --tw-tracking: 0.02em;
+    letter-spacing: 0.02em;
+  }
+  .text-text-tertiary {
+    color: var(--color-text-tertiary);
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .sm\\:-mx-6 {
+    @media (width >= 40rem) {
+      margin-inline: calc(var(--spacing) * -6);
+    }
+  }
+  .lg\\:-mx-8 {
+    @media (width >= 64rem) {
+      margin-inline: calc(var(--spacing) * -8);
+    }
+  }
+  .lg\\:h-auto {
+    @media (width >= 64rem) {
+      height: auto;
+    }
+  }
+  .lg\\:min-h-\\[inherit\\] {
+    @media (width >= 64rem) {
+      min-height: inherit;
+    }
+  }
+  .\\[\\&\\>\\*\\]\\:absolute {
+    &>* {
+      position: absolute;
+    }
+  }
+  .\\[\\&\\>\\*\\]\\:inset-0 {
+    &>* {
+      inset: calc(var(--spacing) * 0);
+    }
+  }
+  .\\[\\&\\>\\*\\]\\:h-full {
+    &>* {
+      height: 100%;
+    }
+  }
+  .\\[\\&\\>\\*\\]\\:w-full {
+    &>* {
+      width: 100%;
+    }
+  }
+  .\\[\\&\\>\\*\\]\\:object-cover {
+    &>* {
+      object-fit: cover;
+    }
+  }
+}
+@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 Hero_default = styles2;
+
+// components/Hero/src/Hero.props.ts
+var heroLayoutValues = {
+  ASSET_RIGHT: "asset-right",
+  ASSET_LEFT: "asset-left",
+  ASSET_BACKGROUND: "asset-background",
+  CENTERED: "centered"
+};
+var heroLayoutProps = enumCreator(Object.values(heroLayoutValues), "layout", String, { reflect: true });
+var heroContentAlignValues = {
+  START: "start",
+  CENTER: "center"
+};
+var heroContentAlignProps = enumCreator(Object.values(heroContentAlignValues), "content-align", String, { attribute: "content-align", reflect: true });
+var heroMinHeightValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  FULL: "full"
+};
+var heroMinHeightProps = enumCreator(Object.values(heroMinHeightValues), "min-height", String, { attribute: "min-height", 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/Hero/src/Hero.styles.ts
+var minHeightClasses = {
+  sm: ["min-h-96"],
+  md: ["min-h-[32rem]"],
+  lg: ["min-h-[40rem]"],
+  full: ["min-h-screen"]
+};
+var wrapperClassNames = (layout, minHeight) => {
+  return clsx_default("relative", "w-full", "overflow-hidden", "flex", "flex-col", "justify-center", minHeightClasses[minHeight]);
+};
+var backgroundInnerClassNames = () => {
+  return clsx_default("relative", "flex", "items-center", "justify-center", "w-full", "min-h-[inherit]", "z-10");
+};
+var centeredInnerClassNames = () => {
+  return clsx_default("flex", "flex-col", "items-stretch", "justify-center", "min-h-[inherit]");
+};
+var assetClassNames = (layout) => {
+  if (layout === "asset-background") {
+    return clsx_default("absolute", "inset-0", "-mx-4", "sm:-mx-6", "lg:-mx-8");
+  }
+  return clsx_default("w-full", "h-64", "lg:h-auto", "lg:min-h-[inherit]");
+};
+var assetInnerClassNames = (layout) => {
+  return clsx_default("w-full", "h-full", "[&>*]:w-full", "[&>*]:h-full", "[&>*]:object-cover", layout === "asset-background" && "[&>*]:absolute [&>*]:inset-0");
+};
+var overlayClassNames = () => {
+  return clsx_default("absolute", "inset-0", "bg-black/50", "z-[1]");
+};
+var featuresClassNames = () => {
+  return clsx_default("mt-14", "pb-6", "relative", "z-10");
+};
+var featuresContentClassNames = (layout, contentAlign) => {
+  return clsx_default("flex", "gap-10", "flex-wrap", "font-mono", "text-xs", "text-text-tertiary", "tracking-[0.02em]", "uppercase", layout === "centered" && contentAlign === "center" && "justify-center");
+};
+var centeredFormClassNames = (contentAlign) => {
+  return clsx_default("flex", "w-full", contentAlign === "center" ? "justify-center" : "justify-start");
+};
+
+// components/Hero/src/Hero.ts
+class Hero extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.DARK;
+    this.layout = heroLayoutValues.ASSET_RIGHT;
+    this.minHeight = heroMinHeightValues.MD;
+    this.contentAlign = heroContentAlignValues.START;
+  }
+  static styles = [Base.styles, Hero_default];
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  render() {
+    if (this.layout === heroLayoutValues.ASSET_BACKGROUND) {
+      return html2`
+        <div class="${wrapperClassNames(this.layout, this.minHeight)}">
+          <div class="${assetClassNames("asset-background")}">
+            <div class="${assetInnerClassNames("asset-background")}">
+              <slot name="asset"></slot>
+            </div>
+          </div>
+          <div class="${overlayClassNames()}"></div>
+          <dsgn-container size="${containerSizeValues.XXL}">
+            <div class="${backgroundInnerClassNames()}">
+              <slot name="content"></slot>
+              <slot name="form"></slot>
+            </div>
+            <div class="${featuresClassNames()}">
+              <div class="${featuresContentClassNames(this.layout)}">
+                <slot name="features"></slot>
+              </div>
+            </div>
+          </dsgn-container>
+        </div>
+      `;
+    }
+    if (this.layout === heroLayoutValues.CENTERED) {
+      return html2`
+        <div class="${wrapperClassNames(this.layout, this.minHeight)}">
+          <dsgn-container size="${containerSizeValues.XXL}">
+            <div class="${centeredInnerClassNames()}">
+              <slot name="content"></slot>
+              <div class="${centeredFormClassNames(this.contentAlign)}">
+                <slot name="form"></slot>
+              </div>
+              <div class="${featuresClassNames()}">
+                <div
+                  class="${featuresContentClassNames(this.layout, this.contentAlign)}"
+                >
+                  <slot name="features"></slot>
+                </div>
+              </div>
+            </div>
+          </dsgn-container>
+        </div>
+      `;
+    }
+    return html2`
+      <div class="${wrapperClassNames(this.layout, this.minHeight)}">
+        <dsgn-container size="${containerSizeValues.XXL}">
+          <dsgn-grid
+            .cols=${gridColsValues.EIGHT_FOUR}
+            .gap=${gridGapValues.LG}
+            .align=${gridAlignValues.CENTER}
+            ?reverse=${this.layout === heroLayoutValues.ASSET_LEFT}
+          >
+            <slot name="content" slot="col-1"></slot>
+            <slot name="form" slot="col-1"></slot>
+            <slot name="asset" slot="col-2"></slot>
+          </dsgn-grid>
+          <div class="${featuresClassNames()}">
+            <div class="${featuresContentClassNames(this.layout)}">
+              <slot name="features"></slot>
+            </div>
+          </div>
+        </dsgn-container>
+      </div>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Hero.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...heroLayoutProps })
+], Hero.prototype, "layout", undefined);
+__legacyDecorateClassTS([
+  property({ ...heroMinHeightProps })
+], Hero.prototype, "minHeight", undefined);
+__legacyDecorateClassTS([
+  property({ ...heroContentAlignProps })
+], Hero.prototype, "contentAlign", undefined);
+defineElement("dsgn-hero", Hero);
+export {
+  Hero
+};

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

@@ -0,0 +1,22 @@
+export declare const heroLayoutValues: {
+    readonly ASSET_RIGHT: "asset-right";
+    readonly ASSET_LEFT: "asset-left";
+    readonly ASSET_BACKGROUND: "asset-background";
+    readonly CENTERED: "centered";
+};
+export type HeroLayoutType = (typeof heroLayoutValues)[keyof typeof heroLayoutValues];
+export declare const heroLayoutProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const heroContentAlignValues: {
+    readonly START: "start";
+    readonly CENTER: "center";
+};
+export type HeroContentAlignType = (typeof heroContentAlignValues)[keyof typeof heroContentAlignValues];
+export declare const heroContentAlignProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const heroMinHeightValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly FULL: "full";
+};
+export type HeroMinHeightType = (typeof heroMinHeightValues)[keyof typeof heroMinHeightValues];
+export declare const heroMinHeightProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,51 @@
+// 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/Hero/src/Hero.props.ts
+var heroLayoutValues = {
+  ASSET_RIGHT: "asset-right",
+  ASSET_LEFT: "asset-left",
+  ASSET_BACKGROUND: "asset-background",
+  CENTERED: "centered"
+};
+var heroLayoutProps = enumCreator(Object.values(heroLayoutValues), "layout", String, { reflect: true });
+var heroContentAlignValues = {
+  START: "start",
+  CENTER: "center"
+};
+var heroContentAlignProps = enumCreator(Object.values(heroContentAlignValues), "content-align", String, { attribute: "content-align", reflect: true });
+var heroMinHeightValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  FULL: "full"
+};
+var heroMinHeightProps = enumCreator(Object.values(heroMinHeightValues), "min-height", String, { attribute: "min-height", reflect: true });
+export {
+  heroContentAlignProps,
+  heroContentAlignValues,
+  heroLayoutProps,
+  heroLayoutValues,
+  heroMinHeightProps,
+  heroMinHeightValues
+};

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

@@ -0,0 +1,10 @@
+import type { HeroContentAlignType, HeroLayoutType, HeroMinHeightType } from './Hero.props.js';
+export declare const wrapperClassNames: (layout: HeroLayoutType, minHeight: HeroMinHeightType) => string;
+export declare const backgroundInnerClassNames: () => string;
+export declare const centeredInnerClassNames: () => string;
+export declare const assetClassNames: (layout: HeroLayoutType) => string;
+export declare const assetInnerClassNames: (layout: HeroLayoutType) => string;
+export declare const overlayClassNames: () => string;
+export declare const featuresClassNames: () => string;
+export declare const featuresContentClassNames: (layout?: HeroLayoutType, contentAlign?: HeroContentAlignType) => string;
+export declare const centeredFormClassNames: (contentAlign?: HeroContentAlignType) => string;

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

@@ -0,0 +1,67 @@
+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, type SVGTemplateResult } from 'lit';
+import type { IconSizeType } from './Icon.props.js';
+import type { IconName } from './icons/icon-names.js';
+export declare class Icon extends Base {
+    static styles: CSSResultGroup;
+    private static _registry;
+    /**
+     * Register icons for use with the `icon-name` attribute.
+     * Call this once at your app entry point with whichever icons you need:
+     *
+     *   import { Icon } from '@ds-gn/ui/icon';
+     *   import * as allIcons from '@ds-gn/ui/icon/icons';
+     *   Icon.registerIcons(allIcons);
+     *
+     * Custom icons work too — any SVGTemplateResult keyed by name:
+     *
+     *   import { svg } from 'lit';
+     *   Icon.registerIcons({ myIcon: svg`<path d="..."/>` });
+     */
+    static registerIcons(registry: Record<string, SVGTemplateResult>): void;
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    /**
+     * Icon size variant
+     *   sm = 16px, md = 20px, lg = 24px (default), xl = 32px
+     */
+    size: IconSizeType;
+    /**
+     * SVG template content for the icon.
+     * Pass an imported icon definition directly for tree-shakeable usage:
+     *
+     *   import { arrowRight } from '@ds-gn/ui/icon/icons';
+     *   html`<dsgn-icon .icon=${arrowRight}></dsgn-icon>`
+     */
+    icon?: SVGTemplateResult;
+    /**
+     * Icon name for declarative/SSR/CMS usage.
+     * Requires icons to be registered via Icon.registerIcons() at app entry:
+     *
+     *   <dsgn-icon icon-name="arrowRight"></dsgn-icon>
+     */
+    iconName: IconName | '';
+    /**
+     * Accessible label for the icon.
+     * When provided, the icon is announced by screen readers.
+     * When omitted, the icon is treated as decorative (aria-hidden).
+     */
+    label: string;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Render the icon wrapped in an SVG element with proper sizing,
+     * stroke attributes, and accessibility markup.
+     */
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-icon': Icon;
+    }
+}