@idealyst/components 1.0.82 → 1.0.84

package/src/examples/AllExamples.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { Screen, View, Text, Divider } from '../index';
-import { ButtonExamples } from './ButtonExamples';
-import { TextExamples } from './TextExamples';
-import { ViewExamples } from './ViewExamples';
-import { InputExamples } from './InputExamples';
-import { IconExamples } from './IconExamples';
-import { CardExamples } from './CardExamples';
-import { CheckboxExamples } from './CheckboxExamples';
-import { DividerExamples } from './DividerExamples';
-import { BadgeExamples } from './BadgeExamples';
-import { AvatarExamples } from './AvatarExamples';
-import { ScreenExamples } from './ScreenExamples';
-import { SVGImageExamples } from './SVGImageExamples';
-import { DialogExamples } from './DialogExamples';
-import { PopoverExamples } from './PopoverExamples';
-import { ThemeExtensionExamples } from './ThemeExtensionExamples';
-
-export const AllExamples = () => {
-  return (
-    <Screen background="primary" padding="xl">
-      <View spacing="none" style={{ maxWidth: 800, alignSelf: 'center' }}>
-      <Text size="xlarge" weight="bold" align="center" color="primary">
-        Idealyst Component Library Examples
-      </Text>
-      <Text size="medium" align="center" color="secondary">
-        Comprehensive showcase of all available components
-      </Text>
-      
-      <Divider spacing="large" intent="primary">
-        <Text size="small" weight="semibold" color="primary">COMPONENTS</Text>
-      </Divider>
-      
-      <ButtonExamples />
-      <Divider spacing="medium" />
-      
-      <TextExamples />
-      <Divider spacing="medium" />
-      
-      <ViewExamples />
-      <Divider spacing="medium" />
-      
-      <InputExamples />
-      <Divider spacing="medium" />
-      
-      <IconExamples />
-      <Divider spacing="medium" />
-      
-      <CardExamples />
-      <Divider spacing="medium" />
-      
-      <CheckboxExamples />
-      <Divider spacing="medium" />
-      
-      <DividerExamples />
-      <Divider spacing="medium" />
-      
-      <BadgeExamples />
-      <Divider spacing="medium" />
-      
-      <AvatarExamples />
-      <Divider spacing="medium" />
-      
-      <ScreenExamples />
-      <Divider spacing="medium" />
-      
-      <SVGImageExamples />
-      <Divider spacing="medium" />
-      
-      <DialogExamples />
-      <Divider spacing="medium" />
-      
-      <PopoverExamples />
-      <Divider spacing="medium" />
-
-      <Divider spacing="large" intent="success">
-        <Text size="small" weight="semibold" color="green">THEME SYSTEM</Text>
-      </Divider>
-      
-      <ThemeExtensionExamples />
-    </View>
-    </Screen>
-  );
-}; 

package/src/examples/README.md

