@jmruthers/pace-core 0.5.139 → 0.5.141

package/docs/api/modules.md

@@ -1,6 +1,6 @@
-[@jmruthers/pace-core - v0.5.139](README.md) / Exports
+[@jmruthers/pace-core - v0.5.141](README.md) / Exports
 
-# @jmruthers/pace-core - v0.5.139
+# @jmruthers/pace-core - v0.5.141
 
 **`File`**
 
@@ -54,6 +54,7 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 
 - [BadgeProps](interfaces/BadgeProps.md)
 - [ButtonProps](interfaces/ButtonProps.md)
+- [CalendarProps](interfaces/CalendarProps.md)
 - [CardProps](interfaces/CardProps.md)
 - [DataTableProps](interfaces/DataTableProps.md)
 - [DataRecord](interfaces/DataRecord.md)
@@ -85,6 +86,11 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 - [PublicPageLayoutProps](interfaces/PublicPageLayoutProps.md)
 - [SessionRestorationLoaderProps](interfaces/SessionRestorationLoaderProps.md)
 - [SwitchProps](interfaces/SwitchProps.md)
+- [TabsProps](interfaces/TabsProps.md)
+- [TabsListProps](interfaces/TabsListProps.md)
+- [TabsTriggerProps](interfaces/TabsTriggerProps.md)
+- [TabsContentProps](interfaces/TabsContentProps.md)
+- [TextareaProps](interfaces/TextareaProps.md)
 - [ToastProps](interfaces/ToastProps.md)
 - [ToastActionElement](interfaces/ToastActionElement.md)
 - [UserMenuProps](interfaces/UserMenuProps.md)
@@ -119,6 +125,8 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 - [RBACLogger](interfaces/RBACLogger.md)
 - [UseResolvedScopeOptions](interfaces/UseResolvedScopeOptions.md)
 - [UseResolvedScopeReturn](interfaces/UseResolvedScopeReturn.md)
+- [UseResourcePermissionsOptions](interfaces/UseResourcePermissionsOptions.md)
+- [ResourcePermissions](interfaces/ResourcePermissions.md)
 - [EventAppRoleData](interfaces/EventAppRoleData.md)
 - [RevokeEventAppRoleParams](interfaces/RevokeEventAppRoleParams.md)
 - [GrantEventAppRoleParams](interfaces/GrantEventAppRoleParams.md)
