@pol-studios/ui 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,351 @@
+# @pol-studios/ui
+
+> UI components for POL applications
+
+A comprehensive Radix-UI based component library following shadcn/ui patterns. Includes 50+ primitives, complex components, charts, forms, navigation, and data display components.
+
+## Installation
+
+```bash
+pnpm add @pol-studios/ui
+```
+
+## Peer Dependencies
+
+```bash
+pnpm add react react-dom @pol-studios/auth @pol-studios/db @pol-studios/filters @pol-studios/hooks @pol-studios/utils
+```
+
+### Optional Dependencies
+Some components require additional packages:
+
+```bash
+# For date picker
+pnpm add react-day-picker
+
+# For command palette
+pnpm add cmdk
+
+# For mobile drawer
+pnpm add vaul
+
+# For resizable panels
+pnpm add react-resizable-panels
+
+# For carousel
+pnpm add embla-carousel-react
+
+# For charts
+pnpm add recharts
+
+# For theme support
+pnpm add next-themes
+```
+
+## Quick Start
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent } from "@pol-studios/ui";
+
+function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button variant="default">Click me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Subpath Exports
+
+| Path | Description |
+|------|-------------|
+| `@pol-studios/ui` | Primitives (shadcn components) |
+| `@pol-studios/ui/primitives` | Base shadcn/ui components |
+| `@pol-studios/ui/components` | Complex application components |
+| `@pol-studios/ui/forms` | Form components (MultiForm, FileDropzone) |
+| `@pol-studios/ui/nav` | Navigation components |
+| `@pol-studios/ui/navbar` | Navbar and menu components |
+| `@pol-studios/ui/data` | Data display (DataTable, EntityTable) |
+| `@pol-studios/ui/feedback` | Feedback components (Toast, Spinner, Alert) |
+| `@pol-studios/ui/auth` | Authentication forms |
+| `@pol-studios/ui/providers` | Context providers |
+| `@pol-studios/ui/contexts` | React contexts |
+| `@pol-studios/ui/hooks` | UI-specific hooks |
+| `@pol-studios/ui/cards` | Card components |
+| `@pol-studios/ui/charts` | Chart components (Recharts-based) |
+| `@pol-studios/ui/adapters` | Router and data adapters |
+| `@pol-studios/ui/types` | TypeScript types |
+| `@pol-studios/ui/file` | File upload components |
+| `@pol-studios/ui/crud` | CRUD operation components |
+| `@pol-studios/ui/components/chat-agent` | Chat/AI agent components |
+| `@pol-studios/ui/styles/globals.css` | Global CSS styles |
+
+## API Reference
+
+### Primitives (shadcn/ui)
+
+Base components built on Radix UI.
+
+```tsx
+import {
+  // Layout
+  Card, CardHeader, CardTitle, CardContent, CardFooter,
+  Separator, ScrollArea, Collapsible, Tabs,
+
+  // Forms
+  Button, Input, Textarea, Checkbox, Switch, Slider,
+  Select, RadioGroup, Label, Form,
+
+  // Overlays
+  Dialog, Sheet, Popover, Tooltip, DropdownMenu,
+  AlertDialog, ContextMenu, HoverCard,
+
+  // Feedback
+  Alert, Badge, Progress, Skeleton, Spinner,
+  Toast, Toaster,
+
+  // Navigation
+  Breadcrumb, NavigationMenu, Menubar, Pagination,
+
+  // Data Display
+  Table, Avatar, Accordion, Carousel,
+} from "@pol-studios/ui";
+```
+
+### Components
+
+Complex application components.
+
+```tsx
+import {
+  // Forms
+  Input, Select, Checkbox, SearchInput, DatePicker, DateRangePicker,
+  InputWithTagging, OptionalInput,
+
+  // Display
+  Modal, Drawer, SideSheet, Tooltip, Dropdown, Menu,
+  Heading, Text, Icon, Skeleton, Spinner,
+
+  // Tables
+  Table, TableHead, TableRow, TableCell, Pagination,
+  DataTable, EntityTableView, EntityTableWithPagination,
+
+  // Utility
+  AttachmentUploader, SortableList, EntityDropdown,
+  NotificationIcon, SavingIndicator, OfflineBanner,
+
+  // SDK Components
+  AddUserDropdown, PatternDropdown,
+} from "@pol-studios/ui/components";
+```
+
+### Data Display
+
+```tsx
+import { DataTable, EntityTableView } from "@pol-studios/ui/data";
+
+<DataTable
+  data={items}
+  columns={[
+    { key: "name", header: "Name" },
+    { key: "status", header: "Status", badge: true },
+  ]}
+  actions={[
+    { label: "Edit", onClick: handleEdit },
+  ]}
+/>
+
+<EntityTableView
+  columns={tableColumns}
+  data={entities}
+  onRowClick={handleRowClick}
+/>
+```
+
+### Charts
+
+Recharts-based chart components.
+
+```tsx
+import {
+  CircleChartCard,
+  ChartGenerator,
+  RechartsBarChart,
+  RechartsPieChart,
+  RechartsLineChart,
+  RechartsAreaChart,
+  processFieldData,
+  formatNumber,
+} from "@pol-studios/ui/charts";
+
+<CircleChartCard
+  title="Distribution"
+  data={chartData}
+  config={chartConfig}
+/>
+
+<ChartGenerator
+  data={rawData}
+  type="bar"
+  config={generatorConfig}
+/>
+```
+
+### Navigation
+
+```tsx
+import {
+  BottomNav,
+  MenuToggle,
+  UserProfileName,
+  UserProfilePicture,
+  PageHeader,
+} from "@pol-studios/ui/nav";
+
+<PageHeader
+  title="Dashboard"
+  breadcrumbs={[{ label: "Home", href: "/" }]}
+/>
+```
+
+### Forms
+
+```tsx
+import { MultiForm, MultiStepForm, FileDropzone } from "@pol-studios/ui/forms";
+
+<MultiStepForm
+  steps={[
+    { title: "Basic Info", component: BasicInfoStep },
+    { title: "Details", component: DetailsStep },
+  ]}
+  onComplete={handleSubmit}
+/>
+
+<FileDropzone
+  accept={{ "image/*": [".png", ".jpg"] }}
+  onDrop={handleFiles}
+/>
+```
+
+### Authentication
+
+```tsx
+import {
+  LoginForm,
+  SignUpForm,
+  ForgotPasswordForm,
+  UpdatePasswordForm,
+} from "@pol-studios/ui/auth";
+
+<LoginForm
+  onSubmit={handleLogin}
+  onForgotPassword={handleForgotPassword}
+/>
+```
+
+### Providers
+
+```tsx
+import {
+  PolComponentsProvider,
+  NavContextProvider,
+  AlertProvider,
+} from "@pol-studios/ui/providers";
+
+<PolComponentsProvider config={appConfig}>
+  <NavContextProvider>
+    <App />
+  </NavContextProvider>
+</PolComponentsProvider>
+```
+
+### Hooks
+
+```tsx
+import {
+  useAlert,
+  useNavigate,
+  usePolNavigate,
+  useMultistepForm,
+  useKeyboardShortcuts,
+  useAutoHeight,
+  useControlledState,
+} from "@pol-studios/ui/hooks";
+
+const { showAlert, hideAlert } = useAlert();
+const navigate = useNavigate();
+```
+
+### Adapters
+
+```tsx
+import {
+  createTanStackRouterAdapter,
+  createSupabaseDataAdapter,
+  createPolDbHooksAuthAdapter,
+} from "@pol-studios/ui/adapters";
+
+const routerAdapter = createTanStackRouterAdapter(router);
+const dataAdapter = createSupabaseDataAdapter(supabase);
+```
+
+## Styling
+
+Import global styles in your app:
+
+```tsx
+import "@pol-studios/ui/styles/globals.css";
+```
+
+Uses Tailwind CSS with the following dependencies:
+- `tailwindcss` - Utility-first CSS
+- `tailwindcss-animate` - Animation utilities
+- `class-variance-authority` - Variant management
+
+## TypeScript Types
+
+```tsx
+import type {
+  // Component props
+  ModalProps,
+  TooltipProps,
+  DataTableProps,
+  ChartConfig,
+
+  // Data types
+  DataItem,
+  BadgeVariant,
+  LayoutVariant,
+
+  // Table types
+  EntityTableColumn,
+  ColumnConfigItem,
+
+  // Chart types
+  ChartType,
+  ChartDataType,
+  TimeSeriesData,
+
+  // Provider types
+  PolComponentsConfig,
+  NavContextValue,
+} from "@pol-studios/ui";
+```
+
+## Related Packages
+
+- [@pol-studios/hooks](../hooks) - Custom React hooks
+- [@pol-studios/utils](../utils) - Utility functions
+- [@pol-studios/filters](../filters) - Filter components
+- [@pol-studios/db](../db) - Database utilities
+- [@pol-studios/auth](../auth) - Authentication
+
+## License
+
+UNLICENSED

package/dist/auth/index.js

@@ -475,7 +475,7 @@ function UpdatePasswordForm({
 var UpdatePasswordForm_default = UpdatePasswordForm;
 
 // src/auth/AuthRouteWithLicense.tsx
-import { useSetupAuth } from "@pol-studios/auth";
+import { useSetupAuth } from "@pol-studios/db/auth";
 import { isUsable } from "@pol-studios/utils/types";
 import { Suspense } from "react";
 

package/dist/components/chat-agent/index.js

@@ -1168,7 +1168,7 @@ var Modal = ({
 
 // src/components/chat-agent/useChatAgent.ts
 import { useState as useState4, useCallback as useCallback3, useRef as useRef2, useEffect as useEffect3 } from "react";
-import { useSetupAuth } from "@pol-studios/auth";
+import { useSetupAuth } from "@pol-studios/db/auth";
 import { getSupabaseUrl, useSupabase } from "@pol-studios/db";
 var initialState = {
   messages: [],