@stacksjs/hello-world-stx 0.75.330 → 0.75.336

package/dist/stacks-desktop-icon.js

@@ -0,0 +1,114 @@
+import { StxElement, defineComponent } from './runtime.js';
+
+/** DesktopIcon web component generated from DesktopIcon.stx. */
+export class DesktopIcon extends StxElement {
+
+  render(__helpers) {
+    const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
+    const { id, icon = "\uD83D\uDCC4", label, type = "window", section = "", url = "", onclick, left = "20px", top = "20px", style = "" } = this._props();
+      let out = "";
+      out += `<button
+        class="desktop-icon"
+        data-icon-id="`;
+      out += __escape(id);
+      out += `"
+        data-icon-type="`;
+      out += __escape(type);
+      out += `"
+        data-icon-section="`;
+      out += __escape(section);
+      out += `"
+        data-icon-url="`;
+      out += __escape(url);
+      out += `"
+        style="`;
+      if (style) {
+        out += __escape(style);
+      } else {
+        out += "left: ";
+        out += __escape(left);
+        out += "; top: ";
+        out += __escape(top);
+        out += ";";
+      }
+      out += `"
+        `;
+      if (onclick) {
+        out += `
+        onclick="`;
+        out += __escape(onclick);
+        out += `"
+        `;
+      }
+      out += `>
+        <div class="desktop-icon-image">`;
+      out += __escape(icon);
+      out += `</div>
+        <div class="desktop-icon-label">`;
+      out += __escape(label);
+      out += `</div>
+      </button>`;
+      return out;
+  }
+
+}
+
+defineComponent(DesktopIcon, {
+  "tag": "stacks-desktop-icon",
+  "template": "<button\n    class=\"desktop-icon\"\n    data-icon-id=\"{{ id }}\"\n    data-icon-type=\"{{ type }}\"\n    data-icon-section=\"{{ section }}\"\n    data-icon-url=\"{{ url }}\"\n    style=\"@if(style){{ style }}@else left: {{ left }}; top: {{ top }};@endif\"\n    @if (onclick)\n    onclick=\"{{ onclick }}\"\n    @endif\n  >\n    <div class=\"desktop-icon-image\">{{ icon }}</div>\n    <div class=\"desktop-icon-label\">{{ label }}</div>\n  </button>",
+  "styles": "",
+  "shadowMode": false,
+  "progressive": true,
+  "properties": {
+    "id": {
+      "type": "string",
+      "reflect": true
+    },
+    "icon": {
+      "type": "string",
+      "default": "📄",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "reflect": true
+    },
+    "type": {
+      "type": "string",
+      "default": "window",
+      "reflect": true
+    },
+    "section": {
+      "type": "string",
+      "default": "",
+      "reflect": true
+    },
+    "url": {
+      "type": "string",
+      "default": "",
+      "reflect": true
+    },
+    "onclick": {
+      "type": "string",
+      "reflect": true
+    },
+    "left": {
+      "type": "string",
+      "default": "20px",
+      "reflect": true
+    },
+    "top": {
+      "type": "string",
+      "default": "20px",
+      "reflect": true
+    },
+    "style": {
+      "type": "string",
+      "default": "",
+      "reflect": true
+    }
+  },
+  "eventTypes": [],
+  "bindings": []
+});
+export default DesktopIcon;

package/dist/stacks-feature-button.d.ts

@@ -0,0 +1,26 @@
+export interface FeatureButtonProps {
+  label?: string
+  onclick?: string
+  active?: boolean
+}
+
+export interface FeatureButtonEventMap {
+
+}
+
+export interface FeatureButton extends Required<Pick<FeatureButtonProps, Exclude<keyof FeatureButtonProps, keyof HTMLElement>>> {}
+
+export declare class FeatureButton extends HTMLElement {
+
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "stacks-feature-button": FeatureButton
+  }
+}
+
+export default FeatureButton

package/dist/stacks-feature-button.js

