@spteck/react-controls-v2 2.4.3 → 2.5.1

package/dist/components/Dropzone/Dropzone.d.ts

@@ -0,0 +1,31 @@
+import { IDropzoneProps } from './IDropzoneProps';
+import * as React from 'react';
+/**
+ * Dropzone component for drag-and-drop file uploads.
+ *
+ * Built on top of `react-dropzone` and styled with Fluent UI 9 tokens.
+ * Supports file type filtering, max size/count validation, loading/disabled states,
+ * and conditional rendering via `Dropzone.Accept`, `Dropzone.Reject`, and `Dropzone.Idle`.
+ *
+ * @example
+ * ```tsx
+ * <Dropzone onDrop={(files) => console.log(files)} accept={IMAGE_MIME_TYPE}>
+ *   <Dropzone.Accept>
+ *     <Text>Drop images here</Text>
+ *   </Dropzone.Accept>
+ *   <Dropzone.Reject>
+ *     <Text>File type not accepted</Text>
+ *   </Dropzone.Reject>
+ *   <Dropzone.Idle>
+ *     <Text>Drag images here or click to select</Text>
+ *   </Dropzone.Idle>
+ * </Dropzone>
+ * ```
+ */
+export declare const Dropzone: React.ForwardRefExoticComponent<IDropzoneProps & React.RefAttributes<HTMLDivElement>> & {
+    Accept: React.FC<import('./IDropzoneProps').IDropzoneStatusProps>;
+    Reject: React.FC<import('./IDropzoneProps').IDropzoneStatusProps>;
+    Idle: React.FC<import('./IDropzoneProps').IDropzoneStatusProps>;
+    displayName: string;
+};
+//# sourceMappingURL=Dropzone.d.ts.map

package/dist/components/Dropzone/DropzoneContext.d.ts

@@ -0,0 +1,20 @@
+export interface IDropzoneContextValue {
+    /** Whether the drag contains accepted file types */
+    accept: boolean;
+    /** Whether the drag contains rejected file types */
+    reject: boolean;
+    /** Whether the dropzone is in its idle state (no active drag) */
+    idle: boolean;
+}
+/**
+ * Provider for Dropzone drag state.
+ * Used internally by the Dropzone component to share state with
+ * DropzoneAccept, DropzoneReject, and DropzoneIdle sub-components.
+ */
+export declare const DropzoneProvider: import('react').Provider<IDropzoneContextValue | null>;
+/**
+ * Hook to access the current Dropzone drag state.
+ * Must be used within a Dropzone component.
+ */
+export declare const useDropzoneContext: () => IDropzoneContextValue;
+//# sourceMappingURL=DropzoneContext.d.ts.map

package/dist/components/Dropzone/DropzoneFullScreen.d.ts

@@ -0,0 +1,19 @@
+import { IDropzoneFullScreenProps } from './IDropzoneProps';
+import * as React from 'react';
+/**
+ * DropzoneFullScreen component.
+ *
+ * Listens for document-level drag events and shows a full-screen overlay
+ * when files are dragged into the browser window. Uses a counter to correctly
+ * handle nested element dragenter/dragleave events.
+ *
+ * @example
+ * ```tsx
+ * <DropzoneFullScreen
+ *   onDrop={(files) => console.log(files)}
+ *   accept={IMAGE_MIME_TYPE}
+ * />
+ * ```
+ */
+export declare const DropzoneFullScreen: React.ForwardRefExoticComponent<IDropzoneFullScreenProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DropzoneFullScreen.d.ts.map

package/dist/components/Dropzone/DropzoneStatus.d.ts

@@ -0,0 +1,9 @@
+import { IDropzoneStatusProps } from './IDropzoneProps';
+import * as React from 'react';
+/** Renders children only when files being dragged are accepted */
+export declare const DropzoneAccept: React.FC<IDropzoneStatusProps>;
+/** Renders children only when files being dragged are rejected */
+export declare const DropzoneReject: React.FC<IDropzoneStatusProps>;
+/** Renders children only when no files are being dragged (idle state) */
+export declare const DropzoneIdle: React.FC<IDropzoneStatusProps>;
+//# sourceMappingURL=DropzoneStatus.d.ts.map

package/dist/components/Dropzone/IDropzoneProps.d.ts

