zabi-components 2.0.2 → 2.0.4

package/README.md

@@ -9,10 +9,12 @@ A clean, minimal Svelte component library built with TypeScript and Tailwind CSS
 ## Features
 
 - 🎯 **TypeScript First** - Full TypeScript support with comprehensive type definitions
-- 🎨 **Tailwind CSS Integration** - Built with Tailwind CSS for consistent styling
+- 🎨 **Semantic Color System** - Built-in semantic colors with automatic dark mode support
+- 🌙 **Dark Mode Ready** - Automatic dark mode switching with CSS custom properties
 - ♿ **Accessibility First** - ARIA compliant components with keyboard navigation support
 - 📱 **Responsive Design** - Mobile-first approach with responsive utilities
 - 🧩 **Clean API** - Simple, intuitive component APIs with minimal props
+- 🔧 **Utility Functions** - Reusable variant utilities for consistent styling
 - 📦 **Tree Shakeable** - Import only what you need
 - ✅ **Production Ready** - Fully tested and optimized for production use
 - 🚀 **Modern CSS** - CSS-only positioning, animations, and interactions
@@ -59,11 +61,12 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
 ```svelte
 <script lang="ts">
   // Clean Components - Less is More
-  import { Card, Form, Layout, Navigation, Button, Input } from 'zabi-components';
+  import { Card, Form, Layout, Navigation, Button, Input, Textarea } from 'zabi-components';
   
   let formData = {
     name: '',
     email: '',
+    message: '',
   };
   
   function handleFormSubmit(event: CustomEvent) {
@@ -88,17 +91,58 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
   </div>
 
   <main class="container mx-auto p-6">
-    <Card title="Welcome" description="Clean components that just work" interactive on:click={handleCardClick} />
+    <!-- Semantic Color Variants -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+      <Card title="Default Card" variant="default">
+        This is a default card with semantic colors.
+      </Card>
+      <Card title="Success Card" variant="success">
+        This card indicates a successful action.
+      </Card>
+      <Card title="Warning Card" variant="warning">
+        This card shows a warning state.
+      </Card>
+      <Card title="Error Card" variant="error">
+        This card indicates an error state.
+      </Card>
+      <Card title="Info Card" variant="info">
+        This card provides informational content.
+      </Card>
+    </div>
     
     <Form on:submit={handleFormSubmit}>
       <div class="form-field">
-        <label for="name" class="form-label">Name</label>
-        <Input id="name" name="name" bind:value={formData.name} placeholder="Enter your name" />
+        <Input 
+          id="name" 
+          name="name" 
+          bind:value={formData.name} 
+          label="Name"
+          placeholder="Enter your name" 
+          variant="default"
+        />
       </div>
       
       <div class="form-field">
-        <label for="email" class="form-label">Email</label>
-        <Input id="email" name="email" type="email" bind:value={formData.email} placeholder="Enter your email" />
+        <Input 
+          id="email" 
+          name="email" 
+          type="email" 
+          bind:value={formData.email} 
+          label="Email"
+          placeholder="Enter your email" 
+          variant="success"
+        />
+      </div>
+
+      <div class="form-field">
+        <Textarea 
+          id="message" 
+          name="message" 
+          bind:value={formData.message} 
+          label="Message"
+          placeholder="Enter your message" 
+          variant="default"
+        />
       </div>
       
       <div class="form-actions">
@@ -145,6 +189,75 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
 | **ColorPicker** | Atom | Color selection | Simple color grid |
 | **SlideUp** | Molecule | Slide-up panel | CSS-only animations |
 
+## Semantic Color System
+
+Zabi Components includes a comprehensive semantic color system that automatically supports dark mode and provides consistent styling across all components.
+
+### Available Variants
+
+All components support these semantic color variants:
+
+- **`default`** - Standard appearance with primary colors
+- **`success`** - Green colors for positive states
+- **`warning`** - Yellow/amber colors for caution states  
+- **`error`** - Red colors for error states
+- **`info`** - Blue colors for informational states
+
+### Usage Examples
+
+```svelte
+<!-- Input variants -->
+<Input variant="default" label="Default Input" />
+<Input variant="success" label="Success Input" />
+<Input variant="warning" label="Warning Input" />
+<Input variant="error" label="Error Input" />
+
+<!-- Textarea variants -->
+<Textarea variant="default" label="Default Textarea" />
+<Textarea variant="success" label="Success Textarea" />
+
+<!-- Card variants -->
+<Card variant="default" title="Default Card" />
+<Card variant="success" title="Success Card" />
+<Card variant="warning" title="Warning Card" />
+<Card variant="error" title="Error Card" />
+<Card variant="info" title="Info Card" />
+```
+
+### Utility Functions
+
+For custom components or advanced usage, you can use the built-in utility functions:
+
+```typescript
+import { 
+  getInputVariantClasses, 
+  getCardVariantClasses, 
+  getVariantClasses 
+} from 'zabi-components';
+
+// For input components (Input, Textarea)
+const inputClass = getInputVariantClasses('success'); // Returns "input-variant-success"
+
+// For card components
+const cardClass = getCardVariantClasses('error'); // Returns "card-variant-error"
+
+// For custom components
+const borderClass = getVariantClasses('warning', 'border'); // Returns "variant-border-warning"
+const textClass = getVariantClasses('success', 'text'); // Returns "variant-text-success"
+const bgClass = getVariantClasses('info', 'bg'); // Returns "variant-bg-info"
+```
+
+### Dark Mode Support
+
+The semantic color system automatically adapts to dark mode through CSS custom properties. Simply add the `.dark` class to your document:
+
+```javascript
+// Toggle dark mode
+document.documentElement.classList.toggle('dark');
+```
+
+All components will automatically switch to their dark mode variants without any additional configuration.
+
 ## Component API
 
 ### Card Component
@@ -152,11 +265,10 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
 ```svelte
 <Card
   title={string}