@@ -192,6 +200,7 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 - [AvatarFallback](modules.md#avatarfallback)
 - [Badge](modules.md#badge)
 - [Button](modules.md#button)
+- [Calendar](modules.md#calendar)
 - [Card](modules.md#card)
 - [CardHeader](modules.md#cardheader)
 - [CardTitle](modules.md#cardtitle)
@@ -272,6 +281,11 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 - [TableHead](modules.md#tablehead)
 - [TableCell](modules.md#tablecell)
 - [TableCaption](modules.md#tablecaption)
+- [Tabs](modules.md#tabs)
+- [TabsList](modules.md#tabslist)
+- [TabsTrigger](modules.md#tabstrigger)
+- [TabsContent](modules.md#tabscontent)
+- [Textarea](modules.md#textarea)
 - [ToastProvider](modules.md#toastprovider)
 - [ToastViewport](modules.md#toastviewport)
 - [Toast](modules.md#toast)
@@ -368,6 +382,7 @@ import { Dialog, NavigationMenu } from '@jmruthers/pace-core/components';
 - [useCachedPermissions](modules.md#usecachedpermissions)
 - [useRBAC](modules.md#userbac)
 - [useResolvedScope](modules.md#useresolvedscope)
+- [useResourcePermissions](modules.md#useresourcepermissions)
 - [useRoleManagement](modules.md#userolemanagement)
 - [isValidPermission](modules.md#isvalidpermission)
 - [getPermissionsForRole](modules.md#getpermissionsforrole)
@@ -1190,6 +1205,51 @@ A flexible, accessible button component with multiple variants and sizes.
 
 ___
 
+### Calendar
+
+▸ **Calendar**(`props`): `ReactNode`
+
+Calendar component
+A flexible, accessible calendar component for date selection.
+Built on react-day-picker with pace-core styling.
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `props` | [`CalendarProps`](interfaces/CalendarProps.md) & `RefAttributes`\<`HTMLDivElement`\> | Calendar configuration and styling |
+
+#### Returns
+
+`ReactNode`
+
+JSX.Element - The rendered calendar element
+
+**`Example`**
+
+```tsx
+// Single date selection
+<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+/>
+
+// With disabled dates
+<Calendar
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+  disabled={(date) => date < new Date()}
+/>
+```
+
+#### Defined in
+
+[packages/core/src/components/Calendar/Calendar.tsx:104](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Calendar/Calendar.tsx#L104)
+
+___
+
 ### Card
 
 ▸ **Card**(`props`): `ReactNode`
@@ -3892,6 +3952,189 @@ ___
 
 ___
 
+### Tabs
+
+▸ **Tabs**(`props`): `ReactNode`
+
+Tabs root component
+Provides the context for tab navigation and state management
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`TabsProps`](interfaces/TabsProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+
+#### Returns
+
+`ReactNode`
+
+**`Component`**
+
+**`Example`**
+
+```tsx
+<Tabs defaultValue="tab1">
+  <TabsList>...</TabsList>
+  <TabsContent value="tab1">...</TabsContent>
+</Tabs>
+```
+
+#### Defined in
+
+[packages/core/src/components/Tabs/Tabs.tsx:80](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Tabs/Tabs.tsx#L80)
+
+___
+
+### TabsList
+
+▸ **TabsList**(`props`): `ReactNode`
+
+TabsList component
+Container for tab triggers
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`TabsListProps`](interfaces/TabsListProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+
+#### Returns
+
+`ReactNode`
+
+**`Component`**
+
+**`Example`**
+
+```tsx
+<TabsList>
+  <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+  <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+</TabsList>
+```
+
+#### Defined in
+
+[packages/core/src/components/Tabs/Tabs.tsx:108](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Tabs/Tabs.tsx#L108)
+
+___
+
+### TabsTrigger
+
+▸ **TabsTrigger**(`props`): `ReactNode`
+
+TabsTrigger component
+Individual tab button that activates a tab panel
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`TabsTriggerProps`](interfaces/TabsTriggerProps.md) & `RefAttributes`\<`HTMLButtonElement`\> |
+
+#### Returns
+
+`ReactNode`
+
+**`Component`**
+
+**`Example`**
+
+```tsx
+<TabsTrigger value="tab1">Tab 1</TabsTrigger>
+
+// With icon
+<TabsTrigger value="transport">
+  <Plane size={16} /> Transport
+</TabsTrigger>
+```
+
+#### Defined in
+
+[packages/core/src/components/Tabs/Tabs.tsx:145](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Tabs/Tabs.tsx#L145)
+
+___
+
+### TabsContent
+
+▸ **TabsContent**(`props`): `ReactNode`
+
+TabsContent component
+Container for tab panel content
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`TabsContentProps`](interfaces/TabsContentProps.md) & `RefAttributes`\<`HTMLDivElement`\> |
+
+#### Returns
+
+`ReactNode`
+
+**`Component`**
+
+**`Example`**
+
+```tsx
+<TabsContent value="tab1">
+  <div>Content for tab 1</div>
+</TabsContent>
+```
+
+#### Defined in
+
+[packages/core/src/components/Tabs/Tabs.tsx:181](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Tabs/Tabs.tsx#L181)
+
+___
+
+### Textarea
+
+▸ **Textarea**(`props`): `ReactNode`
+
+Textarea component
+A flexible, accessible textarea component with multiple variants and sizes.
+Matches the Input component API and styling for consistency.
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `props` | [`TextareaProps`](interfaces/TextareaProps.md) & `RefAttributes`\<`HTMLTextAreaElement`\> | Textarea configuration and styling |
+
+#### Returns
+
+`ReactNode`
+
+JSX.Element - The rendered textarea element
+
+**`Example`**
+
+```tsx
+// Basic textarea
+<Textarea placeholder="Enter your message..." />
+
+// Textarea with error state
+<Textarea 
+  placeholder="Comments" 
+  error={true}
+/>
+
+// Large textarea with destructive variant
+<Textarea 
+  variant="destructive" 
+  size="lg" 
+  placeholder="Error textarea" 
+/>
+```
+
+#### Defined in
+
+[packages/core/src/components/Textarea/Textarea.tsx:96](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/components/Textarea/Textarea.tsx#L96)
+
+___
+
 ### ToastProvider
 
 ▸ **ToastProvider**(`props`, `deprecatedLegacyContext?`): `ReactNode`
@@ -6757,6 +7000,50 @@ const permission = useCan(userId, resolvedScope, permission);
 
 ___
 
+### useResourcePermissions
+
+▸ **useResourcePermissions**(`resource`, `options?`): [`ResourcePermissions`](interfaces/ResourcePermissions.md)
+
+Hook to check permissions for a specific resource
+
+This hook encapsulates the common pattern of checking create/update/delete/read
+permissions for a resource type. It handles scope resolution, user context,
+and provides a simple API for permission checking.
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `resource` | `string` | The resource name (e.g., 'contacts', 'risks', 'journal') |
+| `options` | [`UseResourcePermissionsOptions`](interfaces/UseResourcePermissionsOptions.md) | Optional configuration |
+
+#### Returns
+
+[`ResourcePermissions`](interfaces/ResourcePermissions.md)
+
+Object with permission check functions and scope
+
+**`Example`**
+
+```tsx
+function useContacts() {
+  const { canCreate, canUpdate, canDelete } = useResourcePermissions('contacts');
+  
+  const addContact = async (data: ContactData) => {
+    if (!canCreate('contacts')) {
+      throw new Error("Permission denied");
+    }
+    // ... perform mutation
+  };
+}
+```
+
+#### Defined in
+
+[packages/core/src/rbac/hooks/useResourcePermissions.ts:102](https://github.com/jmruthers/pace-core/blob/main/packages/core/src/rbac/hooks/useResourcePermissions.ts#L102)
+
+___
+
 ### useRoleManagement
 
 ▸ **useRoleManagement**(): `Object`

package/docs/getting-started/examples/basic-auth-app.md

@@ -0,0 +1,196 @@
+# Basic Authentication App
+
+A minimal PACE Core application showing just authentication and basic UI components.
+
+## 🎯 What This Example Shows
+
+- Basic authentication setup
+- Simple login/logout flow
+- Basic dashboard with cards
+- Responsive navigation
+- Minimal code structure
+
+## 📁 Project Structure
+
+```
+src/
+├── App.tsx                 # Main app with providers
+├── lib/
+│   └── supabase.ts        # Supabase client
+├── components/
+│   ├── LoginPage.tsx      # Login form
+│   ├── Dashboard.tsx      # Simple dashboard
+│   └── Navigation.tsx     # Basic navigation
+└── main.tsx               # App entry point
+```
+
+## 🚀 Implementation
+
+### 1. App.tsx - Main Application
+
+```tsx
+import { UnifiedAuthProvider } from '@jmruthers/pace-core';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { supabase } from './lib/supabase';
+import { LoginPage } from './components/LoginPage';
+import { Dashboard } from './components/Dashboard';
+
+function App() {
+  return (
+    <UnifiedAuthProvider 
+      supabaseClient={supabase} 
+      appName="basic-auth-app"
+    >
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/" element={<Dashboard />} />
+        </Routes>
+      </BrowserRouter>
+    </UnifiedAuthProvider>
+  );
+}
+
+export default App;
+```
+
+### 2. lib/supabase.ts - Supabase Client
+
+```typescript
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = process.env.REACT_APP_SUPABASE_URL!;
+const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY!;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+```
+
+### 3. components/LoginPage.tsx - Login Form
+
+```tsx
+import { LoginForm, Card, CardHeader, CardTitle, CardContent } from '@jmruthers/pace-core';
+import { useNavigate } from 'react-router-dom';
+
+export function LoginPage() {
+  const navigate = useNavigate();
+
+  const handleLoginSuccess = () => {
+    navigate('/');
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-sec-50">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-center">Welcome Back</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <LoginForm onLoginSuccess={handleLoginSuccess} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+```
+
+### 4. components/Dashboard.tsx - Simple Dashboard
+
+```tsx
+import { Card, CardHeader, CardTitle, CardContent, Button } from '@jmruthers/pace-core';
+import { useUnifiedAuth } from '@jmruthers/pace-core';
+import { useNavigate } from 'react-router-dom';
+
+export function Dashboard() {
+  const { user, signOut } = useUnifiedAuth();
+  const navigate = useNavigate();
+
+  const handleSignOut = async () => {
+    await signOut();
+    navigate('/login');
+  };
+
+  return (
+    <div className="min-h-screen bg-sec-50 p-6">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold text-sec-900">Dashboard</h1>
+          <div className="flex items-center gap-4">
+            <span className="text-sec-600">Welcome, {user?.email}</span>
+            <Button variant="outline" onClick={handleSignOut}>
+              Sign Out
+            </Button>
+          </div>
+        </div>
+
+        {/* Content Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Getting Started</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sec-600">
+                Welcome to your PACE Core application! This is a basic example showing authentication and UI components.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Next Steps</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sec-600">
+                Explore the examples to learn about DataTables, forms, navigation, and more advanced features.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Resources</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sec-600">
+                Check out the documentation for implementation guides, API reference, and best practices.
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+## 🔧 Environment Setup
+
+Create `.env.local`:
+
+```bash
+REACT_APP_SUPABASE_URL=https://your-project.supabase.co
+REACT_APP_SUPABASE_ANON_KEY=your-anon-key-here
+```
+
+## 🎉 What You Get
+
+- ✅ User authentication with Supabase
+- ✅ Protected dashboard route
+- ✅ Responsive UI components
+- ✅ Clean, minimal code structure
+- ✅ Easy to extend and customize
+
+## 🚀 Next Steps
+
+- **Add more features** - Forms, data tables, navigation
+- **Implement RBAC** - Role-based access control
+- **Add organisation support** - Multi-tenant features
+- **Explore components** - See all available UI components
+
+## 📚 Related Documentation
+
+- **[Quick Start](../quick-start.md)** - Build a full-featured app
+- **[Core Concepts](../core-concepts/)** - Understand authentication and RBAC
+- **[API Reference](../api-reference/)** - Explore all components and hooks
+- **[Implementation Guides](../implementation-guides/)** - Advanced patterns