@opensite/ui 1.3.2 → 1.3.4

package/dist/list-feature-comparison.d.cts

@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.cjs';
+import 'class-variance-authority/types';
+
+interface ListFeatureComparisonFeature {
+    /**
+     * Feature name
+     */
+    name: React.ReactNode;
+    /**
+     * Whether the feature is available in Basic plan
+     */
+    basic: boolean;
+    /**
+     * Whether the feature is available in Pro plan
+     */
+    pro: boolean;
+    /**
+     * Whether the feature is available in Enterprise plan (always true)
+     */
+    enterprise?: boolean;
+}
+interface ListFeatureComparisonTrustIndicator {
+    /**
+     * Icon name for the indicator (e.g., "lucide/users")
+     */
+    icon?: string;
+    /**
+     * Title text
+     */
+    title?: React.ReactNode;
+    /**
+     * Description text
+     */
+    description?: React.ReactNode;
+}
+interface ListFeatureComparisonProps {
+    /**
+     * Badge content displayed above the heading
+     */
+    badge?: React.ReactNode;
+    /**
+     * Custom slot for rendering badge (overrides badge)
+     */
+    badgeSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the badge
+     */
+    badgeClassName?: string;
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Description content below the heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Array of features to compare
+     */
+    features?: ListFeatureComparisonFeature[];
+    /**
+     * Custom slot for rendering features table (overrides features array)
+     */
+    featuresSlot?: React.ReactNode;
+    /**
+     * Plan column headers
+     */
+    planHeaders?: {
+        feature?: React.ReactNode;
+        basic?: React.ReactNode;
+        pro?: React.ReactNode;
+        enterprise?: React.ReactNode;
+    };
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
+    /**
+     * Trust indicators displayed below the table
+     */
+    trustIndicators?: ListFeatureComparisonTrustIndicator[];
+    /**
+     * Custom slot for rendering trust indicators (overrides trustIndicators array)
+     */
+    trustIndicatorsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the trust indicators container
+     */
+    trustIndicatorsClassName?: string;
+    /**
+     * Additional CSS classes for individual trust indicator items
+     */
+    trustIndicatorClassName?: string;
+    /**
+     * Additional CSS classes for the table wrapper
+     */
+    tableWrapperClassName?: string;
+    /**
+     * Additional CSS classes for the table
+     */
+    tableClassName?: string;
+    /**
+     * Additional CSS classes for the table header
+     */
+    tableHeaderClassName?: string;
+    /**
+     * Additional CSS classes for the table body
+     */
+    tableBodyClassName?: string;
+    /**
+     * Additional CSS classes for table rows
+     */
+    tableRowClassName?: string;
+    /**
+     * Additional CSS classes for the header section
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the section wrapper
+     */
+    className?: string;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name or URL
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
+}
+/**
+ * ListFeatureComparison - A hero-style feature comparison table with pricing tiers,
+ * trust indicators, and call-to-action buttons. Displays features across Basic, Pro,
+ * and Enterprise plans with check/X icons for availability.
+ *
+ * Perfect for pricing pages, plan comparison sections, or feature matrices
+ * that help users choose the right tier for their needs.
+ *
+ * @example
+ * ```tsx
+ * <ListFeatureComparison
+ *   badge="New Enterprise Plan Available"
+ *   heading="Choose the perfect plan for your needs"
+ *   description="From startups to enterprises, we have a plan that scales with your business."
+ *   features={[
+ *     { name: "Unlimited Projects", basic: false, pro: true, enterprise: true },
+ *     { name: "API Access", basic: true, pro: true, enterprise: true }
+ *   ]}
+ *   actions={[
+ *     { label: "Get Started", href: "/signup", variant: "default" }
+ *   ]}
+ *   trustIndicators={[
+ *     { icon: "lucide/users", title: "50,000+ Users", description: "Join our community" }
+ *   ]}
+ * />
+ * ```
+ */
+declare function ListFeatureComparison({ badge, badgeSlot, badgeClassName, heading, headingClassName, description, descriptionClassName, features, featuresSlot, planHeaders, actions, actionsSlot, actionsClassName, trustIndicators, trustIndicatorsSlot, trustIndicatorsClassName, trustIndicatorClassName, tableWrapperClassName, tableClassName, tableHeaderClassName, tableBodyClassName, tableRowClassName, headerClassName, className, background, spacing, pattern, patternOpacity, }: ListFeatureComparisonProps): React.JSX.Element;
+
+export { ListFeatureComparison, type ListFeatureComparisonProps };

package/dist/list-feature-comparison.d.ts

