@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/FormBlock/src/FormBlock.js

@@ -0,0 +1,476 @@
+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/FormBlock/src/FormBlock.ts
+import"../../Button/src/Button.js";
+import"../../Input/src/Input.js";
+import { css as css3, html as html2, nothing } from "lit";
+import { property, state } 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/FormBlock/src/FormBlock.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;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --font-weight-normal: 400;
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --color-success: inherit;
+    --color-text-tertiary: inherit;
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .static {
+    position: static;
+  }
+  .flex {
+    display: flex;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .translate-y-5 {
+    --tw-translate-y: calc(var(--spacing) * 5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .leading-\\[1\\.65\\] {
+    --tw-leading: 1.65;
+    line-height: 1.65;
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .tracking-\\[0\\.12px\\] {
+    --tw-tracking: 0.12px;
+    letter-spacing: 0.12px;
+  }
+  .text-success {
+    color: var(--color-success);
+  }
+  .text-text-tertiary {
+    color: var(--color-text-tertiary);
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .transition-\\[opacity\\,transform\\] {
+    transition-property: opacity,transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .sm\\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\\:items-start {
+    @media (width >= 40rem) {
+      align-items: flex-start;
+    }
+  }
+  .sm\\:justify-center {
+    @media (width >= 40rem) {
+      justify-content: center;
+    }
+  }
+  .md\\:max-w-56 {
+    @media (width >= 48rem) {
+      max-width: calc(var(--spacing) * 56);
+    }
+  }
+  .lg\\:max-w-64 {
+    @media (width >= 64rem) {
+      max-width: calc(var(--spacing) * 64);
+    }
+  }
+  .xl\\:max-w-72 {
+    @media (width >= 80rem) {
+      max-width: calc(var(--spacing) * 72);
+    }
+  }
+  .\\32 xl\\:max-w-80 {
+    @media (width >= 96rem) {
+      max-width: calc(var(--spacing) * 80);
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  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-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var FormBlock_default = styles2;
+
+// components/FormBlock/src/FormBlock.props.ts
+var formBlockAlignmentValues = {
+  START: "start",
+  CENTER: "center"
+};
+
+// ../../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/FormBlock/src/FormBlock.styles.ts
+var formGroupClassNames = () => clsx_default("flex", "flex-col", "gap-2");
+var formRowClassNames = (fading, alignment) => clsx_default("flex", "flex-col", "gap-4", "sm:flex-row", "sm:items-start", "transition-[opacity,transform]", "duration-300", "ease-in-out", alignment === "center" && ["items-center", "sm:justify-center"], fading && ["opacity-0", "translate-y-5", "pointer-events-none"]);
+var inputWrapperClassNames = () => clsx_default("w-full", "md:max-w-56", "lg:max-w-64", "xl:max-w-72", "2xl:max-w-80");
+var noteClassNames = (alignment) => clsx_default("font-mono", "text-xs", "font-normal", "text-text-tertiary", "leading-[1.65]", "tracking-[0.12px]", alignment === "center" && "text-center");
+var successRowClassNames = (alignment) => clsx_default("success-row", "text-success", alignment === "center" && "text-center");
+
+// components/FormBlock/src/FormBlock.ts
+class FormBlock extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.alignment = formBlockAlignmentValues.START;
+    this.success = false;
+    this._fading = false;
+    this._showSuccess = false;
+    this._onFormSuccess = () => {
+      this.success = true;
+    };
+  }
+  static styles = [
+    Base.styles,
+    FormBlock_default,
+    css3`
+      .success-row {
+        animation: form-fade-in-up 0.35s ease both;
+      }
+      @keyframes form-fade-in-up {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `
+  ];
+  get _note() {
+    return this.querySelector('[slot="note"]');
+  }
+  get _successSlot() {
+    return this.querySelector('[slot="success"]');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("dsgn-form-success", this._onFormSuccess);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("dsgn-form-success", this._onFormSuccess);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    if (!changedProperties.has("success"))
+      return;
+    if (this.success && !this._showSuccess) {
+      this._fading = true;
+      setTimeout(() => {
+        this._fading = false;
+        this._showSuccess = true;
+      }, 300);
+    } else if (!this.success) {
+      this._fading = false;
+      this._showSuccess = false;
+    }
+  }
+  render() {
+    return html2`
+      <div class="${formGroupClassNames()}">
+        ${!this._showSuccess ? html2`
+              <div class="${formRowClassNames(this._fading, this.alignment)}">
+                <div class="${inputWrapperClassNames()}">
+                  <slot name="input"></slot>
+                </div>
+                <slot name="button"></slot>
+              </div>
+              ${this._note ? html2`<div class="${noteClassNames(this.alignment)}">
+                    <slot name="note"></slot>
+                  </div>` : nothing}
+            ` : nothing}
+        ${this._showSuccess && this._successSlot ? html2`<div class="${successRowClassNames(this.alignment)}">
+              <slot name="success"></slot>
+            </div>` : nothing}
+      </div>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], FormBlock.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, reflect: true })
+], FormBlock.prototype, "alignment", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], FormBlock.prototype, "success", undefined);
+__legacyDecorateClassTS([
+  state()
+], FormBlock.prototype, "_fading", undefined);
+__legacyDecorateClassTS([
+  state()
+], FormBlock.prototype, "_showSuccess", undefined);
+defineElement("dsgn-form-block", FormBlock);
+export {
+  FormBlock
+};

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

@@ -0,0 +1,5 @@
+export declare const formBlockAlignmentValues: {
+    readonly START: "start";
+    readonly CENTER: "center";
+};
+export type FormBlockAlignmentType = (typeof formBlockAlignmentValues)[keyof typeof formBlockAlignmentValues];

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

@@ -0,0 +1,8 @@
+// components/FormBlock/src/FormBlock.props.ts
+var formBlockAlignmentValues = {
+  START: "start",
+  CENTER: "center"
+};
+export {
+  formBlockAlignmentValues
+};

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

@@ -0,0 +1,6 @@
+import type { FormBlockAlignmentType } from './FormBlock.props.js';
+export declare const formGroupClassNames: () => string;
+export declare const formRowClassNames: (fading: boolean, alignment: FormBlockAlignmentType) => string;
+export declare const inputWrapperClassNames: () => string;
+export declare const noteClassNames: (alignment: FormBlockAlignmentType) => string;
+export declare const successRowClassNames: (alignment: FormBlockAlignmentType) => string;

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

@@ -0,0 +1,35 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type GridAlignType, type GridColsType, type GridGapType } from './Grid.props.js';
+/**
+ * @slot col-1 - First grid column.
+ * @slot col-2 - Second grid column.
+ * @slot col-3 - Third grid column when the selected layout provides one.
+ * @slot col-4 - Fourth grid column when the selected layout provides one.
+ */
+export declare class Grid extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Number of columns (all collapse to 1 on mobile, expand at lg)
+     */
+    cols: GridColsType;
+    /**
+     * Gap between grid cells
+     */
+    gap: GridGapType;
+    /**
+     * Cross-axis alignment of grid items
+     */
+    align: GridAlignType;
+    /**
+     * Reverses the visual column order at lg+ without changing DOM order
+     */
+    reverse: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-grid': Grid;
+    }
+}