@@ -1,136 +0,0 @@
-# Component Examples
-
-This directory contains comprehensive examples showcasing all components from the Idealyst component library. Each example demonstrates the various props, variants, and use cases for each component.
-
-## Available Examples
-
-### Individual Component Examples
-- **ButtonExamples**: Demonstrates all button variants, sizes, intents, and states
-- **TextExamples**: Shows text sizes, weights, colors, and alignment options
-- **ViewExamples**: Displays layout capabilities with spacing, backgrounds, and borders
-- **InputExamples**: Covers input types, sizes, variants, and states
-- **CardExamples**: Showcases card layouts, variants, intents, and interactive features
-- **CheckboxExamples**: Demonstrates checkbox states, sizes, intents, and custom content
-- **DividerExamples**: Shows divider orientations, variants, and styling options
-- **BadgeExamples**: Displays badge variants, intents, and use cases
-- **AvatarExamples**: Demonstrates avatar sizes, shapes, and fallback options
-
-### Master Example
-- **AllExamples**: A comprehensive showcase of all components in one scrollable view
-
-## Usage
-
-### Import Individual Examples
-```typescript
-import { ButtonExamples, TextExamples, CardExamples } from '@idealyst/components/examples';
-
-// Use in your component
-<ButtonExamples />
-```
-
-### Import All Examples
-```typescript
-import { AllExamples } from '@idealyst/components/examples';
-
-// Display all examples at once
-<AllExamples />
-```
-
-## Example Structure
-
-Each example component follows this structure:
-- **Header**: Component name and description
-- **Grouped Sections**: Related variants and properties
-- **Interactive Elements**: Demonstrating user interactions
-- **Edge Cases**: Disabled states, error states, etc.
-- **Real-world Usage**: Practical implementation examples
-
-## Features Demonstrated
-
-### Button Examples
-- Variants: contained, outlined, text
-- Sizes: small, medium, large
-- Intents: primary, neutral, success, error, warning
-- States: normal, disabled
-
-### Text Examples
-- Sizes: small, medium, large, xlarge
-- Weights: light, normal, medium, semibold, bold
-- Colors: primary, secondary, success, warning, error
-- Alignment: left, center, right
-
-### View Examples
-- Spacing: none, xs, sm, md, lg, xl
-- Backgrounds: transparent, surface, primary, secondary
-- Border radius: none, xs, sm, md, lg, xl
-- Borders: none, thin, thick
-- Layout patterns: flex layouts, positioning
-
-### Input Examples
-- Types: text, email, password, number
-- Sizes: small, medium, large
-- Variants: default, outlined, filled
-- States: normal, disabled, error, pre-filled
-- Auto-capitalization: none, sentences, words, characters
-
-### Card Examples
-- Variants: default, outlined, elevated, filled
-- Intents: neutral, primary, success, error, warning, info
-- Padding: none, small, medium, large
-- Radius: none, small, medium, large
-- Interactive: clickable, disabled states
-- Complex layouts: multi-element cards
-
-### Checkbox Examples
-- Basic states: checked, unchecked, indeterminate
-- Sizes: small, medium, large
-- Intents: primary, neutral, success, error, warning, info
-- Variants: default, outlined
-- States: normal, disabled
-- Custom content: complex labels, helper text, errors
-
-### Divider Examples
-- Orientations: horizontal, vertical
-- Variants: solid, dashed, dotted
-- Thickness: thin, medium, thick
-- Intents: primary, secondary, neutral, success, error, warning, info
-- Spacing: none, small, medium, large
-- With content: text labels, sections
-
-### Badge Examples
-- Variants: filled, outlined, dot
-- Sizes: small, medium, large
-- Intents: primary, success, error, warning, neutral, info
-- Use cases: numbers, status, categories, notifications
-
-### Avatar Examples
-- Sizes: small, medium, large, xlarge
-- Shapes: circle, square
-- Fallbacks: initials, placeholder text
-- Images: with proper fallbacks
-- Groups: overlapping avatars
-
-## Best Practices
-
-1. **Interactive Testing**: All examples include interactive elements to test functionality
-2. **Accessibility**: Examples demonstrate proper labeling and accessibility features
-3. **Responsive Design**: Components adapt to different screen sizes
-4. **Theme Integration**: All examples use the theme system properly
-5. **Real-world Context**: Examples show practical usage scenarios
-
-## Development Notes
-
-- Examples are built using the same components they demonstrate
-- All examples use TypeScript for type safety
-- Components follow the established design system patterns
-- Examples are optimized for both web and native platforms
-
-## Contributing
-
-When adding new components:
-1. Create a new example file: `ComponentNameExamples.tsx`
-2. Follow the established pattern of grouped sections
-3. Include all variants, sizes, and states
-4. Add interactive elements where applicable
-5. Export the component in `index.ts`
-6. Update the `AllExamples` component to include the new example 

package/src/examples/ValidationExamples.tsx

