@maxal_studio/kratosjs-react 1.0.0

package/dist/components/table/TablePagination.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+export function TablePagination({ schema, currentPage, perPage, totalRecords, onPageChange, onPageSizeChange, className, }) {
+    if (!schema.paginate || totalRecords === 0) {
+        return null;
+    }
+    const lastPage = Math.ceil(totalRecords / perPage);
+    const pages = [];
+    const totalPages = lastPage;
+    const current = currentPage;
+    const delta = 2;
+    if (totalPages <= 9) {
+        for (let i = 1; i <= totalPages; i++) {
+            pages.push(i);
+        }
+    }
+    else {
+        pages.push(1);
+        const rangeStart = Math.max(2, current - delta);
+        const rangeEnd = Math.min(totalPages - 1, current + delta);
+        if (rangeStart > 2) {
+            pages.push('ellipsis-start');
+        }
+        for (let i = rangeStart; i <= rangeEnd; i++) {
+            pages.push(i);
+        }
+        if (rangeEnd < totalPages - 1) {
+            pages.push('ellipsis-end');
+        }
+        pages.push(totalPages);
+    }
+    const rangeStart = (currentPage - 1) * perPage + 1;
+    const rangeEnd = Math.min(currentPage * perPage, totalRecords);
+    const navButtonClass = 'inline-flex h-8 w-8 items-center justify-center rounded-full text-sm text-fg-secondary transition-colors hover:bg-hover/70 hover:text-fg disabled:cursor-not-allowed disabled:opacity-40 touch-manipulation';
+    const pageButtonClass = (active) => cn('inline-flex h-8 min-w-8 items-center justify-center rounded-full px-2.5 text-sm transition-colors', active
+        ? 'bg-raised font-medium text-fg shadow-soft-sm'
+        : 'text-fg-secondary hover:bg-hover/70 hover:text-fg');
+    return (_jsxs("div", { className: cn('flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between', className), children: [_jsx("div", { className: "flex min-w-0 items-center gap-2", children: _jsxs("span", { className: "whitespace-nowrap text-sm text-fg-secondary", children: [_jsx("span", { className: "sm:hidden", children: translate('core:pagination.range_compact', {
+                                start: rangeStart,
+                                end: rangeEnd,
+                                total: totalRecords,
+                            }) }), _jsx("span", { className: "hidden sm:inline", children: translate('core:pagination.showing', {
+                                start: rangeStart,
+                                end: rangeEnd,
+                                total: totalRecords,
+                            }) })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-3 sm:gap-4", children: [schema.recordsPerPageOptions && schema.recordsPerPageOptions.length > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "whitespace-nowrap text-sm text-fg-secondary", children: translate('core:pagination.per_page_short') }), _jsxs("div", { className: "relative", children: [_jsx("select", { value: perPage, onChange: e => onPageSizeChange(Number(e.target.value)), className: "h-8 min-w-[4.5rem] appearance-none rounded-full border border-border bg-input/60 pl-3 pr-9 text-sm text-fg focus:outline-none focus:ring-2 focus:ring-ring", "aria-label": translate('core:pagination.per_page'), children: schema.recordsPerPageOptions.map(option => (_jsx("option", { value: option, children: option }, option))) }), _jsx(ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-fg-muted" })] })] })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: navButtonClass, title: translate('core:pagination.previous'), "aria-label": translate('core:pagination.previous'), children: _jsx(Icon, { name: "ChevronLeft", size: 16 }) }), _jsxs("span", { className: "min-w-16 px-2 py-1.5 text-center text-sm text-fg-secondary sm:hidden", children: [currentPage, " / ", lastPage] }), _jsx("div", { className: "hidden items-center gap-1 sm:flex", children: pages.map((page, index) => {
+                                    if (page === 'ellipsis-start' || page === 'ellipsis-end') {
+                                        return (_jsx("span", { className: "px-2 text-sm text-fg-muted", children: "\u2026" }, `ellipsis-${index}`));
+                                    }
+                                    return (_jsx("button", { onClick: () => onPageChange(page), className: pageButtonClass(currentPage === page), "aria-current": currentPage === page ? 'page' : undefined, children: page }, page));
+                                }) }), _jsx("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === lastPage, className: navButtonClass, title: translate('core:pagination.next'), "aria-label": translate('core:pagination.next'), children: _jsx(Icon, { name: "ChevronRight", size: 16 }) })] })] })] }));
+}

