@spothero/ui 25.5.1 → 25.11.0

package/dist/index.d.ts

@@ -12,7 +12,89 @@ import {
 } from '@chakra-ui/react';
 
 // Re-export commonly used Chakra types for consumers
-export type {BoxProps, FlexProps, ContainerProps, DividerProps, SpinnerProps} from '@chakra-ui/react';
+export type {
+    BoxProps,
+    FlexProps,
+    ContainerProps,
+    DividerProps,
+    SpinnerProps,
+} from '@chakra-ui/react';
+
+export const ANIMATION_TOKENS: {
+    readonly DURATION: {
+        readonly SHORT_1: 0.07;
+        readonly SHORT_2: 0.11;
+        readonly MEDIUM_1: 0.15;
+        readonly MEDIUM_2: 0.24;
+        readonly SLOW_1: 0.4;
+        readonly SLOW_2: 0.7;
+    };
+    readonly DURATION_MS: {
+        readonly SHORT_1: 70;
+        readonly SHORT_2: 110;
+        readonly MEDIUM_1: 150;
+        readonly MEDIUM_2: 240;
+        readonly SLOW_1: 400;
+        readonly SLOW_2: 700;
+    };
+    readonly DURATION_DESCRIPTIONS: {
+        readonly SHORT_1: 'Micro-interactions such as buttons and toggles';
+        readonly SHORT_2: 'Micro-interactions such as fade';
+        readonly MEDIUM_1: 'Micro-interactions, small expansion, short distance movements';
+        readonly MEDIUM_2: 'Expansion, system communication, toast';
+        readonly SLOW_1: 'Large expansion, important system notifications';
+        readonly SLOW_2: 'Background dimming and full-screen animations';
+    };
+    readonly EASING: {
+        readonly SNAPPY: readonly [0.16, 1, 0.3, 1];
+        readonly CALM: readonly [0.4, 0, 0.2, 1];
+        readonly LINEAR: readonly [0, 0, 1, 1];
+    };
+    readonly EASING_CSS: {
+        readonly SNAPPY: 'cubic-bezier(0.16, 1, 0.3, 1)';
+        readonly CALM: 'cubic-bezier(0.4, 0, 0.2, 1)';
+        readonly LINEAR: 'linear';
+    };
+    readonly EASING_DESCRIPTIONS: {
+        readonly SNAPPY: 'Quick start, smooth finish. Good for UI interactions.';
+        readonly CALM: 'Standard easing. Good for general transitions.';
+        readonly LINEAR: 'Constant speed. Good for progress indicators.';
+    };
+    readonly TRANSITION: {
+        readonly MICRO: {
+            readonly duration: 0.07;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        readonly FADE: {
+            readonly duration: 0.11;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        readonly SMALL: {
+            readonly duration: 0.15;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        readonly MEDIUM: {
+            readonly duration: 0.24;
+            readonly ease: readonly [0.16, 1, 0.3, 1];
+        };
+        readonly LARGE: {
+            readonly duration: 0.4;
+            readonly ease: readonly [0.4, 0, 0.2, 1];
+        };
+        readonly FULL_SCREEN: {
+            readonly duration: 0.7;
+            readonly ease: readonly [0.4, 0, 0.2, 1];
+        };
+    };
+    readonly TRANSITION_DESCRIPTIONS: {
+        readonly MICRO: 'Quick micro-interaction (buttons, toggles)';
+        readonly FADE: 'Small fade transitions';
+        readonly SMALL: 'Small expansion or short movements';
+        readonly MEDIUM: 'Medium expansion, toasts, system communication';
+        readonly LARGE: 'Large expansion, important notifications';
+        readonly FULL_SCREEN: 'Full-screen animations, background dimming';
+    };
+};
 
 // ============================================================================
 // Phase 2a: Converted TypeScript Components
@@ -56,13 +138,41 @@ export {
     AccordionButton,
 } from '@chakra-ui/react';
 
-// ============================================================================
-// NOT YET CONVERTED - JavaScript Components (Basic type stubs)
-// These will be properly typed as they are converted in Phases 2b-4
-// ============================================================================
-
-// Button (Phase 3b - not yet converted)
-export const Button: React.ComponentType<any>;
+// Button (Phase 3b) - Converted
+export type ButtonVariant =
+    | 'primary'
+    | 'primaryOnDark'
+    | 'secondary'
+    | 'secondaryOnDark'
+    | 'tertiary'
+    | 'tertiaryOnDark'
+    | 'black'
+    | 'blackOnDark'
+    | 'destructive'
+    | 'destructiveOnDark';
+export type ButtonProps = Omit<
+    React.ComponentProps<typeof import('@chakra-ui/react').Button>,
+    'variant'
+> & {
+    /** If `true`, the button will render as an anchor. */
+    asAnchor?: boolean;
+    /** If `true`, and an anchor button, target="_blank" and rel="noopener noreferrer" will be set on the anchor. */
+    isExternal?: boolean;
+    /** Supports the standard Chakra height prop plus fe-ui `md`/`lg` presets. */
+    height?:
+        | React.ComponentProps<
+              typeof import('@chakra-ui/react').Button
+          >['height']
+        | 'md'
+        | 'lg';
+    href?: string;
+    target?: string;
+    rel?: string;
+    variant?: ButtonVariant;
+};
+export const Button: React.ForwardRefExoticComponent<
+    ButtonProps & React.RefAttributes<HTMLElement>
+>;
 export {ButtonGroup} from '@chakra-ui/react';
 
 // Table (Phase 4c - not yet converted)
@@ -81,14 +191,21 @@ export {
 // Modal (Phase 4b - not yet converted)
 export const Modal: React.ComponentType<any>;
 export const AlwaysMountedModal: React.ComponentType<any>;
-export {
-    ModalBody,
-    ModalFooter,
-    ModalHeader,
-} from '@chakra-ui/react';
-
-// Drawer (Phase 3b - not yet converted)
-export const Drawer: React.ComponentType<any>;
+export {ModalBody, ModalFooter, ModalHeader} from '@chakra-ui/react';
+
+// Drawer (Phase 3b) - Converted
+export type DrawerProps = Omit<
+    React.ComponentProps<typeof import('@chakra-ui/react').Drawer>,
+    'children'
+> & {
+    children: React.ReactNode;
+    header?: React.ReactNode;
+    drawerCloseButton?: React.ReactNode;
+    headerProps?: React.ComponentProps<
+        typeof import('@chakra-ui/react').DrawerHeader
+    >;
+};
+export const Drawer: React.ComponentType<DrawerProps>;
 export {
     DrawerBody,
     DrawerCloseButton,
@@ -99,57 +216,214 @@ export {
     DrawerOverlay,
 } from '@chakra-ui/react';
 
-// Skeleton (Phase 2b - not yet converted)
+// ============================================================================
+// Phase 2b: Converted TypeScript Components (Simple with styles)
+// ============================================================================
+
+// Badge (Phase 2b) - Converted (re-export with custom styles)
+export const Badge: React.ForwardRefExoticComponent<
+    import('@chakra-ui/react').BadgeProps & React.RefAttributes<HTMLSpanElement>
+>;
+
+// Skeleton (Phase 2b) - Converted (re-exports from Chakra)
 export {Skeleton, SkeletonCircle, SkeletonText} from '@chakra-ui/react';
 
-// Alert (Phase 3b - not yet converted)
-export const Alert: React.ComponentType<any>;
+// Grid (Phase 2b) - Converted
+export type GridProps = React.ComponentProps<
+    typeof import('@chakra-ui/react').Grid
+> & {
+    /** This will reduce the grid gap by half */
+    isCompact?: boolean;
+};
+export const Grid: React.ForwardRefExoticComponent<
+    GridProps & React.RefAttributes<HTMLDivElement>
+>;
 
-// Tabs (Phase 4c - not yet converted)
-export const Tabs: React.ComponentType<any>;
-export {TabList, TabPanels, Tab, TabPanel} from '@chakra-ui/react';
+// GridItem (Phase 2b) - Converted
+export type GridItemProps = React.ComponentProps<
+    typeof import('@chakra-ui/react').GridItem
+>;
+export const GridItem: React.ForwardRefExoticComponent<
+    GridItemProps & React.RefAttributes<HTMLDivElement>
+>;
 
-// Select (Phase 3a - not yet converted)
-export const Select: React.ComponentType<any>;
+// Checkbox (Phase 2b) - Converted
+export type CheckboxProps = Omit<
+    React.ComponentProps<typeof import('@chakra-ui/react').Checkbox>,
+    'size'
+> & {
+    /** Optional helper text displayed below the checkbox */
+    helperText?: string;
+    /** The size of the checkbox */
+    size?: 'sm' | 'md' | 'lg';
+};
+export const Checkbox: React.ForwardRefExoticComponent<
+    CheckboxProps & React.RefAttributes<HTMLInputElement>
+>;
 
-// Switch (Phase 2b - not yet converted)
-export const Switch: React.ComponentType<any>;
+// Switch (Phase 2b) - Converted
+export type SwitchProps = React.ComponentProps<
+    typeof import('@chakra-ui/react').Switch
+> & {
+    /** The label for the switch */
+    label?: string;
+    /** Optional helper text displayed below the switch */
+    helperText?: string;
+    /** Error message to display when invalid */
+    errorMessage?: string;
+    /** Whether the switch has an invalid state */
+    isInvalid?: boolean;
+    /** Whether the switch is disabled */
+    isDisabled?: boolean;
+    /** Whether the switch is required */
+    isRequired?: boolean;
+    /** Unique identifier for the switch */
+    id: string;
+};
+export const Switch: React.ForwardRefExoticComponent<
+    SwitchProps & React.RefAttributes<HTMLInputElement>
+>;
 
-// Link (Phase 3a - not yet converted)
-export const Link: React.ComponentType<any>;
-export {Link as ChakraLink, LinkBox, LinkOverlay} from '@chakra-ui/react';
+// Alert (Phase 3b) - Converted
+export type AlertStatus = 'neutral' | 'success' | 'warning' | 'error';
+export type AlertSize = 'sm' | 'md' | 'lg';
+export type AlertProps = Omit<
+    React.ComponentProps<typeof import('@chakra-ui/react').Alert>,
+    'status' | 'title'
+> & {
+    status?: AlertStatus;
+    title?: React.ReactNode;
+    buttonProps?: Omit<ButtonProps, 'children' | 'variant'> | null;
+    buttonText?: string | null;
+    buttonVariant?: ButtonVariant;
+    showDismiss?: boolean;
+    onDismissClick?: React.MouseEventHandler<HTMLButtonElement> | null;
+    showIcon?: boolean;
+    description?: React.ReactNode;
+    size?: AlertSize;
+    icon?: React.ElementType | null;
+};
+export const Alert: React.ForwardRefExoticComponent<
+    AlertProps & React.RefAttributes<HTMLDivElement>
+>;
 
-// Text (Phase 3a - not yet converted)
-export const Text: React.ComponentType<any>;
+// Tabs (Phase 4c - not yet converted)
+export const Tabs: React.ComponentType<any>;
+export {TabList, TabPanels, Tab, TabPanel} from '@chakra-ui/react';
 
-// Grid (Phase 2b - not yet converted)
-export const Grid: React.ComponentType<any>;
-export const GridItem: React.ComponentType<any>;
+// Select (Phase 3a) - Converted
+export type SelectProps = import('@chakra-ui/react').SelectProps & {
+    id: string;
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    isOptional?: boolean;
+};
+export const Select: React.ForwardRefExoticComponent<
+    SelectProps & React.RefAttributes<HTMLSelectElement>
+>;
+
+// Link (Phase 3a) - Converted (re-export from Chakra with custom styles)
+export {Link, Link as ChakraLink, LinkBox, LinkOverlay} from '@chakra-ui/react';
+
+// Text (Phase 3a) - Converted
+export type TextVariant = 'body' | 'body2' | 'caption';
+export type TextProps = Omit<
+    import('@chakra-ui/react').TextProps,
+    'as' | 'variant'
+> & {
+    as?: React.ElementType;
+    variant?: TextVariant;
+};
+export const Text: React.ForwardRefExoticComponent<
+    TextProps & React.RefAttributes<HTMLParagraphElement>
+>;
 
-// List (Phase 3b - not yet converted)
-export const List: React.ComponentType<any>;
+// List (Phase 3b) - Converted
+export type ListStylePosition =
+    | 'unset'
+    | 'revert'
+    | 'inside'
+    | 'outside'
+    | 'initial'
+    | 'inherit';
+export type ListType = 'ordered' | 'unstyled' | 'unordered';
+export type ListProps = Omit<
+    React.ComponentProps<typeof import('@chakra-ui/react').List>,
+    'type'
+> & {
+    stylePosition?: ListStylePosition;
+    type?: ListType;
+};
+export const List: React.ForwardRefExoticComponent<
+    ListProps & React.RefAttributes<HTMLUListElement | HTMLOListElement>
+>;
 export {ListItem} from '@chakra-ui/react';
 
-// Heading (Phase 3a - not yet converted)
-export const Heading: React.ComponentType<any>;
+// Heading (Phase 3a) - Converted
+export type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type HeadingProps = Omit<
+    import('@chakra-ui/react').HeadingProps,
+    'as' | 'variant'
+> & {
+    as?: HeadingVariant;
+    variant?: HeadingVariant;
+};
+export const Heading: React.ForwardRefExoticComponent<
+    HeadingProps & React.RefAttributes<HTMLHeadingElement>
+>;
 
 // ThemeProvider (Phase 4a - not yet converted)
 export const ThemeProvider: React.ComponentType<any>;
 
-// Image (Phase 3b - not yet converted)
-export const Image: React.ComponentType<any>;
-
-// Loader (Phase 3b - not yet converted)
-export const Loader: React.ComponentType<any>;
-
-// Progress (Phase 3b - not yet converted)
-export const Progress: React.ComponentType<any>;
-
-// Checkbox (Phase 2b - not yet converted)
-export const Checkbox: React.ComponentType<any>;
+// Image (Phase 3b) - Converted
+export type ImageProps = React.ComponentProps<
+    typeof import('@chakra-ui/react').Image
+> & {
+    isSSR?: boolean;
+    cloudinaryCloudName?: string;
+    cloudinaryImageId?: string;
+    cloudinaryTemplate?: string;
+    htmlWidth?: number;
+    htmlHeight?: number;
+    quality?: number;
+    lazyLoad?: boolean;
+};
+export const Image: React.ComponentType<ImageProps>;
+
+// Loader (Phase 3b) - Converted
+export type LoaderProps = React.ComponentProps<
+    typeof import('@chakra-ui/react').CircularProgress
+> & {
+    isInfinite?: boolean;
+    loaderBackgroundColor?: string;
+};
+export const Loader: React.ComponentType<LoaderProps>;
+
+// Progress (Phase 3b) - Converted
+export type ProgressProps = React.ComponentProps<
+    typeof import('@chakra-ui/react').Progress
+> & {
+    isRounded?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'solid' | 'outlined';
+};
+export const Progress: React.ForwardRefExoticComponent<
+    ProgressProps & React.RefAttributes<HTMLDivElement>
+>;
 
-// Input (Phase 3a - not yet converted)
-export const Input: React.ComponentType<any>;
+// Input (Phase 3a) - Converted
+export type InputProps = import('@chakra-ui/react').InputProps & {
+    id: string;
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    isOptional?: boolean;
+    customRequiredText?: string;
+};
+export const Input: React.ForwardRefExoticComponent<
+    InputProps & React.RefAttributes<HTMLInputElement>
+>;
 
 // RefreshedInput components (Phase 4d - not yet converted)
 export const RefreshedFormControl: React.ComponentType<any>;
@@ -161,8 +435,18 @@ export const RefreshedAutoSuggestSelect: React.ComponentType<any>;
 // SelectionCard (Phase 4c - not yet converted)
 export const SelectionCard: React.ComponentType<any>;
 
-// Textarea (Phase 3a - not yet converted)
-export const Textarea: React.ComponentType<any>;
+// Textarea (Phase 3a) - Converted
+export type TextareaProps = import('@chakra-ui/react').TextareaProps & {
+    id: string;
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    isOptional?: boolean;
+    customRequiredText?: string;
+};
+export const Textarea: React.ForwardRefExoticComponent<
+    TextareaProps & React.RefAttributes<HTMLTextAreaElement>
+>;
 
 // Popover (Phase 4b - not yet converted)
 export const Popover: React.ComponentType<any>;
@@ -171,15 +455,39 @@ export const PopoverArrow: React.ComponentType<any>;
 export const PopoverTrigger: React.ComponentType<any>;
 export const PopoverContent: React.ComponentType<any>;
 
-// Radio (Phase 3a - not yet converted)
-export const Radio: React.ComponentType<any>;
-export const RadioGroup: React.ComponentType<any>;
+// Radio (Phase 3a) - Converted
+export type RadioProps = Omit<import('@chakra-ui/react').RadioProps, 'size'> & {
+    value: string;
+    helperText?: string;
+    size?: 'sm' | 'md' | 'lg';
+};
+export const Radio: React.ForwardRefExoticComponent<
+    RadioProps & React.RefAttributes<HTMLInputElement>
+>;
+
+// RadioGroup (Phase 3a) - Converted
+export type RadioGroupProps = Omit<
+    import('@chakra-ui/react').RadioGroupProps,
+    'onChange'
+> & {
+    id: string;
+    label?: string;
+    errorMessage?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    onChange?: (value: string) => void;
+    direction?: 'row' | 'column';
+};
+export const RadioGroup: React.ForwardRefExoticComponent<
+    RadioGroupProps & React.RefAttributes<HTMLDivElement>
+>;
 
 // AutoSuggestSelect (Phase 4d - not yet converted)
 export const AutoSuggestSelect: React.ComponentType<any>;
 
-// Badge (Phase 2b - not yet converted)
-export const Badge: React.ComponentType<any>;
+// FilterSelect (Phase 4d - not yet converted)
+export const FilterSelect: React.ComponentType<any>;
 
 // ToggleButtonGroup (Phase 4c - not yet converted)
 export const ToggleButtonGroup: React.ComponentType<any>;