@maxal_studio/kratosjs-react 1.0.0

package/src/components/ui/Input.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { cn } from '../../utils/classNames';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+	/** Render the error state (red border/ring) */
+	invalid?: boolean;
+}
+
+export const inputClasses = (invalid?: boolean, className?: string) =>
+	cn(
+		'w-full h-10 px-3 text-sm rounded-lg border transition-colors',
+		'bg-input text-fg border-input-border placeholder:text-fg-muted',
+		'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent',
+		'disabled:opacity-60 disabled:cursor-not-allowed',
+		invalid && 'border-danger focus:border-danger focus:ring-danger-soft',
+		className,
+	);
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
+	{ invalid, className, ...rest },
+	ref,
+) {
+	return <input ref={ref} className={inputClasses(invalid, className)} {...rest} />;
+});
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+	invalid?: boolean;
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+	{ invalid, className, ...rest },
+	ref,
+) {
+	return (
+		<textarea
+			ref={ref}
+			className={cn(
+				'w-full px-3 py-2 text-sm rounded-lg border transition-colors',
+				'bg-input text-fg border-input-border placeholder:text-fg-muted',
+				'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent',
+				'disabled:opacity-60 disabled:cursor-not-allowed',
+				invalid && 'border-danger focus:border-danger focus:ring-danger-soft',
+				className,
+			)}
+			{...rest}
+		/>
+	);
+});

package/src/components/ui/Label.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { cn } from '../../utils/classNames';
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+	required?: boolean;
+}
+
+export function Label({ required, className, children, ...rest }: LabelProps) {
+	return (
+		<label className={cn('block text-sm font-medium text-fg', className)} {...rest}>
+			{children}
+			{required && <span className="ml-0.5 text-danger">*</span>}
+		</label>
+	);
+}

package/src/components/ui/PillButton.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { cn } from '../../utils/classNames';
+
+const focusClass = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+
+export type PillButtonVariant = 'default' | 'primary' | 'danger' | 'ghost';
+
+const VARIANT_CLASSES: Record<PillButtonVariant, string> = {
+	default:
+		'border border-border bg-input/60 text-fg hover:bg-hover/70 disabled:cursor-not-allowed disabled:opacity-60',
+	primary: 'border border-transparent bg-accent text-accent-fg hover:bg-accent-hover shadow-soft-sm',
+	danger: 'border border-transparent bg-danger text-white hover:bg-danger-hover shadow-soft-sm',
+	ghost: 'border border-transparent bg-transparent text-fg-secondary hover:bg-hover/70 hover:text-fg',
+};
+
+export interface PillButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: PillButtonVariant;
+	icon?: React.ReactNode;
+}
+
+export function PillButton({ variant = 'default', icon, className, children, type, ...rest }: PillButtonProps) {
+	return (
+		<button
+			type={type ?? 'button'}
+			className={cn(
+				'inline-flex h-9 touch-manipulation items-center justify-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors',
+				focusClass,
+				VARIANT_CLASSES[variant],
+				className,
+			)}
+			{...rest}>
+			{icon ? <span className="shrink-0">{icon}</span> : null}
+			{children}
+		</button>
+	);
+}
+
+export interface PillIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	variant?: PillButtonVariant;
+	active?: boolean;
+}
+
+export function PillIconButton({
+	variant = 'default',
+	active = false,
+	className,
+	children,
+	type,
+	...rest
+}: PillIconButtonProps) {
+	return (
+		<button
+			type={type ?? 'button'}
+			className={cn(
+				'inline-flex h-9 w-9 shrink-0 touch-manipulation items-center justify-center rounded-full text-sm transition-colors',
+				focusClass,
+				active ? 'border border-border bg-raised text-fg shadow-soft-sm' : VARIANT_CLASSES[variant],
+				className,
+			)}
+			{...rest}>
+			{children}
+		</button>
+	);
+}
+
+/** Pill tab styling shared by table tabs, modal relation tabs, and breadcrumbs. */
+export function pillTabClass(active: boolean): string {
+	return cn(
+		'inline-flex shrink-0 touch-manipulation items-center gap-2 rounded-full px-3 py-1.5 text-sm transition-colors whitespace-nowrap',
+		active ? 'bg-raised font-medium text-fg shadow-soft-sm' : 'text-fg-secondary hover:bg-hover/70 hover:text-fg',
+	);
+}