@@ -0,0 +1,56 @@
+import { StxElement, defineComponent } from './runtime.js';
+
+/** FeatureButton web component generated from FeatureButton.stx. */
+export class FeatureButton extends StxElement {
+
+  render(__helpers) {
+    const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
+    const { label, onclick, active = false } = this._props();
+      let out = "";
+      out += `<button
+        class="feature-btn `;
+      if (active) {
+        out += "active";
+      }
+      out += `"
+        `;
+      if (onclick) {
+        out += 'onclick="';
+        out += __escape(onclick);
+        out += '"';
+      }
+      out += `>
+        `;
+      out += __escape(label);
+      out += `
+      </button>`;
+      return out;
+  }
+
+}
+
+defineComponent(FeatureButton, {
+  "tag": "stacks-feature-button",
+  "template": "<button\n    class=\"feature-btn @if (active)active@endif\"\n    @if (onclick)onclick=\"{{ onclick }}\"@endif\n  >\n    {{ label }}\n  </button>",
+  "styles": "",
+  "shadowMode": false,
+  "progressive": true,
+  "properties": {
+    "label": {
+      "type": "string",
+      "reflect": true
+    },
+    "onclick": {
+      "type": "string",
+      "reflect": true
+    },
+    "active": {
+      "type": "boolean",
+      "default": false,
+      "reflect": true
+    }
+  },
+  "eventTypes": [],
+  "bindings": []
+});
+export default FeatureButton;

package/dist/stacks-input-group.d.ts

@@ -0,0 +1,28 @@
+export interface InputGroupProps {
+  id?: string
+  label?: string
+  type?: string
+  placeholder?: string
+  class?: string
+}
+
+export interface InputGroupEventMap {
+
+}
+
+export interface InputGroup extends Required<Pick<InputGroupProps, Exclude<keyof InputGroupProps, keyof HTMLElement>>> {}
+
+export declare class InputGroup extends HTMLElement {
+
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "stacks-input-group": InputGroup
+  }
+}
+
+export default InputGroup

package/dist/stacks-input-group.js

@@ -0,0 +1,68 @@
+import { StxElement, defineComponent } from './runtime.js';
+
+/** InputGroup web component generated from InputGroup.stx. */
+export class InputGroup extends StxElement {
+
+  render(__helpers) {
+    const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
+    const { id, label, type = "text", placeholder = "", class: classList = "login-input" } = this._props();
+      let out = "";
+      out += `<div class="login-input-group">
+        <label>`;
+      out += __escape(label);
+      out += `:</label>
+        <input
+          type="`;
+      out += __escape(type);
+      out += `"
+          id="`;
+      out += __escape(id);
+      out += `"
+          class="`;
+      out += __escape(classList);
+      out += `"
+          placeholder="`;
+      out += __escape(placeholder);
+      out += `"
+        />
+      </div>`;
+      return out;
+  }
+
+}
+
+defineComponent(InputGroup, {
+  "tag": "stacks-input-group",
+  "template": "<div class=\"login-input-group\">\n    <label>{{ label }}:</label>\n    <input\n      type=\"{{ type }}\"\n      id=\"{{ id }}\"\n      class=\"{{ classList }}\"\n      placeholder=\"{{ placeholder }}\"\n    />\n  </div>",
+  "styles": "",
+  "shadowMode": false,
+  "progressive": true,
+  "properties": {
+    "id": {
+      "type": "string",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "reflect": true
+    },
+    "type": {
+      "type": "string",
+      "default": "text",
+      "reflect": true
+    },
+    "placeholder": {
+      "type": "string",
+      "default": "",
+      "reflect": true
+    },
+    "class": {
+      "type": "string",
+      "default": "login-input",
+      "reflect": true
+    }
+  },
+  "eventTypes": [],
+  "bindings": []
+});
+export default InputGroup;

package/dist/stacks-login-form.d.ts

@@ -0,0 +1,28 @@
+export interface LoginFormProps {
+  id?: string
+  icon?: string
+  title?: string
+  prompt?: string
+  submitHandler?: string
+}
+
+export interface LoginFormEventMap {
+
+}
+
+export interface LoginForm extends Required<Pick<LoginFormProps, Exclude<keyof LoginFormProps, keyof HTMLElement>>> {}
+
+export declare class LoginForm extends HTMLElement {
+
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "stacks-login-form": LoginForm
+  }
+}
+
+export default LoginForm

