@f0rbit/ui 0.1.2

package/dist/tokens.css

@@ -0,0 +1,121 @@
+@layer tokens {
+	:root {
+		--bg: oklch(97% 0.02 290);
+		--bg-alt: oklch(96% 0.01 290);
+		--border: oklch(91% 0.01 290);
+
+		--fg: oklch(1% 0.02 290);
+		--fg-muted: oklch(25% 0.02 290);
+		--fg-subtle: oklch(35% 0.02 290);
+		--fg-faint: oklch(50% 0.03 290);
+
+		--accent: oklch(46% 0.015 300);
+		--accent-fg: var(--bg);
+
+		--success: oklch(0.95 0.05 150);
+		--success-fg: oklch(0.35 0.15 150);
+		--error: oklch(0.95 0.05 20);
+		--error-fg: oklch(0.45 0.15 20);
+		--warning: oklch(0.95 0.08 85);
+		--warning-fg: oklch(0.45 0.15 85);
+		--info: oklch(0.95 0.05 240);
+		--info-fg: oklch(0.4 0.15 240);
+
+		--font: "neue-haas-grotesk-text", "Inter", Helvetica, sans-serif;
+		--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+		--font-semibold: 600;
+
+		--text-xs: 0.75rem;
+		--text-xs-lh: 1rem;
+		--text-sm: 0.875rem;
+		--text-sm-lh: 1.25rem;
+		--text-base: 1rem;
+		--text-base-lh: 1.5rem;
+		--text-lg: 1.125rem;
+		--text-lg-lh: 1.75rem;
+		--text-xl: 1.25rem;
+		--text-xl-lh: 1.75rem;
+		--text-2xl: 1.5rem;
+		--text-2xl-lh: 2rem;
+		--text-3xl: 1.875rem;
+		--text-3xl-lh: 2.25rem;
+		--text-4xl: 2.25rem;
+		--text-4xl-lh: 2.5rem;
+
+		--leading-normal: 1.5;
+
+		--space-xs: 0.25rem;
+		--space-sm: 0.35rem;
+		--space-md: 0.75rem;
+		--space-lg: 1.5rem;
+		--space-xl: 2.5rem;
+
+		--radius: 0.25rem;
+		--radius-lg: 0.5rem;
+
+		--shadow: 0 1px 3px rgb(0 0 0 / 0.1);
+		--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.15);
+
+		--transition: 150ms ease;
+
+		--hover-filter: brightness(0.8);
+	}
+
+	/* Dark mode: system preference or explicit data-theme */
+	@media (prefers-color-scheme: dark) {
+		:root:not([data-theme="light"]) {
+			--bg: oklch(21% 0.015 280);
+			--bg-alt: oklch(27% 0.02 290);
+			--border: oklch(32% 0.02 290);
+
+			--fg: oklch(100% 0 0);
+			--fg-muted: oklch(85% 0.02 290);
+			--fg-subtle: oklch(75% 0.02 290);
+			--fg-faint: oklch(60% 0.03 290);
+
+			--accent: oklch(70% 0.035 280);
+
+			--success: oklch(0.35 0.05 150);
+			--success-fg: oklch(0.85 0.1 150);
+			--error: oklch(0.35 0.05 20);
+			--error-fg: oklch(0.85 0.1 20);
+			--warning: oklch(0.35 0.08 85);
+			--warning-fg: oklch(0.85 0.12 85);
+			--info: oklch(0.35 0.05 240);
+			--info-fg: oklch(0.85 0.1 240);
+
+			--shadow: 0 1px 3px rgb(0 0 0 / 0.3);
+			--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.4);
+
+			--hover-filter: brightness(1.2);
+		}
+	}
+
+	/* Explicit dark theme override */
+	:root[data-theme="dark"] {
+		--bg: oklch(21% 0.015 280);
+		--bg-alt: oklch(27% 0.02 290);
+		--border: oklch(32% 0.02 290);
+
+		--fg: oklch(100% 0 0);
+		--fg-muted: oklch(85% 0.02 290);
+		--fg-subtle: oklch(75% 0.02 290);
+		--fg-faint: oklch(60% 0.03 290);
+
+		--accent: oklch(70% 0.035 280);
+
+		--success: oklch(0.35 0.05 150);
+		--success-fg: oklch(0.85 0.1 150);
+		--error: oklch(0.35 0.05 20);
+		--error-fg: oklch(0.85 0.1 20);
+		--warning: oklch(0.35 0.08 85);
+		--warning-fg: oklch(0.85 0.12 85);
+		--info: oklch(0.35 0.05 240);
+		--info-fg: oklch(0.85 0.1 240);
+
+		--shadow: 0 1px 3px rgb(0 0 0 / 0.3);
+		--shadow-lg: 0 10px 25px rgb(0 0 0 / 0.4);
+
+		--hover-filter: brightness(1.2);
+	}
+}

package/dist/utilities.css

