@f0rbit/ui 0.1.2 → 0.1.6

package/dist/server.js

@@ -471,8 +471,9 @@ function Collapsible(props) {
 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 _tmpl$44 = ['<div class="step-body">', "</div>"];
+var _tmpl$52 = ["<div", '><div class="step-title">', "</div>", "", "</div>"];
+var _tmpl$62 = ["<div", "></div>"];
 var StepperContext = createContext();
 var statusClasses = {
   completed: "step-completed",
@@ -484,11 +485,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 = () => {
@@ -535,14 +536,21 @@ function Step(props) {
     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, {
+  }, rest), [ssr(_tmpl$29, ssrAttribute("class", escape(indicatorClasses(), true), false), escape(indicator())), ssr(_tmpl$52, 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);
+  })), escape(createComponent(Show, {
+    get when() {
+      return local.children;
+    },
+    get children() {
+      return ssr(_tmpl$44, escape(local.children));
+    }
+  }))), ssr(_tmpl$62, ssrAttribute("class", escape(connectorClasses(), true), false))], false);
 }
 function Stepper(props) {
   const [local, rest] = splitProps(props, ["orientation", "class", "children"]);
@@ -576,32 +584,21 @@ function Stepper(props) {
     }
   });
 }
-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 [local, rest] = splitProps(props, ["defaultValue", "children", "class"]);
+  const [activeTab, setActiveTab] = createSignal(local.defaultValue ?? "");
+  onMount(() => {
+    return;
+  });
   const classes = () => `tabs ${local.class ?? ""}`.trim();
-  return createComponent(TabsContext.Provider, {
-    value: {
-      activeTab,
-      setActiveTab
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return classes();
     },
-    get children() {
-      return ssrElement("div", mergeProps({
-        get ["class"]() {
-          return classes();
-        }
-      }, rest), escape(local.children), false);
+    get ["data-default-value"]() {
+      return local.defaultValue;
     }
-  });
+  }, rest), escape(local.children), false);
 }
 function TabList(props) {
   const [local, rest] = splitProps(props, ["children", "class"]);
@@ -615,50 +612,33 @@ 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 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 ssrElement("button", mergeProps({
     type: "button",
     role: "tab",
-    get ["aria-selected"]() {
-      return isActive();
-    },
-    get tabIndex() {
-      return isActive() ? 0 : -1;
-    },
+    "aria-selected": "false",
+    tabIndex: -1,
     get ["class"]() {
       return classes();
+    },
+    get ["data-tab-value"]() {
+      return local.value;
     }
   }, 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();
+  return ssrElement("div", mergeProps({
+    get ["class"]() {
+      return classes();
     },
-    get children() {
-      return ssrElement("div", mergeProps({
-        get ["class"]() {
-          return classes();
-        },
-        role: "tabpanel"
-      }, rest), escape(local.children), false);
-    }
-  });
+    role: "tabpanel",
+    get ["data-panel-value"]() {
+      return local.value;
+    },
+    hidden: true
+  }, 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>"];

package/dist/server.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 {

package/dist/styles.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@f0rbit/ui",
-	"version": "0.1.2",
+	"version": "0.1.6",
 	"description": "A minimal, composable UI component library for SolidJS",
 	"type": "module",
 	"main": "./dist/server.js",
@@ -46,7 +46,8 @@
 		"./styles/tokens": "./dist/tokens.css",
 		"./styles/reset": "./dist/reset.css",
 		"./styles/utilities": "./dist/utilities.css",
-		"./styles/components": "./dist/components.css"
+		"./styles/components": "./dist/components.css",
+		"./styles/starlight": "./docs/src/styles/starlight.css"
 	},
 	"files": ["dist", "src"],
 	"scripts": {

package/src/components/Stepper.tsx

@@ -18,6 +18,11 @@ export 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";
 }
 
 const statusClasses: Record<StepStatus, string> = {
@@ -41,12 +46,12 @@ type StepContextValue = {
 const StepContext = createContext<StepContextValue>();
 
 export function Step(props: StepProps) {
-	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";
 
@@ -105,6 +110,9 @@ export function Step(props: StepProps) {
 				<Show when={local.description}>
 					<div class="step-description">{local.description}</div>
 				</Show>
+				<Show when={local.children}>
+					<div class="step-body">{local.children}</div>
+				</Show>
 			</div>
 			<div class={connectorClasses()} />
 		</div>