@jmruthers/pace-core 0.5.54 → 0.5.56

package/src/components/PrintSection/PrintSection.tsx

@@ -1,129 +0,0 @@
-/**
- * @file PrintSection Component
- * @package @jmruthers/pace-core
- * @module PrintSection
- * @since 0.4.38
- * 
- * Print-optimized section component for content organization with column layouts.
- */
-
-import React from 'react';
-import { cn } from '../../utils/cn';
-import { PrintText } from '../PrintText';
-import { PrintSectionProps } from './types';
-
-export function PrintSection({
-  children,
-  title,
-  subtitle,
-  layout = 'single',
-  gap = 'md',
-  spacing = 'md',
-  showBorder = false,
-  background = 'transparent',
-  printOptimized = true,
-  className,
-  ...props
-}: PrintSectionProps) {
-  const getLayoutClasses = (layout: string): string => {
-    switch (layout) {
-      case 'two-column':
-        return 'grid grid-cols-2';
-      case 'three-column':
-        return 'grid grid-cols-3';
-      case 'four-column':
-        return 'grid grid-cols-4';
-      default:
-        return 'block';
-    }
-  };
-
-  const getGapClasses = (gap: string): string => {
-    switch (gap) {
-      case 'sm':
-        return 'gap-2';
-      case 'lg':
-        return 'gap-6';
-      case 'xl':
-        return 'gap-8';
-      default:
-        return 'gap-4';
-    }
-  };
-
-  const getSpacingClasses = (spacing: string): string => {
-    switch (spacing) {
-      case 'none':
-        return 'py-0';
-      case 'sm':
-        return 'py-2';
-      case 'lg':
-        return 'py-6';
-      case 'xl':
-        return 'py-8';
-      default:
-        return 'py-4';
-    }
-  };
-
-  const getBackgroundClasses = (background: string): string => {
-    switch (background) {
-      case 'white':
-        return 'bg-background';
-      case 'gray':
-        return 'bg-muted';
-      case 'primary':
-        return 'bg-primary text-primary-foreground';
-      case 'secondary':
-        return 'bg-secondary text-secondary-foreground';
-      default:
-        return 'bg-transparent';
-    }
-  };
-
-  const getBorderClasses = (): string => {
-    if (!showBorder) return '';
-    return 'border border-border rounded-lg p-4';
-  };
-
-  const getPrintOptimizedClasses = (): string => {
-    if (!printOptimized) return '';
-    return cn(
-      'print:break-inside-avoid',
-      'print:mb-4',
-      'print:border-black',
-      'print:bg-white',
-      'print:text-black'
-    );
-  };
-
-  return (
-    <section
-      className={cn(
-        'print-section',
-        getLayoutClasses(layout),
-        getGapClasses(gap),
-        getSpacingClasses(spacing),
-        getBackgroundClasses(background),
-        getBorderClasses(),
-        getPrintOptimizedClasses(),
-        className
-      )}
-      {...props}
-    >
-      {title && (
-        <div className="mb-4">
-          <PrintText variant="heading" weight="semibold">
-            {title}
-          </PrintText>
-          {subtitle && (
-            <PrintText variant="caption" color="muted" className="mt-1">
-              {subtitle}
-            </PrintText>
-          )}
-        </div>
-      )}
-      {children}
-    </section>
-  );
-}

package/src/components/PrintSection/PrintSectionContent.tsx

@@ -1,75 +0,0 @@
-/**
- * @file PrintSectionContent Component
- * @package @jmruthers/pace-core
- * @module PrintSectionContent
- * @since 0.4.38
- * 
- * Print-optimized section content component.
- */
-
-import React from 'react';
-import { cn } from '../../utils/cn';
-import { PrintSectionContentProps } from './types';
-
-export function PrintSectionContent({
-  children,
-  padding = 'md',
-  background = 'transparent',
-  printOptimized = true,
-  className,
-  ...props
-}: PrintSectionContentProps) {
-  const getPaddingClasses = (padding: string): string => {
-    switch (padding) {
-      case 'none':
-        return 'p-0';
-      case 'sm':
-        return 'p-2';
-      case 'lg':
-        return 'p-6';
-      default:
-        return 'p-4';
-    }
-  };
-
-  const getBackgroundClasses = (background: string): string => {
-    switch (background) {
-      case 'white':
-        return 'bg-background';
-      case 'gray':
-        return 'bg-muted';
-      case 'primary':
-        return 'bg-primary text-primary-foreground';
-      case 'secondary':
-        return 'bg-secondary text-secondary-foreground';
-      default:
-        return 'bg-transparent';
-    }
-  };
-
-  const getPrintOptimizedClasses = (): string => {
-    if (!printOptimized) return '';
-    return cn(
-      'print:break-inside-avoid',
-      'print:text-sm',
-      'print:leading-tight',
-      'print:bg-white',
-      'print:text-black'
-    );
-  };
-
-  return (
-    <div
-      className={cn(
-        'print-section-content',
-        getPaddingClasses(padding),
-        getBackgroundClasses(background),
-        getPrintOptimizedClasses(),
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}

package/src/components/PrintSection/PrintSectionHeader.tsx

@@ -1,97 +0,0 @@
-/**
- * @file PrintSectionHeader Component
- * @package @jmruthers/pace-core
- * @module PrintSectionHeader
- * @since 0.4.38
- * 
- * Print-optimized section header component.
- */
-
-import React from 'react';
-import { cn } from '../../utils/cn';
-import { PrintText } from '../PrintText';
-import { PrintSectionHeaderProps } from './types';
-
-export function PrintSectionHeader({
-  children,
-  title,
-  subtitle,
-  level = 2,
-  align = 'left',
-  showDivider = false,
-  printOptimized = true,
-  className,
-  ...props
-}: PrintSectionHeaderProps) {
-  const getAlignmentClasses = (align: string): string => {
-    switch (align) {
-      case 'center':
-        return 'text-center';
-      case 'right':
-        return 'text-right';
-      default:
-        return 'text-left';
-    }
-  };
-
-  const getDividerClasses = (): string => {
-    if (!showDivider) return '';
-    return 'border-b border-border pb-2 mb-4';
-  };
-
-  const getPrintOptimizedClasses = (): string => {
-    if (!printOptimized) return '';
-    return cn(
-      'print:break-after-avoid',
-      'print:mb-2',
-      'print:border-black'
-    );
-  };
-
-  const getHeadingVariant = (level: number) => {
-    switch (level) {
-      case 1:
-        return 'heading' as const;
-      case 2:
-        return 'heading' as const;
-      case 3:
-        return 'subheading' as const;
-      case 4:
-        return 'subheading' as const;
-      case 5:
-        return 'body' as const;
-      case 6:
-        return 'body' as const;
-      default:
-        return 'heading' as const;
-    }
-  };
-
-  const HeadingTag = `h${level}` as keyof JSX.IntrinsicElements;
-
-  return (
-    <HeadingTag
-      className={cn(
-        'print-section-header',
-        'mb-4',
-        getAlignmentClasses(align),
-        getDividerClasses(),
-        getPrintOptimizedClasses(),
-        className
-      )}
-      {...props}
-    >
-      {title && (
-        <PrintText variant={getHeadingVariant(level)} weight="semibold">
-          {title}
-        </PrintText>
-      )}
-      {subtitle && (
-        <PrintText variant="caption" color="muted" className="mt-1">
-          {subtitle}
-        </PrintText>
-      )}
-      {children}
-    </HeadingTag>
-  );
-}

package/src/components/PrintSection/examples/PrintSectionShowcase.tsx

@@ -1,258 +0,0 @@
-/**
- * @file PrintSection Showcase Example
- * @package @jmruthers/pace-core
- * @module PrintSectionShowcase
- * @since 0.4.38
- * 
- * Example showcasing PrintSection components usage.
- */
-
-import React from 'react';
-import { 
-  PrintLayout,
-  PrintHeader,
-  PrintText,
-  PrintSection, 
-  PrintSectionHeader, 
-  PrintSectionContent, 
-  PrintColumn, 
-  PrintDivider 
-} from '../../index';
-
-export function PrintSectionShowcase() {
-  return (
-    <PrintLayout
-      orientation="portrait"
-      pageSize="A4"
-      firstPageHeader={
-        <PrintHeader
-          title="Print Section Components Showcase"
-          subtitle="Demonstrating content organization and column layouts"
-          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">
-        {/* Single Column Section */}
-        <PrintSection title="Single Column Layout" background="white" showBorder>
-          <PrintSectionContent>
-            <PrintText>
-              This is a single column section with a white background and border. 
-              It's perfect for main content areas that need to stand out.
-            </PrintText>
-            <PrintText className="mt-2">
-              The content is organized in a clean, readable format that works well for both screen and print.
-            </PrintText>
-          </PrintSectionContent>
-        </PrintSection>
-
-        {/* Two Column Section */}
-        <PrintSection 
-          title="Two Column Layout" 
-          layout="two-column" 
-          background="gray" 
-          gap="lg"
-        >
-          <PrintColumn width="1/2">
-            <PrintSectionHeader title="Left Column" level={3} showDivider>
-              <PrintText variant="heading">Left Column</PrintText>
-            </PrintSectionHeader>
-            <PrintSectionContent>
-              <PrintText>
-                This is the left column content. It can contain any type of content 
-                including text, images, or other components.
-              </PrintText>
-              <PrintText className="mt-2">
-                The column system automatically handles responsive behavior and print optimization.
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-          
-          <PrintColumn width="1/2">
-            <PrintSectionHeader title="Right Column" level={3} showDivider>
-              <PrintText variant="heading">Right Column</PrintText>
-            </PrintSectionHeader>
-            <PrintSectionContent>
-              <PrintText>
-                This is the right column content. Both columns will have equal width 
-                and proper spacing between them.
-              </PrintText>
-              <PrintText className="mt-2">
-                The layout adapts to different screen sizes and print formats.
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-        </PrintSection>
-
-        {/* Three Column Section */}
-        <PrintSection 
-          title="Three Column Layout" 
-          layout="three-column" 
-          background="transparent"
-          spacing="lg"
-        >
-          <PrintColumn width="1/3" align="center" verticalAlign="top">
-            <PrintSectionContent background="white" padding="sm">
-              <PrintText variant="subheading" weight="semibold">
-                Column 1
-              </PrintText>
-              <PrintText variant="small">
-                Centered content with white background
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-          
-          <PrintColumn width="1/3" align="center" verticalAlign="top">
-            <PrintSectionContent background="primary" padding="sm">
-              <PrintText variant="subheading" weight="semibold">
-                Column 2
-              </PrintText>
-              <PrintText variant="small">
-                Primary background with centered text
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-          
-          <PrintColumn width="1/3" align="center" verticalAlign="top">
-            <PrintSectionContent background="secondary" padding="sm">
-              <PrintText variant="subheading" weight="semibold">
-                Column 3
-              </PrintText>
-              <PrintText variant="small">
-                Secondary background styling
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-        </PrintSection>
-
-        {/* Divider Examples */}
-        <PrintSection title="Divider Examples" background="white" showBorder>
-          <PrintSectionContent>
-            <PrintText>
-              Here are different types of dividers that can be used to separate content sections.
-            </PrintText>
-            
-            <PrintDivider style="solid" color="default" thickness="thin" spacing="md" />
-            
-            <PrintText variant="small" color="muted">
-              Solid thin divider (default)
-            </PrintText>
-            
-            <PrintDivider style="dashed" color="primary" thickness="medium" spacing="md" />
-            
-            <PrintText variant="small" color="muted">
-              Dashed medium divider (primary color)
-            </PrintText>
-            
-            <PrintDivider style="dotted" color="accent" thickness="thick" spacing="md" />
-            
-            <PrintText variant="small" color="muted">
-              Dotted thick divider (accent color)
-            </PrintText>
-          </PrintSectionContent>
-        </PrintSection>
-
-        {/* Mixed Layout Section */}
-        <PrintSection 
-          title="Mixed Layout Example" 
-          layout="two-column" 
-          background="transparent"
-          gap="xl"
-        >
-          <PrintColumn width="2/3">
-            <PrintSectionHeader title="Main Content" level={3} showDivider>
-              <PrintText variant="heading">Main Content</PrintText>
-            </PrintSectionHeader>
-            <PrintSectionContent>
-              <PrintText>
-                This is the main content area that takes up two-thirds of the width. 
-                It's perfect for detailed information, articles, or primary content.
-              </PrintText>
-              <PrintText className="mt-2">
-                The content can include multiple paragraphs, lists, tables, or any other 
-                components that need more space to be properly displayed.
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-          
-          <PrintColumn width="1/3">
-            <PrintSectionHeader title="Sidebar" level={3} showDivider>
-              <PrintText variant="heading">Sidebar</PrintText>
-            </PrintSectionHeader>
-            <PrintSectionContent background="gray" padding="sm">
-              <PrintText variant="small" weight="semibold">
-                Quick Info
-              </PrintText>
-              <PrintText variant="small" className="mt-1">
-                This sidebar contains supplementary information, links, or quick reference material.
-              </PrintText>
-              <PrintText variant="small" className="mt-2">
-                It's perfect for navigation, contact information, or related content.
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-        </PrintSection>
-
-        {/* Four Column Section */}
-        <PrintSection 
-          title="Four Column Layout" 
-          layout="four-column" 
-          background="white"
-          showBorder
-          spacing="sm"
-        >
-          <PrintColumn width="1/4" align="center">
-            <PrintSectionContent padding="sm" background="transparent">
-              <PrintText variant="small" weight="semibold">
-                Item 1
-              </PrintText>
-              <PrintText variant="small">
-                Brief description
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-          
-          <PrintColumn width="1/4" align="center">
-            <PrintSectionContent padding="sm" background="transparent">
-              <PrintText variant="small" weight="semibold">
-                Item 2
-              </PrintText>
-              <PrintText variant="small">
-                Brief description
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-          
-          <PrintColumn width="1/4" align="center">
-            <PrintSectionContent padding="sm" background="transparent">
-              <PrintText variant="small" weight="semibold">
-                Item 3
-              </PrintText>
-              <PrintText variant="small">
-                Brief description
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-          
-          <PrintColumn width="1/4" align="center">
-            <PrintSectionContent padding="sm" background="transparent">
-              <PrintText variant="small" weight="semibold">
-                Item 4
-              </PrintText>
-              <PrintText variant="small">
-                Brief description
-              </PrintText>
-            </PrintSectionContent>
-          </PrintColumn>
-        </PrintSection>
-      </div>
-    </PrintLayout>
-  );
-}

package/src/components/PrintSection/index.ts

@@ -1,33 +0,0 @@
-/**
- * @file PrintSection Exports
- * @package @jmruthers/pace-core
- * @module PrintSection
- * @since 0.4.38
- * 
- * Exports for PrintSection components.
- */
-
-export { PrintSection } from './PrintSection';
-export { PrintSectionHeader } from './PrintSectionHeader';
-export { PrintSectionContent } from './PrintSectionContent';
-export { PrintColumn } from './PrintColumn';
-export { PrintDivider } from './PrintDivider';
-
-export type {
-  PrintSectionProps,
-  PrintSectionHeaderProps,
-  PrintSectionContentProps,
-  PrintColumnProps,
-  PrintDividerProps,
-  PrintSectionLayout,
-  PrintSectionGap,
-  PrintSectionSpacing,
-  PrintSectionBackground,
-  PrintSectionAlignment,
-  PrintSectionPadding,
-  PrintColumnWidth,
-  PrintVerticalAlignment,
-  PrintDividerStyle,
-  PrintDividerColor,
-  PrintDividerThickness,
-} from './types';