@torch-ui/solid 0.1.3

package/src/components/layout/CodeBlock/code-block-tokens.css

@@ -0,0 +1,104 @@
+/**
+ * CodeBlock Prism token colors. Import in your app:
+ *   import '@torchui/solid/styles/code-block-tokens.css'
+ *
+ * Theme via CSS variables (e.g. in Tailwind @theme or :root / .dark):
+ *   --code-token-default   untokenized text + base token
+ *   --code-token-comment   comment, prolog, doctype
+ *   --code-token-punctuation
+ *   --code-token-keyword   keyword, boolean
+ *   --code-token-function  function, class-name
+ *   --code-token-string    string, char, attr-value
+ *   --code-token-number
+ *   --code-token-property  property, tag, symbol, selector, attr-name, builtin
+ *   --code-token-operator  operator, entity, url
+ *   --code-token-variable  regex, important, variable
+ *
+ * Set on :root (or @theme) for light; set on .dark for dark. For CodeBlock with dark prop
+ * to show dark tokens in light mode, set the same dark variables on .code-block-dark in your app:
+ *   .code-block-dark pre[data-torchui="code-block"] { ...dark vars... }
+ */
+
+/* Base rule with safe fallbacks */
+pre[data-torchui="code-block"] {
+	color: var(--code-token-default, currentColor);
+}
+pre[data-torchui="code-block"] :is(.token, .token *) {
+	color: var(--code-token-default, currentColor);
+}
+
+/* Token-specific colors with fallbacks to default */
+pre[data-torchui="code-block"] .token.comment,
+pre[data-torchui="code-block"] .token.prolog,
+pre[data-torchui="code-block"] .token.doctype { 
+	color: var(--code-token-comment, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.punctuation { 
+	color: var(--code-token-punctuation, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.keyword,
+pre[data-torchui="code-block"] .token.boolean { 
+	color: var(--code-token-keyword, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.function,
+pre[data-torchui="code-block"] .token.class-name { 
+	color: var(--code-token-function, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.string,
+pre[data-torchui="code-block"] .token.char,
+pre[data-torchui="code-block"] .token.attr-value { 
+	color: var(--code-token-string, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.number { 
+	color: var(--code-token-number, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.property,
+pre[data-torchui="code-block"] .token.tag,
+pre[data-torchui="code-block"] .token.symbol,
+pre[data-torchui="code-block"] .token.selector,
+pre[data-torchui="code-block"] .token.attr-name,
+pre[data-torchui="code-block"] .token.builtin { 
+	color: var(--code-token-property, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.operator,
+pre[data-torchui="code-block"] .token.entity,
+pre[data-torchui="code-block"] .token.url { 
+	color: var(--code-token-operator, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.regex,
+pre[data-torchui="code-block"] .token.important,
+pre[data-torchui="code-block"] .token.variable { 
+	color: var(--code-token-variable, var(--code-token-default, currentColor)); 
+}
+
+/* Additional common Prism token aliases */
+pre[data-torchui="code-block"] .token.parameter,
+pre[data-torchui="code-block"] .token.constant,
+pre[data-torchui="code-block"] .token.namespace { 
+	color: var(--code-token-variable, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.atrule { 
+	color: var(--code-token-keyword, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.interpolation,
+pre[data-torchui="code-block"] .token.interpolation-punctuation { 
+	color: var(--code-token-string, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.inserted { 
+	color: var(--code-token-string, var(--code-token-default, currentColor)); 
+}
+
+pre[data-torchui="code-block"] .token.deleted { 
+	color: var(--code-token-operator, var(--code-token-default, currentColor)); 
+}

package/src/components/layout/CodeBlock/prism.ts

@@ -0,0 +1,81 @@
+/**
+ * Prism syntax highlighting for CodeBlock. Supports many languages; add more
+ * prismjs/components/prism-* imports as needed. Apps style tokens via
+ * .code-block (follows app .dark), .code-block-dark (forced), .code-block-primary.
+ */
+import Prism from 'prismjs'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-diff'
+import 'prismjs/components/prism-docker'
+import 'prismjs/components/prism-git'
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-graphql'
+import 'prismjs/components/prism-ini'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-ruby'
+import 'prismjs/components/prism-rust'
+import 'prismjs/components/prism-sass'
+import 'prismjs/components/prism-scss'
+import 'prismjs/components/prism-sql'
+import 'prismjs/components/prism-toml'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-tsx'
+import 'prismjs/components/prism-yaml'
+
+const LANGUAGE_ALIASES: Record<string, string> = {
+	js: 'javascript',
+	ts: 'typescript',
+	jsx: 'jsx',
+	tsx: 'tsx',
+	sh: 'bash',
+	shell: 'bash',
+	zsh: 'bash',
+	html: 'markup',
+	xml: 'markup',
+	py: 'python',
+	rb: 'ruby',
+	rs: 'rust',
+	yml: 'yaml',
+	text: 'plaintext',
+	plain: 'plaintext',
+	txt: 'plaintext',
+}
+
+function normalizeLang(lang: string): string {
+	const key = lang.toLowerCase()
+	return LANGUAGE_ALIASES[key] ?? key
+}
+
+/**
+ * Highlight code string to HTML. Use this (and set el.innerHTML) for dynamic content.
+ * highlightElement() is for static page HTML; Prism.highlight() is the right API for programmatic use.
+ */
+export function highlightCode(code: string, language: string): string {
+	const lang = normalizeLang(language)
+	const grammar = Prism.languages[lang]
+	if (!grammar) return escapeHtml(code)
+	return Prism.highlight(code, grammar, lang)
+}
+
+/** Escape text for safe insertion into HTML. Output is HTML-escaped text only — not safe for use in attribute contexts. */
+function escapeHtml(text: string): string {
+	if (typeof document === 'undefined') {
+		return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+	}
+	const el = document.createElement('div')
+	el.textContent = text
+	return el.innerHTML
+}
+
+/** Highlight a <code> element in place. Call after mount when content/language changes. */
+export function highlightElement(element: HTMLElement, language: string): void {
+	const lang = normalizeLang(language)
+	element.classList.add(`language-${lang}`)
+	Prism.highlightElement(element, false)
+}

package/src/components/layout/Collapsible.tsx

@@ -0,0 +1,84 @@
+import { type JSX, splitProps } from 'solid-js'
+import { Collapsible as KobalteCollapsible, type CollapsibleContentProps as KobalteCollapsibleContentProps, type CollapsibleTriggerProps as KobalteCollapsibleTriggerProps } from '@kobalte/core/collapsible'
+import { ChevronDown } from 'lucide-solid'
+import { cn } from '../../utilities/classNames'
+
+export const CollapsibleRoot = KobalteCollapsible
+export const CollapsibleTrigger = KobalteCollapsible.Trigger
+export const CollapsibleContent = KobalteCollapsible.Content
+
+const COLLAPSIBLE_STYLE_ID = 'torchui-collapsible-styles'
+
+const collapsibleStyles = `
+.collapsible-content[data-expanded] {
+	animation: torchui-collapsible-down 200ms ease-out;
+}
+.collapsible-content[data-closed] {
+	animation: torchui-collapsible-up 200ms ease-out;
+}
+@keyframes torchui-collapsible-down {
+	from { height: 0; opacity: 0; }
+	to { height: var(--kb-collapsible-content-height); opacity: 1; }
+}
+@keyframes torchui-collapsible-up {
+	from { height: var(--kb-collapsible-content-height); opacity: 1; }
+	to { height: 0; opacity: 0; }
+}
+`
+
+function ensureCollapsibleStyles() {
+	if (typeof document === 'undefined') return
+	if (document.getElementById(COLLAPSIBLE_STYLE_ID)) return
+	const style = document.createElement('style')
+	style.id = COLLAPSIBLE_STYLE_ID
+	style.textContent = collapsibleStyles
+	document.head.appendChild(style)
+}
+
+// Inject styles once on module load (client-side only)
+// Note: In SSR, keyframes won't exist until client module runs, so first interaction may be unanimated
+if (typeof document !== 'undefined') {
+	ensureCollapsibleStyles()
+}
+
+export interface CollapsibleContentProps extends KobalteCollapsibleContentProps {
+	class?: string
+	children?: JSX.Element
+}
+
+export function CollapsibleContentStyled(props: CollapsibleContentProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteCollapsible.Content
+			class={cn('collapsible-content overflow-hidden', local.class)}
+			{...others}
+		>
+			{local.children}
+		</KobalteCollapsible.Content>
+	)
+}
+
+export interface CollapsibleTriggerStyledProps extends KobalteCollapsibleTriggerProps {
+	class?: string
+	children?: JSX.Element
+}
+
+export function CollapsibleTriggerStyled(props: CollapsibleTriggerStyledProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteCollapsible.Trigger
+			class={cn(
+				'flex w-full items-center justify-between gap-2 rounded-lg border border-surface-border bg-surface-base px-4 py-3 text-left text-sm font-medium text-ink-800',
+				'hover:bg-surface-overlay',
+				'data-[expanded]:rounded-b-none data-[expanded]:bg-surface-overlay',
+				'data-[expanded]:[&>svg]:rotate-180',
+				'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+				local.class
+			)}
+			{...others}
+		>
+			{local.children}
+			<ChevronDown class="h-4 w-4 shrink-0 transition-transform duration-200" aria-hidden="true" />
+		</KobalteCollapsible.Trigger>
+	)
+}

package/src/components/layout/Container.tsx

@@ -0,0 +1,55 @@
+import type { JSX, ParentComponent } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
+export type ContainerAlign = 'start' | 'center' | 'end'
+
+export interface ContainerProps {
+	/** Max width of the container; default md. full = no max-width constraint. Ignored when fluid is true. */
+	size?: ContainerSize
+	/** When true, container stretches to fill the width of its parent (no max-width, no centering). */
+	fluid?: boolean
+	/** Horizontal alignment within parent when not fluid. Default center. */
+	align?: ContainerAlign
+	/** Additional class for the wrapper. */
+	class?: string
+	children?: JSX.Element
+}
+
+const sizeClasses: Record<ContainerSize, string> = {
+	sm: 'max-w-3xl',
+	md: 'max-w-5xl',
+	lg: 'max-w-6xl',
+	xl: 'max-w-7xl',
+	'2xl': 'max-w-[90rem]',
+	full: 'max-w-full',
+}
+
+const alignClasses: Record<ContainerAlign, string> = {
+	start: 'ms-0 me-auto',
+	center: 'mx-auto',
+	end: 'ms-auto me-0',
+}
+
+/**
+ * Centered layout container with max-width and horizontal padding.
+ * No border or background by default—it only confines content (max-width, centering, padding).
+ * Use for page content, forms, or reading width. Set fluid to stretch to full parent width.
+ */
+export const Container: ParentComponent<ContainerProps> = (props) => {
+	const size = () => props.size ?? 'md'
+	const fluid = () => props.fluid === true
+	const align = () => props.align ?? 'center'
+	return (
+		<div
+			class={cn(
+				'w-full px-4 sm:px-6 lg:px-8',
+				!fluid() && alignClasses[align()],
+				!fluid() && size() !== 'full' && sizeClasses[size()],
+				props.class
+			)}
+		>
+			{props.children}
+		</div>
+	)
+}

package/src/components/layout/Divider.tsx

@@ -0,0 +1,64 @@
+import { type JSX, splitProps } from 'solid-js'
+import { Separator as KobalteSeparator } from '@kobalte/core/separator'
+import { cn } from '../../utilities/classNames'
+
+export type DividerStyle = 'solid' | 'dotted' | 'dashed'
+export type DividerWeight = 'thin' | 'medium' | 'thick'
+
+export interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+	/** Optional label shown in the center (e.g. "or continue with") */
+	label?: string
+	/** Line style: solid (default), dotted, or dashed */
+	lineStyle?: DividerStyle
+	/** Line thickness: thin (1px), medium (2px), or thick (4px). Default thin. */
+	weight?: DividerWeight
+}
+
+const weightClasses: Record<DividerWeight, string> = {
+	thin: 'border-t',
+	medium: 'border-t-2',
+	thick: 'border-t-4',
+}
+
+const styleClasses: Record<DividerStyle, string> = {
+	solid: 'border-solid',
+	dotted: 'border-dotted',
+	dashed: 'border-dashed',
+}
+
+const lineBase = 'min-h-0 flex-1 shrink-0 border-surface-border'
+
+export function Divider(props: DividerProps) {
+	const [local, others] = splitProps(props, ['label', 'lineStyle', 'weight', 'class'])
+
+	const lineStyle = () => local.lineStyle ?? 'solid'
+	const weight = () => local.weight ?? 'thin'
+
+	const lineClass = () =>
+		cn(lineBase, weightClasses[weight()], styleClasses[lineStyle()])
+
+	return (
+		<KobalteSeparator
+			as="div"
+			orientation="horizontal"
+			class={cn(
+				'w-full my-6',
+				local.label ? 'flex items-center gap-4' : '',
+				local.class,
+			)}
+			{...others}
+		>
+			{local.label ? (
+				<>
+					<span class={lineClass()} />
+					<span class="shrink-0 whitespace-nowrap text-sm font-medium text-ink-500">
+						{local.label}
+					</span>
+					<span class={lineClass()} />
+				</>
+			) : (
+				<span class={cn(lineClass(), 'block w-full')} />
+			)}
+		</KobalteSeparator>
+	)
+}

package/src/components/layout/Form.tsx

@@ -0,0 +1,39 @@
+import type { JSX } from 'solid-js'
+import { Show, For } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+import { Alert } from './Alert'
+
+export interface FormProps extends Omit<JSX.FormHTMLAttributes<HTMLFormElement>, 'class'> {
+	/** Optional class for the form element */
+	class?: string
+	/** Form content (fields, sections, actions) */
+	children: JSX.Element
+	/** Optional form-level validation summary. When set, rendered at the top. Alert component provides alert semantics. Use for listing all field errors. */
+	errorSummary?: string[] | JSX.Element
+}
+
+/** Form wrapper with consistent spacing. Use with layout primitives and WizardActions for the button row. Supports errorSummary for validation summary. */
+export function Form(props: FormProps): JSX.Element {
+	const { class: className, children, errorSummary, ...rest } = props
+	return (
+		<form class={cn('flex flex-col gap-6', className)} {...rest}>
+			<Show when={errorSummary && (Array.isArray(errorSummary) ? errorSummary.length > 0 : true)}>
+				<>
+					{Array.isArray(errorSummary) ? (
+						<Alert status="error" class="mb-0">
+							<p class="font-medium">Please fix the following:</p>
+							<ul class="mt-1 list-inside list-disc">
+								<For each={errorSummary}>
+									{(msg) => <li>{msg}</li>}
+								</For>
+							</ul>
+						</Alert>
+					) : (
+						errorSummary
+					)}
+				</>
+			</Show>
+			{children}
+		</form>
+	)
+}

package/src/components/layout/FormActions.tsx

@@ -0,0 +1,50 @@
+import type { JSX } from 'solid-js'
+import { Button } from '../actions'
+import { cn } from '../../utilities/classNames'
+
+export interface FormActionsProps {
+	/** Label for the back/secondary button */
+	backLabel: string
+	onBack: () => void
+	/** Label for the primary button */
+	primaryLabel: string
+	loading?: boolean
+	disabled?: boolean
+	class?: string
+}
+
+export interface FormActionsSubmitProps extends FormActionsProps {
+	/** Primary button type */
+	primaryType?: 'submit'
+}
+
+export interface FormActionsButtonProps extends FormActionsProps {
+	/** Primary button type */
+	primaryType: 'button'
+	/** Handler for primary button click (required when type='button') */
+	onPrimary: () => void
+}
+
+export type FormActionsAllProps = FormActionsSubmitProps | FormActionsButtonProps
+
+/** Back + primary button row for forms (e.g. wizard steps). */
+export function FormActions(props: FormActionsAllProps): JSX.Element {
+	const isSubmit = props.primaryType !== 'button'
+	return (
+		<div class={cn('flex gap-3 pt-2', props.class)}>
+			<Button type="button" variant="ghost" onClick={props.onBack} class="rounded-lg">
+				{props.backLabel}
+			</Button>
+			<Button
+				type={isSubmit ? 'submit' : 'button'}
+				variant="primary"
+				loading={props.loading ?? false}
+				disabled={props.disabled ?? false}
+				onClick={isSubmit ? undefined : (props.primaryType === 'button' ? props.onPrimary : undefined)}
+				class="rounded-lg py-2.5 font-semibold"
+			>
+				{props.primaryLabel}
+			</Button>
+		</div>
+	)
+}

package/src/components/layout/Grid.tsx

@@ -0,0 +1,53 @@
+import type { JSX, ParentComponent } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export type GridCols = 1 | 2 | 3 | 4 | 5 | 6
+export type GridGap = 'none' | 'sm' | 'md' | 'lg' | 'xl'
+
+export interface GridProps {
+	/** Number of columns (1–6). Default 1. */
+	cols?: GridCols
+	/** Gap between items. Default md. */
+	gap?: GridGap
+	/** Additional class for the grid wrapper. */
+	class?: string
+	children?: JSX.Element
+}
+
+const colsClasses: Record<GridCols, string> = {
+	1: 'grid-cols-1',
+	2: 'grid-cols-2',
+	3: 'grid-cols-3',
+	4: 'grid-cols-4',
+	5: 'grid-cols-5',
+	6: 'grid-cols-6',
+}
+
+const gapClasses: Record<GridGap, string> = {
+	none: 'gap-0',
+	sm: 'gap-2',
+	md: 'gap-4',
+	lg: 'gap-6',
+	xl: 'gap-8',
+}
+
+/**
+ * CSS grid layout with configurable columns and gap.
+ * Use for card grids, form layouts, or equal-width columns.
+ */
+export const Grid: ParentComponent<GridProps> = (props) => {
+	const cols = () => props.cols ?? 1
+	const gap = () => props.gap ?? 'md'
+	return (
+		<div
+			class={cn(
+				'grid',
+				colsClasses[cols()],
+				gapClasses[gap()],
+				props.class
+			)}
+		>
+			{props.children}
+		</div>
+	)
+}

package/src/components/layout/PageHeading.tsx

@@ -0,0 +1,46 @@
+import { Dynamic } from 'solid-js/web'
+import type { JSX } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export interface PageHeadingProps {
+	/** Main heading text */
+	title: string
+	/** Optional description (plain string) */
+	description?: string
+	/** Optional description as JSX (e.g. with links or emphasis). Takes precedence over description. */
+	descriptionContent?: JSX.Element
+	/** Optional class for the description paragraph */
+	descriptionClass?: string
+	/** Optional class for the wrapper */
+	class?: string
+	/** Optional class for the heading element (h1/h2) */
+	titleClass?: string
+	/** Heading level: 1 or 2. Default 1. */
+	level?: 1 | 2
+}
+
+/** Page title + optional description. Use for consistent page headers. */
+export function PageHeading(props: PageHeadingProps): JSX.Element {
+	const descClass = () =>
+		cn('text-[0.9375rem] text-ink-500', props.descriptionClass ?? 'mt-3')
+	const level = () => props.level ?? 1
+	return (
+		<div class={cn(props.class)}>
+			<Dynamic
+				component={level() === 2 ? 'h2' : 'h1'}
+				class={cn(
+					'font-bold tracking-tight text-ink-900',
+					level() === 2 ? 'text-xl' : 'text-2xl',
+					props.titleClass
+				)}
+			>
+				{props.title}
+			</Dynamic>
+			{props.descriptionContent != null ? (
+				<p class={descClass()}>{props.descriptionContent}</p>
+			) : props.description != null && props.description !== '' ? (
+				<p class={descClass()}>{props.description}</p>
+			) : null}
+		</div>
+	)
+}

package/src/components/layout/PromptWithAction.tsx

@@ -0,0 +1,49 @@
+import type { JSX } from 'solid-js'
+import { cn } from '../../utilities/classNames'
+
+export interface PromptWithActionProps {
+	/** Leading text (e.g. "Don't have an account?") */
+	prompt: string
+	/** Link or button label (e.g. "Sign up") */
+	actionLabel: string
+	/** Optional class for the wrapper */
+	class?: string
+	/** Optional class for the action link/button (e.g. primary link styling) */
+	actionClass?: string
+}
+
+export interface PromptWithActionLinkProps extends PromptWithActionProps {
+	/** Render as link with href */
+	href: string
+	onClick?: never
+}
+
+export interface PromptWithActionButtonProps extends PromptWithActionProps {
+	/** Render as button with click handler */
+	onClick: () => void
+	href?: never
+}
+
+export type PromptWithActionAllProps = PromptWithActionLinkProps | PromptWithActionButtonProps
+
+const defaultActionClass =
+	'cursor-pointer font-medium text-primary-500 hover:underline focus:rounded focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1 dark:text-primary-400 dark:focus:ring-primary-500/40'
+
+/** One line: prompt text plus a link or button action. */
+export function PromptWithAction(props: PromptWithActionAllProps): JSX.Element {
+	const actionClass = () => cn(defaultActionClass, props.actionClass)
+	return (
+		<p class={cn('mb-7 text-[0.9375rem] text-ink-500', props.class)}>
+			{props.prompt}{' '}
+			{props.href != null ? (
+				<a href={props.href} class={actionClass()}>
+					{props.actionLabel}
+				</a>
+			) : (
+				<button type="button" class={actionClass()} onClick={props.onClick}>
+					{props.actionLabel}
+				</button>
+			)}
+		</p>
+	)
+}