@@ -0,0 +1,298 @@
+@layer utilities {
+	.stack {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stack-gap, var(--space-md));
+	}
+
+	.stack-sm {
+		--stack-gap: var(--space-sm);
+	}
+
+	.stack-lg {
+		--stack-gap: var(--space-lg);
+	}
+
+	.row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: var(--row-gap, var(--space-sm));
+	}
+
+	.row-sm {
+		--row-gap: var(--space-xs);
+	}
+
+	.row-lg {
+		--row-gap: var(--space-md);
+	}
+
+	.row-between {
+		justify-content: space-between;
+	}
+
+	.row-end {
+		justify-content: flex-end;
+	}
+
+	.row-start {
+		align-items: flex-start;
+	}
+
+	.cluster {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-sm);
+		align-items: center;
+	}
+
+	.center {
+		max-width: var(--center-width, 65ch);
+		margin-inline: auto;
+		padding-inline: var(--space-md);
+	}
+
+	.center-narrow {
+		--center-width: 45ch;
+	}
+
+	.center-wide {
+		--center-width: 90ch;
+	}
+
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 250px), 1fr));
+		gap: var(--space-md);
+	}
+
+	.grid-2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	.grid-3 {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	.grid-4 {
+		grid-template-columns: repeat(4, 1fr);
+	}
+
+	.text-primary {
+		color: var(--fg);
+	}
+
+	.text-muted {
+		color: var(--fg-muted);
+	}
+
+	.text-subtle {
+		color: var(--fg-subtle);
+	}
+
+	.text-faint {
+		color: var(--fg-faint);
+	}
+
+	.text-accent {
+		color: var(--accent);
+	}
+
+	.text-xs {
+		font-size: var(--text-xs);
+		line-height: var(--text-xs-lh);
+	}
+
+	.text-sm {
+		font-size: var(--text-sm);
+		line-height: var(--text-sm-lh);
+	}
+
+	.text-base {
+		font-size: var(--text-base);
+		line-height: var(--text-base-lh);
+	}
+
+	.text-lg {
+		font-size: var(--text-lg);
+		line-height: var(--text-lg-lh);
+	}
+
+	.text-xl {
+		font-size: var(--text-xl);
+		line-height: var(--text-xl-lh);
+	}
+
+	.text-2xl {
+		font-size: var(--text-2xl);
+		line-height: var(--text-2xl-lh);
+	}
+
+	.text-3xl {
+		font-size: var(--text-3xl);
+		line-height: var(--text-3xl-lh);
+	}
+
+	.text-4xl {
+		font-size: var(--text-4xl);
+		line-height: var(--text-4xl-lh);
+	}
+
+	.font-medium {
+		font-weight: 500;
+	}
+
+	.font-bold {
+		font-weight: 700;
+	}
+
+	.font-mono {
+		font-family: var(--font-mono);
+	}
+
+	.truncate {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.list {
+		padding-left: var(--space-lg);
+	}
+
+	.list li {
+		position: relative;
+		padding-left: var(--space-sm);
+		margin-bottom: var(--space-xs);
+	}
+
+	.list li::marker {
+		color: var(--fg-faint);
+	}
+
+	.list li:last-child {
+		margin-bottom: 0;
+	}
+
+	ul.list {
+		list-style-type: disc;
+	}
+
+	ul.list ul {
+		list-style-type: circle;
+		margin-top: var(--space-xs);
+		padding-left: var(--space-lg);
+	}
+
+	ul.list ul ul {
+		list-style-type: square;
+	}
+
+	ol.list {
+		list-style-type: decimal;
+	}
+
+	ol.list ol {
+		list-style-type: lower-alpha;
+		margin-top: var(--space-xs);
+		padding-left: var(--space-lg);
+	}
+
+	ol.list ol ol {
+		list-style-type: lower-roman;
+	}
+
+	.list li > ul,
+	.list li > ol {
+		margin-top: var(--space-xs);
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		border: 0;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.hover-reveal {
+		opacity: 0;
+		transition: opacity var(--transition);
+	}
+
+	*:hover > .hover-reveal,
+	*:focus-within > .hover-reveal {
+		opacity: 1;
+	}
+
+	.interactive {
+		--_hover-border: var(--hover-border, var(--fg-faint));
+		transition: border-color var(--transition);
+	}
+
+	.interactive:hover {
+		border-color: var(--_hover-border);
+	}
+
+	.interactive-color {
+		--_hover-color: var(--hover-color, var(--fg));
+		transition: color var(--transition);
+	}
+
+	.interactive-color:hover {
+		color: var(--_hover-color);
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes pulse {
+		50% {
+			opacity: 0.5;
+		}
+	}
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	.animate-spin {
+		animation: spin 1s linear infinite;
+	}
+
+	.animate-pulse {
+		animation: pulse 2s ease-in-out infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.animate-spin,
+		.animate-pulse {
+			animation: none;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.hide-mobile {
+			display: none;
+		}
+
+		.grid-2,
+		.grid-3,
+		.grid-4 {
+			grid-template-columns: 1fr;
+		}
+	}
+}

package/package.json

@@ -0,0 +1,84 @@
+{
+	"name": "@f0rbit/ui",
+	"version": "0.1.2",
+	"description": "A minimal, composable UI component library for SolidJS",
+	"type": "module",
+	"main": "./dist/server.js",
+	"module": "./dist/server.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"worker": {
+				"solid": "./dist/server.jsx",
+				"import": {
+					"types": "./dist/index.d.ts",
+					"default": "./dist/server.js"
+				}
+			},
+			"browser": {
+				"solid": "./dist/index.jsx",
+				"import": {
+					"types": "./dist/index.d.ts",
+					"default": "./dist/index.js"
+				}
+			},
+			"deno": {
+				"solid": "./dist/server.jsx",
+				"import": {
+					"types": "./dist/index.d.ts",
+					"default": "./dist/server.js"
+				}
+			},
+			"node": {
+				"solid": "./dist/server.jsx",
+				"import": {
+					"types": "./dist/index.d.ts",
+					"default": "./dist/server.js"
+				}
+			},
+			"solid": "./dist/index.jsx",
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.js"
+			}
+		},
+		"./styles": "./dist/styles.css",
+		"./styles/tokens": "./dist/tokens.css",
+		"./styles/reset": "./dist/reset.css",
+		"./styles/utilities": "./dist/utilities.css",
+		"./styles/components": "./dist/components.css"
+	},
+	"files": ["dist", "src"],
+	"scripts": {
+		"build": "tsup && npm run build:css",
+		"build:css": "node scripts/build-css.js",
+		"build:llm": "node scripts/generate-llm-docs.js",
+		"dev": "tsup --watch",
+		"typecheck": "tsc --noEmit",
+		"prepublishOnly": "npm run build",
+		"docs": "bun run build && bun run build:llm && cd docs && bun run dev",
+		"docs:dev": "cd docs && bun run dev",
+		"docs:build": "bun run build:llm && cd docs && bun run build"
+	},
+	"peerDependencies": {
+		"solid-js": "^1.8.0"
+	},
+	"devDependencies": {
+		"esbuild-plugin-solid": "^0.6.0",
+		"solid-js": "^1.9.3",
+		"tsup": "^8.3.5",
+		"tsup-preset-solid": "^2.2.0",
+		"typescript": "^5.7.2"
+	},
+	"keywords": ["solid", "solidjs", "ui", "components", "design-system"],
+	"author": "f0rbit",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/f0rbit/ui.git"
+	},
+	"browser": {
+		"./dist/server.js": "./dist/index.js"
+	},
+	"typesVersions": {}
+}

