@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/CodeBlock/src/CodeBlock.js

@@ -0,0 +1,372 @@
+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;
+};
+
+// 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/CodeBlock/src/CodeBlock.ts
+import { html as html2 } from "lit";
+import { property } from "lit/decorators.js";
+
+// components/CodeBlock/src/CodeBlock.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;
+    --color-terminal-bg: var(--terminal-bg, #09090b);
+    --color-terminal-border: var(--terminal-border, #1a1a1a);
+    --color-terminal-dot-red: var(--terminal-dot-red, #ea580c);
+    --color-terminal-dot-yellow: var(--terminal-dot-yellow, #fbbf24);
+    --color-terminal-muted: var(--terminal-muted, #a1a1aa);
+    --color-terminal-success: var(--terminal-success, #34d399);
+    --color-terminal-text: var(--terminal-text, #e4e4e7);
+    --color-terminal-titlebar: var(--terminal-titlebar, #0d0d0f);
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .flex {
+    display: flex;
+  }
+  .h-\\[9px\\] {
+    height: 9px;
+  }
+  .w-\\[9px\\] {
+    width: 9px;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .gap-\\[6px\\] {
+    gap: 6px;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-\\[10px\\] {
+    border-radius: 10px;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-terminal-border {
+    border-color: var(--color-terminal-border);
+  }
+  .bg-terminal-bg {
+    background-color: var(--color-terminal-bg);
+  }
+  .bg-terminal-dot-red {
+    background-color: var(--color-terminal-dot-red);
+  }
+  .bg-terminal-dot-yellow {
+    background-color: var(--color-terminal-dot-yellow);
+  }
+  .bg-terminal-success {
+    background-color: var(--color-terminal-success);
+  }
+  .bg-terminal-titlebar {
+    background-color: var(--color-terminal-titlebar);
+  }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .px-\\[14px\\] {
+    padding-inline: 14px;
+  }
+  .py-\\[10px\\] {
+    padding-block: 10px;
+  }
+  .py-\\[18px\\] {
+    padding-block: 18px;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-\\[11px\\] {
+    font-size: 11px;
+  }
+  .text-\\[13px\\] {
+    font-size: 13px;
+  }
+  .leading-\\[1\\.7\\] {
+    --tw-leading: 1.7;
+    line-height: 1.7;
+  }
+  .tracking-\\[0\\.02em\\] {
+    --tw-tracking: 0.02em;
+    letter-spacing: 0.02em;
+  }
+  .whitespace-pre {
+    white-space: pre;
+  }
+  .text-terminal-muted {
+    color: var(--color-terminal-muted);
+  }
+  .text-terminal-success {
+    color: var(--color-terminal-success);
+  }
+  .text-terminal-text {
+    color: var(--color-terminal-text);
+  }
+  .opacity-70 {
+    opacity: 70%;
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@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-border-style: solid;
+      --tw-leading: initial;
+      --tw-tracking: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var CodeBlock_default = styles2;
+
+// components/CodeBlock/src/CodeBlock.props.ts
+var codeBlockDefaultPath = "~/project";
+
+// ../../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/CodeBlock/src/CodeBlock.styles.ts
+var classNames = () => clsx_default("overflow-hidden", "rounded-[10px]", "border", "border-terminal-border", "font-mono", "bg-terminal-bg");
+var titleBarClassNames = () => clsx_default("flex", "items-center", "gap-[6px]", "px-[14px]", "py-[10px]", "border-b", "border-terminal-border", "bg-terminal-titlebar");
+var dotClassNames = (color) => {
+  const colorMap = {
+    red: "bg-terminal-dot-red",
+    yellow: "bg-terminal-dot-yellow",
+    green: "bg-terminal-success"
+  };
+  return clsx_default("w-[9px]", "h-[9px]", "rounded-full", "opacity-70", "shrink-0", colorMap[color]);
+};
+var pathClassNames = () => clsx_default("ml-2", "text-[11px]", "text-terminal-muted", "tracking-[0.02em]");
+var bodyClassNames = () => clsx_default("m-0", "px-5", "py-[18px]", "text-[13px]", "leading-[1.7]", "text-terminal-text", "whitespace-pre", "font-mono");
+var promptClassNames = () => clsx_default("text-terminal-muted");
+var commandClassNames = () => clsx_default("text-terminal-text");
+var successClassNames = () => clsx_default("text-terminal-success");
+var readyClassNames = () => clsx_default("text-terminal-muted");
+
+// components/CodeBlock/src/CodeBlock.ts
+class CodeBlock extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.DARK;
+    this.command = "";
+    this.output = "";
+    this.path = codeBlockDefaultPath;
+  }
+  static styles = [Base.styles, CodeBlock_default];
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  render() {
+    return html2`
+      <div class="${classNames()}">
+        <div class="${titleBarClassNames()}">
+          <span class="${dotClassNames("red")}"></span>
+          <span class="${dotClassNames("yellow")}"></span>
+          <span class="${dotClassNames("green")}"></span>
+          <span class="${pathClassNames()}">${this.path}</span>
+        </div>
+        <pre
+          class="${bodyClassNames()}"
+        ><span class="${promptClassNames()}">$ </span><span class="${commandClassNames()}">${this.command}</span>
+<span class="${successClassNames()}">  ✓ ${this.output}</span>
+<span class="${readyClassNames()}">  → ready</span></pre>
+      </div>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], CodeBlock.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], CodeBlock.prototype, "command", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], CodeBlock.prototype, "output", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], CodeBlock.prototype, "path", undefined);
+defineElement("dsgn-code-block", CodeBlock);
+export {
+  CodeBlock
+};

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

@@ -0,0 +1 @@
+export declare const codeBlockDefaultPath = "~/project";

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

@@ -0,0 +1,5 @@
+// components/CodeBlock/src/CodeBlock.props.ts
+var codeBlockDefaultPath = "~/project";
+export {
+  codeBlockDefaultPath
+};

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

@@ -0,0 +1,9 @@
+export declare const classNames: () => string;
+export declare const titleBarClassNames: () => string;
+export declare const dotClassNames: (color: "red" | "yellow" | "green") => string;
+export declare const pathClassNames: () => string;
+export declare const bodyClassNames: () => string;
+export declare const promptClassNames: () => string;
+export declare const commandClassNames: () => string;
+export declare const successClassNames: () => string;
+export declare const readyClassNames: () => string;

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

@@ -0,0 +1,26 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type ContainerPaddingType, type ContainerSizeType } from './Container.props.js';
+/** @slot - Constrained page content. */
+export declare class Container extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Maximum width of the container
+     */
+    size: ContainerSizeType;
+    /**
+     * Horizontal padding (padding-inline)
+     */
+    paddingX: ContainerPaddingType;
+    /**
+     * Vertical padding (padding-block)
+     */
+    paddingY: ContainerPaddingType;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-container': Container;
+    }
+}