@f0rbit/ui 0.1.2 → 0.1.6

package/dist/components.css

@@ -700,6 +700,10 @@
 		color: var(--fg-muted);
 	}
 
+	.step-body {
+		margin-top: var(--space-sm);
+	}
+
 	/* Tabs */
 	.tabs {
 		display: flex;

package/dist/index.d.ts

@@ -150,30 +150,105 @@ interface StepProps extends JSX.HTMLAttributes<HTMLDivElement> {
     description?: string;
     icon?: JSX.Element;
     status?: StepStatus;
+    children?: JSX.Element;
+    /** Explicit step number (optional, auto-increments if not provided) */
+    number?: number;
+    /** Explicit orientation (optional, uses context if not provided) */
+    orientation?: "horizontal" | "vertical";
 }
 declare function Step(props: StepProps): JSX.Element;
 declare function Stepper(props: StepperProps): JSX.Element;
 
+/**
+ * A tab container component that manages tab selection and panel visibility.
+ *
+ * Uses DOM-based discovery via data attributes, making it compatible with
+ * Astro's island architecture where each child component hydrates independently.
+ *
+ * @example Basic usage in SolidJS
+ * ```tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabList>
+ *     <Tab value="tab1">First Tab</Tab>
+ *     <Tab value="tab2">Second Tab</Tab>
+ *   </TabList>
+ *   <TabPanel value="tab1">First panel content</TabPanel>
+ *   <TabPanel value="tab2">Second panel content</TabPanel>
+ * </Tabs>
+ * ```
+ *
+ * @example Usage in Astro MDX (each component needs client:load)
+ * ```mdx
+ * <Tabs defaultValue="tab1" client:load>
+ *   <TabList client:load>
+ *     <Tab value="tab1" client:load>First Tab</Tab>
+ *     <Tab value="tab2" client:load>Second Tab</Tab>
+ *   </TabList>
+ *   <TabPanel value="tab1" client:load>First panel content</TabPanel>
+ *   <TabPanel value="tab2" client:load>Second panel content</TabPanel>
+ * </Tabs>
+ * ```
+ *
+ * @example Creating a wrapper to avoid multiple client:load directives
+ * ```tsx
+ * // MyTabs.tsx - your custom wrapper
+ * import { Tabs, TabList, Tab, TabPanel } from '@f0rbit/ui';
+ *
+ * export function MyTabs() {
+ *   return (
+ *     <Tabs defaultValue="tab1">
+ *       <TabList>
+ *         <Tab value="tab1">First</Tab>
+ *         <Tab value="tab2">Second</Tab>
+ *       </TabList>
+ *       <TabPanel value="tab1">Content 1</TabPanel>
+ *       <TabPanel value="tab2">Content 2</TabPanel>
+ *     </Tabs>
+ *   );
+ * }
+ *
+ * // Then in Astro: <MyTabs client:load />
+ * ```
+ */
 interface TabsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** The value of the initially selected tab */
     defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
     children: JSX.Element;
 }
+declare function Tabs(props: TabsProps): JSX.Element;
+/**
+ * Container for Tab buttons. Provides the tablist role for accessibility.
+ *
+ * In Astro, requires `client:load` directive.
+ */
 interface TabListProps extends JSX.HTMLAttributes<HTMLDivElement> {
     children: JSX.Element;
 }
+declare function TabList(props: TabListProps): JSX.Element;
+/**
+ * A tab button that switches the active panel when clicked.
+ *
+ * The `value` prop must match a corresponding `TabPanel` value.
+ * In Astro, requires `client:load` directive.
+ */
 interface TabProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Unique identifier that links this tab to its panel */
     value: string;
     children: JSX.Element;
 }
+declare function Tab(props: TabProps): JSX.Element;
+/**
+ * Content panel that is shown when its corresponding Tab is active.
+ *
+ * The `value` prop must match a corresponding `Tab` value.
+ * Panels are hidden by default and shown when their tab is selected.
+ * In Astro, requires `client:load` directive.
+ */
 interface TabPanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier that links this panel to its tab */
     value: string;
     children: JSX.Element;
 }
-declare function Tabs(props: TabsProps): JSX.Element;
-declare function TabList(props: TabListProps): JSX.Element;
-declare function Tab(props: TabProps): JSX.Element;
 declare function TabPanel(props: TabPanelProps): JSX.Element;
 
 interface CheckboxProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type"> {