@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.js';
+import 'class-variance-authority/types';
+
+interface ListFeatureComparisonFeature {
+    /**
+     * Feature name
+     */
+    name: React.ReactNode;
+    /**
+     * Whether the feature is available in Basic plan
+     */
+    basic: boolean;
+    /**
+     * Whether the feature is available in Pro plan
+     */
+    pro: boolean;
+    /**
+     * Whether the feature is available in Enterprise plan (always true)
+     */
+    enterprise?: boolean;
+}
+interface ListFeatureComparisonTrustIndicator {
+    /**
+     * Icon name for the indicator (e.g., "lucide/users")
+     */
+    icon?: string;
+    /**
+     * Title text
+     */
+    title?: React.ReactNode;
+    /**
+     * Description text
+     */
+    description?: React.ReactNode;
+}
+interface ListFeatureComparisonProps {
+    /**
+     * Badge content displayed above the heading
+     */
+    badge?: React.ReactNode;
+    /**
+     * Custom slot for rendering badge (overrides badge)
+     */
+    badgeSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the badge
+     */
+    badgeClassName?: string;
+    /**
+     * Main heading content
+     */
+    heading?: React.ReactNode;
+    /**
+     * Additional CSS classes for the heading
+     */
+    headingClassName?: string;
+    /**
+     * Description content below the heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * Array of features to compare
+     */
+    features?: ListFeatureComparisonFeature[];
+    /**
+     * Custom slot for rendering features table (overrides features array)
+     */
+    featuresSlot?: React.ReactNode;
+    /**
+     * Plan column headers
+     */
+    planHeaders?: {
+        feature?: React.ReactNode;
+        basic?: React.ReactNode;
+        pro?: React.ReactNode;
+        enterprise?: React.ReactNode;
+    };
+    /**
+     * Array of action configurations for CTA buttons
+     */
+    actions?: ActionConfig[];
+    /**
+     * Custom slot for rendering actions (overrides actions array)
+     */
+    actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
+    /**
+     * Trust indicators displayed below the table
+     */
+    trustIndicators?: ListFeatureComparisonTrustIndicator[];
+    /**
+     * Custom slot for rendering trust indicators (overrides trustIndicators array)
+     */
+    trustIndicatorsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the trust indicators container
+     */
+    trustIndicatorsClassName?: string;
+    /**
+     * Additional CSS classes for individual trust indicator items
+     */
+    trustIndicatorClassName?: string;
+    /**
+     * Additional CSS classes for the table wrapper
+     */
+    tableWrapperClassName?: string;
+    /**
+     * Additional CSS classes for the table
+     */
+    tableClassName?: string;
+    /**
+     * Additional CSS classes for the table header
+     */
+    tableHeaderClassName?: string;
+    /**
+     * Additional CSS classes for the table body
+     */
+    tableBodyClassName?: string;
+    /**
+     * Additional CSS classes for table rows
+     */
+    tableRowClassName?: string;
+    /**
+     * Additional CSS classes for the header section
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the section wrapper
+     */
+    className?: string;
+    /**
+     * Background style for the section
+     */
+    background?: SectionBackground;
+    /**
+     * Vertical spacing for the section
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Optional background pattern name or URL
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern overlay opacity (0-1)
+     */
+    patternOpacity?: number;
+}
+/**
+ * ListFeatureComparison - A hero-style feature comparison table with pricing tiers,
+ * trust indicators, and call-to-action buttons. Displays features across Basic, Pro,
+ * and Enterprise plans with check/X icons for availability.
+ *
+ * Perfect for pricing pages, plan comparison sections, or feature matrices
+ * that help users choose the right tier for their needs.
+ *
+ * @example
+ * ```tsx
+ * <ListFeatureComparison
+ *   badge="New Enterprise Plan Available"
+ *   heading="Choose the perfect plan for your needs"
+ *   description="From startups to enterprises, we have a plan that scales with your business."
+ *   features={[
+ *     { name: "Unlimited Projects", basic: false, pro: true, enterprise: true },
+ *     { name: "API Access", basic: true, pro: true, enterprise: true }
+ *   ]}
+ *   actions={[
+ *     { label: "Get Started", href: "/signup", variant: "default" }
+ *   ]}
+ *   trustIndicators={[
+ *     { icon: "lucide/users", title: "50,000+ Users", description: "Join our community" }
+ *   ]}
+ * />
+ * ```
+ */
+declare function ListFeatureComparison({ badge, badgeSlot, badgeClassName, heading, headingClassName, description, descriptionClassName, features, featuresSlot, planHeaders, actions, actionsSlot, actionsClassName, trustIndicators, trustIndicatorsSlot, trustIndicatorsClassName, trustIndicatorClassName, tableWrapperClassName, tableClassName, tableHeaderClassName, tableBodyClassName, tableRowClassName, headerClassName, className, background, spacing, pattern, patternOpacity, }: ListFeatureComparisonProps): React.JSX.Element;
+
+export { ListFeatureComparison, type ListFeatureComparisonProps };