@torch-ui/solid 0.1.3

package/src/components/layout/TableView/index.ts

@@ -0,0 +1,3 @@
+export { TableView, useTableView, emptyFilterGroup } from './TableView'
+export type { TableViewProps, TableViewContextValue } from './TableView'
+export type { TableViewConfig, TableViewsApi, ViewConfig } from './types'

package/src/components/layout/TableView/types.ts

@@ -0,0 +1,51 @@
+import type { FilterGroup } from '../../../types/filter-types'
+import type { ViewCustomizerField } from '../../forms/ViewCustomizer'
+import type { FilterFieldConfig } from '../../forms/FilterBuilder/FilterGroupBlock'
+
+export interface ViewConfig {
+	id: string
+	label: string
+	fields: string[]
+	groupBy: string
+	filters: FilterGroup
+	scope: 'user' | 'tenant'
+	/** When true, this view is used as the default when opening. System default view is fallback when no view is pinned. */
+	pinned?: boolean
+}
+
+/** API for persisting views. When provided, TableView fetches/saves views via these methods. */
+export interface TableViewsApi {
+	fetchViews: (entityType: string) => Promise<ViewConfig[]>
+	createView: (entityType: string, view: Omit<ViewConfig, 'id'>) => Promise<ViewConfig>
+	updateView: (entityType: string, view: ViewConfig) => Promise<void>
+	deleteView: (entityType: string, viewId: string) => Promise<void>
+}
+
+export interface TableViewConfig {
+	/** Entity type for API (e.g. 'contacts', 'jobs'). Required when viewsApi is provided. */
+	entityType?: string
+	/** Default/system views. Must include the system default view (e.g. id: 'all'). */
+	defaultViews: ViewConfig[]
+	/** ID of the system default view shown when no view is pinned (e.g. 'all') */
+	systemDefaultViewId: string
+	/** All fields available for columns (used in ViewCustomizer) */
+	allFields: ViewCustomizerField[]
+	/** Fields for the filter builder */
+	filterFields: FilterFieldConfig[]
+	/** Get operator options for a filter field type */
+	getOperatorsForType: (type: string) => { value: string; label: string }[]
+	/** Initial field IDs for new views */
+	initialFields: string[]
+	/** Row count for the count badge on tabs (fallback when getFilteredCountForView not provided) */
+	rowCount?: number
+	/** Return filtered row count for a specific view. When provided, each tab shows its own filtered count. */
+	getFilteredCountForView?: (view: ViewConfig) => number
+	/** Customize drawer title */
+	customizeTitle?: string
+	/** Customize drawer description */
+	customizeDescription?: string
+	/** Filter drawer title */
+	filterTitle?: string
+	/** Filter drawer description */
+	filterDescription?: string
+}

package/src/components/layout/WizardStep.tsx

@@ -0,0 +1,40 @@
+import type { JSX, ParentComponent } from 'solid-js'
+
+export interface WizardStepProps {
+	/** Step number (1-based) for display */
+	stepNumber?: number
+	/** Step title */
+	title: string
+	/** Optional description below title */
+	description?: string
+	/** Optional class for the wrapper */
+	class?: string
+	children: JSX.Element
+}
+
+/** Wraps one wizard step's content with optional step badge, title, and description. */
+export const WizardStep: ParentComponent<WizardStepProps> = (props) => {
+	return (
+		<div class={props.class}>
+			<div class="mb-1 flex items-center gap-3">
+				{props.stepNumber != null && (
+					<span
+						class="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary-500/10 text-sm font-semibold text-primary-600 dark:bg-primary-500/20 dark:text-primary-400"
+						aria-hidden
+					>
+						{props.stepNumber}
+					</span>
+				)}
+				<h2 class="font-semibold tracking-tight text-xl text-ink-900">
+					{props.title}
+				</h2>
+			</div>
+			{props.description && (
+				<p class="mb-6 text-[0.9375rem] text-ink-500">
+					{props.description}
+				</p>
+			)}
+			{props.children}
+		</div>
+	)
+}

package/src/components/layout/WizardStepper.tsx

