signal-layers 0.0.5

package/src/CheckBox.jsx

@@ -0,0 +1,149 @@
+import { useState } from "react";
+
+export function CheckBox(contract = {}) {
+
+  const [inputSignal, layerSignal, dataSignal, stateSignal] = [{ ...contract }, {}, {}, {}];
+  const checkboxId = `checkbox-${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, checkbox, label;
+
+  container = {
+    base: layer("base", "container"),
+    color: layer("color", "container"),
+    size: layer("size", "container"),
+    layout: layer("layout", "container")
+  }
+
+  checkbox = {
+    base: layer("base", "checkbox"),
+    color: layer("color", "checkbox"),
+    size: layer("size", "checkbox"),
+    layout: layer("layout", "checkbox"),
+    checked: layer("checked", "checkbox"),
+    border: layer("border", "checkbox"),
+    shape: layer("shape", "checkbox")
+  }
+
+  label = {
+    base: layer("base", "label"),
+    color: layer("color", "label"),
+    font: layer("font", "label"),
+    size: layer("size", "label"),
+    layout: layer("layout", "label")
+  }
+ 
+  container.base("relative");
+  container.color("bg-transparent");
+  container.size("h-3 w-3");
+  container.layout("flex flex-row justify-center items-center");
+
+  checkbox.base("absolute inset-0 appearance-none cursor-pointer");
+  checkbox.color("border-gray-300 bg-transparent");
+  checkbox.size("h-3 w-3 checked:after:text-[8px]");
+  checkbox.border("border-2");
+  checkbox.shape("rounded-sm");
+  checkbox.layout("transition-all duration-200");
+  checkbox.checked(" checked:after:leading-none checked:border-blue-600 checked:bg-gray-300 checked:after:content-['✓'] checked:after:absolute checked:after:top-1/2 checked:after:left-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2");
+
+  label.base("absolute cursor-pointer");
+  label.color("text-gray-800");
+  label.font("font-light");
+  label.size("text-sm");
+  label.layout("left-5");
+
+
+inputSignal.primary && checkbox.color("border-blue-600 checked:bg-blue-50 checked:border-blue-600");
+inputSignal.secondary && checkbox.color("border-gray-600 checked:bg-gray-50 checked:border-gray-600");
+inputSignal.danger && checkbox.color("border-red-600 checked:bg-red-50 checked:border-red-600");
+inputSignal.success && checkbox.color("border-green-600 checked:bg-green-50 checked:border-green-600");
+inputSignal.warning && checkbox.color("border-yellow-600 checked:bg-yellow-50 checked:border-yellow-600");
+inputSignal.info && checkbox.color("border-cyan-600 checked:bg-cyan-50 checked:border-cyan-600");
+
+inputSignal.square && checkbox.shape("rounded-none");
+inputSignal.rounded && checkbox.shape("rounded-sm");
+inputSignal.pill && checkbox.shape("rounded-full");
+
+inputSignal.hoverScale && checkbox.layout("hover:scale-105");
+inputSignal.pressShrink && checkbox.layout("active:scale-95");
+inputSignal.focusRing && checkbox.layout("focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1");
+inputSignal.noTransition && checkbox.layout("transition-none");
+
+inputSignal.loading && checkbox.color("opacity-50 cursor-wait");
+inputSignal.readonly && checkbox.color("cursor-not-allowed opacity-60");
+inputSignal.required && label.color("text-gray-900 font-medium");
+
+inputSignal.borderNone && checkbox.border("border-0");
+inputSignal.borderThick && checkbox.border("border-4");
+inputSignal.borderDashed && checkbox.border("border-2 border-dashed");
+
+  inputSignal.xs && (label.size("text-xs"), container.size("h-2 w-2"), checkbox.size("h-2 w-2 checked:after:text-[4px]"));
+  inputSignal.sm && (label.size("text-sm"), container.size("h-3 w-3"), checkbox.size("h-3 w-3 checked:after:text-[8px]"));
+  inputSignal.md && (label.size("text-md"), container.size("h-4 w-4"), checkbox.size("h-4 w-4 checked:after:text-[10px]"));
+  inputSignal.lg && (label.size("text-lg"), container.size("h-5 w-5"), checkbox.size("h-5 w-5 checked:after:text-[12px]"));
+
+  inputSignal.labelLeft && label.layout("left-5");
+  inputSignal.labelRight && label.layout("right-5");
+  inputSignal.labelBottom && label.layout("top-5");
+  inputSignal.labelTop && label.layout("bottom-5");
+
+  inputSignal.label && data("label");
+  inputSignal.checked && data("checked");
+  inputSignal.defaultChecked && data("defaultChecked");
+  inputSignal.onChange && data("onChange");
+  inputSignal.disabled && data("disabled");
+  inputSignal.ariaLabel && data("ariaLabel");
+  inputSignal.ariaLabelledBy && data("ariaLabelledBy");
+  inputSignal.ariaDescribedBy && data("ariaDescribedBy");
+  inputSignal.ariaInvalid && data("ariaInvalid");
+  state("checked", 1, 0);
+
+  return (
+    <div className={classes(layerSignal.container)}>
+
+      <input 
+      type="checkbox" 
+      id={checkboxId} 
+      checked={dataSignal.checked ?? stateSignal.checked?.get}
+      defaultChecked={dataSignal.defaultChecked}
+      onChange={(e) => {
+        const v = e.target.checked;
+        stateSignal.checked?.set(v);
+        dataSignal.onChange?.(v);
+      }}
+      disabled={dataSignal.disabled}
+      aria-label={dataSignal.ariaLabel}
+      aria-labelledby={dataSignal.ariaLabelledBy}
+      aria-invalid={dataSignal.ariaInvalid}
+      aria-describedby={dataSignal.ariaDescribedBy}
+      className={`peer ${classes(layerSignal.checkbox)}`}
+      />
+      
+
+
+      {dataSignal.label && (<label htmlFor={checkboxId} className={classes(layerSignal.label)}>{dataSignal.label}</label>)}
+    </div>
+  )
+ 
+}

package/src/Dropdown.jsx

@@ -0,0 +1,217 @@
+import { Button } from "./Button";
+import { useState } from "react";
+
+export function Dropdown(contract = {}) {
+  /* ────────────────────────────────────────────────────────────────────────────
+   * CONTRACT
+   * ────────────────────────────────────────────────────────────────────────────
+   *
+   * Foundation: Button trigger with dropdown menu list
+   *
+   * Signals:
+   *   Position: top, bottom, left, right
+   *   Align: start, center, end
+   *   Size: xs, sm, md, lg
+   *   Layout: inline, block, centered
+   *   State: disabled
+   *   Interaction: reactClick, reactHover
+   *
+   * Data:
+   *   menuName - Text for trigger button
+   *   items - Array of {label, onClick, href?} objects
+   *   onItemSelect - Callback when item selected
+   *   onMenuClick - Callback when menu clicked
+   *
+   * Defaults: bottom, start, sm, inline, reactClick
+   *
+   * Usage:
+   * <Dropdown menuName="Menu" items={[{label:"Item 1", onClick:() => {}}]} />
+   *
+   * ──────────────────────────────────────────────────────────────────────────── */
+
+  const [inputSignal, layerSignal, dataSignal, stateSignal] = [{ ...contract }, {}, {}, {}];
+
+  /* ────────────────────────────────────────────────────────────────────────────
+   * CONTRACT TOOLS
+   * ──────────────────────────────────────────────────────────────────────────── */
+  const layer = (name,scope = "root") => (className) =>
+    (layerSignal[scope] ||= {},
+     layerSignal[scope][name] ||= [],
+     (layerSignal[scope][name][0] = className));
+
+  const data = (name, key = name) =>
+    inputSignal[key] && (dataSignal[name] = inputSignal[key]);
+
+  const state = (name, priority = 0) => (
+    (stateSignal._hooks ||= {})[name] ||= (() => { const [get, set] = useState(false); 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(" ");
+
+  /* ────────────────────────────────────────────────────────────────────────────
+   * BASE LAYERS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    let root, trigger, menu, item;
+    (() => 
+        (
+            root = {
+                base:       layer("base", "root"),
+                layout:     layer("layout", "root")
+            }
+        )
+    )(),
+    (() => 
+        (
+            trigger = {
+                base:       layer("base", "trigger"),
+                layout:     layer("layout", "trigger")
+            }
+        )
+    )(),
+    (() => 
+        (
+            menu = {
+                base:       layer("base", "menu"),
+                size:       layer("size", "menu"),
+                layout:     layer("layout", "menu"),
+                shape:      layer("shape", "menu"),
+                shadow:     layer("shadow", "menu"),
+                color:      layer("color", "menu"),
+                position:   layer("position", "menu"),
+                animation:  layer("animation", "menu"),
+                visibility: layer("visibility", "menu")
+            }
+        )
+    )(),
+    (() => 
+        (
+            item = {
+                base:       layer("base", "item"),
+                hover:      layer("hover", "item")
+            }
+        )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * DEFAULTS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    (() => 
+        (
+            root.base("relative"),
+            root.layout("inline-block"),
+            trigger.base("cursor-pointer select-none"),
+            menu.base("absolute z-50"),
+            menu.layout("flex flex-col"),
+            menu.shape("rounded-lg"),
+            menu.shadow("shadow-lg"),
+            menu.color("bg-white/90 text-gray-800"),
+            menu.visibility("opacity-100 pointer-events-auto"),
+            menu.animation("transition-all duration-200"),
+            menu.position("top-full left-0 mt-2"),
+            menu.size("min-w-40 text-sm"),
+            item.base("px-4 py-2 whitespace-nowrap"),
+            item.hover("hover:bg-gray-100 hover:rounded-lg cursor-pointer")
+        )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * MENU POSITION SIGNALS
+   * ──────────────────────────────────────────────────────────────────────────── */
+     (()=>
+        (
+            inputSignal.bottom      &&      menu.position("top-full left-0 mt-2"),
+            inputSignal.top         &&      menu.position("bottom-full left-0 mb-2"),
+            inputSignal.right       &&      menu.position("left-full top-0 ml-2"),
+            inputSignal.left        &&      menu.position("right-full top-0 mr-2"),
+            inputSignal.start       &&      menu.position("left-0"),
+            inputSignal.center      &&      menu.position("left-1/2 -translate-x-1/2"),
+            inputSignal.end         &&      menu.position("right-0")
+         )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * MENU SIZE SIGNALS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    (()=>
+        (
+            inputSignal.xs          &&      menu.size("min-w-28 text-xs"),
+            inputSignal.sm          &&      menu.size("min-w-36 text-sm"),
+            inputSignal.md          &&      menu.size("min-w-44 text-base"),
+            inputSignal.lg          &&      menu.size("min-w-56 text-lg"),
+            inputSignal.xl          &&      menu.size("min-w-64 text-xl")
+        )
+    )(),
+   /* ────────────────────────────────────────────────────────────────────────────
+    * MENU LAYOUT SIGNALS
+    * ──────────────────────────────────────────────────────────────────────────── */
+    (()=>
+        (
+            inputSignal.block       &&      root.layout("block w-full"),
+            inputSignal.inline      &&      root.layout("inline-block"),
+            inputSignal.centered    &&      root.layout("mx-auto")
+        )
+    )(),
+   /* ────────────────────────────────────────────────────────────────────────────
+    * MENU VISIBILITY SIGNALS
+    * ──────────────────────────────────────────────────────────────────────────── */
+    (()=>
+        (
+            inputSignal.disabled    &&      (
+                trigger.base("opacity-50 pointer-events-none"),
+                menu.visibility("hidden")
+            )   
+        )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * DATA & STATE
+   * ──────────────────────────────────────────────────────────────────────────── */
+    (()=>
+        (
+            inputSignal.items         && data("items"),
+            inputSignal.menuName      && data("menuName"),
+            inputSignal.onItemSelect  && data("onItemSelect"),
+            inputSignal.onMenuClick   && data("onMenuClick"),
+            state("reactHover", 0),   state("reactClick", 0),
+            inputSignal.reactHover    && state("reactHover", 1),
+            state("reactClick", 1)
+        )
+    )();
+  /* ────────────────────────────────────────────────────────────────────────────
+   * INTERNAL COMPONENTS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    const DropdownItem = ({ item }) => (
+    <div
+        className={classes(layerSignal.item)}
+        onClick={() => {
+            stateSignal.reactClick?.set && stateSignal.reactClick.set(false);
+            dataSignal.onItemSelect?.(item)
+        }}
+        {...(item.href ? { href: item.href, onClick: e => e.stopPropagation() } : {})}
+    >
+        {item.label}
+    </div>
+    );
+  /* ────────────────────────────────────────────────────────────────────────────
+   * RENDER
+   * ──────────────────────────────────────────────────────────────────────────── */
+
+  return (
+    <div className={classes(layerSignal.root)}>
+      <Button 
+      className={classes(layerSignal.trigger)}
+      onClick={stateSignal.reactClick?.set && (() => stateSignal.reactClick.set(!stateSignal.reactClick.get))}
+      onMouseEnter={stateSignal.reactHover?.set && (() => stateSignal.reactHover.set(true))}
+      onMouseLeave={stateSignal.reactHover?.set && (() => stateSignal.reactHover.set(false))}
+      activeNone
+      >
+        {dataSignal.menuName}
+      </Button>
+
+      <div className={classes(layerSignal.menu)}>
+        {(stateSignal.reactClick?.get || stateSignal.reactHover?.get) && dataSignal.items?.map((item, i) => (
+          <DropdownItem key={i} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}
+

package/src/FabMenu.jsx

@@ -0,0 +1,205 @@
+import { Button } from "./Button";
+import { useState } from "react";
+
+export function FabMenu(input = {}) {
+  /* ────────────────────────────────────────────────────────────────────────────
+   * CONTRACT
+   * ────────────────────────────────────────────────────────────────────────────
+   * Signals:
+   *   React:          reactHover, reactClick
+   *   Position:       bottomRight, bottomLeft, topRight, topLeft
+   *   Layout:         actionsTop, actionsBottom, actionsLeft, actionsRight
+   *   Size:           sm, md, lg, xl
+   *   State:          disabled 
+   *
+   * Data:
+   *   icon            Icon for the FAB button
+   *   actions         Array of { icon, label, onClick } objects
+   * 
+   * Defaults:         bottomRight, md, reactClick
+   * 
+   * Usage:            <FabMenu icon="+" actions={[{icon:"", label:"Action 1", onClick:() => {}}]} />
+   *
+   * ──────────────────────────────────────────────────────────────────────────── */
+
+  const [inputSignal, layerSignal, dataSignal, stateSignal] = [{ ...input }, {}, {}, {}];
+
+  /* ────────────────────────────────────────────────────────────────────────────
+   * CONTRACT TOOLS
+   * ──────────────────────────────────────────────────────────────────────────── */
+  const layer = (name, scope = "root") => (className) =>
+    (layerSignal[scope] ||= {},
+     layerSignal[scope][name] ||= [],
+     (layerSignal[scope][name][0] = className));
+
+  const data = (name, key = name) =>
+    inputSignal[key] && (dataSignal[name] = inputSignal[key]);
+
+  const classes = (layers = {}) =>
+    Object.values(layers).map(l => l[0]).filter(Boolean).join(" ");
+
+  const state = (name, priority = 0) => (
+      (stateSignal._hooks ||= {})[name] ||= (() => { const [get, set] = useState(false); return ({ get, set }); })(),
+      priority && (!stateSignal._priority || priority > stateSignal._priority) && (stateSignal[name] = stateSignal._hooks[name], stateSignal._priority = priority)
+    );
+  /* ────────────────────────────────────────────────────────────────────────────
+   * BASE LAYERS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    let root, fab, actions, item;
+    (() => 
+        (
+            root = {
+                base: layer("base", "root"),
+                position: layer("position", "root")
+            }
+        )
+    )(),
+    (() => 
+        (
+            fab = {
+                base: layer("base", "fab"),
+                size: layer("size", "fab"),
+                visibility: layer("visibility", "fab")
+            }
+        )
+    )(),
+    (() => 
+        (
+             actions = {
+                base: layer("base", "actions"),
+                layout: layer("layout", "actions"),
+                visibility: layer("visibility", "actions"),
+                animation: layer("animation", "actions")
+            }
+        )
+    )(),
+    (() => 
+        (
+            item = { base: layer("base", "item") }
+        )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * DEFAULTS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    (() => 
+        (
+            root.base("fixed z-50"),
+            root.position("bottom-6 right-6"),
+            fab.base("flex items-center justify-center z-10"),
+            actions.base("absolute flex z-40"),
+            actions.layout("flex flex-col-reverse items-center absolute gap-2 bottom-full right-1/2 translate-x-1/2 mb-3 w-auto min-w-[40px]"),
+            actions.visibility("opacity-100 pointer-events-auto"),
+            actions.animation("transition-all duration-300"),
+            item.base("flex items-center justify-center")
+        )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * POSITION SIGNALS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    (() => 
+        (
+            inputSignal.bottomRight     && root.position("bottom-6 right-6"),
+            inputSignal.bottomLeft      && root.position("bottom-6 left-6"),
+            inputSignal.topRight        && root.position("top-6 right-6"),
+            inputSignal.topLeft         && root.position("top-6 left-6")
+        )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * LAYOUT SIGNALS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    (() => 
+        (        
+            inputSignal.actionsTop      && actions.layout("flex flex-col-reverse items-center absolute gap-2 bottom-full right-1/2 translate-x-1/2 mb-3 w-auto min-w-[40px]"),
+            inputSignal.actionsBottom   && actions.layout("flex flex-col-reverse items-center absolute gap-2 top-full right-1/2 translate-x-1/2 mb-3 w-auto min-w-[40px]"),
+            inputSignal.actionsLeft     && actions.layout("flex flex-col items-center absolute gap-2 right-full top-0 mr-2"),
+            inputSignal.actionsRight    && actions.layout("flex flex-col items-center absolute gap-2 left-full top-0 ml-2")
+        )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * SIZE SIGNALS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    (() => 
+        (
+            inputSignal.sm      && fab.size("w-8 h-8"),
+            inputSignal.md      && fab.size("w-10 h-10"),
+            inputSignal.lg      && fab.size("w-12 h-12"),
+            inputSignal.xl      && fab.size("w-14 h-14")
+        )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * VISIBILITY SIGNALS
+   * ──────────────────────────────────────────────────────────────────────────── */
+    (() =>
+        (
+            inputSignal.disabled && (
+                fab.visibility("opacity-50 pointer-events-none"),
+                actions.visibility("hidden")
+            )
+        )
+    )(),
+  /* ────────────────────────────────────────────────────────────────────────────
+   * DATA & STATE
+   * ──────────────────────────────────────────────────────────────────────────── */
+    (() => 
+         (
+            inputSignal.icon      && data("icon"),
+            inputSignal.actions   && data("actions"),
+            state("reactHover", 0), inputSignal.reactHover && state("reactHover", 1),
+            state("reactClick", 0), state("reactClick", 1)
+         )
+    )();
+  /* ────────────────────────────────────────────────────────────────────────────
+   * INTERNAL COMPONENTS
+   * ──────────────────────────────────────────────────────────────────────────── */
+  const ActionButton = ({ action }) => (
+    <Button
+      circle
+      sm
+      ghost
+      onClick={() => {
+        action.onClick();
+        stateSignal.reactClick?.set && stateSignal.reactClick?.set(!stateSignal.reactClick.get);
+      }}
+      aria-label={action.label}
+      className={classes(layerSignal.item)}
+    >
+      <span>{action.icon}</span>
+    </Button>
+  );
+  /* ────────────────────────────────────────────────────────────
+   * RENDER
+   * ──────────────────────────────────────────────────────────── */
+  return (
+    <div 
+      className={classes(layerSignal.root)}
+    >
+      <div 
+        className={classes(layerSignal.actions)}
+      >
+        {
+          (stateSignal.reactHover?.get || stateSignal.reactClick?.get) 
+            && dataSignal.actions?.map((action, i) => (
+              <ActionButton 
+                key={i} 
+                action={action} 
+              />
+            ))
+        }
+      </div>
+      
+      <Button
+        circle
+        md
+        cta
+        aria-haspopup="true"
+        aria-expanded={stateSignal.reactClick?.get}
+        onClick={() => stateSignal.reactClick?.set && stateSignal.reactClick?.set(!stateSignal.reactClick.get)}
+        onMouseEnter={stateSignal.reactHover?.set && (() => stateSignal.reactHover.set(true))}
+        onMouseLeave={stateSignal.reactHover?.set && (() => stateSignal.reactHover.set(false))}
+        className={classes(layerSignal.fab)}
+      >
+        {dataSignal.icon}
+      </Button>
+    </div>
+  );
+}