@contentgrowth/content-widget 1.3.4 → 1.3.6

package/dist/astro/FeaturedCard.astro

@@ -1,9 +1,23 @@
 ---
-import { marked } from 'marked';
 import { ContentGrowthClient } from '../core/client';
-import type { FeaturedContentProps } from '../types';
+import type { FeaturedContentProps, Article, ArticleWithContent } from '../types';
 
 interface FeaturedCardProps extends Omit<FeaturedContentProps, 'showBackButton' | 'backUrl'> {
+  /**
+   * Pre-loaded article data (bypasses API fetch - used by ContentList)
+   */
+  article?: Article | ArticleWithContent;
+
+  /**
+   * Load specific article by slug (bypasses category/tags search)
+   */
+  slug?: string;
+
+  /**
+   * Load specific article by UUID (bypasses category/tags search)
+   */
+  uuid?: string;
+
   /**
    * URL pattern for the article link
    * Supports placeholders: {uuid}, {slug}, {category}
@@ -57,6 +71,18 @@ interface FeaturedCardProps extends Omit<FeaturedContentProps, 'showBackButton'
    * @default '#f3f4f6'
    */
   itemsBackground?: string;
+
+  /**
+   * Link target attribute
+   * @default undefined (same tab)
+   */
+  linkTarget?: string;
+
+  /**
+   * Custom padding for the card content
+   * @example "20px" or "0"
+   */
+  padding?: string;
 }
 
 type Props = FeaturedCardProps & { class?: string };