@@ -0,0 +1,173 @@
+import { Check, ChevronRight } from 'lucide-solid'
+import { cn } from '../../utilities/classNames'
+
+export type WizardStepperVariant = 'default' | 'compact' | 'pills' | 'chevrons'
+
+export interface WizardStepperProps {
+	/** Current step (1-based) */
+	step: number
+	/** Total number of steps */
+	totalSteps: number
+	/** Step labels (e.g. ['About you', 'Your company']) */
+	stepLabels: string[]
+	/** 'horizontal' | 'vertical' */
+	orientation?: 'horizontal' | 'vertical'
+	/** Visual style: default (circles + line), compact (smaller), pills (tag-style + progress bar), or chevrons (chevron separators). Default: default. */
+	variant?: WizardStepperVariant
+	/** Optional class for the root */
+	class?: string
+}
+
+/** Reusable stepper: numbered steps with labels and connector. */
+export function WizardStepper(props: WizardStepperProps) {
+	const orientation = () => props.orientation ?? 'horizontal'
+	const currentStep = () => props.step
+	const variant = () => props.variant ?? 'default'
+	const isCompact = () => variant() === 'compact'
+	const isPills = () => variant() === 'pills'
+	const isChevrons = () => variant() === 'chevrons'
+
+	// Pills: horizontal only, tag-style labels with progress bar underneath
+	if (isPills() && orientation() === 'horizontal') {
+		const progressPercent = (currentStep() / props.stepLabels.length) * 100
+		return (
+			<nav class={cn('wizard-stepper wizard-stepper--pills', props.class)} aria-label="Progress">
+				<div class="flex flex-col gap-3">
+					<ol class="m-0 flex list-none gap-2 p-0">
+						{props.stepLabels.map((label, index) => {
+							const stepNum = index + 1
+							const isActive = currentStep() === stepNum
+							const isCompleted = currentStep() > stepNum
+							return (
+								<li
+									class="flex min-w-0 flex-1 flex-col items-stretch gap-1.5"
+									aria-current={isActive ? 'step' : undefined}
+								>
+									<div class="flex h-5 w-full shrink-0 items-center justify-center">
+										{isCompleted ? (
+											<span class="flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-white" aria-hidden="true">
+												<Check size={12} strokeWidth={2.5} />
+											</span>
+										) : isActive ? (
+											<span class="h-2 w-2 shrink-0 rounded-full bg-primary-500" aria-hidden="true" />
+										) : (
+											<span class="h-2 w-2 shrink-0 rounded-full bg-transparent" aria-hidden="true" />
+										)}
+									</div>
+									<span
+										class={cn(
+											'w-full rounded-full px-3 py-1.5 text-center text-sm font-medium',
+											isActive && 'bg-primary-500/15 text-primary-700 dark:bg-primary-400/20 dark:text-primary-300',
+											isCompleted && 'bg-surface-overlay text-ink-700',
+											!isActive && !isCompleted && 'bg-surface-overlay text-ink-500'
+										)}
+									>
+										{label}
+									</span>
+								</li>
+							)
+						})}
+					</ol>
+					<div class="h-1.5 w-full overflow-hidden rounded-full bg-surface-dim">
+						<div
+							class="h-full rounded-full bg-primary-500 transition-[width] duration-300 ease-out"
+							style={{ width: `${progressPercent}%` }}
+							aria-hidden
+						/>
+					</div>
+				</div>
+			</nav>
+		)
+	}
+
+	return (
+		<nav class={cn('wizard-stepper', props.class)} aria-label="Progress">
+			<ol
+				class={cn(
+					'm-0 flex list-none items-center p-0',
+					orientation() === 'vertical' && 'flex-col items-stretch gap-0',
+					orientation() === 'horizontal' && isChevrons() && 'w-full gap-2 sm:gap-6'
+				)}
+			>
+				{props.stepLabels.map((label, index) => {
+					const stepNum = index + 1
+					const isActive = currentStep() === stepNum
+					const isCompleted = currentStep() > stepNum
+					return (
+						<li
+							class={cn(
+								'flex items-center',
+								orientation() === 'horizontal' &&
+									(isChevrons()
+										? 'min-w-0 flex-1 flex-shrink-0 basis-0 justify-center gap-2 sm:gap-3'
+										: 'min-w-0 flex-1 first:min-w-0 first:flex-initial'),
+								orientation() === 'vertical' && 'flex-col items-start gap-0'
+							)}
+							aria-current={isActive ? 'step' : undefined}
+						>
+							{orientation() === 'horizontal' && index > 0 &&
+								(isChevrons() ? (
+									<span class="flex shrink-0 items-center text-ink-300" aria-hidden="true">
+										<ChevronRight size={isCompact() ? 16 : 20} />
+									</span>
+								) : (
+									<span
+										class={cn(
+											'h-0.5 min-w-[1rem] flex-1 shrink rounded transition-colors',
+											isCompact() ? 'ml-2 mr-2 sm:ml-2.5 sm:mr-2.5' : 'ml-3 mr-3 sm:ml-4 sm:mr-4',
+											isCompleted ? 'bg-primary-500' : 'bg-surface-dim'
+										)}
+										aria-hidden="true"
+									/>
+								))
+							}
+							<div
+								class={cn(
+									'flex shrink-0 items-center gap-3',
+									isCompact() && 'gap-2',
+									orientation() === 'vertical' && 'py-2 first:pt-0',
+									isCompact() && orientation() === 'vertical' && 'py-1.5 first:pt-0'
+								)}
+							>
+								<span
+									class={cn(
+										'flex shrink-0 items-center justify-center rounded-full text-sm font-semibold transition-colors',
+										isCompact() ? 'h-6 w-6 text-xs' : 'h-8 w-8',
+										isCompleted && 'bg-primary-500 text-white',
+										isActive && 'bg-primary-500 text-white ring-4 ring-primary-500/20 dark:ring-primary-500/30',
+										isCompact() && isActive && 'ring-2',
+										!isActive && !isCompleted && 'bg-ink-200 text-ink-500'
+									)}
+								>
+									{isCompleted ? <Check size={isCompact() ? 12 : 16} strokeWidth={2.5} /> : stepNum}
+								</span>
+								<span
+									class={cn(
+										'font-medium',
+										isCompact() ? 'text-sm' : 'text-xs sm:text-sm',
+										orientation() === 'vertical' && !isCompact() && 'text-sm',
+										isActive && 'text-ink-900',
+										isCompleted && 'text-ink-600',
+										!isActive && !isCompleted && 'text-ink-400'
+									)}
+								>
+									{label}
+								</span>
+							</div>
+							{orientation() === 'vertical' && index < props.stepLabels.length - 1 && (
+								<span
+									class={cn(
+										'shrink-0 rounded transition-colors',
+										isCompact() ? 'ml-3 h-3 w-0.5' : 'ml-4 h-4 w-0.5',
+										isCompleted ? 'bg-primary-500' : 'bg-surface-dim'
+									)}
+									aria-hidden="true"
+								/>
+							)}
+						</li>
+					)
+				})}
+			</ol>
+		</nav>
+	)
+}

