@scalably/ui 0.6.0 → 0.6.2

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, HTMLAttributes, ForwardRefExoticComponent, SVGProps, RefAttributes, MemoExoticComponent } from 'react';
+import react__default, { ReactNode, ReactElement, HTMLAttributes, ForwardRefExoticComponent, SVGProps, RefAttributes, MemoExoticComponent } from 'react';
 import { Point, Area } from 'react-easy-crop';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as date_fns from 'date-fns';
@@ -176,6 +176,200 @@ interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
 }
 declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
+type BottomNavigationProps = {
+    /** Additional class name for the navigation container */
+    className?: string;
+    /** Controlled active value */
+    value?: string;
+    /** Default active value for uncontrolled mode */
+    defaultValue?: string;
+    /** Callback when active value changes */
+    onValueChange?: (value: string) => void;
+    /** Navigation items */
+    children: ReactNode;
+    /** Whether to use fixed positioning at the bottom of the viewport */
+    fixed?: boolean;
+    /** Whether to show a top border */
+    showBorder?: boolean;
+    /** Whether to show a shadow */
+    showShadow?: boolean;
+    /** Custom z-index value when fixed. Defaults to 40. Modals/dialogs typically use z-50+. */
+    zIndex?: number;
+    /** Hide the navigation (useful when modals/dialogs are open) */
+    hidden?: boolean;
+};
+/**
+ * BottomNavigation - A mobile-optimized bottom navigation bar with animated interactions.
+ *
+ * Features:
+ * - Compound component pattern (BottomNavigation, BottomNavigationItem)
+ * - Smooth animations with scale and color transitions
+ * - Sliding indicator line animation
+ * - Support for icon badges (notification counts)
+ * - URL navigation support via `href` prop
+ * - Keyboard navigation (Arrow keys, Home, End)
+ * - Full ARIA support for accessibility
+ * - Controlled or uncontrolled modes
+ * - Fixed or relative positioning
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with URL navigation
+ * <BottomNavigation defaultValue="home" fixed>
+ *   <BottomNavigationItem
+ *     value="home"
+ *     label="Home"
+ *     icon={<HomeIcon />}
+ *     activeIcon={<HomeFilledIcon />}
+ *     href="/"
+ *   />
+ *   <BottomNavigationItem
+ *     value="feed"
+ *     label="Feeds"
+ *     icon={<FeedIcon />}
+ *     activeIcon={<FeedFilledIcon />}
+ *     href="/feeds"
+ *   />
+ *   <BottomNavigationItem
+ *     value="shop"
+ *     label="Shop"
+ *     icon={<ShoppingBagIcon />}
+ *     activeIcon={<ShoppingBagFilledIcon />}
+ *     href="/shop"
+ *   />
+ *   <BottomNavigationItem
+ *     value="wallet"
+ *     label="Wallet"
+ *     icon={<WalletIcon />}
+ *     activeIcon={<WalletFilledIcon />}
+ *     href="/wallet"
+ *     badge={2}
+ *   />
+ *   <BottomNavigationItem
+ *     value="profile"
+ *     label="Profile"
+ *     icon={<UserIcon />}
+ *     activeIcon={<UserFilledIcon />}
+ *     href="/profile"
+ *   />
+ * </BottomNavigation>
+ *
+ * // With React Router or Next.js - use onClick for client-side navigation
+ * <BottomNavigationItem
+ *   value="home"
+ *   label="Home"
+ *   icon={<HomeIcon />}
+ *   href="/"
+ *   onClick={(e) => {
+ *     e.preventDefault();
+ *     router.push('/');
+ *   }}
+ * />
+ *
+ * // Controlled mode
+ * const [activeTab, setActiveTab] = useState("home");
+ * <BottomNavigation value={activeTab} onValueChange={setActiveTab}>
+ *   ...
+ * </BottomNavigation>
+ * ```
+ */
+declare const BottomNavigation: react.ForwardRefExoticComponent<BottomNavigationProps & react.RefAttributes<HTMLDivElement>>;
+type BottomNavigationItemProps = {
+    /** Unique value identifier for this item */
+    value: string;
+    /** Label text displayed below the icon */
+    label: string;
+    /** Icon displayed when inactive */
+    icon: ReactElement;
+    /** Icon displayed when active (optional, defaults to icon with active styling) */
+    activeIcon?: ReactElement;
+    /** URL to navigate to when clicked. When provided, renders as an anchor tag. */
+    href?: string;
+    /** Badge count to display on the icon */
+    badge?: number | string;
+    /** Maximum badge count before showing "99+" */
+    maxBadge?: number;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Click handler - called after internal state update */
+    onClick?: (e: React.MouseEvent) => void;
+};
+declare const BottomNavigationItem: react.ForwardRefExoticComponent<BottomNavigationItemProps & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
+type SvgProps = React.ComponentPropsWithoutRef<"svg">;
+interface IconBaseProps extends SvgProps {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** ViewBox for the SVG. Defaults to "0 0 24 24". */
+    viewBox?: string;
+}
+/**
+ * Public props shared by all icon components.
+ *
+ * Consumers should use this type for icon props. It intentionally omits
+ * `children`, which are provided by each specific icon implementation.
+ */
+type IconProps = Omit<IconBaseProps, "children">;
+
+/**
+ * Props for the IconBadge component
+ */
+interface IconBadgeProps {
+    /**
+     * The icon component to display. Should be a valid icon component.
+     */
+    icon: ReactElement<IconProps>;
+    /**
+     * The notification count to display in the badge.
+     * Can be a number or a string (e.g., "99+").
+     * Badge is hidden when count is 0, null, undefined, or empty string.
+     */
+    count?: number | string | null;
+    /**
+     * Maximum count to display before showing "99+" format.
+     * When count exceeds this value, it will display as "99+".
+     * @default 99
+     */
+    maxCount?: number;
+    /**
+     * Custom className for the wrapper container.
+     */
+    className?: string;
+    /**
+     * Custom className for the badge element.
+     */
+    badgeClassName?: string;
+    /**
+     * Whether to show the badge even when count is 0.
+     * @default false
+     */
+    showZero?: boolean;
+}
+/**
+ * IconBadge component - Wraps an icon with a notification badge.
+ *
+ * Displays a red badge in the top-right corner of the icon.
+ * Badge shape adapts automatically: circular for small numbers, oval for larger text.
+ *
+ * @example
+ * ```tsx
+ * import { IconBadge } from '@scalably/ui';
+ * import { BellIcon, SearchIcon } from '@scalably/ui';
+ *
+ * // Basic usage with number
+ * <IconBadge icon={<BellIcon />} count={5} />
+ *
+ * // With string count
+ * <IconBadge icon={<BellIcon />} count="99+" />
+ *
+ * // Custom max count
+ * <IconBadge icon={<BellIcon />} count={150} maxCount={100} />
+ * ```
+ */
+declare const IconBadge: react.ForwardRefExoticComponent<IconBadgeProps & react.RefAttributes<HTMLDivElement>>;
+
 type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "text" | "link";
 type ButtonSize = "md" | "lg" | "icon";
 type ButtonBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size">;
