@rebasepro/ui 0.4.0 → 0.6.0

package/README.md

@@ -1,84 +1,142 @@
-## Rebase UI
-
-
-**Rebase UI** is a high quality set of components that you can use to build your own custom views. You can
-use these components to build your own Rebase views, or in any other React application. You just need to install
-`tailwindcss` and the `@rebasepro/ui` package.
-
-### Why build this UI kit?
-Rebase was using MUI until version 3.0. MUI provides ready to use components with intuitive APIs, but it also
-comes with a lot of complexity and overhead. We wanted to build a simpler and more flexible UI kit that could be used
-in any React project, not just in Rebase.
-We also wanted to make it easy to transition from MUI to our new UI kit, so we kept the API as similar as possible.
-The result it a set of components that are easy to use, easy to customize, **much more performant** and with a smaller bundle size.
-
-The components are primarily built using **Radix UI** primitives and **tailwindcss**. This means that you can easily customize them
-using tailwindcss classes or override the styles using CSS.
-
-See the full list of components in https://rebase.pro/docs/components
-
-
-> All the components are exported from the `@rebasepro/ui` package. These are the same components used internally in **Rebase**.
+# @rebasepro/ui
 
+React component library and design system for the Rebase ecosystem. Built on Radix UI primitives, Tailwind CSS, and lucide-react icons.
 
 ## Installation
 
-If you are using Rebase, you don't need to install this package, as it is already included, and
-configured for you.
-
-To use the components in your own project, you need to install the `@rebasepro/ui` package:
-
-```bash
-yarn add @rebasepro/ui
-```
-or
 ```bash
-npm install @rebasepro/ui
+pnpm add @rebasepro/ui
 ```
 
-You also need to install `tailwindcss`:
+### Peer Dependencies
 
-```bash
-yarn add tailwindcss @tailwindcss/typography
-```
-
-And initialize it in your project:
+- `react` >= 19.0.0
+- `react-dom` >= 19.0.0
 
-```bash
-npx tailwindcss init
-```
+## What This Package Does
 
-And add then add the rebase preset in your `tailwind.config.js`:
+`@rebasepro/ui` provides all the shared UI primitives used across Rebase packages (`@rebasepro/studio`, `@rebasepro/admin`, etc.). It wraps Radix UI components with Rebase's design tokens and Tailwind styling, and re-exports lucide-react icons so other packages don't need direct icon dependencies.
 
-```javascript
-import rebaseConfig from "@rebasepro/ui/tailwind.config.js";
+Import the stylesheet in your app:
 
-export default {
-    presets: [rebaseConfig],
-    content: [
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx}",
-        "./node_modules/@rebasepro/**/src/**/*.{js,ts,jsx,tsx}"
-    ]
-};
+```typescript
+import "@rebasepro/ui/index.css";
 ```
-(You might need to adjust the paths in the `content` array to match your project structure)
 
-Finally, you need to define your primary and secondary colors in your `index.css` file:
-
-```css
-@import 'tailwindcss';
-@import "@rebasepro/ui/index.css" layer(base);
-
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
-
-@source "../index.html";
-@source "./**/*.{js,ts,jsx,tsx}";
-@source "../node_modules/@rebasepro/**/*.{js,ts,jsx,tsx}";
+## Key Exports
+
+### Components
+
+| Component | Description |
+|---|---|
+| `Alert` | Status messages and notifications |
+| `Autocomplete` | Text input with suggestions |
+| `Avatar` | User avatar display |
+| `Badge` | Small status indicator |
+| `BooleanSwitch` / `BooleanSwitchWithLabel` | Toggle switch |
+| `Button` / `IconButton` / `LoadingButton` | Action buttons |
+| `Card` | Content container card |
+| `CenteredView` | Horizontally/vertically centered layout |
+| `Checkbox` | Checkbox input (Radix) |
+| `Chip` / `FilterChip` | Tag-like chips |
+| `CircularProgress` / `CircularProgressCenter` | Loading spinners |
+| `Collapse` | Collapsible content (Radix) |
+| `ColorPicker` | Color selection input |
+| `Container` | Max-width content wrapper |
+| `DateTimeField` | Date/time picker input |
+| `DebouncedTextField` | Text field with debounced onChange |
+| `Dialog` / `DialogTitle` / `DialogContent` / `DialogActions` | Modal dialogs (Radix) |
+| `ErrorBoundary` | React error boundary |
+| `ExpandablePanel` | Expandable/collapsible panel |
+| `FileUpload` | Drag-and-drop file upload (react-dropzone) |
+| `InputLabel` / `InfoLabel` / `Label` | Form labels |
+| `Markdown` | Markdown renderer (markdown-it) |
+| `Menu` / `Menubar` | Dropdown and menu bar (Radix) |
+| `MultiSelect` | Multi-value select input |
+| `Paper` | Elevated surface |
+| `Popover` | Popover overlay (Radix) |
+| `RadioGroup` | Radio button group (Radix) |
+| `ResizablePanels` | Resizable split panes |
+| `SearchBar` | Search input with icon |
+| `Select` | Single-value select (Radix) |
+| `Separator` | Visual divider (Radix) |
+| `Sheet` | Slide-out panel |
+| `Skeleton` | Loading placeholder |
+| `Slider` | Range slider (Radix) |
+| `Table` / `VirtualTable` | Data tables (VirtualTable uses react-window) |
+| `Tabs` | Tab navigation (Radix) |
+| `TextareaAutosize` | Auto-resizing textarea |
+| `TextField` | Text input field |
+| `ToggleButtonGroup` | Segmented toggle buttons |
+| `Tooltip` | Hover tooltip (Radix) |
+| `Typography` | Text with variant styling |
+
+### Re-exported Radix Primitives
+
+```typescript
+import { Portal, PopoverPrimitive, Slot } from "@rebasepro/ui";
+```
 
