@f0rbit/ui 0.1.2

package/src/components/Stepper.tsx

@@ -0,0 +1,139 @@
+import { type JSX, splitProps, For, Show, createContext, useContext } from "solid-js";
+
+export type StepStatus = "completed" | "current" | "upcoming";
+
+type StepperContextValue = {
+	registerStep: () => number;
+};
+
+const StepperContext = createContext<StepperContextValue>();
+
+export interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	orientation?: "horizontal" | "vertical";
+	children: JSX.Element;
+}
+
+export interface StepProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	title: string;
+	description?: string;
+	icon?: JSX.Element;
+	status?: StepStatus;
+}
+
+const statusClasses: Record<StepStatus, string> = {
+	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>
+	);
+}
+
+type StepContextValue = {
+	orientation: () => "horizontal" | "vertical";
+};
+
+const StepContext = createContext<StepContextValue>();
+
+export function Step(props: StepProps) {
+	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 <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>
+				<Show when={local.description}>
+					<div class="step-description">{local.description}</div>
+				</Show>
+			</div>
+			<div class={connectorClasses()} />
+		</div>
+	);
+}
+
+export function Stepper(props: StepperProps) {
+	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 (
+		<StepperContext.Provider value={{ registerStep }}>
+			<StepContext.Provider value={{ orientation }}>
+				<div class={classes()} {...rest}>
+					{local.children}
+				</div>
+			</StepContext.Provider>
+		</StepperContext.Provider>
+	);
+}

package/src/components/Tabs.tsx

@@ -0,0 +1,120 @@
+import { type JSX, splitProps, createSignal, createContext, useContext, Show, For } from "solid-js";
+
+type TabsContextValue = {
+	activeTab: () => string;
+	setActiveTab: (id: string) => void;
+};
+
+const TabsContext = createContext<TabsContextValue>();
+
+export interface TabsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	defaultValue?: string;
+	value?: string;
+	onValueChange?: (value: string) => void;
+	children: JSX.Element;
+}
+
+export interface TabListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	children: JSX.Element;
+}
+
+export interface TabProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+	value: string;
+	children: JSX.Element;
+}
+
+export interface TabPanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	value: string;
+	children: JSX.Element;
+}
+
+export function Tabs(props: TabsProps) {
+	const [local, rest] = splitProps(props, ["defaultValue", "value", "onValueChange", "children", "class"]);
+
+	const [internalValue, setInternalValue] = createSignal(local.defaultValue ?? "");
+
+	const isControlled = () => local.value !== undefined;
+	const activeTab = () => (isControlled() ? local.value! : internalValue());
+
+	const setActiveTab = (id: string) => {
+		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>
+	);
+}
+
+export function TabList(props: TabListProps) {
+	const [local, rest] = splitProps(props, ["children", "class"]);
+
+	const classes = () => `tab-list ${local.class ?? ""}`.trim();
+
+	return (
+		<div class={classes()} role="tablist" {...rest}>
+			{local.children}
+		</div>
+	);
+}
+
+export function Tab(props: TabProps) {
+	const [local, rest] = splitProps(props, ["value", "children", "class"]);
+	const ctx = useContext(TabsContext);
+
+	const isActive = () => ctx?.activeTab() === local.value;
+
+	const handleClick = () => {
+		ctx?.setActiveTab(local.value);
+	};
+
+	const classes = () => {
+		const parts = ["tab"];
+		if (isActive()) {
+			parts.push("active");
+		}
+		if (local.class) {
+			parts.push(local.class);
+		}
+		return parts.join(" ");
+	};
+
+	return (
+		<button
+			type="button"
+			role="tab"
+			aria-selected={isActive()}
+			tabIndex={isActive() ? 0 : -1}
+			class={classes()}
+			onClick={handleClick}
+			{...rest}
+		>
+			{local.children}
+		</button>
+	);
+}
+
+export function TabPanel(props: TabPanelProps) {
+	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 (
+		<Show when={isActive()}>
+			<div class={classes()} role="tabpanel" {...rest}>
+				{local.children}
+			</div>
+		</Show>
+	);
+}

package/src/components/Timeline.tsx

