@standardbeagle/edit-db 0.3.229 → 0.4.327

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 BifrostQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,305 @@
+# @standardbeagle/edit-db
+
+> React GraphQL database editor with automatic form generation, validation, and data table components.
+
+[![npm version](https://img.shields.io/npm/v/@standardbeagle/edit-db)](https://www.npmjs.com/package/@standardbeagle/edit-db)
+[![React](https://img.shields.io/badge/React-18+-61DAFB?logo=react)](https://react.dev/)
+[![GraphQL](https://img.shields.io/badge/GraphQL-E10098?logo=graphql)](https://graphql.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?logo=typescript)](https://www.typescriptlang.org/)
+
+## Overview
+
+`@standardbeagle/edit-db` is a React component library for building database administration interfaces. Connect it to any GraphQL API—especially [BifrostQL](https://github.com/standardbeagle/BifrostQL)—and get a fully functional data editor with zero configuration.
+
+**Key features:**
+
+- **Automatic form generation** from GraphQL schema introspection
+- **Built-in validation** with support for required fields, patterns, ranges, and custom rules
+- **Data table with sorting, filtering, and pagination** powered by TanStack Table
+- **Foreign key navigation** with automatic relationship detection
+- **Responsive design** using Tailwind CSS and shadcn/ui components
+- **TypeScript support** with full type definitions
+
+## Installation
+
+Install the package and its peer dependencies:
+
+```bash
+npm install @standardbeagle/edit-db @tanstack/react-query
+```
+
+```bash
+yarn add @standardbeagle/edit-db @tanstack/react-query
+```
+
+```bash
+pnpm add @standardbeagle/edit-db @tanstack/react-query
+```
+
+### Prerequisites
+
+- React 18 or higher
+- @tanstack/react-query 5.x
+- A GraphQL API endpoint (BifrostQL recommended)
+
+## Quick Start
+
+```tsx
+import { Editor } from '@standardbeagle/edit-db';
+import '@standardbeagle/edit-db/style.css';
+
+function App() {
+  return (
+    <Editor
+      uri="https://api.example.com/graphql"
+      uiPath="/admin"
+    />
+  );
+}
+
+export default App;
+```
+
+## Usage Examples
+
+### Basic Setup with BifrostQL
+
+```tsx
+import { Editor } from '@standardbeagle/edit-db';
+import '@standardbeagle/edit-db/style.css';
+
+function DatabaseAdmin() {
+  return (
+    <div className="h-screen">
+      <Editor
+        uri="/graphql"
+        uiPath="/admin"
+        onLocate={(path) => console.log('Navigation:', path)}
+      />
+    </div>
+  );
+}
+```
+
+### Custom GraphQL Fetcher
+
+For advanced use cases, provide a custom fetcher:
+
+```tsx
+import { Editor, GraphQLFetcher } from '@standardbeagle/edit-db';
+
+class CustomFetcher implements GraphQLFetcher {
+  async query<T>(query: string, variables?: Record<string, unknown>): Promise<T> {
+    const response = await fetch('/api/graphql', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${getAuthToken()}`,
+      },
+      body: JSON.stringify({ query, variables }),
+    });
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    
+    const result = await response.json();
+    
+    if (result.errors) {
+      throw new Error(result.errors[0].message);
+    }
+    
+    return result.data;
+  }
+}
+
+function App() {
+  const fetcher = useMemo(() => new CustomFetcher(), []);
+  
+  return <Editor fetcher={fetcher} uiPath="/admin" />;
+}
+```
+
+### Navigation Tracking
+
+Track user navigation for analytics or state management:
+
+```tsx
+function App() {
+  const [currentPath, setCurrentPath] = useState('');
+  
+  return (
+    <>
+      <nav>Current: {currentPath}</nav>
+      <Editor
+        uri="/graphql"
+        uiPath="/admin"
+        onLocate={setCurrentPath}
+      />
+    </>
+  );
+}
+```
+
+## Configuration Options
+
+### Editor Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `uri` | `string` | Optional* | GraphQL endpoint URL |
+| `fetcher` | `GraphQLFetcher` | Optional* | Custom fetcher instance |
+| `uiPath` | `string` | Optional | Base path for routing (default: `/`) |
+| `onLocate` | `(path: string) => void` | Optional | Navigation callback |
+
+*Either `uri` or `fetcher` is required.
+
+### GraphQL Schema Requirements
+
+The editor expects a BifrostQL-compatible schema with the `_dbSchema` query:
+
+```graphql
+type Query {
+  _dbSchema: [DbSchemaItem!]!
+}
+
+type DbSchemaItem {
+  graphQlName: String!
+  dbName: String!
+  labelColumn: String!
+  primaryKeys: [String!]!
+  isEditable: Boolean!
+  metadata: [MetadataItem!]!
+  columns: [DbColumnItem!]!
+  multiJoins: [JoinItem!]!
+  singleJoins: [JoinItem!]!
+}
+
+type DbColumnItem {
+  graphQlName: String!
+  dbName: String!
+  paramType: String!
+  dbType: String!
+  isPrimaryKey: Boolean!
+  isIdentity: Boolean!
+  isNullable: Boolean!
+  isReadOnly: Boolean!
+  metadata: [MetadataItem!]!
+  # Optional validation metadata
+  maxLength: Int
+  minLength: Int
+  min: Float
+  max: Float
+  step: Float
+  pattern: String
+  patternMessage: String
+  inputType: String
+  defaultValue: String
+  enumValues: [String!]
+  enumLabels: [String!]
+}
+```
+
+## Component Architecture
+
+### Main Components
+
+#### `<Editor />`
+The root component that sets up React Query, schema context, and routing.
+
+#### `<MainFrame />`
+Handles the application layout with sidebar navigation and main content area.
+
+#### `<DataPanel />`
+Displays data tables with sorting, filtering, and pagination.
+
+#### `<DataEdit />`
+Renders edit forms with automatic field generation based on schema metadata.
+
+### Custom Hooks
+
+| Hook | Purpose |
+|------|---------|
+| `useSchema()` | Access database schema and table metadata |
+| `useDataTable()` | Manage table data, sorting, filtering, and pagination |
+| `useTableMutation()` | Handle insert, update, and delete operations |
+| `useTableRef()` | Fetch reference data for foreign key dropdowns |
+| `usePath()` | Client-side routing without page reloads |
+| `useColumnNav()` | Manage side panel navigation for related records |
+
+### Form Validation
+
+Validation rules are automatically applied from schema metadata:
+
+```typescript
+// Required fields
+{ isNullable: false }
+
+// String length
+{ maxLength: 255, minLength: 1 }
+
+// Numeric ranges
+{ min: 0, max: 100, step: 1 }
+
+// Pattern matching
+{ pattern: '^[A-Z]{2}-\\d{4}$', patternMessage: 'Format: XX-0000' }
+
+// Enum values
+{ enumValues: ['active', 'inactive'], enumLabels: ['Active', 'Inactive'] }
+```
+
+## Styling
+
+The package uses Tailwind CSS for styling. Import the stylesheet:
+
+```tsx
+import '@standardbeagle/edit-db/style.css';
+```
+
+For custom theming, override CSS variables:
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  /* ... */
+}
+```
+
+## TypeScript Support
+
+Full TypeScript definitions are included:
+
+```tsx
+import type { 
+  EditorProps, 
+  GraphQLFetcher, 
+  Schema, 
+  Table, 
+  Column 
+} from '@standardbeagle/edit-db';
+```
+
+## Browser Support
+
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## Related Packages
+
+- [BifrostQL](https://github.com/standardbeagle/BifrostQL) - Zero-config GraphQL API for databases
+- [@tanstack/react-table](https://tanstack.com/table) - Headless UI for building data tables
+- [@tanstack/react-query](https://tanstack.com/query) - Data fetching and caching
+- [@tanstack/react-form](https://tanstack.com/form) - Form state management
+
+## License
+
+MIT © Standard Beagle
+
+## Contributing
+
+Contributions are welcome! Please see the [main BifrostQL repository](https://github.com/standardbeagle/BifrostQL) for contribution guidelines.

package/dist/common/schema.d.ts

@@ -1,2 +1,2 @@
 export declare const GET_SCHEMA = "{\n    schema: __schema {\n      queryType {\n        fields {\n          name\n          type {\n            fields {\n              name\n              type {\n                ofType {\n                  fields {\n                    name\n                    type {\n                      kind\n                      ofType {\n                        name\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  ";
-export declare const GET_DB_SCHEMA = "\nquery dbSchema {\n  _dbSchema {\n    dbName\n    graphQlName\n    labelColumn\n    primaryKeys\n    isEditable\n    metadata {\n      key\n      value\n    }\n    columns {\n      dbName\n      graphQlName\n      paramType\n      isPrimaryKey\n      isIdentity\n      isNullable\n      isReadOnly\n      metadata {\n        key\n        value\n      }\n    }\n    multiJoins {\n      name\n      sourceColumnNames\n      destinationTable\n      destinationColumnNames\n    }\n    singleJoins {\n      name\n      sourceColumnNames\n      destinationTable\n      destinationColumnNames\n    }\n  }\n}";
+export declare const GET_DB_SCHEMA = "\nquery dbSchema {\n  _dbSchema {\n    dbName\n    graphQlName\n    labelColumn\n    primaryKeys\n    isEditable\n    metadata {\n      key\n      value\n    }\n    columns {\n      dbName\n      graphQlName\n      paramType\n      dbType\n      isPrimaryKey\n      isIdentity\n      isNullable\n      isReadOnly\n      maxLength\n      minLength\n      min\n      max\n      step\n      pattern\n      patternMessage\n      inputType\n      defaultValue\n      enumValues\n      enumLabels\n      metadata {\n        key\n        value\n      }\n    }\n    multiJoins {\n      name\n      sourceColumnNames\n      destinationTable\n      destinationColumnNames\n    }\n    singleJoins {\n      name\n      sourceColumnNames\n      destinationTable\n      destinationColumnNames\n    }\n  }\n}";

package/dist/components/confirm-dialog.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: 'default' | 'destructive';
+    isPending?: boolean;
+    onConfirm: () => void;
+}
+export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, isPending, onConfirm, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/content-editor.d.ts

@@ -0,0 +1,12 @@
+interface ContentEditorProps {
+    name: string;
+    label: string;
+    value: string;
+    dbType: string;
+    onChange: (value: string) => void;
+    onBlur: () => void;
+    required?: boolean;
+    invalid?: boolean;
+}
+export declare function ContentEditor({ name, label, value, dbType, onChange, onBlur, required, invalid, }: ContentEditorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/content-panel.d.ts

@@ -0,0 +1,18 @@
+export interface ContentPanelTarget {
+    value: string;
+    columnName: string;
+    columnLabel: string;
+    dbType: string;
+    rowIndex: number;
+    isReadOnly: boolean;
+}
+interface ContentPanelProps {
+    target: ContentPanelTarget | null;
+    onClose: () => void;
+    onNavigate: (direction: 'prev' | 'next') => void;
+    onSave?: (value: string) => void;
+    canNavigatePrev: boolean;
+    canNavigateNext: boolean;
+}
+export declare function ContentPanel({ target, onClose, onNavigate, onSave, canNavigatePrev, canNavigateNext, }: ContentPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/content-viewer.d.ts

@@ -0,0 +1,7 @@
+interface ContentViewerProps {
+    value: unknown;
+    dbType?: string;
+    onExpand?: () => void;
+}
+export declare function ContentViewer({ value, dbType, onExpand }: ContentViewerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/data-table-column-header.d.ts

@@ -0,0 +1,8 @@
+import { Column, Table } from '@tanstack/react-table';
+interface DataTableColumnHeaderProps<TData, TValue> {
+    column: Column<TData, TValue>;
+    table: Table<TData>;
+    title: string;
+}
+export declare function DataTableColumnHeader<TData, TValue>({ column, table: tableInstance, title, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table.d.ts

@@ -1,15 +1,84 @@
-import { ColumnDef, SortingState } from '@tanstack/react-table';
+import { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { PkFilter } from '../lib/row-id';
+/**
+ * Props for the DataTable component.
+ * @interface DataTableProps
+ * @template TData - The type of data rows displayed in the table
+ */
 interface DataTableProps<TData> {
+    /** Column definitions for the table */
     columns: ColumnDef<TData, unknown>[];
+    /** Data rows to display */
     data: TData[];
+    /** Table name for persisting column sizing to localStorage */
+    tableName?: string;
+    /** Total number of pages */
     pageCount: number;
+    /** Current page index (0-based) */
     pageIndex: number;
+    /** Number of rows per page */
     pageSize: number;
+    /** Current sorting state */
     sorting: SortingState;
+    /** Active column filters */
+    columnFilters: ColumnFiltersState;
+    /** Whether data is currently loading */
     loading?: boolean;
+    /** Enable row selection checkboxes */
+    selectable?: boolean;
+    /**
+     * Primary key column names in declaration order.
+     * - Single-column PK: `['id']` (or whichever column).
+     * - Composite PK: multiple entries — the row id becomes a composite-encoded string.
+     * - Empty / omitted: synthetic `row-${index}` ids; edit/delete actions are disabled.
+     */
+    primaryKeys?: string[];
+    /** Currently selected row ID — must be a value produced by `rowIdOf` (composite-encoded). */
+    selectedRowId?: string | null;
+    /** Callback when a row is selected */
+    onRowSelect?: (rowId: string | null) => void;
+    /** Callback when sorting changes */
     onSortingChange: (sorting: SortingState) => void;
+    /** Callback when column filters change */
+    onColumnFiltersChange: (filters: ColumnFiltersState) => void;
+    /** Callback when page index changes */
     onPageIndexChange: (pageIndex: number) => void;
+    /** Callback when page size changes */
     onPageSizeChange: (pageSize: number) => void;
+    /** Callback when edit action is triggered for a row */
+    onEditRow?: (pk: PkFilter) => void;
+    /** Callback when delete action is triggered for a row */
+    onDeleteRow?: (pk: PkFilter) => void;
+    /** Callback when deleting multiple selected rows */
+    onDeleteSelected?: (pks: PkFilter[]) => void;
 }
-export declare function DataTable<TData>({ columns, data, pageCount, pageIndex, pageSize, sorting, loading, onSortingChange, onPageIndexChange, onPageSizeChange, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * DataTable component - A comprehensive data table with sorting, filtering,
+ * pagination, and column resizing capabilities.
+ *
+ * Built on top of TanStack Table (@tanstack/react-table) with a Tailwind CSS
+ * interface. Supports row selection, inline actions, and persistent column sizing.
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   columns={columns}
+ *   data={rows}
+ *   pageCount={10}
+ *   pageIndex={0}
+ *   pageSize={20}
+ *   sorting={[{ id: 'name', desc: false }]}
+ *   columnFilters={[]}
+ *   onSortingChange={setSorting}
+ *   onColumnFiltersChange={setFilters}
+ *   onPageIndexChange={setPageIndex}
+ *   onPageSizeChange={setPageSize}
+ * />
+ * ```
+ *
+ * @template TData - The type of data rows
+ * @param props - DataTable configuration props
+ * @returns React element containing the data table interface
+ */
+export declare function DataTable<TData>({ columns, data, tableName, pageCount, pageIndex, pageSize, sorting, columnFilters, loading, selectable, primaryKeys, selectedRowId, onRowSelect, onSortingChange, onColumnFiltersChange, onPageIndexChange, onPageSizeChange, onEditRow, onDeleteRow, onDeleteSelected, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/detail-panel.d.ts

@@ -0,0 +1,10 @@
+import { Table } from '../types/schema';
+import { ColumnPanel } from '../data-panel';
+interface DetailPanelProps {
+    parentTable: Table;
+    selectedRowId: string;
+    onClose?: () => void;
+    onOpenColumn?: (panel: ColumnPanel) => void;
+}
+export declare function DetailPanel({ parentTable, selectedRowId, onClose, onOpenColumn }: DetailPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/filters/boolean-filter.d.ts

@@ -0,0 +1,6 @@
+import { Column } from '@tanstack/react-table';
+interface BooleanFilterProps<TData, TValue> {
+    column: Column<TData, TValue>;
+}
+export declare function BooleanFilter<TData, TValue>({ column }: BooleanFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filters/date-filter.d.ts

@@ -0,0 +1,6 @@
+import { Column } from '@tanstack/react-table';
+interface DateFilterProps<TData, TValue> {
+    column: Column<TData, TValue>;
+}
+export declare function DateFilter<TData, TValue>({ column }: DateFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/filters/fk-filter.d.ts

@@ -0,0 +1,15 @@
+import { Column } from '@tanstack/react-table';
+interface FkFilterProps<TData, TValue> {
+    column: Column<TData, TValue>;
+    joinTable: string;
+    joinLabelColumn: string;
+    /**
+     * The destination column of the join (FK target). Used to project the option values
+     * so the filter applies against the same column the FK points at. Do NOT substitute
+     * the target table's first primary-key column here — on composite-PK or denormalized-FK
+     * targets those are different columns.
+     */
+    joinFkColumn: string;
+}
+export declare function FkFilter<TData, TValue>({ column, joinTable, joinLabelColumn, joinFkColumn }: FkFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filters/number-filter.d.ts

@@ -0,0 +1,6 @@
+import { Column } from '@tanstack/react-table';
+interface NumberFilterProps<TData, TValue> {
+    column: Column<TData, TValue>;
+}
+export declare function NumberFilter<TData, TValue>({ column }: NumberFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/filters/text-filter.d.ts

@@ -0,0 +1,6 @@
+import { Column } from '@tanstack/react-table';
+interface TextFilterProps<TData, TValue> {
+    column: Column<TData, TValue>;
+}
+export declare function TextFilter<TData, TValue>({ column }: TextFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/fk-cell-popover.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+interface FkCellPopoverProps {
+    tableName: string;
+    recordId: string | number;
+    /**
+     * The column on `tableName` whose value is `recordId`. Callers pass the FK target
+     * column from the join metadata (`destinationColumnNames[0]`). Using the target's
+     * "primary key" column here is wrong for composite-PK and denormalized-FK targets.
+     */
+    filterColumn: string;
+    children: ReactNode;
+}
+export declare function FkCellPopover({ tableName, recordId, filterColumn, children }: FkCellPopoverProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/row-actions.d.ts

@@ -0,0 +1,14 @@
+interface RowActionsProps {
+    anchorEl: HTMLElement;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onMouseEnter: () => void;
+    onDismiss: () => void;
+}
+/**
+ * Floating row action toolbar using the Popover API.
+ * Anchored to the row element, positioned below-left with automatic
+ * flip to above when near the viewport bottom.
+ */
+export declare function RowActions({ anchorEl, onEdit, onDelete, onMouseEnter, onDismiss }: RowActionsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table-dimensions.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

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

@@ -1,17 +1,17 @@
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import * as React from "react";
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare const Dialog: React.ForwardRefExoticComponent<DialogPrimitive.DialogProps & React.RefAttributes<never>>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.ForwardRefExoticComponent<DialogPrimitive.DialogPortalProps & React.RefAttributes<never>>;
+declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     showCloseButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     showCloseButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/hover-card.d.ts

@@ -0,0 +1,6 @@
+import { HoverCard as HoverCardPrimitive } from 'radix-ui';
+import * as React from "react";
+declare const HoverCard: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardProps & React.RefAttributes<never>>;
+declare const HoverCardTrigger: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { HoverCard, HoverCardTrigger, HoverCardContent };

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { Input };

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

@@ -0,0 +1,14 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import * as React from "react";
+declare function Sheet({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function SheetPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function SheetOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+}): import("react/jsx-runtime").JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, };