package/src/components/layout/index.ts

@@ -0,0 +1,96 @@
+export { Alert } from './Alert'
+export type { AlertProps, AlertStatus, AlertAppearance } from './Alert'
+
+export { AlertDialog } from '../overlays/AlertDialog'
+export type { AlertDialogProps } from '../overlays/AlertDialog'
+
+export { Divider } from './Divider'
+export type { DividerProps, DividerStyle, DividerWeight } from './Divider'
+
+export { Drawer } from '../overlays/Drawer'
+export type { DrawerProps, DrawerSize, DrawerSide, DrawerOffset, DrawerActionsPosition } from '../overlays/Drawer'
+
+export { Dialog } from '../overlays/Dialog'
+export type { DialogProps, DialogSize, DialogOverlayAnimation, DialogPanelAnimation } from '../overlays/Dialog'
+export { WizardStep } from './WizardStep'
+export type { WizardStepProps } from './WizardStep'
+export { WizardStepper } from './WizardStepper'
+export type { WizardStepperProps, WizardStepperVariant } from './WizardStepper'
+export { PromptWithAction } from './PromptWithAction'
+export type { PromptWithActionAllProps } from './PromptWithAction'
+export { Section } from './Section'
+export type { SectionProps } from './Section'
+export { Form } from './Form'
+export type { FormProps } from './Form'
+export { BlockQuote } from './BlockQuote'
+export type { BlockQuoteProps, BlockQuoteJustify } from './BlockQuote'
+
+export { PageHeading } from './PageHeading'
+export type { PageHeadingProps } from './PageHeading'
+export { Card } from './Card'
+export type {
+	CardProps,
+	CardComponent,
+	CardHeaderProps,
+	CardImageProps,
+	CardAvatarTitleProps,
+	CardContentProps,
+	CardBodyProps,
+} from './Card'
+export { Container } from './Container'
+export type { ContainerProps, ContainerSize, ContainerAlign } from './Container'
+export { Grid } from './Grid'
+export type { GridProps, GridCols, GridGap } from './Grid'
+export { FormActions } from './FormActions'
+export type { FormActionsAllProps } from './FormActions'
+export { TablePanel } from './TablePanel'
+export type { TablePanelProps } from './TablePanel'
+
+export { TableView, useTableView, emptyFilterGroup } from './TableView'
+export type { TableViewProps, TableViewContextValue } from './TableView'
+export type { TableViewConfig, ViewConfig } from './TableView/types'
+
+export { CodeBlock } from './CodeBlock/CodeBlock'
+export type { CodeBlockProps, CodeBlockLanguage } from './CodeBlock/CodeBlock'
+
+export {
+	AccordionRoot,
+	AccordionItem,
+	AccordionHeader,
+	AccordionTrigger,
+	AccordionContent,
+	AccordionContentStyled,
+	AccordionTriggerStyled,
+	AccordionItemStyled,
+} from './Accordion'
+export type { AccordionContentProps, AccordionTriggerStyledProps, AccordionItemStyledProps } from './Accordion'
+
+export {
+	TooltipRoot,
+	TooltipTrigger,
+	TooltipPortal,
+	TooltipContentPrimitive,
+	TooltipArrow,
+	TooltipContent,
+} from '../overlays/Tooltip'
+export type { TooltipContentProps } from '../overlays/Tooltip'
+
+export {
+	PopoverRoot,
+	PopoverTrigger,
+	PopoverAnchor,
+	PopoverPortal,
+	PopoverContentPrimitive,
+	PopoverArrow,
+	PopoverContent,
+} from '../overlays/Popover'
+export type { PopoverContentProps, PopoverRootProps, PopoverSide, PopoverAlign } from '../overlays/Popover'
+
+export {
+	CollapsibleRoot,
+	CollapsibleTrigger,
+	CollapsibleContent,
+	CollapsibleContentStyled,
+	CollapsibleTriggerStyled,
+} from './Collapsible'
+export type { CollapsibleContentProps, CollapsibleTriggerStyledProps } from './Collapsible'