@@ -0,0 +1,102 @@
+import { Accept, DropEvent, FileError, FileRejection, FileWithPath } from 'react-dropzone';
+import { SpinnerProps } from '@fluentui/react-components';
+import { IBaseProps } from '../baseComponentProps/IBaseProps';
+/**
+ * Visual appearance of the Dropzone
+ */
+export type DropzoneAppearance = 'outline' | 'filled';
+/**
+ * Props for the Dropzone component
+ */
+export interface IDropzoneProps extends IBaseProps {
+    /** Called when valid files are dropped or selected */
+    onDrop: (files: FileWithPath[]) => void;
+    /** Called when any files are dropped (both accepted and rejected) */
+    onDropAny?: (files: FileWithPath[], fileRejections: FileRejection[]) => void;
+    /** Called when dropped files do not meet file restrictions */
+    onReject?: (fileRejections: FileRejection[]) => void;
+    /**
+     * Mime types of the files that the dropzone accepts.
+     * By default, the dropzone accepts all file types.
+     *
+     * @example
+     * // Using Accept object
+     * accept={{ 'image/*': ['.png', '.jpg'] }}
+     *
+     * @example
+     * // Using string array
+     * accept={['image/png', 'image/jpeg']}
+     */
+    accept?: Accept | string[];
+    /** Whether multiple files can be dropped or selected @default true */
+    multiple?: boolean;
+    /** Maximum file size in bytes @default Infinity */
+    maxSize?: number;
+    /** Maximum number of files that can be picked at once */
+    maxFiles?: number;
+    /** Name of the form control, submitted with the form as a name/value pair */
+    name?: string;
+    /** Whether the dropzone is disabled @default false */
+    disabled?: boolean;
+    /** Whether a loading overlay should be displayed @default false */
+    loading?: boolean;
+    /** A ref function which when called opens the file system file picker */
+    openRef?: React.RefObject<(() => void) | undefined>;
+    /** Whether clicking on the dropzone opens the file selection dialog @default true */
+    activateOnClick?: boolean;
+    /** Whether drag-and-drop is enabled @default true */
+    activateOnDrag?: boolean;
+    /** Whether Space/Enter opens the file selection dialog @default true */
+    activateOnKeyboard?: boolean;
+    /** Whether drag event propagation to parents is stopped @default true */
+    dragEventsBubbling?: boolean;
+    /** Called when the dragenter event occurs */
+    onDragEnter?: (event: React.DragEvent<HTMLElement>) => void;
+    /** Called when the dragleave event occurs */
+    onDragLeave?: (event: React.DragEvent<HTMLElement>) => void;
+    /** Called when the dragover event occurs */
+    onDragOver?: (event: React.DragEvent<HTMLElement>) => void;
+    /** Called when user closes the file selection dialog with no selection */
+    onFileDialogCancel?: () => void;
+    /** Called when user opens the file selection dialog */
+    onFileDialogOpen?: () => void;
+    /** Whether to prevent dropped items from taking over the browser window @default true */
+    preventDropOnDocument?: boolean;
+    /** Whether to use the File System Access API @default true */
+    useFsAccessApi?: boolean;
+    /** Custom file aggregator */
+    getFilesFromEvent?: (event: DropEvent) => Promise<Array<File | DataTransferItem>>;
+    /** Custom validation function. Return null if no errors. */
+    validator?: <T extends File>(file: T) => FileError | FileError[] | null;
+    /** Whether pointer events should be enabled on inner content @default false */
+    enablePointerEvents?: boolean;
+    /** Props passed down to the Fluent UI Spinner shown during loading */
+    spinnerProps?: Partial<SpinnerProps>;
+    /** Props passed down to the internal input element */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Visual appearance of the dropzone @default 'outline' */
+    appearance?: DropzoneAppearance;
+    /** Border radius of the dropzone */
+    borderRadius?: string;
+    /** Accessible label for the dropzone */
+    'aria-label'?: string;
+    /** Children to render inside the dropzone */
+    children?: React.ReactNode;
+}
+/**
+ * Props for the DropzoneFullScreen component
+ */
+export interface IDropzoneFullScreenProps extends Omit<IDropzoneProps, 'activateOnClick'> {
+    /** Whether the full-screen dropzone is active @default true */
+    active?: boolean;
+    /** Z-index of the full-screen overlay @default 9999 */
+    zIndex?: React.CSSProperties['zIndex'];
+}
+export type { Accept, FileError, FileRejection, FileWithPath, DropEvent };
+/**
+ * Props for the DropzoneAccept, DropzoneReject, and DropzoneIdle sub-components
+ */
+export interface IDropzoneStatusProps {
+    children: React.ReactNode;
+}
+//# sourceMappingURL=IDropzoneProps.d.ts.map

