@f0rbit/ui 0.1.2

package/dist/index.js

@@ -0,0 +1,1137 @@
+import { delegateEvents, template, spread, mergeProps, memo, insert, isServer, createComponent, Portal, addEventListener, use, effect, className, style, setAttribute } from 'solid-js/web';
+import { createContext, splitProps, onMount, onCleanup, Show, useContext, createSignal, createEffect, For } from 'solid-js';
+
+// src/components/Button.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span class="spinner spinner-sm">`);
+var variantClasses = {
+  primary: "",
+  secondary: "btn-secondary",
+  ghost: "btn-ghost",
+  danger: "btn-danger"
+};
+var sizeClasses = {
+  sm: "btn-sm",
+  md: "",
+  lg: "btn-lg"
+};
+function Button(props) {
+  const [local, rest] = splitProps(props, ["variant", "size", "icon", "label", "loading", "class", "disabled", "children"]);
+  const classes = () => {
+    const parts = ["btn"];
+    parts.push(variantClasses[local.variant ?? "primary"]);
+    if (local.size && local.size !== "md") {
+      parts.push(sizeClasses[local.size]);
+    }
+    if (local.icon) {
+      parts.push("btn-icon");
+    }
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes();
+      },
+      get ["aria-label"]() {
+        return memo(() => !!local.icon)() ? local.label : void 0;
+      },
+      get disabled() {
+        return local.disabled || local.loading;
+      }
+    }, rest), false, true);
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!local.loading);
+      return () => _c$() ? _tmpl$2() : local.children;
+    })());
+    return _el$;
+  })();
+}
+var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
+var variantClasses2 = {
+  default: "",
+  success: "badge-success",
+  error: "badge-error",
+  warning: "badge-warning",
+  info: "badge-info",
+  accent: "badge-accent"
+};
+function Badge(props) {
+  const [local, rest] = splitProps(props, ["variant", "class", "children"]);
+  const classes = () => {
+    const parts = ["badge"];
+    const variant = local.variant ?? "default";
+    if (variant !== "default") {
+      parts.push(variantClasses2[variant]);
+    }
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  return (() => {
+    var _el$ = _tmpl$3();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
+}
+var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<h3>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<p>`);
+function Card(props) {
+  const [local, rest] = splitProps(props, ["interactive", "class", "children"]);
+  const classes = () => {
+    const parts = ["card"];
+    if (local.interactive) {
+      parts.push("card-interactive");
+    }
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  return (() => {
+    var _el$ = _tmpl$4();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
+}
+function CardHeader(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (() => {
+    var _el$2 = _tmpl$4();
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return `card-header ${local.class ?? ""}`.trim();
+      }
+    }, rest), false, true);
+    insert(_el$2, () => local.children);
+    return _el$2;
+  })();
+}
+function CardTitle(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (() => {
+    var _el$3 = _tmpl$22();
+    spread(_el$3, mergeProps({
+      get ["class"]() {
+        return `card-title ${local.class ?? ""}`.trim();
+      }
+    }, rest), false, true);
+    insert(_el$3, () => local.children);
+    return _el$3;
+  })();
+}
+function CardDescription(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (() => {
+    var _el$4 = _tmpl$32();
+    spread(_el$4, mergeProps({
+      get ["class"]() {
+        return `card-description ${local.class ?? ""}`.trim();
+      }
+    }, rest), false, true);
+    insert(_el$4, () => local.children);
+    return _el$4;
+  })();
+}
+function CardContent(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (() => {
+    var _el$5 = _tmpl$4();
+    spread(_el$5, mergeProps({
+      get ["class"]() {
+        return `card-content ${local.class ?? ""}`.trim();
+      }
+    }, rest), false, true);
+    insert(_el$5, () => local.children);
+    return _el$5;
+  })();
+}
+function CardFooter(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (() => {
+    var _el$6 = _tmpl$4();
+    spread(_el$6, mergeProps({
+      get ["class"]() {
+        return `card-footer ${local.class ?? ""}`.trim();
+      }
+    }, rest), false, true);
+    insert(_el$6, () => local.children);
+    return _el$6;
+  })();
+}
+var _tmpl$5 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$23 = /* @__PURE__ */ template(`<textarea>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<select>`);
+function Input(props) {
+  const [local, rest] = splitProps(props, ["error", "class", "disabled"]);
+  const classes = () => `input ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+  return (() => {
+    var _el$ = _tmpl$5();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes();
+      },
+      get disabled() {
+        return local.disabled;
+      }
+    }, rest), false, false);
+    return _el$;
+  })();
+}
+function Textarea(props) {
+  const [local, rest] = splitProps(props, ["error", "class", "disabled"]);
+  const classes = () => `textarea ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+  return (() => {
+    var _el$2 = _tmpl$23();
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return classes();
+      },
+      get disabled() {
+        return local.disabled;
+      }
+    }, rest), false, false);
+    return _el$2;
+  })();
+}
+function Select(props) {
+  const [local, rest] = splitProps(props, ["error", "class", "disabled", "children"]);
+  const classes = () => `select ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+  return (() => {
+    var _el$3 = _tmpl$33();
+    spread(_el$3, mergeProps({
+      get ["class"]() {
+        return classes();
+      },
+      get disabled() {
+        return local.disabled;
+      }
+    }, rest), false, true);
+    insert(_el$3, () => local.children);
+    return _el$3;
+  })();
+}
+var _tmpl$6 = /* @__PURE__ */ template(`<span><span class=status-dot></span><span>`);
+var stateClasses = {
+  active: "status-active",
+  inactive: "status-inactive",
+  error: "status-error",
+  pending: "status-pending"
+};
+var defaultLabels = {
+  active: "Active",
+  inactive: "Inactive",
+  error: "Error",
+  pending: "Pending"
+};
+function Status(props) {
+  const [local, rest] = splitProps(props, ["state", "label", "class"]);
+  const classes = () => {
+    const parts = ["status", stateClasses[local.state]];
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  const displayLabel = () => local.label ?? defaultLabels[local.state];
+  return (() => {
+    var _el$ = _tmpl$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, true);
+    insert(_el$3, displayLabel);
+    return _el$;
+  })();
+}
+var _tmpl$7 = /* @__PURE__ */ template(`<div><span class=stat-value></span><span class=stat-label>`);
+function Stat(props) {
+  const [local, rest] = splitProps(props, ["value", "label", "class"]);
+  return (() => {
+    var _el$ = _tmpl$7(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return memo(() => !!local.class)() ? `stat ${local.class}` : "stat";
+      }
+    }, rest), false, true);
+    insert(_el$2, () => local.value);
+    insert(_el$3, () => local.label);
+    return _el$;
+  })();
+}
+var _tmpl$8 = /* @__PURE__ */ template(`<span>`);
+var sizeClasses2 = {
+  sm: "spinner-sm",
+  md: "",
+  lg: "spinner-lg"
+};
+function Spinner(props) {
+  const [local, rest] = splitProps(props, ["size", "class"]);
+  const classes = () => {
+    const parts = ["spinner"];
+    const size = local.size ?? "md";
+    if (size !== "md") {
+      parts.push(sizeClasses2[size]);
+    }
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  return (() => {
+    var _el$ = _tmpl$8();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, false);
+    return _el$;
+  })();
+}
+var _tmpl$9 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m9 18 6-6-6-6">`);
+function Chevron(props) {
+  const [local, rest] = splitProps(props, ["expanded", "facing", "size", "class"]);
+  const classes = () => {
+    const parts = ["chevron"];
+    if (local.facing === "down") {
+      parts.push("chevron-down");
+    }
+    if (local.expanded) {
+      parts.push("active");
+    }
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  const size = () => local.size ?? "1em";
+  return (() => {
+    var _el$ = _tmpl$9();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes();
+      },
+      get width() {
+        return size();
+      },
+      get height() {
+        return size();
+      }
+    }, rest), true, true);
+    return _el$;
+  })();
+}
+var _tmpl$10 = /* @__PURE__ */ template(`<div class=empty>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<div class=empty-icon>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<h3 class=empty-title>`);
+var _tmpl$42 = /* @__PURE__ */ template(`<p class=empty-description>`);
+function Empty(props) {
+  const [local] = splitProps(props, ["icon", "title", "description", "children"]);
+  return (() => {
+    var _el$ = _tmpl$10();
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!local.icon);
+      return () => _c$() && (() => {
+        var _el$2 = _tmpl$24();
+        insert(_el$2, () => local.icon);
+        return _el$2;
+      })();
+    })(), null);
+    insert(_el$, (() => {
+      var _c$2 = memo(() => !!local.title);
+      return () => _c$2() && (() => {
+        var _el$3 = _tmpl$34();
+        insert(_el$3, () => local.title);
+        return _el$3;
+      })();
+    })(), null);
+    insert(_el$, (() => {
+      var _c$3 = memo(() => !!local.description);
+      return () => _c$3() && (() => {
+        var _el$4 = _tmpl$42();
+        insert(_el$4, () => local.description);
+        return _el$4;
+      })();
+    })(), null);
+    insert(_el$, () => local.children, null);
+    return _el$;
+  })();
+}
+var _tmpl$11 = /* @__PURE__ */ template(`<div class=overlay role=presentation><dialog open aria-modal=true>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<button type=button class=modal-close aria-label=Close><svg xmlns=http://www.w3.org/2000/svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><line x1=18 y1=6 x2=6 y2=18></line><line x1=6 y1=6 x2=18 y2=18>`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$43 = /* @__PURE__ */ template(`<h2>`);
+var ModalContext = createContext();
+function Modal(props) {
+  const [local, rest] = splitProps(props, ["open", "onClose", "class", "children"]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && local.open) {
+      local.onClose();
+    }
+  };
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) {
+      local.onClose();
+    }
+  };
+  onMount(() => {
+    if (isServer) return;
+    document.addEventListener("keydown", handleKeyDown);
+  });
+  onCleanup(() => {
+    if (isServer) return;
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+  const classes = () => `modal ${local.class ?? ""}`.trim();
+  return createComponent(Show, {
+    get when() {
+      return local.open;
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          return createComponent(ModalContext.Provider, {
+            get value() {
+              return {
+                onClose: local.onClose
+              };
+            },
+            get children() {
+              var _el$ = _tmpl$11(), _el$2 = _el$.firstChild;
+              _el$.$$keydown = (e) => e.key === "Escape" && local.onClose();
+              _el$.$$click = handleOverlayClick;
+              spread(_el$2, mergeProps({
+                get ["class"]() {
+                  return classes();
+                }
+              }, rest), false, true);
+              insert(_el$2, () => local.children);
+              return _el$;
+            }
+          });
+        }
+      });
+    }
+  });
+}
+function ModalHeader(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const ctx = useContext(ModalContext);
+  return (() => {
+    var _el$3 = _tmpl$35();
+    spread(_el$3, mergeProps({
+      get ["class"]() {
+        return `modal-header ${local.class ?? ""}`.trim();
+      }
+    }, rest), false, true);
+    insert(_el$3, () => local.children, null);
+    insert(_el$3, createComponent(Show, {
+      when: ctx,
+      get children() {
+        var _el$4 = _tmpl$25();
+        addEventListener(_el$4, "click", ctx?.onClose, true);
+        return _el$4;
+      }
+    }), null);
+    return _el$3;
+  })();
+}
+function ModalTitle(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (() => {
+    var _el$5 = _tmpl$43();
+    spread(_el$5, mergeProps({
+      get ["class"]() {
+        return `modal-title ${local.class ?? ""}`.trim();
+      }
+    }, rest), false, true);
+    insert(_el$5, () => local.children);
+    return _el$5;
+  })();
+}
+function ModalBody(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (() => {
+    var _el$6 = _tmpl$35();
+    spread(_el$6, mergeProps({
+      get ["class"]() {
+        return `modal-body ${local.class ?? ""}`.trim();
+      }
+    }, rest), false, true);
+    insert(_el$6, () => local.children);
+    return _el$6;
+  })();
+}
+function ModalFooter(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (() => {
+    var _el$7 = _tmpl$35();
+    spread(_el$7, mergeProps({
+      get ["class"]() {
+        return `modal-footer ${local.class ?? ""}`.trim();
+      }
+    }, rest), false, true);
+    insert(_el$7, () => local.children);
+    return _el$7;
+  })();
+}
+delegateEvents(["click", "keydown"]);
+var _tmpl$12 = /* @__PURE__ */ template(`<div class=dropdown>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<div class=dropdown-trigger>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div class=dropdown-menu>`);
+var _tmpl$44 = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<div class=dropdown-divider>`);
+var DropdownContext = createContext();
+function Dropdown(props) {
+  const [open, setOpen] = createSignal(false);
+  let containerRef;
+  const close = () => setOpen(false);
+  const handleClickOutside = (e) => {
+    if (!containerRef?.contains(e.target)) {
+      close();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && open()) {
+      close();
+    }
+  };
+  onMount(() => {
+    if (isServer) return;
+    document.addEventListener("click", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+  });
+  onCleanup(() => {
+    if (isServer) return;
+    document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+  return createComponent(DropdownContext.Provider, {
+    value: {
+      open,
+      setOpen,
+      close
+    },
+    get children() {
+      var _el$ = _tmpl$12();
+      use((el) => containerRef = el, _el$);
+      insert(_el$, () => props.children);
+      return _el$;
+    }
+  });
+}
+function DropdownTrigger(props) {
+  const ctx = useContext(DropdownContext);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    ctx?.setOpen(!ctx.open());
+  };
+  return (() => {
+    var _el$2 = _tmpl$26();
+    _el$2.$$click = handleClick;
+    insert(_el$2, () => props.children);
+    return _el$2;
+  })();
+}
+function DropdownMenu(props) {
+  const ctx = useContext(DropdownContext);
+  return createComponent(Show, {
+    get when() {
+      return ctx?.open();
+    },
+    get children() {
+      var _el$3 = _tmpl$36();
+      insert(_el$3, () => props.children);
+      return _el$3;
+    }
+  });
+}
+function DropdownItem(props) {
+  const [local, rest] = splitProps(props, ["onClick", "active", "children"]);
+  const ctx = useContext(DropdownContext);
+  const handleClick = () => {
+    local.onClick?.();
+    ctx?.close();
+  };
+  const classes = () => `dropdown-item ${local.active ? "active" : ""}`.trim();
+  return (() => {
+    var _el$4 = _tmpl$44();
+    _el$4.$$click = handleClick;
+    spread(_el$4, mergeProps({
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, true);
+    insert(_el$4, () => local.children);
+    return _el$4;
+  })();
+}
+function DropdownDivider() {
+  return _tmpl$52();
+}
+delegateEvents(["click"]);
+var _tmpl$13 = /* @__PURE__ */ template(`<button class=clamp-toggle>`);
+var _tmpl$27 = /* @__PURE__ */ template(`<div><div>`);
+function Clamp(props) {
+  const [local, rest] = splitProps(props, ["lines", "showMoreText", "showLessText", "class", "children"]);
+  const lines = () => local.lines ?? 3;
+  const showMoreText = () => local.showMoreText ?? "show more";
+  const showLessText = () => local.showLessText ?? "show less";
+  const [expanded, setExpanded] = createSignal(false);
+  const [overflows, setOverflows] = createSignal(false);
+  let contentRef;
+  const checkOverflow = () => {
+    if (!contentRef) return;
+    setOverflows(contentRef.scrollHeight > contentRef.clientHeight);
+  };
+  const toggle = () => setExpanded((prev) => !prev);
+  const wrapperClasses = () => `clamp ${local.class ?? ""}`.trim();
+  const contentClasses = () => expanded() ? "clamp-content" : "clamp-content clamp-clamped";
+  return (() => {
+    var _el$ = _tmpl$27(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return wrapperClasses();
+      }
+    }, rest), false, true);
+    use((el) => {
+      contentRef = el;
+      requestAnimationFrame(checkOverflow);
+    }, _el$2);
+    insert(_el$2, () => local.children);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return overflows() || expanded();
+      },
+      get children() {
+        var _el$3 = _tmpl$13();
+        _el$3.$$click = toggle;
+        insert(_el$3, (() => {
+          var _c$ = memo(() => !!expanded());
+          return () => _c$() ? showLessText() : showMoreText();
+        })());
+        return _el$3;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = contentClasses(), _v$2 = `--clamp-lines: ${lines()}`;
+      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+      _p$.t = style(_el$2, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$14 = /* @__PURE__ */ template(`<div class=collapsible-content>`);
+var _tmpl$28 = /* @__PURE__ */ template(`<div class=collapsible><button class=collapsible-trigger>`);
+function Collapsible(props) {
+  const [local, rest] = splitProps(props, ["defaultOpen", "open", "onOpenChange", "children", "trigger"]);
+  const [internalOpen, setInternalOpen] = createSignal(local.defaultOpen ?? false);
+  const isControlled = () => local.open !== void 0;
+  const isOpen = () => isControlled() ? local.open : internalOpen();
+  const toggle = () => {
+    const next = !isOpen();
+    if (!isControlled()) {
+      setInternalOpen(next);
+    }
+    local.onOpenChange?.(next);
+  };
+  return (() => {
+    var _el$ = _tmpl$28(), _el$2 = _el$.firstChild;
+    _el$2.$$click = toggle;
+    insert(_el$2, () => local.trigger, null);
+    insert(_el$2, createComponent(Chevron, {
+      "class": "collapsible-chevron",
+      get expanded() {
+        return isOpen();
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isOpen();
+      },
+      get children() {
+        var _el$3 = _tmpl$14();
+        insert(_el$3, () => local.children);
+        return _el$3;
+      }
+    }), null);
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$15 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 16 16"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polyline points="13 4 6 12 3 9">`);
+var _tmpl$29 = /* @__PURE__ */ template(`<div class=step-description>`);
+var _tmpl$37 = /* @__PURE__ */ template(`<div><div></div><div><div class=step-title></div></div><div>`);
+var _tmpl$45 = /* @__PURE__ */ template(`<div>`);
+var StepperContext = createContext();
+var statusClasses = {
+  completed: "step-completed",
+  current: "step-current",
+  upcoming: "step-upcoming"
+};
+function CheckIcon() {
+  return _tmpl$15();
+}
+var StepContext = createContext();
+function Step(props) {
+  const [local, rest] = splitProps(props, ["title", "description", "icon", "status", "class"]);
+  const stepperCtx = useContext(StepperContext);
+  const stepCtx = useContext(StepContext);
+  const stepNumber = stepperCtx?.registerStep() ?? 1;
+  const orientation = () => stepCtx?.orientation() ?? "horizontal";
+  const status = () => local.status ?? "upcoming";
+  const isVertical = () => orientation() === "vertical";
+  const classes = () => {
+    const parts = ["step", statusClasses[status()]];
+    if (isVertical()) {
+      parts.push("vertical-connector-item");
+    }
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  const indicatorClasses = () => {
+    const parts = ["step-indicator"];
+    if (isVertical()) {
+      parts.push("vertical-indicator");
+    }
+    return parts.join(" ");
+  };
+  const contentClasses = () => {
+    const parts = ["step-content"];
+    if (isVertical()) {
+      parts.push("vertical-content");
+    }
+    return parts.join(" ");
+  };
+  const connectorClasses = () => {
+    const parts = ["step-connector"];
+    if (isVertical()) {
+      parts.push("vertical-connector");
+    }
+    return parts.join(" ");
+  };
+  const indicator = () => {
+    if (status() === "completed") {
+      return createComponent(CheckIcon, {});
+    }
+    if (local.icon) {
+      return local.icon;
+    }
+    return stepNumber;
+  };
+  return (() => {
+    var _el$2 = _tmpl$37(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$7 = _el$4.nextSibling;
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, true);
+    insert(_el$3, indicator);
+    insert(_el$5, () => local.title);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return local.description;
+      },
+      get children() {
+        var _el$6 = _tmpl$29();
+        insert(_el$6, () => local.description);
+        return _el$6;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = indicatorClasses(), _v$2 = contentClasses(), _v$3 = connectorClasses();
+      _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+      _v$3 !== _p$.a && className(_el$7, _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$2;
+  })();
+}
+function Stepper(props) {
+  const [local, rest] = splitProps(props, ["orientation", "class", "children"]);
+  let stepCounter = 0;
+  const registerStep = () => ++stepCounter;
+  const orientation = () => local.orientation ?? "horizontal";
+  const classes = () => {
+    const parts = ["stepper", orientation() === "horizontal" ? "stepper-horizontal" : "stepper-vertical"];
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  return createComponent(StepperContext.Provider, {
+    value: {
+      registerStep
+    },
+    get children() {
+      return createComponent(StepContext.Provider, {
+        value: {
+          orientation
+        },
+        get children() {
+          var _el$8 = _tmpl$45();
+          spread(_el$8, mergeProps({
+            get ["class"]() {
+              return classes();
+            }
+          }, rest), false, true);
+          insert(_el$8, () => local.children);
+          return _el$8;
+        }
+      });
+    }
+  });
+}
+var _tmpl$16 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$210 = /* @__PURE__ */ template(`<div role=tablist>`);
+var _tmpl$38 = /* @__PURE__ */ template(`<button type=button role=tab>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<div role=tabpanel>`);
+var TabsContext = createContext();
+function Tabs(props) {
+  const [local, rest] = splitProps(props, ["defaultValue", "value", "onValueChange", "children", "class"]);
+  const [internalValue, setInternalValue] = createSignal(local.defaultValue ?? "");
+  const isControlled = () => local.value !== void 0;
+  const activeTab = () => isControlled() ? local.value : internalValue();
+  const setActiveTab = (id) => {
+    if (!isControlled()) {
+      setInternalValue(id);
+    }
+    local.onValueChange?.(id);
+  };
+  const classes = () => `tabs ${local.class ?? ""}`.trim();
+  return createComponent(TabsContext.Provider, {
+    value: {
+      activeTab,
+      setActiveTab
+    },
+    get children() {
+      var _el$ = _tmpl$16();
+      spread(_el$, mergeProps({
+        get ["class"]() {
+          return classes();
+        }
+      }, rest), false, true);
+      insert(_el$, () => local.children);
+      return _el$;
+    }
+  });
+}
+function TabList(props) {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  const classes = () => `tab-list ${local.class ?? ""}`.trim();
+  return (() => {
+    var _el$2 = _tmpl$210();
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, true);
+    insert(_el$2, () => local.children);
+    return _el$2;
+  })();
+}
+function Tab(props) {
+  const [local, rest] = splitProps(props, ["value", "children", "class"]);
+  const ctx = useContext(TabsContext);
+  const isActive = () => ctx?.activeTab() === local.value;
+  const handleClick = () => {
+    ctx?.setActiveTab(local.value);
+  };
+  const classes = () => {
+    const parts = ["tab"];
+    if (isActive()) {
+      parts.push("active");
+    }
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  return (() => {
+    var _el$3 = _tmpl$38();
+    _el$3.$$click = handleClick;
+    spread(_el$3, mergeProps({
+      get ["aria-selected"]() {
+        return isActive();
+      },
+      get tabIndex() {
+        return isActive() ? 0 : -1;
+      },
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, true);
+    insert(_el$3, () => local.children);
+    return _el$3;
+  })();
+}
+function TabPanel(props) {
+  const [local, rest] = splitProps(props, ["value", "children", "class"]);
+  const ctx = useContext(TabsContext);
+  const isActive = () => ctx?.activeTab() === local.value;
+  const classes = () => `tab-panel ${local.class ?? ""}`.trim();
+  return createComponent(Show, {
+    get when() {
+      return isActive();
+    },
+    get children() {
+      var _el$4 = _tmpl$46();
+      spread(_el$4, mergeProps({
+        get ["class"]() {
+          return classes();
+        }
+      }, rest), false, true);
+      insert(_el$4, () => local.children);
+      return _el$4;
+    }
+  });
+}
+delegateEvents(["click"]);
+var _tmpl$17 = /* @__PURE__ */ template(`<label><input type=checkbox class=checkbox-input><span class=checkbox-box aria-hidden=true><svg class=checkbox-check viewBox="0 0 12 12"fill=none><path d="M2 6L5 9L10 3"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path></svg><span class=checkbox-indeterminate>`);
+var _tmpl$211 = /* @__PURE__ */ template(`<span class=checkbox-content>`);
+var _tmpl$39 = /* @__PURE__ */ template(`<span class=checkbox-label>`);
+var _tmpl$47 = /* @__PURE__ */ template(`<span class=checkbox-description>`);
+function Checkbox(props) {
+  const [local, rest] = splitProps(props, ["label", "description", "indeterminate", "class", "disabled", "id"]);
+  let inputRef;
+  const setIndeterminate = () => {
+    if (inputRef) inputRef.indeterminate = local.indeterminate ?? false;
+  };
+  onMount(setIndeterminate);
+  createEffect(setIndeterminate);
+  const classes = () => `checkbox ${local.disabled ? "checkbox-disabled" : ""} ${local.class ?? ""}`.trim();
+  const inputId = () => local.id ?? (local.label ? `checkbox-${local.label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return (() => {
+    var _el$ = _tmpl$17(), _el$2 = _el$.firstChild; _el$2.nextSibling;
+    var _ref$ = inputRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : inputRef = _el$2;
+    spread(_el$2, mergeProps({
+      get id() {
+        return inputId();
+      },
+      get disabled() {
+        return local.disabled;
+      }
+    }, rest), false, false);
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!(local.label || local.description));
+      return () => _c$() && (() => {
+        var _el$4 = _tmpl$211();
+        insert(_el$4, (() => {
+          var _c$2 = memo(() => !!local.label);
+          return () => _c$2() && (() => {
+            var _el$5 = _tmpl$39();
+            insert(_el$5, () => local.label);
+            return _el$5;
+          })();
+        })(), null);
+        insert(_el$4, (() => {
+          var _c$3 = memo(() => !!local.description);
+          return () => _c$3() && (() => {
+            var _el$6 = _tmpl$47();
+            insert(_el$6, () => local.description);
+            return _el$6;
+          })();
+        })(), null);
+        return _el$4;
+      })();
+    })(), null);
+    effect(() => className(_el$, classes()));
+    return _el$;
+  })();
+}
+var _tmpl$18 = /* @__PURE__ */ template(`<label><input type=checkbox class=toggle-input role=switch><span class=toggle-track><span class=toggle-knob>`);
+var _tmpl$212 = /* @__PURE__ */ template(`<span class=toggle-content>`);
+var _tmpl$310 = /* @__PURE__ */ template(`<span class=toggle-label>`);
+var _tmpl$48 = /* @__PURE__ */ template(`<span class=toggle-description>`);
+function Toggle(props) {
+  const [local, rest] = splitProps(props, ["label", "description", "size", "class", "disabled"]);
+  const size = () => local.size ?? "md";
+  const classes = () => `toggle ${size() === "sm" ? "toggle-sm" : ""} ${local.disabled ? "toggle-disabled" : ""} ${local.class ?? ""}`.trim();
+  return (() => {
+    var _el$ = _tmpl$18(), _el$2 = _el$.firstChild; _el$2.nextSibling;
+    spread(_el$2, mergeProps({
+      get disabled() {
+        return local.disabled;
+      }
+    }, rest), false, false);
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!(local.label || local.description));
+      return () => _c$() && (() => {
+        var _el$4 = _tmpl$212();
+        insert(_el$4, (() => {
+          var _c$2 = memo(() => !!local.label);
+          return () => _c$2() && (() => {
+            var _el$5 = _tmpl$310();
+            insert(_el$5, () => local.label);
+            return _el$5;
+          })();
+        })(), null);
+        insert(_el$4, (() => {
+          var _c$3 = memo(() => !!local.description);
+          return () => _c$3() && (() => {
+            var _el$6 = _tmpl$48();
+            insert(_el$6, () => local.description);
+            return _el$6;
+          })();
+        })(), null);
+        return _el$4;
+      })();
+    })(), null);
+    effect(() => className(_el$, classes()));
+    return _el$;
+  })();
+}
+var _tmpl$19 = /* @__PURE__ */ template(`<span class=form-field-required aria-hidden=true>*`);
+var _tmpl$213 = /* @__PURE__ */ template(`<span class=form-field-description>`);
+var _tmpl$311 = /* @__PURE__ */ template(`<span class=form-field-error role=alert>`);
+var _tmpl$49 = /* @__PURE__ */ template(`<div><label class=form-field-label>`);
+function FormField(props) {
+  const [local, rest] = splitProps(props, ["label", "error", "description", "required", "children", "id", "class"]);
+  const classes = () => `form-field ${local.error ? "form-field-has-error" : ""} ${local.class ?? ""}`.trim();
+  return (() => {
+    var _el$ = _tmpl$49(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, true);
+    insert(_el$2, () => local.label, null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return local.required;
+      },
+      get children() {
+        return _tmpl$19();
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.description;
+      },
+      get children() {
+        var _el$4 = _tmpl$213();
+        insert(_el$4, () => local.description);
+        return _el$4;
+      }
+    }), null);
+    insert(_el$, () => local.children, null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.error;
+      },
+      get children() {
+        var _el$5 = _tmpl$311();
+        insert(_el$5, () => local.error);
+        return _el$5;
+      }
+    }), null);
+    effect(() => setAttribute(_el$2, "for", local.id));
+    return _el$;
+  })();
+}
+var _tmpl$20 = /* @__PURE__ */ template(`<div class=timeline-dot>`);
+var _tmpl$214 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$312 = /* @__PURE__ */ template(`<div class=timeline-description>`);
+var _tmpl$410 = /* @__PURE__ */ template(`<div class=timeline-timestamp>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<div><div class="timeline-indicator vertical-indicator"></div><div class=vertical-connector></div><div class="timeline-content vertical-content"><div class=timeline-title>`);
+var variantClasses3 = {
+  default: "",
+  success: "timeline-item-success",
+  error: "timeline-item-error",
+  warning: "timeline-item-warning",
+  info: "timeline-item-info"
+};
+function DefaultDot() {
+  return _tmpl$20();
+}
+function Timeline(props) {
+  const [local, rest] = splitProps(props, ["items", "class"]);
+  const classes = () => {
+    const parts = ["timeline"];
+    if (local.class) parts.push(local.class);
+    return parts.join(" ");
+  };
+  return (() => {
+    var _el$2 = _tmpl$214();
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return classes();
+      }
+    }, rest), false, true);
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return local.items;
+      },
+      children: (item, index) => (() => {
+        var _el$3 = _tmpl$53(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$6.firstChild;
+        insert(_el$4, createComponent(Show, {
+          get when() {
+            return item.icon;
+          },
+          get fallback() {
+            return createComponent(DefaultDot, {});
+          },
+          get children() {
+            return item.icon;
+          }
+        }));
+        insert(_el$7, () => item.title);
+        insert(_el$6, createComponent(Show, {
+          get when() {
+            return item.description;
+          },
+          get children() {
+            var _el$8 = _tmpl$312();
+            insert(_el$8, () => item.description);
+            return _el$8;
+          }
+        }), null);
+        insert(_el$6, createComponent(Show, {
+          get when() {
+            return item.timestamp;
+          },
+          get children() {
+            var _el$9 = _tmpl$410();
+            insert(_el$9, () => item.timestamp);
+            return _el$9;
+          }
+        }), null);
+        effect(() => className(_el$3, `timeline-item vertical-connector-item ${variantClasses3[item.variant ?? "default"]}`));
+        return _el$3;
+      })()
+    }));
+    return _el$2;
+  })();
+}
+
+export { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chevron, Clamp, Collapsible, Dropdown, DropdownDivider, DropdownItem, DropdownMenu, DropdownTrigger, Empty, FormField, Input, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, Select, Spinner, Stat, Status, Step, Stepper, Tab, TabList, TabPanel, Tabs, Textarea, Timeline, Toggle };