@scalably/ui 0.4.4 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react from 'react';
2
2
  import react__default, { ReactNode, HTMLAttributes, ForwardRefExoticComponent, SVGProps, RefAttributes, MemoExoticComponent } from 'react';
3
+ import { Point, Area } from 'react-easy-crop';
3
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
5
  import * as date_fns from 'date-fns';
5
6
  export { addMonths, endOfMonth, isSameDay, startOfMonth } from 'date-fns';
@@ -703,6 +704,9 @@ declare const Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTML
703
704
  colorClassName?: string;
704
705
  } & react.RefAttributes<HTMLDivElement>>;
705
706
 
707
+ /**
708
+ * File upload component types and interfaces.
709
+ */
706
710
  type FileUploadVariant = "default" | "dragOver" | "error" | "disabled";
707
711
  type FileUploadSize = "sm" | "md" | "lg";
708
712
  type FileUploadIconType = "file" | "image" | "video";
@@ -736,6 +740,24 @@ interface FileUploadProps {
736
740
  onUploadSuccess?: (files: File[]) => void;
737
741
  onUploadError?: (error: FileUploadError) => void;
738
742
  onFileRemove?: (fileId: string) => void;
743
+ /**
744
+ * Accepted file types. Can be:
745
+ * - MIME types (e.g., 'image/jpeg', 'image/png') - **Recommended**
746
+ * - MIME type wildcards (e.g., 'image/*', 'video/*')
747
+ * - File extensions (e.g., '.jpg', '.png') - Will be converted to MIME types internally
748
+ *
749
+ * @example
750
+ * ```tsx
751
+ * // MIME types (recommended)
752
+ * acceptedFileTypes={['image/jpeg', 'image/png', 'image/gif']}
753
+ *
754
+ * // With wildcards
755
+ * acceptedFileTypes={['image/*', 'video/*']}
756
+ *
757
+ * // Extensions (supported but will be normalized to MIME types)
758
+ * acceptedFileTypes={['.jpg', '.png', '.gif']}
759
+ * ```
760
+ */
739
761
  acceptedFileTypes?: string[];
740
762
  maxFileSize?: number;
741
763
  maxFiles?: number;
@@ -746,7 +768,78 @@ interface FileUploadProps {
746
768
  /** Optional helper text displayed under the dropzone when no error */
747
769
  helperText?: string;
748
770
  variant?: FileUploadVariant;
771
+ /**
772
+ * Size variant (optional). If not provided, the component uses full width
773
+ * with a default min-height of 160px. For custom sizing, use `className` instead.
774
+ *
775
+ * **Best Practice:** Omit `size` and control dimensions via `className` for
776
+ * maximum flexibility. The component automatically adjusts icon sizes, text,
777
+ * and spacing based on detected dimensions.
778
+ */
749
779
  size?: FileUploadSize;
780
+ /**
781
+ * Custom CSS classes for styling the upload zone.
782
+ *
783
+ * **Default Behavior:**
784
+ * - Full width (`sui-w-full`)
785
+ * - Default min-height: 160px (best practice)
786
+ * - Default padding: 24px (1.5rem)
787
+ * - Icon size: 24px (auto-scales based on dimensions)
788
+ *
789
+ * **Custom Sizing:**
790
+ * Control dimensions using Tailwind classes. The component automatically adjusts
791
+ * icon sizes, text sizes, and spacing to fit your layout:
792
+ * - `sui-min-h-[124px]` - Set minimum height
793
+ * - `sui-max-w-[200px]` - Set maximum width
794
+ * - `sui-w-full` - Full width (default)
795
+ *
796
+ * **Responsive Sizing:**
797
+ * When custom dimensions are detected from `className`, the component automatically:
798
+ * - Scales icon size based on container dimensions:
799
+ * - ≤100px: 16px icon
800
+ * - ≤150px: 20px icon
801
+ * - ≤200px: 24px icon
802
+ * - >200px: 28px icon
803
+ * - Adjusts text sizes for compact layouts
804
+ * - Optimizes spacing for smaller containers
805
+ *
806
+ * **Best Practice Examples:**
807
+ *
808
+ * @example
809
+ * ```tsx
810
+ * // Full width, default height (160px) - recommended
811
+ * <FileUpload onFilesChange={setFiles} />
812
+ *
813
+ * // Full width, custom height
814
+ * <FileUpload
815
+ * className="sui-min-h-[200px]"
816
+ * onFilesChange={setFiles}
817
+ * />
818
+ *
819
+ * // Compact custom size (200x124) - icon and text auto-scale
820
+ * <FileUpload
821
+ * className="sui-min-h-[124px] sui-max-w-[200px]"
822
+ * onFilesChange={setFiles}
823
+ * />
824
+ *
825
+ * // Square crop (1:1) with matching zone size
826
+ * <FileUpload
827
+ * enableImageCrop
828
+ * imageCropAspect={1}
829
+ * className="sui-min-h-[300px] sui-max-w-[300px]"
830
+ * />
831
+ *
832
+ * // Widescreen crop (16:9) with matching zone size
833
+ * <FileUpload
834
+ * enableImageCrop
835
+ * imageCropAspect={16 / 9}
836
+ * className="sui-min-h-[200px] sui-max-w-[356px]"
837
+ * />
838
+ * ```
839
+ *
840
+ * After cropping, the preview will render at exactly the zone dimensions,
841
+ * ensuring the cropped image fills the zone perfectly.
842
+ */
750
843
  className?: string;
751
844
  iconType?: FileUploadIconType;
752
845
  uploadIcon?: React.ReactNode;
@@ -775,18 +868,178 @@ interface FileUploadProps {
775
868
  * Provides the Blob (image/jpeg) and a data URL for immediate preview.
776
869
  */
777
870
  onThumbnailCapture?: (thumbnail: Blob, dataUrl: string, file: FileUploadFile) => void;
871
+ /** Enable image crop UI via modal when an image file is selected. */
872
+ enableImageCrop?: boolean;
873
+ /**
874
+ * Aspect ratio constraint for image crop (width/height), undefined = free crop.
875
+ * Common values: 1 (square), 16/9 (widescreen), 4/3 (standard).
876
+ *
877
+ * **Tip:** To match the upload zone size to the crop aspect ratio, use `className`
878
+ * with matching dimensions. For example, with `imageCropAspect={1}` (square),
879
+ * use `className="sui-min-h-[300px] sui-max-w-[300px]"` to create a 300×300px zone.
880
+ * The preview will then render at exactly that size after cropping.
881
+ *
882
+ * @example
883
+ * ```tsx
884
+ * // Square crop with matching zone
885
+ * <FileUpload
886
+ * enableImageCrop
887
+ * imageCropAspect={1}
888
+ * className="sui-min-h-[300px] sui-max-w-[300px]"
889
+ * />
890
+ * ```
891
+ */
892
+ imageCropAspect?: number;
893
+ /**
894
+ * Called when an image is cropped.
895
+ * Provides the cropped Blob (image/jpeg) and a data URL for immediate preview.
896
+ *
897
+ * **Note:** When using custom zone sizing with `className`, update the file's
898
+ * `preview` property with the `dataUrl` to ensure the preview renders at the
899
+ * correct size within the zone.
900
+ *
901
+ * @example
902
+ * ```tsx
903
+ * <FileUpload
904
+ * enableImageCrop
905
+ * imageCropAspect={1}
906
+ * className="sui-min-h-[300px] sui-max-w-[300px]"
907
+ * onImageCrop={(blob, dataUrl, file) => {
908
+ * // Update the file preview to show the cropped image
909
+ * setFiles(prev =>
910
+ * prev.map(f =>
911
+ * f.id === file.id ? { ...f, preview: dataUrl } : f
912
+ * )
913
+ * );
914
+ * }}
915
+ * />
916
+ * ```
917
+ */
918
+ onImageCrop?: (croppedBlob: Blob, dataUrl: string, file: FileUploadFile) => void;
919
+ }
920
+
921
+ declare const FileUpload: react.ForwardRefExoticComponent<FileUploadProps & react.RefAttributes<HTMLDivElement>>;
922
+
923
+ interface ImageCropProps {
924
+ /** Image source (data URL or object URL) */
925
+ imageSrc: string;
926
+ /** Aspect ratio (width/height), undefined = free */
927
+ aspect?: number;
928
+ /** Current crop position */
929
+ crop: Point;
930
+ /** Current zoom level */
931
+ zoom: number;
932
+ /** Current rotation in degrees */
933
+ rotation: number;
934
+ /** Called when crop position changes (on drag) */
935
+ onCropChange: (crop: Point) => void;
936
+ /** Called when zoom changes */
937
+ onZoomChange: (zoom: number) => void;
938
+ /** Called when rotation changes */
939
+ onRotationChange: (rotation: number) => void;
940
+ /** Called when crop completes - stores coordinates only (fires on drag) */
941
+ onCropComplete: (croppedArea: Area, croppedAreaPixels: Area) => void;
942
+ /** Crop shape */
943
+ cropShape?: "rect" | "round";
944
+ /** Show grid overlay */
945
+ showGrid?: boolean;
946
+ /** Minimum zoom level */
947
+ minZoom?: number;
948
+ /** Maximum zoom level */
949
+ maxZoom?: number;
950
+ /** Accessibility label */
951
+ "aria-label"?: string;
952
+ /** Additional class name */
953
+ className?: string;
778
954
  }
779
955
  /**
780
- * File upload component with drag-and-drop, validation, previews, and accessibility support.
781
- * Supports multiple files, file type validation, size limits, and comprehensive error handling.
956
+ * Image crop component wrapping react-easy-crop with controls for zoom, rotation, and crop area.
957
+ * This component only manages the UI and stores crop coordinates. Blob generation happens
958
+ * separately when the user confirms the crop.
782
959
  */
960
+ declare const ImageCrop: react.ForwardRefExoticComponent<ImageCropProps & react.RefAttributes<HTMLDivElement>>;
961
+
962
+ interface ImageCropModalProps {
963
+ /** Controls visibility of the modal */
964
+ isOpen: boolean;
965
+ /** Called when the modal should close */
966
+ onClose: () => void;
967
+ /** Image source (File object URL or data URL) */
968
+ imageSrc: string;
969
+ /** Aspect ratio constraint (width/height), undefined = free */
970
+ aspect?: number;
971
+ /** Called when crop is confirmed with final result */
972
+ onConfirm: (croppedBlob: Blob, dataUrl: string) => void;
973
+ /** Crop shape */
974
+ cropShape?: "rect" | "round";
975
+ /** Show grid overlay */
976
+ showGrid?: boolean;
977
+ /** Customizable content */
978
+ title?: string;
979
+ cancelButtonText?: string;
980
+ saveButtonText?: string;
981
+ }
783
982
  /**
784
- * Note on uploading state:
785
- * - The component does not perform uploads; the parent owns upload lifecycle.
786
- * - To show progress or uploading state, manage `files` as a controlled prop and
787
- * update each item's `status` ("uploading" | "success" | "error") and `progress`.
983
+ * Modal component for cropping images with zoom, rotation, and aspect ratio controls.
984
+ * Manages all crop state and generates the final Blob only when the user clicks "Save".
788
985
  */
789
- declare const FileUpload: react.ForwardRefExoticComponent<FileUploadProps & react.RefAttributes<HTMLDivElement>>;
986
+ declare const ImageCropModal: {
987
+ ({ isOpen, onClose, imageSrc, aspect, onConfirm, cropShape, showGrid, title, cancelButtonText, saveButtonText, }: ImageCropModalProps): react_jsx_runtime.JSX.Element | null;
988
+ displayName: string;
989
+ };
990
+
991
+ /**
992
+ * Options for cropping an image
993
+ */
994
+ interface GetCroppedImgOptions {
995
+ /** Image source (data URL, object URL, or remote URL) */
996
+ imageSrc: string;
997
+ /** Crop area in pixels from react-easy-crop's onCropComplete */
998
+ pixelCrop: Area;
999
+ /** Rotation in degrees (default: 0) */
1000
+ rotation?: number;
1001
+ /** Flip configuration */
1002
+ flip?: {
1003
+ horizontal: boolean;
1004
+ vertical: boolean;
1005
+ };
1006
+ /** Output image format (default: 'image/jpeg') */
1007
+ outputFormat?: "image/jpeg" | "image/png";
1008
+ /** Output quality for JPEG (0-1, default: 0.9) */
1009
+ outputQuality?: number;
1010
+ }
1011
+ /**
1012
+ * Result of image cropping operation
1013
+ */
1014
+ interface CroppedImageResult {
1015
+ /** Cropped image as Blob */
1016
+ blob: Blob;
1017
+ /** Cropped image as data URL for immediate preview */
1018
+ dataUrl: string;
1019
+ }
1020
+ /**
1021
+ * Crops an image based on the provided crop area and applies rotation/flip transformations.
1022
+ * Returns both a Blob (for upload) and a data URL (for immediate preview).
1023
+ *
1024
+ * @param options - Cropping options including image source, crop area, rotation, and output format
1025
+ * @returns Promise resolving to cropped image result or null if operation fails
1026
+ *
1027
+ * @example
1028
+ * ```tsx
1029
+ * const result = await getCroppedImg({
1030
+ * imageSrc: imageUrl,
1031
+ * pixelCrop: { x: 100, y: 100, width: 300, height: 300 },
1032
+ * rotation: 90,
1033
+ * outputFormat: 'image/jpeg',
1034
+ * outputQuality: 0.9
1035
+ * });
1036
+ * if (result) {
1037
+ * // Use result.blob for upload
1038
+ * // Use result.dataUrl for preview
1039
+ * }
1040
+ * ```
1041
+ */
1042
+ declare function getCroppedImg(options: GetCroppedImgOptions): Promise<CroppedImageResult | null>;
790
1043
 
791
1044
  type FormBaseProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit">;
792
1045
  interface FormProps extends FormBaseProps {
@@ -1086,6 +1339,7 @@ interface SelectProps extends SelectBaseProps {
1086
1339
  onSearch?: (searchTerm: string) => void;
1087
1340
  clearable?: boolean;
1088
1341
  maxHeight?: number;
1342
+ dropdownClassName?: string;
1089
1343
  renderValue?: (props: {
1090
1344
  selectedValue: string | string[];
1091
1345
  selectedOption: SelectOption | null;
@@ -1912,16 +2166,6 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
1912
2166
  * Optional loading message displayed below the logo.
1913
2167
  */
1914
2168
  message?: string;
1915
- /**
1916
- * Backdrop blur amount. Set to 0 to disable blur.
1917
- * @default 8
1918
- */
1919
- backdropBlur?: number;
1920
- /**
1921
- * Backdrop opacity (0-1).
1922
- * @default 0.8
1923
- */
1924
- backdropOpacity?: number;
1925
2169
  /**
1926
2170
  * Logo size in pixels. Responsive: smaller on mobile, larger on desktop.
1927
2171
  * @default { mobile: 64, desktop: 80 }
@@ -1940,7 +2184,7 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
1940
2184
  * Full-screen loading overlay component with animated Scalably logo.
1941
2185
  *
1942
2186
  * Features:
1943
- * - Full-screen overlay with customizable backdrop
2187
+ * - Full-screen transparent overlay
1944
2188
  * - Animated logo with pulse and rotate combination
1945
2189
  * - Optional loading message
1946
2190
  * - Full accessibility support
@@ -1955,8 +2199,8 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
1955
2199
  * // With message
1956
2200
  * <LoadingScreen message="Loading your data..." />
1957
2201
  *
1958
- * // Custom backdrop
1959
- * <LoadingScreen backdropBlur={12} backdropOpacity={0.9} />
2202
+ * // With backdrop blur via className
2203
+ * <LoadingScreen className="backdrop-blur-md" />
1960
2204
  *
1961
2205
  * // Custom size
1962
2206
  * <LoadingScreen size={{ mobile: 48, desktop: 96 }} />
@@ -1964,6 +2208,53 @@ interface LoadingScreenProps extends Omit<react__default.HTMLAttributes<HTMLDivE
1964
2208
  */
1965
2209
  declare const LoadingScreen: react__default.ForwardRefExoticComponent<LoadingScreenProps & react__default.RefAttributes<HTMLDivElement>>;
1966
2210
 
2211
+ interface LoadingSpinnerProps extends Omit<react__default.HTMLAttributes<HTMLDivElement>, "children"> {
2212
+ /**
2213
+ * Size of the spinner in pixels.
2214
+ * @default 24
2215
+ */
2216
+ size?: number;
2217
+ /**
2218
+ * Accessible label for screen readers.
2219
+ * @default "Loading"
2220
+ */
2221
+ "aria-label"?: string;
2222
+ }
2223
+ /**
2224
+ * Inline loading spinner component with animated Scalably logo.
2225
+ *
2226
+ * Features:
2227
+ * - Compact spinner for inline use (buttons, cards, tables, etc.)
2228
+ * - Animated logo with pulse and rotate combination
2229
+ * - Full accessibility support
2230
+ * - Respects reduced motion preferences
2231
+ * - Customizable size
2232
+ *
2233
+ * @example
2234
+ * ```tsx
2235
+ * // Basic usage
2236
+ * <LoadingSpinner />
2237
+ *
2238
+ * // Custom size
2239
+ * <LoadingSpinner size={32} />
2240
+ *
2241
+ * // In a button
2242
+ * <Button disabled>
2243
+ * <LoadingSpinner size={16} className="sui-mr-2" />
2244
+ * Loading...
2245
+ * </Button>
2246
+ *
2247
+ * // In a card
2248
+ * <Card>
2249
+ * <div className="sui-flex sui-items-center sui-gap-2">
2250
+ * <LoadingSpinner size={20} />
2251
+ * <span>Processing...</span>
2252
+ * </div>
2253
+ * </Card>
2254
+ * ```
2255
+ */
2256
+ declare const LoadingSpinner: react__default.ForwardRefExoticComponent<LoadingSpinnerProps & react__default.RefAttributes<HTMLDivElement>>;
2257
+
1967
2258
  interface WelcomeAssetProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
1968
2259
  /**
1969
2260
  * Optional square dimension override; falls back to intrinsic size.
@@ -2327,6 +2618,102 @@ declare const zodErrorsToSummary: (errors: Record<string, FieldErrorLike>) => {
2327
2618
  message: string;
2328
2619
  }[];
2329
2620
 
2621
+ type BasicFileValidationErrorType = "fileType" | "fileSize";
2622
+ interface BasicFileValidationError {
2623
+ type: BasicFileValidationErrorType;
2624
+ message: string;
2625
+ }
2626
+ /**
2627
+ * Converts a file extension (e.g., '.jpg') to its corresponding MIME type (e.g., 'image/jpeg').
2628
+ * Returns null if the extension is not recognized.
2629
+ *
2630
+ * @param extension - File extension with or without leading dot (e.g., '.jpg' or 'jpg')
2631
+ * @returns The corresponding MIME type or null if not found
2632
+ *
2633
+ * @example
2634
+ * ```ts
2635
+ * extensionToMimeType('.jpg') // 'image/jpeg'
2636
+ * extensionToMimeType('png') // 'image/png'
2637
+ * extensionToMimeType('.xyz') // null
2638
+ * ```
2639
+ */
2640
+ declare function extensionToMimeType(extension: string): string | null;
2641
+ /**
2642
+ * Converts a MIME type to a user-friendly display name (extension format).
2643
+ * Returns the extension name in uppercase (e.g., 'image/jpeg' → 'JPEG').
2644
+ * For wildcards, returns a category name (e.g., 'image/*' → 'All images').
2645
+ *
2646
+ * @param mimeType - MIME type (e.g., 'image/jpeg') or wildcard (e.g., 'image/*')
2647
+ * @returns User-friendly display name
2648
+ *
2649
+ * @example
2650
+ * ```ts
2651
+ * mimeTypeToDisplayName('image/jpeg') // 'JPEG'
2652
+ * mimeTypeToDisplayName('image/*') // 'All images'
2653
+ * mimeTypeToDisplayName('video/mp4') // 'MP4'
2654
+ * ```
2655
+ */
2656
+ declare function mimeTypeToDisplayName(mimeType: string): string;
2657
+ /**
2658
+ * Converts an array of MIME types to a user-friendly display string.
2659
+ * Shows extensions in uppercase (e.g., 'JPEG, PNG, GIF') or category names for wildcards.
2660
+ *
2661
+ * @param mimeTypes - Array of MIME types
2662
+ * @returns User-friendly comma-separated string
2663
+ *
2664
+ * @example
2665
+ * ```ts
2666
+ * formatAcceptedFileTypes(['image/jpeg', 'image/png', 'image/gif'])
2667
+ * // 'JPEG, PNG, GIF'
2668
+ *
2669
+ * formatAcceptedFileTypes(['image/*', 'video/*'])
2670
+ * // 'All images, All videos'
2671
+ * ```
2672
+ */
2673
+ declare function formatAcceptedFileTypes(mimeTypes: string[]): string;
2674
+ /**
2675
+ * Normalizes an array of accepted file types to MIME types only.
2676
+ * Converts file extensions (e.g., '.jpg') to MIME types (e.g., 'image/jpeg').
2677
+ * MIME types and wildcards (e.g., 'image/*') are passed through unchanged.
2678
+ *
2679
+ * @param acceptedFileTypes - Array of file types (extensions or MIME types)
2680
+ * @returns Array of normalized MIME types
2681
+ *
2682
+ * @example
2683
+ * ```ts
2684
+ * normalizeAcceptedFileTypes(['.jpg', 'image/png', 'image/*'])
2685
+ * // ['image/jpeg', 'image/png', 'image/*']
2686
+ * ```
2687
+ */
2688
+ declare function normalizeAcceptedFileTypes(acceptedFileTypes: string[]): string[];
2689
+ /**
2690
+ * Validate a File against accepted MIME types and max size.
2691
+ * Returns null when valid, or a BasicFileValidationError when invalid.
2692
+ *
2693
+ * **Note:** This function only accepts MIME types (e.g., 'image/jpeg', 'image/png').
2694
+ * Use `normalizeAcceptedFileTypes()` to convert extensions to MIME types before calling this function.
2695
+ *
2696
+ * @param file - The file to validate
2697
+ * @param acceptedMimeTypes - Array of accepted MIME types. Supports:
2698
+ * - Exact MIME types (e.g., 'image/png', 'image/jpeg')
2699
+ * - MIME type wildcards (e.g., 'image/*', 'video/*')
2700
+ * @param maxFileSize - Maximum file size in bytes
2701
+ *
2702
+ * @example
2703
+ * ```ts
2704
+ * // MIME types
2705
+ * validateFileTypeAndSize(file, ['image/png', 'image/jpeg'], 5 * 1024 * 1024);
2706
+ *
2707
+ * // With wildcards
2708
+ * validateFileTypeAndSize(file, ['image/*', 'video/*'], 5 * 1024 * 1024);
2709
+ *
2710
+ * // Converting extensions to MIME types first
2711
+ * const mimeTypes = normalizeAcceptedFileTypes(['.jpg', '.png']);
2712
+ * validateFileTypeAndSize(file, mimeTypes, 5 * 1024 * 1024);
2713
+ * ```
2714
+ */
2715
+ declare function validateFileTypeAndSize(file: File, acceptedMimeTypes: string[], maxFileSize: number): BasicFileValidationError | null;
2716
+
2330
2717
  /**
2331
2718
  * Props for the CalendarIcon component
2332
2719
  */
@@ -2431,6 +2818,18 @@ interface CopyIconProps extends React.SVGProps<SVGSVGElement> {
2431
2818
  }
2432
2819
  declare const CopyIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CopyIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
2433
2820
 
2821
+ interface CropIconProps extends React.SVGProps<SVGSVGElement> {
2822
+ size?: number;
2823
+ className?: string;
2824
+ }
2825
+ declare const CropIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CropIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
2826
+
2827
+ interface DeleteIconProps extends React.SVGProps<SVGSVGElement> {
2828
+ size?: number;
2829
+ className?: string;
2830
+ }
2831
+ declare const DeleteIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DeleteIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
2832
+
2434
2833
  interface DropdownIconProps extends React.SVGProps<SVGSVGElement> {
2435
2834
  /** Size of the icon in pixels. Defaults to 24. */
2436
2835
  size?: number;
@@ -2475,6 +2874,12 @@ interface DropUpIconProps extends React.SVGProps<SVGSVGElement> {
2475
2874
  */
2476
2875
  declare const DropUpIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<DropUpIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
2477
2876
 
2877
+ interface EditIconProps extends React.SVGProps<SVGSVGElement> {
2878
+ size?: number;
2879
+ className?: string;
2880
+ }
2881
+ declare const EditIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<EditIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
2882
+
2478
2883
  interface ErrorIconProps extends React.SVGProps<SVGSVGElement> {
2479
2884
  /** Size of the icon in pixels. Defaults to 24. */
2480
2885
  size?: number;
@@ -2736,6 +3141,67 @@ interface PlusIconProps extends React.SVGProps<SVGSVGElement> {
2736
3141
  */
2737
3142
  declare const PlusIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<PlusIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
2738
3143
 
3144
+ interface ResetIconProps extends React.SVGProps<SVGSVGElement> {
3145
+ /** Size of the icon in pixels. Defaults to 24. */
3146
+ size?: number;
3147
+ /** Additional CSS classes to apply to the icon */
3148
+ className?: string;
3149
+ }
3150
+ /**
3151
+ * Reset icon component - displays a reset icon.
3152
+ *
3153
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
3154
+ *
3155
+ * @example
3156
+ * ```tsx
3157
+ * import { ResetIcon } from '@scalably/ui';
3158
+ *
3159
+ * <ResetIcon size={24} className="sui-text-primary" />
3160
+ * ```
3161
+ */
3162
+ declare const ResetIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<ResetIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3163
+
3164
+ interface RotateLeftIconProps extends React.SVGProps<SVGSVGElement> {
3165
+ /** Size of the icon in pixels. Defaults to 24. */
3166
+ size?: number;
3167
+ /** Additional CSS classes to apply to the icon */
3168
+ className?: string;
3169
+ }
3170
+ /**
3171
+ * RotateLeft icon component - displays a rotate left icon.
3172
+ *
3173
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
3174
+ *
3175
+ * @example
3176
+ * ```tsx
3177
+ * import { RotateLeftIcon } from '@scalably/ui';
3178
+ *
3179
+ * <RotateLeftIcon size={24} className="sui-text-primary" />
3180
+ * ```
3181
+ */
3182
+ declare const RotateLeftIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RotateLeftIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3183
+
3184
+ interface RotateRightIconProps extends React.SVGProps<SVGSVGElement> {
3185
+ /** Size of the icon in pixels. Defaults to 24. */
3186
+ size?: number;
3187
+ /** Stroke width of the icon in pixels. Defaults to 1.5. */
3188
+ /** Additional CSS classes to apply to the icon */
3189
+ className?: string;
3190
+ }
3191
+ /**
3192
+ * RotateRight icon component - displays a rotate right icon.
3193
+ *
3194
+ * This icon uses `currentColor`, so it can be styled with Tailwind classes.
3195
+ *
3196
+ * @example
3197
+ * ```tsx
3198
+ * import { RotateRightIcon } from '@scalably/ui';
3199
+ *
3200
+ * <RotateRightIcon size={24} className="sui-text-primary" />
3201
+ * ```
3202
+ */
3203
+ declare const RotateRightIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RotateRightIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3204
+
2739
3205
  /**
2740
3206
  * Props for the SearchIcon component
2741
3207
  */
@@ -3462,4 +3928,4 @@ interface UnderlineIconProps extends React.SVGProps<SVGSVGElement> {
3462
3928
  */
3463
3929
  declare const UnderlineIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<UnderlineIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>>;
3464
3930
 
3465
- export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, 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, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, 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, GroupAvatar, IconBigLogo, IconLogo, 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, 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, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, RedditIcon, type RedditIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, 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, 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, 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, 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, fieldErrorToProps, formatDateLocalized, logoAssets, monthsForLocale, scopeClass, throttle, toDateKey, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
3931
+ 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, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, 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, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, IconBigLogo, IconLogo, 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, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, 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, 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, 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, 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 };