zabi-components 1.0.11 → 2.0.2

package/README.md

@@ -4,7 +4,7 @@ A clean, minimal Svelte component library built with TypeScript and Tailwind CSS
 
 ## Philosophy
 
-**Clean & Simple**: No unnecessary complexity, just clean components that focus on what matters most. Every component is designed to be intuitive, accessible, and performant.
+**Clean & Simple**: No unnecessary complexity, just clean components that focus on what matters most. Every component is designed to be intuitive, accessible, and performant. We've simplified everything to use modern CSS and minimal JavaScript.
 
 ## Features
 
@@ -12,11 +12,12 @@ A clean, minimal Svelte component library built with TypeScript and Tailwind CSS
 - 🎨 **Tailwind CSS Integration** - Built with Tailwind CSS for consistent styling
 - ♿ **Accessibility First** - ARIA compliant components with keyboard navigation support
 - 📱 **Responsive Design** - Mobile-first approach with responsive utilities
-- 🎭 **Dark Mode Support** - Built-in dark mode support with CSS custom properties
-- 🧩 **Clean API** - Simple, intuitive component APIs
+- 🧩 **Clean API** - Simple, intuitive component APIs with minimal props
 - 📦 **Tree Shakeable** - Import only what you need
 - ✅ **Production Ready** - Fully tested and optimized for production use
-- 🚀 **Modern CSS** - Uses modern CSS features like Container Queries and CSS Grid
+- 🚀 **Modern CSS** - CSS-only positioning, animations, and interactions
+- ⚡ **Lightweight** - 60-80% less code than traditional component libraries
+- 🎭 **Emoji Icons** - Simple emoji-based icons instead of complex SVG libraries
 
 ## Installation
 
@@ -114,26 +115,35 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
 
 | Component | Category | Description | Key Features |
 |-----------|----------|-------------|--------------|
-| **Card** | Atom | Clean card container | Interactive, elevated variants, semantic HTML |
-| **Form** | Molecule | Simple form wrapper | FormData handling, validation support |
-| **Layout** | Molecule | Page layout system | Header, main, footer slots, responsive |
-| **Navigation** | Organism | Clean navigation | Header/sidebar variants, keyboard nav |
-| **Button** | Atom | Action button | Multiple variants, loading states |
-| **Input** | Atom | Form input | Validation, error states, accessibility |
-| **Badge** | Atom | Status indicator | Color variants, closable |
-| **Alert** | Molecule | Notification | Dismissible, multiple variants |
-| **Modal** | Molecule | Overlay dialog | Focus trap, keyboard navigation |
-| **Tabs** | Molecule | Tab navigation | Keyboard navigation, ARIA compliant |
-
-### Advanced Components
+| **Card** | Atom | Clean card container | Simple, interactive, image support |
+| **Form** | Molecule | Simple form wrapper | FormData handling, clean API |
+| **Layout** | Molecule | Page layout system | Header, main, footer slots |
+| **Navigation** | Organism | Clean navigation | Header/sidebar variants, active state |
+| **Button** | Atom | Action button | 3 variants (primary, secondary, danger) |
+| **Input** | Atom | Form input | Essential props, accessibility |
+| **Badge** | Atom | Status indicator | 5 color variants, closable |
+| **Modal** | Molecule | Overlay dialog | Simple backdrop, close button |
+| **Tabs** | Molecule | Tab navigation | Keyboard navigation, 2 variants |
+| **Dropdown** | Molecule | Dropdown menu | CSS-only positioning |
+| **ImageUpload** | Molecule | File upload | Direct selection, preview |
+| **Navbar** | Organism | Navigation bar | Mobile menu, responsive |
+
+### Simplified Components
 
 | Component | Category | Description | Key Features |
 |-----------|----------|-------------|--------------|
-| **KeyValueForm** | Molecule | Dynamic form builder | Field types, validation, TypeScript |
-| **ImageUpload** | Molecule | File upload | Drag & drop, preview, validation |
-| **Dropdown** | Molecule | Select dropdown | Search, keyboard navigation |
-| **ToastManager** | Organism | Toast notifications | Queue management, positioning |
-| **Navbar** | Organism | Navigation bar | Mobile menu, responsive |
+| **Checkbox** | Atom | Checkbox input | Simple on/off state |
+| **Select** | Atom | Dropdown select | Basic options support |
+| **Textarea** | Atom | Multi-line input | Essential configuration |
+| **Toggle** | Atom | Toggle switch | Fixed size, simple state |
+| **Progress** | Atom | Progress bar | Percentage display |
+| **Heading** | Atom | Text headings | 6 levels, clean styling |
+| **ThemeToggle** | Atom | Theme switcher | Emoji-based, simple |
+| **Toast** | Atom | Notification toast | Fixed position, basic |
+| **Tooltip** | Atom | Hover tooltip | CSS-only positioning |
+| **Skeleton** | Atom | Loading placeholder | Simple animation |
+| **ColorPicker** | Atom | Color selection | Simple color grid |
+| **SlideUp** | Molecule | Slide-up panel | CSS-only animations |
 
 ## Component API
 
