@jmruthers/pace-core 0.5.53 → 0.5.55

package/src/components/PrintGrid/examples/PrintGridShowcase.tsx

@@ -1,359 +0,0 @@
-/**
- * @file PrintGrid Showcase Example
- * @package @jmruthers/pace-core
- * @module PrintGridShowcase
- * @since 0.4.38
- * 
- * Example showcasing PrintGrid components usage.
- */
-
-import React from 'react';
-import { 
-  PrintLayout,
-  PrintHeader,
-  PrintText,
-  PrintSection,
-  PrintGrid, 
-  PrintGridItem, 
-  PrintGridContainer, 
-  PrintGridBreakpoint 
-} from '../../index';
-
-export function PrintGridShowcase() {
-  return (
-    <PrintLayout
-      orientation="portrait"
-      pageSize="A4"
-      firstPageHeader={
-        <PrintHeader
-          title="Print Grid Components Showcase"
-          subtitle="Demonstrating responsive grid system with print-specific columns"
-          branding={{
-            logo: "/pace_logo_square.svg",
-            companyName: "Pace Core"
-          }}
-          metadata={[
-            { label: 'Date', value: new Date().toLocaleDateString() },
-            { label: 'Page', value: "1" }
-          ]}
-        />
-      }
-    >
-      <div className="space-y-8">
-        {/* Basic Grid Layout */}
-        <PrintSection title="Basic Grid Layout" background="white" showBorder>
-          <PrintSection>
-            <PrintText>
-              A basic 12-column grid layout with different column spans.
-            </PrintText>
-            
-            <PrintGrid columns={12} gap="md" className="mt-4">
-              <PrintGridItem colSpan={6} className="p-4 bg-blue-50 border border-blue-200 rounded">
-                <PrintText variant="small" weight="semibold">6 Columns</PrintText>
-                <PrintText variant="small">Half width item</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem colSpan={6} className="p-4 bg-green-50 border border-green-200 rounded">
-                <PrintText variant="small" weight="semibold">6 Columns</PrintText>
-                <PrintText variant="small">Half width item</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem colSpan={4} className="p-4 bg-yellow-50 border border-yellow-200 rounded">
-                <PrintText variant="small" weight="semibold">4 Columns</PrintText>
-                <PrintText variant="small">One third width</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem colSpan={4} className="p-4 bg-purple-50 border border-purple-200 rounded">
-                <PrintText variant="small" weight="semibold">4 Columns</PrintText>
-                <PrintText variant="small">One third width</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem colSpan={4} className="p-4 bg-pink-50 border border-pink-200 rounded">
-                <PrintText variant="small" weight="semibold">4 Columns</PrintText>
-                <PrintText variant="small">One third width</PrintText>
-              </PrintGridItem>
-            </PrintGrid>
-          </PrintSection>
-        </PrintSection>
-
-        {/* Print-Specific Grid */}
-        <PrintSection title="Print-Specific Grid Layout" background="gray">
-          <PrintSection>
-            <PrintText>
-              Grid with different column counts for screen and print.
-            </PrintText>
-            
-            <PrintGrid 
-              columns={6} 
-              printColumns={3} 
-              gap="md" 
-              printGap="sm"
-              className="mt-4"
-            >
-              <PrintGridItem 
-                colSpan={2} 
-                printColSpan={1}
-                className="p-4 bg-red-50 border border-red-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">2/6 Screen, 1/3 Print</PrintText>
-                <PrintText variant="small">Responsive to print</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={2} 
-                printColSpan={1}
-                className="p-4 bg-orange-50 border border-orange-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">2/6 Screen, 1/3 Print</PrintText>
-                <PrintText variant="small">Responsive to print</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={2} 
-                printColSpan={1}
-                className="p-4 bg-teal-50 border border-teal-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">2/6 Screen, 1/3 Print</PrintText>
-                <PrintText variant="small">Responsive to print</PrintText>
-              </PrintGridItem>
-            </PrintGrid>
-          </PrintSection>
-        </PrintSection>
-
-        {/* Grid with Row Spans */}
-        <PrintSection title="Grid with Row Spans" background="white" showBorder>
-          <PrintSection>
-            <PrintText>
-              Grid items with different row spans for complex layouts.
-            </PrintText>
-            
-            <PrintGrid columns={4} gap="md" className="mt-4">
-              <PrintGridItem 
-                colSpan={2} 
-                rowSpan={2}
-                className="p-4 bg-indigo-50 border border-indigo-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">2x2 Item</PrintText>
-                <PrintText variant="small">Spans 2 columns and 2 rows</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={2} 
-                rowSpan={1}
-                className="p-4 bg-cyan-50 border border-cyan-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">2x1 Item</PrintText>
-                <PrintText variant="small">Spans 2 columns, 1 row</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={1} 
-                rowSpan={1}
-                className="p-4 bg-emerald-50 border border-emerald-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">1x1 Item</PrintText>
-                <PrintText variant="small">Single cell</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={1} 
-                rowSpan={1}
-                className="p-4 bg-rose-50 border border-rose-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">1x1 Item</PrintText>
-                <PrintText variant="small">Single cell</PrintText>
-              </PrintGridItem>
-            </PrintGrid>
-          </PrintSection>
-        </PrintSection>
-
-        {/* Grid Container */}
-        <PrintSection title="Grid Container" background="gray">
-          <PrintSection>
-            <PrintText>
-              Grid wrapped in a container with max width and background.
-            </PrintText>
-            
-            <PrintGridContainer 
-              maxWidth="4xl" 
-              padding="lg" 
-              background="white" 
-              className="mt-4"
-            >
-              <PrintGrid columns={3} gap="lg">
-                <PrintGridItem className="p-4 bg-slate-50 border border-slate-200 rounded">
-                  <PrintText variant="small" weight="semibold">Container Item 1</PrintText>
-                  <PrintText variant="small">Inside container</PrintText>
-                </PrintGridItem>
-                
-                <PrintGridItem className="p-4 bg-slate-50 border border-slate-200 rounded">
-                  <PrintText variant="small" weight="semibold">Container Item 2</PrintText>
-                  <PrintText variant="small">Inside container</PrintText>
-                </PrintGridItem>
-                
-                <PrintGridItem className="p-4 bg-slate-50 border border-slate-200 rounded">
-                  <PrintText variant="small" weight="semibold">Container Item 3</PrintText>
-                  <PrintText variant="small">Inside container</PrintText>
-                </PrintGridItem>
-              </PrintGrid>
-            </PrintGridContainer>
-          </PrintSection>
-        </PrintSection>
-
-        {/* Responsive Breakpoints */}
-        <PrintSection title="Responsive Breakpoints" background="white" showBorder>
-          <PrintSection>
-            <PrintText>
-              Grid that changes layout at different breakpoints.
-            </PrintText>
-            
-            <div className="mt-4 space-y-4">
-              <PrintText variant="small" weight="semibold">Small screens (sm): 2 columns</PrintText>
-              <PrintGridBreakpoint size="sm" columns={2} gap="sm">
-                <PrintGridItem className="p-3 bg-amber-50 border border-amber-200 rounded">
-                  <PrintText variant="small">Small Item 1</PrintText>
-                </PrintGridItem>
-                <PrintGridItem className="p-3 bg-amber-50 border border-amber-200 rounded">
-                  <PrintText variant="small">Small Item 2</PrintText>
-                </PrintGridItem>
-              </PrintGridBreakpoint>
-              
-              <PrintText variant="small" weight="semibold">Medium screens (md): 3 columns</PrintText>
-              <PrintGridBreakpoint size="md" columns={3} gap="md">
-                <PrintGridItem className="p-3 bg-violet-50 border border-violet-200 rounded">
-                  <PrintText variant="small">Medium Item 1</PrintText>
-                </PrintGridItem>
-                <PrintGridItem className="p-3 bg-violet-50 border border-violet-200 rounded">
-                  <PrintText variant="small">Medium Item 2</PrintText>
-                </PrintGridItem>
-                <PrintGridItem className="p-3 bg-violet-50 border border-violet-200 rounded">
-                  <PrintText variant="small">Medium Item 3</PrintText>
-                </PrintGridItem>
-              </PrintGridBreakpoint>
-              
-              <PrintText variant="small" weight="semibold">Large screens (lg): 4 columns</PrintText>
-              <PrintGridBreakpoint size="lg" columns={4} gap="lg">
-                <PrintGridItem className="p-3 bg-fuchsia-50 border border-fuchsia-200 rounded">
-                  <PrintText variant="small">Large Item 1</PrintText>
-                </PrintGridItem>
-                <PrintGridItem className="p-3 bg-fuchsia-50 border border-fuchsia-200 rounded">
-                  <PrintText variant="small">Large Item 2</PrintText>
-                </PrintGridItem>
-                <PrintGridItem className="p-3 bg-fuchsia-50 border border-fuchsia-200 rounded">
-                  <PrintText variant="small">Large Item 3</PrintText>
-                </PrintGridItem>
-                <PrintGridItem className="p-3 bg-fuchsia-50 border border-fuchsia-200 rounded">
-                  <PrintText variant="small">Large Item 4</PrintText>
-                </PrintGridItem>
-              </PrintGridBreakpoint>
-            </div>
-          </PrintSection>
-        </PrintSection>
-
-        {/* Complex Grid Layout */}
-        <PrintSection title="Complex Grid Layout" background="gray">
-          <PrintSection>
-            <PrintText>
-              A complex grid layout with mixed column spans and positioning.
-            </PrintText>
-            
-            <PrintGrid columns={12} gap="md" className="mt-4">
-              <PrintGridItem 
-                colSpan={6} 
-                className="p-4 bg-blue-50 border border-blue-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">Main Content (6 columns)</PrintText>
-                <PrintText variant="small">This is the main content area that takes up most of the width.</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={4} 
-                className="p-4 bg-green-50 border border-green-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">Sidebar (4 columns)</PrintText>
-                <PrintText variant="small">This is the sidebar content.</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={3} 
-                className="p-4 bg-yellow-50 border border-yellow-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">Feature 1</PrintText>
-                <PrintText variant="small">Quarter width</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={3} 
-                className="p-4 bg-orange-50 border border-orange-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">Feature 2</PrintText>
-                <PrintText variant="small">Quarter width</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={3} 
-                className="p-4 bg-red-50 border border-red-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">Feature 3</PrintText>
-                <PrintText variant="small">Quarter width</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={3} 
-                className="p-4 bg-purple-50 border border-purple-200 rounded"
-              >
-                <PrintText variant="small" weight="semibold">Feature 4</PrintText>
-                <PrintText variant="small">Quarter width</PrintText>
-              </PrintGridItem>
-            </PrintGrid>
-          </PrintSection>
-        </PrintSection>
-
-        {/* Print-Optimized Grid */}
-        <PrintSection title="Print-Optimized Grid" background="white" showBorder>
-          <PrintSection>
-            <PrintText>
-              Grid optimized for print with different layouts for screen and print.
-            </PrintText>
-            
-            <PrintGrid 
-              columns={6} 
-              printColumns={2}
-              gap="lg" 
-              printGap="sm"
-              align="center"
-              className="mt-4"
-            >
-              <PrintGridItem 
-                colSpan={2} 
-                printColSpan={1}
-                className="p-4 bg-teal-50 border border-teal-200 rounded text-center"
-              >
-                <PrintText variant="small" weight="semibold">Card 1</PrintText>
-                <PrintText variant="small">2 cols screen, 1 col print</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={2} 
-                printColSpan={1}
-                className="p-4 bg-cyan-50 border border-cyan-200 rounded text-center"
-              >
-                <PrintText variant="small" weight="semibold">Card 2</PrintText>
-                <PrintText variant="small">2 cols screen, 1 col print</PrintText>
-              </PrintGridItem>
-              
-              <PrintGridItem 
-                colSpan={2} 
-                printColSpan={1}
-                className="p-4 bg-sky-50 border border-sky-200 rounded text-center"
-              >
-                <PrintText variant="small" weight="semibold">Card 3</PrintText>
-                <PrintText variant="small">2 cols screen, 1 col print</PrintText>
-              </PrintGridItem>
-            </PrintGrid>
-          </PrintSection>
-        </PrintSection>
-      </div>
-    </PrintLayout>
-  );
-}