-  subtitle={string}
-  description={string}
   image={string}
-  variant="default" | "elevated"
   interactive={boolean}
+  variant="default" | "success" | "warning" | "error" | "info"
+  size="sm" | "md" | "lg"
   className={string}
   on:click={(e) => console.log(e.detail.event)}
 >
@@ -166,11 +278,10 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
 
 **Props:**
 - `title`: Card title
-- `subtitle`: Card subtitle  
-- `description`: Card description
 - `image`: Card image URL
-- `variant`: Card style variant (default: "default")
 - `interactive`: Make card clickable (default: false)
+- `variant`: Card variant with semantic colors (default: "default")
+- `size`: Card size (default: "md")
 - `className`: Additional CSS classes
 
 **Events:**
@@ -287,15 +398,10 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
   type={string}
   label={string}
   placeholder={string}
-  required={boolean}
   disabled={boolean}
   size="sm" | "md" | "lg"
-  variant="default" | "error" | "success"
-  error={string}
-  success={string}
-  helpText={string}
+  variant="default" | "success" | "warning" | "error"
   className={string}
-  id={string}
   on:input={(e) => console.log(e.detail.value, e.detail.event)}
   on:change={(e) => console.log(e.detail.value, e.detail.event)}
 />
@@ -306,15 +412,41 @@ import type { ButtonEvents, InputEvents } from 'zabi-components/types';
 - `type`: Input type (default: "text")
 - `label`: Input label
 - `placeholder`: Input placeholder
-- `required`: Mark as required (default: false)
 - `disabled`: Disable the input (default: false)
 - `size`: Input size (default: "md")
-- `variant`: Input variant (default: "default")
-- `error`: Error message
-- `success`: Success message
-- `helpText`: Helper text
+- `variant`: Input variant with semantic colors (default: "default")
+- `className`: Additional CSS classes
+
+**Events:**
+- `input`: Fired on input - `{ detail: { value: string, event: InputEvent } }`
+- `change`: Fired on change - `{ detail: { value: string, event: Event } }`
+
+### Textarea Component
+
+```svelte
+<Textarea
+  bind:value={string}
+  label={string}
+  placeholder={string}
+  disabled={boolean}
+  rows={number}
+  size="sm" | "md" | "lg"
+  variant="default" | "success" | "warning" | "error"
+  className={string}
+  on:input={(e) => console.log(e.detail.value, e.detail.event)}
+  on:change={(e) => console.log(e.detail.value, e.detail.event)}
+/>
+```
+
+**Props:**
+- `value`: Textarea value (bindable)
+- `label`: Textarea label
+- `placeholder`: Textarea placeholder
+- `disabled`: Disable the textarea (default: false)
+- `rows`: Number of visible text lines (default: 4)
+- `size`: Textarea size (default: "md")
+- `variant`: Textarea variant with semantic colors (default: "default")
 - `className`: Additional CSS classes
-- `id`: Input ID
 
 **Events:**
 - `input`: Fired on input - `{ detail: { value: string, event: InputEvent } }`

package/dist/Checkbox-cOmcN4_d.js