package/dist/components/table/TableRow.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SerializedTable } from '@maxal_studio/kratosjs';
+interface TableRowProps {
+    schema: SerializedTable;
+    row: any;
+    rowIndex: number;
+    totalRows: number;
+    rowId: any;
+    visibleColumns: any[];
+    isSelected: boolean;
+    hasChanges: boolean;
+    openActionsRowId: any;
+    onRowSelect: (rowId: any) => void;
+    onCellChange: (rowId: any, columnName: string, value: any) => void;
+    onRowAction: (actionName: string, rowId: any) => void;
+    onSaveRow: (rowId: any) => void;
+    onResetRow: (rowId: any) => void;
+    onToggleActions: (rowId: any) => void;
+}
+export declare function TableRow({ schema, row, rowIndex, totalRows, rowId, visibleColumns, isSelected, hasChanges, openActionsRowId, onRowSelect, onCellChange, onRowAction, onSaveRow, onResetRow, onToggleActions, }: TableRowProps): React.JSX.Element;
+export {};

package/dist/components/table/TableRow.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useColumnRegistry } from '../../contexts/ColumnRegistryContext';
+import { cn } from '../../utils/classNames';
+import { TableActionsDropdown } from './TableActionsDropdown';
+import { Checkbox } from '../Checkbox';
+import { PillButton } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+import { Slot } from '../../slots/Slot';
+export function TableRow({ schema, row, rowIndex, totalRows, rowId, visibleColumns, isSelected, hasChanges, openActionsRowId, onRowSelect, onCellChange, onRowAction, onSaveRow, onResetRow, onToggleActions, }) {
+    const columnRegistry = useColumnRegistry();
+    const rowBg = cn(schema.striped && !hasChanges && (rowIndex % 2 === 1 ? 'bg-muted/25' : 'bg-surface'), hasChanges && 'bg-accent-soft/20');
+    const stickyActionsBg = cn('border-l border-border shadow-[-6px_0_10px_-6px] shadow-black/10', hasChanges ? 'bg-accent-soft' : schema.striped && rowIndex % 2 === 1 ? 'bg-muted' : 'bg-surface', 'group-hover:bg-hover');
+    return (_jsxs("tr", { className: cn('group border-b border-border/60 transition-colors last:border-b-0 hover:bg-hover/70', hasChanges && 'ring-1 ring-inset ring-accent/20', rowBg), children: [schema.bulkActions && schema.bulkActions.length > 0 && (_jsx("td", { className: "w-12 px-4 py-3", children: _jsx(Checkbox, { id: `checkbox-${rowId}`, checked: isSelected, onChange: () => onRowSelect(rowId) }) })), visibleColumns.map(column => {
+                const ColumnComponent = columnRegistry[column.type];
+                const isMediaColumn = ['image', 'video', 'media'].includes(column.type);
+                const width = !isMediaColumn && column.width
+                    ? typeof column.width === 'number'
+                        ? `${column.width}px`
+                        : /^\d+$/.test(column.width)
+                            ? `${column.width}px`
+                            : column.width
+                    : undefined;
+                const widthStyle = width ? { width, minWidth: width, maxWidth: width } : undefined;
+                if (!ColumnComponent) {
+                    return (_jsxs("td", { className: "px-4 py-3 text-sm text-fg-secondary", style: widthStyle, children: ["Unknown column type: ", column.type] }, column.name));
+                }
+                const isEditable = ['textinput', 'select', 'checkbox', 'toggle'].includes(column.type);
+                return (_jsx("td", { className: "px-4 py-3 text-sm text-fg whitespace-nowrap", style: widthStyle, children: _jsx(ColumnComponent, { column: column, record: row, rowIndex: rowIndex, onCellChange: isEditable ? (value) => onCellChange(rowId, column.name, value) : undefined }) }, column.name));
+            }), _jsx("td", { className: cn('sticky right-0 px-4 py-3 text-right transition-colors', stickyActionsBg), style: {
+                    zIndex: openActionsRowId === rowId ? 50 : 10,
+                }, children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Slot, { name: "table.rowActions", context: { schema, record: row, data: { rowId, rowIndex } }, as: "div", className: "flex items-center gap-2 empty:hidden" }), hasChanges && (_jsxs(_Fragment, { children: [_jsx(PillButton, { variant: "primary", onClick: () => onSaveRow(rowId), title: translate('core:table.save_changes'), children: translate('core:common.save') }), _jsx(PillButton, { variant: "default", onClick: () => onResetRow(rowId), title: translate('core:table.reset_changes'), children: translate('core:common.reset') }), _jsx("div", { className: "hidden h-5 w-px bg-border sm:block", "aria-hidden": true })] })), schema.actions && schema.actions.length > 0 && (_jsx(TableActionsDropdown, { schema: schema, rowId: rowId, rowIndex: rowIndex, totalRows: totalRows, isOpen: openActionsRowId === rowId, onToggle: () => onToggleActions(rowId), onAction: onRowAction }))] }) })] }));
+}