package/dist/components/Dropzone/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Dropzone';
+export * from './DropzoneFullScreen';
+export * from './DropzoneStatus';
+export * from './IDropzoneProps';
+export * from './mime-types';
+export * from './DropzoneContext';
+export * from './useDropzoneStyles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Dropzone/mime-types.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Common MIME type constants for use with the Dropzone `accept` prop.
+ */
+export declare const MIME_TYPES: {
+    readonly png: "image/png";
+    readonly gif: "image/gif";
+    readonly jpeg: "image/jpeg";
+    readonly svg: "image/svg+xml";
+    readonly webp: "image/webp";
+    readonly avif: "image/avif";
+    readonly heic: "image/heic";
+    readonly heif: "image/heif";
+    readonly mp4: "video/mp4";
+    readonly zip: "application/zip";
+    readonly rar: "application/x-rar";
+    readonly '7z': "application/x-7z-compressed";
+    readonly csv: "text/csv";
+    readonly pdf: "application/pdf";
+    readonly doc: "application/msword";
+    readonly docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    readonly xls: "application/vnd.ms-excel";
+    readonly xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    readonly ppt: "application/vnd.ms-powerpoint";
+    readonly pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+    readonly exe: "application/vnd.microsoft.portable-executable";
+};
+/** All image MIME types */
+export declare const IMAGE_MIME_TYPE: ("image/png" | "image/gif" | "image/jpeg" | "image/svg+xml" | "image/webp" | "image/avif" | "image/heic" | "image/heif")[];
+/** PDF MIME type */
+export declare const PDF_MIME_TYPE: "application/pdf"[];
+/** Microsoft Word MIME types */
+export declare const MS_WORD_MIME_TYPE: ("application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document")[];
+/** Microsoft Excel MIME types */
+export declare const MS_EXCEL_MIME_TYPE: ("application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")[];
+/** Microsoft PowerPoint MIME types */
+export declare const MS_POWERPOINT_MIME_TYPE: ("application/vnd.ms-powerpoint" | "application/vnd.openxmlformats-officedocument.presentationml.presentation")[];
+/** Executable MIME type */
+export declare const EXE_MIME_TYPE: "application/vnd.microsoft.portable-executable"[];
+//# sourceMappingURL=mime-types.d.ts.map

package/dist/components/Dropzone/useDropzoneStyles.d.ts

@@ -0,0 +1,12 @@
+import { DropzoneAppearance } from './IDropzoneProps';
+export interface IDropzoneStyles {
+    root: string;
+    rootAccept: string;
+    rootReject: string;
+    rootDisabled: string;
+    inner: string;
+    loadingOverlay: string;
+    fullScreen: string;
+}
+export declare const useDropzoneStyles: (appearance?: DropzoneAppearance, borderRadius?: string) => IDropzoneStyles;
+//# sourceMappingURL=useDropzoneStyles.d.ts.map

package/dist/components/InlineSVG/IInlineSVGProps.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface IInlineSVGProps {
+    /** The SVG source — URL, data URI (base64 or URL-encoded), or raw SVG string */
+    src: string;
+    /** Cache remote SVG requests in memory @default true */
+    cacheRequests?: boolean;
+    /** Title for the SVG — overrides existing <title> tag, pass null to remove */
+    title?: string | null;
+    /** Description for the SVG — overrides existing <desc> tag */
+    description?: string;
+    /** Create unique IDs to prevent collisions when rendering the same SVG multiple times @default false */
+    uniquifyIDs?: boolean;
+    /** Custom hash string for uniquifyIDs @default random 8-char string */
+    uniqueHash?: string;
+    /** Base URL to prepend to url() references when using uniquifyIDs */
+    baseURL?: string;
+    /** Pre-process the SVG string before parsing — must return a string */
+    preProcessor?: (code: string) => string;
+    /** Custom options for the fetch request */
+    fetchOptions?: RequestInit;
+    /** Content shown while the SVG is loading */
+    loader?: React.ReactNode;
+    /** Fallback content on fetch error or unsupported browser */
+    children?: React.ReactNode;
+    /** Ref to the rendered SVG element — not available on initial render */
+    innerRef?: React.Ref<SVGSVGElement | null>;
+    /** Called when the SVG loads successfully */
+    onLoad?: (src: string, isCached: boolean) => void;
+    /** Called when loading the SVG fails */
+    onError?: (error: Error) => void;
+    /** SVG width — overrides the SVG's width attribute */
+    width?: number | string;
+    /** SVG height — overrides the SVG's height attribute */
+    height?: number | string;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline style overrides */
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=IInlineSVGProps.d.ts.map

package/dist/components/InlineSVG/InlineSVG.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IInlineSVGProps } from './IInlineSVGProps';
+export declare const InlineSVG: React.FC<IInlineSVGProps>;
+//# sourceMappingURL=InlineSVG.d.ts.map