@@ -718,7 +728,13 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 ## Changelog
 
-### v1.0.7 (Latest) - "Less is More" Edition
+### v1.1.1 (Latest) - "Enhanced Type Safety" Edition
+
+#### 🔧 TypeScript Improvements
+- **Enhanced Type Definitions**: Updated generated TypeScript definitions for better type safety
+- **Improved Package Structure**: Enhanced package structure with improved type exports
+- **Build Consistency**: Fixed build consistency and versioning across all generated files
+- **Better Type Exports**: Improved TypeScript declaration file generation
 
 #### 🎯 Philosophy Change
 - **Clean & Simple**: Adopted "less is more" philosophy - removed unnecessary complexity

package/dist/Card-BIAsG5HX.js

@@ -0,0 +1,222 @@
+import { w as Q, x as D, y as Z, z as V, P as W, g as c, A as X, s as m, B as k, D as $, C as ee, E as te, F as re, v as ae, G as ne, H as se, I as ie, J as oe, K as le, S as z, L as N, M as g, N as x, O as M, i as Y, f as O, k as q, t as S, b as w, p as U, c as G, Q as E, m as P, d as R, h as A, o as K, R as F, a as L, n as T, q as fe } from "./store-ZmZCXeMy.js";
+function pe(a, e) {
+  Q(() => {
+    var t = a.getRootNode(), r = (
+      /** @type {ShadowRoot} */
+      t.host ? (
+        /** @type {ShadowRoot} */
+        t
+      ) : (
+        /** @type {Document} */
+        t.head ?? /** @type {Document} */
+        t.ownerDocument.head
+      )
+    );
+    if (!r.querySelector("#" + e.hash)) {
+      const n = document.createElement("style");
+      n.id = e.hash, n.textContent = e.code, r.appendChild(n);
+    }
+  });
+}
+function he(a) {
+  return function(...e) {
+    var t = (
+      /** @type {Event} */
+      e[0]
+    );
+    return t.preventDefault(), a == null ? void 0 : a.apply(this, e);
+  };
+}
+const ue = {
+  get(a, e) {
+    let t = a.props.length;
+    for (; t--; ) {
+      let r = a.props[t];
+      if (g(r) && (r = r()), typeof r == "object" && r !== null && e in r) return r[e];
+    }
+  },
+  set(a, e, t) {
+    let r = a.props.length;
+    for (; r--; ) {
+      let n = a.props[r];
+      g(n) && (n = n());
+      const i = D(n, e);
+      if (i && i.set)
+        return i.set(t), !0;
+    }
+    return !1;
+  },
+  getOwnPropertyDescriptor(a, e) {
+    let t = a.props.length;
+    for (; t--; ) {
+      let r = a.props[t];
+      if (g(r) && (r = r()), typeof r == "object" && r !== null && e in r) {
+        const n = D(r, e);
+        return n && !n.configurable && (n.configurable = !0), n;
+      }
+    }
+  },
+  has(a, e) {
+    if (e === z || e === N) return !1;
+    for (let t of a.props)
+      if (g(t) && (t = t()), t != null && e in t) return !0;
+    return !1;
+  },
+  ownKeys(a) {
+    const e = [];
+    for (let t of a.props)
+      if (g(t) && (t = t()), !!t) {
+        for (const r in t)
+          e.includes(r) || e.push(r);
+        for (const r of Object.getOwnPropertySymbols(t))
+          e.includes(r) || e.push(r);
+      }
+    return e;
+  }
+};
+function ge(...a) {
+  return new Proxy({ props: a }, ue);
+}
+function p(a, e, t, r) {
+  var j;
+  var n = !ne || (t & se) !== 0, i = (t & re) !== 0, v = (t & oe) !== 0, l = (
+    /** @type {V} */
+    r
+  ), b = !0, f = () => (b && (b = !1, l = v ? ae(
+    /** @type {() => V} */
+    r
+  ) : (
+    /** @type {V} */
+    r
+  )), l), u;
+  if (i) {
+    var I = z in a || N in a;
+    u = ((j = D(a, e)) == null ? void 0 : j.set) ?? (I && e in a ? (s) => a[e] = s : void 0);
+  }
+  var o, d = !1;
+  i ? [o, d] = Z(() => (
+    /** @type {V} */
+    a[e]
+  )) : o = /** @type {V} */
+  a[e], o === void 0 && r !== void 0 && (o = f(), u && (n && V(), u(o)));
+  var _;
+  if (n ? _ = () => {
+    var s = (
+      /** @type {V} */
+      a[e]
+    );
+    return s === void 0 ? f() : (b = !0, s);
+  } : _ = () => {
+    var s = (
+      /** @type {V} */
+      a[e]
+    );
+    return s !== void 0 && (l = /** @type {V} */
+    void 0), s === void 0 ? l : s;
+  }, n && (t & W) === 0)
+    return _;
+  if (u) {
+    var H = a.$$legacy;
+    return (
+      /** @type {() => V} */
+      (function(s, y) {
+        return arguments.length > 0 ? ((!n || !y || H || d) && u(y ? _() : s), s) : _();
+      })
+    );
+  }
+  var C = !1, h = ((t & ie) !== 0 ? ee : te)(() => (C = !1, _()));
+  i && c(h);
+  var J = (
+    /** @type {Effect} */
+    k
+  );
+  return (
+    /** @type {() => V} */
+    (function(s, y) {
+      if (arguments.length > 0) {
+        const B = y ? c(h) : n && i ? X(s) : s;
+        return m(h, B), C = !0, l !== void 0 && (l = B), s;
+      }
+      return le && C || (J.f & $) !== 0 ? h.v : c(h);
+    })
+  );
+}
+var de = O("<button><!></button>");
+function me(a, e) {
+  G(e, !1);
+  const t = P(), r = P(), n = P();
+  let i = p(e, "variant", 8, "primary"), v = p(e, "size", 8, "md"), l = p(e, "disabled", 8, !1), b = p(e, "type", 8, "button");
+  x(() => {
+  }, () => {
+    m(t, {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-4 py-2 text-sm",
+      lg: "px-5 py-3 text-base"
+    });
+  }), x(() => {
+  }, () => {
+    m(r, {
+      primary: "bg-blue-600 text-white hover:bg-blue-700",
+      secondary: "bg-gray-600 text-white hover:bg-gray-700",
+      danger: "bg-red-600 text-white hover:bg-red-700"
+    });
+  }), x(
+    () => (c(t), E(v()), c(r), E(i())),
+    () => {
+      m(n, [
+        "inline-flex items-center justify-center font-medium rounded-md",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        c(t)[v()],
+        c(r)[i()]
+      ].join(" "));
+    }
+  ), M(), Y();
+  var f = de(), u = R(f);
+  q(u, e, "default", {}), S(() => {
+    A(f, "type", b()), K(f, 1, F(c(n))), f.disabled = l();
+  }), w(a, f), U();
+}
+var ce = O('<img class="w-full h-48 object-cover rounded-md mb-4"/>'), ve = O('<h3 class="text-lg font-semibold mb-2"> </h3>'), _e = O("<div><!> <!> <!></div>");
+function ye(a, e) {
+  G(e, !1);
+  const t = P();
+  let r = p(e, "title", 8, ""), n = p(e, "image", 8, ""), i = p(e, "interactive", 8, !1);
+  x(() => E(i()), () => {
+    m(t, [
+      "bg-white border border-gray-200 rounded-lg p-4",
+      i() ? "cursor-pointer hover:shadow-md" : ""
+    ].join(" "));
+  }), M(), Y();
+  var v = _e(), l = R(v);
+  {
+    var b = (o) => {
+      var d = ce();
+      S(() => {
+        A(d, "src", n()), A(d, "alt", r());
+      }), w(o, d);
+    };
+    L(l, (o) => {
+      n() && o(b);
+    });
+  }
+  var f = T(l, 2);
+  {
+    var u = (o) => {
+      var d = ve(), _ = R(d);
+      S(() => fe(_, r())), w(o, d);
+    };
+    L(f, (o) => {
+      r() && o(u);
+    });
+  }
+  var I = T(f, 2);
+  q(I, e, "default", {}), S(() => K(v, 1, F(c(t)))), w(a, v), U();
+}
+export {
+  me as B,
+  ye as C,
+  he as a,
+  pe as b,
+  p,
+  ge as s
+};