package/dist/components/table/TableSearchBar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface TableSearchBarProps {
+    searchable: boolean;
+    searchQuery: string;
+    onSearchChange: (query: string) => void;
+    onCreateClick?: () => void;
+    onCreateModalOpen?: () => void;
+    showCreateButton?: boolean;
+}
+export declare function TableSearchBar({ searchable, searchQuery, onSearchChange, onCreateClick, onCreateModalOpen, showCreateButton, }: TableSearchBarProps): React.JSX.Element;
+export {};

package/dist/components/table/TableSearchBar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from 'lucide-react';
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { useTranslation } from '../../i18n/useTranslation';
+export function TableSearchBar({ searchable, searchQuery, onSearchChange, onCreateClick, onCreateModalOpen, showCreateButton = true, }) {
+    const { t } = useTranslation();
+    if (!searchable && !showCreateButton) {
+        return null;
+    }
+    return (_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 sm:gap-3", children: [searchable && (_jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-fg-muted" }), _jsx("input", { type: "text", placeholder: t('core:common.search'), value: searchQuery, onChange: e => onSearchChange(e.target.value), className: cn('h-9 w-full rounded-full border border-border bg-input/60 pl-9 pr-4 text-sm text-fg', 'placeholder:text-fg-muted', 'focus:border-accent focus:outline-none focus:ring-2 focus:ring-ring'), "aria-label": t('core:search.records') })] })), showCreateButton && (_jsxs("button", { onClick: onCreateClick || onCreateModalOpen, className: cn('inline-flex h-9 shrink-0 touch-manipulation items-center justify-center gap-2 rounded-full bg-accent px-3 text-sm font-medium text-accent-fg transition-colors', 'sm:px-4 hover:bg-accent-hover', !searchable && 'w-auto', searchable && 'w-9 sm:w-auto'), title: t('core:table.create_record'), "aria-label": t('core:table.create_record'), children: [_jsx(Icon, { name: "Plus", className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "hidden sm:inline", children: t('core:common.create') })] }))] }));
+}

package/dist/components/table/TableTabs.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface TableTab {
+    key: string;
+    label: string;
+    icon?: string;
+    default?: boolean;
+}
+interface TableTabsProps {
+    tabs: TableTab[];
+    activeTab: string | null;
+    onTabChange: (tabKey: string | null) => void;
+}
+export declare function TableTabs({ tabs, activeTab, onTabChange }: TableTabsProps): React.JSX.Element;
+export {};

