@scalably/ui 0.2.0 → 0.2.2

package/dist/index.d.cts

@@ -3,7 +3,6 @@ import { ReactNode } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ClassValue } from 'clsx';
 import * as date_fns from 'date-fns';
 export { addMonths, endOfMonth, isSameDay, startOfMonth } from 'date-fns';
 
@@ -142,7 +141,7 @@ interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
 declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "text" | "outline" | "destructive" | "secondary" | null | undefined;
+    variant?: "link" | "text" | "outline" | "default" | "destructive" | "secondary" | null | undefined;
     size?: "icon" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
@@ -750,6 +749,13 @@ interface FileUploadProps {
      * This runs after internal type/size validation.
      */
     onValidateFile?: (file: File) => FileUploadError | null | undefined;
+    /** Enable video thumbnail capture UI via modal when a video file is selected. */
+    enableVideoThumbnail?: boolean;
+    /**
+     * Called when a thumbnail is captured from the selected video's current frame.
+     * Provides the Blob (image/jpeg) and a data URL for immediate preview.
+     */
+    onThumbnailCapture?: (thumbnail: Blob, dataUrl: string, file: FileUploadFile) => void;
 }
 /**
  * File upload component with drag-and-drop, validation, previews, and accessibility support.
@@ -1569,29 +1575,55 @@ declare const ViewToggle: React.FC<ViewToggleProps>;
 
 interface ScalablyUIProviderProps {
     children: React.ReactNode;
+    /**
+     * @deprecated `className` is no longer needed. Styles are applied globally.
+     */
     className?: string;
     /**
-     * When true, merges the scope class onto the single child instead of adding an extra wrapper div.
+     * @deprecated `asChild` is no longer needed. Styles are applied globally.
      */
     asChild?: boolean;
+    /**
+     * When true, automatically injects the component library styles into document.head.
+     * This ensures styles work in portals (modals, tooltips, etc.) without requiring
+     * manual CSS imports. Defaults to true.
+     */
+    injectStyles?: boolean;
 }
 /**
  * ScalablyUIProvider
  *
- * Adds the required `sui-scope` wrapper so prefixed Tailwind styles apply.
+ * Provides the Scalably UI component library context and automatically injects styles.
+ * All classes are globally prefixed (`sui-*`), so no wrapper element is required.
+ *
+ * Features:
+ * - Automatically injects CSS into document.head (prevents double-injection)
+ * - Works with SSR (only injects on client-side)
+ * - Ensures styles are available for portaled components
+ * - Maintains style isolation via 'sui-' prefix
  *
  * Usage:
+ * ```tsx
  * <ScalablyUIProvider>
  *   <App />
  * </ScalablyUIProvider>
+ * ```
  *
- * Or to avoid an extra DOM node:
- * <ScalablyUIProvider asChild>
- *   <main />
+ * To disable automatic style injection (if you import CSS manually):
+ * ```tsx
+ * <ScalablyUIProvider injectStyles={false}>
+ *   <App />
  * </ScalablyUIProvider>
+ * ```
  */
 declare const ScalablyUIProvider: React.FC<ScalablyUIProviderProps>;
 