package/dist/index.js

@@ -683,8 +683,9 @@ function Collapsible(props) {
 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 _tmpl$37 = /* @__PURE__ */ template(`<div class=step-body>`);
+var _tmpl$45 = /* @__PURE__ */ template(`<div><div></div><div><div class=step-title></div></div><div>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<div>`);
 var StepperContext = createContext();
 var statusClasses = {
   completed: "step-completed",
@@ -696,11 +697,11 @@ function CheckIcon() {
 }
 var StepContext = createContext();
 function Step(props) {
-  const [local, rest] = splitProps(props, ["title", "description", "icon", "status", "class"]);
+  const [local, rest] = splitProps(props, ["title", "description", "icon", "status", "class", "children", "number", "orientation"]);
   const stepperCtx = useContext(StepperContext);
   const stepCtx = useContext(StepContext);
-  const stepNumber = stepperCtx?.registerStep() ?? 1;
-  const orientation = () => stepCtx?.orientation() ?? "horizontal";
+  const stepNumber = local.number ?? stepperCtx?.registerStep() ?? 1;
+  const orientation = () => local.orientation ?? stepCtx?.orientation() ?? "vertical";
   const status = () => local.status ?? "upcoming";
   const isVertical = () => orientation() === "vertical";
   const classes = () => {
@@ -744,7 +745,7 @@ function Step(props) {
     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;
+    var _el$2 = _tmpl$45(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$8 = _el$4.nextSibling;
     spread(_el$2, mergeProps({
       get ["class"]() {
         return classes();
@@ -762,11 +763,21 @@ function Step(props) {
         return _el$6;
       }
     }), null);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return local.children;
+      },
+      get children() {
+        var _el$7 = _tmpl$37();
+        insert(_el$7, () => local.children);
+        return _el$7;
+      }
+    }), 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);
+      _v$3 !== _p$.a && className(_el$8, _p$.a = _v$3);
       return _p$;
     }, {
       e: void 0,
@@ -798,14 +809,14 @@ function Stepper(props) {
           orientation
         },
         get children() {
-          var _el$8 = _tmpl$45();
-          spread(_el$8, mergeProps({
+          var _el$9 = _tmpl$53();
+          spread(_el$9, mergeProps({
             get ["class"]() {
               return classes();
             }
           }, rest), false, true);
-          insert(_el$8, () => local.children);
-          return _el$8;
+          insert(_el$9, () => local.children);
+          return _el$9;
         }
       });
     }
@@ -813,37 +824,72 @@ function Stepper(props) {
 }
 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();
+var _tmpl$38 = /* @__PURE__ */ template(`<button type=button role=tab aria-selected=false tabindex=-1>`);
+var _tmpl$46 = /* @__PURE__ */ template(`<div role=tabpanel hidden>`);
 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 [local, rest] = splitProps(props, ["defaultValue", "children", "class"]);
+  let containerRef;
+  const [activeTab, setActiveTab] = createSignal(local.defaultValue ?? "");
+  const updateTabs = (value) => {
+    if (!containerRef) return;
+    const tabs = containerRef.querySelectorAll("[data-tab-value]");
+    tabs.forEach((tab) => {
+      const isActive = tab.dataset.tabValue === value;
+      tab.setAttribute("aria-selected", String(isActive));
+      tab.setAttribute("tabindex", isActive ? "0" : "-1");
+      tab.classList.toggle("active", isActive);
+    });
+    const panels = containerRef.querySelectorAll("[data-panel-value]");
+    panels.forEach((panel) => {
+      const isActive = panel.dataset.panelValue === value;
+      panel.hidden = !isActive;
+    });
   };
-  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$;
+  const initializeTabs = () => {
+    if (!containerRef) return;
+    let value = activeTab();
+    if (!value) {
+      const firstTab = containerRef.querySelector("[data-tab-value]");
+      value = firstTab?.dataset.tabValue ?? "";
+      if (value) setActiveTab(value);
     }
+    if (value) updateTabs(value);
+  };
+  onMount(() => {
+    if (!containerRef) return;
+    containerRef.addEventListener("click", (e) => {
+      const tab = e.target.closest("[data-tab-value]");
+      if (tab?.dataset.tabValue) {
+        setActiveTab(tab.dataset.tabValue);
+        updateTabs(tab.dataset.tabValue);
+      }
+    });
+    initializeTabs();
+    const observer = new MutationObserver(() => {
+      initializeTabs();
+    });
+    observer.observe(containerRef, {
+      childList: true,
+      subtree: true
+    });
+    onCleanup(() => observer.disconnect());
   });
+  const classes = () => `tabs ${local.class ?? ""}`.trim();
+  return (() => {
+    var _el$ = _tmpl$16();
+    var _ref$ = containerRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes();
+      },
+      get ["data-default-value"]() {
+        return local.defaultValue;
+      }
+    }, rest), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
 }
 function TabList(props) {
   const [local, rest] = splitProps(props, ["children", "class"]);
@@ -861,33 +907,15 @@ function TabList(props) {
 }
 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(" ");
-  };
+  const classes = () => `tab ${local.class ?? ""}`.trim();
   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();
+      },
+      get ["data-tab-value"]() {
+        return local.value;
       }
     }, rest), false, true);
     insert(_el$3, () => local.children);