package/dist/components/table/TableTabs.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../utils/Icon';
+import { cn } from '../../utils/classNames';
+import { pillTabClass } from '../ui/PillButton';
+import { translate } from '../../i18n/activeLocale';
+export function TableTabs({ tabs, activeTab, onTabChange }) {
+    return (_jsxs("div", { className: cn('flex w-full max-w-full touch-pan-x snap-x snap-mandatory gap-1 overflow-x-auto overscroll-x-contain sm:snap-none'), style: { WebkitOverflowScrolling: 'touch' }, role: "tablist", "aria-label": translate('core:table.view_tabs'), children: [_jsx("button", { role: "tab", "aria-selected": activeTab === null, onClick: () => onTabChange(null), className: pillTabClass(activeTab === null), children: translate('core:common.all') }), tabs.map(tab => (_jsxs("button", { role: "tab", "aria-selected": activeTab === tab.key, onClick: () => onTabChange(tab.key), className: pillTabClass(activeTab === tab.key), children: [tab.icon && _jsx(Icon, { name: tab.icon, className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "whitespace-nowrap", children: tab.label })] }, tab.key)))] }));
+}

package/dist/components/ui/Badge.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type BadgeVariant = 'neutral' | 'accent' | 'success' | 'danger' | 'warning';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+}
+export declare function Badge({ variant, className, children, ...rest }: BadgeProps): React.JSX.Element;

package/dist/components/ui/Badge.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+const VARIANT_CLASSES = {
+    neutral: 'bg-muted text-fg-secondary',
+    accent: 'bg-accent-soft text-accent',
+    success: 'bg-success-soft text-success',
+    danger: 'bg-danger-soft text-danger',
+    warning: 'bg-warning-soft text-warning',
+};
+export function Badge({ variant = 'neutral', className, children, ...rest }) {
+    return (_jsx("span", { className: cn('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap', VARIANT_CLASSES[variant], className), ...rest, children: children }));
+}

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+export type ButtonSize = 'sm' | 'md';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    /** Use squared corners instead of the default pill shape. */
+    square?: boolean;
+    /** Icon element rendered before the label */
+    icon?: React.ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Use squared corners instead of the default pill shape. */
+    square?: boolean;
+    /** Accessible label (required — icon-only buttons have no text) */
+    'aria-label': string;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/Button.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../utils/classNames';
+import { Spinner } from './Spinner';
+/* Static class maps — never build Tailwind classes dynamically. */
+const VARIANT_CLASSES = {
+    primary: 'bg-accent text-accent-fg hover:bg-accent-hover shadow-soft-sm',
+    secondary: 'bg-input text-fg border border-input-border hover:bg-hover shadow-soft-sm',
+    ghost: 'bg-transparent text-fg-secondary hover:bg-hover hover:text-fg',
+    danger: 'bg-danger text-white hover:bg-danger-hover shadow-soft-sm',
+    outline: 'bg-transparent text-fg border border-border-strong hover:bg-hover',
+};
+const SIZE_CLASSES = {
+    sm: 'h-8 px-3 text-xs gap-1.5',
+    md: 'h-10 px-4 text-sm gap-2',
+};
+export const Button = React.forwardRef(function Button({ variant = 'primary', size = 'md', loading = false, square = false, icon, className, children, disabled, type, ...rest }, ref) {
+    return (_jsxs("button", { ref: ref, type: type ?? 'button', disabled: disabled || loading, className: cn('inline-flex items-center justify-center font-medium transition-colors touch-manipulation', square ? 'rounded-lg' : 'rounded-full', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'disabled:opacity-60 disabled:cursor-not-allowed', VARIANT_CLASSES[variant], SIZE_CLASSES[size], className), ...rest, children: [loading ? (_jsx(Spinner, { size: "sm", className: "shrink-0" })) : icon ? (_jsx("span", { className: "shrink-0", children: icon })) : null, children] }));
+});
+export const IconButton = React.forwardRef(function IconButton({ variant = 'ghost', size = 'md', square = false, className, children, type, ...rest }, ref) {
+    return (_jsx("button", { ref: ref, type: type ?? 'button', className: cn('inline-flex items-center justify-center transition-colors touch-manipulation', square ? 'rounded-lg' : 'rounded-full', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'disabled:opacity-60 disabled:cursor-not-allowed', VARIANT_CLASSES[variant], size === 'sm' ? 'h-8 w-8' : 'h-10 w-10', className), ...rest, children: children }));
+});

package/dist/components/ui/Card.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Raised cards get a soft shadow (modals, popovers); flat cards only a border */
+    raised?: boolean;
+    padding?: boolean;
+}
+export declare function Card({ raised, padding, className, children, ...rest }: CardProps): React.JSX.Element;

