@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/components/ui/feedback/types.esm.js

@@ -2,124 +2,124 @@ import React from 'react';
 
 // Base props for all feedback components
 export interface FeedbackBaseProps {
-  className?;
-  theme?;
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
 }
 
 // Alert Component Types
 export interface AlertProps extends FeedbackBaseProps {
-  title?;
-  message;
-  type;
-  dismissible?;
-  onDismiss?) => void;
-  icon?;
-  actions?];
-  showIcon?;
-  closable?;
-  persistent?;
-  size?;
-  variant?;
+  title?: string;
+  message: string;
+  type: 'success' | 'warning' | 'error' | 'info';
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  icon?: React.ReactNode;
+  actions?: AlertAction[];
+  showIcon?: boolean;
+  closable?: boolean;
+  persistent?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'filled';
 }
 
 export interface AlertAction {
-  label;
-  onClick) => void;
-  variant?;
-  size?;
+  label: string;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
 }
 
 // Toast Component Types
 export interface ToastProps extends FeedbackBaseProps {
-  id;
-  title?;
-  message;
-  type;
-  duration?; // milliseconds, 0 = persistent
-  onClose?) => void;
-  onAction?) => void;
-  actions?];
-  icon?;
-  showIcon?;
-  closable?;
-  position?;
-  autoClose?;
-  pauseOnHover?;
-  draggable?;
-  progress?;
-  size?;
-  variant?;
+  id: string;
+  title?: string;
+  message: string;
+  type: 'success' | 'warning' | 'error' | 'info' | 'default';
+  duration?: number; // milliseconds, 0 = persistent
+  onClose?: () => void;
+  onAction?: (action: string) => void;
+  actions?: ToastAction[];
+  icon?: React.ReactNode;
+  showIcon?: boolean;
+  closable?: boolean;
+  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+  autoClose?: boolean;
+  pauseOnHover?: boolean;
+  draggable?: boolean;
+  progress?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'filled';
 }
 
 export interface ToastAction {
-  label;
-  action;
-  variant?;
+  label: string;
+  action: string;
+  variant?: 'primary' | 'secondary' | 'ghost';
 }
 
 export interface ToastContainerProps {
-  position?];
-  maxToasts?;
-  autoClose?;
-  pauseOnHover?;
-  draggable?;
-  progress?;
-  className?;
-  theme?;
+  position?: ToastProps['position'];
+  maxToasts?: number;
+  autoClose?: boolean;
+  pauseOnHover?: boolean;
+  draggable?: boolean;
+  progress?: boolean;
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
 }
 
 // Progress Component Types
 export interface ProgressProps extends FeedbackBaseProps {
-  value; // 0-100
-  max?;
-  min?;
-  label?;
-  showLabel?;
-  showValue?;
-  showPercentage?;
-  animated?;
-  striped?;
-  color?;
-  size?;
-  variant?;
-  thickness?;
-  trackColor?;
-  progressColor?;
-  indeterminate?;
-  onComplete?) => void;
+  value: number; // 0-100
+  max?: number;
+  min?: number;
+  label?: string;
+  showLabel?: boolean;
+  showValue?: boolean;
+  showPercentage?: boolean;
+  animated?: boolean;
+  striped?: boolean;
+  color?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'linear' | 'circular' | 'steps';
+  thickness?: number;
+  trackColor?: string;
+  progressColor?: string;
+  indeterminate?: boolean;
+  onComplete?: () => void;
 }
 
 export interface ProgressStep {
-  label;
-  value;
-  status;
-  description?;
+  label: string;
+  value: number;
+  status: 'pending' | 'active' | 'completed' | 'error';
+  description?: string;
 }
 
 // Skeleton Component Types
 export interface SkeletonProps extends FeedbackBaseProps {
-  width?;
-  height?;
-  variant?;
-  animation?;
-  rows?;
-  spacing?;
-  show?;
-  className?;
-  size?;
+  width?: string | number;
+  height?: string | number;
+  variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
+  animation?: 'pulse' | 'wave' | 'none';
+  rows?: number;
+  spacing?: number;
+  show?: boolean;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export interface SkeletonTextProps extends SkeletonProps {
-  lines?;
-  lineHeight?;
-  lastLineWidth?;
+  lines?: number;
+  lineHeight?: string | number;
+  lastLineWidth?: string | number;
 }
 
 export interface SkeletonAvatarProps extends SkeletonProps {
-  size?;
-  shape?;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  shape?: 'circular' | 'square' | 'rounded';
 }
 
 export interface SkeletonButtonProps extends SkeletonProps {
-  fullWidth?;
+  fullWidth?: boolean;
 }

package/dist/components/ui/feedback/types.js

@@ -2,124 +2,124 @@ import React from 'react';
 
 // Base props for all feedback components
 export interface FeedbackBaseProps {
-  className?;
-  theme?;
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
 }
 
 // Alert Component Types
 export interface AlertProps extends FeedbackBaseProps {
-  title?;
-  message;
-  type;
-  dismissible?;
-  onDismiss?) => void;
-  icon?;
-  actions?];
-  showIcon?;
-  closable?;
-  persistent?;
-  size?;
-  variant?;
+  title?: string;
+  message: string;
+  type: 'success' | 'warning' | 'error' | 'info';
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  icon?: React.ReactNode;
+  actions?: AlertAction[];
+  showIcon?: boolean;
+  closable?: boolean;
+  persistent?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'filled';
 }
 
 export interface AlertAction {
-  label;
-  onClick) => void;
-  variant?;
-  size?;
+  label: string;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
 }
 
 // Toast Component Types
 export interface ToastProps extends FeedbackBaseProps {
-  id;
-  title?;
-  message;
-  type;
-  duration?; // milliseconds, 0 = persistent
-  onClose?) => void;
-  onAction?) => void;
-  actions?];
-  icon?;
-  showIcon?;
-  closable?;
-  position?;
-  autoClose?;
-  pauseOnHover?;
-  draggable?;
-  progress?;
-  size?;
-  variant?;
+  id: string;
+  title?: string;
+  message: string;
+  type: 'success' | 'warning' | 'error' | 'info' | 'default';
+  duration?: number; // milliseconds, 0 = persistent
+  onClose?: () => void;
+  onAction?: (action: string) => void;
+  actions?: ToastAction[];
+  icon?: React.ReactNode;
+  showIcon?: boolean;
+  closable?: boolean;
+  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+  autoClose?: boolean;
+  pauseOnHover?: boolean;
+  draggable?: boolean;
+  progress?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'filled';
 }
 
 export interface ToastAction {
-  label;
-  action;
-  variant?;
+  label: string;
+  action: string;
+  variant?: 'primary' | 'secondary' | 'ghost';
 }
 
 export interface ToastContainerProps {
-  position?];
-  maxToasts?;
-  autoClose?;
-  pauseOnHover?;
-  draggable?;
-  progress?;
-  className?;
-  theme?;
+  position?: ToastProps['position'];
+  maxToasts?: number;
+  autoClose?: boolean;
+  pauseOnHover?: boolean;
+  draggable?: boolean;
+  progress?: boolean;
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
 }
 
 // Progress Component Types
 export interface ProgressProps extends FeedbackBaseProps {
-  value; // 0-100
-  max?;
-  min?;
-  label?;
-  showLabel?;
-  showValue?;
-  showPercentage?;
-  animated?;
-  striped?;
-  color?;
-  size?;
-  variant?;
-  thickness?;
-  trackColor?;
-  progressColor?;
-  indeterminate?;
-  onComplete?) => void;
+  value: number; // 0-100
+  max?: number;
+  min?: number;
+  label?: string;
+  showLabel?: boolean;
+  showValue?: boolean;
+  showPercentage?: boolean;
+  animated?: boolean;
+  striped?: boolean;
+  color?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'linear' | 'circular' | 'steps';
+  thickness?: number;
+  trackColor?: string;
+  progressColor?: string;
+  indeterminate?: boolean;
+  onComplete?: () => void;
 }
 
 export interface ProgressStep {
-  label;
-  value;
-  status;
-  description?;
+  label: string;
+  value: number;
+  status: 'pending' | 'active' | 'completed' | 'error';
+  description?: string;
 }
 
 // Skeleton Component Types
 export interface SkeletonProps extends FeedbackBaseProps {
-  width?;
-  height?;
-  variant?;
-  animation?;
-  rows?;
-  spacing?;
-  show?;
-  className?;
-  size?;
+  width?: string | number;
+  height?: string | number;
+  variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
+  animation?: 'pulse' | 'wave' | 'none';
+  rows?: number;
+  spacing?: number;
+  show?: boolean;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export interface SkeletonTextProps extends SkeletonProps {
-  lines?;
-  lineHeight?;
-  lastLineWidth?;
+  lines?: number;
+  lineHeight?: string | number;
+  lastLineWidth?: string | number;
 }
 
 export interface SkeletonAvatarProps extends SkeletonProps {
-  size?;
-  shape?;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  shape?: 'circular' | 'square' | 'rounded';
 }
 
 export interface SkeletonButtonProps extends SkeletonProps {
-  fullWidth?;
+  fullWidth?: boolean;
 }

package/dist/components/ui/font-preview.esm.js

@@ -5,13 +5,13 @@ import { useTheme } from '../../themes';
 import { FontConfig } from '../../themes/types';
 
 export interface FontPreviewProps {
-  fontConfig?;
-  fontType?;
-  showAllVariations?;
-  className?;
+  fontConfig?: FontConfig;
+  fontType?: 'primary' | 'secondary' | 'display' | 'body' | 'mono';
+  showAllVariations?: boolean;
+  className?: string;
 }
 
-export const FontPreview= ({
+export const FontPreview: React.FC<FontPreviewProps> = ({
   fontConfig,
   fontType = 'primary',
   showAllVariations = false,
@@ -37,7 +37,7 @@ export const FontPreview= ({
   // Build full font family string with fallbacks
   const fullFontFamily = fallbacks 
     ? `${family}, ${fallbacks.join(', ')}`
-    ;
+    : family;
 
   // Sample text for preview
   const sampleText = "The quick brown fox jumps over the lazy dog";
@@ -64,7 +64,7 @@ export const FontPreview= ({
           <span className="font-mono text-xs">{family}</span>
           {fallbacks && fallbacks.length > 0 && (
             <div className="mt-1 text-xs text-muted-foreground">
-              Fallbacks, 3).join(', ')}
+              Fallbacks: {fallbacks.slice(0, 3).join(', ')}
               {fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`}
             </div>
           )}
@@ -83,9 +83,10 @@ export const FontPreview= ({
                 </Badge>
                 <p 
                   style={{ 
-                    fontFamily,
-                    fontWeight,
-                    fontSize}}
+                    fontFamily: fullFontFamily,
+                    fontWeight: weight,
+                    fontSize: sizes?.md || '1rem'
+                  }}
                   className="flex-1"
                 >
                   {sampleText}
@@ -109,9 +110,9 @@ export const FontPreview= ({
                     <span className="text-xs text-muted-foreground w-16">{value}</span>
                     <p 
                       style={{ 
-                        fontFamily,
-                        fontSize,
-                        fontWeight] || 400
+                        fontFamily: fullFontFamily,
+                        fontSize: value,
+                        fontWeight: weights?.[0] || 400
                       }}
                     >
                       Sample text
@@ -135,10 +136,10 @@ export const FontPreview= ({
                     </div>
                     <p 
                       style={{ 
-                        fontFamily,
-                        fontSize,
-                        lineHeight,
-                        fontWeight] || 400
+                        fontFamily: fullFontFamily,
+                        fontSize: sizes?.md || '1rem',
+                        lineHeight: value,
+                        fontWeight: weights?.[0] || 400
                       }}
                       className="text-sm border-l-2 border-muted pl-4"
                     >
@@ -163,10 +164,10 @@ export const FontPreview= ({
                     <span className="text-xs text-muted-foreground w-16">{value}</span>
                     <p 
                       style={{ 
-                        fontFamily,
-                        fontSize,
-                        letterSpacing,
-                        fontWeight] || 400
+                        fontFamily: fullFontFamily,
+                        fontSize: sizes?.md || '1rem',
+                        letterSpacing: value,
+                        fontWeight: weights?.[0] || 400
                       }}
                       className="flex-1"
                     >
@@ -187,9 +188,9 @@ export const FontPreview= ({
               <span className="text-xs text-muted-foreground block mb-1">Alphabet</span>
               <p 
                 style={{ 
-                  fontFamily,
-                  fontSize,
-                  fontWeight] || 400
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.md || '1rem',
+                  fontWeight: weights?.[0] || 400
                 }}
                 className="text-sm"
               >
@@ -201,10 +202,11 @@ export const FontPreview= ({
               <span className="text-xs text-muted-foreground block mb-1">Numbers</span>
               <p 
                 style={{ 
-                  fontFamily,
-                  fontSize,
-                  fontWeight] || 400,
-                  letterSpacing}}
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.lg || '1.125rem',
+                  fontWeight: weights?.[0] || 400,
+                  letterSpacing: letterSpacing?.wide || '0.025em'
+                }}
                 className="text-sm"
               >
                 {sampleNumbers}
@@ -215,9 +217,9 @@ export const FontPreview= ({
               <span className="text-xs text-muted-foreground block mb-1">Special Characters</span>
               <p 
                 style={{ 
-                  fontFamily,
-                  fontSize,
-                  fontWeight] || 400
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.sm || '0.875rem',
+                  fontWeight: weights?.[0] || 400
                 }}
                 className="text-sm"
               >
@@ -232,15 +234,15 @@ export const FontPreview= ({
           <div className="pt-4 border-t">
             <h4 className="text-sm font-medium mb-2">Font Loading</h4>
             <div className="space-y-1 text-xs text-muted-foreground">
-              <div>Source="capitalize">{source.type}</span></div>
-              {source.url && <div>URL}</div>}
+              <div>Source: <span className="capitalize">{source.type}</span></div>
+              {source.url && <div>URL: {source.url}</div>}
               {source.files && (
                 <div>
-                  Files).join(', ')}
+                  Files: {Object.keys(source.files).join(', ')}
                 </div>
               )}
               {config.display && (
-                <div>Display}</div>
+                <div>Display: {config.display}</div>
               )}
             </div>
           </div>
@@ -252,11 +254,11 @@ export const FontPreview= ({
 
 // Multi-font preview component
 export interface FontShowcaseProps {
-  showAllVariations?;
-  className?;
+  showAllVariations?: boolean;
+  className?: string;
 }
 
-export const FontShowcase= ({
+export const FontShowcase: React.FC<FontShowcaseProps> = ({
   showAllVariations = false,
   className = ''
 }) => {
@@ -270,7 +272,7 @@ export const FontShowcase= ({
     );
   }
 
-  const fontTypes= ['primary', 'secondary', 'display', 'body', 'mono'];
+  const fontTypes: Array<keyof typeof currentThemeConfig.fonts> = ['primary', 'secondary', 'display', 'body', 'mono'];
 
   return (
     <div className={`space-y-6 ${className}`}>