@@ -896,26 +924,21 @@ function Tab(props) {
 }
 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;
-    }
-  });
+  return (() => {
+    var _el$4 = _tmpl$46();
+    spread(_el$4, mergeProps({
+      get ["class"]() {
+        return classes();
+      },
+      get ["data-panel-value"]() {
+        return local.value;
+      }
+    }, 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>`);
@@ -1063,7 +1086,7 @@ 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 _tmpl$54 = /* @__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",
@@ -1093,7 +1116,7 @@ function Timeline(props) {
         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;
+        var _el$3 = _tmpl$54(), _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;

package/dist/index.jsx

@@ -445,11 +445,11 @@ function CheckIcon() {
 }
 var StepContext = createContext3();
 function Step(props) {
-  const [local, rest] = splitProps14(props, ["title", "description", "icon", "status", "class"]);
+  const [local, rest] = splitProps14(props, ["title", "description", "icon", "status", "class", "children", "number", "orientation"]);
   const stepperCtx = useContext3(StepperContext);
   const stepCtx = useContext3(StepContext);
-  const stepNumber = stepperCtx?.registerStep() ?? 1;
-  const orientation = () => stepCtx?.orientation() ?? "horizontal";
+  const stepNumber = local.number ?? stepperCtx?.registerStep() ?? 1;
+  const orientation = () => local.orientation ?? stepCtx?.orientation() ?? "vertical";
   const status = () => local.status ?? "upcoming";
   const isVertical = () => orientation() === "vertical";
   const classes = () => {
@@ -499,6 +499,9 @@ function Step(props) {
 				<Show5 when={local.description}>
 					<div class="step-description">{local.description}</div>
 				</Show5>
+				<Show5 when={local.children}>
+					<div class="step-body">{local.children}</div>
+				</Show5>
 			</div>
 			<div class={connectorClasses()} />
 		</div>;
@@ -525,25 +528,59 @@ function Stepper(props) {
 }
 
 // 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();
+import { splitProps as splitProps15, onMount as onMount3, onCleanup as onCleanup3, createSignal as createSignal4 } from "solid-js";
 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);
+  const [local, rest] = splitProps15(props, ["defaultValue", "children", "class"]);
+  let containerRef;
+  const [activeTab, setActiveTab] = createSignal4(local.defaultValue ?? "");
+  const updateTabs = (value) => {
+    if (!containerRef) return;
+    const tabs = containerRef.querySelectorAll("[data-tab-value]");
+    tabs.forEach((tab) => {
+      const isActive = tab.dataset.tabValue === value;
+      tab.setAttribute("aria-selected", String(isActive));
+      tab.setAttribute("tabindex", isActive ? "0" : "-1");
+      tab.classList.toggle("active", isActive);
+    });
+    const panels = containerRef.querySelectorAll("[data-panel-value]");
+    panels.forEach((panel) => {
+      const isActive = panel.dataset.panelValue === value;
+      panel.hidden = !isActive;
+    });
+  };
+  const initializeTabs = () => {
+    if (!containerRef) return;
+    let value = activeTab();
+    if (!value) {
+      const firstTab = containerRef.querySelector("[data-tab-value]");
+      value = firstTab?.dataset.tabValue ?? "";
+      if (value) setActiveTab(value);
     }
-    local.onValueChange?.(id);
+    if (value) updateTabs(value);
   };
+  onMount3(() => {
+    if (!containerRef) return;
+    containerRef.addEventListener("click", (e) => {
+      const tab = e.target.closest("[data-tab-value]");
+      if (tab?.dataset.tabValue) {
+        setActiveTab(tab.dataset.tabValue);
+        updateTabs(tab.dataset.tabValue);
+      }
+    });
+    initializeTabs();
+    const observer = new MutationObserver(() => {
+      initializeTabs();
+    });
+    observer.observe(containerRef, {
+      childList: true,
+      subtree: true
+    });
+    onCleanup3(() => observer.disconnect());
+  });
   const classes = () => `tabs ${local.class ?? ""}`.trim();
-  return <TabsContext.Provider value={{ activeTab, setActiveTab }}>
-			<div class={classes()} {...rest}>
-				{local.children}
-			</div>
-		</TabsContext.Provider>;
+  return <div ref={containerRef} class={classes()} data-default-value={local.defaultValue} {...rest}>
+			{local.children}
+		</div>;
 }
 function TabList(props) {
   const [local, rest] = splitProps15(props, ["children", "class"]);
@@ -554,28 +591,14 @@ function TabList(props) {
 }
 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(" ");
-  };
+  const classes = () => `tab ${local.class ?? ""}`.trim();
   return <button
     type="button"
     role="tab"
-    aria-selected={isActive()}
-    tabIndex={isActive() ? 0 : -1}
+    aria-selected="false"
+    tabIndex={-1}
     class={classes()}
-    onClick={handleClick}
+    data-tab-value={local.value}
     {...rest}
   >
 			{local.children}
@@ -583,25 +606,21 @@ function Tab(props) {
 }
 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>;
+  return <div class={classes()} role="tabpanel" data-panel-value={local.value} hidden {...rest}>
+			{local.children}
+		</div>;
 }
 
 // src/components/Checkbox.tsx
-import { splitProps as splitProps16, createEffect, onMount as onMount3 } from "solid-js";
+import { splitProps as splitProps16, createEffect, onMount as onMount4 } 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);
+  onMount4(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);
@@ -646,29 +665,29 @@ function Toggle(props) {
 }
 
 // src/components/FormField.tsx
-import { splitProps as splitProps18, Show as Show7 } from "solid-js";
+import { splitProps as splitProps18, Show as Show6 } 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}>
+				<Show6 when={local.required}>
 					<span class="form-field-required" aria-hidden="true">*</span>
-				</Show7>
+				</Show6>
 			</label>
-			<Show7 when={local.description}>
+			<Show6 when={local.description}>
 				<span class="form-field-description">{local.description}</span>
-			</Show7>
+			</Show6>
 			{local.children}
-			<Show7 when={local.error}>
+			<Show6 when={local.error}>
 				<span class="form-field-error" role="alert">{local.error}</span>
-			</Show7>
+			</Show6>
 		</div>;
 }
 
 // src/components/Timeline.tsx
-import { splitProps as splitProps19, For as For3, Show as Show8 } from "solid-js";
+import { splitProps as splitProps19, For as For2, Show as Show7 } from "solid-js";
 var variantClasses3 = {
   default: "",
   success: "timeline-item-success",
@@ -687,27 +706,27 @@ function Timeline(props) {
     return parts.join(" ");
   };
   return <div class={classes()} {...rest}>
-			<For3 each={local.items}>
+			<For2 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 />}>
+							<Show7 when={item.icon} fallback={<DefaultDot />}>
 								{item.icon}
-							</Show8>
+							</Show7>
 						</div>
 						<div class="vertical-connector" />
 						<div class="timeline-content vertical-content">
 							<div class="timeline-title">{item.title}</div>
-							<Show8 when={item.description}>
+							<Show7 when={item.description}>
 								<div class="timeline-description">{item.description}</div>
-							</Show8>
-							<Show8 when={item.timestamp}>
+							</Show7>
+							<Show7 when={item.timestamp}>
 								<div class="timeline-timestamp">{item.timestamp}</div>
-							</Show8>
+							</Show7>
 						</div>
 					</div>}
-			</For3>
+			</For2>
 		</div>;
 }
 export {