package/src/components/ui/Select.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+	invalid?: boolean;
+	/** Highlight the control (e.g. an active filter) */
+	active?: boolean;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(function Select(
+	{ invalid, active, className, children, ...rest },
+	ref,
+) {
+	return (
+		<div className={cn('relative', className)}>
+			<select
+				ref={ref}
+				className={cn(
+					'w-full h-10 px-3 pr-10 text-sm rounded-lg border appearance-none cursor-pointer transition-colors',
+					'bg-input text-fg border-input-border',
+					'focus:outline-none focus:ring-2 focus:ring-ring focus:border-accent',
+					'disabled:opacity-60 disabled:cursor-not-allowed',
+					invalid && 'border-danger focus:border-danger focus:ring-danger-soft',
+					active && 'ring-2 ring-ring border-accent',
+				)}
+				{...rest}>
+				{children}
+			</select>
+			<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-fg-muted pointer-events-none" />
+		</div>
+	);
+});

package/src/components/ui/Spinner.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+
+export interface SpinnerProps {
+	size?: 'sm' | 'md' | 'lg';
+	className?: string;
+	/** Optional label rendered next to the spinner */
+	label?: string;
+}
+
+const SIZE_CLASSES = {
+	sm: 'h-4 w-4 border-2',
+	md: 'h-6 w-6 border-2',
+	lg: 'h-8 w-8 border-[3px]',
+} as const;
+
+export function Spinner({ size = 'md', className, label }: SpinnerProps) {
+	const circle = (
+		<span
+			role="status"
+			aria-label={label || translate('core:common.loading')}
+			className={cn(
+				'inline-block animate-spin rounded-full border-current border-t-transparent',
+				SIZE_CLASSES[size],
+				className,
+			)}
+		/>
+	);
+
+	if (!label) return circle;
+
+	return (
+		<span className="inline-flex items-center gap-2 text-fg-secondary">
+			{circle}
+			<span className="text-sm">{label}</span>
+		</span>
+	);
+}

package/src/components/ui/Toast.tsx

@@ -0,0 +1,105 @@
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { CheckCircle2, AlertCircle, Info, X } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+
+export type ToastVariant = 'success' | 'error' | 'info';
+
+export interface ToastOptions {
+	variant?: ToastVariant;
+	/** Auto-dismiss delay in ms (default 4000; 0 disables) */
+	duration?: number;
+}
+
+interface ToastItem {
+	id: number;
+	message: React.ReactNode;
+	variant: ToastVariant;
+}
+
+export interface ToastApi {
+	toast: (message: React.ReactNode, options?: ToastOptions) => void;
+	success: (message: React.ReactNode) => void;
+	error: (message: React.ReactNode) => void;
+	info: (message: React.ReactNode) => void;
+}
+
+const ToastContext = createContext<ToastApi | null>(null);
+
+const VARIANT_STYLES: Record<ToastVariant, { icon: React.ReactNode; bar: string }> = {
+	success: { icon: <CheckCircle2 className="h-5 w-5 text-success" />, bar: 'bg-success' },
+	error: { icon: <AlertCircle className="h-5 w-5 text-danger" />, bar: 'bg-danger' },
+	info: { icon: <Info className="h-5 w-5 text-accent" />, bar: 'bg-accent' },
+};
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+	const [toasts, setToasts] = useState<ToastItem[]>([]);
+	const idRef = useRef(0);
+
+	const dismiss = useCallback((id: number) => {
+		setToasts(prev => prev.filter(t => t.id !== id));
+	}, []);
+
+	const toast = useCallback(
+		(message: React.ReactNode, options?: ToastOptions) => {
+			const id = ++idRef.current;
+			const variant = options?.variant ?? 'info';
+			setToasts(prev => [...prev, { id, message, variant }]);
+			const duration = options?.duration ?? 4000;
+			if (duration > 0) {
+				setTimeout(() => dismiss(id), duration);
+			}
+		},
+		[dismiss],
+	);
+
+	const api = useMemo<ToastApi>(
+		() => ({
+			toast,
+			success: message => toast(message, { variant: 'success' }),
+			error: message => toast(message, { variant: 'error', duration: 6000 }),
+			info: message => toast(message, { variant: 'info' }),
+		}),
+		[toast],
+	);
+
+	return (
+		<ToastContext.Provider value={api}>
+			{children}
+			{toasts.length > 0 && (
+				<div className="fixed bottom-4 right-4 z-[100] flex w-[calc(100vw-2rem)] max-w-sm flex-col gap-2">
+					{toasts.map(t => (
+						<div
+							key={t.id}
+							role="status"
+							className="relative flex items-start gap-3 overflow-hidden rounded-lg border border-border bg-raised p-4 pr-10 shadow-soft-lg">
+							<span className={cn('absolute inset-y-0 left-0 w-1', VARIANT_STYLES[t.variant].bar)} />
+							<span className="shrink-0">{VARIANT_STYLES[t.variant].icon}</span>
+							<div className="min-w-0 flex-1 break-words text-sm text-fg">{t.message}</div>
+							<button
+								type="button"
+								onClick={() => dismiss(t.id)}
+								aria-label={translate('core:common.dismiss')}
+								className="absolute right-2 top-2 rounded-md p-1 text-fg-muted transition-colors hover:bg-hover hover:text-fg">
+								<X className="h-4 w-4" />
+							</button>
+						</div>
+					))}
+				</div>
+			)}
+		</ToastContext.Provider>
+	);
+}
+
+/**
+ * Toast API. Outside a ToastProvider (e.g. standalone FormRenderer usage)
+ * it degrades to console logging instead of crashing.
+ */
+export function useToast(): ToastApi {
+	const context = useContext(ToastContext);
+	return useMemo(() => {
+		if (context) return context;
+		const fallback = (message: React.ReactNode) => console.info('[kratosjs toast]', message);
+		return { toast: fallback, success: fallback, error: fallback, info: fallback };
+	}, [context]);
+}