@@ -1,95 +0,0 @@
-/**
- * Validation Examples
- * 
- * This file demonstrates how the theme validation system works
- * and how components can use it to validate their props.
- */
-
-import React from 'react';
-import { View } from 'react-native';
-import { useUnistyles } from 'react-native-unistyles';
-import Text from '../Text';
-import Button from '../Button';
-import Badge from '../Badge';
-import { validateColorProp, validateIntentProp } from '../theme';
-
-export function ValidationExamples() {
-  const { theme } = useUnistyles();
-
-  // Example: Valid usage
-  const handleValidUsage = () => {
-    console.log('=== Valid Usage Examples ===');
-    
-    // These should not produce warnings
-    validateColorProp(theme, 'blue', 'Text');
-    validateColorProp(theme, 'primary', 'Text');
-    validateIntentProp(theme, 'primary', 'Button');
-    validateIntentProp(theme, 'success', 'Button');
-  };
-
-  // Example: Invalid usage
-  const handleInvalidUsage = () => {
-    console.log('=== Invalid Usage Examples ===');
-    
-    // These should produce warnings in development
-    validateColorProp(theme, 'invalidColor', 'Text');
-    validateColorProp(theme, 'neonPink', 'Text'); 
-    validateIntentProp(theme, 'invalidIntent', 'Button');
-    validateIntentProp(theme, 'danger', 'Button'); // 'danger' doesn't exist, should be 'error'
-  };
-
-  return (
-    <View style={{ padding: 20, gap: 16 }}>
-      <Text size="large" weight="bold">
-        Theme Validation Examples
-      </Text>
-      
-      <Text>
-        Open the browser console to see validation warnings when using invalid colors or intents.
-      </Text>
-
-      {/* Valid examples */}
-      <View style={{ gap: 8 }}>
-        <Text weight="semibold">✅ Valid Usage (no warnings):</Text>
-        <Text color="blue">Blue text (valid palette color)</Text>
-        <Text color="blue">Blue text (valid palette color)</Text>
-        <Button intent="primary" onPress={handleValidUsage}>
-          Valid Button
-        </Button>
-        <Badge color="green">Valid Badge</Badge>
-      </View>
-
-      {/* Invalid examples that would show warnings */}
-      <View style={{ gap: 8 }}>
-        <Text weight="semibold">⚠️ Invalid Usage (shows warnings):</Text>
-        <Button onPress={handleInvalidUsage}>
-          Click to Test Invalid Props (check console)
-        </Button>
-        
-        <Text size="small" color="secondary">
-          Note: The invalid examples are triggered programmatically to avoid 
-          runtime TypeScript errors. In real usage, TypeScript would catch 
-          most of these at compile time.
-        </Text>
-      </View>
-
-      {/* Extensibility example */}
-      <View style={{ gap: 8 }}>
-        <Text weight="semibold">🔧 Extensibility:</Text>
-        <Text size="small">
-          When you add new colors to your theme palette (e.g., 'orange', 'teal'), 
-          they automatically become available in all components that use ColorVariant.
-          The validation system will recognize them as valid options.
-        </Text>
-        
-        <Text size="small">
-          Example: If you add 'orange' to your theme.palettes, then 
-          &lt;Text color="orange"&gt; and &lt;Badge color="orange"&gt; 
-          will work without any code changes to the components.
-        </Text>
-      </View>
-    </View>
-  );
-}
-
-export default ValidationExamples; 

package/src/examples/extendedTheme.ts

