@ds-gn/ui 0.0.0-stage → 0.5.0

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

@@ -0,0 +1,27 @@
+export type FeatureTabIcon = 'terminal' | 'brain' | 'cpu' | 'palette' | 'plug' | 'shield';
+export interface FeatureTabData {
+    id: string;
+    eyebrow: string;
+    title: string;
+    short: string;
+    desc: string;
+    code: string;
+    metric: string;
+    icon: FeatureTabIcon;
+    /** Primary CTA label for this tab. Omit to render no primary CTA. Content lives in the CMS. */
+    ctaLabel?: string;
+    /** Primary CTA link target (e.g. an in-page anchor like `#hero`). */
+    ctaHref?: string;
+    /** Optional secondary (ghost) CTA label. Omit to render no secondary CTA. */
+    ctaSecondaryLabel?: string;
+    /** Secondary CTA link target. */
+    ctaSecondaryHref?: string;
+}
+export declare const DEFAULT_FEATURES: FeatureTabData[];
+export declare const DEFAULT_DURATION = 6000;
+export declare const DEFAULT_CODE_PATH = "~/dsgn-system";
+export declare const DEFAULT_ROTATING_LABEL = "auto-rotating";
+export declare const DEFAULT_PAUSED_LABEL = "paused \u2014 click to resume";
+export declare const DEFAULT_PAUSE_ARIA_LABEL = "Pause auto-rotate";
+export declare const DEFAULT_RESUME_ARIA_LABEL = "Resume auto-rotate";
+export declare const DEFAULT_TABS_ARIA_LABEL = "Features";

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

@@ -0,0 +1,80 @@
+// components/FeatureTabs/src/FeatureTabs.props.ts
+var DEFAULT_FEATURES = [
+  {
+    id: "orchestrator",
+    eyebrow: "CLI",
+    title: "Orchestrator",
+    short: "Scaffold, generate, and build from one CLI.",
+    desc: "Three commands cover the full lifecycle. Adapters handle language, styling, and tooling so you never touch the wiring.",
+    code: "ds-gn create design-system",
+    metric: "3 commands",
+    icon: "terminal",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  },
+  {
+    id: "authoring",
+    eyebrow: "Engine",
+    title: "Authoring brain",
+    short: "A canonical core composed by patch-based adapters.",
+    desc: "One canonical core template plus patch-based adapters composes your project. Change language, styling, or tooling without forking — just swap the adapter.",
+    code: "adapters/styling/tailwind",
+    metric: "1 core",
+    icon: "brain",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  },
+  {
+    id: "compiler",
+    eyebrow: "Build",
+    title: "Compiler",
+    short: "Tree-shakable ESM, types, and CSS — minified.",
+    desc: "Bundles components to tree-shakable ESM with types, compiles Tailwind or concatenates CSS, minified for prod. One step. No config tax.",
+    code: "bun build:ui",
+    metric: "46kb gzip",
+    icon: "cpu",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  },
+  {
+    id: "tokens",
+    eyebrow: "Tokens",
+    title: "Typed tokens",
+    short: "Semantic tokens, emitted to Tailwind, CSS, and shadow DOM.",
+    desc: "Semantic color, typography, and breakpoint tokens emit Tailwind @theme, public CSS variables, and shadow-DOM variables — type-checked across the chain.",
+    code: "--text-primary-on-light",
+    metric: "169 tokens",
+    icon: "palette",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  },
+  {
+    id: "adapters",
+    eyebrow: "Adapters",
+    title: "Stack-agnostic",
+    short: "Language, styling, and tooling — pick at compose time.",
+    desc: "Adapters express language, styling, and tooling as patches over the core — pick TypeScript or JS and Tailwind, Sass, or CSS without forking. The output is Lit web components that run in React, Vue, Svelte, or vanilla.",
+    code: "adapters/framework/lit",
+    metric: "7 adapters",
+    icon: "plug",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  }
+];
+var DEFAULT_DURATION = 6000;
+var DEFAULT_CODE_PATH = "~/dsgn-system";
+var DEFAULT_ROTATING_LABEL = "auto-rotating";
+var DEFAULT_PAUSED_LABEL = "paused — click to resume";
+var DEFAULT_PAUSE_ARIA_LABEL = "Pause auto-rotate";
+var DEFAULT_RESUME_ARIA_LABEL = "Resume auto-rotate";
+var DEFAULT_TABS_ARIA_LABEL = "Features";
+export {
+  DEFAULT_CODE_PATH,
+  DEFAULT_DURATION,
+  DEFAULT_FEATURES,
+  DEFAULT_PAUSED_LABEL,
+  DEFAULT_PAUSE_ARIA_LABEL,
+  DEFAULT_RESUME_ARIA_LABEL,
+  DEFAULT_ROTATING_LABEL,
+  DEFAULT_TABS_ARIA_LABEL
+};

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