@@ -64,6 +90,9 @@ type Props = FeaturedCardProps & { class?: string };
 const {
   apiKey,
   baseUrl,
+  article: providedArticle,
+  slug,
+  uuid,
   tags = [],
   category,
   excludeTags = [],
@@ -72,29 +101,46 @@ const {
   showAuthor = false,
   ctaText: propCtaText,
   linkPattern = '/articles/{slug}',
+  linkTarget,
   layout: propLayout,
   borderStyle = 'none',
   borderColor = '#e5e7eb',
   cardBackground = 'none',
   itemsBackground = '#f3f4f6',
+  padding,
   class: className = ''
 } = Astro.props;
 
-// Fetch featured article
-const client = new ContentGrowthClient({ apiKey, baseUrl });
-let article = null;
-let error = null;
-
-try {
-  article = await client.getFeaturedArticle({
-    tags,
-    category,
-    excludeTags
-  });
-} catch (e) {
-  // If 404, article remains null
-  console.error('Failed to fetch featured article:', e);
-  error = e instanceof Error ? e.message : 'Failed to load featured article';
+// Determine article source
+let article: Article | ArticleWithContent | null = null;
+let error: string | null = null;
+
+if (providedArticle) {
+  // Mode 1: Article provided directly (from ContentList)
+  article = providedArticle;
+} else if (apiKey) {
+  // Need to fetch article from API
+  const client = new ContentGrowthClient({ apiKey, baseUrl });
+  
+  try {
+    if (uuid) {
+      // Mode 2: Load by UUID
+      article = await client.getArticle(uuid, { excludeTags });
+    } else if (slug) {
+      // Mode 3: Load by slug
+      article = await client.getArticleBySlug(slug, { excludeTags });
+    } else {
+      // Mode 4: Find featured article by category/tags (original behavior)
+      article = await client.getFeaturedArticle({
+        tags,
+        category,
+        excludeTags
+      });
+    }
+  } catch (e) {
+    console.error('Failed to fetch article:', e);
+    error = e instanceof Error ? e.message : 'Failed to load article';
+  }
 }
 
 // Generate article URL
@@ -106,25 +152,52 @@ const getArticleUrl = (article: any) => {
     .replace('{category}', article.category || 'uncategorized');
 };
 
-// Render featured summary (or fallback to regular summary) as HTML
-const getSummaryHtml = (article: any) => {
+// Parse featured summary - supports both JSON (new) and plain text (legacy)
+interface SummaryData {
+  type: 'classic' | 'list' | 'steps' | 'quote' | 'legacy';
+  text?: string;
+  intro?: string;
+  items?: Array<{ title: string; description: string }>;
+  quote?: string;
+  highlight?: string;
+}
+
+const parseSummary = (article: any): SummaryData | null => {
   const summaryText = article.featuredSummary || article.summary;
-  if (!summaryText) return '';
-  return marked.parse(summaryText, { async: false }) as string;
+  if (!summaryText) return null;
+  
+  // Try to parse as JSON
+  try {
+    const parsed = JSON.parse(summaryText);
+    if (parsed.type) {
+      return parsed as SummaryData;
+    }
+  } catch (e) {
+    // Not JSON, treat as legacy markdown/plain text
+  }
+  
+  // Legacy fallback - render as plain text
+  return {
+    type: 'legacy',
+    text: summaryText
+  };
 };
 
-const layout = propLayout || article?.featuredSummaryLayout || 'standard';
-const layoutClass = layout !== 'standard' ? `cg-layout-${layout}` : '';
+const summaryData = article ? parseSummary(article) : null;
+
+const layout = propLayout || (article as any)?.featuredSummaryLayout || 'vertical';
+const layoutClass = layout !== 'vertical' ? `cg-layout-${layout}` : '';
 const borderClass = borderStyle !== 'none' ? `cg-border-${borderStyle}` : '';
 
 // Use ctaText from prop, or from article data, or fallback to default
-const ctaText = propCtaText || article?.featuredCtaText || 'Read full story';
+const ctaText = propCtaText || (article as any)?.featuredCtaText || 'Read full story';
 
 // Custom CSS properties for styling
 const customStyles = [
   borderColor !== '#e5e7eb' ? `--cg-card-border-color: ${borderColor}` : '',
   cardBackground !== 'none' ? `--cg-card-bg: ${cardBackground}` : '',
   itemsBackground !== '#f3f4f6' ? `--cg-items-bg: ${itemsBackground}` : '',
+  padding ? `--cg-card-padding: ${padding}` : '',
 ].filter(Boolean).join('; ');
 ---
 
@@ -134,44 +207,87 @@ const customStyles = [
     class={`cg-widget cg-featured-card ${className} ${layoutClass} ${borderClass}`}
     style={customStyles || undefined}
     data-cg-widget="featured-card"
+    target={linkTarget}
+    rel={linkTarget === '_blank' ? 'noopener noreferrer' : undefined}
   >
     <article class="cg-featured-card-inner">
-      {/* Header with category badge */}
-      {showCategory && article.category && (
-        <div class="cg-featured-card-category">
-          <span class="cg-category-badge">{article.category}</span>
-        </div>
-      )}
-      
-      {/* Title */}
-      <h3 class="cg-featured-card-title">{article.title}</h3>
-      
-      {/* Featured Summary */}
-      {(article.featuredSummary || article.summary) && (
-        <div 
-          class="cg-featured-card-summary"
-          set:html={getSummaryHtml(article)}
-        />
-      )}
-      
-      {/* Footer with meta info */}
-      {(showAuthor || showReadingTime) && (
-        <div class="cg-featured-card-footer">
-          {showAuthor && <span class="cg-featured-card-author">{article.authorName}</span>}
-          
-          {showAuthor && showReadingTime && (
-            <span class="cg-featured-card-separator">•</span>
+      <div class="cg-card-primary">
+        {/* Header with category badge */}
+        {showCategory && article.category && (
+          <div class="cg-featured-card-category">
+            <span class="cg-category-badge">{article.category}</span>
+          </div>
+        )}
+        
+        {/* Title */}
+        <h3 class="cg-featured-card-title">{article.title}</h3>
+        
+        {/* Featured Summary - Intro / Text Part */}
+        {summaryData && (
+          <div class="cg-featured-card-summary">
+            {/* Intro for structured types */}
+            {(summaryData.type === 'list' || summaryData.type === 'steps' || summaryData.type === 'quote') && summaryData.intro && (
+              <p>{summaryData.intro}</p>
+            )}
+
+            {/* Classic type - just text */}
+            {summaryData.type === 'classic' && (
+              <p>{summaryData.text}</p>
+            )}
+            
+            {/* Legacy markdown - render as plain text */}
+            {summaryData.type === 'legacy' && (
+              <p>{summaryData.text}</p>
+            )}
+          </div>
+        )}
+        
+        {/* Footer with meta info */}
+        {(showAuthor || showReadingTime) && (
+          <div class="cg-featured-card-footer">
+            {showAuthor && <span class="cg-featured-card-author">{article.authorName}</span>}
+            
+            {showAuthor && showReadingTime && (
+              <span class="cg-featured-card-separator">•</span>
+            )}
+            
+            {showReadingTime && (
+              <span class="cg-featured-card-reading-time">
+                {Math.ceil(article.wordCount / 200)} min read
+              </span>
+            )}
+          </div>
+        )}
+        
+        {/* Read more indicator */}
+      </div>
+
+      {/* Right Panel - Structured Visual Items (List/Quote) */}
+      {summaryData && (summaryData.type === 'list' || summaryData.type === 'steps' || summaryData.type === 'quote') && (
+        <div class="cg-card-secondary">
+          {(summaryData.type === 'list' || summaryData.type === 'steps') && (
+            <ul class="cg-summary-items">
+              {summaryData.items?.map((item, index) => (
+                <li>
+                  <span class="cg-item-number">{index + 1}</span>
+                  <div class="cg-item-content">
+                    <strong class="cg-item-title">{item.title}</strong>
+                    <span class="cg-item-description">{item.description}</span>
+                  </div>
+                </li>
+              ))}
+            </ul>
           )}
           
-          {showReadingTime && (
-            <span class="cg-featured-card-reading-time">
-              {Math.ceil(article.wordCount / 200)} min read
-            </span>
+          {summaryData.type === 'quote' && (
+            <blockquote>
+              {summaryData.quote}
+            </blockquote>
           )}
         </div>
       )}
-      
-      {/* Read more indicator */}
+
+      {/* Read more indicator - Now at bottom */}
       <div class="cg-featured-card-cta">
         <span>{ctaText}</span>
         <svg class="cg-featured-card-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
@@ -187,5 +303,3 @@ const customStyles = [
     </div>
   ) : null
 )}
-
-

package/dist/react/ContentCard.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { Article, ArticleWithContent } from '../types';
+export interface ContentCardProps {
+    /**
+     * Pre-loaded article data (bypasses API fetch)
+     */
+    article?: Article | ArticleWithContent;
+    /**
+     * Load specific article by slug
+     */
+    slug?: string;
+    /**
+     * Load specific article by UUID
+     */
+    uuid?: string;
+    /**
+     * API key (required if fetching article)
+     */
+    apiKey?: string;
+    /**
+     * API base URL
+     */
+    baseUrl?: string;
+    /**
+     * URL pattern for the article link
+     * @default '/articles/{slug}'
+     */
+    linkPattern?: string;
+    /**
+     * Link target attribute
+     */
+    linkTarget?: string;
+    /**
+     * Show article summary
+     * @default true
+     */
+    showSummary?: boolean;
+    /**
+     * Maximum length of summary text
+     */
+    summaryMaxLength?: number;
+    /**
+     * Show article tags
+     * @default false
+     */
+    showTags?: boolean;
+    /**
+     * Show article category
+     * @default true
+     */
+    showCategory?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export declare const ContentCard: React.FC<ContentCardProps>;
+export default ContentCard;
+//# sourceMappingURL=ContentCard.d.ts.map

package/dist/react/ContentCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../src/react/ContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAEvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgIlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/react/ContentCard.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import { ContentGrowthClient } from '../core/client';
+import { formatDate, calculateReadingTime } from '../core/utils';
+export const ContentCard = ({ apiKey, baseUrl, article: providedArticle, slug, uuid, linkPattern = '/articles/{slug}', linkTarget, showSummary = true, summaryMaxLength, showTags = false, showCategory = true, className = '' }) => {
+    const [article, setArticle] = useState(providedArticle || null);
+    const [loading, setLoading] = useState(!providedArticle && !!(apiKey && (slug || uuid)));
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        // If article is provided, use it directly
+        if (providedArticle) {
+            setArticle(providedArticle);
+            setLoading(false);
+            return;
+        }
+        // Need API key and identifier to fetch
+        if (!apiKey || (!slug && !uuid)) {
+            setLoading(false);
+            return;
+        }
+        const fetchArticle = async () => {
+            setLoading(true);
+            try {
+                const client = new ContentGrowthClient({ apiKey, baseUrl });
+                if (uuid) {
+                    const fetchedArticle = await client.getArticle(uuid);
+                    setArticle(fetchedArticle);
+                }
+                else if (slug) {
+                    const fetchedArticle = await client.getArticleBySlug(slug);
+                    setArticle(fetchedArticle);
+                }
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to load article');
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchArticle();
+    }, [apiKey, baseUrl, providedArticle, uuid, slug]);
+    // Generate article URL
+    const getArticleUrl = (article) => {
+        return linkPattern
+            .replace('{uuid}', article.uuid || '')
+            .replace('{slug}', article.slug || article.uuid || '')
+            .replace('{category}', article.category || 'uncategorized');
+    };
+    // Truncate summary text
+    const truncateSummary = (text, maxLength) => {
+        if (!text)
+            return '';
+        if (!maxLength || text.length <= maxLength)
+            return text;
+        return text.substring(0, maxLength).trim() + '...';
+    };
+    if (loading) {
+        return (React.createElement("div", { className: `cg-widget cg-loading ${className}` },
+            React.createElement("div", { className: "cg-spinner" })));
+    }
+    if (error || !article) {
+        if (error) {
+            return (React.createElement("div", { className: `cg-widget cg-error ${className}` }, error));
+        }
+        return null;
+    }
+    const readingTime = calculateReadingTime(article.wordCount);
+    const publishedDate = formatDate(article.publishedAt);
+    return (React.createElement("article", { className: `cg-article-card ${className}` },
+        React.createElement("a", { href: getArticleUrl(article), target: linkTarget, className: "cg-card-link" },
+            React.createElement("div", { className: "cg-card-content" },
+                showCategory && article.category && (React.createElement("div", { className: "cg-card-category" },
+                    React.createElement("span", { className: "cg-category-badge" }, article.category))),
+                React.createElement("h2", { className: "cg-card-title" }, article.title),
+                showSummary && article.summary && (React.createElement("p", { className: "cg-card-summary" }, truncateSummary(article.summary, summaryMaxLength))),
+                React.createElement("div", { className: "cg-card-meta" },
+                    React.createElement("span", { className: "cg-meta-author" }, article.authorName),
+                    React.createElement("span", { className: "cg-meta-separator" }, "\u2022"),
+                    React.createElement("time", { className: "cg-meta-date", dateTime: new Date(article.publishedAt * 1000).toISOString() }, publishedDate),
+                    React.createElement("span", { className: "cg-meta-separator" }, "\u2022"),
+                    React.createElement("span", { className: "cg-meta-reading-time" }, readingTime)),
+                showTags && article.tags && article.tags.length > 0 && (React.createElement("div", { className: "cg-card-tags" }, article.tags.map((tag) => (React.createElement("span", { key: tag, className: "cg-tag" }, tag)))))))));
+};
+export default ContentCard;

package/dist/react/ContentList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentList.d.ts","sourceRoot":"","sources":["../../src/react/ContentList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,gBAAgB,EAAW,MAAM,mBAAmB,CAAC;AAEnE,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiLvD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ContentList.d.ts","sourceRoot":"","sources":["../../src/react/ContentList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,gBAAgB,EAAW,MAAM,mBAAmB,CAAC;AAEnE,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsKvD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/react/ContentList.js

@@ -4,12 +4,14 @@
  */
 import React, { useEffect, useState } from 'react';
 import { ContentGrowthClient } from '../core/client.js';
-import { formatDate, calculateReadingTime } from '../core/utils.js';
-export const ContentList = ({ apiKey, baseUrl, layout = 'cards', displayMode = 'comfortable', theme = 'light', pageSize = 12, tags = [], category, showPagination = true, linkPattern = '/articles/{uuid}', showTags = false, showAiSummary = true, summaryMaxLength, linkTarget, className = '' }) => {
+import { FeaturedCard } from './FeaturedCard.js';
+import { ContentCard } from './ContentCard.js';
+export const ContentList = ({ apiKey, baseUrl, layout = 'cards', displayMode = 'comfortable', displayAs = 'default', theme = 'light', pageSize = 12, tags = [], category, showPagination = true, linkPattern = '/articles/{uuid}', showTags = false, showAiSummary = true, summaryMaxLength, linkTarget, className = '' }) => {
     const [articles, setArticles] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);
     const [totalPages, setTotalPages] = useState(1);
     const [loading, setLoading] = useState(true);
+    const isFeaturedCardsMode = displayAs === 'featured-cards';
     useEffect(() => {
         const fetchArticles = async () => {
             setLoading(true);
@@ -73,27 +75,16 @@ export const ContentList = ({ apiKey, baseUrl, layout = 'cards', displayMode = '
             React.createElement("div", { className: "cg-empty-state" },
                 React.createElement("p", null, "Loading..."))));
     }
-    return (React.createElement("div", { className: `cg-content-list cg-layout-${layout} cg-display-${displayMode} cg-theme-${theme} ${className}`, "data-cg-widget": "list" }, articles.length === 0 ? (React.createElement("div", { className: "cg-empty-state" },
+    return (React.createElement("div", { className: `cg-content-list cg-layout-${layout} cg-display-${displayMode} cg-theme-${theme} ${isFeaturedCardsMode ? 'cg-featured-cards-list' : ''} ${className}`, "data-cg-widget": "list" }, articles.length === 0 ? (React.createElement("div", { className: "cg-empty-state" },
         React.createElement("p", null, "No articles found."))) : (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: `cg-articles-grid ${layout === 'cards' ? 'cg-grid' : 'cg-list'}` }, articles.map((article) => {
-            const articleUrl = buildArticleUrl(article);
+        React.createElement("div", { className: `cg-articles-grid ${isFeaturedCardsMode ? 'cg-featured-cards-grid' : (layout === 'cards' ? 'cg-grid' : 'cg-list')}` }, articles.map((article) => {
             const articleTarget = buildLinkTarget(article);
-            const readingTime = calculateReadingTime(article.wordCount);
-            const publishedDate = formatDate(article.publishedAt);
-            return (React.createElement("article", { key: article.uuid, className: "cg-article-card" },
-                React.createElement("a", { href: articleUrl, target: articleTarget, className: "cg-card-link" },
-                    React.createElement("div", { className: "cg-card-content" },
-                        article.category && (React.createElement("div", { className: "cg-card-category" },
-                            React.createElement("span", { className: "cg-category-badge" }, article.category))),
-                        React.createElement("h2", { className: "cg-card-title" }, article.title),
-                        showAiSummary && article.summary && (React.createElement("p", { className: "cg-card-summary" }, truncateSummary(article.summary, summaryMaxLength))),
-                        React.createElement("div", { className: "cg-card-meta" },
-                            React.createElement("span", { className: "cg-meta-author" }, article.authorName),
-                            React.createElement("span", { className: "cg-meta-separator" }, "\u2022"),
-                            React.createElement("time", { className: "cg-meta-date", dateTime: new Date(article.publishedAt * 1000).toISOString() }, publishedDate),
-                            React.createElement("span", { className: "cg-meta-separator" }, "\u2022"),
-                            React.createElement("span", { className: "cg-meta-reading-time" }, readingTime)),
-                        showTags && article.tags && article.tags.length > 0 && (React.createElement("div", { className: "cg-card-tags" }, article.tags.map((tag) => (React.createElement("span", { key: tag, className: "cg-tag" }, tag)))))))));
+            // Featured Cards Mode - Use FeaturedCard component
+            if (isFeaturedCardsMode) {
+                return (React.createElement(FeaturedCard, { key: article.uuid, article: article, linkPattern: linkPattern, linkTarget: articleTarget, showCategory: true }));
+            }
+            // Default Card Mode - Use ContentCard component
+            return (React.createElement(ContentCard, { key: article.uuid, article: article, linkPattern: linkPattern, linkTarget: articleTarget, showSummary: showAiSummary, summaryMaxLength: summaryMaxLength, showTags: showTags, showCategory: true }));
         })),
         showPagination && totalPages > 1 && (React.createElement("div", { className: "cg-pagination" },
             React.createElement("button", { className: "cg-pagination-btn", onClick: () => setCurrentPage(p => Math.max(1, p - 1)), disabled: currentPage === 1 }, "Previous"),

package/dist/react/FeaturedCard.d.ts

@@ -1,6 +1,18 @@
 import React from 'react';
-import type { FeaturedContentProps } from '../types';
-interface FeaturedCardProps extends Omit<FeaturedContentProps, 'showBackButton' | 'backUrl' | 'showAiSummary' | 'showTags'> {
+import type { FeaturedContentProps, ArticleWithContent, Article } from '../types';
+interface FeaturedCardProps extends Partial<Omit<FeaturedContentProps, 'showBackButton' | 'backUrl' | 'showAiSummary' | 'showTags'>> {
+    /**
+     * Pre-loaded article data (bypasses API fetch - used by ContentList)
+     */
+    article?: Article | ArticleWithContent;
+    /**
+     * Load specific article by slug (bypasses category/tags search)
+     */
+    slug?: string;
+    /**
+     * Load specific article by UUID (bypasses category/tags search)
+     */
+    uuid?: string;
     /**
      * URL pattern for the article link
      * Supports placeholders: {uuid}, {slug}, {category}
@@ -46,11 +58,20 @@ interface FeaturedCardProps extends Omit<FeaturedContentProps, 'showBackButton'
      * @default 'none'
      */
     cardBackground?: string;
+    /**
+     * Background color for list/quote section (the items area)
+     * @default '#f3f4f6'
+     */
     /**
      * Background color for list/quote section (the items area)
      * @default '#f3f4f6'
      */
     itemsBackground?: string;
+    /**
+     * Custom padding for the card content
+     * @example "20px" or "0"
+     */
+    padding?: string;
 }
 export declare const FeaturedCard: React.FC<FeaturedCardProps>;
 export {};

package/dist/react/FeaturedCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturedCard.d.ts","sourceRoot":"","sources":["../../src/react/FeaturedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,oBAAoB,EAAsB,MAAM,UAAU,CAAC;AAEzE,UAAU,iBAAkB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IACvH;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEzC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8IpD,CAAC"}
+{"version":3,"file":"FeaturedCard.d.ts","sourceRoot":"","sources":["../../src/react/FeaturedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAkClF,UAAU,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC;IAChI;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAEvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEzC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4NpD,CAAC"}