package/dist/components/InlineSVG/index.d.ts

@@ -0,0 +1,5 @@
+export { InlineSVG } from './InlineSVG';
+export type { IInlineSVGProps } from './IInlineSVGProps';
+export { clearInlineSVGCache } from './useInlineSVG';
+export type { InlineSVGStatus } from './useInlineSVG';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InlineSVG/useInlineSVG.d.ts

@@ -0,0 +1,30 @@
+export type InlineSVGStatus = 'idle' | 'loading' | 'loaded' | 'failed' | 'unsupported';
+interface InlineSVGState {
+    content: string;
+    isCached: boolean;
+    status: InlineSVGStatus;
+}
+/** Clear the in-memory SVG cache */
+export declare const clearInlineSVGCache: () => void;
+export interface UseInlineSVGOptions {
+    src: string;
+    cacheRequests: boolean;
+    fetchOptions?: RequestInit;
+    onError?: (error: Error) => void;
+}
+export declare const useInlineSVG: ({ src, cacheRequests, fetchOptions, onError }: UseInlineSVGOptions) => InlineSVGState;
+export interface ProcessSVGOptions {
+    content: string;
+    preProcessor?: (code: string) => string;
+    title?: string | null;
+    description?: string;
+    uniquifyIDs?: boolean;
+    uniqueHash?: string;
+    baseURL?: string;
+    width?: number | string;
+    height?: number | string;
+}
+/** Parse, sanitize, and transform SVG content — returns serialized SVG string or null */
+export declare const processSVG: (options: ProcessSVGOptions) => string | null;
+export {};
+//# sourceMappingURL=useInlineSVG.d.ts.map

package/dist/components/InlineSVG/useInlineSVGStyles.d.ts

@@ -0,0 +1,4 @@
+export declare const useInlineSVGStyles: () => {
+    root: string;
+};
+//# sourceMappingURL=useInlineSVGStyles.d.ts.map

package/dist/components/Marquee/IMarqueeProps.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export interface IMarqueeProps {
+    /** Content to scroll */
+    children: React.ReactNode;
+    /** Scroll orientation @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Reverse the animation direction @default false */
+    reverse?: boolean;
+    /** Pause animation on hover @default false */
+    pauseOnHover?: boolean;
+    /** Number of times children are repeated for seamless looping @default 4 */
+    repeat?: number;
+    /** Full-cycle animation duration in ms @default 100000 */
+    duration?: number;
+    /** Gap between repeated groups — Fluent spacing token key or CSS value @default 'spacingHorizontalM' */
+    gap?: string;
+    /** Show gradient fade on edges @default true */
+    fadeEdges?: boolean;
+    /** Color of the fade gradient (any CSS color) @default tokens.colorNeutralBackground1 */
+    fadeEdgeColor?: string;
+    /** Size of the fade gradient @default '5%' */
+    fadeEdgeSize?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline style overrides */
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=IMarqueeProps.d.ts.map

package/dist/components/Marquee/Marquee.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IMarqueeProps } from './IMarqueeProps';
+export declare const Marquee: React.FC<IMarqueeProps>;
+//# sourceMappingURL=Marquee.d.ts.map

package/dist/components/Marquee/index.d.ts

@@ -0,0 +1,4 @@
+export { Marquee } from './Marquee';
+export type { IMarqueeProps } from './IMarqueeProps';
+export { useMarqueeStyles } from './useMarqueeStyles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Marquee/useMarqueeStyles.d.ts

@@ -0,0 +1,6 @@
+export declare const useMarqueeStyles: (orientation: "horizontal" | "vertical", reverse: boolean, pauseOnHover: boolean, repeat: number, duration: number, gap: string, fadeEdges: boolean, fadeEdgeColor: string, fadeEdgeSize: string) => {
+    root: string;
+    content: string;
+    group: string;
+};
+//# sourceMappingURL=useMarqueeStyles.d.ts.map