@@ -0,0 +1,35 @@
+export declare const headerClassNames: () => string;
+export declare const tabsColClassNames: () => string;
+export declare const tabListClassNames: () => string;
+export declare const tabItemClassNames: () => string;
+export declare const tabBtnClassNames: (active: boolean) => string;
+export declare const railClassNames: () => string;
+export declare const railFillClassNames: () => string;
+export declare const tabInnerClassNames: () => string;
+export declare const iconBadgeClassNames: (active: boolean, large?: boolean) => string;
+export declare const tabMetaClassNames: () => string;
+export declare const tabMetaRowClassNames: () => string;
+export declare const tabEyebrowClassNames: (active: boolean) => string;
+export declare const tabIndexClassNames: () => string;
+export declare const tabTitleClassNames: () => string;
+export declare const tabShortClassNames: () => string;
+export declare const controlClassNames: () => string;
+export declare const controlBtnClassNames: () => string;
+export declare const controlDotClassNames: (rotating: boolean) => string;
+export declare const detailClassNames: () => string;
+export declare const patternOverlayStyles: () => Record<string, string>;
+export declare const detailContentClassNames: (idx: number) => string;
+export declare const detailHeaderClassNames: () => string;
+export declare const detailEyebrowClassNames: () => string;
+export declare const detailCounterClassNames: () => string;
+export declare const detailTitleClassNames: () => string;
+export declare const detailDescClassNames: () => string;
+export declare const codeWrapClassNames: () => string;
+export declare const ctaRowClassNames: () => string;
+export declare const mobileProgressClassNames: () => string;
+export declare const mobileProgressFillClassNames: () => string;
+export declare const mobileNavClassNames: () => string;
+export declare const dotsClassNames: () => string;
+export declare const dotPipClassNames: () => string;
+export declare const dotPipInnerClassNames: (active: boolean) => string;
+export declare const playPauseClassNames: () => string;

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

@@ -0,0 +1,39 @@
+import '../../../types/global.d.ts';
+import '../../Container/src/Container.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 ContainerPaddingType, type ContainerSizeType } from '../../Container/src/Container.props.js';
+/**
+ * @slot logo - Brand or logo content.
+ * @slot col-1 - First footer column.
+ * @slot col-2 - Second footer column.
+ * @slot col-3 - Third footer column.
+ * @slot bottom - Bottom-row legal or secondary content.
+ */
+export declare class Footer extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    /**
+     * Container max-width size
+     */
+    containerSize: ContainerSizeType;
+    /**
+     * Container horizontal padding
+     */
+    containerPaddingX: ContainerPaddingType;
+    /**
+     * Container vertical padding
+     */
+    containerPaddingY: ContainerPaddingType;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-footer': Footer;
+    }
+}

package/dist/components/Footer/src/Footer.js

