@nubase/frontend 0.1.1

package/README.md

@@ -0,0 +1,127 @@
+# @nubase/frontend
+
+React components and utilities for the nubase ecosystem.
+
+## Installation
+
+```bash
+npm install @nubase/frontend @nubase/core
+```
+
+## Usage
+
+```typescript
+import { SchemaForm } from '@nubase/frontend';
+import { nu, type Infer } from '@nubase/core';
+import '@nubase/frontend/styles.css'; // Import base styles
+
+// Define your schema - fields are required by default
+const userSchema = nu.object({
+  name: nu.string().withMeta({
+    label: "Full Name",
+    description: "Enter your complete name"
+  }),
+  email: nu.string().withMeta({
+    label: "Email Address", 
+    description: "We'll send you updates here"
+  }),
+  phone: nu.string().optional().withMeta({
+    label: "Phone Number",
+    description: "Optional contact number"
+  })
+});
+
+type UserData = Infer<typeof userSchema>;
+
+function MyComponent() {
+  const handleSubmit = (data: UserData) => {
+    console.log('Form data:', data);
+    // data is properly typed with required/optional fields
+  };
+
+  return (
+    <SchemaForm 
+      schema={userSchema}
+      onSubmit={handleSubmit}
+      submitText="Create Account"
+    />
+  );
+}
+```
+
+### Required vs Optional Fields
+
+The `SchemaForm` component automatically:
+- Shows **asterisks (*)** for required fields  
+- Validates required fields on submit
+- Allows optional fields to be left empty
+
+```typescript
+const contactSchema = nu.object({
+  name: nu.string(),              // Required - shows *
+  email: nu.string(),             // Required - shows *
+  phone: nu.string().optional(),  // Optional - no *
+  notes: nu.string().optional(),  // Optional - no *
+});
+```
+
+## Styling
+
+The package includes CSS files that you can import:
+
+```typescript
+// Base component styles
+import '@nubase/frontend/styles.css';
+
+// Theme styles (optional)
+import '@nubase/react/theme.css';
+```
+
+## Components
+
+### Form Components
+- `SchemaForm` - Schema-driven form with automatic field rendering and validation
+- `FormFieldRenderer` - Renders individual form fields based on schema type
+
+### Form Controls  
+- `FormControl` - Form field wrapper with label, validation, and error display
+- `TextInput` - Text input with validation states and accessibility
+- `Label` - Form labels with required field indicators
+
+### Button System
+- `Button` - Primary button component with 5 variants and 4 sizes
+- `ButtonBar` - Button container with flexible alignment options
+
+### Floating UI
+- `Dialog` - Confirmation dialogs with promise-based API
+- `Modal` - Multi-size modals with backdrop and stacking support  
+- `Toast` - Toast notifications with 6 types including promise toasts
+
+### Navigation
+- `MainNav` - Hierarchical navigation with search and badges
+- `NubaseApp` - Application shell with router integration
+
+### Theming
+- Material Design 3 theming system with 26 semantic color roles
+- Runtime theme switching with CSS variables
+- 4 built-in themes: Light, Dark, Light High Contrast, Dark High Contrast
+
+## Storybook
+
+This package includes Storybook stories for component development:
+
+```bash
+npm run storybook
+```
+
+## Peer Dependencies
+
+- React 19+
+
+## Contributing
+
+Please see the main repository for contributing guidelines.
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1,50 @@
+/* src/components/dock/ResizeHandle.module.css */
+.interactionArea {
+  --handle-size: 20px;
+  position: absolute;
+}
+.interactionAreaVertical {
+  top: 0;
+  bottom: 0;
+  left: calc(var(--handle-size) * -0.5);
+  right: calc(var(--handle-size) * -0.5);
+}
+.interactionAreaHorizontal {
+  left: 0;
+  right: 0;
+  top: calc(var(--handle-size) * -0.5);
+  bottom: calc(var(--handle-size) * -0.5);
+}
+.handle {
+  position: absolute;
+  z-index: 10;
+  transition: all 0.2s ease;
+  background-color: transparent;
+}
+.handleVertical {
+  cursor: col-resize;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  transform: translateX(-50%);
+}
+.handleHorizontal {
+  cursor: row-resize;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 0;
+  transform: translateY(-50%);
+}
+.handleHover {
+  background-color: var(--color-primary);
+  opacity: 0.3;
+}
+.handleVertical.handleHover {
+  width: var(--handle-size);
+}
+.handleHorizontal.handleHover {
+  height: var(--handle-size);
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dock/ResizeHandle.module.css"],"sourcesContent":["/* ResizeHandle.module.css */\n.interactionArea {\n  /*\n    --handle-size controls both the visible thickness of the handle on hover\n    and the invisible grab area around it.\n  */\n  --handle-size: 20px;\n  position: absolute;\n}\n\n.interactionAreaVertical {\n  top: 0;\n  bottom: 0;\n  /* The grab area extends on both sides by the handle size */\n  left: calc(var(--handle-size) * -0.5);\n  right: calc(var(--handle-size) * -0.5);\n}\n\n.interactionAreaHorizontal {\n  left: 0;\n  right: 0;\n  /* The grab area extends on both sides by the handle size */\n  top: calc(var(--handle-size) * -0.5);\n  bottom: calc(var(--handle-size) * -0.5);\n}\n\n.handle {\n  position: absolute;\n  z-index: 10;\n  transition: all 0.2s ease;\n  background-color: transparent;\n}\n\n.handleVertical {\n  cursor: col-resize;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 0;\n  transform: translateX(-50%);\n}\n\n.handleHorizontal {\n  cursor: row-resize;\n  left: 0;\n  right: 0;\n  top: 50%;\n  height: 0;\n  transform: translateY(-50%);\n}\n\n.handleHover {\n  background-color: var(--color-primary);\n  opacity: 0.3;\n}\n\n.handleVertical.handleHover {\n  width: var(--handle-size);\n}\n\n.handleHorizontal.handleHover {\n  height: var(--handle-size);\n}\n"],"mappings":";AACA,CAAC;AAKC,iBAAe;AACf,YAAU;AACZ;AAEA,CAAC;AACC,OAAK;AACL,UAAQ;AAER,QAAM,KAAK,IAAI,eAAe,EAAE;AAChC,SAAO,KAAK,IAAI,eAAe,EAAE;AACnC;AAEA,CAAC;AACC,QAAM;AACN,SAAO;AAEP,OAAK,KAAK,IAAI,eAAe,EAAE;AAC/B,UAAQ,KAAK,IAAI,eAAe,EAAE;AACpC;AAEA,CAAC;AACC,YAAU;AACV,WAAS;AACT,cAAY,IAAI,KAAK;AACrB,oBAAkB;AACpB;AAEA,CAAC;AACC,UAAQ;AACR,OAAK;AACL,UAAQ;AACR,QAAM;AACN,SAAO;AACP,aAAW,WAAW;AACxB;AAEA,CAAC;AACC,UAAQ;AACR,QAAM;AACN,SAAO;AACP,OAAK;AACL,UAAQ;AACR,aAAW,WAAW;AACxB;AAEA,CAAC;AACC,oBAAkB,IAAI;AACtB,WAAS;AACX;AAEA,CAvBC,cAuBc,CALd;AAMC,SAAO,IAAI;AACb;AAEA,CAlBC,gBAkBgB,CAThB;AAUC,UAAQ,IAAI;AACd;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,517 @@
+import * as React$1 from 'react';
+import React__default, { FC, ReactNode, RefObject } from 'react';
+import { ObjectSchema, Infer, BaseSchema, SchemaMetadata, ObjectShape, Layout, LayoutField, ObjectOutput, RequestSchema, InferRequestParams, InferRequestBody, InferResponseBody } from '@nubase/core';
+import { ReactFormExtendedApi, AnyFieldApi } from '@tanstack/react-form';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ColumnDef, SortingState, OnChangeFn } from '@tanstack/react-table';
+import { ClassValue } from 'clsx';
+
+interface DockProps {
+    center: React__default.ReactNode;
+    left?: React__default.ReactNode;
+    right?: React__default.ReactNode;
+    top?: React__default.ReactNode;
+    defaultLeftWidth?: number;
+    defaultRightWidth?: number;
+}
+declare const Dock: React__default.FC<DockProps>;
+
+type SchemaFormProps<TSchema extends ObjectSchema<any>, TData extends Infer<TSchema> = Infer<TSchema>> = {
+    schema: TSchema;
+    onSubmit: (data: TData) => void | Promise<void>;
+    submitText?: string;
+    className?: string;
+    /** Specify which layout to use (if schema has layouts defined) */
+    layoutName?: string;
+    /** Options for computed metadata behavior */
+    computedMetadata?: {
+        /** Debounce delay in milliseconds for computed metadata updates (default: 300ms) */
+        debounceMs?: number;
+    };
+};
+type SchemaFormRef<TSchema extends ObjectSchema<any>> = ReactFormExtendedApi<Infer<TSchema>, any, any, any, any, any, any, any, any, any>;
+declare const SchemaForm: <TSchema extends ObjectSchema<any>>(props: SchemaFormProps<TSchema> & {
+    ref?: React__default.Ref<SchemaFormRef<TSchema>>;
+}) => React__default.ReactElement;
+
+interface FieldApi {
+    name: string;
+    state: {
+        value: any;
+        meta: {
+            isValidating: boolean;
+            isTouched: boolean;
+            isValid: boolean;
+            errors: (string | undefined)[];
+        };
+    };
+    handleChange: (value: any) => void;
+    handleBlur: () => void;
+}
+interface FormFieldRendererProps {
+    schema: BaseSchema<any>;
+    fieldState: FieldApi;
+    metadata: SchemaMetadata<any>;
+}
+declare const FormFieldRenderer: React__default.FC<FormFieldRendererProps>;
+
+interface SchemaFormLayoutProps<TShape extends ObjectShape = any> {
+    layout: Layout<TShape>;
+    renderField: (field: LayoutField<TShape>) => React__default.ReactNode;
+}
+declare const SchemaFormLayout: <TShape extends ObjectShape = any>({ layout, renderField, }: SchemaFormLayoutProps<TShape>) => react_jsx_runtime.JSX.Element;
+
+declare const inputVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextInputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    hasError?: boolean;
+}
+declare const TextInput: React__default.ForwardRefExoticComponent<TextInputProps & React__default.RefAttributes<HTMLInputElement>>;
+
+declare const searchInputVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SearchTextInputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof searchInputVariants> {
+    hasError?: boolean;
+}
+declare const SearchTextInput: React__default.ForwardRefExoticComponent<SearchTextInputProps & React__default.RefAttributes<HTMLInputElement>>;
+
+declare const labelVariants: (props?: ({
+    variant?: "default" | "required" | "muted" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface LabelProps extends React__default.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {
+    required?: boolean;
+}
+declare const Label: React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>;
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "danger" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface FormControlProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    spacing?: "sm" | "md" | "lg";
+    children: React__default.ReactElement<{
+        id?: string;
+        hasError?: boolean;
+    }>;
+    field?: AnyFieldApi | FieldApi;
+}
+declare const FormControl: React__default.ForwardRefExoticComponent<FormControlProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const selectVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SelectOption<T = unknown> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps<T = unknown> extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "onChange" | "onSelect">, VariantProps<typeof selectVariants> {
+    options: SelectOption<T>[];
+    value?: T;
+    onChange?: (value: T | null) => void;
+    onSelectionChange?: (selectedItem: SelectOption<T> | null) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    loading?: boolean;
+    loadingMessage?: string;
+    emptyMessage?: string;
+    clearable?: boolean;
+    searchable?: boolean;
+    filterOptions?: (options: SelectOption<T>[], inputValue: string) => SelectOption<T>[];
+}
+declare const Select: React__default.ForwardRefExoticComponent<SelectProps<any> & React__default.RefAttributes<HTMLDivElement>>;
+
+type ModalAlignment = "center" | "top";
+type ModalProps = {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    alignment?: ModalAlignment;
+    showBackdrop?: boolean;
+    showCloseButton?: boolean;
+    className?: string;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    zIndex?: number;
+    initialFocus?: React.RefObject<HTMLElement | null>;
+};
+declare const Modal: FC<ModalProps>;
+
+type DialogProps = {
+    open: boolean;
+    onClose: () => void;
+    onConfirm?: () => void;
+    title?: string;
+    children: ReactNode;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
+    showCloseButton?: boolean;
+    className?: string;
+    alignment?: ModalAlignment;
+    confirmText?: string;
+    cancelText?: string;
+    confirmVariant?: "primary" | "danger";
+    showBackdrop?: boolean;
+    zIndex?: number;
+};
+declare const Dialog: FC<DialogProps>;
+
+type DialogConfig = Omit<DialogProps, "open" | "onClose" | "onConfirm" | "children"> & {
+    title?: string;
+    content: ReactNode;
+    onConfirm?: () => void;
+};
+declare const useDialog: () => {
+    show: (dialogConfig: DialogConfig) => void;
+    hide: () => void;
+    isOpen: boolean;
+    DialogComponent: react_jsx_runtime.JSX.Element | null;
+};
+
+type ModalConfig = Omit<ModalProps, "open" | "onClose" | "children"> & {
+    component: ReactNode;
+    id: string;
+    onDismiss?: () => void;
+};
+declare const ModalProvider: FC<{
+    children: ReactNode;
+}>;
+declare const useModal: () => {
+    openModal: (component: ReactNode, options?: Omit<ModalConfig, "id" | "component">) => string;
+    closeModal: (id?: string) => void;
+    closeAllModals: () => void;
+    modalCount: number;
+};
+
+type ToastType = "default" | "success" | "error" | "warning" | "info";
+type ToastPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+interface ToastData {
+    id: string;
+    message: ReactNode;
+    type: ToastType;
+    duration?: number;
+    closable?: boolean;
+    promise?: Promise<any>;
+    loadingText?: ReactNode;
+}
+interface ToastOptions {
+    duration?: number;
+    closable?: boolean;
+}
+interface PromiseToastOptions extends ToastOptions {
+    loadingText?: ReactNode;
+}
+interface PromiseResult<T = any> {
+    success: boolean;
+    data?: T;
+    error?: any;
+}
+interface PromiseToastConfig {
+    message: ReactNode;
+    type: ToastType;
+    duration?: number;
+}
+type PromiseToastCallback<T = any> = (result: PromiseResult<T>) => PromiseToastConfig;
+interface ToastContextType {
+    toasts: ToastData[];
+    addToast: (message: ReactNode, type: ToastType, options?: ToastOptions) => string;
+    addPromiseToast: <T>(promise: Promise<T>, callback: PromiseToastCallback<T>, options?: PromiseToastOptions) => string;
+    removeToast: (id: string) => void;
+    updateToast: (id: string, updates: Partial<ToastData>) => void;
+}
+
+interface ToastProps {
+    toast: ToastData;
+    onClose: () => void;
+}
+declare const Toast: FC<ToastProps>;
+
+interface ToastContainerProps {
+    className?: string;
+}
+declare const ToastContainer: FC<ToastContainerProps>;
+
+declare const useToast: () => ToastContextType;
+interface ToastProviderProps {
+    children: ReactNode;
+}
+declare const ToastProvider: ({ children }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
+
+declare const showToast: (message: ReactNode, type?: ToastType, options?: ToastOptions) => string;
+declare const showPromiseToast: <T>(promise: Promise<T>, callback: PromiseToastCallback<T>, options?: PromiseToastOptions) => string;
+
+interface ThemeToggleProps {
+    className?: string;
+    defaultTheme: "light" | "dark";
+}
+declare const ThemeToggle: ({ className }: ThemeToggleProps) => react_jsx_runtime.JSX.Element;
+
+interface TreeNavigatorItem {
+    id: string;
+    icon: React.ReactNode;
+    title: string;
+    subtitle?: string;
+    onNavigate?: () => void;
+    href?: string;
+    onFocus?: () => void;
+    children?: TreeNavigatorItem[];
+}
+interface FlatItem extends TreeNavigatorItem {
+    level: number;
+    parentId?: string;
+    isExpanded?: boolean;
+    hasChildren: boolean;
+}
+interface TreeNavigatorItemComponentProps {
+    item: FlatItem;
+    index: number;
+    isSelected: boolean;
+    onToggleExpanded: (itemId: string) => void;
+    itemRef: (el: HTMLButtonElement | null) => void;
+}
+declare const TreeNavigatorItemComponent: ({ item, index, isSelected, onToggleExpanded, itemRef, }: TreeNavigatorItemComponentProps) => react_jsx_runtime.JSX.Element;
+
+interface MainNavProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: TreeNavigatorItem[];
+    searchPlaceholder?: string;
+}
+declare const MainNav: React$1.ForwardRefExoticComponent<MainNavProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface NavItem {
+    id: string;
+    label: string;
+    children?: NavItem[];
+    href?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    badge?: string | number;
+}
+
+interface NavItemsProps {
+    items: NavItem[];
+    level?: number;
+    expandedItems: string[];
+    activeItemId?: string;
+    onToggle: (id: string) => void;
+    onItemClick?: (item: NavItem) => void;
+}
+declare const NavItems: FC<NavItemsProps>;
+
+declare const flattenNavItems: (items: NavItem[], level?: number) => (NavItem & {
+    level: number;
+})[];
+declare const filterNavItems: (items: NavItem[], query: string) => NavItem[];
+
+interface TreeNavigatorProps {
+    items: TreeNavigatorItem[];
+    searchInputRef?: RefObject<HTMLInputElement>;
+}
+declare const TreeNavigator: ({ items, searchInputRef, }: TreeNavigatorProps) => react_jsx_runtime.JSX.Element;
+declare const ListNavigator: ({ items, searchInputRef, }: TreeNavigatorProps) => react_jsx_runtime.JSX.Element;
+type ListNavigatorItem = TreeNavigatorItem;
+type ListNavigatorProps = TreeNavigatorProps;
+
+type SearchableTreeNavigatorProps = {
+    items: TreeNavigatorItem[];
+    placeHolder: string;
+    height?: "full" | number | string;
+};
+declare const SearchableTreeNavigator: React$1.ForwardRefExoticComponent<SearchableTreeNavigatorProps & React$1.RefAttributes<HTMLInputElement>>;
+declare const SearchableListNavigator: React$1.ForwardRefExoticComponent<SearchableTreeNavigatorProps & React$1.RefAttributes<HTMLInputElement>>;
+type SearchableListNavigatorProps = SearchableTreeNavigatorProps;
+
+interface HttpResponse<T = any> {
+    status: number;
+    data: T;
+}
+interface HttpRequestConfig {
+    headers?: Record<string, string>;
+    timeout?: number;
+    params?: Record<string, any>;
+}
+declare class HttpClient {
+    private baseUrl;
+    constructor({ baseUrl }: {
+        baseUrl?: string;
+    });
+    private request;
+    get<T>(url: string, config?: HttpRequestConfig): Promise<HttpResponse<T>>;
+    post<T>(url: string, data?: any, config?: HttpRequestConfig): Promise<HttpResponse<T>>;
+    put<T>(url: string, data?: any, config?: HttpRequestConfig): Promise<HttpResponse<T>>;
+    patch<T>(url: string, data?: any, config?: HttpRequestConfig): Promise<HttpResponse<T>>;
+    delete<T>(url: string, config?: HttpRequestConfig): Promise<HttpResponse<T>>;
+}
+
+type ViewType = "object";
+type ViewBase = {
+    title: string;
+    id: string;
+};
+type CreateView<TSchema extends ObjectSchema<any> = ObjectSchema<any>, THttpClient = any> = ViewBase & {
+    type: "create";
+    schema: TSchema;
+    onSubmit: ({ data, http, }: {
+        data: Infer<TSchema>;
+        http: THttpClient;
+    }) => Promise<HttpResponse<any>>;
+};
+type ViewView<TSchema extends ObjectSchema<any> = ObjectSchema<any>> = ViewBase & {
+    type: "view";
+    schema: TSchema;
+};
+type View<TSchema extends ObjectSchema<any> = ObjectSchema<any>, THttpClient = any> = CreateView<TSchema, THttpClient> | ViewView<TSchema>;
+
+type NubaseFrontendConfig<TApiEndpoints = any> = {
+    appName: string;
+    mainMenu: TreeNavigatorItem[];
+    /**
+     * Maps a view-id to a view configuration.
+     */
+    views: Record<string, View>;
+    /**
+     * If set, this will be used as the base URL for all HTTP requests.
+     * If not set, only full URLs will be used in HTTP requests.
+     */
+    apiBaseUrl?: string;
+    /**
+     * API endpoints definition for type-safe client generation.
+     * The framework will automatically create a typed API client from these endpoints.
+     * Supports nested structure like: { tickets: { createTicket: schema, ... }, users: { ... } }
+     */
+    apiEndpoints?: TApiEndpoints;
+    themeIds?: string[];
+    defaultThemeId?: "light" | "dark";
+};
+
+type NubaseAppProps = {
+    config: NubaseFrontendConfig;
+};
+declare const NubaseApp: FC<NubaseAppProps>;
+
+declare const tableVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface TableProps<TData> extends React__default.TableHTMLAttributes<HTMLTableElement> {
+    data: TData[];
+    columns: ColumnDef<TData>[];
+    loading?: boolean;
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    enableSorting?: boolean;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    containerClassName?: string;
+}
+declare const Table: React__default.ForwardRefExoticComponent<TableProps<any> & React__default.RefAttributes<HTMLTableElement>>;
+
+declare const paginationVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface PaginationProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    currentPage: number;
+    totalPages: number;
+    pageSize: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    showPageSizeSelector?: boolean;
+    showInfo?: boolean;
+}
+declare const Pagination: React__default.ForwardRefExoticComponent<PaginationProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface UseComputedMetadataOptions {
+    /** Debounce delay in milliseconds (default: 300ms) */
+    debounceMs?: number;
+}
+interface UseComputedMetadataResult<TShape extends ObjectShape> {
+    /** Merged metadata for all properties (static + computed) */
+    metadata: Record<keyof TShape, SchemaMetadata<any>>;
+    /** Whether metadata is currently being computed */
+    isComputing: boolean;
+    /** Error that occurred during computation, if any */
+    error: Error | null;
+}
+/**
+ * Hook that provides debounced computed metadata for a form schema.
+ *
+ * This hook:
+ * 1. Watches for changes in form data
+ * 2. Debounces the computation to avoid excessive recalculation
+ * 3. Merges static metadata with computed metadata
+ * 4. Returns the final merged metadata for all properties
+ *
+ * @param schema The ObjectSchema with potential computed metadata
+ * @param formData Current form data (partial object)
+ * @param options Configuration options
+ * @returns Object with merged metadata, loading state, and error state
+ */
+declare function useComputedMetadata<TShape extends ObjectShape>(schema: ObjectSchema<TShape>, formData: Partial<ObjectOutput<TShape>>, options?: UseComputedMetadataOptions): UseComputedMetadataResult<TShape>;
+
+/**
+ * Pure function version of useLayout for testing and non-React contexts.
+ * This function has the same logic as useLayout but without React hooks.
+ */
+declare function getLayout<TShape extends ObjectShape>(schema: ObjectSchema<TShape>, layoutName?: string): Layout<TShape>;
+/**
+ * Hook to get a layout for a schema. If a layoutName is provided and exists in the schema,
+ * returns that layout. Otherwise, returns a default layout with all fields in a single group
+ * with size 12 (full width).
+ */
+declare function useLayout<TShape extends ObjectShape>(schema: ObjectSchema<TShape>, layoutName?: string): Layout<TShape>;
+
+/**
+ * Utility function for merging Tailwind CSS classes with conditional logic.
+ *
+ * This function combines clsx for conditional class handling with tailwind-merge
+ * to resolve Tailwind class conflicts. It's commonly used throughout the component
+ * library to merge default component styles with user-provided className props.
+ *
+ * @param inputs - Array of class values (strings, objects, arrays, etc.)
+ * @returns A string of merged and deduplicated Tailwind classes
+ *
+ * @example
+ * cn("px-4 py-2", "bg-blue-500", { "text-white": isActive })
+ * // Returns: "px-4 py-2 bg-blue-500 text-white" (if isActive is true)
+ *
+ * @example
+ * cn("bg-red-500", "bg-blue-500")
+ * // Returns: "bg-blue-500" (tailwind-merge resolves the conflict)
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+type TypedMethodOptions<T extends RequestSchema> = {
+    params?: InferRequestParams<T>;
+    data?: InferRequestBody<T>;
+    config?: HttpRequestConfig;
+};
+type MethodSignature<T extends RequestSchema> = T["method"] extends "GET" ? (options?: Omit<TypedMethodOptions<T>, "data">) => Promise<HttpResponse<InferResponseBody<T>>> : (options?: TypedMethodOptions<T>) => Promise<HttpResponse<InferResponseBody<T>>>;
+type TypedApiMethods<T> = {
+    [K in keyof T]: T[K] extends RequestSchema ? MethodSignature<T[K]> : never;
+};
+declare class TypedApiClient<T> {
+    private httpClient;
+    private endpoints;
+    constructor(httpClient: HttpClient, endpoints: T);
+    private createFlatApiClient;
+    private executeRequest;
+    private isRequestSchema;
+    private capitalize;
+}
+declare function createTypedApiClient<T>(httpClient: HttpClient, endpoints: T): TypedApiClient<T> & TypedApiMethods<T>;
+
+/**
+ * Type helper to extract the typed API client type from an endpoints definition.
+ * Supports both flat and nested endpoint structures.
+ */
+type TypedApiClientFromEndpoints<T> = ReturnType<typeof createTypedApiClient<T>>;
+
+export { Button, type ButtonProps, type CreateView, Dialog, type DialogProps, Dock, type DockProps, type FieldApi, type FlatItem, FormControl, type FormControlProps, FormFieldRenderer, type FormFieldRendererProps, HttpClient, type HttpRequestConfig, type HttpResponse, Label, type LabelProps, ListNavigator, type ListNavigatorItem, type ListNavigatorProps, MainNav, type MainNavProps, Modal, type ModalAlignment, type ModalProps, ModalProvider, type NavItem, NavItems, NubaseApp, type NubaseAppProps, type NubaseFrontendConfig, Pagination, type PaginationProps, type PromiseResult, type PromiseToastCallback, type PromiseToastConfig, type PromiseToastOptions, SchemaForm, SchemaFormLayout, type SchemaFormLayoutProps, type SchemaFormProps, type SchemaFormRef, SearchTextInput, type SearchTextInputProps, SearchableListNavigator, type SearchableListNavigatorProps, SearchableTreeNavigator, type SearchableTreeNavigatorProps, Select, type SelectOption, type SelectProps, Table, type TableProps, TextInput, type TextInputProps, ThemeToggle, type ThemeToggleProps, Toast, ToastContainer, type ToastData, type ToastOptions, type ToastPosition, ToastProvider, type ToastType, TreeNavigator, type TreeNavigatorItem, TreeNavigatorItemComponent, type TreeNavigatorProps, TypedApiClient, type TypedApiClientFromEndpoints, type View, type ViewBase, type ViewType, type ViewView, cn, createTypedApiClient, filterNavItems, flattenNavItems, getLayout, paginationVariants, showPromiseToast, showToast, tableVariants, useComputedMetadata, useDialog, useLayout, useModal, useToast };