handhold-sdk 1.0.0

package/src/ui/components/Button.css

@@ -0,0 +1,137 @@
+.handhold-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 2px solid transparent;
+  border-radius: 14px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  box-sizing: border-box;
+  text-decoration: none;
+  line-height: 1.5;
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.handhold-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Variants */
+
+.handhold-btn-primary {
+  background: var(--hh-primary);
+  color: var(--hh-primary-fg);
+  border-color: transparent;
+}
+.handhold-btn-primary:hover {
+  background: var(--hh-primary-dark);
+  transform: none;
+  box-shadow: none;
+}
+
+.handhold-btn-secondary {
+  background: transparent;
+  color: var(--hh-muted-fg);
+  border-color: transparent;
+}
+.handhold-btn-secondary:hover {
+  background: var(--hh-secondary);
+  color: var(--hh-fg);
+}
+
+.handhold-btn-success {
+  background: #FFFFFF;
+  color: #1e293b;
+  border-color: #e2e8f0;
+}
+.handhold-btn-success:hover {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+.handhold-btn-outline {
+  background: #FFFFFF;
+  border-color: var(--hh-border);
+  color: var(--hh-fg);
+}
+.handhold-btn-outline:hover {
+  border-color: var(--hh-primary);
+  color: var(--hh-primary);
+}
+
+.handhold-btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--hh-muted);
+}
+.handhold-btn-ghost:hover {
+  background: var(--hh-secondary);
+  color: var(--hh-fg);
+}
+
+.handhold-btn-fab {
+  border-radius: 50%;
+  background: var(--hh-bg);
+  color: var(--hh-fg);
+  border-color: var(--hh-border);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.handhold-btn-fab:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  color: var(--hh-primary);
+  border-color: var(--hh-primary);
+}
+
+/* Sizes */
+
+.handhold-btn-size-small {
+  padding: 8px 16px;
+  font-size: 13px;
+  border-radius: 12px;
+}
+
+.handhold-btn-size-medium {
+  padding: 12px 24px;
+  font-size: 14px;
+  border-radius: 14px;
+}
+
+.handhold-btn-size-large {
+  padding: 16px 32px;
+  font-size: 16px;
+  border-radius: 16px;
+}
+
+.handhold-btn-size-icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 6px;
+}
+
+.handhold-btn-size-icon-lg {
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  border-radius: 6px;
+}
+
+/* Inner Layout */
+.handhold-btn-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+  line-height: 1;
+}
+
+.handhold-btn-label.with-icon {
+  margin-left: 8px;
+}

package/src/ui/components/Button.js

@@ -0,0 +1,102 @@
+import './Button.css';
+
+export const ButtonVariant = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  SUCCESS: 'success',
+  OUTLINE: 'outline',
+  GHOST: 'ghost',
+  FAB: 'fab'
+};
+
+export const ButtonSize = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  ICON: 'icon',       // 32px square
+  ICON_LG: 'icon-lg'  // 56px square
+};
+
+export class Button {
+  /**
+   * Create a button component
+   * @param {Object} options
+   * @param {string} options.text - Button text
+   * @param {string} options.icon - Icon HTML (SVG or <i class="ph...">)
+   * @param {string} options.variant - ButtonVariant
+   * @param {string} options.size - ButtonSize
+   * @param {string} options.className - Additional classes
+   * @param {Object} options.attributes - HTML attributes (aria-label, data-*, etc.)
+   * @param {Function} options.onClick - Click handler (only if using create())
+   */
+  constructor({
+    text = '',
+    icon = null,
+    variant = ButtonVariant.PRIMARY,
+    size = ButtonSize.MEDIUM,
+    className = '',
+    attributes = {},
+    onClick = null
+  } = {}) {
+    this.text = text;
+    this.icon = icon;
+    this.variant = variant;
+    this.size = size;
+    this.className = className;
+    this.attributes = attributes;
+    this.onClick = onClick;
+  }
+
+  /**
+   * Render button as HTML string
+   * @returns {string}
+   */
+  render() {
+    const classNames = [
+      'handhold-btn',
+      `handhold-btn-${this.variant}`,
+      `handhold-btn-size-${this.size}`,
+      this.className
+    ].filter(Boolean).join(' ');
+
+    const attrs = Object.entries(this.attributes)
+      .map(([key, value]) => {
+        if (value === null || value === undefined) return '';
+        return `${key}="${value}"`;
+      })
+      .join(' ');
+
+    // Determine content layout
+    let content = '';
+    if (this.icon) {
+      content += `<span class="handhold-btn-icon-wrapper">${this.icon}</span>`;
+    }
+    if (this.text) {
+      // Add margin if icon exists
+      const textClass = this.icon ? 'handhold-btn-label with-icon' : 'handhold-btn-label';
+      content += `<span class="${textClass}">${this.text}</span>`;
+    }
+
+    return `
+      <button class="${classNames}" ${attrs}>
+        ${content}
+      </button>
+    `;
+  }
+
+  /**
+   * Create button as DOM Element
+   * @returns {HTMLButtonElement}
+   */
+  create() {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = this.render();
+    const button = wrapper.firstElementChild;
+    
+    if (this.onClick) {
+      button.addEventListener('click', this.onClick);
+    }
+    
+    return button;
+  }
+}