@f0rbit/ui 0.1.2

package/src/components/Checkbox.tsx

@@ -0,0 +1,50 @@
+import { type JSX, splitProps, createEffect, onMount } from "solid-js";
+
+export interface CheckboxProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type"> {
+	label?: string;
+	description?: string;
+	indeterminate?: boolean;
+}
+
+export function Checkbox(props: CheckboxProps) {
+	const [local, rest] = splitProps(props, ["label", "description", "indeterminate", "class", "disabled", "id"]);
+	
+	let inputRef: HTMLInputElement | undefined;
+	
+	const setIndeterminate = () => {
+		if (inputRef) inputRef.indeterminate = local.indeterminate ?? false;
+	};
+	
+	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, "-")}` : undefined);
+	
+	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>
+	);
+}

package/src/components/Chevron.tsx

@@ -0,0 +1,36 @@
+import { type JSX, splitProps } from "solid-js";
+
+export type ChevronFacing = "right" | "down";
+
+export interface ChevronProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
+	expanded?: boolean;
+	/** Which way the chevron points. Default: "right" */
+	facing?: ChevronFacing;
+	size?: number | string;
+}
+
+export function Chevron(props: ChevronProps) {
+	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 (
+		<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>
+	);
+}

package/src/components/Clamp.tsx

@@ -0,0 +1,51 @@
+import { type JSX, splitProps, createSignal, Show } from "solid-js";
+
+export interface ClampProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	lines?: number;
+	showMoreText?: string;
+	showLessText?: string;
+}
+
+export function Clamp(props: ClampProps) {
+	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);
+
+	let contentRef: HTMLDivElement | undefined;
+
+	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>
+			<Show when={overflows() || expanded()}>
+				<button class="clamp-toggle" onClick={toggle}>
+					{expanded() ? showLessText() : showMoreText()}
+				</button>
+			</Show>
+		</div>
+	);
+}

package/src/components/Collapsible.tsx

@@ -0,0 +1,39 @@
+import { type JSX, splitProps, createSignal, Show } from "solid-js";
+import { Chevron } from "./Chevron";
+
+export interface CollapsibleProps {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	children: JSX.Element;
+	trigger: JSX.Element | string;
+}
+
+export function Collapsible(props: CollapsibleProps) {
+	const [local, rest] = splitProps(props, ["defaultOpen", "open", "onOpenChange", "children", "trigger"]);
+
+	const [internalOpen, setInternalOpen] = createSignal(local.defaultOpen ?? false);
+
+	const isControlled = () => local.open !== undefined;
+	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>
+			<Show when={isOpen()}>
+				<div class="collapsible-content">{local.children}</div>
+			</Show>
+		</div>
+	);
+}

package/src/components/Dropdown.tsx

@@ -0,0 +1,114 @@
+import { type JSX, splitProps, createSignal, Show, onMount, onCleanup, createContext, useContext } from "solid-js";
+import { isServer } from "solid-js/web";
+
+type DropdownContextValue = {
+	open: () => boolean;
+	setOpen: (value: boolean) => void;
+	close: () => void;
+};
+
+const DropdownContext = createContext<DropdownContextValue>();
+
+export interface DropdownProps {
+	children: JSX.Element;
+}
+
+export interface DropdownTriggerProps {
+	children: JSX.Element;
+}
+
+export interface DropdownMenuProps {
+	children: JSX.Element;
+}
+
+export interface DropdownItemProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+	onClick?: () => void;
+	active?: boolean;
+	children: JSX.Element;
+}
+
+export function Dropdown(props: DropdownProps) {
+	const [open, setOpen] = createSignal(false);
+	let containerRef: HTMLDivElement | undefined;
+
+	const close = () => setOpen(false);
+
+	const handleClickOutside = (e: MouseEvent) => {
+		if (!containerRef?.contains(e.target as Node)) {
+			close();
+		}
+	};
+
+	const handleKeyDown = (e: KeyboardEvent) => {
+		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 (
+		<DropdownContext.Provider value={{ open, setOpen, close }}>
+			<div ref={el => (containerRef = el)} class="dropdown">
+				{props.children}
+			</div>
+		</DropdownContext.Provider>
+	);
+}
+
+export function DropdownTrigger(props: DropdownTriggerProps) {
+	const ctx = useContext(DropdownContext);
+
+	const handleClick = (e: MouseEvent) => {
+		e.stopPropagation();
+		ctx?.setOpen(!ctx.open());
+	};
+
+	return (
+		<div class="dropdown-trigger" onClick={handleClick}>
+			{props.children}
+		</div>
+	);
+}
+
+export function DropdownMenu(props: DropdownMenuProps) {
+	const ctx = useContext(DropdownContext);
+
+	return (
+		<Show when={ctx?.open()}>
+			<div class="dropdown-menu">{props.children}</div>
+		</Show>
+	);
+}
+
+export function DropdownItem(props: DropdownItemProps) {
+	const [local, rest] = splitProps(props, ["onClick", "active", "children"]);
+	const ctx = useContext(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>
+	);
+}
+
+export function DropdownDivider() {
+	return <div class="dropdown-divider" />;
+}

package/src/components/Empty.tsx

@@ -0,0 +1,22 @@
+import { type JSX, splitProps } from "solid-js";
+
+type EmptyProps = {
+	icon?: JSX.Element;
+	title?: string;
+	description?: string;
+	children?: JSX.Element;
+};
+
+export function Empty(props: EmptyProps): JSX.Element {
+	const [local] = splitProps(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>
+	);
+}
+export type { EmptyProps };

package/src/components/FormField.tsx

@@ -0,0 +1,33 @@
+import { type JSX, splitProps, Show } from "solid-js";
+
+export interface FormFieldProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	label: string;
+	error?: string;
+	description?: string;
+	required?: boolean;
+	children: JSX.Element;
+	id?: string;
+}
+
+export function FormField(props: FormFieldProps) {
+	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 (
+		<div class={classes()} {...rest}>
+			<label class="form-field-label" for={local.id}>
+				{local.label}
+				<Show when={local.required}>
+					<span class="form-field-required" aria-hidden="true">*</span>
+				</Show>
+			</label>
+			<Show when={local.description}>
+				<span class="form-field-description">{local.description}</span>
+			</Show>
+			{local.children}
+			<Show when={local.error}>
+				<span class="form-field-error" role="alert">{local.error}</span>
+			</Show>
+		</div>
+	);
+}

package/src/components/Input.tsx

@@ -0,0 +1,35 @@
+import { type JSX, splitProps } from "solid-js";
+
+export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
+	error?: boolean;
+}
+
+export interface TextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
+	error?: boolean;
+}
+
+export interface SelectProps extends JSX.SelectHTMLAttributes<HTMLSelectElement> {
+	error?: boolean;
+}
+
+export function Input(props: InputProps) {
+	const [local, rest] = splitProps(props, ["error", "class", "disabled"]);
+	const classes = () => `input ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+	return <input class={classes()} disabled={local.disabled} {...rest} />;
+}
+
+export function Textarea(props: TextareaProps) {
+	const [local, rest] = splitProps(props, ["error", "class", "disabled"]);
+	const classes = () => `textarea ${local.error ? "input-error" : ""} ${local.class ?? ""}`.trim();
+	return <textarea class={classes()} disabled={local.disabled} {...rest} />;
+}
+
+export function Select(props: SelectProps) {
+	const [local, rest] = splitProps(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>
+	);
+}