@@ -1,329 +0,0 @@
-import { 
-  createTheme, 
-  type ThemeConfig,
-  createStandardPalettes, 
-  createDarkPalettes, 
-  createLightIntentMappings, 
-  createDarkIntentMappings, 
-  createLightColorMappings, 
-  createDarkColorMappings
-} from '@idealyst/theme';
-
-// Extended color palettes - includes all base colors plus additional ones
-export const extendedColorPalettes = {
-  // Include all base colors
-  ...createStandardPalettes(),
-  
-  // Add extended colors
-  orange: {
-    50: '#fff7ed',
-    100: '#ffedd5',
-    200: '#fed7aa',
-    300: '#fdba74',
-    400: '#fb923c',
-    500: '#f97316',
-    600: '#ea580c',
-    700: '#c2410c',
-    800: '#9a3412',
-    900: '#7c2d12',
-  },
-  
-  teal: {
-    50: '#f0fdfa',
-    100: '#ccfbf1',
-    200: '#99f6e4',
-    300: '#5eead4',
-    400: '#2dd4bf',
-    500: '#14b8a6',
-    600: '#0d9488',
-    700: '#0f766e',
-    800: '#115e59',
-    900: '#134e4a',
-  },
-  
-  indigo: {
-    50: '#eef2ff',
-    100: '#e0e7ff',
-    200: '#c7d2fe',
-    300: '#a5b4fc',
-    400: '#818cf8',
-    500: '#6366f1',
-    600: '#4f46e5',
-    700: '#4338ca',
-    800: '#3730a3',
-    900: '#312e81',
-  },
-  
-  violet: {
-    50: '#faf5ff',
-    100: '#f3e8ff',
-    200: '#e9d5ff',
-    300: '#d8b4fe',
-    400: '#c084fc',
-    500: '#a855f7',
-    600: '#9333ea',
-    700: '#7c3aed',
-    800: '#6b21a8',
-    900: '#581c87',
-  },
-  
-  emerald: {
-    50: '#ecfdf5',
-    100: '#d1fae5',
-    200: '#a7f3d0',
-    300: '#6ee7b7',
-    400: '#34d399',
-    500: '#10b981',
-    600: '#059669',
-    700: '#047857',
-    800: '#065f46',
-    900: '#064e3b',
-  },
-} as const;
-
-// Extended color palettes for dark mode
-export const extendedDarkColorPalettes = {
-  // Include all base dark colors
-  ...createDarkPalettes(),
-  
-  // Add the same extended colors (they work well in both light and dark)
-  orange: extendedColorPalettes.orange,
-  teal: extendedColorPalettes.teal,
-  indigo: extendedColorPalettes.indigo,
-  violet: extendedColorPalettes.violet,
-  emerald: extendedColorPalettes.emerald,
-} as const;
-
-// Helper function to create extended light intents
-function createExtendedLightIntents(palettes: typeof extendedColorPalettes) {
-  return {
-    // Include all base intents
-    ...createLightIntentMappings(),
-    
-    // Add extended intents with resolved colors
-    accent: {
-      main: palettes.orange[500],
-      on: '#ffffff',
-      container: palettes.orange[100],
-      onContainer: palettes.orange[800],
-      light: palettes.orange[200],
-      dark: palettes.orange[700],
-      border: palettes.orange[300],
-    },
-    
-    feature: {
-      main: palettes.teal[500],
-      on: '#ffffff',
-      container: palettes.teal[100],
-      onContainer: palettes.teal[800],
-      light: palettes.teal[200],
-      dark: palettes.teal[700],
-      border: palettes.teal[300],
-    },
-    
-    highlight: {
-      main: palettes.violet[500],
-      on: '#ffffff',
-      container: palettes.violet[100],
-      onContainer: palettes.violet[800],
-      light: palettes.violet[200],
-      dark: palettes.violet[700],
-      border: palettes.violet[300],
-    },
-  } as any; // Type assertion for extended intents
-}
-
-// Helper function to create extended dark intents
-function createExtendedDarkIntents(palettes: typeof extendedDarkColorPalettes) {
-  return {
-    // Include all base intents
-    ...createDarkIntentMappings(),
-    
-    // Add extended intents with resolved colors
-    accent: {
-      main: palettes.orange[400],
-      on: palettes.gray[50],
-      container: palettes.orange[200],
-      onContainer: palettes.orange[800],
-      light: palettes.orange[300],
-      dark: palettes.orange[600],
-      border: palettes.orange[400],
-    },
-    
-    feature: {
-      main: palettes.teal[400],
-      on: palettes.gray[50],
-      container: palettes.teal[200],
-      onContainer: palettes.teal[800],
-      light: palettes.teal[300],
-      dark: palettes.teal[600],
-      border: palettes.teal[400],
-    },
-    
-    highlight: {
-      main: palettes.violet[400],
-      on: palettes.gray[50],
-      container: palettes.violet[200],
-      onContainer: palettes.violet[800],
-      light: palettes.violet[300],
-      dark: palettes.violet[600],
-      border: palettes.violet[400],
-    },
-  } as any; // Type assertion for extended intents
-}
-
-// Create extended themes using the new theme builder
-export const extendedThemes = {
-  light: createTheme({
-    name: 'ExtendedLight',
-    mode: 'light',
-    palettes: extendedColorPalettes,
-    intents: createExtendedLightIntents(extendedColorPalettes),
-    colors: createLightColorMappings(),
-    
-    typography: {
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-    },
-    
-    borderRadius: {
-      sm: 4,
-      md: 8,
-      lg: 12,
-      xl: 16,
-      xxl: 20,
-    },
-    
-    spacing: {
-      xs: 4,
-      sm: 8,
-      md: 16,
-      lg: 24,
-      xl: 32,
-      xxl: 40,
-      xxxl: 48,
-    },
-    
-    shadows: {
-      sm: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.05,
-        shadowRadius: 2,
-        elevation: 1,
-      },
-      md: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.1,
-        shadowRadius: 8,
-        elevation: 4,
-      },
-      lg: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 8 },
-        shadowOpacity: 0.15,
-        shadowRadius: 16,
-        elevation: 8,
-      },
-    },
-    
-    transitions: {
-      fast: '0.15s ease',
-      base: '0.2s ease',
-      slow: '0.3s ease',
-      button: 'all 0.2s ease',
-      fade: 'opacity 0.2s ease',
-      slide: 'transform 0.3s ease',
-    },
-  }),
-  
-  dark: createTheme({
-    name: 'ExtendedDark',
-    mode: 'dark',
-    palettes: extendedDarkColorPalettes,
-    intents: createExtendedDarkIntents(extendedDarkColorPalettes),
-    colors: createDarkColorMappings(),
-    
-    typography: {
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-    },
-    
-    borderRadius: {
-      sm: 4,
-      md: 8,
-      lg: 12,
-      xl: 16,
-      xxl: 20,
-    },
-    
-    spacing: {
-      xs: 4,
-      sm: 8,
-      md: 16,
-      lg: 24,
-      xl: 32,
-      xxl: 40,
-      xxxl: 48,
-    },
-    
-    shadows: {
-      sm: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.2,
-        shadowRadius: 2,
-        elevation: 1,
-      },
-      md: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.3,
-        shadowRadius: 8,
-        elevation: 4,
-      },
-      lg: {
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 8 },
-        shadowOpacity: 0.4,
-        shadowRadius: 16,
-        elevation: 8,
-      },
-    },
-    
-    transitions: {
-      fast: '0.15s ease',
-      base: '0.2s ease',
-      slow: '0.3s ease',
-      button: 'all 0.2s ease',
-      fade: 'opacity 0.2s ease',
-      slide: 'transform 0.3s ease',
-    },
-  }),
-} as const;
-
-// Extended type definitions for TypeScript
-export type ExtendedColorVariant = 
-  | 'blue'
-  | 'green' 
-  | 'red'
-  | 'amber'
-  | 'gray'
-  | 'purple'
-  | 'pink'
-  | 'cyan'
-  | 'orange'
-  | 'teal'
-  | 'indigo'
-  | 'violet'
-  | 'emerald';
-
-export type ExtendedIntentVariant = 
-  | 'primary'
-  | 'success' 
-  | 'error'
-  | 'warning'
-  | 'neutral'
-  | 'info'
-  | 'accent'
-  | 'feature'
-  | 'highlight';

package/src/theme/breakpoints.ts

@@ -1,8 +0,0 @@
-export const breakpoints = {
-  xs: 0,
-  sm: 400,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-} as const;
-