+/**
+ * Type for class values accepted by clsx
+ */
+type ClassValue = ClassArray | ClassDictionary | string | number | bigint | null | boolean | undefined;
+type ClassDictionary = Record<string, unknown>;
+type ClassArray = ClassValue[];
 /**
  * Utility function to merge Tailwind CSS classes intelligently
  * Combines clsx for conditional classes and tailwind-merge for conflict resolution
@@ -1664,4 +1696,997 @@ declare const zodErrorsToSummary: (errors: Record<string, FieldErrorLike>) => {
     message: string;
 }[];
 
-export { BackToTop, type BackToTopProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, Divider, type DividerProps, type DividerVariant, type FieldErrorLike, FileUpload, type FileUploadError, type FileUploadFile, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, Input, type InputProps, type InputVariant, MultipleSelectionButton, type MultipleSelectionButtonProps, Pagination, type PaginationProps, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, ScalablyUIProvider, type ScalablyUIProviderProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TimePicker, type TimePickerProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, type ViewMode, ViewToggle, type ViewToggleProps, clampDate, cn, daysGrid, debounce, fieldErrorToProps, formatDateLocalized, monthsForLocale, scopeClass, throttle, toDateKey, weekdaysForLocale, zodErrorsToSummary };
+/**
+ * Props for the CalendarIcon component
+ */
+interface CalendarIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Calendar icon component - displays a calendar with date indicators.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { CalendarIcon } from '@scalably/ui';
+ *
+ * <CalendarIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const CalendarIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CalendarIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Props for the CaptureIcon component
+ */
+interface CaptureIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Capture icon component - displays a camera icon with a capture button.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { CaptureIcon } from '@scalably/ui';
+ *
+ * <CaptureIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const CaptureIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CaptureIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Props for the CheckIcon component
+ */
+interface CheckIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 20. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 2.2. */
+    strokeWidth?: number;
+}
+/**
+ * Check icon component - displays a checkmark in a green gradient circle.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { CheckIcon } from '@scalably/ui';
+ *
+ * <CheckIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const CheckIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Props for the CloseIcon component
+ */
+interface CloseIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Close icon component - displays a cross icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { CloseIcon } from '@scalably/ui';
+ *
+ * <CloseIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const CloseIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CloseIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface DropdownIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 2. */
+    strokeWidth?: number;
+}
+/**
+ * Dropdown icon component - displays a down arrow icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { DropdownIcon } from '@scalably/ui';
+ *
+ * <DropdownIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const DropdownIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DropdownIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface DropUpIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 2. */
+    strokeWidth?: number;
+}
+/**
+ * DropUp icon component - displays an up arrow icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { DropUpIcon } from '@scalably/ui';
+ *
+ * <DropUpIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const DropUpIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DropUpIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface ErrorIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Error icon component - displays an error icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ErrorIcon } from '@scalably/ui';
+ *
+ * <ErrorIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ErrorIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ErrorIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface FileIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * File icon component - displays a file icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { FileIcon } from '@scalably/ui';
+ *
+ * <FileIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const FileIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FileIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface FileUploadIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * FileUpload icon component - displays a file upload icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { FileUploadIcon } from '@scalably/ui';
+ *
+ * <FileUploadIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const FileUploadIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FileUploadIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface GridIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Grid icon component - displays a grid icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { GridIcon } from '@scalably/ui';
+ *
+ * <GridIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const GridIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<GridIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface ImageIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Image icon component - displays an image icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ImageIcon } from '@scalably/ui';
+ *
+ * <ImageIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ImageIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ImageIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface ImageUploadIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * ImageUpload icon component - displays an image upload icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ImageUploadIcon } from '@scalably/ui';
+ *
+ * <ImageUploadIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ImageUploadIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ImageUploadIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface IndeterminateIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 20. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 2. */
+    strokeWidth?: number;
+}
+/**
+ * Indeterminate icon component - displays an indeterminate icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { IndeterminateIcon } from '@scalably/ui';
+ *
+ * <IndeterminateIcon size={20} className="sui-text-primary" />
+ * ```
+ */
+declare const IndeterminateIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<IndeterminateIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface InfoIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Info icon component - displays an info icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { InfoIcon } from '@scalably/ui';
+ *
+ * <InfoIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const InfoIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InfoIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface ListIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * List icon component - displays a list icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ListIcon } from '@scalably/ui';
+ *
+ * <ListIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ListIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ListIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface MinusIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 16. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Minus icon component - displays a minus icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { MinusIcon } from '@scalably/ui';
+ *
+ * <MinusIcon size={16} className="sui-text-primary" />
+ * ```
+ */
+declare const MinusIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MinusIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface MultipleSelectionIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * MultipleSelection icon component - displays a multiple selection icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { MultipleSelectionIcon } from '@scalably/ui';
+ *
+ * <MultipleSelectionIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const MultipleSelectionIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MultipleSelectionIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Props for the PlusIcon component
+ */
+interface PlusIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 16. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Plus icon component - displays a plus icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { PlusIcon } from '@scalably/ui';
+ *
+ * <PlusIcon size={16} className="sui-text-primary" />
+ * ```
+ */
+declare const PlusIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<PlusIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Props for the SearchIcon component
+ */
+interface SearchIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Search icon component - a magnifying glass icon for search functionality.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { SearchIcon } from '@scalably/ui';
+ *
+ * <SearchIcon size={20} className="sui-text-blue-500" />
+ * ```
+ */
+declare const SearchIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SearchIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface SettingsIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Settings icon component - displays a settings icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { SettingsIcon } from '@scalably/ui';
+ *
+ * <SettingsIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const SettingsIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SettingsIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Props for the SuccessIcon component
+ */
+interface SuccessIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Success icon component - displays a checkmark in a green gradient circle.
+ *
+ * **Note:** This icon has fixed brand colors (green gradient with white checkmark)
+ * and cannot be customized. Use for success/confirmation states.
+ *
+ * @example
+ * ```tsx
+ * import { SuccessIcon } from '@scalably/ui';
+ *
+ * <SuccessIcon size={24} />
+ * ```
+ */
+declare const SuccessIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SuccessIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface TickIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 16. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Tick icon component - displays a tick icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { TickIcon } from '@scalably/ui';
+ *
+ * <TickIcon size={16} className="sui-text-primary" />
+ * ```
+ */
+declare const TickIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TickIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface ToFirstIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * ToFirst icon component - displays a to first icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ToFirstIcon } from '@scalably/ui';
+ *
+ * <ToFirstIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ToFirstIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToFirstIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface ToLastIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * ToLast icon component - displays a to last icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ToLastIcon } from '@scalably/ui';
+ *
+ * <ToLastIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ToLastIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToLastIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface ToNextIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * ToNext icon component - displays a to next icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ToNextIcon } from '@scalably/ui';
+ *
+ * <ToNextIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ToNextIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToNextIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface ToPreviousIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * ToPrevious icon component - displays a to previous icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { ToPreviousIcon } from '@scalably/ui';
+ *
+ * <ToPreviousIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const ToPreviousIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ToPreviousIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface VideoIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Video icon component - displays a video icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { VideoIcon } from '@scalably/ui';
+ *
+ * <VideoIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const VideoIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<VideoIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface VideoUploadIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * VideoUpload icon component - displays a video upload icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { VideoUploadIcon } from '@scalably/ui';
+ *
+ * <VideoUploadIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const VideoUploadIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<VideoUploadIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface WarnIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 24. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+    /** Stroke width of the icon in pixels. Defaults to 1.5. */
+    strokeWidth?: number;
+}
+/**
+ * Warn icon component - displays a warn icon.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { WarnIcon } from '@scalably/ui';
+ *
+ * <WarnIcon size={24} className="sui-text-primary" />
+ * ```
+ */
+declare const WarnIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<WarnIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+/**
+ * Props for the DiscordIcon component
+ */
+interface DiscordIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Discord icon component - displays the Discord logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { DiscordIcon } from '@scalably/ui';
+ *
+ * <DiscordIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const DiscordIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DiscordIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface FacebookIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Facebook icon component - displays the Facebook logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { FacebookIcon } from '@scalably/ui';
+ *
+ * <FacebookIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const FacebookIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FacebookIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface GmailIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Gmail icon component - displays the Gmail logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { GmailIcon } from '@scalably/ui';
+ *
+ * <GmailIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const GmailIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<GmailIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface InstagramIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Instagram icon component - displays the Instagram logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { InstagramIcon } from '@scalably/ui';
+ *
+ * <InstagramIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const InstagramIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<InstagramIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface KakaoTalkIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * KakaoTalk icon component - displays the KakaoTalk logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { KakaoTalkIcon } from '@scalably/ui';
+ *
+ * <KakaoTalkIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const KakaoTalkIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<KakaoTalkIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface LineIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Line icon component - displays the Line logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { LineIcon } from '@scalably/ui';
+ *
+ * <LineIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const LineIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<LineIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface LinkedInIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * LinkedIn icon component - displays the LinkedIn logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { LinkedInIcon } from '@scalably/ui';
+ *
+ * <LinkedInIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const LinkedInIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<LinkedInIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface MessengerIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Messenger icon component - displays the Messenger logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { MessengerIcon } from '@scalably/ui';
+ *
+ * <MessengerIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const MessengerIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<MessengerIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface RedditIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Reddit icon component - displays the Reddit logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { RedditIcon } from '@scalably/ui';
+ *
+ * <RedditIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const RedditIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RedditIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface SignalIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Signal icon component - displays the Signal logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { SignalIcon } from '@scalably/ui';
+ *
+ * <SignalIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const SignalIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SignalIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface SlackIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Slack icon component - displays the Slack logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { SlackIcon } from '@scalably/ui';
+ *
+ * <SlackIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const SlackIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<SlackIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface TelegramIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Telegram icon component - displays the Telegram logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { TelegramIcon } from '@scalably/ui';
+ *
+ * <TelegramIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const TelegramIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TelegramIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface TiktokIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Tiktok icon component - displays the Tiktok logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { TiktokIcon } from '@scalably/ui';
+ *
+ * <TiktokIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const TiktokIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TiktokIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface TwitchIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Twitch icon component - displays the Twitch logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { TwitchIcon } from '@scalably/ui';
+ *
+ * <TwitchIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const TwitchIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<TwitchIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface WhatsAppIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * WhatsApp icon component - displays the WhatsApp logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { WhatsAppIcon } from '@scalably/ui';
+ *
+ * <WhatsAppIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const WhatsAppIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<WhatsAppIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface XIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * X icon component - displays the X logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { XIcon } from '@scalably/ui';
+ *
+ * <XIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const XIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<XIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+interface YoutubeIconProps extends React.SVGProps<SVGSVGElement> {
+    /** Size of the icon in pixels. Defaults to 32. */
+    size?: number;
+    /** Additional CSS classes to apply to the icon */
+    className?: string;
+}
+/**
+ * Youtube icon component - displays the Youtube logo.
+ *
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
+ *
+ * @example
+ * ```tsx
+ * import { YoutubeIcon } from '@scalably/ui';
+ *
+ * <YoutubeIcon size={32} className="sui-text-primary" />
+ * ```
+ */
+declare const YoutubeIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<YoutubeIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
+
+export { BackToTop, type BackToTopProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CaptureIcon, type CaptureIconProps, CheckIcon, type CheckIconProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, CloseIcon, type CloseIconProps, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, ErrorIcon, type ErrorIconProps, FacebookIcon, type FacebookIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, ImageIcon, type ImageIconProps, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InstagramIcon, type InstagramIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkedInIcon, type LinkedInIconProps, ListIcon, type ListIconProps, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PlusIcon, type PlusIconProps, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, RedditIcon, type RedditIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, SignalIcon, type SignalIconProps, SlackIcon, type SlackIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, 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, TwitchIcon, type TwitchIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WarnIcon, type WarnIconProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, fieldErrorToProps, formatDateLocalized, monthsForLocale, scopeClass, throttle, toDateKey, weekdaysForLocale, zodErrorsToSummary };