-:root {
-    --color-primary: #0070F4;
-    --color-secondary: #FF5B79;
+### Style Mixins
+
+Tailwind class-string constants for consistent styling:
+
+| Export | Description |
+|---|---|
+| `focusedClasses` | Ring styles for focused elements |
+| `fieldBackgroundMixin` | Standard field background |
+| `fieldBackgroundHoverMixin` | Hover state for fields |
+| `defaultBorderMixin` | Default border color |
+| `paperMixin` | Paper/card surface style |
+| `cardMixin` / `cardClickableMixin` / `cardSelectedMixin` | Card variants |
+
+### Utilities
+
+| Export | Description |
+|---|---|
+| `cls(...)` | Class name merge utility (wraps `clsx`) |
+| `debounce` | Debounce function |
+| `chipColors` | Color palette for chips |
+| `keyToIconComponent` | Map icon string key to lucide component |
+
+### Hooks
+
+| Hook | Description |
+|---|---|
+| `useInjectStyles` | Inject CSS into the document head |
+| `useOutsideAlerter` | Detect clicks outside a ref |
+| `useDebouncedCallback` | Debounced callback hook |
+| `useDebounceCallback` | Callback debounce variant |
+| `useDebounceValue` | Debounced value hook |
+| `PortalContainerContext` | Context for portal target container |
+
+### Icons
+
+Re-exports ~100 individual lucide-react icon components (e.g. `ArrowRightIcon`, `SearchIcon`, `PlusIcon`), the full `lucideIcons` map, the `Icon` component, `GitHubIcon`, `HandleIcon`, `iconKeys`, and `coolIconKeys`.
+
+## Quick Start
+
+```tsx
+import { Button, TextField, Typography, cls } from "@rebasepro/ui";
+import { SearchIcon } from "@rebasepro/ui";
+import "@rebasepro/ui/index.css";
+
+function MyForm() {
+    return (
+        <div className={cls("flex flex-col gap-4 p-4")}>
+            <Typography variant="h6">Search</Typography>
+            <TextField placeholder="Type to search..." />
+            <Button variant="filled">
+                <SearchIcon size={16} />
+                Search
+            </Button>
+        </div>
+    );
 }
 ```
 
+## Related Packages
+
+- `@rebasepro/studio` — Dev tools layer (depends on this package)
+- `@rebasepro/admin` — CMS layer (depends on this package)
+- `@rebasepro/core` — Core framework (uses this for shared UI)

package/dist/components/Autocomplete.d.ts

@@ -12,10 +12,10 @@ export declare const useAutoComplete: ({ ref }: {
     autoCompleteOpen: boolean;
     setAutoCompleteOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
-export declare function Autocomplete({ children, open, setOpen, className }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete({ children, open, setOpen, className }: AutocompleteProps): React.JSX.Element;
 export type AutocompleteItemProps = {
     children: React.ReactNode;
     onClick?: () => void;
     className?: string;
 };
-export declare const AutocompleteItem: React.NamedExoticComponent<AutocompleteItemProps>;
+export declare const AutocompleteItem: React.MemoExoticComponent<({ children, onClick, className }: AutocompleteItemProps) => React.JSX.Element>;

package/dist/components/BooleanSwitchWithLabel.d.ts

@@ -14,4 +14,4 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
  * Simple boolean switch.
  *
  */
-export declare const BooleanSwitchWithLabel: ({ value, position, size, invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth, inputClassName, ...props }: BooleanSwitchWithLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BooleanSwitchWithLabel: ({ value, position, size, invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth, inputClassName, ...props }: BooleanSwitchWithLabelProps) => React.JSX.Element;

package/dist/components/Checkbox.d.ts

@@ -10,4 +10,4 @@ export interface CheckboxProps {
     color?: "primary" | "secondary";
     "aria-label"?: string;
 }
-export declare const Checkbox: React.MemoExoticComponent<({ id, checked, indeterminate, padding, disabled, size, onCheckedChange, color, "aria-label": ariaLabel }: CheckboxProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Checkbox: React.MemoExoticComponent<({ id, checked, indeterminate, padding, disabled, size, onCheckedChange, color, "aria-label": ariaLabel }: CheckboxProps) => React.JSX.Element>;

package/dist/components/Chip.d.ts

@@ -23,4 +23,4 @@ export interface ChipProps {
 /**
  * @group Preview components
  */
-export declare function Chip({ children, colorScheme, error, outlined, onClick, icon, size, className, style }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chip({ children, colorScheme, error, outlined, onClick, icon, size, className, style }: ChipProps): React.JSX.Element;

package/dist/components/CircularProgress.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 export type CircularProgressProps = {
     size?: "smallest" | "small" | "medium" | "large";
     className?: string;
 };
-export declare function CircularProgress({ size, className }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function CircularProgress({ size, className }: CircularProgressProps): React.JSX.Element;

package/dist/components/CircularProgressCenter.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { CircularProgressProps } from "./CircularProgress";
 /**
  *
@@ -8,4 +9,4 @@ import { CircularProgressProps } from "./CircularProgress";
  */
 export declare function CircularProgressCenter({ text, ...props }: CircularProgressProps & {
     text?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/components/Collapse.d.ts

@@ -5,5 +5,5 @@ interface CollapseProps {
     in?: boolean;
     duration?: number;
 }
-export declare const Collapse: React.MemoExoticComponent<({ children, className, in: isOpen, duration }: CollapseProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Collapse: React.MemoExoticComponent<({ children, className, in: isOpen, duration }: CollapseProps) => React.JSX.Element>;
 export {};

package/dist/components/ColorPicker.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ChipColorKey } from "./Chip";
 export interface ColorPickerProps {
     /**
@@ -27,4 +28,4 @@ export interface ColorPickerProps {
  *
  * @group Form components
  */
-export declare function ColorPicker({ value, onChange, size, allowClear, disabled }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorPicker({ value, onChange, size, allowClear, disabled }: ColorPickerProps): React.JSX.Element;

package/dist/components/DebouncedTextField.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import { TextFieldProps } from "./index";
-export declare function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DebouncedTextField<T extends string | number>(props: TextFieldProps<T>): React.JSX.Element;

package/dist/components/Dialog.d.ts

@@ -20,6 +20,7 @@ export type DialogProps = {
      */
     disableInitialFocus?: boolean;
     portalContainer?: HTMLElement | null;
+    "aria-describedby"?: string;
 };
 declare const widthClasses: {
     xs: string;
@@ -35,5 +36,5 @@ declare const widthClasses: {
     "7xl": string;
     full: string;
 };
-export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus, portalContainer }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus, portalContainer, "aria-describedby": ariaDescribedby }: DialogProps) => React.JSX.Element;
 export {};

package/dist/components/DialogActions.d.ts

@@ -4,4 +4,4 @@ export declare function DialogActions({ children, position, translucent, classNa
     position?: "sticky" | "absolute";
     translucent?: boolean;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/components/DialogContent.d.ts

@@ -4,4 +4,4 @@ export declare function DialogContent({ children, className, fullHeight, include
     includeMargin?: boolean;
     fullHeight?: boolean;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/components/DialogTitle.d.ts

@@ -7,4 +7,4 @@ export type DialogContentProps = TypographyProps & {
     includeMargin?: boolean;
     variant?: TypographyVariant;
 };
-export declare function DialogTitle({ children, hidden, className, variant, gutterBottom, includeMargin, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogTitle({ children, hidden, className, variant, gutterBottom, includeMargin, ...props }: DialogContentProps): React.JSX.Element;

package/dist/components/ErrorBoundary.d.ts

@@ -26,7 +26,7 @@ export declare class ErrorBoundary extends React.Component<PropsWithChildren<Err
     private handleReset;
     private handleReload;
     private toggleDetails;
-    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
     private renderInline;
     private renderFullPage;
 }

package/dist/components/ExpandablePanel.d.ts

@@ -9,4 +9,4 @@ export declare function ExpandablePanel({ title, children, invisible, expanded,
     asField?: boolean;
     className?: string;
     innerClassName?: string;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): React.JSX.Element;

package/dist/components/FileUpload.d.ts

@@ -20,4 +20,4 @@ export type FileUploadProps = {
     preventDropOnDocument?: boolean;
     size?: "small" | "medium" | "large";
 };
-export declare function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, children, preventDropOnDocument, size }: React.PropsWithChildren<FileUploadProps>): import("react/jsx-runtime").JSX.Element;
+export declare function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, children, preventDropOnDocument, size }: React.PropsWithChildren<FileUploadProps>): React.JSX.Element;

package/dist/components/InfoLabel.d.ts

@@ -2,4 +2,4 @@ import React from "react";
 export declare function InfoLabel({ children, mode }: {
     children: React.ReactNode;
     mode?: "info" | "warn";
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/components/LoadingButton.d.ts

@@ -4,4 +4,4 @@ export type LoadingButtonProps<P extends React.ElementType> = ButtonProps<P> & {
     startIcon?: React.ReactNode;
     loading?: boolean;
 };
-export declare function LoadingButton<P extends React.ElementType = "button">({ children, loading, disabled, onClick, startIcon, ...props }: LoadingButtonProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function LoadingButton<P extends React.ElementType = "button">({ children, loading, disabled, onClick, startIcon, ...props }: LoadingButtonProps<P>): React.JSX.Element;

package/dist/components/Menu.d.ts

@@ -20,4 +20,4 @@ export type MenuItemProps = {
     onClick?: (event: React.MouseEvent) => void;
     className?: string;
 };
-export declare const MenuItem: React.MemoExoticComponent<({ children, dense, disabled, onClick, className }: MenuItemProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const MenuItem: React.MemoExoticComponent<({ children, dense, disabled, onClick, className }: MenuItemProps) => React.JSX.Element>;

package/dist/components/Menubar.d.ts

@@ -3,19 +3,19 @@ export declare function Menubar({ children, onSelect, className }: {
     children: React.ReactNode;
     onSelect?: (event: React.SyntheticEvent) => void;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarMenu({ children }: {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarTrigger({ children, onSelect, className }: {
     children: React.ReactNode;
     onSelect?: (event: React.SyntheticEvent) => void;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarPortal({ children, portalContainer }: {
     children: React.ReactNode;
     portalContainer?: HTMLElement | null;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarContent({ children, className, align, sideOffset, alignOffset, onSelect, ...rest }: {
     children: React.ReactNode;
     className?: string;
@@ -23,58 +23,58 @@ export declare function MenubarContent({ children, className, align, sideOffset,
     align?: "start" | "center" | "end";
     sideOffset?: number;
     alignOffset?: number;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarItem({ children, leftPadding, className, disabled, onSelect, ...rest }: {
     children: React.ReactNode;
     onSelect?: (event: Event) => void;
     leftPadding?: boolean;
     className?: string;
     disabled?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarSeparator({ children, className, ...rest }: {
     children?: React.ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarSub({ children, ...rest }: {
     children?: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarSubTrigger({ children, className, onSelect, ...rest }: {
     children?: React.ReactNode;
     onSelect?: (event: React.SyntheticEvent) => void;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarSubContent({ children, alignOffset, className, onSelect, ...rest }: {
     children?: React.ReactNode;
     onSelect?: (event: React.SyntheticEvent) => void;
     alignOffset?: number;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarCheckboxItem({ children, checked, onCheckedChange, className, onSelect, ...rest }: {
     children?: React.ReactNode;
     onSelect?: (event: Event) => void;
     checked?: boolean;
     onCheckedChange?: () => void;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarItemIndicator({ children, className, ...rest }: {
     children?: React.ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarRadioGroup({ children, className, value, onValueChange, onSelect, ...rest }: {
     children?: React.ReactNode;
     onSelect?: (event: React.SyntheticEvent) => void;
     value?: string;
     onValueChange?: (value: string) => void;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarRadioItem({ children, className, value, onSelect, ...rest }: {
     children?: React.ReactNode;
     onSelect?: (event: Event) => void;
     value: string;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export declare function MenubarShortcut({ children, className, ...rest }: {
     children?: React.ReactNode;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarSubTriggerIndicator(): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
+export declare function MenubarSubTriggerIndicator(): React.JSX.Element;

package/dist/components/MultiSelect.d.ts

@@ -44,5 +44,5 @@ export interface MultiSelectItemProps<T extends MultiSelectValue = string> {
     children?: React.ReactNode;
     className?: string;
 }
-export declare const MultiSelectItem: React.MemoExoticComponent<(<T extends MultiSelectValue = string>({ children, value, className }: MultiSelectItemProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+export declare const MultiSelectItem: React.MemoExoticComponent<(<T extends MultiSelectValue = string>({ children, value, className }: MultiSelectItemProps<T>) => React.JSX.Element)>;
 export {};

package/dist/components/Paper.d.ts

@@ -3,4 +3,4 @@ export declare function Paper({ children, style, className }: {
     children: React.ReactNode;
     style?: React.CSSProperties;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/components/Popover.d.ts

@@ -21,4 +21,4 @@ export interface PopoverProps {
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
-export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, portalContainer, className, onMouseEnter, onMouseLeave }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, portalContainer, className, onMouseEnter, onMouseLeave }: PopoverProps): React.JSX.Element;

package/dist/components/ResizablePanels.d.ts

@@ -15,4 +15,4 @@ export type ResizablePanelsProps = {
     className?: string;
     stacked?: boolean;
 };
-export declare function ResizablePanels({ firstPanel, secondPanel, showFirstPanel, showSecondPanel, panelSizePercent, onPanelSizeChange, minPanelSizePx, orientation, animateLayout, className, stacked }: ResizablePanelsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResizablePanels({ firstPanel, secondPanel, showFirstPanel, showSecondPanel, panelSizePercent, onPanelSizeChange, minPanelSizePx, orientation, animateLayout, className, stacked }: ResizablePanelsProps): React.JSX.Element;

package/dist/components/SearchBar.d.ts

@@ -22,5 +22,5 @@ interface SearchBarProps {
      */
     initialValue?: string;
 }
-export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, innerClassName, className, autoFocus, disabled, loading, inputRef, initialValue }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, innerClassName, className, autoFocus, disabled, loading, inputRef, initialValue }: SearchBarProps): React.JSX.Element;
 export {};

package/dist/components/Select.d.ts

@@ -34,10 +34,10 @@ export type SelectItemProps<T extends SelectValue = string> = {
     disabled?: boolean;
     className?: string;
 };
-export declare const SelectItem: React.MemoExoticComponent<(<T extends SelectValue = string>({ value, children, disabled, className }: SelectItemProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+export declare const SelectItem: React.MemoExoticComponent<(<T extends SelectValue = string>({ value, children, disabled, className }: SelectItemProps<T>) => React.JSX.Element)>;
 export type SelectGroupProps = {
     label: React.ReactNode;
     children: React.ReactNode;
     className?: string;
 };
-export declare const SelectGroup: React.NamedExoticComponent<SelectGroupProps>;
+export declare const SelectGroup: React.MemoExoticComponent<({ label, children, className }: SelectGroupProps) => React.JSX.Element>;

package/dist/components/Separator.d.ts

@@ -2,4 +2,4 @@ export declare function Separator({ orientation, decorative, className }: {
     orientation: "horizontal" | "vertical";
     decorative?: boolean;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/Skeleton.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 export type SkeletonProps = {
     width?: number;
     height?: number;
     className?: string;
 };
-export declare function Skeleton({ width, height, className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ width, height, className }: SkeletonProps): React.JSX.Element;

package/dist/components/Table.d.ts

@@ -4,24 +4,24 @@ export type TableProps = {
     className?: string;
     style?: React.CSSProperties;
 } & React.TableHTMLAttributes<HTMLTableElement>;
-export declare const Table: React.MemoExoticComponent<({ children, className, style, ...rest }: TableProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Table: React.MemoExoticComponent<({ children, className, style, ...rest }: TableProps) => React.JSX.Element>;
 export type TableBodyProps = {
     children?: React.ReactNode;
     className?: string;
 } & React.HTMLAttributes<HTMLTableSectionElement>;
-export declare const TableBody: React.MemoExoticComponent<({ children, className, ...rest }: TableBodyProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TableBody: React.MemoExoticComponent<({ children, className, ...rest }: TableBodyProps) => React.JSX.Element>;
 export type TableHeaderProps = {
     children?: React.ReactNode;
     className?: string;
 } & React.HTMLAttributes<HTMLTableSectionElement>;
-export declare const TableHeader: React.MemoExoticComponent<({ children, className, ...rest }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TableHeader: React.MemoExoticComponent<({ children, className, ...rest }: TableHeaderProps) => React.JSX.Element>;
 export type TableRowProps = {
     children?: React.ReactNode;
     className?: string;
     onClick?: React.MouseEventHandler<any>;
     style?: React.CSSProperties;
 } & React.HTMLAttributes<HTMLTableRowElement>;
-export declare const TableRow: React.MemoExoticComponent<({ children, className, onClick, style, ...rest }: TableRowProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TableRow: React.MemoExoticComponent<({ children, className, onClick, style, ...rest }: TableRowProps) => React.JSX.Element>;
 export type TableCellProps = {
     children?: React.ReactNode;
     header?: boolean;
@@ -31,4 +31,4 @@ export type TableCellProps = {
     align?: "left" | "center" | "right";
     colspan?: number;
 } & React.HTMLAttributes<HTMLTableCellElement>;
-export declare const TableCell: React.MemoExoticComponent<({ children, header, scope, align, className, style, colspan, ...rest }: TableCellProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const TableCell: React.MemoExoticComponent<({ children, header, scope, align, className, style, colspan, ...rest }: TableCellProps) => React.JSX.Element>;

package/dist/components/Tabs.d.ts

@@ -8,7 +8,7 @@ export type TabsProps = {
     variant?: TabVariant;
     onValueChange: (value: string) => void;
 };
-export declare function Tabs({ value, onValueChange, className, innerClassName, variant, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs({ value, onValueChange, className, innerClassName, variant, children }: TabsProps): React.JSX.Element;
 export type TabProps = {
     value: string;
     className?: string;
@@ -16,4 +16,4 @@ export type TabProps = {
     children: React.ReactNode;
     disabled?: boolean;
 };
-export declare function Tab({ value, className, innerClassName, children, disabled }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tab({ value, className, innerClassName, children, disabled }: TabProps): React.JSX.Element;

package/dist/components/TextField.d.ts

@@ -27,7 +27,7 @@ export type TextFieldProps<T extends string | number> = {
      * @default 1
      */
     minRows?: number | string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value">;
 export declare const TextField: React.ForwardRefExoticComponent<{
     type?: InputType;
     value?: string | number | undefined;
@@ -55,4 +55,4 @@ export declare const TextField: React.ForwardRefExoticComponent<{
      * @default 1
      */
     minRows?: number | string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ToggleButtonGroup.d.ts

@@ -27,4 +27,4 @@ export type ToggleButtonGroupProps<T extends string = string> = {
  * A toggle button group component for selecting one option from a set.
  * Displays options as buttons in a horizontal row with active state styling.
  */
-export declare function ToggleButtonGroup<T extends string = string>({ value, onValueChange, options, className }: ToggleButtonGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleButtonGroup<T extends string = string>({ value, onValueChange, options, className }: ToggleButtonGroupProps<T>): React.JSX.Element;

package/dist/components/Tooltip.d.ts

@@ -16,4 +16,4 @@ export type TooltipProps = {
     container?: HTMLElement;
     style?: React.CSSProperties;
 };
-export declare const Tooltip: ({ open, defaultOpen, side, delayDuration, sideOffset, align, onOpenChange, title, tooltipClassName, tooltipStyle, children, asChild, container, className, style }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ open, defaultOpen, side, delayDuration, sideOffset, align, onOpenChange, title, tooltipClassName, tooltipStyle, children, asChild, container, className, style }: TooltipProps) => React.JSX.Element;