@ktbsh/ui 0.1.0

package/dist/vanilla/toast.src.js

@@ -0,0 +1,245 @@
+
+import { render, html } from 'uhtml';
+
+const sheet = new CSSStyleSheet();
+sheet.replaceSync(":host {\n--kb-color-bg-canvas: #ffffff;\n--kb-color-bg-surface: #f6f8fa;\n--kb-color-bg-subtle: #eef1f4;\n--kb-color-bg-inverse: #1f2328;\n--kb-color-fg-default: #1f2328;\n--kb-color-fg-muted: #656d76;\n--kb-color-fg-subtle: #8c959f;\n--kb-color-fg-on-accent: #ffffff;\n--kb-color-fg-on-inverse: #ffffff;\n--kb-color-border-default: #d0d7de;\n--kb-color-border-muted: #e6ebf0;\n--kb-color-border-focus: #0969da;\n--kb-color-accent-default: #0969da;\n--kb-color-accent-hover: #0860ca;\n--kb-color-accent-subtle: #ddf4ff;\n--kb-color-danger-default: #cf222e;\n--kb-color-danger-subtle: #ffebe9;\n--kb-color-success-default: #1a7f37;\n--kb-color-success-subtle: #dafbe1;\n--kb-color-warning-default: #9a6700;\n--kb-color-warning-subtle: #fff8c5;\n--kb-space-2xs: 2px;\n--kb-space-xs: 4px;\n--kb-space-sm: 8px;\n--kb-space-md: 16px;\n--kb-space-lg: 24px;\n--kb-space-xl: 32px;\n--kb-space-2xl: 48px;\n--kb-radius-sm: 4px;\n--kb-radius-md: 8px;\n--kb-radius-lg: 12px;\n--kb-radius-full: 9999px;\n--kb-font-family-sans: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n--kb-font-size-sm: 0.875rem;\n--kb-font-size-md: 1rem;\n--kb-font-size-lg: 1.125rem;\n--kb-font-size-xl: 1.25rem;\n--kb-font-weight-regular: 400;\n--kb-font-weight-medium: 500;\n--kb-font-weight-semibold: 600;\n--kb-line-height-tight: 1.25;\n--kb-line-height-normal: 1.5;\n--kb-shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08);\n--kb-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1);\n--kb-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.35);\n}\n\n\n    :host {\n      font-family: var(--kb-font-family-sans);\n    }\n    :host(:not([open])) {\n      display: none;\n    }\n    :host([open]) {\n      display: block;\n      position: fixed;\n      z-index: 1100;\n      right: var(--kb-space-lg);\n      bottom: var(--kb-space-lg);\n      max-width: min(24rem, calc(100vw - 2 * var(--kb-space-lg)));\n      box-sizing: border-box;\n    }\n    .root {\n      display: flex;\n      gap: var(--kb-space-md);\n      align-items: flex-start;\n      box-sizing: border-box;\n      padding: var(--kb-space-md);\n      border-radius: var(--kb-radius-md);\n      border: 1px solid var(--kb-color-border-default);\n      box-shadow: var(--kb-shadow-md);\n      background: var(--kb-color-bg-canvas);\n      color: var(--kb-color-fg-default);\n      font-size: var(--kb-font-size-md);\n      line-height: var(--kb-line-height-normal);\n    }\n    .info { border-color: var(--kb-color-accent-default); }\n    .success { border-color: var(--kb-color-success-default); }\n    .warning { border-color: var(--kb-color-warning-default); }\n    .danger { border-color: var(--kb-color-danger-default); }\n    .body { flex: 1; min-width: 0; }\n    .title {\n      margin: 0 0 var(--kb-space-2xs);\n      font-weight: var(--kb-font-weight-semibold);\n    }\n    .close {\n      flex-shrink: 0;\n      min-width: 2rem;\n      min-height: 2rem;\n      border: none;\n      border-radius: var(--kb-radius-sm);\n      background: transparent;\n      color: inherit;\n      cursor: pointer;\n      font-size: var(--kb-font-size-lg);\n      line-height: 1;\n      font-family: inherit;\n    }\n    .close:focus-visible {\n      outline: none;\n      box-shadow: var(--kb-focus-ring);\n    }\n  ");
+
+export class KitbashToast extends HTMLElement {
+  
+  static get observedAttributes() {
+    return ["open","tone","title"];
+  }
+  
+  static get propTypes() {
+    return {"open":"Boolean","tone":"String","title":"String"};
+  }
+
+
+  get open() {
+    return this._props['open'];
+  }
+  set open(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('open', val);
+    this.update();
+  }
+
+  get tone() {
+    return this._props['tone'];
+  }
+  set tone(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('tone', val);
+    this.update();
+  }
+
+  get title() {
+    return this._props['title'];
+  }
+  set title(val) {
+    // External / framework property writes: re-render, do not emit kitbash-change
+    // (caller already knows the value they set).
+    this._assignProp('title', val);
+    this.update();
+  }
+
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open', delegatesFocus: false });
+    
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+    
+    this._defaults = {"open":false,"tone":"info","title":""};
+    
+    this._state = {};
+    this._props = { ...this._defaults };
+    this._eventHandlers = { 'click .close': function(_e, { commit }) {
+      commit({ props: { open: !1 } });
+    } };
+    this._eventCleanup = [];
+    this._renderFn = function({ props, html }) {
+    const tone = props.tone === "success" || props.tone === "warning" || props.tone === "danger" ? props.tone : "info", role = tone === "danger" || tone === "warning" ? "alert" : "status", title = typeof props.title === "string" && props.title.length > 0 ? props.title : "";
+    return html`
+      <div part="toast-root" class=${`root ${tone}`} role=${role}>
+        <div class="body" part="toast-body">
+          ${title ? html`<div class="title" part="toast-title">${title}</div>` : null}
+          <div part="toast-content"><slot></slot></div>
+        </div>
+        <button
+          type="button"
+          class="close"
+          part="toast-close"
+          aria-label="Dismiss notification"
+        >
+          \u00D7
+        </button>
+      </div>
+    `;
+  };
+    this._reflecting = false;
+  }
+
+  connectedCallback() {
+    // Initial attribute values are parsed by attributeChangedCallback before connectedCallback fires
+    this.update();
+    
+  }
+
+  disconnectedCallback() {
+    this.cleanupEvents();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // Skip when we caused the attribute write ourselves (avoids double update)
+    if (this._reflecting) return;
+    if (oldValue === newValue) return;
+
+    const type = this.constructor.propTypes[name];
+    
+    let parsedValue = newValue;
+    if (newValue === null || newValue === undefined) {
+      parsedValue = this._defaults[name];
+    } else if (type === 'Number' && newValue !== '') {
+      // Match property coercion: empty string is not Number('') → 0
+      parsedValue = Number(newValue);
+    } else if (type === 'Boolean') {
+      parsedValue = newValue !== null && newValue !== 'false';
+    }
+    
+    this._props[name] = parsedValue;
+    
+    this.update();
+  }
+
+  /** Coerce + reflect a single prop; no re-render (caller decides). */
+  _assignProp(key, val) {
+    const type = this.constructor.propTypes[key];
+    let next = val;
+    if (type === 'Boolean') {
+      next = val === true || val === '';
+    } else if (type === 'Number' && val !== null && val !== undefined && val !== '') {
+      next = Number(val);
+    }
+    this._props[key] = next;
+
+    // Only reflect primitives — objects/arrays stay as properties (no [object Object] attrs)
+    const isPrimitive =
+      next === null ||
+      next === undefined ||
+      typeof next === 'string' ||
+      typeof next === 'number' ||
+      typeof next === 'boolean';
+
+    this._reflecting = true;
+    try {
+      if (type === 'Boolean') {
+        if (next) this.setAttribute(key, '');
+        else this.removeAttribute(key);
+      } else if (!isPrimitive) {
+        // property-only; drop stale attribute if any
+        this.removeAttribute(key);
+      } else if (next === null || next === undefined) {
+        this.removeAttribute(key);
+      } else {
+        this.setAttribute(key, String(next));
+      }
+    } finally {
+      this._reflecting = false;
+    }
+    
+  }
+
+  _emitChange() {
+    // Shallow-copy both bags so listeners cannot mutate internal state/props via event.detail
+    this.dispatchEvent(new CustomEvent('kitbash-change', {
+      detail: {
+        state: { ...this._state },
+        props: { ...this._props },
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /**
+   * Batch props and/or state: one uhtml update, one kitbash-change.
+   * Prefer this in event handlers (e.g. controlled inputs).
+   */
+  commit(patch) {
+    const p = patch || {};
+    if (p.props) {
+      const allowed = this.constructor.propTypes || {};
+      for (const key of Object.keys(p.props)) {
+        // Only declared props — ignore typos / stray keys
+        if (!Object.prototype.hasOwnProperty.call(allowed, key)) continue;
+        this._assignProp(key, p.props[key]);
+      }
+    }
+    if (p.state) {
+      this._state = { ...this._state, ...p.state };
+    }
+    this.update();
+    this._emitChange();
+  }
+
+  setState(newState) {
+    this.commit({ state: newState });
+  }
+
+  setProps(nextProps) {
+    this.commit({ props: nextProps });
+  }
+
+  _handlerCtx() {
+    // Snapshots so handlers/render cannot mutate internal bags by accident
+    return {
+      props: { ...this._props },
+      state: { ...this._state },
+      setState: this.setState.bind(this),
+      setProps: this.setProps.bind(this),
+      commit: this.commit.bind(this),
+    };
+  }
+  
+  cleanupEvents() {
+    this._eventCleanup.forEach(cleanup => cleanup());
+    this._eventCleanup = [];
+  }
+
+  update() {
+    // Run the uhtml DOM diffing render cycle
+    render(this.shadowRoot, this._renderFn({ 
+      ...this._handlerCtx(),
+      html 
+    }));
+    this.cleanupEvents();
+    this.bindEvents();
+    
+  }
+
+
+
+  bindEvents() {
+    Object.keys(this._eventHandlers).forEach(eventSelector => {
+      const parts = eventSelector.split(' ');
+      const eventName = parts[0];
+      const selector = parts.slice(1).join(' ');
+      
+      const targets = selector ? this.shadowRoot.querySelectorAll(selector) : [this];
+      targets.forEach(target => {
+        const handler = (e) => {
+          this._eventHandlers[eventSelector](e, this._handlerCtx());
+        };
+        target.addEventListener(eventName, handler);
+        this._eventCleanup.push(() => target.removeEventListener(eventName, handler));
+      });
+    });
+  }
+}
+
+if (!customElements.get('kitbash-toast')) {
+  customElements.define('kitbash-toast', KitbashToast);
+}

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@ktbsh/ui",
+  "version": "0.1.0",
+  "description": "Framework-agnostic design system components built with @ktbsh/sdk (vanilla CE + React wrappers).",
+  "type": "module",
+  "license": "MIT",
+  "engines": {
+    "bun": ">=1.3.14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dandrok/kitbash-ui.git"
+  },
+  "homepage": "https://github.com/dandrok/kitbash-ui#readme",
+  "bugs": {
+    "url": "https://github.com/dandrok/kitbash-ui/issues"
+  },
+  "keywords": [
+    "kitbash",
+    "design-system",
+    "web-components",
+    "custom-elements",
+    "react",
+    "typescript",
+    "astro",
+    "svelte"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "./dist/vanilla/**/*.js"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./custom-elements.json": "./dist/custom-elements.json",
+    "./vanilla/*": {
+      "types": "./dist/vanilla/*.d.ts",
+      "import": "./dist/vanilla/*.js",
+      "default": "./dist/vanilla/*.js"
+    },
+    "./react/*": {
+      "types": "./dist/react/*.d.ts",
+      "import": "./dist/react/*.js",
+      "default": "./dist/react/*.js"
+    },
+    "./themes/*": "./dist/themes/*",
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js",
+      "default": "./dist/tokens/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js",
+      "default": "./dist/types/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "tokens:build": "bun run scripts/tokens.ts build",
+    "tokens:check": "bun run scripts/tokens.ts check",
+    "package:entries": "bun run scripts/package-entries.ts",
+    "build": "bun run tokens:check && kitbash build && bun run package:entries",
+    "dev": "kitbash dev",
+    "format": "biome format --write .",
+    "lint": "biome lint .",
+    "check": "biome check --write .",
+    "ci": "biome ci .",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "verify": "bun run tokens:check && bun run ci && bun run typecheck && bun run build && bun run test && bun run build-storybook",
+    "prepack": "bun run build",
+    "pack:dry": "npm pack --dry-run"
+  },
+  "dependencies": {
+    "@ktbsh/sdk": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.5.4",
+    "@storybook/addon-a11y": "10.5.2",
+    "@storybook/addon-docs": "10.5.2",
+    "@storybook/web-components-vite": "10.5.2",
+    "@types/bun": "1.3.9",
+    "lit": "3.3.1",
+    "storybook": "10.5.2",
+    "typescript": "5.9.3",
+    "vite": "6.3.5"
+  }
+}