@f0rbit/ui 0.1.2

package/dist/server.js

@@ -0,0 +1,794 @@
+import { ssrElement, mergeProps, escape, ssr, isServer, createComponent, Portal, ssrAttribute, ssrStyle } from 'solid-js/web';
+import { createContext, splitProps, onMount, onCleanup, Show, useContext, createSignal, createEffect, For } from 'solid-js';
+
+// src/components/Button.tsx
+var _tmpl$ = '<span class="spinner spinner-sm"></span>';
+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 ssrElement("button", mergeProps({
+    get ["class"]() {
+      return classes();
+    },
+    get ["aria-label"]() {
+      return local.icon ? local.label : void 0;
+    },
+    get disabled() {
+      return local.disabled || local.loading;
+    }
+  }, rest), local.loading ? _tmpl$ : escape(local.children), false);
+}
+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 ssrElement("span", mergeProps({
+    get ["class"]() {
+      return classes();
+    }
+  }, rest), escape(local.children), false);
+}
+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 ssrElement("div", mergeProps({
+    get ["class"]() {
+      return classes();
+    }
+  }, rest), escape(local.children), false);
+}
+function CardHeader(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return `card-header ${local.class ?? ""}`.trim();
+    }
+  }, rest), escape(local.children), false);
+}
+function CardTitle(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return ssrElement("h3", mergeProps({
+    get ["class"]() {
+      return `card-title ${local.class ?? ""}`.trim();
+    }
+  }, rest), escape(local.children), false);
+}
+function CardDescription(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return ssrElement("p", mergeProps({
+    get ["class"]() {
+      return `card-description ${local.class ?? ""}`.trim();
+    }
+  }, rest), escape(local.children), false);
+}
+function CardContent(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return `card-content ${local.class ?? ""}`.trim();
+    }
+  }, rest), escape(local.children), false);
+}
+function CardFooter(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return `card-footer ${local.class ?? ""}`.trim();
+    }
+  }, rest), escape(local.children), false);
+}
+function Input(props) {
+  const [local, rest] = splitProps(props, ["error", "class", "disabled"]);
+  const classes = () => `input ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+  return ssrElement("input", mergeProps({
+    get ["class"]() {
+      return classes();
+    },
+    get disabled() {
+      return local.disabled;
+    }
+  }, rest), void 0, false);
+}
+function Textarea(props) {
+  const [local, rest] = splitProps(props, ["error", "class", "disabled"]);
+  const classes = () => `textarea ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+  return ssrElement("textarea", mergeProps({
+    get ["class"]() {
+      return classes();
+    },
+    get disabled() {
+      return local.disabled;
+    }
+  }, rest), void 0, false);
+}
+function Select(props) {
+  const [local, rest] = splitProps(props, ["error", "class", "disabled", "children"]);
+  const classes = () => `select ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+  return ssrElement("select", mergeProps({
+    get ["class"]() {
+      return classes();
+    },
+    get disabled() {
+      return local.disabled;
+    }
+  }, rest), escape(local.children), false);
+}
+var _tmpl$2 = '<span class="status-dot"></span>';
+var _tmpl$22 = ["<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 ssrElement("span", mergeProps({
+    get ["class"]() {
+      return classes();
+    }
+  }, rest), [ssr(_tmpl$2), ssr(_tmpl$22, escape(displayLabel()))], false);
+}
+var _tmpl$3 = ['<span class="stat-value">', "</span>"];
+var _tmpl$23 = ['<span class="stat-label">', "</span>"];
+function Stat(props) {
+  const [local, rest] = splitProps(props, ["value", "label", "class"]);
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return local.class ? `stat ${local.class}` : "stat";
+    }
+  }, rest), [ssr(_tmpl$3, escape(local.value)), ssr(_tmpl$23, escape(local.label))], false);
+}
+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 ssrElement("span", mergeProps({
+    get ["class"]() {
+      return classes();
+    }
+  }, rest), void 0, false);
+}
+var _tmpl$4 = '<path d="m9 18 6-6-6-6"></path>';
+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 ssrElement("svg", mergeProps({
+    get ["class"]() {
+      return classes();
+    },
+    viewBox: "0 0 24 24",
+    get width() {
+      return size();
+    },
+    get height() {
+      return size();
+    },
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }, rest), ssr(_tmpl$4), false);
+}
+var _tmpl$5 = ['<div class="empty">', "", "", "", "</div>"];
+var _tmpl$24 = ['<div class="empty-icon">', "</div>"];
+var _tmpl$32 = ['<h3 class="empty-title">', "</h3>"];
+var _tmpl$42 = ['<p class="empty-description">', "</p>"];
+function Empty(props) {
+  const [local] = splitProps(props, ["icon", "title", "description", "children"]);
+  return ssr(_tmpl$5, local.icon && ssr(_tmpl$24, escape(local.icon)), local.title && ssr(_tmpl$32, escape(local.title)), local.description && ssr(_tmpl$42, escape(local.description)), escape(local.children));
+}
+var _tmpl$6 = ['<div class="overlay" role="presentation">', "</div>"];
+var _tmpl$25 = '<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"></line></svg></button>';
+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();
+    }
+  };
+  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() {
+              return ssr(_tmpl$6, ssrElement("dialog", mergeProps({
+                get ["class"]() {
+                  return classes();
+                },
+                open: true,
+                "aria-modal": "true"
+              }, rest), escape(local.children), false));
+            }
+          });
+        }
+      });
+    }
+  });
+}
+function ModalHeader(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const ctx = useContext(ModalContext);
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return `modal-header ${local.class ?? ""}`.trim();
+    }
+  }, rest), [escape(local.children), escape(createComponent(Show, {
+    when: ctx,
+    get children() {
+      return ssr(_tmpl$25);
+    }
+  }))], false);
+}
+function ModalTitle(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return ssrElement("h2", mergeProps({
+    get ["class"]() {
+      return `modal-title ${local.class ?? ""}`.trim();
+    }
+  }, rest), escape(local.children), false);
+}
+function ModalBody(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return `modal-body ${local.class ?? ""}`.trim();
+    }
+  }, rest), escape(local.children), false);
+}
+function ModalFooter(props) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return `modal-footer ${local.class ?? ""}`.trim();
+    }
+  }, rest), escape(local.children), false);
+}
+var _tmpl$7 = ['<div class="dropdown">', "</div>"];
+var _tmpl$26 = ['<div class="dropdown-trigger">', "</div>"];
+var _tmpl$33 = ['<div class="dropdown-menu">', "</div>"];
+var _tmpl$43 = '<div class="dropdown-divider"></div>';
+var DropdownContext = createContext();
+function Dropdown(props) {
+  const [open, setOpen] = createSignal(false);
+  const close = () => setOpen(false);
+  const handleClickOutside = (e) => {
+    {
+      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() {
+      return ssr(_tmpl$7, escape(props.children));
+    }
+  });
+}
+function DropdownTrigger(props) {
+  useContext(DropdownContext);
+  return ssr(_tmpl$26, escape(props.children));
+}
+function DropdownMenu(props) {
+  const ctx = useContext(DropdownContext);
+  return createComponent(Show, {
+    get when() {
+      return ctx?.open();
+    },
+    get children() {
+      return ssr(_tmpl$33, escape(props.children));
+    }
+  });
+}
+function DropdownItem(props) {
+  const [local, rest] = splitProps(props, ["onClick", "active", "children"]);
+  useContext(DropdownContext);
+  const classes = () => `dropdown-item ${local.active ? "active" : ""}`.trim();
+  return ssrElement("button", mergeProps({
+    type: "button",
+    get ["class"]() {
+      return classes();
+    }
+  }, rest), escape(local.children), false);
+}
+function DropdownDivider() {
+  return ssr(_tmpl$43);
+}
+var _tmpl$8 = ["<div", ' style="', '">', "</div>"];
+var _tmpl$27 = ['<button class="clamp-toggle">', "</button>"];
+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);
+  const wrapperClasses = () => `clamp ${local.class ?? ""}`.trim();
+  const contentClasses = () => expanded() ? "clamp-content" : "clamp-content clamp-clamped";
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return wrapperClasses();
+    }
+  }, rest), [ssr(_tmpl$8, ssrAttribute("class", escape(contentClasses(), true), false), ssrStyle(`--clamp-lines: ${lines()}`), escape(local.children)), escape(createComponent(Show, {
+    get when() {
+      return overflows() || expanded();
+    },
+    get children() {
+      return ssr(_tmpl$27, expanded() ? escape(showLessText()) : escape(showMoreText()));
+    }
+  }))], false);
+}
+var _tmpl$9 = ['<div class="collapsible-content">', "</div>"];
+var _tmpl$28 = ['<div class="collapsible"><button class="collapsible-trigger">', "", "</button>", "</div>"];
+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();
+  return ssr(_tmpl$28, escape(local.trigger), escape(createComponent(Chevron, {
+    "class": "collapsible-chevron",
+    get expanded() {
+      return isOpen();
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return isOpen();
+    },
+    get children() {
+      return ssr(_tmpl$9, escape(local.children));
+    }
+  })));
+}
+var _tmpl$10 = '<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"></polyline></svg>';
+var _tmpl$29 = ["<div", ">", "</div>"];
+var _tmpl$34 = ['<div class="step-description">', "</div>"];
+var _tmpl$44 = ["<div", '><div class="step-title">', "</div>", "</div>"];
+var _tmpl$52 = ["<div", "></div>"];
+var StepperContext = createContext();
+var statusClasses = {
+  completed: "step-completed",
+  current: "step-current",
+  upcoming: "step-upcoming"
+};
+function CheckIcon() {
+  return ssr(_tmpl$10);
+}
+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 ssrElement("div", mergeProps({
+    get ["class"]() {
+      return classes();
+    }
+  }, rest), [ssr(_tmpl$29, ssrAttribute("class", escape(indicatorClasses(), true), false), escape(indicator())), ssr(_tmpl$44, ssrAttribute("class", escape(contentClasses(), true), false), escape(local.title), escape(createComponent(Show, {
+    get when() {
+      return local.description;
+    },
+    get children() {
+      return ssr(_tmpl$34, escape(local.description));
+    }
+  }))), ssr(_tmpl$52, ssrAttribute("class", escape(connectorClasses(), true), false))], false);
+}
+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() {
+          return ssrElement("div", mergeProps({
+            get ["class"]() {
+              return classes();
+            }
+          }, rest), escape(local.children), false);
+        }
+      });
+    }
+  });
+}
+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() {
+      return ssrElement("div", mergeProps({
+        get ["class"]() {
+          return classes();
+        }
+      }, rest), escape(local.children), false);
+    }
+  });
+}
+function TabList(props) {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+  const classes = () => `tab-list ${local.class ?? ""}`.trim();
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return classes();
+    },
+    role: "tablist"
+  }, rest), escape(local.children), false);
+}
+function Tab(props) {
+  const [local, rest] = splitProps(props, ["value", "children", "class"]);
+  const ctx = useContext(TabsContext);
+  const isActive = () => ctx?.activeTab() === local.value;
+  const classes = () => {
+    const parts = ["tab"];
+    if (isActive()) {
+      parts.push("active");
+    }
+    if (local.class) {
+      parts.push(local.class);
+    }
+    return parts.join(" ");
+  };
+  return ssrElement("button", mergeProps({
+    type: "button",
+    role: "tab",
+    get ["aria-selected"]() {
+      return isActive();
+    },
+    get tabIndex() {
+      return isActive() ? 0 : -1;
+    },
+    get ["class"]() {
+      return classes();
+    }
+  }, rest), escape(local.children), false);
+}
+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() {
+      return ssrElement("div", mergeProps({
+        get ["class"]() {
+          return classes();
+        },
+        role: "tabpanel"
+      }, rest), escape(local.children), false);
+    }
+  });
+}
+var _tmpl$11 = ["<label", ">", '<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"></span></span>', "</label>"];
+var _tmpl$210 = ['<span class="checkbox-content">', "", "</span>"];
+var _tmpl$35 = ['<span class="checkbox-label">', "</span>"];
+var _tmpl$45 = ['<span class="checkbox-description">', "</span>"];
+function Checkbox(props) {
+  const [local, rest] = splitProps(props, ["label", "description", "indeterminate", "class", "disabled", "id"]);
+  const setIndeterminate = () => {
+  };
+  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 ssr(_tmpl$11, ssrAttribute("class", escape(classes(), true), false), ssrElement("input", mergeProps({
+    type: "checkbox",
+    "class": "checkbox-input",
+    get id() {
+      return inputId();
+    },
+    get disabled() {
+      return local.disabled;
+    }
+  }, rest), void 0, false), (local.label || local.description) && ssr(_tmpl$210, local.label && ssr(_tmpl$35, escape(local.label)), local.description && ssr(_tmpl$45, escape(local.description))));
+}
+var _tmpl$12 = ["<label", ">", '<span class="toggle-track"><span class="toggle-knob"></span></span>', "</label>"];
+var _tmpl$211 = ['<span class="toggle-content">', "", "</span>"];
+var _tmpl$36 = ['<span class="toggle-label">', "</span>"];
+var _tmpl$46 = ['<span class="toggle-description">', "</span>"];
+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 ssr(_tmpl$12, ssrAttribute("class", escape(classes(), true), false), ssrElement("input", mergeProps({
+    type: "checkbox",
+    "class": "toggle-input",
+    role: "switch",
+    get disabled() {
+      return local.disabled;
+    }
+  }, rest), void 0, false), (local.label || local.description) && ssr(_tmpl$211, local.label && ssr(_tmpl$36, escape(local.label)), local.description && ssr(_tmpl$46, escape(local.description))));
+}
+var _tmpl$13 = '<span class="form-field-required" aria-hidden="true">*</span>';
+var _tmpl$212 = ['<label class="form-field-label"', ">", "", "</label>"];
+var _tmpl$37 = ['<span class="form-field-description">', "</span>"];
+var _tmpl$47 = ['<span class="form-field-error" role="alert">', "</span>"];
+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 ssrElement("div", mergeProps({
+    get ["class"]() {
+      return classes();
+    }
+  }, rest), [ssr(_tmpl$212, ssrAttribute("for", escape(local.id, true), false), escape(local.label), escape(createComponent(Show, {
+    get when() {
+      return local.required;
+    },
+    get children() {
+      return ssr(_tmpl$13);
+    }
+  }))), escape(createComponent(Show, {
+    get when() {
+      return local.description;
+    },
+    get children() {
+      return ssr(_tmpl$37, escape(local.description));
+    }
+  })), escape(local.children), escape(createComponent(Show, {
+    get when() {
+      return local.error;
+    },
+    get children() {
+      return ssr(_tmpl$47, escape(local.error));
+    }
+  }))], false);
+}
+var _tmpl$14 = '<div class="timeline-dot"></div>';
+var _tmpl$213 = ['<div class="timeline-description">', "</div>"];
+var _tmpl$38 = ['<div class="timeline-timestamp">', "</div>"];
+var _tmpl$48 = ['<div class="', '"><div class="timeline-indicator vertical-indicator">', '</div><div class="vertical-connector"></div><div class="timeline-content vertical-content"><div class="timeline-title">', "</div>", "", "</div></div>"];
+var variantClasses3 = {
+  default: "",
+  success: "timeline-item-success",
+  error: "timeline-item-error",
+  warning: "timeline-item-warning",
+  info: "timeline-item-info"
+};
+function DefaultDot() {
+  return ssr(_tmpl$14);
+}
+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 ssrElement("div", mergeProps({
+    get ["class"]() {
+      return classes();
+    }
+  }, rest), escape(createComponent(For, {
+    get each() {
+      return local.items;
+    },
+    children: (item, index) => ssr(_tmpl$48, `timeline-item vertical-connector-item ${escape(variantClasses3[item.variant ?? "default"], true)}`, escape(createComponent(Show, {
+      get when() {
+        return item.icon;
+      },
+      get fallback() {
+        return createComponent(DefaultDot, {});
+      },
+      get children() {
+        return item.icon;
+      }
+    })), escape(item.title), escape(createComponent(Show, {
+      get when() {
+        return item.description;
+      },
+      get children() {
+        return ssr(_tmpl$213, escape(item.description));
+      }
+    })), escape(createComponent(Show, {
+      get when() {
+        return item.timestamp;
+      },
+      get children() {
+        return ssr(_tmpl$38, escape(item.timestamp));
+      }
+    })))
+  })), false);
+}
+
+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 };