package/src/components/navigation/Breadcrumbs.tsx

@@ -0,0 +1,66 @@
+import { type JSX, For, Show, splitProps } from 'solid-js'
+import { ChevronRight } from 'lucide-solid'
+import { Breadcrumbs as KobalteBreadcrumbs } from '@kobalte/core/breadcrumbs'
+import { cn } from '../../utilities/classNames'
+
+export interface BreadcrumbItem {
+	/** Label to show. */
+	label: string
+	/** If set, rendered as a link (anchor). Use your router's Link in the app if needed. */
+	href?: string
+}
+
+export interface BreadcrumbsProps {
+	/** List of items. Last item is typically current page (no href). */
+	items: BreadcrumbItem[]
+	/** Optional separator between items. Default ChevronRight. */
+	separator?: JSX.Element
+	/** Root class. */
+	class?: string
+}
+
+function DefaultSeparator(): JSX.Element {
+	return <ChevronRight class="h-4 w-4 shrink-0 text-ink-400" aria-hidden="true" />
+}
+
+export function Breadcrumbs(props: BreadcrumbsProps) {
+	const [local] = splitProps(props, ['items', 'separator', 'class'])
+
+	const separator = () => local.separator ?? <DefaultSeparator />
+
+	return (
+		<KobalteBreadcrumbs class={cn('flex flex-wrap items-center gap-1 text-sm', local.class)}>
+			<ol class="flex flex-wrap items-center gap-1">
+				<For each={local.items}>
+					{(item, i) => {
+						const isLast = () => i() === local.items.length - 1
+						return (
+							<li class="flex items-center gap-1" classList={{ 'text-ink-500': !isLast() }}>
+								<Show when={i() > 0}>
+									<KobalteBreadcrumbs.Separator class="flex shrink-0">
+										{separator()}
+									</KobalteBreadcrumbs.Separator>
+								</Show>
+								<Show
+									when={!!item.href && !isLast()}
+									fallback={
+										<span class="font-medium text-ink-800" {...(isLast() && { 'aria-current': 'page' })}>
+											{item.label}
+										</span>
+									}
+								>
+									<KobalteBreadcrumbs.Link
+										href={item.href!}
+										class="text-ink-600 hover:text-ink-900 dark:hover:text-ink-100 underline-offset-2 hover:underline"
+									>
+										{item.label}
+									</KobalteBreadcrumbs.Link>
+								</Show>
+							</li>
+						)
+					}}
+				</For>
+			</ol>
+		</KobalteBreadcrumbs>
+	)
+}