package/src/components/ui/index.ts

@@ -0,0 +1,24 @@
+export { PillButton, PillIconButton, pillTabClass } from './PillButton';
+export type { PillButtonProps, PillIconButtonProps, PillButtonVariant } from './PillButton';
+export { Button, IconButton } from './Button';
+export type { ButtonProps, IconButtonProps, ButtonVariant, ButtonSize } from './Button';
+export { Input, Textarea, inputClasses } from './Input';
+export type { InputProps, TextareaProps } from './Input';
+export { Select } from './Select';
+export type { SelectProps } from './Select';
+export { Label } from './Label';
+export type { LabelProps } from './Label';
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';
+export { Card } from './Card';
+export type { CardProps } from './Card';
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';
+export { ErrorAlert } from './ErrorAlert';
+export type { ErrorAlertProps } from './ErrorAlert';
+export { ToastProvider, useToast } from './Toast';
+export type { ToastApi, ToastOptions, ToastVariant } from './Toast';
+export { ConfirmProvider, useConfirm } from './ConfirmDialog';
+export type { ConfirmOptions } from './ConfirmDialog';

package/src/components/utils/HintDisplay.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Icon } from './Icon';
+import { cn } from '../../utils/classNames';
+
+export interface HintDisplayProps {
+	hint?: string;
+	hintIcon?: string;
+	hintColor?: string;
+}
+
+/**
+ * Reusable hint display component
+ * Shows hint text with optional icon and color
+ */
+export function HintDisplay({ hint, hintIcon, hintColor }: HintDisplayProps) {
+	if (!hint) return null;
+
+	return (
+		<div className="mt-1 flex items-center gap-1.5">
+			{hintIcon && (
+				<Icon name={hintIcon} size={14} className={cn('mt-0.5 shrink-0', hintColor || 'text-accent')} />
+			)}
+			<p className={cn('text-sm', hintColor || 'text-accent')}>{hint}</p>
+		</div>
+	);
+}

package/src/components/utils/Icon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import * as LucideIcons from 'lucide-react';
+
+export type IconName = string;
+
+export interface IconProps {
+	name: IconName;
+	size?: number | string;
+	color?: string;
+	className?: string;
+	strokeWidth?: number;
+}
+
+/**
+ * Icon component that renders Lucide icons
+ *
+ * @example
+ * <Icon name="Check" size={24} color="green" />
+ * <Icon name="X" className="text-red-500" />
+ *
+ * @see https://lucide.dev/icons for available icon names
+ */
+export const Icon: React.FC<IconProps> = ({ name, size = 24, color, className = '', strokeWidth = 2 }) => {
+	const IconComponent = (LucideIcons as any)[name] as React.ComponentType<LucideIcons.LucideProps>;
+
+	if (!IconComponent) {
+		console.warn(`Icon "${name}" not found in Lucide icons`);
+		return null;
+	}
+
+	return <IconComponent size={size} color={color} className={className} strokeWidth={strokeWidth} />;
+};
+
+// Re-export all Lucide icons for direct use
+export * from 'lucide-react';
+export { LucideIcons };

