signal-layers 0.0.6 → 0.1.1

package/src/Spinner.jsx

@@ -1,155 +1,57 @@
 export function Spinner(contract = {}) {
-  /* ────────────────────────────────────────────────────────────────────────────
-   * CONTRACT
-   * ────────────────────────────────────────────────────────────────────────────
-   * 
-   * Spinner - Animated loading indicator with customizable appearance
-   *
-   * Foundation: CSS animated div with spinning border
-   *
-   * Signals:
-   *   Size: xs, sm, md, lg, xl
-   *   Color: light, primary, danger
-   *   Border: thin, thick
-   *   Animation: spinSlow, spinFast, pause
-   *   Layout: inline, block, centered
-   *   Visibility: transparent
-   *
-   * Data:
-   *   ariaLabel - Accessibility label for screen readers
-   *
-   * Defaults: md, inline, spin
-   *
-   * Usage:
-   * <Spinner />
-   * <Spinner lg primary />
-   * <Spinner sm light transparent />
-   * 
-   * ──────────────────────────────────────────────────────────────────────────── */
+  const { layer, data, state, classes, signals } = createSignalUtils(contract);
+  const { inputSignal, layerSignal, dataSignal } = signals;
+  let spinner;
 
-  const [inputSignal, layerSignal, dataSignal] = [{ ...contract }, {}, {}];
+  spinner = {
+    layout: layer("layout", "spinner"),
+    size: layer("size", "spinner"),
+    color: layer("color", "spinner"),
+    border: layer("border", "spinner"),
+    animation: layer("animation", "spinner"),
+    visibility: layer("visibility", "spinner"),
+  };
 
-  /* ────────────────────────────────────────────────────────────────────────────
-   * CONTRACT TOOLS
-   * ──────────────────────────────────────────────────────────────────────────── */
+  spinner.layout("inline-flex items-center justify-center");
+  spinner.color("border-black/20 border-t-black");
+  spinner.border("border-2 rounded-full");
+  spinner.animation("animate-spin");
+  spinner.visibility("opacity-100");
+  spinner.size("w-6 h-6");
 
-  const layer = (name) => (className) =>
-    (layerSignal[name] ||= [],
-     (layerSignal[name][0] = className));
+  inputSignal.xs && spinner.size("w-3 h-3 border");
+  inputSignal.sm && spinner.size("w-4 h-4 border-2");
+  inputSignal.md && spinner.size("w-6 h-6 border-2");
+  inputSignal.lg && spinner.size("w-8 h-8 border-4");
+  inputSignal.xl && spinner.size("w-12 h-12 border-4");
 
-  const data = (name, key = name) =>
-    inputSignal[key] && (dataSignal[name] = inputSignal[key]);
+  inputSignal.light && spinner.color("border-white/30 border-t-white");
+  inputSignal.primary && spinner.color("border-blue-600/30 border-t-blue-500");
+  inputSignal.danger && spinner.color("border-red-600/30 border-t-red-500");
 
-  const classes = (layers = {}) =>
-    Object.values(layers).map(l => l[0]).filter(Boolean).join(" ");
+  inputSignal.thin && spinner.border("border rounded-full");
+  inputSignal.thick && spinner.border("border-4 rounded-full");
+
+  inputSignal.spinSlow &&
+    spinner.animation("animate-spin [animation-duration:1.5s]");
+  inputSignal.spinFast &&
+    spinner.animation("animate-spin [animation-duration:.6s]");
+  inputSignal.pause &&
+    spinner.animation("animate-spin [animation-play-state:paused]");
+
+  inputSignal.inline && spinner.layout("inline-flex");
+  inputSignal.block && spinner.layout("block mx-auto");
+  inputSignal.centered && spinner.layout("flex mx-auto");
+
+  inputSignal.transparent && spinner.visibility("opacity-25");
+
+  inputSignal.ariaLabel && data("ariaLabel");
 
-  /* ────────────────────────────────────────────────────────────────────────────
-   * BASE LAYERS
-   * ──────────────────────────────────────────────────────────────────────────── */
-    let spinner;
-       (() => 
-        (
-            spinner = {
-                layout:layer("layout"),
-                size:layer("size"),       
-                color:layer("color"),      
-                border:layer("border"),     
-                animation:layer("animation"),  
-                visibility:layer("visibility") 
-            }
-        )
-    )(),
-  /* ────────────────────────────────────────────────────────────────────────────
-   * DEFAULTS
-   * ──────────────────────────────────────────────────────────────────────────── */
-    (() => 
-        (
-                spinner.layout("inline-flex items-center justify-center"),
-                spinner.color("border-black/20 border-t-black"),
-                spinner.border("border-2 rounded-full"),
-                spinner.animation("animate-spin"),
-                spinner.visibility("opacity-100"),
-                spinner.size("w-6 h-6")
-        )
-    )(),
-  /* ────────────────────────────────────────────────────────────────────────────
-   * SIZE SIGNALS
-   * ──────────────────────────────────────────────────────────────────────────── */
-  (() => 
-        (
-              inputSignal.xs && spinner.size("w-3 h-3 border"),
-              inputSignal.sm && spinner.size("w-4 h-4 border-2"),
-              inputSignal.md && spinner.size("w-6 h-6 border-2"),
-              inputSignal.lg && spinner.size("w-8 h-8 border-4"),
-              inputSignal.xl && spinner.size("w-12 h-12 border-4")
-        )
-    )(),
-  /* ────────────────────────────────────────────────────────────────────────────
-   * COLOR SIGNALS
-   * ──────────────────────────────────────────────────────────────────────────── */
-  (() => 
-        (
-           
-              inputSignal.light && spinner.color("border-white/30 border-t-white"),
-              inputSignal.primary && spinner.color("border-blue-600/30 border-t-blue-500"),
-              inputSignal.danger && spinner.color("border-red-600/30 border-t-red-500")
-        )
-    )(),
-  /* ────────────────────────────────────────────────────────────────────────────
-   * BORDER SIGNALS
-   * ──────────────────────────────────────────────────────────────────────────── */
-  (() => 
-        (
-           
-              inputSignal.thin && spinner.border("border rounded-full"),
-              inputSignal.thick && spinner.border("border-4 rounded-full")
-        )
-    )(),
-   /* ────────────────────────────────────────────────────────────────────────────
-   * ANIMATION SIGNALS
-   * ──────────────────────────────────────────────────────────────────────────── */
-  (() => 
-        (
-           
-              inputSignal.spinSlow && spinner.animation("animate-spin [animation-duration:1.5s]"),
-              inputSignal.spinFast && spinner.animation("animate-spin [animation-duration:.6s]"),
-              inputSignal.pause && spinner.animation("animate-spin [animation-play-state:paused]")
-        )
-    )(),
-  /* ────────────────────────────────────────────────────────────────────────────
-   * LAYOUT SIGNALS
-   * ──────────────────────────────────────────────────────────────────────────── */
-  (() => 
-        (
-              inputSignal.inline && spinner.layout("inline-flex"),
-              inputSignal.block && spinner.layout("block mx-auto"),
-              inputSignal.centered && spinner.layout("flex mx-auto")
-        )
-    )(),
-  /* ────────────────────────────────────────────────────────────────────────────
-   * VISIBILITY SIGNALS
-   * ──────────────────────────────────────────────────────────────────────────── */
-  (() => 
-        (
-              inputSignal.transparent && spinner.visibility("opacity-25")
-        )
-    )(),
-  /* ────────────────────────────────────────────────────────────────────────────
-   * DATA
-   * ──────────────────────────────────────────────────────────────────────────── */
-  (() => 
-        (
-            inputSignal.ariaLabel && data("ariaLabel")
-        )
-    )();
-  /* ────────────────────────────────────────────────────────────────────────────
-   * RENDER
-   * ──────────────────────────────────────────────────────────────────────────── */
   return (
     <div
       role="status"
       aria-label={dataSignal.ariaLabel || "loading"}
-      className={classes(layerSignal)}
+      className={classes(layerSignal.spinner)}
     />
   );
-}
+}

