marz-ui 1.0.0

package/README.md

@@ -0,0 +1,288 @@
+# Marz UI
+
+Framework-agnostic UI components and design system built with Web Components.
+
+## Features
+
+- 🎨 **Complete Design System** - CSS tokens, typography, and theming
+- 🌐 **Framework Agnostic** - Works with React, Vue, Svelte, Angular, or vanilla JS
+- 🎯 **Web Components** - Standards-based Custom Elements
+- 🌓 **Dark Mode** - Built-in light/dark theme support
+- 📦 **Zero Dependencies** - Pure Web Components, no framework required
+- 💪 **TypeScript** - Full type definitions included
+
+## Installation
+
+```bash
+npm install @marz/ui
+```
+
+## Usage
+
+### Import All Components
+
+```typescript
+import '@marz/ui';
+import '@marz/ui/styles'; // Optional: Import styles separately
+```
+
+### Import Individual Components
+
+```typescript
+import '@marz/ui/button';
+import '@marz/ui/input';
+import '@marz/ui/sidepanel';
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants and sizes.
+
+```html
+<!-- Primary button -->
+<marz-button primary label="Click me"></marz-button>
+
+<!-- Secondary button -->
+<marz-button label="Cancel"></marz-button>
+
+<!-- Different sizes -->
+<marz-button size="small" label="Small"></marz-button>
+<marz-button size="medium" label="Medium"></marz-button>
+<marz-button size="large" label="Large"></marz-button>
+
+<!-- Custom background color -->
+<marz-button background-color="#ff0000" label="Custom"></marz-button>
+
+<!-- No outline -->
+<marz-button no-outline label="No Border"></marz-button>
+```
+
+**Props:**
+- `primary` (boolean) - Primary variant style
+- `size` (string) - Button size: 'small', 'medium', 'large'
+- `label` (string) - Button text
+- `background-color` (string) - Custom background color
+- `no-outline` (boolean) - Remove border
+- `disabled` (boolean) - Disable the button
+
+**Events:**
+- `click` - Fired when button is clicked
+
+### Input
+
+A labeled input component with multiple sizes.
+
+```html
+<!-- Basic input -->
+<marz-input label="Name" placeholder="Enter your name"></marz-input>
+
+<!-- Different sizes -->
+<marz-input size="small" label="Small Input"></marz-input>
+<marz-input size="medium" label="Medium Input"></marz-input>
+<marz-input size="large" label="Large Input"></marz-input>
+
+<!-- With value -->
+<marz-input label="Email" value="user@example.com"></marz-input>
+
+<!-- Different input types -->
+<marz-input label="Password" type="password"></marz-input>
+<marz-input label="Email" type="email"></marz-input>
+```
+
+**Props:**
+- `label` (string) - Input label text
+- `placeholder` (string) - Placeholder text
+- `value` (string) - Input value
+- `size` (string) - Input size: 'small', 'medium', 'large'
+- `type` (string) - Input type (text, password, email, etc.)
+- `disabled` (boolean) - Disable the input
+
+**Events:**
+- `change` - Fired when input value changes (detail: { value })
+
+### Sidepanel
+
+A modal sidepanel that slides in from the right.
+
+```html
+<marz-sidepanel id="myPanel" title="Settings">
+  <div slot="content">
+    <marz-input label="Name" placeholder="Your name"></marz-input>
+    <marz-input label="Email" placeholder="Your email"></marz-input>
+  </div>
+  <div slot="actions">
+    <marz-button label="Cancel"></marz-button>
+    <marz-button primary label="Save"></marz-button>
+  </div>
+</marz-sidepanel>
+
+<script>
+  const panel = document.getElementById('myPanel');
+
+  // Open the panel
+  panel.setAttribute('is-open', '');
+  // or
+  panel.isOpen = true;
+
+  // Close the panel
+  panel.removeAttribute('is-open');
+  // or
+  panel.isOpen = false;
+</script>
+```
+
+**Props:**
+- `is-open` (boolean) - Whether the panel is open
+- `title` (string) - Panel title
+
+**Slots:**
+- `content` - Main content area
+- `actions` - Action buttons area
+
+**Events:**
+- `close` - Fired when panel is closed
+
+## Framework Integration
+
+### React
+
+```tsx
+import '@marz/ui';
+
+function App() {
+  const handleClick = () => {
+    console.log('Button clicked!');
+  };
+
+  const handleChange = (e: CustomEvent) => {
+    console.log('Input value:', e.detail.value);
+  };
+
+  return (
+    <div>
+      <marz-button
+        primary
+        label="Click me"
+        onClick={handleClick}
+      />
+
+      <marz-input
+        label="Name"
+        placeholder="Enter name"
+        onChange={handleChange}
+      />
+    </div>
+  );
+}
+```
+
+### Vue
+
+```vue
+<template>
+  <div>
+    <marz-button
+      primary
+      label="Click me"
+      @click="handleClick"
+    />
+
+    <marz-input
+      label="Name"
+      placeholder="Enter name"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import '@marz/ui';
+
+const handleClick = () => {
+  console.log('Button clicked!');
+};
+
+const handleChange = (e) => {
+  console.log('Input value:', e.detail.value);
+};
+</script>
+```
+
+### Svelte
+
+```svelte
+<script>
+  import '@marz/ui';
+
+  function handleClick() {
+    console.log('Button clicked!');
+  }
+
+  function handleChange(e) {
+    console.log('Input value:', e.detail.value);
+  }
+</script>
+
+<marz-button primary label="Click me" on:click={handleClick} />
+<marz-input label="Name" placeholder="Enter name" on:change={handleChange} />
+```
+
+## Styling
+
+### Import Styles
+
+```typescript
+// Import all styles
+import '@marz/ui/styles';
+
+// Or import specific style files
+import '@marz/ui/styles/tokens';       // CSS variables only
+import '@marz/ui/styles/components';   // Component styles only
+```
+
+### CSS Variables
+
+Marz UI uses CSS custom properties for theming:
+
+```css
+:root {
+  /* Colors */
+  --bg: #f9fbfd;
+  --bg-element: rgba(0, 0, 0, 0.02);
+  --bg-element-2: rgba(0, 0, 0, 0.04);
+  --text: #3b3b3b;
+  --heading: #11324a;
+  --primary: #2b2b2b;
+  --secondary: #ababab;
+  --link: #3773E6;
+  --accent: #f7d706;
+
+  /* Spacing */
+  --small-padding: 12px;
+  --safe-padding: 16px;
+  --larger-padding: 24px;
+}
+```
+
+### Dark Mode
+
+Dark mode is automatically applied based on system preferences, or you can force it with a class:
+
+```html
+<body class="dark">
+  <!-- Your app -->
+</body>
+```
+
+## Browser Support
+
+- Chrome/Edge 67+
+- Firefox 63+
+- Safari 13.1+
+- All modern browsers with Web Components support
+
+## License
+
+MIT

package/dist/components/button/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Button Component Export
+ */
+export { MarzButton, type MarzButtonProps } from './button';
+//# sourceMappingURL=index.d.ts.map
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'marz-button': import('../components/button').MarzButton;
+        'marz-input': import('../components/input').MarzInput;
+        'marz-sidepanel': import('../components/sidepanel').MarzSidepanel;
+    }
+}
+

package/dist/components/button/index.js

@@ -0,0 +1,145 @@
+class s extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.button = document.createElement("button"), this.button.type = "button";
+    const t = document.createElement("style");
+    t.textContent = this.getStyles(), this.shadowRoot.appendChild(t), this.shadowRoot.appendChild(this.button), this.button.addEventListener("click", () => {
+      this.dispatchEvent(new Event("click", { bubbles: !0, composed: !0 }));
+    });
+  }
+  static get observedAttributes() {
+    return ["primary", "background-color", "size", "label", "no-outline", "disabled"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e, r) {
+    e !== r && this.render();
+  }
+  render() {
+    const t = this.hasAttribute("primary"), e = this.getAttribute("size") || "medium", r = this.getAttribute("label") || this.textContent || "", i = this.hasAttribute("no-outline"), o = this.getAttribute("background-color"), n = this.hasAttribute("disabled"), a = [
+      "marz-button",
+      `marz-button--${e}`,
+      t ? "marz-button--primary" : "marz-button--secondary",
+      i ? "marz-button--no-outline" : ""
+    ].filter(Boolean).join(" ");
+    this.button.className = a, this.button.textContent = r, this.button.disabled = n, o ? this.button.style.backgroundColor = o : this.button.style.backgroundColor = "";
+  }
+  getStyles() {
+    return `
+      :host {
+        display: inline-block;
+        width: 100%;
+      }
+
+      .marz-button {
+        display: inline-block;
+        cursor: pointer;
+        border: 0;
+        border-radius: 3em;
+        font-weight: 700;
+        line-height: 1;
+        font-family: 'Inter', sans-serif;
+        width: 100%;
+        transition: all 100ms;
+        box-sizing: border-box;
+      }
+
+      .marz-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .marz-button--primary {
+        border: var(--accent, #f7d706) 1px solid;
+        background-color: transparent;
+        color: var(--primary-btn-text, #3b3b3b);
+      }
+
+      .marz-button--primary:hover:not(:disabled) {
+        border: var(--accent, #f7d706) 1px solid;
+        background-color: var(--accent, #f7d706);
+        color: var(--primary-btn-text-hover, #3b3b3b);
+      }
+
+      .marz-button--secondary {
+        border: var(--secondary, #ababab) 1px solid;
+        background-color: transparent;
+        color: var(--text, #3b3b3b);
+      }
+
+      .marz-button--secondary:hover:not(:disabled) {
+        border: var(--primary, #2b2b2b) 1px solid;
+        background-color: var(--bg-element, rgba(0, 0, 0, 0.02));
+        color: var(--text, #3b3b3b);
+      }
+
+      .marz-button--secondary:active:not(:disabled) {
+        border: var(--primary, #2b2b2b) 1px solid;
+        background-color: var(--bg-element-2, rgba(0, 0, 0, 0.04));
+        color: var(--text, #3b3b3b);
+      }
+
+      .marz-button--small {
+        padding: 10px 10px;
+        font-size: 12px;
+        min-width: 32px;
+        height: 32px;
+      }
+
+      .marz-button--medium {
+        padding: 11px 20px;
+        font-size: 14px;
+      }
+
+      .marz-button--large {
+        padding: 12px 24px;
+        font-size: 16px;
+      }
+
+      .marz-button--no-outline {
+        border: none !important;
+      }
+
+      @media only screen and (min-width: 0) {
+        .marz-button {
+          max-width: 100%;
+        }
+      }
+
+      @media only screen and (min-width: 48em) {
+        .marz-button {
+          max-width: 300px;
+        }
+      }
+    `;
+  }
+  // Public API for programmatic control
+  get primary() {
+    return this.hasAttribute("primary");
+  }
+  set primary(t) {
+    t ? this.setAttribute("primary", "") : this.removeAttribute("primary");
+  }
+  get size() {
+    return this.getAttribute("size") || "medium";
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get label() {
+    return this.getAttribute("label") || "";
+  }
+  set label(t) {
+    this.setAttribute("label", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+}
+customElements.get("marz-button") || customElements.define("marz-button", s);
+export {
+  s as MarzButton
+};

package/dist/components/input/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Input Component Export
+ */
+export { MarzInput, type MarzInputProps } from './input';
+//# sourceMappingURL=index.d.ts.map
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'marz-button': import('../components/button').MarzButton;
+        'marz-input': import('../components/input').MarzInput;
+        'marz-sidepanel': import('../components/sidepanel').MarzSidepanel;
+    }
+}
+

package/dist/components/input/index.js

@@ -0,0 +1,148 @@
+class n extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.wrapper = document.createElement("div"), this.wrapper.className = "marz-input-wrapper", this.labelElement = document.createElement("label"), this.labelElement.className = "marz-input-label", this.input = document.createElement("input");
+    const t = document.createElement("style");
+    t.textContent = this.getStyles(), this.wrapper.appendChild(this.labelElement), this.wrapper.appendChild(this.input), this.shadowRoot.appendChild(t), this.shadowRoot.appendChild(this.wrapper), this.input.addEventListener("input", () => {
+      const e = this.input.value;
+      this.setAttribute("value", e), this.dispatchEvent(new CustomEvent("change", {
+        detail: { value: e },
+        bubbles: !0,
+        composed: !0
+      }));
+    }), ["focus", "blur", "keydown", "keyup"].forEach((e) => {
+      this.input.addEventListener(e, () => {
+        this.dispatchEvent(new Event(e, { bubbles: !0, composed: !0 }));
+      });
+    });
+  }
+  static get observedAttributes() {
+    return ["size", "label", "placeholder", "value", "disabled", "type"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && this.render();
+  }
+  render() {
+    const t = this.getAttribute("size") || "medium", e = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "", s = this.getAttribute("value") || "", a = this.hasAttribute("disabled"), r = this.getAttribute("type") || "text", l = [
+      "marz-input",
+      `marz-input--${t}`
+    ].join(" ");
+    this.input.className = l, this.input.placeholder = i, this.input.disabled = a, this.input.type = r, this.input.value !== s && (this.input.value = s), this.labelElement.textContent = e, this.labelElement.style.display = e ? "block" : "none";
+  }
+  getStyles() {
+    return `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .marz-input-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
+      }
+
+      .marz-input-label {
+        font-weight: 600;
+        font-size: 14px;
+        color: var(--text, #3b3b3b);
+        font-family: 'Inter', sans-serif;
+      }
+
+      .marz-input {
+        display: inline-block;
+        cursor: text;
+        border: 0;
+        border-radius: 1em;
+        font-weight: 500;
+        line-height: 1;
+        width: 100%;
+        transition: all 100ms;
+        background-color: var(--bg-element, rgba(0, 0, 0, 0.02));
+        color: var(--text, #3b3b3b);
+        border: var(--secondary, #ababab) 1px solid;
+        outline: none;
+        box-sizing: border-box;
+        font-family: 'Inter', sans-serif;
+      }
+
+      .marz-input:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .marz-input:focus,
+      .marz-input:active,
+      .marz-input:hover:not(:disabled) {
+        border: var(--primary, #2b2b2b) 1px solid;
+      }
+
+      .marz-input--small {
+        padding: 10px 8px;
+        font-size: 12px;
+      }
+
+      .marz-input--medium {
+        padding: 12px 12px;
+        font-size: 14px;
+      }
+
+      .marz-input--large {
+        padding: 16px 8px;
+        font-size: 16px;
+      }
+    `;
+  }
+  // Public API for programmatic control
+  get size() {
+    return this.getAttribute("size") || "medium";
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get label() {
+    return this.getAttribute("label") || "";
+  }
+  set label(t) {
+    this.setAttribute("label", t);
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") || "";
+  }
+  set placeholder(t) {
+    this.setAttribute("placeholder", t);
+  }
+  get value() {
+    return this.input.value;
+  }
+  set value(t) {
+    this.input.value = t, this.setAttribute("value", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get type() {
+    return this.getAttribute("type") || "text";
+  }
+  set type(t) {
+    this.setAttribute("type", t);
+  }
+  // Method to focus the input
+  focus() {
+    this.input.focus();
+  }
+  // Method to blur the input
+  blur() {
+    this.input.blur();
+  }
+}
+customElements.get("marz-input") || customElements.define("marz-input", n);
+export {
+  n as MarzInput
+};

package/dist/components/sidepanel/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Sidepanel Component Export
+ */
+export { MarzSidepanel, type MarzSidepanelProps } from './sidepanel';
+//# sourceMappingURL=index.d.ts.map
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'marz-button': import('../components/button').MarzButton;
+        'marz-input': import('../components/input').MarzInput;
+        'marz-sidepanel': import('../components/sidepanel').MarzSidepanel;
+    }
+}
+