package/dist/stacks-login-form.js

@@ -0,0 +1,85 @@
+import { StxElement, defineComponent } from './runtime.js';
+
+/** LoginForm web component generated from LoginForm.stx. */
+export class LoginForm extends StxElement {
+
+  render(__helpers) {
+    const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
+    const { id, icon = "\uD83D\uDC64", title = "Login", prompt = "Enter your credentials", submitHandler = "handleLogin()" } = this._props();
+      let out = "";
+      out += '<div id="';
+      out += __escape(id);
+      out += `" class="hidden login-form">
+        <div class="login-form-background">
+          <div class="login-form-container">
+            <button class="login-close-btn" onclick="closeLoginScreens()">×</button>
+            <div class="login-form-header">
+              <button class="login-back-button" onclick="hideLoginForms()">← Back</button>
+              <div class="login-form-title">
+                <div class="login-form-icon">`;
+      out += __escape(icon);
+      out += `</div>
+                <h2>`;
+      out += __escape(title);
+      out += `</h2>
+              </div>
+            </div>
+
+            <div class="login-form-content">
+              <div class="login-form-prompt">`;
+      out += __escape(prompt);
+      out += `</div>
+              <slot />
+              <div class="login-actions">
+                <button class="login-submit-btn" onclick="`;
+      out += __escape(submitHandler);
+      out += `">
+                  <span class="login-btn-icon">→</span>
+                  <span>Log In</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>`;
+      return out;
+  }
+
+}
+
+defineComponent(LoginForm, {
+  "tag": "stacks-login-form",
+  "template": "<div id=\"{{ id }}\" class=\"hidden login-form\">\n    <div class=\"login-form-background\">\n      <div class=\"login-form-container\">\n        <button class=\"login-close-btn\" onclick=\"closeLoginScreens()\">×</button>\n        <div class=\"login-form-header\">\n          <button class=\"login-back-button\" onclick=\"hideLoginForms()\">← Back</button>\n          <div class=\"login-form-title\">\n            <div class=\"login-form-icon\">{{ icon }}</div>\n            <h2>{{ title }}</h2>\n          </div>\n        </div>\n\n        <div class=\"login-form-content\">\n          <div class=\"login-form-prompt\">{{ prompt }}</div>\n          <slot />\n          <div class=\"login-actions\">\n            <button class=\"login-submit-btn\" onclick=\"{{ submitHandler }}\">\n              <span class=\"login-btn-icon\">→</span>\n              <span>Log In</span>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>",
+  "styles": "",
+  "shadowMode": false,
+  "progressive": true,
+  "properties": {
+    "id": {
+      "type": "string",
+      "reflect": true
+    },
+    "icon": {
+      "type": "string",
+      "default": "👤",
+      "reflect": true
+    },
+    "title": {
+      "type": "string",
+      "default": "Login",
+      "reflect": true
+    },
+    "prompt": {
+      "type": "string",
+      "default": "Enter your credentials",
+      "reflect": true
+    },
+    "submitHandler": {
+      "type": "string",
+      "default": "handleLogin()",
+      "reflect": true
+    }
+  },
+  "eventTypes": [],
+  "bindings": []
+});
+export default LoginForm;

package/dist/stacks-login-screen.d.ts

@@ -0,0 +1,26 @@
+export interface LoginScreenProps {
+  id?: string
+  logoText?: string
+  subtitle?: string
+}
+
+export interface LoginScreenEventMap {
+
+}
+
+export interface LoginScreen extends Required<Pick<LoginScreenProps, Exclude<keyof LoginScreenProps, keyof HTMLElement>>> {}
+
+export declare class LoginScreen extends HTMLElement {
+
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "stacks-login-screen": LoginScreen
+  }
+}
+
+export default LoginScreen

package/dist/stacks-login-screen.js

