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

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

@@ -1,288 +1,61 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
 import { Badge } from './badge';
 import { useTheme } from '../../themes';
-import { FontConfig } from '../../themes/types';
-
-export interface FontPreviewProps {
-  fontConfig?: FontConfig;
-  fontType?: 'primary' | 'secondary' | 'display' | 'body' | 'mono';
-  showAllVariations?: boolean;
-  className?: string;
-}
-
-export const FontPreview: React.FC<FontPreviewProps> = ({
-  fontConfig,
-  fontType = 'primary',
-  showAllVariations = false,
-  className = ''
-}) => {
-  const { currentThemeConfig } = useTheme();
-  
-  // Use provided fontConfig or get from current theme
-  const config = fontConfig || currentThemeConfig?.fonts[fontType];
-  
-  if (!config) {
-    return (
-      <Card className={className}>
-        <CardContent className="p-4">
-          <p className="text-sm text-muted-foreground">Font configuration not available</p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  const { family, weights, sizes, lineHeights, letterSpacing, fallbacks, source } = config;
-  
-  // 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";
-  const sampleNumbers = "1234567890";
-  const sampleSpecial = "!@#$%^&*()_+-={}[]|\\:;\"'<>,.?/";
-
-  return (
-    <Card className={className}>
-      <CardHeader>
-        <CardTitle className="flex items-center justify-between">
-          <span className="capitalize">{fontType} Font</span>
-          <div className="flex gap-2">
-            {source && (
-              <Badge variant="outline" className="text-xs">
-                {source.type}
-              </Badge>
-            )}
-            <Badge variant="secondary" className="text-xs">
-              {weights?.length || 0} weights
-            </Badge>
-          </div>
-        </CardTitle>
-        <CardDescription>
-          <span className="font-mono text-xs">{family}</span>
-          {fallbacks && fallbacks.length > 0 && (
-            <div className="mt-1 text-xs text-muted-foreground">
-              Fallbacks: {fallbacks.slice(0, 3).join(', ')}
-              {fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`}
-            </div>
-          )}
-        </CardDescription>
-      </CardHeader>
-      
-      <CardContent className="space-y-6">
-        {/* Font Weights Preview */}
-        <div>
-          <h4 className="text-sm font-medium mb-3">Font Weights</h4>
-          <div className="space-y-2">
-            {weights?.map(weight => (
-              <div key={weight} className="flex items-center gap-4">
-                <Badge variant="outline" className="text-xs w-12 justify-center">
-                  {weight}
-                </Badge>
-                <p 
-                  style={{ 
-                    fontFamily: fullFontFamily,
-                    fontWeight: weight,
-                    fontSize: sizes?.md || '1rem'
-                  }}
-                  className="flex-1"
-                >
-                  {sampleText}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {showAllVariations && (
-          <>
-            {/* Font Sizes Preview */}
-            <div>
-              <h4 className="text-sm font-medium mb-3">Font Sizes</h4>
-              <div className="space-y-2">
-                {Object.entries(sizes || {}).map(([size, value]) => (
-                  <div key={size} className="flex items-center gap-4">
-                    <Badge variant="outline" className="text-xs w-12 justify-center">
-                      {size}
-                    </Badge>
-                    <span className="text-xs text-muted-foreground w-16">{value}</span>
-                    <p 
-                      style={{ 
-                        fontFamily: fullFontFamily,
-                        fontSize: value,
-                        fontWeight: weights?.[0] || 400
-                      }}
-                    >
-                      Sample text
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Line Heights Preview */}
-            <div>
-              <h4 className="text-sm font-medium mb-3">Line Heights</h4>
-              <div className="space-y-4">
-                {Object.entries(lineHeights || {}).map(([height, value]) => (
-                  <div key={height} className="space-y-2">
-                    <div className="flex items-center gap-2">
-                      <Badge variant="outline" className="text-xs">
-                        {height}
-                      </Badge>
-                      <span className="text-xs text-muted-foreground">{value}</span>
-                    </div>
-                    <p 
-                      style={{ 
-                        fontFamily: fullFontFamily,
-                        fontSize: sizes?.md || '1rem',
-                        lineHeight: value,
-                        fontWeight: weights?.[0] || 400
-                      }}
-                      className="text-sm border-l-2 border-muted pl-4"
-                    >
-                      This is a multiline text example to demonstrate how line height affects the spacing between lines of text. 
-                      The line height setting controls the vertical space between each line, which is crucial for readability and 
-                      overall typography appearance.
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Letter Spacing Preview */}
-            <div>
-              <h4 className="text-sm font-medium mb-3">Letter Spacing</h4>
-              <div className="space-y-2">
-                {Object.entries(letterSpacing || {}).map(([spacing, value]) => (
-                  <div key={spacing} className="flex items-center gap-4">
-                    <Badge variant="outline" className="text-xs w-16 justify-center">
-                      {spacing}
-                    </Badge>
-                    <span className="text-xs text-muted-foreground w-16">{value}</span>
-                    <p 
-                      style={{ 
-                        fontFamily: fullFontFamily,
-                        fontSize: sizes?.md || '1rem',
-                        letterSpacing: value,
-                        fontWeight: weights?.[0] || 400
-                      }}
-                      className="flex-1"
-                    >
-                      Letter spacing example
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* Character Set Preview */}
-        <div>
-          <h4 className="text-sm font-medium mb-3">Character Support</h4>
-          <div className="space-y-3">
-            <div>
-              <span className="text-xs text-muted-foreground block mb-1">Alphabet</span>
-              <p 
-                style={{ 
-                  fontFamily: fullFontFamily,
-                  fontSize: sizes?.md || '1rem',
-                  fontWeight: weights?.[0] || 400
-                }}
-                className="text-sm"
-              >
-                {sampleText}
-              </p>
-            </div>
-            
-            <div>
-              <span className="text-xs text-muted-foreground block mb-1">Numbers</span>
-              <p 
-                style={{ 
-                  fontFamily: fullFontFamily,
-                  fontSize: sizes?.lg || '1.125rem',
-                  fontWeight: weights?.[0] || 400,
-                  letterSpacing: letterSpacing?.wide || '0.025em'
-                }}
-                className="text-sm"
-              >
-                {sampleNumbers}
-              </p>
-            </div>
-
-            <div>
-              <span className="text-xs text-muted-foreground block mb-1">Special Characters</span>
-              <p 
-                style={{ 
-                  fontFamily: fullFontFamily,
-                  fontSize: sizes?.sm || '0.875rem',
-                  fontWeight: weights?.[0] || 400
-                }}
-                className="text-sm"
-              >
-                {sampleSpecial}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Font Loading Information */}
-        {source && (
-          <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: <span className="capitalize">{source.type}</span></div>
-              {source.url && <div>URL: {source.url}</div>}
-              {source.files && (
-                <div>
-                  Files: {Object.keys(source.files).join(', ')}
-                </div>
-              )}
-              {config.display && (
-                <div>Display: {config.display}</div>
-              )}
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
+export const FontPreview = ({ fontConfig, fontType = 'primary', showAllVariations = false, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    // Use provided fontConfig or get from current theme
+    const config = fontConfig || currentThemeConfig?.fonts[fontType];
+    if (!config) {
+        return (_jsx(Card, { className: className, children: _jsx(CardContent, { className: "p-4", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Font configuration not available" }) }) }));
+    }
+    const { family, weights, sizes, lineHeights, letterSpacing, fallbacks, source } = config;
+    // 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";
+    const sampleNumbers = "1234567890";
+    const sampleSpecial = "!@#$%^&*()_+-={}[]|\\:;\"'<>,.?/";
+    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center justify-between", children: [_jsxs("span", { className: "capitalize", children: [fontType, " Font"] }), _jsxs("div", { className: "flex gap-2", children: [source && (_jsx(Badge, { variant: "outline", className: "text-xs", children: source.type })), _jsxs(Badge, { variant: "secondary", className: "text-xs", children: [weights?.length || 0, " weights"] })] })] }), _jsxs(CardDescription, { children: [_jsx("span", { className: "font-mono text-xs", children: family }), fallbacks && fallbacks.length > 0 && (_jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: ["Fallbacks: ", fallbacks.slice(0, 3).join(', '), fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`] }))] })] }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Font Weights" }), _jsx("div", { className: "space-y-2", children: weights?.map(weight => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-xs w-12 justify-center", children: weight }), _jsx("p", { style: {
+                                                fontFamily: fullFontFamily,
+                                                fontWeight: weight,
+                                                fontSize: sizes?.md || '1rem'
+                                            }, className: "flex-1", children: sampleText })] }, weight))) })] }), showAllVariations && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Font Sizes" }), _jsx("div", { className: "space-y-2", children: Object.entries(sizes || {}).map(([size, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-xs w-12 justify-center", children: size }), _jsx("span", { className: "text-xs text-muted-foreground w-16", children: value }), _jsx("p", { style: {
+                                                        fontFamily: fullFontFamily,
+                                                        fontSize: value,
+                                                        fontWeight: weights?.[0] || 400
+                                                    }, children: "Sample text" })] }, size))) })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Line Heights" }), _jsx("div", { className: "space-y-4", children: Object.entries(lineHeights || {}).map(([height, value]) => (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", className: "text-xs", children: height }), _jsx("span", { className: "text-xs text-muted-foreground", children: value })] }), _jsx("p", { style: {
+                                                        fontFamily: fullFontFamily,
+                                                        fontSize: sizes?.md || '1rem',
+                                                        lineHeight: value,
+                                                        fontWeight: weights?.[0] || 400
+                                                    }, className: "text-sm border-l-2 border-muted pl-4", children: "This is a multiline text example to demonstrate how line height affects the spacing between lines of text. The line height setting controls the vertical space between each line, which is crucial for readability and overall typography appearance." })] }, height))) })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Letter Spacing" }), _jsx("div", { className: "space-y-2", children: Object.entries(letterSpacing || {}).map(([spacing, value]) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-xs w-16 justify-center", children: spacing }), _jsx("span", { className: "text-xs text-muted-foreground w-16", children: value }), _jsx("p", { style: {
+                                                        fontFamily: fullFontFamily,
+                                                        fontSize: sizes?.md || '1rem',
+                                                        letterSpacing: value,
+                                                        fontWeight: weights?.[0] || 400
+                                                    }, className: "flex-1", children: "Letter spacing example" })] }, spacing))) })] })] })), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-3", children: "Character Support" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("span", { className: "text-xs text-muted-foreground block mb-1", children: "Alphabet" }), _jsx("p", { style: {
+                                                    fontFamily: fullFontFamily,
+                                                    fontSize: sizes?.md || '1rem',
+                                                    fontWeight: weights?.[0] || 400
+                                                }, className: "text-sm", children: sampleText })] }), _jsxs("div", { children: [_jsx("span", { className: "text-xs text-muted-foreground block mb-1", children: "Numbers" }), _jsx("p", { style: {
+                                                    fontFamily: fullFontFamily,
+                                                    fontSize: sizes?.lg || '1.125rem',
+                                                    fontWeight: weights?.[0] || 400,
+                                                    letterSpacing: letterSpacing?.wide || '0.025em'
+                                                }, className: "text-sm", children: sampleNumbers })] }), _jsxs("div", { children: [_jsx("span", { className: "text-xs text-muted-foreground block mb-1", children: "Special Characters" }), _jsx("p", { style: {
+                                                    fontFamily: fullFontFamily,
+                                                    fontSize: sizes?.sm || '0.875rem',
+                                                    fontWeight: weights?.[0] || 400
+                                                }, className: "text-sm", children: sampleSpecial })] })] })] }), source && (_jsxs("div", { className: "pt-4 border-t", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Font Loading" }), _jsxs("div", { className: "space-y-1 text-xs text-muted-foreground", children: [_jsxs("div", { children: ["Source: ", _jsx("span", { className: "capitalize", children: source.type })] }), source.url && _jsxs("div", { children: ["URL: ", source.url] }), source.files && (_jsxs("div", { children: ["Files: ", Object.keys(source.files).join(', ')] })), config.display && (_jsxs("div", { children: ["Display: ", config.display] }))] })] }))] })] }));
 };
-
-// Multi-font preview component
-export interface FontShowcaseProps {
-  showAllVariations?: boolean;
-  className?: string;
-}
-
-export const FontShowcase: React.FC<FontShowcaseProps> = ({
-  showAllVariations = false,
-  className = ''
-}) => {
-  const { currentThemeConfig } = useTheme();
-  
-  if (!currentThemeConfig?.fonts) {
-    return (
-      <div className={className}>
-        <p className="text-sm text-muted-foreground">No font configuration available</p>
-      </div>
-    );
-  }
-
-  const fontTypes: Array<keyof typeof currentThemeConfig.fonts> = ['primary', 'secondary', 'display', 'body', 'mono'];
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {fontTypes.map(fontType => (
-        <FontPreview
-          key={fontType}
-          fontType={fontType}
-          showAllVariations={showAllVariations}
-        />
-      ))}
-    </div>
-  );
+export const FontShowcase = ({ showAllVariations = false, className = '' }) => {
+    const { currentThemeConfig } = useTheme();
+    if (!currentThemeConfig?.fonts) {
+        return (_jsx("div", { className: className, children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No font configuration available" }) }));
+    }
+    const fontTypes = ['primary', 'secondary', 'display', 'body', 'mono'];
+    return (_jsx("div", { className: `space-y-6 ${className}`, children: fontTypes.map(fontType => (_jsx(FontPreview, { fontType: fontType, showAllVariations: showAllVariations }, fontType))) }));
 };