@hex-core/components

import {
	Composer, Message, MessageList, MessageActions,
	Reasoning, Citation, ToolCall, Suggestion,
	CodeBlock, Markdown,
	Attachment, LoadingIndicator,
	Sources, InlineCitation, Task, Shimmer,
	Branch, Plan, Conversation, ChainOfThought,
	type Role, type ToolCallState,
} from "@hex-core/components";

"use client";
import { useState } from "react";
import { Composer, Message, MessageList } from "@hex-core/components";

export function Chat({ messages, onSend }) {
	const [input, setInput] = useState("");
	const handleSubmit = (value: string) => {
		onSend(value);
		setInput("");
	};
	return (
		<div className="grid gap-3">
			<MessageList autoScroll>
				{messages.map((m) => (
					<Message key={m.id} role={m.role}>{m.content}</Message>
				))}
			</MessageList>
			<Composer
				value={input}
				onValueChange={setInput}
				onSubmit={handleSubmit}
				placeholder="Ask anything…"
			/>
		</div>
	);
}

import {
	Empty, type EmptyProps, emptyVariants,
	ErrorState, type ErrorStateProps, errorStateVariants,
	Loading, type LoadingProps, loadingVariants,
	Tag, type TagProps, tagVariants,
	Toolbar, ToolbarButton, ToolbarSeparator,
	ToolbarToggleGroup, ToolbarToggleItem, type ToolbarProps,
	Tree, type TreeNode, type TreeProps,
} from "@hex-core/components";

import { Empty, Tag, Button } from "@hex-core/components";

export function NoFiltersYet() {
	return (
		<Empty
			title="No tags applied"
			description="Pick at least one tag to filter the catalog."
			action={<Button size="sm">Browse tags</Button>}
		/>
	);
}

export function FilterChips({ filters, onRemove }) {
	return filters.map((f) => (
		<Tag key={f.id} variant="secondary" onRemove={() => onRemove(f.id)}>
			{f.label}
		</Tag>
	));
}

import {
	buttonVariants, badgeVariants, toggleVariants,
	emptyVariants, loadingVariants, errorStateVariants, tagVariants,
	stackVariants, clusterVariants, gridVariants, spacerVariants,
	containerVariants, toolbarVariants,
	alertVariants, messageVariants, loadingIndicatorVariants, attachmentVariants,
} from "@hex-core/components";

import Link from "next/link";
import { buttonVariants } from "@hex-core/components";
import { cn } from "@/lib/utils";

export function CtaLink() {
	return (
		<Link
			href="/get-started"
			className={cn(buttonVariants({ variant: "outline", size: "lg" }), "w-full")}
		>
			Get started
		</Link>
	);
}

import { Button, type ButtonProps } from "@hex-core/components";

interface ButtonProps {
	variant?: "default" | "outline" | "secondary" | "ghost" | "link" | "destructive";
	size?: "default" | "sm" | "lg" | "icon";
	asChild?: boolean;
}

import { Button } from "@hex-core/components";

export function ConfirmRow() {
	return (
		<div className="flex gap-2">
			<Button variant="outline">Cancel</Button>
			<Button>Confirm</Button>
		</div>
	);
}

import {
	Stack, Cluster, Grid, Container, Spacer, AspectRatio,
} from "@hex-core/components";

interface StackProps {
	gap?: "xs" | "sm" | "md" | "lg" | "xl";
	align?: "start" | "center" | "end" | "stretch";
	justify?: "start" | "center" | "end" | "between";
}

<Stack gap="md">
	<h2>Account</h2>
	<Cluster gap="sm">
		<Button variant="outline">Edit</Button>
		<Button variant="outline">Reset</Button>
	</Cluster>
</Stack>

import { ColorPicker, type ColorPickerProps } from "@hex-core/components";

interface ColorPickerProps {
	value: string; // "240 5.9% 10%" — same triplet @hex-core/tokens emits
	onChange: (value: string) => void;
	disabled?: boolean;
	"aria-label"?: string;
	className?: string;
}

"use client";
import { ColorPicker } from "@hex-core/components";
import { useState } from "react";

export function PrimaryEditor() {
	const [hsl, setHsl] = useState("240 5.9% 10%");
	return <ColorPicker aria-label="Primary color" value={hsl} onChange={setHsl} />;
}

import {
	parseHslTriplet, formatHslTriplet,
	hslToRgb, rgbToHsl,
	hslTripletToHex, hexToHslTriplet,
	type HslTriplet, type RgbColor,
} from "@hex-core/components";

import { hexToHslTriplet, hslTripletToHex } from "@hex-core/components";

const triplet = hexToHslTriplet("#FF5733"); // "11 100% 60%"
const hex = hslTripletToHex("240 5.9% 10%"); // "#18181B"

/* @hex-core/components/tailwind.css — exported entry, not a TS API */
@source "./dist/*.js";

@import "tailwindcss";
@import "@hex-core/components/tailwind.css";

@theme {
	--color-background: hsl(0 0% 100%);
	--color-foreground: hsl(240 10% 3.9%);
	/* ... */
}

pnpm add @hex-core/components @hex-core/tokens
# ensure tailwindcss + @tailwindcss/postcss are already installed

import {
	Stack, Cluster, Grid, Card, CardHeader, CardContent,
	Button, Input, Label, Switch,
} from "@hex-core/components";

export function NotificationSettings() {
	return (
		<Card>
			<CardHeader><h2>Notifications</h2></CardHeader>
			<CardContent>
				<Stack gap="md">
					<Grid cols={2} gap="sm">
						<Stack gap="xs">
							<Label>Email</Label>
							<Input type="email" />
						</Stack>
						<Stack gap="xs">
							<Label>Push</Label>
							<Switch />
						</Stack>
					</Grid>
					<Cluster gap="sm" justify="end">
						<Button variant="outline">Cancel</Button>
						<Button>Save</Button>
					</Cluster>
				</Stack>
			</CardContent>
		</Card>
	);
}