package/dist/Navigation-BoOnkbXw.js

@@ -0,0 +1,81 @@
+import { j as G, i as H, f as p, k as _, a as C, t as D, e as M, b as c, p as I, l as J, c as K, d as a, n, g as t, m as ia, o as h, q as L, s as na, r as oa, u as da, h as la, v as j } from "./store-ZmZCXeMy.js";
+import { createEventDispatcher as Q } from "svelte";
+import { T as F } from "./ThemeToggle-CRI92cOb.js";
+var ca = p('<div class="mt-2"><!></div>'), pa = p('<div class="md:hidden"><div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-gray-200"><!> <div class="pt-4"><!> <!></div></div></div>'), ua = p('<nav><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between items-center h-16"><div class="flex-shrink-0"><button type="button" class="text-xl font-bold text-gray-900"> </button></div> <div class="hidden md:block"><div class="ml-10 flex items-baseline space-x-4"><!></div></div> <div class="hidden md:block"><div class="ml-4 flex items-center space-x-4"><!> <!></div></div> <div class="md:hidden"><button type="button" class="text-gray-500 hover:text-gray-600" aria-label="Toggle menu"><span class="text-2xl">☰</span></button></div></div> <!></div></nav>');
+function ga(g, r) {
+  K(r, !1);
+  const m = () => G(props, "$props", y), [y, k] = J();
+  let { brand: u = "", showThemeToggle: b = !0, className: $ = "" } = m()();
+  const T = Q();
+  let o = ia(!1);
+  function d() {
+    na(o, !t(o));
+  }
+  function f() {
+    T("brandClick");
+  }
+  H();
+  var s = ua(), e = a(s), l = a(e), v = a(l), x = a(v), w = a(x), q = n(v, 2), R = a(q), S = a(R);
+  _(S, r, "nav", {});
+  var z = n(q, 2), U = a(z), B = a(U);
+  _(B, r, "actions", {});
+  var V = n(B, 2);
+  {
+    var W = (i) => {
+      F(i, {});
+    };
+    C(V, (i) => {
+      b && i(W);
+    });
+  }
+  var X = n(z, 2), Y = a(X), Z = n(l, 2);
+  {
+    var aa = (i) => {
+      var E = pa(), ea = a(E), O = a(ea);
+      _(O, r, "nav", {});
+      var ta = n(O, 2), P = a(ta);
+      _(P, r, "actions", {});
+      var sa = n(P, 2);
+      {
+        var ra = (N) => {
+          var A = ca(), va = a(A);
+          F(va, {}), c(N, A);
+        };
+        C(sa, (N) => {
+          b && N(ra);
+        });
+      }
+      c(i, E);
+    };
+    C(Z, (i) => {
+      t(o) && i(aa);
+    });
+  }
+  D(() => {
+    h(s, 1, `bg-white border-b border-gray-200 sticky top-0 z-50 ${$ ?? ""}`), L(w, u);
+  }), M("click", x, f), M("click", Y, d), c(g, s), I(), k();
+}
+var ba = p("<li><a> </a></li>"), fa = p("<nav><ul></ul></nav>");
+function ma(g, r) {
+  K(r, !1);
+  const m = () => G(props, "$props", y), [y, k] = J();
+  let { variant: u = "header", items: b = [], currentPath: $ = "" } = m()();
+  const T = Q();
+  function o(s, e) {
+    e.preventDefault(), T("navigate", { item: s, href: s.href });
+  }
+  H();
+  var d = fa(), f = a(d);
+  oa(f, 5, () => b, da, (s, e) => {
+    var l = ba(), v = a(l), x = a(v);
+    D(() => {
+      la(v, "href", (t(e), j(() => t(e).href))), h(v, 1, `px-3 py-2 text-sm font-medium rounded-md transition-colors ${t(e), j(() => $ === t(e).href ? "bg-blue-100 text-blue-700" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100") ?? ""}`), L(x, (t(e), j(() => t(e).label)));
+    }), M("click", v, (w) => o(t(e), w)), c(s, l);
+  }), D(() => {
+    h(d, 1, `navigation navigation-${u ?? ""}`), h(f, 1, `flex ${u === "sidebar" ? "flex-col space-y-2" : "space-x-6"}`);
+  }), c(g, d), I(), k();
+}
+export {
+  ga as N,
+  ma as a
+};