@@ -1041,6 +1235,62 @@ interface CroppedImageResult {
  */
 declare function getCroppedImg(options: GetCroppedImgOptions): Promise<CroppedImageResult | null>;
 
+/**
+ * Image gallery component with responsive layouts and navigation controls.
+ *
+ * **Mobile view (< 768px):**
+ * - Horizontal scrollable thumbnail list at bottom
+ * - Preview image above with 100% width and 618px height
+ * - Image with object-contain
+ *
+ * **Desktop view (>= 768px):**
+ * - Left sidebar with 2-column grid of thumbnails (max-width: 268px, max-height: 618px)
+ * - Right preview area with prev/next arrows
+ * - Preview image with 100% width and object-contain
+ *
+ * @example
+ * ```tsx
+ * <ImageGallery
+ *   images={['/img1.jpg', '/img2.jpg', '/img3.jpg']}
+ *   thumbnail="/thumbnail.jpg"
+ *   defaultImagePosition={0}
+ * />
+ * ```
+ */
+type ImageSource = string | {
+    src: string;
+    alt?: string;
+};
+interface ImageGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Required list of images to display in the gallery.
+     * Can be an array of URL strings or objects with src and alt properties.
+     */
+    images: ImageSource[];
+    /**
+     * Optional thumbnail that will be merged with the images list at position 0.
+     * This thumbnail will also be shown by default.
+     */
+    thumbnail?: ImageSource;
+    /**
+     * The default image position to show (0-indexed).
+     * @default 0
+     */
+    defaultImagePosition?: number;
+    /**
+     * Callback fired when the current image changes.
+     */
+    onImageChange?: (index: number) => void;
+    /**
+     * The alignment of the gallery.
+     * - 'horizontal': Thumbnails on the left (grid), preview on the right.
+     * - 'vertical': Preview on top, thumbnails on the bottom (scrollable).
+     * @default 'horizontal'
+     */
+    align?: "horizontal" | "vertical";
+}
+declare const ImageGallery: react.ForwardRefExoticComponent<ImageGalleryProps & react.RefAttributes<HTMLDivElement>>;
+
 type FormBaseProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit">;
 interface FormProps extends FormBaseProps {
     onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
@@ -2937,21 +3187,6 @@ declare function normalizeAcceptedFileTypes(acceptedFileTypes: string[]): string
  */
 declare function validateFileTypeAndSize(file: File, acceptedMimeTypes: string[], maxFileSize: number): BasicFileValidationError | null;
 
-type SvgProps = React.ComponentPropsWithoutRef<"svg">;
-interface IconBaseProps extends SvgProps {
-    /** Size of the icon in pixels. Defaults to 24. */
-    size?: number;
-    /** ViewBox for the SVG. Defaults to "0 0 24 24". */
-    viewBox?: string;
-}
-/**
- * Public props shared by all icon components.
- *
- * Consumers should use this type for icon props. It intentionally omits
- * `children`, which are provided by each specific icon implementation.
- */
-type IconProps = Omit<IconBaseProps, "children">;
-
 interface CopyIconProps extends IconProps {
 }
 /**
@@ -3085,6 +3320,25 @@ declare const SearchIcon: {
     displayName: string;
 };
 
+interface ShareIconProps extends IconProps {
+}
+/**
+ * Share icon component - displays a share/upload icon with an upward arrow.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ShareIcon } from '@scalably/ui';
+ *
+ * <ShareIcon size={24} />
+ * ```
+ */
+declare const ShareIcon: {
+    (props: ShareIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface TranslateIconProps extends IconProps {
 }
 /**
@@ -4000,6 +4254,25 @@ declare const WarnIcon: {
     displayName: string;
 };
 
+interface BellIconProps extends IconProps {
+}
+/**
+ * Bell icon component - displays a notification bell icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { BellIcon } from '@scalably/ui';
+ *
+ * <BellIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const BellIcon: {
+    (props: BellIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface CalendarIconProps extends IconProps {
 }
 /**
@@ -4019,6 +4292,25 @@ declare const CalendarIcon: {
     displayName: string;
 };
 
+interface CartIconProps extends IconProps {
+}
+/**
+ * Cart icon component - displays a shopping cart icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { CartIcon } from '@scalably/ui';
+ *
+ * <CartIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const CartIcon: {
+    (props: CartIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface EyeIconProps extends IconProps {
 }
 /**
@@ -4038,6 +4330,84 @@ declare const EyeIcon: {
     displayName: string;
 };
 
+interface FeedFilledIconProps extends IconProps {
+}
+/**
+ * Feed Filled icon component - displays a filled news feed/article list icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ * Use this as the active state paired with `FeedIcon` for the inactive state.
+ *
+ * @example
+ * ```tsx
+ * import { FeedFilledIcon } from '@scalably/ui';
+ *
+ * <FeedFilledIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const FeedFilledIcon: {
+    (props: FeedFilledIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FeedIconProps extends IconProps {
+}
+/**
+ * Feed icon component - displays a news feed/article list icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { FeedIcon } from '@scalably/ui';
+ *
+ * <FeedIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const FeedIcon: {
+    (props: FeedIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface HomeFilledIconProps extends IconProps {
+}
+/**
+ * Home Filled icon component - displays a filled house/home icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ * Use this as the active state paired with `HomeIcon` for the inactive state.
+ *
+ * @example
+ * ```tsx
+ * import { HomeFilledIcon } from '@scalably/ui';
+ *
+ * <HomeFilledIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const HomeFilledIcon: {
+    (props: HomeFilledIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface HomeIconProps extends IconProps {
+}
+/**
+ * Home icon component - displays a house/home icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { HomeIcon } from '@scalably/ui';
+ *
+ * <HomeIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const HomeIcon: {
+    (props: HomeIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface EyeSlashIconProps extends IconProps {
 }
 /**
@@ -4133,6 +4503,27 @@ declare const MultipleSelectionIcon: {
     displayName: string;
 };
 
+interface PaletteIconProps extends IconProps {
+}
+/**
+ * Palette icon component - displays an artist's palette with paint colors.
+ *
+ * This icon uses fixed brand colors (various blues, yellows, reds, greens, pinks)
+ * and cannot be styled with Tailwind color classes. The icon represents an artist's
+ * paint palette with multiple colored paint dots and a paintbrush.
+ *
+ * @example
+ * ```tsx
+ * import { PaletteIcon } from '@scalably/ui';
+ *
+ * <PaletteIcon size={24} />
+ * ```
+ */
+declare const PaletteIcon: {
+    (props: PaletteIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface PlusIconProps extends IconProps {
 }
 /**
@@ -4171,6 +4562,45 @@ declare const SettingsIcon: {
     displayName: string;
 };
 
+interface ShoppingBagFilledIconProps extends IconProps {
+}
+/**
+ * Shopping Bag Filled icon component - displays a filled shopping bag icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ * Use this as the active state paired with `ShoppingBagIcon` for the inactive state.
+ *
+ * @example
+ * ```tsx
+ * import { ShoppingBagFilledIcon } from '@scalably/ui';
+ *
+ * <ShoppingBagFilledIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ShoppingBagFilledIcon: {
+    (props: ShoppingBagFilledIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ShoppingBagIconProps extends IconProps {
+}
+/**
+ * Shopping Bag icon component - displays a shopping bag icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ShoppingBagIcon } from '@scalably/ui';
+ *
+ * <ShoppingBagIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ShoppingBagIcon: {
+    (props: ShoppingBagIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 /**
  * Props for the StarIcon component
  */
@@ -4194,4 +4624,82 @@ interface StarIconProps extends IconProps {
  */
 declare const StarIcon: react.MemoExoticComponent<({ fillPercentage, ...props }: StarIconProps) => react_jsx_runtime.JSX.Element>;
 
-export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BoldIcon, type BoldIconProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DownloadIcon, type DownloadIconProps, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, FilterIcon, type FilterIconProps, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, type IconProps, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, ProfileAvatar, ProgressBar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
+interface UserFilledIconProps extends IconProps {
+}
+/**
+ * User Filled icon component - displays a filled person/user icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ * Use this as the active state paired with `UserIcon` for the inactive state.
+ *
+ * @example
+ * ```tsx
+ * import { UserFilledIcon } from '@scalably/ui';
+ *
+ * <UserFilledIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const UserFilledIcon: {
+    (props: UserFilledIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface UserIconProps extends IconProps {
+}
+/**
+ * User icon component - displays a person/user icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { UserIcon } from '@scalably/ui';
+ *
+ * <UserIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const UserIcon: {
+    (props: UserIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface WalletFilledIconProps extends IconProps {
+}
+/**
+ * Wallet Filled icon component - displays a filled wallet icon with brand colors.
+ *
+ * This icon uses fixed brand colors for a polished appearance.
+ * Use this as the active state paired with `WalletIcon` for the inactive state.
+ *
+ * @example
+ * ```tsx
+ * import { WalletFilledIcon } from '@scalably/ui';
+ *
+ * <WalletFilledIcon size={24} />
+ * ```
+ */
+declare const WalletFilledIcon: {
+    (props: WalletFilledIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface WalletIconProps extends IconProps {
+}
+/**
+ * Wallet icon component - displays a wallet icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { WalletIcon } from '@scalably/ui';
+ *
+ * <WalletIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const WalletIcon: {
+    (props: WalletIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BellIcon, type BellIconProps, BoldIcon, type BoldIconProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CartIcon, type CartIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DownloadIcon, type DownloadIconProps, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, FeedFilledIcon, type FeedFilledIconProps, FeedIcon, type FeedIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, FilterIcon, type FilterIconProps, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, HomeFilledIcon, type HomeFilledIconProps, HomeIcon, type HomeIconProps, IconBadge, type IconBadgeProps, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageGallery, type ImageGalleryProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PaletteIcon, type PaletteIconProps, PlusIcon, type PlusIconProps, ProfileAvatar, ProgressBar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, ShareIcon, type ShareIconProps, ShoppingBagFilledIcon, type ShoppingBagFilledIconProps, ShoppingBagIcon, type ShoppingBagIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, UserFilledIcon, type UserFilledIconProps, UserIcon, type UserIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WalletFilledIcon, type WalletFilledIconProps, WalletIcon, type WalletIconProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };