@12-apps/ui 1.0.0

package/src/components/typography/Code/Code.tsx

@@ -0,0 +1,228 @@
+import { Check,ContentCopy } from '@mui/icons-material';
+import { alpha,Box, IconButton, Tooltip } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { useState } from 'react';
+
+import type { CodeProps } from './Code.types';
+
+const StyledCodeContainer = styled(Box, {
+  shouldForwardProp: (prop) =>
+    !['customVariant', 'customSize', 'copyable'].includes(prop as string),
+})<{
+  customVariant?: string;
+  customSize?: string;
+  copyable?: boolean;
+  component?: React.ElementType;
+}>(({ theme, customVariant = 'inline', customSize = 'md', copyable }) => {
+  // Size mapping
+  const sizeMap = {
+    xs: { fontSize: '0.75rem', padding: '2px 4px' },
+    sm: { fontSize: '0.8125rem', padding: '3px 6px' },
+    md: { fontSize: '0.875rem', padding: '4px 8px' },
+    lg: { fontSize: '1rem', padding: '6px 12px' },
+  };
+
+  const blockSizeMap = {
+    xs: { fontSize: '0.75rem', padding: '8px 12px' },
+    sm: { fontSize: '0.8125rem', padding: '12px 16px' },
+    md: { fontSize: '0.875rem', padding: '16px 20px' },
+    lg: { fontSize: '1rem', padding: '20px 24px' },
+  };
+
+  const baseStyles = {
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace',
+    lineHeight: 1.5,
+    borderRadius: theme.shape.borderRadius,
+    transition: 'all 0.2s ease',
+    position: 'relative' as const,
+  };
+
+  // Variant-specific styles
+  const variantStyles = {
+    inline: {
+      ...baseStyles,
+      display: 'inline',
+      backgroundColor: alpha(theme.palette.primary.main, 0.08),
+      color: theme.palette.primary.main,
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.12)}`,
+      ...sizeMap[customSize as keyof typeof sizeMap],
+    },
+    block: {
+      ...baseStyles,
+      display: 'block',
+      backgroundColor:
+        theme.palette.mode === 'dark'
+          ? alpha(theme.palette.grey[900], 0.95)
+          : alpha(theme.palette.grey[100], 0.95),
+      color:
+        theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.text.primary,
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      overflow: 'auto',
+      whiteSpace: 'pre' as const,
+      ...blockSizeMap[customSize as keyof typeof blockSizeMap],
+      ...(copyable && {
+        paddingTop: blockSizeMap[customSize as keyof typeof blockSizeMap].padding.split(' ')[0],
+        paddingRight: '60px',
+      }),
+    },
+    highlight: {
+      ...baseStyles,
+      display: 'block',
+      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.secondary.main, 0.1)} 100%)`,
+      color: theme.palette.text.primary,
+      border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+      borderLeft: `4px solid ${theme.palette.primary.main}`,
+      overflow: 'auto',
+      whiteSpace: 'pre' as const,
+      ...blockSizeMap[customSize as keyof typeof blockSizeMap],
+      ...(copyable && {
+        paddingTop: blockSizeMap[customSize as keyof typeof blockSizeMap].padding.split(' ')[0],
+        paddingRight: '60px',
+      }),
+    },
+  };
+
+  return variantStyles[customVariant as keyof typeof variantStyles] || variantStyles.inline;
+});
+
+const StyledCode = styled('code')({
+  margin: 0,
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 'none',
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  lineHeight: 'inherit',
+  color: 'inherit',
+});
+
+const CopyButton = styled(IconButton)(({ theme }) => ({
+  position: 'absolute',
+  top: theme.spacing(1),
+  right: theme.spacing(1),
+  width: 32,
+  height: 32,
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? alpha(theme.palette.background.paper, 0.8)
+      : theme.palette.background.paper,
+  backdropFilter: theme.palette.mode === 'dark' ? 'blur(8px)' : 'none',
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : 'none',
+  '&:hover': {
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? alpha(theme.palette.background.paper, 0.9)
+        : theme.palette.grey[100],
+    transform: 'scale(1.05)',
+  },
+  '& .MuiSvgIcon-root': {
+    fontSize: 16,
+  },
+}));
+
+const LanguageLabel = styled(Box)(({ theme }) => ({
+  position: 'absolute',
+  top: theme.spacing(1),
+  left: theme.spacing(2),
+  fontSize: '0.75rem',
+  fontWeight: 500,
+  color: alpha(theme.palette.text.primary, 0.6),
+  backgroundColor:
+    theme.palette.mode === 'dark'
+      ? alpha(theme.palette.background.paper, 0.8)
+      : theme.palette.background.paper,
+  padding: '2px 8px',
+  borderRadius: theme.shape.borderRadius / 2,
+  backdropFilter: theme.palette.mode === 'dark' ? 'blur(8px)' : 'none',
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  boxShadow: theme.palette.mode === 'light' ? theme.shadows[1] : 'none',
+}));
+
+export const Code = React.forwardRef<HTMLElement, CodeProps>(
+  (
+    {
+      variant = 'inline',
+      language,
+      copyable = false,
+      lineNumbers = false,
+      size = 'md',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = async () => {
+      if (typeof children === 'string') {
+        try {
+          await navigator.clipboard.writeText(children);
+          setCopied(true);
+          window.setTimeout(() => setCopied(false), 2000);
+        } catch {
+          // Silently fail if clipboard access is denied
+        }
+      }
+    };
+
+    const isBlock = variant === 'block' || variant === 'highlight';
+    const shouldShowCopy = copyable && isBlock;
+    const shouldShowLanguage = language && isBlock;
+
+    // Process children for line numbers if needed
+    const processedChildren = React.useMemo(() => {
+      if (!lineNumbers || !isBlock || typeof children !== 'string') {
+        return children;
+      }
+
+      return children.split('\n').map((line, index) => {
+        // Use line content hash + line number for more stable keys
+        const stableKey = `line-${index + 1}-${line.slice(0, 10).replace(/\s+/g, '')}-${line.length}`;
+        
+        return (
+          <div key={stableKey} style={{ display: 'flex' }}>
+            <span
+              style={{
+                display: 'inline-block',
+                minWidth: '3em',
+                opacity: 0.5,
+                userSelect: 'none',
+                marginRight: '1em',
+                textAlign: 'right',
+              }}
+            >
+              {index + 1}
+            </span>
+            <span>{line}</span>
+          </div>
+        );
+      });
+    }, [children, lineNumbers, isBlock]);
+
+    return (
+      <StyledCodeContainer
+        ref={ref}
+        component={variant === 'inline' ? 'span' : 'div'}
+        customVariant={variant}
+        customSize={size}
+        copyable={shouldShowCopy}
+        {...props}
+      >
+        {shouldShowLanguage && <LanguageLabel>{language}</LanguageLabel>}
+
+        <StyledCode>{processedChildren}</StyledCode>
+
+        {shouldShowCopy && (
+          <Tooltip title={copied ? 'Copied!' : 'Copy code'}>
+            <CopyButton onClick={handleCopy} size="small" color={copied ? 'success' : 'default'}>
+              {copied ? <Check /> : <ContentCopy />}
+            </CopyButton>
+          </Tooltip>
+        )}
+      </StyledCodeContainer>
+    );
+  },
+);
+
+Code.displayName = 'Code';

package/src/components/typography/Code/Code.types.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+
+export type CodeVariant = 'inline' | 'block' | 'highlight';
+
+export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  variant?: CodeVariant;
+  language?: string;
+  copyable?: boolean;
+  lineNumbers?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  children: React.ReactNode;
+}

package/src/components/typography/Code/index.ts

@@ -0,0 +1,2 @@
+export { Code } from './Code';
+export type { CodeProps } from './Code.types';

package/src/components/typography/Heading/Heading.md

@@ -0,0 +1,143 @@
+# Heading Component
+
+A flexible heading component supporting semantic HTML heading levels (h1-h6) and a special display variant. Features gradient text effects, configurable font weights, color theming, and responsive typography scales.
+
+## Props
+
+| Prop       | Type                                                                          | Default     | Description                                                             |
+| ---------- | ----------------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------- |
+| `level`    | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'display'`                   | `'h2'`      | Semantic heading level. 'display' renders as h1 with larger typography. |
+| `color`    | `'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'neutral'` | `'neutral'` | Theme color variant                                                     |
+| `weight`   | `'light' \| 'normal' \| 'medium' \| 'semibold' \| 'bold'`                     | `'bold'`    | Font weight                                                             |
+| `gradient` | `boolean`                                                                     | `false`     | Enable gradient text effect                                             |
+| `children` | `React.ReactNode`                                                             | -           | Heading content                                                         |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { Heading } from '@procurement/ui';
+
+// Basic heading
+<Heading level="h1">Main Title</Heading>
+
+// Colored heading
+<Heading level="h2" color="primary">Section Title</Heading>
+
+// Custom weight
+<Heading level="h3" weight="light">Subtitle</Heading>
+```
+
+### Display Variant
+
+```tsx
+// Extra large display heading (renders as h1)
+<Heading level="display" color="primary" weight="bold">
+  Hero Title
+</Heading>
+```
+
+### Gradient Text
+
+```tsx
+// Primary-secondary gradient
+<Heading level="h1" color="primary" gradient>
+  Gradient Heading
+</Heading>
+
+// Success gradient
+<Heading level="h2" color="success" gradient>
+  Success Message
+</Heading>
+```
+
+### Responsive Headings
+
+```tsx
+<Heading
+  level="h1"
+  sx={{
+    fontSize: { xs: '1.5rem', sm: '2rem', md: '2.5rem' },
+    textAlign: { xs: 'center', md: 'left' },
+  }}
+>
+  Responsive Heading
+</Heading>
+```
+
+## Typography Scale
+
+- **h1**: 3rem (48px) - Line height 1.1, Letter spacing -0.02em
+- **h2**: 2.5rem (40px) - Line height 1.2, Letter spacing -0.015em
+- **h3**: 2rem (32px) - Line height 1.25, Letter spacing -0.01em
+- **h4**: 1.5rem (24px) - Line height 1.3, Letter spacing -0.005em
+- **h5**: 1.25rem (20px) - Line height 1.4
+- **h6**: 1.125rem (18px) - Line height 1.4
+- **display**: 4rem (64px) - Line height 0.95, Letter spacing -0.03em
+
+## Font Weight Mapping
+
+- **light**: 300
+- **normal**: 400
+- **medium**: 500
+- **semibold**: 600
+- **bold**: 700
+
+### Level-Specific Default Weights
+
+- h1, h2: Bold (700) when weight="normal"
+- h3, h4, h5, h6: Semibold (600) when weight="normal"
+- display: Extra bold (800) when weight="normal"
+
+## Color Theming
+
+All colors are sourced from the MUI theme:
+
+- **primary**: `theme.palette.primary.main`
+- **secondary**: `theme.palette.secondary.main`
+- **success**: `theme.palette.success.main`
+- **warning**: `theme.palette.warning.main`
+- **danger**: `theme.palette.error.main`
+- **neutral**: `theme.palette.text.primary`
+
+## Gradient Effects
+
+Gradient text uses CSS `background-clip: text` with fallback support:
+
+- **Primary**: Linear gradient from primary to secondary colors
+- **Secondary**: Linear gradient from secondary to primary colors
+- **Success**: Linear gradient from success.light to success.dark
+- **Warning**: Linear gradient from warning.light to warning.dark
+- **Danger**: Linear gradient from error.light to error.dark
+- **Default**: Primary to secondary gradient
+
+## Accessibility
+
+- Maintains proper semantic heading hierarchy
+- Supports all HTML heading attributes (`id`, `aria-label`, etc.)
+- Screen reader compatible
+- Keyboard focusable when `tabIndex` is set
+- WCAG compliant color contrast ratios
+
+## Best Practices
+
+1. **Semantic Hierarchy**: Use heading levels semantically (h1 for main title, h2 for sections, etc.)
+2. **Skip Levels**: Avoid skipping heading levels (don't jump from h1 to h3)
+3. **Display Variant**: Use `level="display"` only for hero/marketing content, not document structure
+4. **Gradient Sparingly**: Use gradient text for emphasis, not body content
+5. **Color Contrast**: Ensure sufficient contrast ratios when using custom colors
+6. **Responsive Design**: Consider font size scaling on mobile devices
+
+## Browser Support
+
+- **Gradient Text**: Modern browsers with webkit/moz prefixes
+- **Typography**: All modern browsers
+- **Semantic HTML**: Universal support
+
+## Performance
+
+- Optimized styled-component with `shouldForwardProp`
+- Minimal re-renders through prop filtering
+- Efficient gradient calculations
+- CSS-in-JS compilation optimizations