package/src/components/navigation/DropdownMenu.tsx

@@ -0,0 +1,86 @@
+import { type JSX, splitProps } from 'solid-js'
+import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'
+import type { 
+	DropdownMenuContentProps as KobalteDropdownMenuContentProps, 
+	DropdownMenuItemProps as KobalteDropdownMenuItemProps, 
+	DropdownMenuSeparatorProps as KobalteDropdownMenuSeparatorProps,
+	DropdownMenuTriggerProps as KobalteDropdownMenuTriggerProps 
+} from '@kobalte/core/dropdown-menu'
+import { cn } from '../../utilities/classNames'
+
+export interface DropdownMenuContentProps extends KobalteDropdownMenuContentProps {
+	class?: string
+	children: JSX.Element
+}
+
+export function DropdownMenuContent(props: DropdownMenuContentProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteDropdownMenu.Portal>
+			<KobalteDropdownMenu.Content
+				class={cn(
+					'z-50 min-w-[160px] rounded-lg border border-surface-border bg-surface-raised p-1 shadow-lg',
+					local.class,
+				)}
+				{...others}
+			>
+				{local.children}
+			</KobalteDropdownMenu.Content>
+		</KobalteDropdownMenu.Portal>
+	)
+}
+
+export interface DropdownMenuItemProps extends KobalteDropdownMenuItemProps {
+	class?: string
+	children: JSX.Element
+}
+
+export function DropdownMenuItem(props: DropdownMenuItemProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteDropdownMenu.Item
+			class={cn(
+				'flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm text-ink-700 outline-none',
+				'data-[highlighted]:bg-surface-overlay data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+				local.class,
+			)}
+			{...others}
+		>
+			{local.children}
+		</KobalteDropdownMenu.Item>
+	)
+}
+
+export interface DropdownMenuSeparatorProps extends KobalteDropdownMenuSeparatorProps {
+	class?: string
+}
+
+export function DropdownMenuSeparator(props: DropdownMenuSeparatorProps) {
+	const [local, others] = splitProps(props, ['class'])
+	return (
+		<KobalteDropdownMenu.Separator
+			class={cn('my-1 h-px bg-surface-dim', local.class)}
+			{...others}
+		/>
+	)
+}
+
+export interface DropdownMenuTriggerProps extends Omit<KobalteDropdownMenuTriggerProps, 'class' | 'children'> {
+	class?: string
+	children: JSX.Element
+}
+
+export function DropdownMenuTrigger(props: DropdownMenuTriggerProps) {
+	const [local, others] = splitProps(props, ['class', 'children'])
+	return (
+		<KobalteDropdownMenu.Trigger
+			class={cn(local.class)}
+			{...others}
+		>
+			{local.children}
+		</KobalteDropdownMenu.Trigger>
+	)
+}
+
+// Re-export the root Kobalte DropdownMenu for convenience
+export { DropdownMenu } from '@kobalte/core/dropdown-menu'