@f0rbit/ui 0.1.2

package/dist/server.jsx

@@ -0,0 +1,752 @@
+// src/components/Button.tsx
+import { splitProps } from "solid-js";
+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 <button
+    class={classes()}
+    aria-label={local.icon ? local.label : void 0}
+    disabled={local.disabled || local.loading}
+    {...rest}
+  >
+			{local.loading ? <span class="spinner spinner-sm" /> : local.children}
+		</button>;
+}
+
+// src/components/Badge.tsx
+import { splitProps as splitProps2 } from "solid-js";
+var variantClasses2 = {
+  default: "",
+  success: "badge-success",
+  error: "badge-error",
+  warning: "badge-warning",
+  info: "badge-info",
+  accent: "badge-accent"
+};
+function Badge(props) {
+  const [local, rest] = splitProps2(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 <span class={classes()} {...rest}>
+			{local.children}
+		</span>;
+}
+
+// src/components/Card.tsx
+import { splitProps as splitProps3 } from "solid-js";
+function Card(props) {
+  const [local, rest] = splitProps3(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 <div class={classes()} {...rest}>
+			{local.children}
+		</div>;
+}
+function CardHeader(props) {
+  const [local, rest] = splitProps3(props, ["class", "children"]);
+  return <div class={`card-header ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>;
+}
+function CardTitle(props) {
+  const [local, rest] = splitProps3(props, ["class", "children"]);
+  return <h3 class={`card-title ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</h3>;
+}
+function CardDescription(props) {
+  const [local, rest] = splitProps3(props, ["class", "children"]);
+  return <p class={`card-description ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</p>;
+}
+function CardContent(props) {
+  const [local, rest] = splitProps3(props, ["class", "children"]);
+  return <div class={`card-content ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>;
+}
+function CardFooter(props) {
+  const [local, rest] = splitProps3(props, ["class", "children"]);
+  return <div class={`card-footer ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>;
+}
+
+// src/components/Input.tsx
+import { splitProps as splitProps4 } from "solid-js";
+function Input(props) {
+  const [local, rest] = splitProps4(props, ["error", "class", "disabled"]);
+  const classes = () => `input ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+  return <input class={classes()} disabled={local.disabled} {...rest} />;
+}
+function Textarea(props) {
+  const [local, rest] = splitProps4(props, ["error", "class", "disabled"]);
+  const classes = () => `textarea ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+  return <textarea class={classes()} disabled={local.disabled} {...rest} />;
+}
+function Select(props) {
+  const [local, rest] = splitProps4(props, ["error", "class", "disabled", "children"]);
+  const classes = () => `select ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+  return <select class={classes()} disabled={local.disabled} {...rest}>
+			{local.children}
+		</select>;
+}
+
+// src/components/Status.tsx
+import { splitProps as splitProps5 } from "solid-js";
+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] = splitProps5(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 <span class={classes()} {...rest}>
+			<span class="status-dot" />
+			<span>{displayLabel()}</span>
+		</span>;
+}
+
+// src/components/Stat.tsx
+import { splitProps as splitProps6 } from "solid-js";
+function Stat(props) {
+  const [local, rest] = splitProps6(props, ["value", "label", "class"]);
+  return <div class={local.class ? `stat ${local.class}` : "stat"} {...rest}>
+			<span class="stat-value">{local.value}</span>
+			<span class="stat-label">{local.label}</span>
+		</div>;
+}
+
+// src/components/Spinner.tsx
+import { splitProps as splitProps7 } from "solid-js";
+var sizeClasses2 = {
+  sm: "spinner-sm",
+  md: "",
+  lg: "spinner-lg"
+};
+function Spinner(props) {
+  const [local, rest] = splitProps7(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 <span class={classes()} {...rest} />;
+}
+
+// src/components/Chevron.tsx
+import { splitProps as splitProps8 } from "solid-js";
+function Chevron(props) {
+  const [local, rest] = splitProps8(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 <svg class={classes()} viewBox="0 0 24 24" width={size()} height={size()} fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" {...rest}>
+			<path d="m9 18 6-6-6-6" />
+		</svg>;
+}
+
+// src/components/Empty.tsx
+import { splitProps as splitProps9 } from "solid-js";
+function Empty(props) {
+  const [local] = splitProps9(props, ["icon", "title", "description", "children"]);
+  return <div class="empty">
+			{local.icon && <div class="empty-icon">{local.icon}</div>}
+			{local.title && <h3 class="empty-title">{local.title}</h3>}
+			{local.description && <p class="empty-description">{local.description}</p>}
+			{local.children}
+		</div>;
+}
+
+// src/components/Modal.tsx
+import { splitProps as splitProps10, Show, onMount, onCleanup, createContext, useContext } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+var ModalContext = createContext();
+function Modal(props) {
+  const [local, rest] = splitProps10(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 <Show when={local.open}>
+			<Portal>
+				<ModalContext.Provider value={{ onClose: local.onClose }}>
+					<div class="overlay" onClick={handleOverlayClick} onKeyDown={(e) => e.key === "Escape" && local.onClose()} role="presentation">
+						<dialog class={classes()} open aria-modal="true" {...rest}>
+							{local.children}
+						</dialog>
+					</div>
+				</ModalContext.Provider>
+			</Portal>
+		</Show>;
+}
+function ModalHeader(props) {
+  const [local, rest] = splitProps10(props, ["class", "children"]);
+  const ctx = useContext(ModalContext);
+  return <div class={`modal-header ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+			<Show when={ctx}>
+				<button type="button" class="modal-close" onClick={ctx?.onClose} 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 x1="6" y1="6" x2="18" y2="18" />
+					</svg>
+				</button>
+			</Show>
+		</div>;
+}
+function ModalTitle(props) {
+  const [local, rest] = splitProps10(props, ["class", "children"]);
+  return <h2 class={`modal-title ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</h2>;
+}
+function ModalBody(props) {
+  const [local, rest] = splitProps10(props, ["class", "children"]);
+  return <div class={`modal-body ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>;
+}
+function ModalFooter(props) {
+  const [local, rest] = splitProps10(props, ["class", "children"]);
+  return <div class={`modal-footer ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>;
+}
+
+// src/components/Dropdown.tsx
+import { splitProps as splitProps11, createSignal, Show as Show2, onMount as onMount2, onCleanup as onCleanup2, createContext as createContext2, useContext as useContext2 } from "solid-js";
+import { isServer as isServer2 } from "solid-js/web";
+var DropdownContext = createContext2();
+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();
+    }
+  };
+  onMount2(() => {
+    if (isServer2) return;
+    document.addEventListener("click", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+  });
+  onCleanup2(() => {
+    if (isServer2) return;
+    document.removeEventListener("click", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+  return <DropdownContext.Provider value={{ open, setOpen, close }}>
+			<div ref={(el) => containerRef = el} class="dropdown">
+				{props.children}
+			</div>
+		</DropdownContext.Provider>;
+}
+function DropdownTrigger(props) {
+  const ctx = useContext2(DropdownContext);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    ctx?.setOpen(!ctx.open());
+  };
+  return <div class="dropdown-trigger" onClick={handleClick}>
+			{props.children}
+		</div>;
+}
+function DropdownMenu(props) {
+  const ctx = useContext2(DropdownContext);
+  return <Show2 when={ctx?.open()}>
+			<div class="dropdown-menu">{props.children}</div>
+		</Show2>;
+}
+function DropdownItem(props) {
+  const [local, rest] = splitProps11(props, ["onClick", "active", "children"]);
+  const ctx = useContext2(DropdownContext);
+  const handleClick = () => {
+    local.onClick?.();
+    ctx?.close();
+  };
+  const classes = () => `dropdown-item ${local.active ? "active" : ""}`.trim();
+  return <button type="button" class={classes()} onClick={handleClick} {...rest}>
+			{local.children}
+		</button>;
+}
+function DropdownDivider() {
+  return <div class="dropdown-divider" />;
+}
+
+// src/components/Clamp.tsx
+import { splitProps as splitProps12, createSignal as createSignal2, Show as Show3 } from "solid-js";
+function Clamp(props) {
+  const [local, rest] = splitProps12(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] = createSignal2(false);
+  const [overflows, setOverflows] = createSignal2(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 <div class={wrapperClasses()} {...rest}>
+			<div
+    ref={(el) => {
+      contentRef = el;
+      requestAnimationFrame(checkOverflow);
+    }}
+    class={contentClasses()}
+    style={`--clamp-lines: ${lines()}`}
+  >
+				{local.children}
+			</div>
+			<Show3 when={overflows() || expanded()}>
+				<button class="clamp-toggle" onClick={toggle}>
+					{expanded() ? showLessText() : showMoreText()}
+				</button>
+			</Show3>
+		</div>;
+}
+
+// src/components/Collapsible.tsx
+import { splitProps as splitProps13, createSignal as createSignal3, Show as Show4 } from "solid-js";
+function Collapsible(props) {
+  const [local, rest] = splitProps13(props, ["defaultOpen", "open", "onOpenChange", "children", "trigger"]);
+  const [internalOpen, setInternalOpen] = createSignal3(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 <div class="collapsible">
+			<button class="collapsible-trigger" onClick={toggle}>
+				{local.trigger}
+				<Chevron class="collapsible-chevron" expanded={isOpen()} />
+			</button>
+			<Show4 when={isOpen()}>
+				<div class="collapsible-content">{local.children}</div>
+			</Show4>
+		</div>;
+}
+
+// src/components/Stepper.tsx
+import { splitProps as splitProps14, Show as Show5, createContext as createContext3, useContext as useContext3 } from "solid-js";
+var StepperContext = createContext3();
+var statusClasses = {
+  completed: "step-completed",
+  current: "step-current",
+  upcoming: "step-upcoming"
+};
+function CheckIcon() {
+  return <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" />
+		</svg>;
+}
+var StepContext = createContext3();
+function Step(props) {
+  const [local, rest] = splitProps14(props, ["title", "description", "icon", "status", "class"]);
+  const stepperCtx = useContext3(StepperContext);
+  const stepCtx = useContext3(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 <CheckIcon />;
+    }
+    if (local.icon) {
+      return local.icon;
+    }
+    return stepNumber;
+  };
+  return <div class={classes()} {...rest}>
+			<div class={indicatorClasses()}>{indicator()}</div>
+			<div class={contentClasses()}>
+				<div class="step-title">{local.title}</div>
+				<Show5 when={local.description}>
+					<div class="step-description">{local.description}</div>
+				</Show5>
+			</div>
+			<div class={connectorClasses()} />
+		</div>;
+}
+function Stepper(props) {
+  const [local, rest] = splitProps14(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 <StepperContext.Provider value={{ registerStep }}>
+			<StepContext.Provider value={{ orientation }}>
+				<div class={classes()} {...rest}>
+					{local.children}
+				</div>
+			</StepContext.Provider>
+		</StepperContext.Provider>;
+}
+
+// src/components/Tabs.tsx
+import { splitProps as splitProps15, createSignal as createSignal4, createContext as createContext4, useContext as useContext4, Show as Show6 } from "solid-js";
+var TabsContext = createContext4();
+function Tabs(props) {
+  const [local, rest] = splitProps15(props, ["defaultValue", "value", "onValueChange", "children", "class"]);
+  const [internalValue, setInternalValue] = createSignal4(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 <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+			<div class={classes()} {...rest}>
+				{local.children}
+			</div>
+		</TabsContext.Provider>;
+}
+function TabList(props) {
+  const [local, rest] = splitProps15(props, ["children", "class"]);
+  const classes = () => `tab-list ${local.class ?? ""}`.trim();
+  return <div class={classes()} role="tablist" {...rest}>
+			{local.children}
+		</div>;
+}
+function Tab(props) {
+  const [local, rest] = splitProps15(props, ["value", "children", "class"]);
+  const ctx = useContext4(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 <button
+    type="button"
+    role="tab"
+    aria-selected={isActive()}
+    tabIndex={isActive() ? 0 : -1}
+    class={classes()}
+    onClick={handleClick}
+    {...rest}
+  >
+			{local.children}
+		</button>;
+}
+function TabPanel(props) {
+  const [local, rest] = splitProps15(props, ["value", "children", "class"]);
+  const ctx = useContext4(TabsContext);
+  const isActive = () => ctx?.activeTab() === local.value;
+  const classes = () => `tab-panel ${local.class ?? ""}`.trim();
+  return <Show6 when={isActive()}>
+			<div class={classes()} role="tabpanel" {...rest}>
+				{local.children}
+			</div>
+		</Show6>;
+}
+
+// src/components/Checkbox.tsx
+import { splitProps as splitProps16, createEffect, onMount as onMount3 } from "solid-js";
+function Checkbox(props) {
+  const [local, rest] = splitProps16(props, ["label", "description", "indeterminate", "class", "disabled", "id"]);
+  let inputRef;
+  const setIndeterminate = () => {
+    if (inputRef) inputRef.indeterminate = local.indeterminate ?? false;
+  };
+  onMount3(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 <label class={classes()}>
+			<input
+    ref={inputRef}
+    type="checkbox"
+    class="checkbox-input"
+    id={inputId()}
+    disabled={local.disabled}
+    {...rest}
+  />
+			<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" />
+				</svg>
+				<span class="checkbox-indeterminate" />
+			</span>
+			{(local.label || local.description) && <span class="checkbox-content">
+					{local.label && <span class="checkbox-label">{local.label}</span>}
+					{local.description && <span class="checkbox-description">{local.description}</span>}
+				</span>}
+		</label>;
+}
+
+// src/components/Toggle.tsx
+import { splitProps as splitProps17 } from "solid-js";
+function Toggle(props) {
+  const [local, rest] = splitProps17(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 <label class={classes()}>
+			<input type="checkbox" class="toggle-input" role="switch" disabled={local.disabled} {...rest} />
+			<span class="toggle-track">
+				<span class="toggle-knob" />
+			</span>
+			{(local.label || local.description) && <span class="toggle-content">
+					{local.label && <span class="toggle-label">{local.label}</span>}
+					{local.description && <span class="toggle-description">{local.description}</span>}
+				</span>}
+		</label>;
+}
+
+// src/components/FormField.tsx
+import { splitProps as splitProps18, Show as Show7 } from "solid-js";
+function FormField(props) {
+  const [local, rest] = splitProps18(props, ["label", "error", "description", "required", "children", "id", "class"]);
+  const classes = () => `form-field ${local.error ? "form-field-has-error" : ""} ${local.class ?? ""}`.trim();
+  return <div class={classes()} {...rest}>
+			<label class="form-field-label" for={local.id}>
+				{local.label}
+				<Show7 when={local.required}>
+					<span class="form-field-required" aria-hidden="true">*</span>
+				</Show7>
+			</label>
+			<Show7 when={local.description}>
+				<span class="form-field-description">{local.description}</span>
+			</Show7>
+			{local.children}
+			<Show7 when={local.error}>
+				<span class="form-field-error" role="alert">{local.error}</span>
+			</Show7>
+		</div>;
+}
+
+// src/components/Timeline.tsx
+import { splitProps as splitProps19, For as For3, Show as Show8 } from "solid-js";
+var variantClasses3 = {
+  default: "",
+  success: "timeline-item-success",
+  error: "timeline-item-error",
+  warning: "timeline-item-warning",
+  info: "timeline-item-info"
+};
+function DefaultDot() {
+  return <div class="timeline-dot" />;
+}
+function Timeline(props) {
+  const [local, rest] = splitProps19(props, ["items", "class"]);
+  const classes = () => {
+    const parts = ["timeline"];
+    if (local.class) parts.push(local.class);
+    return parts.join(" ");
+  };
+  return <div class={classes()} {...rest}>
+			<For3 each={local.items}>
+				{(item, index) => <div
+    class={`timeline-item vertical-connector-item ${variantClasses3[item.variant ?? "default"]}`}
+  >
+						<div class="timeline-indicator vertical-indicator">
+							<Show8 when={item.icon} fallback={<DefaultDot />}>
+								{item.icon}
+							</Show8>
+						</div>
+						<div class="vertical-connector" />
+						<div class="timeline-content vertical-content">
+							<div class="timeline-title">{item.title}</div>
+							<Show8 when={item.description}>
+								<div class="timeline-description">{item.description}</div>
+							</Show8>
+							<Show8 when={item.timestamp}>
+								<div class="timeline-timestamp">{item.timestamp}</div>
+							</Show8>
+						</div>
+					</div>}
+			</For3>
+		</div>;
+}
+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
+};