@propriety/court-calendar 1.0.141 → 1.0.142

package/dev/App.tsx

@@ -1,8 +1,16 @@
 import { useState } from 'react';
-import { CCalendar } from '../src/';
+import { CCalendar, WeekWidget } from '../src/';
 
 function App() {
     const [mode, setMode] = useState<'light' | 'dark'>('dark');
+    const [view, setView] = useState<'calendar' | 'widget'>('calendar');
+
+    const apiKey = import.meta.env.VITE_CALENDAR_API_KEY || '';
+    const buttonStyle = {
+        height: '2rem',
+        backgroundColor: mode === 'dark' ? '#121212' : '#ffffff',
+        color: mode === 'dark' ? '#ffffff' : '#212121',
+    };
 
     return (
         <div
@@ -13,21 +21,32 @@ function App() {
             }}
         >
             <h1>Court Calendar Demo</h1>
-            <div style={{ flexDirection: 'column', display: 'flex' }}>
-                <button
-                    onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
-                    style={{
-                        marginBottom: '1rem',
-                        height: '2rem',
-                        backgroundColor: mode === 'dark' ? '#121212' : '#ffffff',
-                        color: mode === 'dark' ? '#ffffff' : '#212121',
-                    }}
-                >
+            <div style={{ flexDirection: 'row', display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+                <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')} style={buttonStyle}>
                     Theme toggle
                 </button>
+                <button onClick={() => setView(view === 'calendar' ? 'widget' : 'calendar')} style={buttonStyle}>
+                    {view === 'calendar' ? 'Show week widget' : 'Show full calendar'}
+                </button>
             </div>
 
-            <CCalendar apiKey={import.meta.env.VITE_CALENDAR_API_KEY || ''} activeUser={27} mode={mode} />
+            {view === 'calendar' ? (
+                <CCalendar apiKey={apiKey} activeUser={27} mode={mode} />
+            ) : (
+                // WeekWidget renders a bare grid — wrap it like a dashboard card so the
+                // compact week strip is easy to see against the page background.
+                <div
+                    style={{
+                        maxWidth: 900,
+                        padding: '1rem',
+                        borderRadius: 8,
+                        border: `1px solid ${mode === 'dark' ? '#333' : '#e0e0e0'}`,
+                    }}
+                >
+                    <h3 style={{ margin: '0 0 0.75rem' }}>Court Calendar — This Week</h3>
+                    <WeekWidget apiKey={apiKey} activeUser={27} mode={mode} />
+                </div>
+            )}
         </div>
     );
 }

package/dist/__tests__/WeekWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/_components/WeekWidget/WeekWidget.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Compact current-week (Mon–Fri) view of the court calendar. Hearing badges,
+ * "Can Preclude" (motion-date) markers and "Upload" (deadline) markers all use
+ * the full calendar's styling. Powered by the real court-calendar data stack;
+ * clicking any item opens the in-package DateDetails modal.
+ *
+ * Renders a bare 5-column grid — wrap it in your own card/header.
+ */
+export default function WeekWidget({ apiKey, activeUser, mode, themeOverrides, }: {
+    apiKey: string;
+    activeUser: number;
+    mode?: 'light' | 'dark';
+    themeOverrides?: import('@mui/material/styles').ThemeOptions;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { default as CCalendar } from './_components/CCalendar';
+export { default as WeekWidget } from './_components/WeekWidget/WeekWidget';
 export type { CalendarRouteParams } from './types';
 export { parseCalendarSearchParams, serializeCalendarParams } from './helpers/routing';