package/dist/components/ui/Card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+export function Card({ raised = false, padding = true, className, children, ...rest }) {
+    return (_jsx("div", { className: cn('rounded-lg border border-border', raised ? 'bg-raised shadow-soft' : 'bg-surface shadow-soft-sm', padding && 'p-4 sm:p-6', className), ...rest, children: children }));
+}

package/dist/components/ui/ConfirmDialog.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ConfirmOptions {
+    title?: string;
+    message: React.ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Style the confirm button as destructive */
+    danger?: boolean;
+}
+type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+export declare function ConfirmProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * Promise-based confirmation dialog. Outside a ConfirmProvider it falls
+ * back to the native window.confirm so callers always get an answer.
+ */
+export declare function useConfirm(): ConfirmFn;
+export {};

package/dist/components/ui/ConfirmDialog.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Button } from './Button';
+import { translate } from '../../i18n/activeLocale';
+const ConfirmContext = createContext(null);
+export function ConfirmProvider({ children }) {
+    const [pending, setPending] = useState(null);
+    const confirmButtonRef = useRef(null);
+    const confirm = useCallback(options => {
+        return new Promise(resolve => {
+            setPending({ ...options, resolve });
+        });
+    }, []);
+    const settle = useCallback((confirmed) => {
+        pending?.resolve(confirmed);
+        setPending(null);
+    }, [pending]);
+    // Focus the confirm button and support Escape to cancel
+    useEffect(() => {
+        if (!pending)
+            return;
+        confirmButtonRef.current?.focus();
+        const onKeyDown = (e) => {
+            if (e.key === 'Escape')
+                settle(false);
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, [pending, settle]);
+    return (_jsxs(ConfirmContext.Provider, { value: confirm, children: [children, pending && (_jsxs("div", { className: "fixed inset-0 z-[90] flex items-center justify-center p-4", children: [_jsx("div", { className: "absolute inset-0 bg-black/50", onClick: () => settle(false), "aria-hidden": "true" }), _jsxs("div", { role: "alertdialog", "aria-modal": "true", "aria-label": pending.title || translate('core:common.confirm'), className: "relative w-full max-w-md rounded-lg border border-border bg-raised p-6 shadow-soft-lg", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: pending.danger
+                                            ? 'flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-danger-soft text-danger'
+                                            : 'flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent-soft text-accent', children: _jsx(AlertTriangle, { className: "h-5 w-5" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { className: "text-base font-semibold text-fg", children: pending.title || translate('core:confirm.are_you_sure') }), _jsx("div", { className: "mt-1.5 text-sm text-fg-secondary", children: pending.message })] })] }), _jsxs("div", { className: "mt-6 flex justify-end gap-2", children: [_jsx(Button, { variant: "secondary", onClick: () => settle(false), children: pending.cancelLabel || translate('core:common.cancel') }), _jsx(Button, { ref: confirmButtonRef, variant: pending.danger ? 'danger' : 'primary', onClick: () => settle(true), children: pending.confirmLabel || translate('core:common.confirm') })] })] })] }))] }));
+}
+/**
+ * Promise-based confirmation dialog. Outside a ConfirmProvider it falls
+ * back to the native window.confirm so callers always get an answer.
+ */
+export function useConfirm() {
+    const context = useContext(ConfirmContext);
+    return (context ??
+        (async (options) => window.confirm(typeof options.message === 'string'
+            ? options.message
+            : options.title || translate('core:confirm.are_you_sure'))));
+}

package/dist/components/ui/EmptyState.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+export declare function EmptyState({ icon, title, description, action, className }: EmptyStateProps): React.JSX.Element;

package/dist/components/ui/EmptyState.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Inbox } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+export function EmptyState({ icon, title, description, action, className }) {
+    return (_jsxs("div", { className: cn('flex flex-col items-center justify-center px-6 py-12 text-center', className), children: [_jsx("div", { className: "mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-fg-muted", children: icon ?? _jsx(Inbox, { className: "h-6 w-6" }) }), _jsx("p", { className: "text-sm font-semibold text-fg", children: title }), description && _jsx("p", { className: "mt-1 max-w-sm text-sm text-fg-secondary", children: description }), action && _jsx("div", { className: "mt-4", children: action })] }));
+}