@@ -0,0 +1,66 @@
+import { type JSX, splitProps, For, Show } from "solid-js";
+
+export type TimelineItemVariant = "default" | "success" | "error" | "warning" | "info";
+
+export interface TimelineItem {
+	id: string | number;
+	icon?: JSX.Element;
+	title: string | JSX.Element;
+	description?: string | JSX.Element;
+	timestamp?: string | JSX.Element;
+	variant?: TimelineItemVariant;
+}
+
+export interface TimelineProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	items: TimelineItem[];
+}
+
+const variantClasses: Record<TimelineItemVariant, string> = {
+	default: "",
+	success: "timeline-item-success",
+	error: "timeline-item-error",
+	warning: "timeline-item-warning",
+	info: "timeline-item-info",
+};
+
+function DefaultDot() {
+	return <div class="timeline-dot" />;
+}
+
+export function Timeline(props: TimelineProps) {
+	const [local, rest] = splitProps(props, ["items", "class"]);
+
+	const classes = () => {
+		const parts = ["timeline"];
+		if (local.class) parts.push(local.class);
+		return parts.join(" ");
+	};
+
+	return (
+		<div class={classes()} {...rest}>
+			<For each={local.items}>
+				{(item, index) => (
+					<div
+						class={`timeline-item vertical-connector-item ${variantClasses[item.variant ?? "default"]}`}
+					>
+						<div class="timeline-indicator vertical-indicator">
+							<Show when={item.icon} fallback={<DefaultDot />}>
+								{item.icon}
+							</Show>
+						</div>
+						<div class="vertical-connector" />
+						<div class="timeline-content vertical-content">
+							<div class="timeline-title">{item.title}</div>
+							<Show when={item.description}>
+								<div class="timeline-description">{item.description}</div>
+							</Show>
+							<Show when={item.timestamp}>
+								<div class="timeline-timestamp">{item.timestamp}</div>
+							</Show>
+						</div>
+					</div>
+				)}
+			</For>
+		</div>
+	);
+}

package/src/components/Toggle.tsx

@@ -0,0 +1,29 @@
+import { type JSX, splitProps } from "solid-js";
+
+export interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+	label?: string;
+	description?: string;
+	size?: "sm" | "md";
+}
+
+export function Toggle(props: ToggleProps) {
+	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 (
+		<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>
+	);
+}

package/src/index.tsx

@@ -0,0 +1,65 @@
+// Components
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./components/Button";
+export { Badge, type BadgeProps, type BadgeVariant } from "./components/Badge";
+export {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+	CardFooter,
+	type CardProps,
+} from "./components/Card";
+export { Input, Textarea, Select, type InputProps, type TextareaProps, type SelectProps } from "./components/Input";
+export { Status, type StatusProps, type StatusState } from "./components/Status";
+export { Stat, type StatProps } from "./components/Stat";
+export { Spinner, type SpinnerProps, type SpinnerSize } from "./components/Spinner";
+export { Chevron, type ChevronProps, type ChevronFacing } from "./components/Chevron";
+export { Empty, type EmptyProps } from "./components/Empty";
+export {
+	Modal,
+	ModalHeader,
+	ModalTitle,
+	ModalBody,
+	ModalFooter,
+	type ModalProps,
+} from "./components/Modal";
+export {
+	Dropdown,
+	DropdownTrigger,
+	DropdownMenu,
+	DropdownItem,
+	DropdownDivider,
+	type DropdownProps,
+	type DropdownTriggerProps,
+	type DropdownMenuProps,
+	type DropdownItemProps,
+} from "./components/Dropdown";
+export { Clamp, type ClampProps } from "./components/Clamp";
+export { Collapsible, type CollapsibleProps } from "./components/Collapsible";
+export {
+	Stepper,
+	Step,
+	type StepperProps,
+	type StepProps,
+	type StepStatus,
+} from "./components/Stepper";
+export {
+	Tabs,
+	TabList,
+	Tab,
+	TabPanel,
+	type TabsProps,
+	type TabListProps,
+	type TabProps,
+	type TabPanelProps,
+} from "./components/Tabs";
+export { Checkbox, type CheckboxProps } from "./components/Checkbox";
+export { Toggle, type ToggleProps } from "./components/Toggle";
+export { FormField, type FormFieldProps } from "./components/FormField";
+export {
+	Timeline,
+	type TimelineProps,
+	type TimelineItem,
+	type TimelineItemVariant,
+} from "./components/Timeline";