@@ -0,0 +1,276 @@
+import { w as X, x as L, y as Y, u as O, z as P, A as B, B as Z, j as n, C as u, D as A, i as D, f as M, k as $, t as k, b as p, p as T, c as q, v as S, g as i, m as f, d as z, h as x, n as j, E as I, s as v, a as H, l as J, o as K } from "./props-D1U_TNgY.js";
+function de(a, e) {
+  X(() => {
+    var t = a.getRootNode(), s = (
+      /** @type {ShadowRoot} */
+      t.host ? (
+        /** @type {ShadowRoot} */
+        t
+      ) : (
+        /** @type {Document} */
+        t.head ?? /** @type {Document} */
+        t.ownerDocument.head
+      )
+    );
+    if (!s.querySelector("#" + e.hash)) {
+      const r = document.createElement("style");
+      r.id = e.hash, r.textContent = e.code, s.appendChild(r);
+    }
+  });
+}
+function Q(a, e, t = e) {
+  var s = /* @__PURE__ */ new WeakSet();
+  L(a, "input", async (r) => {
+    var l = r ? a.defaultValue : a.value;
+    if (l = W(a) ? F(l) : l, t(l), B !== null && s.add(B), await Y(), l !== (l = e())) {
+      var b = a.selectionStart, d = a.selectionEnd;
+      a.value = l ?? "", d !== null && (a.selectionStart = b, a.selectionEnd = Math.min(d, a.value.length));
+    }
+  }), // If we are hydrating and the value has since changed,
+  // then use the updated value from the input instead.
+  // If defaultValue is set, then value == defaultValue
+  // TODO Svelte 6: remove input.value check and set to empty string?
+  O(e) == null && a.value && (t(W(a) ? F(a.value) : a.value), B !== null && s.add(B)), P(() => {
+    var r = e();
+    if (a === document.activeElement) {
+      var l = (
+        /** @type {Batch} */
+        Z ?? B
+      );
+      if (s.has(l))
+        return;
+    }
+    W(a) && r === F(a.value) || a.type === "date" && !r && !a.value || r !== a.value && (a.value = r ?? "");
+  });
+}
+function ee(a, e, t = e) {
+  L(a, "change", (s) => {
+    var r = s ? a.defaultChecked : a.checked;
+    t(r);
+  }), // If we are hydrating and the value has since changed,
+  // then use the update value from the input instead.
+  // If defaultChecked is set, then checked == defaultChecked
+  O(e) == null && t(a.checked), P(() => {
+    var s = e();
+    a.checked = !!s;
+  });
+}
+function W(a) {
+  var e = a.type;
+  return e === "number" || e === "range";
+}
+function F(a) {
+  return a === "" ? null : +a;
+}
+var ae = M("<button><!></button>");
+function ce(a, e) {
+  q(e, !1);
+  const t = f(), s = f(), r = f();
+  let l = n(e, "variant", 8, "primary"), b = n(e, "size", 8, "md"), d = n(e, "disabled", 8, !1), c = n(e, "type", 8, "button");
+  u(() => {
+  }, () => {
+    v(t, {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-4 py-2 text-sm",
+      lg: "px-5 py-3 text-base"
+    });
+  }), u(() => {
+  }, () => {
+    v(s, {
+      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"
+    });
+  }), u(
+    () => (i(t), S(b()), i(s), S(l())),
+    () => {
+      v(r, [
+        "inline-flex items-center justify-center font-medium rounded-md",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        i(t)[b()],
+        i(s)[l()]
+      ].join(" "));
+    }
+  ), A(), D();
+  var m = ae(), _ = z(m);
+  $(_, e, "default", {}), k(() => {
+    x(m, "type", c()), j(m, 1, I(i(r))), m.disabled = d();
+  }), p(a, m), T();
+}
+function U(a) {
+  const e = {
+    default: "input-variant-default",
+    success: "input-variant-success",
+    warning: "input-variant-warning",
+    error: "input-variant-error",
+    info: "input-variant-info"
+  };
+  return e[a] || e.default;
+}
+function ue(a) {
+  const e = {
+    default: "card-variant-default",
+    success: "card-variant-success",
+    warning: "card-variant-warning",
+    error: "card-variant-error",
+    info: "card-variant-info"
+  };
+  return e[a] || e.default;
+}
+function G(a, e) {
+  const t = {
+    default: `variant-${e}-default`,
+    success: `variant-${e}-success`,
+    warning: `variant-${e}-warning`,
+    error: `variant-${e}-error`,
+    info: `variant-${e}-info`
+  };
+  return t[a] || t.default;
+}
+function fe(a) {
+  return {
+    border: G(a, "border"),
+    text: G(a, "text"),
+    bg: G(a, "bg")
+  };
+}
+function ve(a, e) {
+  return a.reduce((t, s) => (t[s] = `${e}-${s}`, t), {});
+}
+var te = M("<label> </label>"), se = M("<div><!> <input/></div>");
+function be(a, e) {
+  q(e, !1);
+  const t = f(), s = f(), r = f(), l = f();
+  let b = n(e, "value", 12, ""), d = n(e, "type", 8, "text"), c = n(e, "label", 8, ""), m = n(e, "placeholder", 8, ""), _ = n(e, "disabled", 8, !1), g = n(e, "size", 8, "md"), h = n(e, "variant", 8, "default");
+  const C = `input-${Math.random().toString(36).substr(2, 9)}`;
+  u(() => {
+  }, () => {
+    v(t, {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-4 py-2 text-sm",
+      lg: "px-5 py-3 text-base"
+    });
+  }), u(() => S(h()), () => {
+    v(s, U(h()));
+  }), u(
+    () => (i(t), S(g()), i(s)),
+    () => {
+      v(r, [
+        "w-full rounded-md transition-colors duration-200",
+        "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled",
+        i(t)[g()],
+        i(s)
+      ].join(" "));
+    }
+  ), u(() => {
+  }, () => {
+    v(l, "block text-sm font-medium text-primary mb-1");
+  }), A(), D();
+  var V = se(), E = z(V);
+  {
+    var N = (w) => {
+      var y = te(), R = z(y);
+      k(() => {
+        x(y, "for", C), j(y, 1, I(i(l))), K(R, c());
+      }), p(w, y);
+    };
+    H(E, (w) => {
+      c() && w(N);
+    });
+  }
+  var o = J(E, 2);
+  k(() => {
+    x(o, "id", C), x(o, "type", d()), x(o, "placeholder", m()), o.disabled = _(), j(o, 1, I(i(r)));
+  }), Q(o, b), p(a, V), T();
+}
+var re = M("<label> </label>"), le = M("<div><!> <textarea></textarea></div>");
+function me(a, e) {
+  q(e, !1);
+  const t = f(), s = f(), r = f(), l = f();
+  let b = n(e, "value", 12, ""), d = n(e, "label", 8, ""), c = n(e, "placeholder", 8, ""), m = n(e, "disabled", 8, !1), _ = n(e, "rows", 8, 4), g = n(e, "size", 8, "md"), h = n(e, "variant", 8, "default");
+  const C = `textarea-${Math.random().toString(36).substr(2, 9)}`;
+  u(() => {
+  }, () => {
+    v(t, {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-4 py-2 text-sm",
+      lg: "px-5 py-3 text-base"
+    });
+  }), u(() => S(h()), () => {
+    v(s, U(h()));
+  }), u(
+    () => (i(t), S(g()), i(s)),
+    () => {
+      v(r, [
+        "w-full rounded-md transition-colors duration-200",
+        "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-surface",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface-disabled",
+        "resize-y",
+        i(t)[g()],
+        i(s)
+      ].join(" "));
+    }
+  ), u(() => {
+  }, () => {
+    v(l, "block text-sm font-medium text-primary mb-1");
+  }), A(), D();
+  var V = le(), E = z(V);
+  {
+    var N = (w) => {
+      var y = re(), R = z(y);
+      k(() => {
+        x(y, "for", C), j(y, 1, I(i(l))), K(R, d());
+      }), p(w, y);
+    };
+    H(E, (w) => {
+      d() && w(N);
+    });
+  }
+  var o = J(E, 2);
+  k(() => {
+    x(o, "id", C), x(o, "placeholder", c()), o.disabled = m(), x(o, "rows", _()), j(o, 1, I(i(r)));
+  }), Q(o, b), p(a, V), T();
+}
+var ne = M('<label class="text-sm font-medium cursor-pointer"> </label>'), ie = M('<div class="flex items-center gap-2"><input type="checkbox"/> <!></div>');
+function xe(a, e) {
+  q(e, !1);
+  const t = f();
+  let s = n(e, "checked", 12, !1), r = n(e, "disabled", 8, !1), l = n(e, "label", 8, "");
+  const b = `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  u(() => {
+  }, () => {
+    v(t, [
+      "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded",
+      "focus:ring-blue-500 focus:ring-2",
+      "disabled:opacity-50 disabled:cursor-not-allowed"
+    ].join(" "));
+  }), A(), D();
+  var d = ie(), c = z(d), m = J(c, 2);
+  {
+    var _ = (g) => {
+      var h = ne(), C = z(h);
+      k(() => {
+        x(h, "for", b), K(C, l());
+      }), p(g, h);
+    };
+    H(m, (g) => {
+      l() && g(_);
+    });
+  }
+  k(() => {
+    x(c, "id", b), c.disabled = r(), j(c, 1, I(i(t)));
+  }), ee(c, s), p(a, d), T();
+}
+export {
+  ce as B,
+  xe as C,
+  be as I,
+  me as T,
+  ue as a,
+  G as b,
+  fe as c,
+  ve as d,
+  de as e,
+  U as g
+};