pelatform-ui 1.1.21 → 1.2.0

package/dist/colors-CUDWvz1g.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Theme configuration for the application
+ * Handles light, dark, and system theme modes with their respective colors
+ */
+/**
+ * Available theme modes in the application
+ * - light: Force light theme
+ * - dark: Force dark theme
+ * - system: Follow system/OS preference (auto-detect)
+ */
+declare const THEME_MODES: {
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+    readonly SYSTEM: "system";
+};
+/**
+ * Type definition for theme modes
+ */
+type ThemeMode = (typeof THEME_MODES)[keyof typeof THEME_MODES];
+/**
+ * Meta theme colors for different theme modes
+ * Used for:
+ * - HTML meta theme-color tags
+ * - Browser address bar coloring
+ * - PWA theme colors
+ * - System theme integration
+ */
+declare const META_THEME_COLORS: {
+    /** Light theme color - Pure white for clean, bright appearance */
+    readonly light: "#ffffff";
+    /** Dark theme color - Near black with slight warmth to reduce eye strain */
+    readonly dark: "#09090b";
+    /** System theme - Will be determined by user's OS preference */
+    readonly system: "auto";
+};
+/**
+ * Default theme mode when no preference is set
+ * Falls back to system preference to respect user's OS settings
+ */
+declare const DEFAULT_THEME_MODE: ThemeMode;
+
+export { DEFAULT_THEME_MODE as D, META_THEME_COLORS as M, THEME_MODES as T, type ThemeMode as a };

package/dist/components-B1rw2xzN.d.ts

@@ -0,0 +1,46 @@
+import { ComponentType, ReactNode } from 'react';
+
+/**
+ * Base props interface for all components
+ * Includes common properties used across multiple components
+ */
+interface BaseComponentProps {
+    /** Child elements to render inside the component */
+    children: ReactNode;
+    /** Additional CSS classes for the component */
+    className?: string;
+}
+/**
+ * Image component type definition
+ * Defines the interface for image components used throughout the application
+ */
+type ImageComponentProps = ComponentType<{
+    /** Source URL of the image */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Width of the image */
+    width?: number;
+    /** Height of the image */
+    height?: number;
+}>;
+/**
+ * Link component type definition
+ * Defines the interface for link components used throughout the application
+ */
+type LinkComponentProps = ComponentType<{
+    /** Link content */
+    children: ReactNode;
+    /** Destination URL */
+    href: string;
+    /** Target attribute */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}>;
+
+export type { BaseComponentProps as B, ImageComponentProps as I, LinkComponentProps as L };

package/dist/components.d.ts

@@ -1,25 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, HTMLAttributes, ComponentProps, FC, DragEvent, RefObject } from 'react';
-import { BaseComponentProps, LinkComponent, ImageComponent, VariantProps } from '@pelatform/ui.general';
-import { DialogProps } from '@radix-ui/react-dialog';
+import React__default, { ComponentProps, ReactNode, HTMLAttributes, FC, DragEvent, RefObject } from 'react';
+import { Alert, badgeVariants, Button } from '@pelatform/ui.components/base';
+import { B as BaseComponentProps, L as LinkComponentProps, I as ImageComponentProps } from './components-B1rw2xzN.js';
 import { QueryClient } from '@tanstack/react-query';
 import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
-import { badgeVariants } from '@pelatform/ui.default';
-import { ThemeMode } from '@pelatform/utils';
+import { VariantProps } from 'class-variance-authority';
+import { a as ThemeMode } from './colors-CUDWvz1g.js';
 
-/**
- * Alert Toast Component
- *
- * This module provides a customizable toast notification system using Sonner
- * with integrated Alert components for consistent UI styling.
- *
- * Features:
- * - Multiple icon variants (primary, destructive, success, info, warning)
- * - Customizable alert variants for different visual styles
- * - Auto-dismiss after 4 seconds
- * - Unique ID generation for each toast
- */
 /**
  * Configuration options for the alert toast notification
  */
@@ -29,7 +17,7 @@ interface AlertToastOptions {
     /** Icon variant to display in the alert - determines which icon is shown */
     icon?: "primary" | "destructive" | "success" | "info" | "warning";
     /** Visual variant of the alert component - affects styling and colors */
-    variant?: "secondary" | "primary" | "destructive" | "mono" | "success" | "info" | "warning";
+    variant?: ComponentProps<typeof Alert>["variant"];
 }
 /**
  * Creates and displays a customizable alert toast notification
@@ -37,7 +25,7 @@ interface AlertToastOptions {
  * @param options - Configuration options for the toast
  * @param options.message - The message to display (default: 'This is a toast')
  * @param options.icon - The icon variant to show (default: 'success')
- * @param options.variant - The visual style variant (default: 'mono')
+ * @param options.variant - The visual style variant (default: 'default')
  *
  * @example
  * ```tsx
@@ -129,7 +117,7 @@ declare function AlertNotification({ message, variant }: AlertToastOptions): rea
  * };
  * ```
  */