@@ -0,0 +1,77 @@
+import { StxElement, defineComponent } from './runtime.js';
+
+/** LoginScreen web component generated from LoginScreen.stx. */
+export class LoginScreen extends StxElement {
+
+  render(__helpers) {
+    const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
+    const { id = "login-screen", logoText = "STACKS", subtitle = "To begin, click your user name" } = this._props();
+      let out = "";
+      out += '<div id="';
+      out += __escape(id);
+      out += `" class="hidden login-screen">
+        <div class="login-background">
+          <div class="login-container">
+            <button class="login-close-btn" onclick="closeLoginScreens()">×</button>
+            <div class="login-header">
+              <div class="login-logo">`;
+      out += __escape(logoText);
+      out += `</div>
+              <div class="login-subtitle">`;
+      out += __escape(subtitle);
+      out += `</div>
+            </div>
+
+            <div class="login-users">
+              <slot name="login-options">
+                <button class="login-user-button" id="email-login-btn">
+                  <div class="login-user-icon">\uD83D\uDC64</div>
+                  <div class="login-user-name">Email Login</div>
+                </button>
+                <button class="login-user-button" id="license-login-btn">
+                  <div class="login-user-icon">\uD83D\uDD11</div>
+                  <div class="login-user-name">License Key</div>
+                </button>
+              </slot>
+            </div>
+
+            <div class="login-footer">
+              <slot name="footer">
+                <div class="login-footer-text">After you log in, you can access the STACKS Desktop</div>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>`;
+      return out;
+  }
+
+}
+
+defineComponent(LoginScreen, {
+  "tag": "stacks-login-screen",
+  "template": "<div id=\"{{ id }}\" class=\"hidden login-screen\">\n    <div class=\"login-background\">\n      <div class=\"login-container\">\n        <button class=\"login-close-btn\" onclick=\"closeLoginScreens()\">×</button>\n        <div class=\"login-header\">\n          <div class=\"login-logo\">{{ logoText }}</div>\n          <div class=\"login-subtitle\">{{ subtitle }}</div>\n        </div>\n\n        <div class=\"login-users\">\n          <slot name=\"login-options\">\n            <button class=\"login-user-button\" id=\"email-login-btn\">\n              <div class=\"login-user-icon\">👤</div>\n              <div class=\"login-user-name\">Email Login</div>\n            </button>\n            <button class=\"login-user-button\" id=\"license-login-btn\">\n              <div class=\"login-user-icon\">🔑</div>\n              <div class=\"login-user-name\">License Key</div>\n            </button>\n          </slot>\n        </div>\n\n        <div class=\"login-footer\">\n          <slot name=\"footer\">\n            <div class=\"login-footer-text\">After you log in, you can access the STACKS Desktop</div>\n          </slot>\n        </div>\n      </div>\n    </div>\n  </div>",
+  "styles": "",
+  "shadowMode": false,
+  "progressive": true,
+  "properties": {
+    "id": {
+      "type": "string",
+      "default": "login-screen",
+      "reflect": true
+    },
+    "logoText": {
+      "type": "string",
+      "default": "STACKS",
+      "reflect": true
+    },
+    "subtitle": {
+      "type": "string",
+      "default": "To begin, click your user name",
+      "reflect": true
+    }
+  },
+  "eventTypes": [],
+  "bindings": []
+});
+export default LoginScreen;

package/dist/stacks-notification-popup.d.ts

@@ -0,0 +1,26 @@
+export interface NotificationPopupProps {
+  id?: string
+  title?: string
+  showSignup?: boolean
+}
+
+export interface NotificationPopupEventMap {
+
+}
+
+export interface NotificationPopup extends Required<Pick<NotificationPopupProps, Exclude<keyof NotificationPopupProps, keyof HTMLElement>>> {}
+
+export declare class NotificationPopup extends HTMLElement {
+
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "stacks-notification-popup": NotificationPopup
+  }
+}
+
+export default NotificationPopup

package/dist/stacks-notification-popup.js

