@pol-studios/ui 1.0.0 → 1.0.6

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/db/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/db/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: [],

package/dist/components/index.js

@@ -46161,7 +46161,7 @@ import {
   useBatchUpsert,
   useDbUpsert
 } from "@pol-studios/db";
-import { useSetupAuth } from "@pol-studios/auth";
+import { useSetupAuth } from "@pol-studios/db/auth";
 import { format as format2, isToday, isYesterday } from "date-fns";
 import { useNavigate as useNavigate2 } from "@tanstack/react-router";
 import { Fragment as Fragment11, jsx as jsx88, jsxs as jsxs49 } from "react/jsx-runtime";
@@ -49891,7 +49891,7 @@ function useComponentConfigOptional() {
 }
 
 // src/components/AuthRoute.tsx
-import { useSetupAuth as useSetupAuth2 } from "@pol-studios/auth";
+import { useSetupAuth as useSetupAuth2 } from "@pol-studios/db/auth";
 import { jsx as jsx128 } from "react/jsx-runtime";
 function useLoginRoute() {
   const config2 = useComponentConfigOptional();
@@ -49947,7 +49947,7 @@ var AuthRoute_default = AuthRoute;
 import { isUsable as isUsable21 } from "@pol-studios/utils";
 import { Suspense as Suspense2 } from "react";
 import { useParams as useParams3 } from "@tanstack/react-router";
-import { useSetupAuth as useSetupAuth3 } from "@pol-studios/auth";
+import { useSetupAuth as useSetupAuth3 } from "@pol-studios/db/auth";
 import { jsx as jsx129 } from "react/jsx-runtime";
 function AuthRouteWithLicense({ component: RouteComponent, access }) {
   const { isLoading, hasAccess, user } = useSetupAuth3();
@@ -49977,7 +49977,7 @@ var AuthContext = createContext13(null);
 AuthContext.displayName = "ComponentAuthContext";
 
 // src/components/AuthSection.tsx
-import { useSetupAuth as useSetupAuth4 } from "@pol-studios/auth";
+import { useSetupAuth as useSetupAuth4 } from "@pol-studios/db/auth";
 import { Fragment as Fragment17, jsx as jsx131 } from "react/jsx-runtime";
 function useAuthSectionAuth() {
   const authContext = useContext21(AuthContext);
@@ -52734,7 +52734,7 @@ function EntityAttachmentViewer({
 var EntityAttachmentViewer_default = EntityAttachmentViewer;
 
 // src/components/EntityAuthRoute.tsx
-import { usePermission } from "@pol-studios/auth";
+import { usePermission } from "@pol-studios/db/auth";
 import { motion as motion24 } from "framer-motion";
 import { Suspense as Suspense4 } from "react";
 import { useParams as useParams4 } from "@tanstack/react-router";
@@ -52785,7 +52785,7 @@ function EntityAuthRoute({
 var EntityAuthRoute_default = EntityAuthRoute;
 
 // src/components/EntityAuthSection.tsx
-import { usePermission as usePermission2 } from "@pol-studios/auth";
+import { usePermission as usePermission2 } from "@pol-studios/db/auth";
 import { Fragment as Fragment20, jsx as jsx140 } from "react/jsx-runtime";
 function EntityAuthSection({
   entityType,
@@ -117905,7 +117905,7 @@ import {
   useMemo as useMemo75,
   useState as useState72
 } from "react";
-import { useAuth } from "@pol-studios/auth";
+import { useAuth } from "@pol-studios/db/auth";
 import { useSupabase as useSupabase4 } from "@pol-studios/db";
 import { Bell } from "lucide-react";
 import { useDbUpsert as useDbUpsert2 } from "@pol-studios/db";
@@ -118502,7 +118502,7 @@ import {
 } from "@pol-studios/db";
 import { isUsable as isUsable31 } from "@pol-studios/utils";
 import { useToast } from "@pol-studios/hooks";
-import { useAuth as useAuth2 } from "@pol-studios/auth";
+import { useAuth as useAuth2 } from "@pol-studios/db/auth";
 import { Fragment as Fragment36, jsx as jsx206, jsxs as jsxs118 } from "react/jsx-runtime";
 var PERMISSION_OPTIONS = [
   {
@@ -118771,7 +118771,7 @@ function QuerySharingModal({
 }
 
 // src/components/FilterBuilder/SavedQueryManager.tsx
-import { useAuth as useAuth3 } from "@pol-studios/auth";
+import { useAuth as useAuth3 } from "@pol-studios/db/auth";
 import { Fragment as Fragment37, jsx as jsx207, jsxs as jsxs119 } from "react/jsx-runtime";
 var SavedQueryManager = ({
   setFilters,
@@ -125205,7 +125205,7 @@ import { cn as cn125 } from "@pol-studios/utils";
 
 // src/components/chat-agent/useChatAgent.ts
 import { useState as useState83, useCallback as useCallback52, useRef as useRef53, useEffect as useEffect73 } from "react";
-import { useSetupAuth as useSetupAuth5 } from "@pol-studios/auth";
+import { useSetupAuth as useSetupAuth5 } from "@pol-studios/db/auth";
 import { getSupabaseUrl, useSupabase as useSupabase8 } from "@pol-studios/db";
 var initialState3 = {
   messages: [],
@@ -137978,7 +137978,7 @@ import {
   useDbQuery as useDbQuery6,
   useSupabase as useSupabase9
 } from "@pol-studios/db";
-import { useAuth as useAuth4 } from "@pol-studios/auth";
+import { useAuth as useAuth4 } from "@pol-studios/db/auth";
 import { isUsable as isUsable35 } from "@pol-studios/utils/types";
 import { ChevronDown as ChevronDown7, ChevronUp as ChevronUp3, X as X15, MoreVertical } from "lucide-react";
 import { CommentProvider as CommentSectionProvider, useComments as useCommentSection } from "@pol-studios/features";
@@ -138575,7 +138575,7 @@ var isNonEmpty = (array) => !!array && array.length > 0;
 var isDev3 = process.env.NODE_ENV === "development";
 
 // src/components/auth/Protected.tsx
-import { useAuth as useAuth5 } from "@pol-studios/auth";
+import { useAuth as useAuth5 } from "@pol-studios/db/auth";
 var Protected = ({ accessLevel, children }) => {
   const auth = useAuth5();
   const isVisible2 = auth.hasAccess(accessLevel);
@@ -147336,7 +147336,7 @@ import React184, { useCallback as useCallback67, useEffect as useEffect92, useMe
 import { useReducedMotion } from "@pol-studios/hooks";
 import { cn as cn146 } from "@pol-studios/utils";
 import { motion as motion29, AnimatePresence as AnimatePresence25, Reorder } from "framer-motion";
-import { useUserMetadataState } from "@pol-studios/auth";
+import { useUserMetadataState } from "@pol-studios/db/auth";
 import { jsx as jsx279, jsxs as jsxs175 } from "react/jsx-runtime";
 function SearchInput2({
   value,

package/dist/feedback/index.js

@@ -8838,7 +8838,7 @@ import { useToast } from "@pol-studios/hooks";
 import { useInsert } from "@pol-studios/db";
 import { useUpload, BUCKETS } from "@pol-studios/storage";
 import { cn as cn19 } from "@pol-studios/utils";
-import { useAuth } from "@pol-studios/auth";
+import { useAuth } from "@pol-studios/db/auth";
 import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
 var SupportTicketButton = ({
   className,

package/dist/navbar/index.js

@@ -43188,7 +43188,7 @@ import {
   SystemInAppNotification,
   useSupabase as useSupabase5
 } from "@pol-studios/db";
-import { useSetupAuth } from "@pol-studios/auth";
+import { useSetupAuth } from "@pol-studios/db/auth";
 import {
   useDbRealtimeQuery as useDbRealtimeQuery2,
   useDbMultiDelete as useDbMultiDelete2,
@@ -44394,7 +44394,7 @@ import { Link as Link5, useLocation as useLocation2 } from "@tanstack/react-rout
 import { cn as cn31 } from "@pol-studios/utils";
 import { isUsable as isUsable10 } from "@pol-studios/utils";
 import { useDevice } from "@pol-studios/hooks";
-import { useAuth as useAuth2 } from "@pol-studios/auth";
+import { useAuth as useAuth2 } from "@pol-studios/db/auth";
 import { Fragment as Fragment9, jsx as jsx59, jsxs as jsxs25 } from "react/jsx-runtime";
 var Logo = ({ className }) => {
   return /* @__PURE__ */ jsx59(
@@ -44423,7 +44423,7 @@ var SidebarContext = createContext11(
 
 // src/navbar/aceternity/side-bar-2.tsx
 import { useSupabase as useSupabase6 } from "@pol-studios/db";
-import { useAuth as useAuth3 } from "@pol-studios/auth";
+import { useAuth as useAuth3 } from "@pol-studios/db/auth";
 import { Link as Link6, useLocation as useLocation3 } from "@tanstack/react-router";
 
 // src/navbar/aceternity/sidebar.config.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pol-studios/ui",
-  "version": "1.0.0",
+  "version": "1.0.6",
   "description": "UI components for POL applications",
   "license": "UNLICENSED",
   "type": "module",
@@ -97,19 +97,12 @@
     },
     "./styles/globals.css": "./src/styles/globals.css"
   },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "pnpm build"
-  },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@pol-studios/auth": ">=1.0.0",
     "@pol-studios/db": ">=1.0.0",
     "@pol-studios/filters": ">=1.0.0",
     "@pol-studios/hooks": ">=1.0.0",
@@ -137,9 +130,6 @@
     "next-themes": {
       "optional": true
     },
-    "@pol-studios/auth": {
-      "optional": true
-    },
     "@pol-studios/db": {
       "optional": true
     },
@@ -210,17 +200,21 @@
     "zod": "^3.24.4"
   },
   "devDependencies": {
-    "@pol-studios/auth": "workspace:*",
-    "@pol-studios/db": "workspace:*",
-    "@pol-studios/filters": "workspace:*",
-    "@pol-studios/hooks": "workspace:*",
-    "@pol-studios/utils": "workspace:*",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "shadcn": "^3.7.0",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.0.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "@pol-studios/hooks": "1.0.6",
+    "@pol-studios/db": "1.0.6",
+    "@pol-studios/utils": "1.0.6",
+    "@pol-studios/filters": "1.0.6"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
   }
-}
+}