package/dist/components/OTPField/IOTPFieldProps.d.ts

@@ -0,0 +1,49 @@
+/** Validation type determines which characters are accepted */
+export type OTPValidationType = 'numeric' | 'alpha' | 'alphanumeric' | 'none';
+export interface IOTPFieldProps {
+    /** Number of OTP input slots */
+    length: number;
+    /** Current OTP value (controlled) */
+    value?: string;
+    /** Default OTP value (uncontrolled) */
+    defaultValue?: string;
+    /** Called when the OTP value changes */
+    onChange?: (value: string) => void;
+    /** Called when all slots are filled */
+    onComplete?: (value: string) => void;
+    /** Validation type — restricts accepted characters (default 'numeric') */
+    validationType?: OTPValidationType;
+    /** Custom sanitize function when validationType is 'none' */
+    sanitizeValue?: (value: string) => string;
+    /** Whether to mask entered characters like a password (default false) */
+    mask?: boolean;
+    /** Autocomplete attribute for the first input (default 'one-time-code') */
+    autoComplete?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Label displayed above the field */
+    label?: string;
+    /** Validation message displayed below the field */
+    message?: string;
+    /** Validation message type */
+    messageType?: 'error' | 'info' | 'warning' | 'success';
+    /** Whether the field is required */
+    required?: boolean;
+    /** Size of each input slot (default 'medium') */
+    size?: 'small' | 'medium' | 'large';
+    /** Gap between input slots in px (default 8) */
+    gap?: number;
+    /** Separator rendered between groups (e.g. after 3 of 6 digits) */
+    separatorAfter?: number[];
+    /** Character or element used as separator (default '–') */
+    separator?: React.ReactNode;
+    /** Placeholder character for empty slots (default '') */
+    placeholder?: string;
+    /** Additional CSS class for the root element */
+    className?: string;
+    /** Inline style overrides for the root element */
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=IOTPFieldProps.d.ts.map

package/dist/components/OTPField/OTPField.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { IOTPFieldProps } from './IOTPFieldProps';
+/**
+ * One-time-password input — renders a group of single-character inputs
+ * with automatic focus management, paste support, and keyboard navigation.
+ */
+export declare const OTPField: React.FC<IOTPFieldProps>;
+//# sourceMappingURL=OTPField.d.ts.map

package/dist/components/OTPField/index.d.ts

@@ -0,0 +1,3 @@
+export { OTPField } from './OTPField';
+export type { IOTPFieldProps, OTPValidationType } from './IOTPFieldProps';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/OTPField/useOTPField.d.ts

@@ -0,0 +1,25 @@
+import { OTPValidationType } from './IOTPFieldProps';
+export interface UseOTPFieldOptions {
+    length: number;
+    value?: string;
+    defaultValue?: string;
+    validationType: OTPValidationType;
+    sanitizeValue?: (value: string) => string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+export declare const useOTPField: (options: UseOTPFieldOptions) => {
+    value: string;
+    focusedIndex: number;
+    inputRefs: import('react').MutableRefObject<(HTMLInputElement | null)[]>;
+    inputMode: "text" | "numeric";
+    handleChange: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (index: number, event: React.KeyboardEvent<HTMLInputElement>) => void;
+    handlePaste: (index: number, event: React.ClipboardEvent<HTMLInputElement>) => void;
+    handleFocus: (index: number) => void;
+    handleBlur: () => void;
+    focusSlot: (index: number) => void;
+};
+//# sourceMappingURL=useOTPField.d.ts.map

package/dist/components/OTPField/useOTPFieldStyles.d.ts

@@ -0,0 +1,23 @@
+export interface IOTPFieldStyles {
+    root: string;
+    inputGroup: string;
+    input: string;
+    inputSmall: string;
+    inputMedium: string;
+    inputLarge: string;
+    inputFilled: string;
+    inputActive: string;
+    inputDisabled: string;
+    inputError: string;
+    inputSuccess: string;
+    inputWarning: string;
+    separator: string;
+    label: string;
+    message: string;
+    messageError: string;
+    messageWarning: string;
+    messageInfo: string;
+    messageSuccess: string;
+}
+export declare const useOTPFieldStyles: (gap: number) => IOTPFieldStyles;
+//# sourceMappingURL=useOTPFieldStyles.d.ts.map