package/src/Switch.jsx

@@ -1,152 +1,124 @@
-import { useState } from "react";
-
-export function Switch(contract = {}) {
-
-  const [inputSignal, layerSignal, dataSignal, stateSignal] = [{ ...contract }, {}, {}, {}];
-  const switchId = `switch-${Math.random().toString(36).substring(2, 9)}`;
-
-  const layer = (name, scope = "checkbox") => (className) =>
-    (layerSignal[scope] ||= {},
-    layerSignal[scope][name] ||= [],
-    (layerSignal[scope][name][0] = className));
-
-  const data = (name, key = name) =>
-    inputSignal[key] !== undefined && (dataSignal[name] = inputSignal[key]);
-
-  const state = (name, priority = 0, initial = false) => (
-    (stateSignal._hooks ||= {})[name] ||= (() => {
-      const [get, set] = useState(initial);
-      return { get, set };
-    })(),
-    priority &&
-      (!stateSignal._priority || priority > stateSignal._priority) &&
-      (stateSignal[name] = stateSignal._hooks[name],
-       stateSignal._priority = priority)
-  );
-
-  const classes = (layers = {}) =>
-    Object.values(layers).map(l => l[0]).filter(Boolean).join(" ");
-
-let container;
-let button;
-let thumb;
-let label;
-
-container = {
-    base: layer("base", "container"),
-    size: layer("size", "container"),
-    color: layer("color", "container"),
-    layout: layer("layout", "container")
-}
+export function Switch(contract = {}) {    
+    const { layer, data, state, classes, signals } = createSignalUtils(contract);
+    const { inputSignal, layerSignal, dataSignal, stateSignal } = signals;
+    const switchId = `switch-${Math.random().toString(36).substring(2, 9)}`;
+
+    let container, button, thumb, label;
+
+    container = {
+        base: layer("base", "container"),
+        size: layer("size", "container"),
+        color: layer("color", "container"),
+        layout: layer("layout", "container")
+    }
 
-button = {
-    base: layer("base", "button"),
-    size: layer("size", "button"),
-    color: layer("color", "button"),
-    shape: layer("shape", "button"),
-    layout: layer("layout", "button"),
-    checked: layer("checked", "button"),
-    interactive: layer("interactive", "button")
-}
+    button = {
+        base: layer("base", "button"),
+        size: layer("size", "button"),
+        color: layer("color", "button"),
+        shape: layer("shape", "button"),
+        layout: layer("layout", "button"),
+        checked: layer("checked", "button"),
+        interactive: layer("interactive", "button")
+    }
 
-thumb = {
-    base: layer("base", "thumb"),
-    color: layer("color", "thumb"),
-    shape: layer("shape", "thumb"),
-    size: layer("size", "thumb"),
-    layout: layer("layout", "thumb"),
-    position: layer("position", "thumb"),
-    interactive: layer("interactive", "thumb")
-}
+    thumb = {
+        base: layer("base", "thumb"),
+        color: layer("color", "thumb"),
+        shape: layer("shape", "thumb"),
+        size: layer("size", "thumb"),
+        layout: layer("layout", "thumb"),
+        position: layer("position", "thumb"),
+        interactive: layer("interactive", "thumb")
+    }
 
-label = {
-    base: layer("base", "label"),
-    color: layer("color", "label"),
-    layout: layer("layout", "label"),
-    size: layer("size", "label")
-}
+    label = {
+        base: layer("base", "label"),
+        color: layer("color", "label"),
+        layout: layer("layout", "label"),
+        size: layer("size", "label")
+    }
 
-container.base("relative");
-container.size("h-4 w-8");
-container.color("bg-transparent");
-container.layout("inline-flex items-center gap-2");
-
-button.base("relative transition-colors duration-500 cursor-pointer");
-button.size("h-4 w-8");
-button.color("bg-gray-200");
-button.shape("rounded-full");
-button.layout("inline-flex items-center");
-button.checked("checked:bg-blue-600");
-
-thumb.base("absolute transition-transform duration-500");
-thumb.color("bg-white");
-thumb.shape("rounded-full");
-thumb.size("h-4 w-4");
-thumb.layout("inline-block");
-thumb.position("translate-x-0");
-
-label.base("absolute cursor-pointer whitespace-nowrap");
-label.color("text-gray-700");
-label.size("text-sm font-light");
-label.layout("left-12");
-
-inputSignal.xs && (
-    container.size("h-3 w-6"), 
-    button.size("h-3 w-6"), 
-    thumb.size("h-3 w-3")
-)
-inputSignal.sm && (
-    container.size("h-4 w-8"), 
-    button.size("h-4 w-8"), 
-    thumb.size("h-4 w-4")
-)
-inputSignal.md && (
-    container.size("h-5 w-10"), 
-    button.size("h-5 w-10"), 
-    thumb.size("h-5 w-5")
-)
-inputSignal.lg && (
-    container.size("h-6 w-12"), 
-    button.size("h-6 w-12"), 
-    thumb.size("h-6 w-6")
-)
-
-inputSignal.square && (button.shape("rounded-md"), thumb.shape("rounded-md"));
-inputSignal.pill && (button.shape("rounded-full"), thumb.shape("rounded-full"));
-
-inputSignal.labelLeft && label.layout("right-12 left-auto");
-inputSignal.labelRight && label.layout("left-12");
-inputSignal.labelTop && label.layout("bottom-8 left-0 right-0");
-inputSignal.labelBottom && label.layout("top-8 left-0 right-0");
-inputSignal.labelHidden && label.base("absolute opacity-0 pointer-events-none");
-
-inputSignal.disabled && (button.interactive("cursor-not-allowed opacity-40"), thumb.interactive("opacity-40"));
-
-inputSignal.id && data("id");
-inputSignal.label && data("label");
-inputSignal.name && data("name");
-inputSignal.value && data("value");
-inputSignal.checked && data("checked");
-inputSignal.defaultChecked && data("defaultChecked");
-inputSignal.disabled && data("disabled");
-inputSignal.required && data("required");
-inputSignal.readOnly && data("readOnly");
-inputSignal.ariaLabel && data("aria-label");
-inputSignal.ariaLabelledBy && data("aria-labelledby");
-inputSignal.ariaDescribedBy && data("aria-describedby");
-inputSignal.ariaInvalid && data("aria-invalid");
-inputSignal.ariaChecked && data("aria-checked");
-
-
-state("checked", 1, false);
-stateSignal.checked?.get && (
-    thumb.position("translate-x-4"),
-    inputSignal.xs && thumb.position("translate-x-3"),
-    inputSignal.sm && thumb.position("translate-x-4"),
-    inputSignal.md && thumb.position("translate-x-5"),
-    inputSignal.lg && thumb.position("translate-x-6"),
-    button.color("bg-blue-600")
-);
+    container.base("relative");
+    container.size("h-4 w-8");
+    container.color("bg-transparent");
+    container.layout("inline-flex items-center gap-2");
+
+    button.base("relative transition-colors duration-500 cursor-pointer");
+    button.size("h-4 w-8");
+    button.color("bg-gray-200");
+    button.shape("rounded-full");
+    button.layout("inline-flex items-center");
+    button.checked("checked:bg-blue-600");
+
+    thumb.base("absolute transition-transform duration-500");
+    thumb.color("bg-white");
+    thumb.shape("rounded-full");
+    thumb.size("h-4 w-4");
+    thumb.layout("inline-block");
+    thumb.position("translate-x-0");
+
+    label.base("absolute cursor-pointer whitespace-nowrap");
+    label.color("text-gray-700");
+    label.size("text-sm font-light");
+    label.layout("left-12");
+
+    inputSignal.xs && (
+        container.size("h-3 w-6"), 
+        button.size("h-3 w-6"), 
+        thumb.size("h-3 w-3")
+    )
+    inputSignal.sm && (
+        container.size("h-4 w-8"), 
+        button.size("h-4 w-8"), 
+        thumb.size("h-4 w-4")
+    )
+    inputSignal.md && (
+        container.size("h-5 w-10"), 
+        button.size("h-5 w-10"), 
+        thumb.size("h-5 w-5")
+    )
+    inputSignal.lg && (
+        container.size("h-6 w-12"), 
+        button.size("h-6 w-12"), 
+        thumb.size("h-6 w-6")
+    )
+
+    inputSignal.square && (button.shape("rounded-md"), thumb.shape("rounded-md"));
+    inputSignal.pill && (button.shape("rounded-full"), thumb.shape("rounded-full"));
+
+    inputSignal.labelLeft && label.layout("right-12 left-auto");
+    inputSignal.labelRight && label.layout("left-12");
+    inputSignal.labelTop && label.layout("bottom-8 left-0 right-0");
+    inputSignal.labelBottom && label.layout("top-8 left-0 right-0");
+    inputSignal.labelHidden && label.base("absolute opacity-0 pointer-events-none");
+
+    inputSignal.disabled && (button.interactive("cursor-not-allowed opacity-40"), thumb.interactive("opacity-40"));
+
+    inputSignal.id && data("id");
+    inputSignal.label && data("label");
+    inputSignal.name && data("name");
+    inputSignal.value && data("value");
+    inputSignal.checked && data("checked");
+    inputSignal.defaultChecked && data("defaultChecked");
+    inputSignal.disabled && data("disabled");
+    inputSignal.required && data("required");
+    inputSignal.readOnly && data("readOnly");
+    inputSignal.ariaLabel && data("aria-label");
+    inputSignal.ariaLabelledBy && data("aria-labelledby");
+    inputSignal.ariaDescribedBy && data("aria-describedby");
+    inputSignal.ariaInvalid && data("aria-invalid");
+    inputSignal.ariaChecked && data("aria-checked");
+
+    state("checked", 1, false);
+    stateSignal.checked?.get && (
+        thumb.position("translate-x-4"),
+        inputSignal.xs && thumb.position("translate-x-3"),
+        inputSignal.sm && thumb.position("translate-x-4"),
+        inputSignal.md && thumb.position("translate-x-5"),
+        inputSignal.lg && thumb.position("translate-x-6"),
+        button.color("bg-blue-600")
+    );
 
   return (
      <div className={classes(layerSignal.container)}>