package/src/components/PrintGrid/index.ts

@@ -1,31 +0,0 @@
-/**
- * @file PrintGrid Exports
- * @package @jmruthers/pace-core
- * @module PrintGrid
- * @since 0.4.38
- * 
- * Exports for PrintGrid components.
- */
-
-export { PrintGrid } from './PrintGrid';
-export { PrintGridItem } from './PrintGridItem';
-export { PrintGridContainer } from './PrintGridContainer';
-export { PrintGridBreakpoint } from './PrintGridBreakpoint';
-
-export type {
-  PrintGridProps,
-  PrintGridItemProps,
-  PrintGridContainerProps,
-  PrintGridBreakpointProps,
-  PrintGridColumns,
-  PrintGridGap,
-  PrintGridAlign,
-  PrintGridJustify,
-  PrintGridItemSpan,
-  PrintGridItemStart,
-  PrintGridMaxWidth,
-  PrintGridPadding,
-  PrintGridMargin,
-  PrintGridBackground,
-  PrintGridBreakpointSize,
-} from './types';

package/src/components/PrintGrid/types.ts

@@ -1,159 +0,0 @@
-/**
- * @file PrintGrid Types
- * @package @jmruthers/pace-core
- * @module PrintGrid
- * @since 0.4.38
- * 
- * Type definitions for PrintGrid component.
- */
-
-import { ReactNode } from 'react';
-
-export interface PrintGridProps {
-  /** Grid content */
-  children: ReactNode;
-  
-  /** Grid columns */
-  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
-  
-  /** Grid gap */
-  gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /** Grid row gap */
-  rowGap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /** Grid column gap */
-  columnGap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /** Grid alignment */
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  
-  /** Grid justify */
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-  
-  /** Print-specific columns */
-  printColumns?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
-  
-  /** Print-specific gap */
-  printGap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /** Print-specific row gap */
-  printRowGap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /** Print-specific column gap */
-  printColumnGap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /** Print optimization */
-  printOptimized?: boolean;
-  
-  /** Custom CSS classes */
-  className?: string;
-  
-  /** Additional props */
-  [key: string]: any;
-}
-
-export interface PrintGridItemProps {
-  /** Grid item content */
-  children: ReactNode;
-  
-  /** Grid item column span */
-  colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | 'full';
-  
-  /** Grid item row span */
-  rowSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 'full';
-  
-  /** Grid item column start */
-  colStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 'auto';
-  
-  /** Grid item row start */
-  rowStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 'auto';
-  
-  /** Grid item alignment */
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  
-  /** Grid item justify */
-  justify?: 'start' | 'center' | 'end' | 'stretch';
-  
-  /** Print-specific column span */
-  printColSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | 'full';
-  
-  /** Print-specific row span */
-  printRowSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 'full';
-  
-  /** Print-specific column start */
-  printColStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 'auto';
-  
-  /** Print-specific row start */
-  printRowStart?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 'auto';
-  
-  /** Print optimization */
-  printOptimized?: boolean;
-  
-  /** Custom CSS classes */
-  className?: string;
-  
-  /** Additional props */
-  [key: string]: any;
-}
-
-export interface PrintGridContainerProps {
-  /** Container content */
-  children: ReactNode;
-  
-  /** Container max width */
-  maxWidth?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full';
-  
-  /** Container padding */
-  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /** Container margin */
-  margin?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
-  
-  /** Container background */
-  background?: 'transparent' | 'white' | 'gray' | 'primary' | 'secondary';
-  
-  /** Print optimization */
-  printOptimized?: boolean;
-  
-  /** Custom CSS classes */
-  className?: string;
-  
-  /** Additional props */
-  [key: string]: any;
-}
-
-export interface PrintGridBreakpointProps {
-  /** Breakpoint content */
-  children: ReactNode;
-  
-  /** Breakpoint size */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-  
-  /** Breakpoint columns */
-  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
-  
-  /** Breakpoint gap */
-  gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
-  /** Print optimization */
-  printOptimized?: boolean;
-  
-  /** Custom CSS classes */
-  className?: string;
-  
-  /** Additional props */
-  [key: string]: any;
-}
-
-export type PrintGridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
-export type PrintGridGap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-export type PrintGridAlign = 'start' | 'center' | 'end' | 'stretch';
-export type PrintGridJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-export type PrintGridItemSpan = 1 | 2 | 3 | 4 | 5 | 6 | 12 | 'full';
-export type PrintGridItemStart = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 'auto';
-export type PrintGridMaxWidth = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full';
-export type PrintGridPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-export type PrintGridMargin = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'auto';
-export type PrintGridBackground = 'transparent' | 'white' | 'gray' | 'primary' | 'secondary';
-export type PrintGridBreakpointSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';