package/src/components/Badge.tsx

@@ -0,0 +1,38 @@
+import { JSX, splitProps } from "solid-js";
+
+export type BadgeVariant = "default" | "success" | "error" | "warning" | "info" | "accent";
+
+export interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+	variant?: BadgeVariant;
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+	default: "",
+	success: "badge-success",
+	error: "badge-error",
+	warning: "badge-warning",
+	info: "badge-info",
+	accent: "badge-accent",
+};
+
+export function Badge(props: BadgeProps) {
+	const [local, rest] = splitProps(props, ["variant", "class", "children"]);
+
+	const classes = () => {
+		const parts = ["badge"];
+		const variant = local.variant ?? "default";
+		if (variant !== "default") {
+			parts.push(variantClasses[variant]);
+		}
+		if (local.class) {
+			parts.push(local.class);
+		}
+		return parts.join(" ");
+	};
+
+	return (
+		<span class={classes()} {...rest}>
+			{local.children}
+		</span>
+	);
+}

package/src/components/Button.tsx

@@ -0,0 +1,55 @@
+import { JSX, splitProps } from "solid-js";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: ButtonVariant;
+	size?: ButtonSize;
+	icon?: boolean;
+	label?: string;
+	loading?: boolean;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+	primary: "",
+	secondary: "btn-secondary",
+	ghost: "btn-ghost",
+	danger: "btn-danger",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+	sm: "btn-sm",
+	md: "",
+	lg: "btn-lg",
+};
+
+export function Button(props: ButtonProps) {
+	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 : undefined}
+			disabled={local.disabled || local.loading}
+			{...rest}
+		>
+			{local.loading ? <span class="spinner spinner-sm" /> : local.children}
+		</button>
+	);
+}

package/src/components/Card.tsx

@@ -0,0 +1,82 @@
+import { JSX, splitProps } from "solid-js";
+
+export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	interactive?: boolean;
+}
+
+export interface CardHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+export interface CardTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {}
+export interface CardDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {}
+export interface CardContentProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+export interface CardFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+export function Card(props: CardProps) {
+	const [local, rest] = splitProps(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>
+	);
+}
+
+export function CardHeader(props: CardHeaderProps) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+
+	return (
+		<div class={`card-header ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>
+	);
+}
+
+export function CardTitle(props: CardTitleProps) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+
+	return (
+		<h3 class={`card-title ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</h3>
+	);
+}
+
+export function CardDescription(props: CardDescriptionProps) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+
+	return (
+		<p class={`card-description ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</p>
+	);
+}
+
+export function CardContent(props: CardContentProps) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+
+	return (
+		<div class={`card-content ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>
+	);
+}
+
+export function CardFooter(props: CardFooterProps) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+
+	return (
+		<div class={`card-footer ${local.class ?? ""}`.trim()} {...rest}>
+			{local.children}
+		</div>
+	);
+}