package/src/components/Modal.tsx

@@ -0,0 +1,106 @@
+import { type JSX, splitProps, Show, onMount, onCleanup, createContext, useContext } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+
+type ModalContextValue = { onClose: () => void };
+const ModalContext = createContext<ModalContextValue>();
+
+export interface ModalProps extends JSX.DialogHtmlAttributes<HTMLDialogElement> {
+	open: boolean;
+	onClose: () => void;
+}
+
+export interface ModalHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+export interface ModalTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {}
+export interface ModalBodyProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+export interface ModalFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+export function Modal(props: ModalProps) {
+	const [local, rest] = splitProps(props, ["open", "onClose", "class", "children"]);
+
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if (e.key === "Escape" && local.open) {
+			local.onClose();
+		}
+	};
+
+	const handleOverlayClick = (e: MouseEvent) => {
+		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: KeyboardEvent) => e.key === "Escape" && local.onClose()} role="presentation">
+						<dialog class={classes()} open aria-modal="true" {...rest}>
+							{local.children}
+						</dialog>
+					</div>
+				</ModalContext.Provider>
+			</Portal>
+		</Show>
+	);
+}
+
+export function ModalHeader(props: ModalHeaderProps) {
+	const [local, rest] = splitProps(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>
+	);
+}
+
+export function ModalTitle(props: ModalTitleProps) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+
+	return (
+		<h2 class={`modal-title ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</h2>
+	);
+}
+
+export function ModalBody(props: ModalBodyProps) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+
+	return (
+		<div class={`modal-body ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>
+	);
+}
+
+export function ModalFooter(props: ModalFooterProps) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+
+	return (
+		<div class={`modal-footer ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>
+	);
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,31 @@
+import { type JSX, splitProps } from "solid-js";
+
+export type SpinnerSize = "sm" | "md" | "lg";
+
+export interface SpinnerProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+	size?: SpinnerSize;
+}
+
+const sizeClasses: Record<SpinnerSize, string> = {
+	sm: "spinner-sm",
+	md: "",
+	lg: "spinner-lg",
+};
+
+export function Spinner(props: SpinnerProps) {
+	const [local, rest] = splitProps(props, ["size", "class"]);
+
+	const classes = () => {
+		const parts = ["spinner"];
+		const size = local.size ?? "md";
+		if (size !== "md") {
+			parts.push(sizeClasses[size]);
+		}
+		if (local.class) {
+			parts.push(local.class);
+		}
+		return parts.join(" ");
+	};
+
+	return <span class={classes()} {...rest} />;
+}

package/src/components/Stat.tsx

@@ -0,0 +1,18 @@
+import { type JSX, splitProps } from "solid-js";
+
+type StatProps = {
+	value: string | number;
+	label: string;
+} & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children">;
+
+export function Stat(props: StatProps): JSX.Element {
+	const [local, rest] = splitProps(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>
+	);
+}
+export type { StatProps };

package/src/components/Status.tsx

@@ -0,0 +1,43 @@
+import { type JSX, splitProps } from "solid-js";
+
+export type StatusState = "active" | "inactive" | "error" | "pending";
+
+export interface StatusProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+	state: StatusState;
+	label?: string;
+}
+
+const stateClasses: Record<StatusState, string> = {
+	active: "status-active",
+	inactive: "status-inactive",
+	error: "status-error",
+	pending: "status-pending",
+};
+
+const defaultLabels: Record<StatusState, string> = {
+	active: "Active",
+	inactive: "Inactive",
+	error: "Error",
+	pending: "Pending",
+};
+
+export function Status(props: StatusProps) {
+	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 (
+		<span class={classes()} {...rest}>
+			<span class="status-dot" />
+			<span>{displayLabel()}</span>
+		</span>
+	);
+}