pelatform-ui 1.2.8 → 1.3.0

package/README.md

@@ -3,12 +3,18 @@
 [![Version](https://img.shields.io/npm/v/pelatform-ui.svg)](https://www.npmjs.com/package/pelatform-ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-A Modern and Minimal React UI Library built with TailwindCSS. The main package that provides access to all Pelatform UI components, hooks, and utilities through a unified interface.
+**A Modern and Minimal React UI Library built with TailwindCSS.**
+
+The main package that provides all Pelatform UI components, hooks, utilities, and styles.
 
 ## Installation
 
 ```bash
+# Install the main package directly
 bun add pelatform-ui
+
+# Or install the scoped package (recommended)
+bun add @pelatform/ui
 ```
 
 ### Peer Dependencies
@@ -16,32 +22,16 @@ bun add pelatform-ui
 Make sure you have these installed:
 
 ```bash
-bun add react react-dom @tanstack/react-query lucide-react motion next-themes sonner
-```
-
-### Import Styles
-
-```typescript
-import "pelatform-ui/css";
+bun add react react-dom
 ```
 
-## Package Structure
+## Package Overview
 
-pelatform-ui is the main entry point that consolidates all Pelatform UI packages:
-
-- **@pelatform/ui.components** - All UI components (172 components)
-  - Animation (18 components)
-  - Base (77 headless components)
-  - Radix (77 styled components)
-- **@pelatform/ui.hook** - React hooks (18 hooks)
-- **Custom components** - Ready-to-use layouts, navigation, providers, and utilities
+`pelatform-ui` is the main package containing all UI components, hooks, and styles for the Pelatform UI library.
 
 ## Import Paths
 
 ```typescript
-// Main exports (utilities, types, icons)
-import { cn, cva } from "pelatform-ui";
-
 // React hooks
 import { useHydrated, useMobile, useMediaQuery } from "pelatform-ui/hooks";
 
@@ -59,10 +49,174 @@ import { Button, Input, Select } from "pelatform-ui/base";
 import { Card, DataGrid, Calendar } from "pelatform-ui/radix";
 
 // Custom Pelatform components
-import { SiteHeader, SiteFooter, CommandMenu } from "pelatform-ui/components";
+import { Icons, Logo } from "pelatform-ui/components";
 
 // Styles
-import "pelatform-ui/css";
+import "@pelatform/ui/css";
+```
+
+## Entry Points
+
+This package provides 6 organized entry points:
+
+### Animation (`./animation`)
+
+14 animation components for text effects, number animations, layout effects, and backgrounds:
+
+```typescript
+import {
+  ShimmeringText,
+  TextReveal,
+  TypingText,
+  VideoText,
+  WordRotate,
+  SvgText,
+  CountingNumber,
+  SlidingNumber,
+  Marquee,
+  GitHubButton,
+  AvatarGroup,
+  GradientBackground,
+  GridBackground,
+  HoverBackground,
+} from "pelatform-ui/animation";
+```
+
+### Base (`./base`)
+
+77 headless components built on Base UI for complete styling control:
+
+```typescript
+import {
+  // Forms
+  Button,
+  Input,
+  Textarea,
+  Select,
+  Checkbox,
+  Radio,
+  Switch,
+  Slider,
+
+  // Selection
+  Combobox,
+  Listbox,
+  Autocomplete,
+
+  // Layout
+  Accordion,
+  Tabs,
+  Dialog,
+  Popover,
+  Tooltip,
+
+  // Data
+  Table,
+  Pagination,
+  Avatar,
+  Badge,
+} from "pelatform-ui/base";
+```
+
+### Components (`./components`)
+
+Custom Pelatform components:
+
+```typescript
+import { Icons, Logo } from "pelatform-ui/components";
+```
+
+### Hooks (`./hooks`)
+
+18 React hooks for common use cases:
+
+```typescript
+import {
+  // Analytics
+  useAnalytics,
+
+  // DOM Interactions
+  useBodyClass,
+  useCopyToClipboard,
+  useFileUpload,
+  useScrollPosition,
+  useSliderInput,
+
+  // Detection
+  useHydrated,
+  useIntersectionObserver,
+  useIsMac,
+  useIsMobile,
+  useMediaQuery,
+  useMounted,
+  useMutationObserver,
+  useViewport,
+
+  // Features
+  useMenu,
+  useRecaptchaV2,
+  useRemoveGAParams,
+} from "pelatform-ui/hooks";
+```
+
+### Radix (`./radix`)
+
+77 pre-styled Radix UI components:
+
+```typescript
+import {
+  // Layout & Structure
+  Accordion,
+  Card,
+  Resizable,
+  Separator,
+
+  // Navigation
+  Breadcrumb,
+  Command,
+  ContextMenu,
+  DropdownMenu,
+  Menubar,
+  NavigationMenu,
+  Tabs,
+
+  // Forms
+  Checkbox,
+  Combobox,
+  Form,
+  Input,
+  Label,
+  RadioGroup,
+  Select,
+  Slider,
+  Switch,
+  Textarea,
+
+  // Overlays
+  AlertDialog,
+  Dialog,
+  Drawer,
+  HoverCard,
+  Popover,
+  Sheet,
+  Toast,
+
+  // Feedback
+  Alert,
+  Progress,
+  Skeleton,
+  Sonner,
+
+  // Data Display
+  Avatar,
+  Badge,
+  Calendar,
+  Carousel,
+  Chart,
+  DataGrid,
+  Table,
+  Tree,
+} from "pelatform-ui/radix";
 ```
 
 ## Quick Start
@@ -70,7 +224,7 @@ import "pelatform-ui/css";
 ```typescript
 import { Card, Button, Input } from "pelatform-ui/radix";
 import { useHydrated } from "pelatform-ui/hooks";
-import "pelatform-ui/css";
+import "@pelatform/ui/css";
 
 function App() {
   const hydrated = useHydrated();
@@ -86,86 +240,41 @@ function App() {
 }
 ```
 
-## Custom Components
-
-### Layout Components
-
-- **Auth** - Authentication page layout
-- **Blank** - Minimal blank layout
-- **Body** - Main content body
-- **ComingSoon** - Coming soon page
-- **Error** - Error page layout
-- **Grid** - Grid-based layout
-- **Section** - Content section
-- **SiteHeader** - Sticky header with blur
-- **SiteFooter** - Site footer
-- **Wrapper** - Container wrapper
-
-### Navigation Components
-
-- **BackLink** - Back navigation link
-- **CommandMenu** - Command palette
-- **MainNav** - Main navigation menu
-- **MobileNav** - Mobile navigation
-
-### Feedback Components
-
-- **Alert** - Alert notifications
-- **Dialog** - Modal dialog
-- **ScreenLoader** - Loading screen
-
-### UI Components
-
-- **Announcement** - Announcement banner with tags
-- **BackgroundPaths** - Decorative backgrounds
-- **Book** - Book/document display
-- **DotsPattern** - Dot pattern background
-- **GridBackground** - Grid pattern background
-- **HexagonBadge** - Hexagon-shaped badge
-- **ImageInput** - Image upload input
-- **LanguageSwitcher** - Language selector
-- **Logo** - Brand logo
-- **ModeSwitcher** - Theme mode toggle
-- **MovingBorder** - Animated border effect
-- **Toolbar** - Toolbar component
-- **UserAvatar** - User avatar display
-
-### Provider Components
-
-- **QueryProvider** - TanStack Query provider
-- **ThemeProvider** - Theme management (next-themes)
+## Styling
 
-### MDX Components
+Import the CSS in your app:
 
-- **CodeDisplay** - Code snippet display
-- **Download** - Download link
-- **Link** - Custom link
-- **Video** - Video embed
-- **Wrapper** - MDX content wrapper
-- **YouTube** - YouTube embed
+```typescript
+import "@pelatform/ui/css";
+```
 
-### Utility Components
+CSS includes:
 
-- **Fonts** - Font configuration
-- **Shared** - Shared utilities
+- Theme variables
+- Component styles
+- Animation utilities
+- Pattern backgrounds
+- Custom transitions
 
-## Theme Management
+You can also import individual CSS files:
 
 ```typescript
-import { ThemeProvider } from "pelatform-ui/components";
-
-function App({ children }) {
-  return (
-    <ThemeProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-    >
-      {children}
-    </ThemeProvider>
-  );
-}
+// Main theme (includes animations)
+import "@pelatform/ui/css";
+
+// Color variants
+import "@pelatform/ui/color/slate";
+import "@pelatform/ui/color/gray";
+import "@pelatform/ui/color/neutral";
+import "@pelatform/ui/color/stone";
+import "@pelatform/ui/color/zinc";
+
+// Theme styles
+import "@pelatform/ui/styles/style-vega";
+import "@pelatform/ui/styles/style-nova";
+import "@pelatform/ui/styles/style-mira";
+import "@pelatform/ui/styles/style-maia";
+import "@pelatform/ui/styles/style-lyra";
 ```
 
 ## Hooks
@@ -213,36 +322,24 @@ function App({ children }) {
 - **useHydrated** - SSR-safe hydration detection
 - **useRemoveGAParams** - GA parameter cleanup
 
-## Styling
+## TypeScript Support
 
-The package uses Tailwind CSS with custom theme configuration. Import the CSS in your app:
+Full TypeScript support with comprehensive type definitions for all components and hooks:
 
 ```typescript
-import "pelatform-ui/css";
+import type { ButtonProps } from "pelatform-ui/base";
+import type { DataGridProps } from "pelatform-ui/radix";
 ```
 
-CSS includes:
-
-- Theme variables
-- Component styles
-- Animation utilities
-- Pattern backgrounds
-- Custom transitions
-
-## TypeScript Support
-
-Full TypeScript support with comprehensive type definitions for all components and hooks.
-
 ## Features
 
-- 172+ total components across all packages
+- 170+ production-ready components
 - 18 React hooks for common use cases
 - Full dark mode support
 - Responsive design
 - Accessibility (WCAG 2.1)
 - SSR-safe implementations
 - Tree-shakeable exports
-- TanStack Query integration
 - Next.js optimized
 - Tailwind CSS styling
 
@@ -251,27 +348,64 @@ Full TypeScript support with comprehensive type definitions for all components a
 ### Production Dependencies
 
 - `class-variance-authority` - Component variants
-- `clsx` - Conditional className
-- `tailwind-merge` - Tailwind class merging
+- `recharts` - Chart components
 - `tw-animate-css` - Animation utilities
 
 ### Peer Dependencies
 
 - `react`
 - `react-dom`
-- `@tanstack/react-query`
+- `@base-ui/react`
+- `@dnd-kit/core`
+- `@dnd-kit/modifiers`
+- `@dnd-kit/sortable`
+- `@dnd-kit/utilities`
+- `@headless-tree/core`
+- `@pelatform/utils`
+- `@tanstack/react-table`
+- `cmdk`
+- `date-fns`
+- `embla-carousel-react`
+- `input-otp`
 - `lucide-react`
 - `motion`
 - `next-themes`
+- `radix-ui`
+- `react-day-picker`
+- `react-phone-number-input`
+- `react-resizable-panels`
 - `sonner`
+- `vaul`
+
+## Related Packages
+
+- **[@pelatform/ui](https://www.npmjs.com/package/@pelatform/ui)** - Scope package with organized imports
+- **[@pelatform/mcp.ui](https://github.com/pelatformlabs/ui/tree/main/packages/mcp)** - MCP server for documentation
+
+## Choosing Between Base and Radix
+
+- **Use Base components** when:
+  - Building a custom design system
+  - Need complete styling control
+  - Want minimal bundle size
+  - Creating brand-specific components
+
+- **Use Radix components** when:
+  - Need pre-styled components
+  - Building prototypes quickly
+  - Want consistent styling
+  - Don't have strict design requirements
+
+- **Use both** - Import from both categories in the same application
 
 ## Links
 
 - [npm Package](https://www.npmjs.com/package/pelatform-ui)
-- [Contributing Guide](../../../CONTRIBUTING.md)
-- [Code of Conduct](../../../CODE_OF_CONDUCT.md)
-- [License](../../../LICENSE)
+- [GitHub Repository](https://github.com/pelatformlabs/ui)
+- [Contributing Guide](../../CONTRIBUTING.md)
+- [Code of Conduct](../../CODE_OF_CONDUCT.md)
+- [License](../../LICENSE)
 
 ## License
 
-MIT © [Pelatform Inc.](../../../LICENSE)
+MIT © [Pelatform Inc.](../../LICENSE)

package/css/theme.css

@@ -1,8 +1,6 @@
 @import "tw-animate-css";
 
-@import "@pelatform/ui.components/css";
-
-@import "./shadcn/neutral.css";
+@import "./color/neutral.css";
 @import "./animations.css";
 
 /* start: shadcn/create styles */
@@ -26,10 +24,6 @@
 @custom-variant fixed (&:is(.layout-fixed *));
 
 :root {
-  /** Dashboard **/
-  --sidebar-width: 280px;
-  --header-height: 60px;
-
   /* Extended colors */
   --success: var(--color-emerald-500);
   --success-foreground: var(--color-emerald-900);
@@ -39,17 +33,6 @@
   --warning-foreground: var(--color-yellow-900);
   --invert: var(--color-zinc-900);
   --invert-foreground: var(--color-zinc-50);
-
-  --surface: oklch(0.98 0 0);
-  --surface-foreground: var(--foreground);
-  --code: var(--surface);
-  --code-foreground: var(--surface-foreground);
-  --code-highlight: oklch(0.96 0 0);
-  --code-number: oklch(0.56 0 0);
-
-  /** Grid colors **/
-  --grid-base-color: rgba(66, 71, 112, 0.09);
-  --grid-dots-color: rgba(66, 71, 112, 0.09);
 }
 
 .dark {
@@ -62,17 +45,6 @@
   --warning-foreground: var(--color-yellow-600);
   --invert: var(--color-zinc-700);
   --invert-foreground: var(--color-zinc-50);
-
-  --surface: oklch(0.2 0 0);
-  --surface-foreground: oklch(0.708 0 0);
-  --code: var(--surface);
-  --code-foreground: var(--surface-foreground);
-  --code-highlight: oklch(0.27 0 0);
-  --code-number: oklch(0.72 0 0);
-
-  /** Grid color **/
-  --grid-base-color: rgba(255, 255, 255, 0.09);
-  --grid-dots-color: rgba(255, 255, 255, 0.09);
 }
 
 @theme inline {
@@ -98,13 +70,6 @@
   --color-warning-foreground: var(--warning-foreground);
   --color-invert: var(--invert);
   --color-invert-foreground: var(--invert-foreground);
-
-  --color-surface: var(--surface);
-  --color-surface-foreground: var(--surface-foreground);
-  --color-code: var(--code);
-  --color-code-foreground: var(--code-foreground);
-  --color-code-highlight: var(--code-highlight);
-  --color-code-number: var(--code-number);
 }
 
 /** Custom Scrollbar **/
@@ -142,14 +107,6 @@
   @apply border-border/50 dark:border-border;
 }
 
-@utility border-ghost {
-  @apply after:border-border relative after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten;
-}
-
-@utility section-soft {
-  @apply from-background to-surface/40 dark:bg-background 3xl:fixed:bg-none bg-gradient-to-b;
-}
-
 @utility theme-container {
   @apply font-sans;
 }
@@ -188,18 +145,3 @@
     border-radius: 5px;
   }
 }
-
-@utility step {
-  counter-increment: step;
-
-  &:before {
-    @apply border-background bg-muted mr-2 inline-flex size-6 items-center justify-center rounded-full text-center -indent-px font-mono text-sm font-medium md:absolute md:mt-[-4px] md:ml-[-50px] md:size-9 md:border-4;
-    content: counter(step);
-  }
-}
-
-@utility extend-touch-target {
-  @media (pointer: coarse) {
-    @apply relative touch-manipulation after:absolute after:-inset-2;
-  }
-}