-declare const AlertComingsoon: ({ message, icon, variant, }?: AlertToastOptions) => void;
+declare const AlertComingsoon: ({ message, variant, }?: AlertToastOptions) => void;
 
 /**
  * Confirm Dismiss Dialog Component
@@ -432,6 +420,8 @@ interface ErrorComponentsProps {
     textSubtitle?: ReactNode;
     /** Optional action button (e.g., retry) */
     button?: ReactNode;
+    /** Function to generate asset URLs (e.g., for CDN integration) */
+    assetsUrl?: (path: string) => string;
 }
 /**
  * ErrorComponents Component
@@ -451,7 +441,7 @@ interface ErrorComponentsProps {
  * />
  * ```
  */
-declare function ErrorComponents({ className, type, textTitle, textSubtitle, button, }: ErrorComponentsProps): react_jsx_runtime.JSX.Element;
+declare function ErrorComponents({ className, type, textTitle, textSubtitle, button, assetsUrl, }: ErrorComponentsProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Grid Component
@@ -860,7 +850,7 @@ declare function DownloadFile({ children, className, href }: BaseComponentProps
  */
 interface SharedImage {
     /** Custom Image component implementation */
-    Image?: ImageComponent;
+    Image?: ImageComponentProps;
 }
 /**
  * Interface for components that accept a custom Link component
@@ -868,7 +858,7 @@ interface SharedImage {
  */
 interface SharedLink {
     /** Custom Link component implementation */
-    Link?: LinkComponent;
+    Link?: LinkComponentProps;
 }
 /**
  * Interface for components that accept a custom navigation function
@@ -901,7 +891,7 @@ interface SharedNavigate {
  * />
  * ```
  */
-declare const DefaultImage: ImageComponent;
+declare const DefaultImage: ImageComponentProps;
 /**
  * Default Link Component
  *
@@ -926,7 +916,7 @@ declare const DefaultImage: ImageComponent;
  * </DefaultLink>
  * ```
  */
-declare const DefaultLink: LinkComponent;
+declare const DefaultLink: LinkComponentProps;
 /**
  * Default Navigation Function
  *
@@ -997,7 +987,7 @@ declare const DefaultNavigate: (href: string) => void;
  * </ExtraLink>
  * ```
  */
-declare function ExtraLink({ Link, href, target, className, children, }: SharedLink & ComponentProps<LinkComponent>): react_jsx_runtime.JSX.Element;
+declare function ExtraLink({ Link, href, target, className, children, }: SharedLink & ComponentProps<LinkComponentProps>): react_jsx_runtime.JSX.Element;
 
 /**
  * Video Component
@@ -1225,7 +1215,7 @@ declare function BackLink({ Link, children, href, className }: BackLinkProps): r
  * Props interface for the CommandMenu component
  * Extends DialogProps from Radix UI for full dialog customization
  */
-interface CommandMenuProps extends DialogProps {
+interface CommandMenuProps {
     /** Child elements to render inside the command list (command items, groups, etc.) */
     children: React$1.ReactNode;
     /** Additional CSS classes for the trigger button */
@@ -1393,7 +1383,6 @@ interface NavigationProps extends SharedLink {
  * ```
  */
 declare function MainNav({ Link, pathname, items, className }: NavigationProps): react_jsx_runtime.JSX.Element;
-declare function handleMenuClick(item: NavItem): void;
 
 /**
  * MobileNav Component
@@ -1995,8 +1984,6 @@ interface HexagonBadgeProps {
  * @example
  * ```tsx
  * // Basic usage with an icon
- * import { StarIcon } from '@pelatform/ui.general';
- *
  * <HexagonBadge>
  *   <StarIcon className="w-6 h-6" />
  * </HexagonBadge>
@@ -2285,7 +2272,7 @@ interface LanguageSwitcherProps extends SharedImage {
     /** Button variant style (for toggle type) */
     variant?: "ghost" | "outline" | "secondary";
     /** Button size (for toggle type) */
-    size?: "sm" | "md" | "lg";
+    size?: ComponentProps<typeof Button>["size"];
     /** Whether to show language names */
     showNames?: boolean;
     /** Whether to show flag icons */
@@ -2361,7 +2348,7 @@ interface ModeSwitcherProps {
     /** Button variant style */
     variant?: "ghost" | "outline" | "secondary";
     /** Button size */
-    size?: "sm" | "md" | "lg";
+    size?: React$1.ComponentProps<typeof Button>["size"];
     /** Custom cycle order for themes (defaults to system -> light -> dark) */
     cycleOrder?: ThemeMode[];
     /** Button type: 'toggle' for a single button or 'dropdown' and 'sub-dropdown' for a menu with options */
@@ -2539,90 +2526,6 @@ interface MovingBorderProps {
  */
 declare const MovingBorder: ({ children, duration, rx, ry, ...otherProps }: MovingBorderProps) => react_jsx_runtime.JSX.Element;
 
-/**
- * Newsletter Subscribe Component
- * Provides a complete newsletter subscription form with reCAPTCHA verification,
- * email validation, analytics tracking, and customizable messaging
- */
-/**
- * Props interface for the Subscribe component
- */
-interface SubscribeProps {
-    /** Main heading text for the subscription section */
-    heading?: string;
-    /** Subheading or description text */
-    subheading?: string;
-    /** Button text when not loading */
-    buttonText?: string;
-    /** Button text when loading/submitting */
-    loadingButtonText?: string;
-    /** Placeholder text for email input */
-    inputPlaceholder?: string;
-    /** Success message shown after successful subscription */
-    successMessage?: string;
-    /** Error message for invalid email format */
-    invalidEmailMessage?: string;
-    /** Error message for reCAPTCHA verification failure */
-    recaptchaMessage?: string;
-    /** Generic error message for API failures */
-    errorMessage?: string;
-    /** API endpoint for subscription requests */
-    apiEndpoint?: string;
-    /** Text for the verify button in reCAPTCHA popover */
-    verifyButtonText?: string;
-    /** Additional CSS classes for the container */
-    className?: string;
-}
-/**
- * Subscribe Component
- *
- * A complete newsletter subscription form with the following features:
- * - Email validation with regex pattern matching
- * - reCAPTCHA v2 verification for bot protection
- * - Analytics tracking for conversion metrics
- * - Customizable messaging and styling
- * - Toast notifications for user feedback
- * - Loading states and error handling
- *
- * The component automatically tracks subscription events for analytics
- * and provides a seamless user experience with proper accessibility.
- *
- * @param props - Component props
- * @returns JSX element containing the subscription form
- *
- * @example
- * ```tsx
- * // Basic usage with default settings
- * <Subscribe />
- *
- * // Custom messaging and endpoint
- * <Subscribe
- *   heading="Join Our Community"
- *   subheading="Get exclusive updates and early access"
- *   buttonText="Join Now"
- *   apiEndpoint="/api/newsletter/subscribe"
- *   successMessage="Welcome to our community!"
- * />
- *
- * // Multilingual support
- * <Subscribe
- *   heading="Tetap terinformasi dengan rilis terbaru"
- *   subheading="Hanya update yang layak diketahui"
- *   buttonText="Berlangganan"
- *   loadingButtonText="Berlangganan..."
- *   inputPlaceholder="Alamat email Anda"
- *   successMessage="Terima kasih atas langganan Anda!"
- *   invalidEmailMessage="Alamat email tidak valid. Silakan periksa dan coba lagi."
- * />
- *
- * // Custom styling
- * <Subscribe
- *   className="bg-gradient-to-r from-blue-600 to-purple-600"
- * />
- * ```
- */
-declare function Subscribe({ heading, subheading, buttonText, loadingButtonText, inputPlaceholder, successMessage, invalidEmailMessage, recaptchaMessage, errorMessage, apiEndpoint, verifyButtonText, className, }?: SubscribeProps): react_jsx_runtime.JSX.Element;
-
 /**
  * Main Toolbar Component
  *
@@ -2731,7 +2634,7 @@ declare const ToolbarActions: ({ children }: BaseComponentProps) => react_jsx_ru
 
 /**
  * User Avatar Component
- * Displays user profile pictures with fallback initials and optional status indicators
+ * Displays user profile pictures with fallback initials
  * Built on top of the base Avatar component with enhanced user-specific features
  */
 /**
@@ -2740,8 +2643,6 @@ declare const ToolbarActions: ({ children }: BaseComponentProps) => react_jsx_ru
 interface UserAvatarProps {
     /** Additional CSS classes for styling */
     className?: string;
-    /** Whether to show online status indicator */
-    indicator?: boolean;
     /** Source URL for the user's profile image */
     src?: string | null | undefined;
     /** Alt text for the image, also used to generate initials */
@@ -2751,19 +2652,16 @@ interface UserAvatarProps {
  * UserAvatar Component
  *
  * Displays a user's profile picture with automatic fallback to initials
- * when no image is available. Supports optional online status indicators
- * and follows accessibility best practices.
+ * when no image is available.
  *
  * Features:
  * - Automatic initials generation from name
  * - Fallback handling for missing images
- * - Optional online status indicator
  * - Accessible alt text support
  * - Customizable styling
  *
  * @param props - Component props
  * @param props.className - Additional CSS classes for styling
- * @param props.indicator - Whether to show online status indicator (default: false)
  * @param props.src - Source URL for the user's profile image
  * @param props.alt - Alt text for the image, also used to generate initials
  * @returns JSX element containing the user avatar
@@ -2776,13 +2674,6 @@ interface UserAvatarProps {
  *   alt="John Doe"
  * />
  *
- * // Avatar with online indicator
- * <UserAvatar
- *   src="https://example.com/avatar.jpg"
- *   alt="Jane Smith"
- *   indicator={true}
- * />
- *
  * // Avatar with fallback initials (no image)
  * <UserAvatar
  *   alt="Bob Johnson"
@@ -2796,7 +2687,6 @@ interface UserAvatarProps {
  *       key={user.id}
  *       src={user.avatar}
  *       alt={user.name}
- *       indicator={user.isOnline}
  *       className="w-8 h-8"
  *     />
  *   ))}
@@ -2807,7 +2697,6 @@ interface UserAvatarProps {
  *   <UserAvatar
  *     src={currentUser.avatar}
  *     alt={currentUser.name}
- *     indicator={true}
  *     className="w-16 h-16"
  *   />
  *   <div>
@@ -2817,7 +2706,7 @@ interface UserAvatarProps {
  * </div>
  * ```
  */
-declare function UserAvatar({ className, indicator, src, alt }: UserAvatarProps): react_jsx_runtime.JSX.Element;
+declare function UserAvatar({ className, src, alt }: UserAvatarProps): react_jsx_runtime.JSX.Element;
 /**
  * Utility function to generate initials from a name
  *
@@ -2893,94 +2782,4 @@ declare const cssFontFace = "\n  @font-face {\n    font-family: 'Satoshi';\n
  */
 declare function SatoshiFontCSS(): react_jsx_runtime.JSX.Element;
 
-/**
- * Props interface for the RecaptchaPopover component
- */
-interface RecaptchaPopoverProps {
-    /** Whether the popover is open */
-    open: boolean;
-    /** Callback when popover open state changes */
-    onOpenChange: (open: boolean) => void;
-    /** Callback when reCAPTCHA verification succeeds */
-    onVerify: (token: string) => void;
-    /** Trigger element that opens the popover */
-    trigger: ReactNode;
-    /** Custom text for the verify button (default: "Verify & Submit") */
-    verifyButtonText?: string;
-}
-/**
- * RecaptchaPopover Component
- *
- * A popover component that displays Google reCAPTCHA v2 verification.
- * Provides a clean, accessible interface for bot protection without
- * disrupting the main page flow. Automatically handles reCAPTCHA
- * initialization, token retrieval, and error states.
- *
- * @param props - Component props
- * @returns JSX element containing the popover with reCAPTCHA
- *
- * @example
- * ```tsx
- * // Basic usage with form submission
- * function ContactForm() {
- *   const [showRecaptcha, setShowRecaptcha] = useState(false);
- *   const [formData, setFormData] = useState({ email: '', message: '' });
- *
- *   const handleSubmit = (e: FormEvent) => {
- *     e.preventDefault();
- *     setShowRecaptcha(true);
- *   };
- *
- *   const handleRecaptchaVerify = async (token: string) => {
- *     try {
- *       await submitForm({ ...formData, recaptchaToken: token });
- *       setShowRecaptcha(false);
- *       toast.success('Form submitted successfully!');
- *     } catch (error) {
- *       toast.error('Submission failed. Please try again.');
- *     }
- *   };
- *
- *   return (
- *     <form onSubmit={handleSubmit}>
- *       <input
- *         type="email"
- *         value={formData.email}
- *         onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
- *         placeholder="Email"
- *         required
- *       />
- *       <textarea
- *         value={formData.message}
- *         onChange={(e) => setFormData(prev => ({ ...prev, message: e.target.value }))}
- *         placeholder="Message"
- *         required
- *       />
- *
- *       <RecaptchaPopover
- *         open={showRecaptcha}
- *         onOpenChange={setShowRecaptcha}
- *         onVerify={handleRecaptchaVerify}
- *         trigger={
- *           <Button type="submit">
- *             Send Message
- *           </Button>
- *         }
- *       />
- *     </form>
- *   );
- * }
- *
- * // Custom verification button text
- * <RecaptchaPopover
- *   open={showVerification}
- *   onOpenChange={setShowVerification}
- *   onVerify={handleVerification}
- *   verifyButtonText="Complete Verification"
- *   trigger={<Button>Verify Account</Button>}
- * />
- * ```
- */
-declare function RecaptchaPopover({ open, onOpenChange, onVerify, trigger, verifyButtonText, }: RecaptchaPopoverProps): react_jsx_runtime.JSX.Element;
-
-export { AlertComingsoon, AlertNotification, AlertToast, type AlertToastOptions, Announcement, AnnouncementTag, AnnouncementTitle, BackLink, BackgroundPaths, Body, Book, CodeDisplay, ComingSoon, type ComingSoonProps, CommandMenu, type CommandMenuProps, ConfirmDismissDialog, type ConfirmDismissDialogProps, DEFAULT_DATA_URL_KEY, DEFAULT_NULL_INDEX, DefaultImage, DefaultLink, DefaultNavigate, DotsPattern, DownloadFile, ErrorComponents, type ErrorComponentsProps, ExtraLink, FloatingPaths, Grid, GridBackground, HexagonBadge, ImageInput, type ImageInputFile, type ImageInputFiles, type ImageInputProps, LanguageSwitcher, type LanguageSwitcherProps, LayoutAuth, LayoutBlank, type LayoutBlankProps, type LocaleOption, Logo, MainNav, MaxWidthWrapper, MobileNav, MobileNavItemRenderer, ModeSwitcher, type ModeSwitcherProps, MovingBorder, MovingLabel, type NavItem, type NavigationProps, QueryProvider, RecaptchaPopover, SatoshiFontCSS, ScreenLoader, type ScreenLoaderProps, Section, type SharedImage, type SharedLink, type SharedNavigate, SiteFooter, SiteHeader, Stack, Subscribe, type SubscribeProps, ThemeProvider, Toolbar, ToolbarActions, ToolbarHeading, ToolbarTitle, UserAvatar, Video, Wrapper, Youtube, cssFontFace, getAcceptTypeString, getBase64, getImage, getInitials, getListFiles, handleMenuClick, openFileDialog, satoshiFontUrl };
+export { AlertComingsoon, AlertNotification, AlertToast, type AlertToastOptions, Announcement, AnnouncementTag, AnnouncementTitle, BackLink, BackgroundPaths, Body, Book, CodeDisplay, ComingSoon, type ComingSoonProps, CommandMenu, type CommandMenuProps, ConfirmDismissDialog, type ConfirmDismissDialogProps, DEFAULT_DATA_URL_KEY, DEFAULT_NULL_INDEX, DefaultImage, DefaultLink, DefaultNavigate, DotsPattern, DownloadFile, ErrorComponents, type ErrorComponentsProps, ExtraLink, FloatingPaths, Grid, GridBackground, HexagonBadge, ImageInput, type ImageInputFile, type ImageInputFiles, type ImageInputProps, LanguageSwitcher, type LanguageSwitcherProps, LayoutAuth, LayoutBlank, type LayoutBlankProps, type LocaleOption, Logo, MainNav, MaxWidthWrapper, MobileNav, MobileNavItemRenderer, ModeSwitcher, type ModeSwitcherProps, MovingBorder, MovingLabel, type NavItem, type NavigationProps, QueryProvider, SatoshiFontCSS, ScreenLoader, type ScreenLoaderProps, Section, type SharedImage, type SharedLink, type SharedNavigate, SiteFooter, SiteHeader, Stack, ThemeProvider, Toolbar, ToolbarActions, ToolbarHeading, ToolbarTitle, UserAvatar, Video, Wrapper, Youtube, cssFontFace, getAcceptTypeString, getBase64, getImage, getInitials, getListFiles, openFileDialog, satoshiFontUrl };