@rebasepro/ui 0.4.0 → 0.5.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/index.es.js

@@ -869,9 +869,10 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
     "min-h-[64px]": size === "large"
   }, size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
     if (props.allowIndeterminate) {
-      if (value === null || value === void 0) onValueChange?.(true);
-      else if (value) onValueChange?.(false);
-      else onValueChange?.(null);
+      const onChange = onValueChange;
+      if (value === null || value === void 0) onChange?.(true);
+      else if (value) onChange?.(false);
+      else onChange?.(null);
     } else {
       onValueChange?.(!value);
     }