package/src/components/utils/MediaPreviewModal.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useRef } from 'react';
+import { Icon } from './Icon';
+import { translate } from '../../i18n/activeLocale';
+
+export type MediaType = 'image' | 'video' | 'audio';
+
+export interface MediaPreviewModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	mediaUrl: string;
+	mediaType: MediaType;
+	title?: string;
+	autoplay?: boolean;
+	controls?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+}
+
+export function MediaPreviewModal({
+	isOpen,
+	onClose,
+	mediaUrl,
+	mediaType,
+	title,
+	autoplay = false,
+	controls = true,
+	loop = false,
+	muted = false,
+}: MediaPreviewModalProps) {
+	const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement | null>(null);
+
+	useEffect(() => {
+		if (isOpen && mediaRef.current && autoplay && (mediaType === 'video' || mediaType === 'audio')) {
+			mediaRef.current.play().catch(() => {
+				// Autoplay may be blocked by browser
+			});
+		}
+	}, [isOpen, autoplay, mediaType]);
+
+	useEffect(() => {
+		// Pause media when modal closes
+		if (!isOpen && mediaRef.current) {
+			mediaRef.current.pause();
+		}
+	}, [isOpen]);
+
+	if (!isOpen) return null;
+
+	return (
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+			onClick={onClose}>
+			<div
+				className="relative max-w-4xl w-full mx-4 bg-surface rounded-lg shadow-2xl overflow-hidden"
+				onClick={e => e.stopPropagation()}>
+				{/* Header */}
+				<div className="flex items-center justify-between px-4 py-3 border-b border-border">
+					<h3 className="text-lg font-semibold text-fg">
+						{title ||
+							(mediaType === 'video'
+								? 'Video Preview'
+								: mediaType === 'audio'
+									? 'Audio Player'
+									: 'Image Preview')}
+					</h3>
+					<button
+						onClick={onClose}
+						className="p-2 rounded-full bg-hover hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+						title={translate('core:modal.close')}>
+						<Icon name="X" size={20} className="text-fg" />
+					</button>
+				</div>
+
+				{/* Content */}
+				<div className={mediaType === 'video' ? 'p-4 bg-black' : 'p-4'}>
+					{mediaType === 'video' ? (
+						<video
+							ref={el => {
+								mediaRef.current = el;
+							}}
+							src={mediaUrl}
+							className="w-full max-h-[70vh] object-contain"
+							controls={controls}
+							loop={loop}
+							muted={muted}
+							playsInline
+						/>
+					) : mediaType === 'audio' ? (
+						<div className="flex flex-col items-center gap-4 py-4">
+							<div className="w-24 h-24 rounded-full bg-linear-to-br from-blue-600 to-purple-600 flex items-center justify-center">
+								<Icon name="Music" size={48} className="text-white" />
+							</div>
+							<audio
+								ref={el => {
+									mediaRef.current = el;
+								}}
+								src={mediaUrl}
+								className="w-full max-w-md"
+								controls={controls}
+								loop={loop}
+							/>
+						</div>
+					) : (
+						<img
+							src={mediaUrl}
+							alt={title || translate('core:common.preview')}
+							className="max-w-full max-h-[80vh] object-contain mx-auto rounded"
+						/>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/components/utils/ViewFieldWrapper.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { cn } from '../../utils/classNames';
+
+export interface ViewFieldWrapperProps {
+	label?: string;
+	children: React.ReactNode;
+	className?: string;
+}
+
+/**
+ * Wrapper component for consistent view mode field styling
+ * Provides label/value layout with consistent spacing and typography
+ */
+export function ViewFieldWrapper({ label, children, className }: ViewFieldWrapperProps) {
+	return (
+		<div className={cn('grid grid-cols-3 gap-4 pb-2', className)}>
+			{label && <div className="font-medium text-fg-secondary">{label}:</div>}
+			<div className={cn('text-fg', label ? 'col-span-2' : 'col-span-3')}>
+				{children || <span className="text-fg-secondary">-</span>}
+			</div>
+		</div>
+	);
+}