@tachui/core 0.7.0-alpha1

package/dist/gradients/examples.d.ts

@@ -0,0 +1,432 @@
+/**
+ * Comprehensive Gradient Examples and Patterns
+ *
+ * Real-world gradient patterns, UI component examples, and design system implementations.
+ * These examples showcase practical usage of TachUI's gradient system.
+ */
+import type { GradientDefinition, StateGradientOptions } from './types';
+/**
+ * Button gradient patterns
+ */
+export declare const ButtonGradients: {
+    /**
+     * iOS-style primary button
+     */
+    readonly iosPrimary: () => StateGradientOptions;
+    /**
+     * Material Design raised button
+     */
+    readonly materialRaised: () => StateGradientOptions;
+    /**
+     * Glass morphism button
+     */
+    readonly glassMorphism: () => StateGradientOptions;
+    /**
+     * Neon glow button
+     */
+    readonly neonGlow: (color?: string) => StateGradientOptions;
+    /**
+     * Gradient call-to-action button
+     */
+    readonly ctaButton: () => StateGradientOptions;
+};
+/**
+ * Card and surface gradients
+ */
+export declare const CardGradients: {
+    /**
+     * Subtle card hover effect
+     */
+    readonly subtleHover: () => StateGradientOptions;
+    /**
+     * Dark mode card
+     */
+    readonly darkCard: () => StateGradientOptions;
+    /**
+     * Hero card with rich gradient
+     */
+    readonly heroCard: () => GradientDefinition;
+    /**
+     * Pricing card with accent
+     */
+    readonly pricingCard: (accentColor?: string) => GradientDefinition;
+    /**
+     * Testimonial card
+     */
+    readonly testimonialCard: () => GradientDefinition;
+};
+/**
+ * Navigation and header gradients
+ */
+export declare const NavigationGradients: {
+    /**
+     * App header gradient
+     */
+    readonly appHeader: () => GradientDefinition;
+    /**
+     * Tab bar gradient
+     */
+    readonly tabBar: () => StateGradientOptions;
+    /**
+     * Sidebar gradient
+     */
+    readonly sidebar: () => GradientDefinition;
+    /**
+     * Navigation breadcrumb
+     */
+    readonly breadcrumb: () => StateGradientOptions;
+};
+/**
+ * Form and input gradients
+ */
+export declare const FormGradients: {
+    /**
+     * Text input focus effect
+     */
+    readonly textInputFocus: () => StateGradientOptions;
+    /**
+     * Form section background
+     */
+    readonly formSection: () => GradientDefinition;
+    /**
+     * Submit button gradient
+     */
+    readonly submitButton: () => StateGradientOptions;
+    /**
+     * Error state input
+     */
+    readonly errorInput: () => StateGradientOptions;
+};
+/**
+ * Dashboard and data visualization gradients
+ */
+export declare const DashboardGradients: {
+    /**
+     * Metric card with positive trend
+     */
+    readonly positiveMetric: () => GradientDefinition;
+    /**
+     * Metric card with negative trend
+     */
+    readonly negativeMetric: () => GradientDefinition;
+    /**
+     * Chart background
+     */
+    readonly chartBackground: () => GradientDefinition;
+    /**
+     * Progress bar gradient
+     */
+    readonly progressBar: (color?: string) => GradientDefinition;
+    /**
+     * Status indicator gradients
+     */
+    readonly statusSuccess: () => GradientDefinition;
+    readonly statusWarning: () => GradientDefinition;
+    readonly statusError: () => GradientDefinition;
+};
+/**
+ * Loading and animation gradients
+ */
+export declare const AnimationGradients: {
+    /**
+     * Shimmer loading effect
+     */
+    readonly shimmer: () => GradientDefinition;
+    /**
+     * Skeleton loading gradient
+     */
+    readonly skeleton: () => GradientDefinition;
+    /**
+     * Pulse animation gradient
+     */
+    readonly pulse: (baseColor?: string) => GradientDefinition;
+    /**
+     * Spinner gradient
+     */
+    readonly spinner: () => GradientDefinition;
+};
+/**
+ * Background and surface gradients
+ */
+export declare const BackgroundGradients: {
+    /**
+     * App background gradient
+     */
+    readonly appBackground: () => GradientDefinition;
+    /**
+     * Dark mode app background
+     */
+    readonly darkAppBackground: () => GradientDefinition;
+    /**
+     * Modal backdrop
+     */
+    readonly modalBackdrop: () => GradientDefinition;
+    /**
+     * Hero section background
+     */
+    readonly heroSection: () => GradientDefinition;
+    /**
+     * Footer gradient
+     */
+    readonly footer: () => GradientDefinition;
+};
+/**
+ * Themed gradient collections
+ */
+export declare const ThemedGradients: {
+    /**
+     * iOS theme gradients
+     */
+    readonly ios: {
+        readonly primary: () => StateGradientOptions;
+        readonly secondary: () => StateGradientOptions;
+        readonly card: () => StateGradientOptions;
+        readonly input: () => StateGradientOptions;
+        readonly background: () => GradientDefinition;
+    };
+    /**
+     * Material Design theme gradients
+     */
+    readonly material: {
+        readonly primary: () => StateGradientOptions;
+        readonly secondary: () => StateGradientOptions;
+        readonly card: () => StateGradientOptions;
+        readonly input: () => StateGradientOptions;
+        readonly background: () => GradientDefinition;
+    };
+    /**
+     * Modern/Glass theme gradients
+     */
+    readonly modern: {
+        readonly primary: () => StateGradientOptions;
+        readonly secondary: () => StateGradientOptions;
+        readonly card: () => StateGradientOptions;
+        readonly input: () => StateGradientOptions;
+        readonly background: () => GradientDefinition;
+    };
+};
+/**
+ * Utility to create component-specific gradient collections
+ */
+export declare const createComponentGradients: (theme?: keyof typeof ThemedGradients) => {
+    Button: {
+        primary: import("./state-gradient-asset").StateGradientAsset;
+        secondary: import("./state-gradient-asset").StateGradientAsset;
+        danger: import("./state-gradient-asset").StateGradientAsset;
+        success: import("./state-gradient-asset").StateGradientAsset;
+    };
+    Card: {
+        default: import("./state-gradient-asset").StateGradientAsset;
+        hero: import("./state-gradient-asset").StateGradientAsset;
+    };
+    Input: {
+        default: import("./state-gradient-asset").StateGradientAsset;
+        error: import("./state-gradient-asset").StateGradientAsset;
+    };
+    Background: {
+        app: GradientDefinition;
+        modal: GradientDefinition;
+    };
+};
+/**
+ * Export all gradient examples
+ */
+export declare const GradientExamples: {
+    readonly Button: {
+        /**
+         * iOS-style primary button
+         */
+        readonly iosPrimary: () => StateGradientOptions;
+        /**
+         * Material Design raised button
+         */
+        readonly materialRaised: () => StateGradientOptions;
+        /**
+         * Glass morphism button
+         */
+        readonly glassMorphism: () => StateGradientOptions;
+        /**
+         * Neon glow button
+         */
+        readonly neonGlow: (color?: string) => StateGradientOptions;
+        /**
+         * Gradient call-to-action button
+         */
+        readonly ctaButton: () => StateGradientOptions;
+    };
+    readonly Card: {
+        /**
+         * Subtle card hover effect
+         */
+        readonly subtleHover: () => StateGradientOptions;
+        /**
+         * Dark mode card
+         */
+        readonly darkCard: () => StateGradientOptions;
+        /**
+         * Hero card with rich gradient
+         */
+        readonly heroCard: () => GradientDefinition;
+        /**
+         * Pricing card with accent
+         */
+        readonly pricingCard: (accentColor?: string) => GradientDefinition;
+        /**
+         * Testimonial card
+         */
+        readonly testimonialCard: () => GradientDefinition;
+    };
+    readonly Navigation: {
+        /**
+         * App header gradient
+         */
+        readonly appHeader: () => GradientDefinition;
+        /**
+         * Tab bar gradient
+         */
+        readonly tabBar: () => StateGradientOptions;
+        /**
+         * Sidebar gradient
+         */
+        readonly sidebar: () => GradientDefinition;
+        /**
+         * Navigation breadcrumb
+         */
+        readonly breadcrumb: () => StateGradientOptions;
+    };
+    readonly Form: {
+        /**
+         * Text input focus effect
+         */
+        readonly textInputFocus: () => StateGradientOptions;
+        /**
+         * Form section background
+         */
+        readonly formSection: () => GradientDefinition;
+        /**
+         * Submit button gradient
+         */
+        readonly submitButton: () => StateGradientOptions;
+        /**
+         * Error state input
+         */
+        readonly errorInput: () => StateGradientOptions;
+    };
+    readonly Dashboard: {
+        /**
+         * Metric card with positive trend
+         */
+        readonly positiveMetric: () => GradientDefinition;
+        /**
+         * Metric card with negative trend
+         */
+        readonly negativeMetric: () => GradientDefinition;
+        /**
+         * Chart background
+         */
+        readonly chartBackground: () => GradientDefinition;
+        /**
+         * Progress bar gradient
+         */
+        readonly progressBar: (color?: string) => GradientDefinition;
+        /**
+         * Status indicator gradients
+         */
+        readonly statusSuccess: () => GradientDefinition;
+        readonly statusWarning: () => GradientDefinition;
+        readonly statusError: () => GradientDefinition;
+    };
+    readonly Animation: {
+        /**
+         * Shimmer loading effect
+         */
+        readonly shimmer: () => GradientDefinition;
+        /**
+         * Skeleton loading gradient
+         */
+        readonly skeleton: () => GradientDefinition;
+        /**
+         * Pulse animation gradient
+         */
+        readonly pulse: (baseColor?: string) => GradientDefinition;
+        /**
+         * Spinner gradient
+         */
+        readonly spinner: () => GradientDefinition;
+    };
+    readonly Background: {
+        /**
+         * App background gradient
+         */
+        readonly appBackground: () => GradientDefinition;
+        /**
+         * Dark mode app background
+         */
+        readonly darkAppBackground: () => GradientDefinition;
+        /**
+         * Modal backdrop
+         */
+        readonly modalBackdrop: () => GradientDefinition;
+        /**
+         * Hero section background
+         */
+        readonly heroSection: () => GradientDefinition;
+        /**
+         * Footer gradient
+         */
+        readonly footer: () => GradientDefinition;
+    };
+    readonly Themed: {
+        /**
+         * iOS theme gradients
+         */
+        readonly ios: {
+            readonly primary: () => StateGradientOptions;
+            readonly secondary: () => StateGradientOptions;
+            readonly card: () => StateGradientOptions;
+            readonly input: () => StateGradientOptions;
+            readonly background: () => GradientDefinition;
+        };
+        /**
+         * Material Design theme gradients
+         */
+        readonly material: {
+            readonly primary: () => StateGradientOptions;
+            readonly secondary: () => StateGradientOptions;
+            readonly card: () => StateGradientOptions;
+            readonly input: () => StateGradientOptions;
+            readonly background: () => GradientDefinition;
+        };
+        /**
+         * Modern/Glass theme gradients
+         */
+        readonly modern: {
+            readonly primary: () => StateGradientOptions;
+            readonly secondary: () => StateGradientOptions;
+            readonly card: () => StateGradientOptions;
+            readonly input: () => StateGradientOptions;
+            readonly background: () => GradientDefinition;
+        };
+    };
+    readonly createComponentGradients: (theme?: keyof typeof ThemedGradients) => {
+        Button: {
+            primary: import("./state-gradient-asset").StateGradientAsset;
+            secondary: import("./state-gradient-asset").StateGradientAsset;
+            danger: import("./state-gradient-asset").StateGradientAsset;
+            success: import("./state-gradient-asset").StateGradientAsset;
+        };
+        Card: {
+            default: import("./state-gradient-asset").StateGradientAsset;
+            hero: import("./state-gradient-asset").StateGradientAsset;
+        };
+        Input: {
+            default: import("./state-gradient-asset").StateGradientAsset;
+            error: import("./state-gradient-asset").StateGradientAsset;
+        };
+        Background: {
+            app: GradientDefinition;
+            modal: GradientDefinition;
+        };
+    };
+};
+//# sourceMappingURL=examples.d.ts.map

package/dist/gradients/examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"examples.d.ts","sourceRoot":"","sources":["../../src/gradients/examples.ts"],"names":[],"mappings":"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"}