package/dist/components/ui/ErrorAlert.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ErrorAlertProps {
+    message: React.ReactNode;
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare function ErrorAlert({ message, onDismiss, className }: ErrorAlertProps): React.JSX.Element;

package/dist/components/ui/ErrorAlert.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X, AlertCircle } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+export function ErrorAlert({ message, onDismiss, className }) {
+    if (!message)
+        return null;
+    return (_jsxs("div", { role: "alert", className: cn('flex items-start justify-between gap-3 rounded-lg border border-danger/30 bg-danger-soft px-4 py-3', className), children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(AlertCircle, { className: "mt-0.5 h-4 w-4 shrink-0 text-danger" }), _jsx("p", { className: "min-w-0 flex-1 break-words text-sm font-medium text-danger", children: message })] }), onDismiss && (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": translate('core:common.dismiss'), className: "shrink-0 rounded-md p-1 text-danger transition-colors hover:bg-danger/10", children: _jsx(X, { className: "h-4 w-4" }) }))] }));
+}

package/dist/components/ui/Input.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Render the error state (red border/ring) */
+    invalid?: boolean;
+}
+export declare const inputClasses: (invalid?: boolean, className?: string) => string;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    invalid?: boolean;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/ui/Input.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../utils/classNames';
+export const inputClasses = (invalid, className) => 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(function Input({ invalid, className, ...rest }, ref) {
+    return _jsx("input", { ref: ref, className: inputClasses(invalid, className), ...rest });
+});
+export const Textarea = React.forwardRef(function Textarea({ invalid, className, ...rest }, ref) {
+    return (_jsx("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/dist/components/ui/Label.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+export declare function Label({ required, className, children, ...rest }: LabelProps): React.JSX.Element;

package/dist/components/ui/Label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+export function Label({ required, className, children, ...rest }) {
+    return (_jsxs("label", { className: cn('block text-sm font-medium text-fg', className), ...rest, children: [children, required && _jsx("span", { className: "ml-0.5 text-danger", children: "*" })] }));
+}

package/dist/components/ui/PillButton.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type PillButtonVariant = 'default' | 'primary' | 'danger' | 'ghost';
+export interface PillButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: PillButtonVariant;
+    icon?: React.ReactNode;
+}
+export declare function PillButton({ variant, icon, className, children, type, ...rest }: PillButtonProps): React.JSX.Element;
+export interface PillIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: PillButtonVariant;
+    active?: boolean;
+}
+export declare function PillIconButton({ variant, active, className, children, type, ...rest }: PillIconButtonProps): React.JSX.Element;
+/** Pill tab styling shared by table tabs, modal relation tabs, and breadcrumbs. */
+export declare function pillTabClass(active: boolean): string;

package/dist/components/ui/PillButton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+const focusClass = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+const VARIANT_CLASSES = {
+    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 function PillButton({ variant = 'default', icon, className, children, type, ...rest }) {
+    return (_jsxs("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, children: [icon ? _jsx("span", { className: "shrink-0", children: icon }) : null, children] }));
+}
+export function PillIconButton({ variant = 'default', active = false, className, children, type, ...rest }) {
+    return (_jsx("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: children }));
+}
+/** Pill tab styling shared by table tabs, modal relation tabs, and breadcrumbs. */
+export function pillTabClass(active) {
+    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/dist/components/ui/Select.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    invalid?: boolean;
+    /** Highlight the control (e.g. an active filter) */
+    active?: boolean;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/ui/Select.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../utils/classNames';
+export const Select = React.forwardRef(function Select({ invalid, active, className, children, ...rest }, ref) {
+    return (_jsxs("div", { className: cn('relative', className), children: [_jsx("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: children }), _jsx(ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-fg-muted pointer-events-none" })] }));
+});

package/dist/components/ui/Spinner.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface SpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+    /** Optional label rendered next to the spinner */
+    label?: string;
+}
+export declare function Spinner({ size, className, label }: SpinnerProps): React.JSX.Element;

package/dist/components/ui/Spinner.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/classNames';
+import { translate } from '../../i18n/activeLocale';
+const SIZE_CLASSES = {
+    sm: 'h-4 w-4 border-2',
+    md: 'h-6 w-6 border-2',
+    lg: 'h-8 w-8 border-[3px]',
+};
+export function Spinner({ size = 'md', className, label }) {
+    const circle = (_jsx("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 (_jsxs("span", { className: "inline-flex items-center gap-2 text-fg-secondary", children: [circle, _jsx("span", { className: "text-sm", children: label })] }));
+}

package/dist/components/ui/Toast.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export type ToastVariant = 'success' | 'error' | 'info';
+export interface ToastOptions {
+    variant?: ToastVariant;
+    /** Auto-dismiss delay in ms (default 4000; 0 disables) */
+    duration?: number;
+}
+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;
+}
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * Toast API. Outside a ToastProvider (e.g. standalone FormRenderer usage)
+ * it degrades to console logging instead of crashing.
+ */
+export declare function useToast(): ToastApi;

package/dist/components/ui/Toast.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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';
+const ToastContext = createContext(null);
+const VARIANT_STYLES = {
+    success: { icon: _jsx(CheckCircle2, { className: "h-5 w-5 text-success" }), bar: 'bg-success' },
+    error: { icon: _jsx(AlertCircle, { className: "h-5 w-5 text-danger" }), bar: 'bg-danger' },
+    info: { icon: _jsx(Info, { className: "h-5 w-5 text-accent" }), bar: 'bg-accent' },
+};
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const idRef = useRef(0);
+    const dismiss = useCallback((id) => {
+        setToasts(prev => prev.filter(t => t.id !== id));
+    }, []);
+    const toast = useCallback((message, options) => {
+        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(() => ({
+        toast,
+        success: message => toast(message, { variant: 'success' }),
+        error: message => toast(message, { variant: 'error', duration: 6000 }),
+        info: message => toast(message, { variant: 'info' }),
+    }), [toast]);
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, toasts.length > 0 && (_jsx("div", { className: "fixed bottom-4 right-4 z-[100] flex w-[calc(100vw-2rem)] max-w-sm flex-col gap-2", children: toasts.map(t => (_jsxs("div", { 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", children: [_jsx("span", { className: cn('absolute inset-y-0 left-0 w-1', VARIANT_STYLES[t.variant].bar) }), _jsx("span", { className: "shrink-0", children: VARIANT_STYLES[t.variant].icon }), _jsx("div", { className: "min-w-0 flex-1 break-words text-sm text-fg", children: t.message }), _jsx("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", children: _jsx(X, { className: "h-4 w-4" }) })] }, t.id))) }))] }));
+}
+/**
+ * Toast API. Outside a ToastProvider (e.g. standalone FormRenderer usage)
+ * it degrades to console logging instead of crashing.
+ */
+export function useToast() {
+    const context = useContext(ToastContext);
+    return useMemo(() => {
+        if (context)
+            return context;
+        const fallback = (message) => console.info('[kratosjs toast]', message);
+        return { toast: fallback, success: fallback, error: fallback, info: fallback };
+    }, [context]);
+}

package/dist/components/ui/index.d.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/dist/components/ui/index.js

@@ -0,0 +1,12 @@
+export { PillButton, PillIconButton, pillTabClass } from './PillButton';
+export { Button, IconButton } from './Button';
+export { Input, Textarea, inputClasses } from './Input';
+export { Select } from './Select';
+export { Label } from './Label';
+export { Badge } from './Badge';
+export { Card } from './Card';
+export { Spinner } from './Spinner';
+export { EmptyState } from './EmptyState';
+export { ErrorAlert } from './ErrorAlert';
+export { ToastProvider, useToast } from './Toast';
+export { ConfirmProvider, useConfirm } from './ConfirmDialog';

package/dist/components/utils/HintDisplay.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface HintDisplayProps {
+    hint?: string;
+    hintIcon?: string;
+    hintColor?: string;
+}
+/**
+ * Reusable hint display component
+ * Shows hint text with optional icon and color
+ */
+export declare function HintDisplay({ hint, hintIcon, hintColor }: HintDisplayProps): React.JSX.Element;