@@ -0,0 +1,85 @@
+import { StxElement, defineComponent } from './runtime.js';
+
+/** NotificationPopup web component generated from NotificationPopup.stx. */
+export class NotificationPopup extends StxElement {
+
+  render(__helpers) {
+    const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
+    const { id = "notification-popup", title = "Notifications", showSignup = true } = this._props();
+      let out = "";
+      out += '<div class="notification-popup" id="';
+      out += __escape(id);
+      out += `" style="display: none;">
+        <div class="notification-header">
+          <span class="notification-title">`;
+      out += __escape(title);
+      out += `</span>
+          <button class="notification-close" onclick="closeNotificationPopup()">×</button>
+        </div>
+        <div class="notification-content">
+          <slot />
+        </div>
+        `;
+      if (showSignup) {
+        out += `
+        <div class="notification-signup" id="notification-signup">
+          <div class="notification-separator"></div>
+          <div class="notification-signup-text">Get updates on new features & releases:</div>
+          <div class="notification-signup-form">
+            <input
+              type="email"
+              id="notification-email"
+              class="notification-email-input"
+              placeholder="your@email.com"
+              autocomplete="email"
+            />
+            <button class="notification-signup-btn" onclick="handleEmailSignup()">
+              Sign Up
+            </button>
+          </div>
+        </div>
+        <div class="notification-success" id="notification-success" style="display: none;">
+          <div class="notification-separator"></div>
+          <div class="notification-success-content">
+            <div class="notification-success-icon">✓</div>
+            <div class="notification-success-text">
+              <div class="notification-success-title">Thanks for subscribing!</div>
+              <div class="notification-success-subtitle">We'll keep you updated.</div>
+            </div>
+          </div>
+        </div>
+        `;
+      }
+      out += "</div>";
+      return out;
+  }
+
+}
+
+defineComponent(NotificationPopup, {
+  "tag": "stacks-notification-popup",
+  "template": "<div class=\"notification-popup\" id=\"{{ id }}\" style=\"display: none;\">\n    <div class=\"notification-header\">\n      <span class=\"notification-title\">{{ title }}</span>\n      <button class=\"notification-close\" onclick=\"closeNotificationPopup()\">×</button>\n    </div>\n    <div class=\"notification-content\">\n      <slot />\n    </div>\n    @if (showSignup)\n    <div class=\"notification-signup\" id=\"notification-signup\">\n      <div class=\"notification-separator\"></div>\n      <div class=\"notification-signup-text\">Get updates on new features & releases:</div>\n      <div class=\"notification-signup-form\">\n        <input\n          type=\"email\"\n          id=\"notification-email\"\n          class=\"notification-email-input\"\n          placeholder=\"your@email.com\"\n          autocomplete=\"email\"\n        />\n        <button class=\"notification-signup-btn\" onclick=\"handleEmailSignup()\">\n          Sign Up\n        </button>\n      </div>\n    </div>\n    <div class=\"notification-success\" id=\"notification-success\" style=\"display: none;\">\n      <div class=\"notification-separator\"></div>\n      <div class=\"notification-success-content\">\n        <div class=\"notification-success-icon\">✓</div>\n        <div class=\"notification-success-text\">\n          <div class=\"notification-success-title\">Thanks for subscribing!</div>\n          <div class=\"notification-success-subtitle\">We'll keep you updated.</div>\n        </div>\n      </div>\n    </div>\n    @endif\n  </div>",
+  "styles": "",
+  "shadowMode": false,
+  "progressive": true,
+  "properties": {
+    "id": {
+      "type": "string",
+      "default": "notification-popup",
+      "reflect": true
+    },
+    "title": {
+      "type": "string",
+      "default": "Notifications",
+      "reflect": true
+    },
+    "showSignup": {
+      "type": "boolean",
+      "default": true,
+      "reflect": true
+    }
+  },
+  "eventTypes": [],
+  "bindings": []
+});
+export default NotificationPopup;

package/dist/stacks-package-item.d.ts

@@ -0,0 +1,26 @@
+export interface PackageItemProps {
+  emoji?: string
+  title?: string
+  description?: string
+}
+
+export interface PackageItemEventMap {
+
+}
+
+export interface PackageItem extends Required<Pick<PackageItemProps, Exclude<keyof PackageItemProps, keyof HTMLElement>>> {}
+
+export declare class PackageItem extends HTMLElement {
+
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "stacks-package-item": PackageItem
+  }
+}
+
+export default PackageItem