@@ -0,0 +1,361 @@
+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/Footer/src/Footer.ts
+import"../../Container/src/Container.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/Footer/src/Footer.ts
+import {
+  containerPaddingValues,
+  containerPaddingXProps,
+  containerPaddingYProps,
+  containerSizeProps,
+  containerSizeValues
+} from "../../Container/src/Container.props.js";
+
+// components/Footer/src/Footer.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);
+    --color-outline: inherit;
+    --color-text-primary: inherit;
+    --color-text-tertiary: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .col-1 {
+    grid-column: 1;
+  }
+  .col-2 {
+    grid-column: 2;
+  }
+  .col-3 {
+    grid-column: 3;
+  }
+  .col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-outline {
+    border-color: var(--color-outline);
+  }
+  .pt-8 {
+    padding-top: calc(var(--spacing) * 8);
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .text-text-tertiary {
+    color: var(--color-text-tertiary);
+  }
+  .sm\\:col-span-4 {
+    @media (width >= 40rem) {
+      grid-column: span 4 / span 4;
+    }
+  }
+  .md\\:gap-8 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
+  .lg\\:w-1\\/3 {
+    @media (width >= 64rem) {
+      width: calc(1 / 3 * 100%);
+    }
+  }
+  .lg\\:flex-row {
+    @media (width >= 64rem) {
+      flex-direction: row;
+    }
+  }
+  .lg\\:gap-12 {
+    @media (width >= 64rem) {
+      gap: calc(var(--spacing) * 12);
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@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-border-style: solid;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Footer_default = styles2;
+
+// ../../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/Footer/src/Footer.styles.ts
+var baseClasses = ["w-full", "font-sans"];
+var classNames = () => clsx_default(baseClasses);
+var topClasses = () => clsx_default("flex", "flex-col", "lg:flex-row", "gap-8", "lg:gap-12");
+var logoClasses = () => clsx_default("flex", "flex-col", "gap-3", "lg:w-1/3", "flex-shrink-0", "text-text-primary");
+var columnsWrapperClasses = () => clsx_default("flex-1", "grid", "grid-cols-12", "gap-6", "md:gap-8");
+var columnClasses = () => clsx_default("col-span-12", "sm:col-span-4");
+var bottomClasses = () => clsx_default("mt-8", "pt-8", "border-t", "border-outline", "text-text-tertiary", "text-sm");
+
+// components/Footer/src/Footer.ts
+class Footer extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.DARK;
+    this.containerSize = containerSizeValues.XXL;
+    this.containerPaddingX = containerPaddingValues.SM;
+    this.containerPaddingY = containerPaddingValues.LG;
+  }
+  static styles = [Base.styles, Footer_default];
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  render() {
+    return html2`
+      <footer class="${classNames()}">
+        <dsgn-container
+          size="${this.containerSize}"
+          padding-x="${this.containerPaddingX}"
+          padding-y="${this.containerPaddingY}"
+        >
+          <div class="${topClasses()}">
+            <div class="${logoClasses()}">
+              <slot name="logo"></slot>
+            </div>
+            <div class="${columnsWrapperClasses()}">
+              <div class="${columnClasses()}">
+                <slot name="col-1"></slot>
+              </div>
+              <div class="${columnClasses()}">
+                <slot name="col-2"></slot>
+              </div>
+              <div class="${columnClasses()}">
+                <slot name="col-3"></slot>
+              </div>
+            </div>
+          </div>
+          <div class="${bottomClasses()}">
+            <slot name="bottom"></slot>
+          </div>
+        </dsgn-container>
+      </footer>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Footer.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...containerSizeProps, attribute: "container-size" })
+], Footer.prototype, "containerSize", undefined);
+__legacyDecorateClassTS([
+  property({ ...containerPaddingXProps })
+], Footer.prototype, "containerPaddingX", undefined);
+__legacyDecorateClassTS([
+  property({ ...containerPaddingYProps })
+], Footer.prototype, "containerPaddingY", undefined);
+defineElement("dsgn-footer", Footer);
+export {
+  Footer
+};

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

@@ -0,0 +1,6 @@
+export declare const classNames: () => string;
+export declare const topClasses: () => string;
+export declare const logoClasses: () => string;
+export declare const columnsWrapperClasses: () => string;
+export declare const columnClasses: () => string;
+export declare const bottomClasses: () => string;

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

@@ -0,0 +1,40 @@
+import '../../../types/global.d.ts';
+import '../../Button/src/Button.js';
+import '../../Input/src/Input.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 FormBlockAlignmentType } from './FormBlock.props.js';
+/**
+ * @slot input - Form input control.
+ * @slot button - Form submission control.
+ * @slot note - Supporting form note.
+ * @slot success - Content shown after a successful submission.
+ */
+export declare class FormBlock extends Base {
+    static styles: CSSResultGroup;
+    surface: SurfaceType;
+    /** Horizontal alignment of the form row and supporting content. */
+    alignment: FormBlockAlignmentType;
+    /**
+     * Success state. Drives the fade/swap animation that hides the form row
+     * and reveals the `success` slot. Application code (or any consumer)
+     * flips this to `true` once submission completes; for convenience, the
+     * `dsgn-form-success` event also sets it. Set back to `false` to reset.
+     */
+    success: boolean;
+    private _fading;
+    private _showSuccess;
+    private get _note();
+    private get _successSlot();
+    private _onFormSuccess;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-form-block': FormBlock;
+    }
+}