@peculiar/react-components 1.1.2 → 1.2.0

package/dist/types/Typography/typography.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { OverridableComponent, OverrideProps } from '../OverridableComponent';
-import { ColorType, TypographyType } from '../styles';
+import { IOverridableComponent, TOverrideProps } from '../OverridableComponent';
+import { TColorType, TTypographyType } from '../styles';
 /**
  * Types.
  */
-export interface TypographyOwnProps {
+export interface ITypographyOwnProps {
     /**
      * The content of the component.
      */
@@ -12,11 +12,11 @@ export interface TypographyOwnProps {
     /**
      * The variant to use.
      */
-    variant?: TypographyType;
+    variant?: TTypographyType;
     /**
      * The color of the component.
      */
-    color?: ColorType | 'inherit';
+    color?: TColorType | 'inherit';
     /**
      * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
      * Note that text overflow can only happen with block or inline-block level elements
@@ -24,11 +24,11 @@ export interface TypographyOwnProps {
      */
     noWrap?: boolean;
 }
-export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'p'> {
-    props: P & TypographyOwnProps;
+export interface ITypographyTypeMap<P = object, D extends React.ElementType = 'p'> {
+    props: P & ITypographyOwnProps;
     defaultComponent: D;
 }
-export type TypographyProps<D extends React.ElementType = TypographyTypeMap['defaultComponent']> = OverrideProps<TypographyTypeMap<{}, D>, D> & {
+export type TTypographyProps<D extends React.ElementType = ITypographyTypeMap['defaultComponent']> = TOverrideProps<ITypographyTypeMap<object, D>, D> & {
     component?: D;
 };
-export declare const Typography: OverridableComponent<TypographyTypeMap<{}, "p">>;
+export declare const Typography: IOverridableComponent<ITypographyTypeMap<object, "p">>;

package/dist/types/hooks/index.d.ts

@@ -2,13 +2,13 @@ export { useMediaQuery } from './use_media_query';
 export { useMergedRef } from './use_merged_ref';
 export { useClipboard } from './use_clipboard';
 export { useControllableState } from './use_controllable';
-export type { UseControllableStateProps } from './use_controllable';
+export type { IUseControllableStateProps } from './use_controllable';
 export { useId } from './use_id';
 export { useImage } from './use_image';
 export { useWindowEventListener } from './use_window_event_listener';
 export { useIntersectionObserver } from './use_intersection_observer';
-export { useAutocomplete, } from './use_autocomplete';
-export type { UseAutocompleteProps, UseAutocompleteReturnType, AutocompleteValue, AutocompleteGroupedOption, AutocompleteChangeReason, AutocompleteChangeDetails, } from './use_autocomplete';
+export { useAutocomplete } from './use_autocomplete';
+export type { IUseAutocompleteProps, IUseAutocompleteReturnType, TAutocompleteValue, IAutocompleteGroupedOption, TAutocompleteChangeReason, IAutocompleteChangeDetails, } from './use_autocomplete';
 export { useEventCallback } from './use_event_callback';
 export { useEnhancedEffect } from './use_enhanced_effect';
 export { useDebounceCallback } from './use_debounce_callback';

package/dist/types/hooks/use_autocomplete.d.ts

@@ -1,25 +1,25 @@
 import React from 'react';
-import type { PopoverProps } from '../Popover';
+import type { TPopoverProps } from '../Popover';
 /**
  * Types.
  */
-export type AutocompleteHighlightChangeReason = ('auto' | 'mouse' | 'keyboard');
-export type AutocompleteHighlightChangeDirectionType = ('next' | 'previous');
-export type AutocompleteHighlightChangeDiffType = (number | 'reset' | 'start' | 'end');
-export type AutocompleteChangeReason = ('selectOption' | 'removeOption');
-export interface AutocompleteChangeDetails<T = string> {
+export type TAutocompleteHighlightChangeReason = ('auto' | 'mouse' | 'keyboard');
+export type TAutocompleteHighlightChangeDirectionType = ('next' | 'previous');
+export type TAutocompleteHighlightChangeDiffType = (number | 'reset' | 'start' | 'end');
+export type TAutocompleteChangeReason = ('selectOption' | 'removeOption');
+export interface IAutocompleteChangeDetails<T = string> {
     option: T;
     index: number;
 }
-export type AutocompleteValue<T, Multiple> = Multiple extends undefined | false ? T | null : T[];
-export type AutocompleteFilterOptionsType<T, Multiple> = (options: ReadonlyArray<T>, searchValue: string, value: AutocompleteValue<T, Multiple>, getOptionLabel: (option: T) => string) => ReadonlyArray<T>;
-export type AutocompleteGroupedOption<T> = {
+export type TAutocompleteValue<T, Multiple> = Multiple extends undefined | false ? T | null : T[];
+export type TAutocompleteFilterOptionsType<T, Multiple> = (options: readonly T[], searchValue: string, value: TAutocompleteValue<T, Multiple>, getOptionLabel: (option: T) => string) => readonly T[];
+export interface IAutocompleteGroupedOption<T> {
     key: number;
     index: number;
     group: string;
     options: T[];
-};
-export type UseAutocompleteProps<T, Multiple extends boolean | undefined = undefined> = {
+}
+export interface IUseAutocompleteProps<T, Multiple extends boolean | undefined = undefined> {
     /**
      * This prop is used to help implement the accessibility logic.
      * If you don't provide an id it will fall back to a randomly generated one.
@@ -28,15 +28,15 @@ export type UseAutocompleteProps<T, Multiple extends boolean | undefined = undef
     /**
      * Array of options.
      */
-    options: ReadonlyArray<T>;
+    options: readonly T[];
     /**
      * The default value. Use when the component is not controlled.
      */
-    defaultValue?: AutocompleteValue<T, Multiple>;
+    defaultValue?: TAutocompleteValue<T, Multiple>;
     /**
      * The value of the select.
      */
-    value?: AutocompleteValue<T, Multiple>;
+    value?: TAutocompleteValue<T, Multiple>;
     /**
      * If `true`, the popup won't close when a value is selected.
      */
@@ -69,7 +69,7 @@ export type UseAutocompleteProps<T, Multiple extends boolean | undefined = undef
     /**
     * A filter function that determines the options that are eligible.
     */
-    filterOptions?: AutocompleteFilterOptionsType<T, Multiple>;
+    filterOptions?: TAutocompleteFilterOptionsType<T, Multiple>;
     /**
      * Callback fired when the popup requests to be closed.
      */
@@ -81,15 +81,15 @@ export type UseAutocompleteProps<T, Multiple extends boolean | undefined = undef
     /**
      * Callback fired when the value changes.
      */
-    onChange?: (event: React.SyntheticEvent, value: AutocompleteValue<T, Multiple>, details: AutocompleteChangeDetails<T>, reason: AutocompleteChangeReason) => void;
+    onChange?: (event: React.SyntheticEvent, value: TAutocompleteValue<T, Multiple>, details: IAutocompleteChangeDetails<T>, reason: TAutocompleteChangeReason) => void;
     /**
      * Callback fired when the input value changes.
      */
     onInputChange?: (event: React.SyntheticEvent, value: string) => void;
-};
-export type UseAutocompleteReturnType<T, Multiple extends boolean | undefined = undefined> = {
-    groupedOptions: ReadonlyArray<T> | ReadonlyArray<AutocompleteGroupedOption<T>>;
-    value: AutocompleteValue<T, Multiple>;
+}
+export interface IUseAutocompleteReturnType<T, Multiple extends boolean | undefined = undefined> {
+    groupedOptions: readonly T[] | readonly IAutocompleteGroupedOption<T>[];
+    value: TAutocompleteValue<T, Multiple>;
     searchValue: string;
     popupOpen: boolean;
     id: string;
@@ -102,7 +102,7 @@ export type UseAutocompleteReturnType<T, Multiple extends boolean | undefined =
         tabIndex: -1;
         onClick: (event: React.SyntheticEvent) => void;
     };
-    getPopoverProps: () => Pick<Required<PopoverProps>, 'open' | 'anchorEl' | 'onClose' | 'onKeyDown'>;
+    getPopoverProps: () => Pick<Required<TPopoverProps>, 'open' | 'anchorEl' | 'onClose' | 'onKeyDown'>;
     getTagProps: (option: T, index: number) => {
         key: number;
         'data-tag-index': number;
@@ -110,5 +110,5 @@ export type UseAutocompleteReturnType<T, Multiple extends boolean | undefined =
         onDelete?: (event: React.SyntheticEvent) => void;
     };
     getOptionLabel: (option: T) => string;
-};
-export declare function useAutocomplete<T, Multiple extends boolean | undefined = false>(props: UseAutocompleteProps<T, Multiple>): UseAutocompleteReturnType<T, Multiple>;
+}
+export declare function useAutocomplete<T, Multiple extends boolean | undefined = false>(props: IUseAutocompleteProps<T, Multiple>): IUseAutocompleteReturnType<T, Multiple>;

package/dist/types/hooks/use_controllable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type UseControllableStateProps<T> = {
+export interface IUseControllableStateProps<T> {
     /**
      * The value to used in controlled mode
      */
@@ -16,9 +16,9 @@ export type UseControllableStateProps<T> = {
      * The function that determines if the state should be updated
      */
     shouldUpdate?: (prev: T, next: T) => boolean;
-};
+}
 /**
  * React hook for using controlling component state.
  * @param props
  */
-export declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, React.Dispatch<React.SetStateAction<T>>];
+export declare function useControllableState<T>(props: IUseControllableStateProps<T>): [T, React.Dispatch<React.SetStateAction<T>>];

package/dist/types/hooks/use_image.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type UseImageOptionsType = {
+export interface IUseImageOptionsType {
     /**
      * A callback for when the image `src` has been loaded.
      */
@@ -8,8 +8,8 @@ export type UseImageOptionsType = {
      * A callback for when there was an error loading the image `src`.
      */
     onError?: (error: string | React.SyntheticEvent<HTMLImageElement, Event>) => void;
-};
-type Status = ('loading' | 'failed' | 'pending' | 'loaded');
+}
+type TStatus = ('loading' | 'failed' | 'pending' | 'loaded');
 /**
  * React hook that loads an image in the browser,
  * and let's us know the `status` so we can show image
@@ -26,9 +26,9 @@ type Status = ('loading' | 'failed' | 'pending' | 'loaded');
  * }
  * ```
  */
-type UseImageReturnType = {
-    status: Status;
+interface IUseImageReturnType {
+    status: TStatus;
     image?: HTMLImageElement;
-};
-export declare function useImage(src: string, options?: UseImageOptionsType): UseImageReturnType;
+}
+export declare function useImage(src: string, options?: IUseImageOptionsType): IUseImageReturnType;
 export {};

package/dist/types/hooks/use_intersection_observer.d.ts

@@ -1,7 +1,7 @@
-export type IntersectionObserverHookRefCallbackNode = HTMLElement | null;
-export type IntersectionObserverHookRefCallback = (node: IntersectionObserverHookRefCallbackNode) => void;
-export type IntersectionObserverHookResult = [
-    IntersectionObserverHookRefCallback,
+export type TIntersectionObserverHookRefCallbackNode = HTMLElement | null;
+export type TIntersectionObserverHookRefCallback = (node: TIntersectionObserverHookRefCallbackNode) => void;
+export type TIntersectionObserverHookResult = [
+    TIntersectionObserverHookRefCallback,
     {
         isIntersecting: boolean;
     }
@@ -31,4 +31,4 @@ export type IntersectionObserverHookResult = [
  * }
  * ```
  */
-export declare function useIntersectionObserver(): IntersectionObserverHookResult;
+export declare function useIntersectionObserver(): TIntersectionObserverHookResult;

package/dist/types/hooks/use_merged_ref.d.ts

@@ -3,4 +3,4 @@ import React from 'react';
  * A React hook for merging multiple refs into one ref.
  * @param refs React callback refs or refs created with `useRef()`, `createRef()`.
  */
-export declare const useMergedRef: <T extends unknown>(...refs: React.Ref<T>[]) => (instance: T) => void;
+export declare const useMergedRef: <T>(...refs: React.Ref<T>[]) => (instance: T) => void;

package/dist/types/icons/arrow_drop_down_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const ArrowDropDownIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const ArrowDropDownIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/arrow_rigth.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const ArrowRightIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const ArrowRightIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/check_circle_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const CheckCircleIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CheckCircleIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/check_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const CheckIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CheckIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/close_circle_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const CloseCircleIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CloseCircleIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/close_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const CloseIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CloseIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/close_small_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const CloseSmallIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CloseSmallIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/dot_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const DotIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const DotIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/minus_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const MinusIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const MinusIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/plus_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const PlusIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const PlusIcon: React.FC<TIconProps>;
 export {};

package/dist/types/icons/warning_icon.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
-export declare const WarningIcon: React.FC<IconProps>;
+type TIconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const WarningIcon: React.FC<TIconProps>;
 export {};

package/dist/types/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/styles/default_theme.d.ts

@@ -1,3 +1,3 @@
-import { ThemeType } from './types';
-export declare const defaultThemeLight: ThemeType;
-export declare const defaultThemeDark: ThemeType;
+import { IThemeType } from './types';
+export declare const defaultThemeLight: IThemeType;
+export declare const defaultThemeDark: IThemeType;

package/dist/types/styles/foundations/colors.d.ts

@@ -1,4 +1,4 @@
-type ColorPalletteSuffix = {
+interface IColorPalletteSuffix {
     '-tint-5': string;
     '-tint-4': string;
     '-tint-3': string;
@@ -10,11 +10,11 @@ type ColorPalletteSuffix = {
     '-shade-3': string;
     '-shade-4': string;
     '-shade-5': string;
-};
-type RemapColorPaletteKeys<Type, Name extends string> = {
+}
+type TRemapColorPaletteKeys<Type, Name extends string> = {
     [K in keyof Type as `${Name}${string & K}`]: Type[K];
 };
-export declare const generateColorPalette: <Name extends string>(name: Name, hex: string) => RemapColorPaletteKeys<ColorPalletteSuffix, Name>;
+export declare const generateColorPalette: <Name extends string>(name: Name, hex: string) => TRemapColorPaletteKeys<IColorPalletteSuffix, Name>;
 export declare const additional: {
     'extra-1': string;
     'extra-2': string;
@@ -51,14 +51,14 @@ export declare const grayscaleDark: {
     'gray-10': string;
     black: string;
 };
-export declare const primary: RemapColorPaletteKeys<ColorPalletteSuffix, "primary">;
-export declare const primaryDark: RemapColorPaletteKeys<ColorPalletteSuffix, "primary">;
-export declare const secondary: RemapColorPaletteKeys<ColorPalletteSuffix, "secondary">;
-export declare const secondaryDark: RemapColorPaletteKeys<ColorPalletteSuffix, "secondary">;
-export declare const attention: RemapColorPaletteKeys<ColorPalletteSuffix, "attention">;
-export declare const attentionDark: RemapColorPaletteKeys<ColorPalletteSuffix, "attention">;
-export declare const success: RemapColorPaletteKeys<ColorPalletteSuffix, "success">;
-export declare const successDark: RemapColorPaletteKeys<ColorPalletteSuffix, "success">;
-export declare const wrong: RemapColorPaletteKeys<ColorPalletteSuffix, "wrong">;
-export declare const wrongDark: RemapColorPaletteKeys<ColorPalletteSuffix, "wrong">;
+export declare const primary: TRemapColorPaletteKeys<IColorPalletteSuffix, "primary">;
+export declare const primaryDark: TRemapColorPaletteKeys<IColorPalletteSuffix, "primary">;
+export declare const secondary: TRemapColorPaletteKeys<IColorPalletteSuffix, "secondary">;
+export declare const secondaryDark: TRemapColorPaletteKeys<IColorPalletteSuffix, "secondary">;
+export declare const attention: TRemapColorPaletteKeys<IColorPalletteSuffix, "attention">;
+export declare const attentionDark: TRemapColorPaletteKeys<IColorPalletteSuffix, "attention">;
+export declare const success: TRemapColorPaletteKeys<IColorPalletteSuffix, "success">;
+export declare const successDark: TRemapColorPaletteKeys<IColorPalletteSuffix, "success">;
+export declare const wrong: TRemapColorPaletteKeys<IColorPalletteSuffix, "wrong">;
+export declare const wrongDark: TRemapColorPaletteKeys<IColorPalletteSuffix, "wrong">;
 export {};

package/dist/types/styles/styled_engine_provider.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 /**
  * Types.
  */
-type StyledEngineProviderProps = {
+interface IStyledEngineProviderProps {
     children: React.ReactElement;
-};
-export declare const StyledEngineProvider: React.FC<StyledEngineProviderProps>;
+}
+export declare const StyledEngineProvider: React.FC<IStyledEngineProviderProps>;
 export {};

package/dist/types/styles/theme_provider.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import type { ThemeOptionsType } from './types';
+import type { IThemeOptionsType } from './types';
 /**
  * Types.
  */
-type ThemeProviderProps = {
+interface IThemeProviderProps {
     children: React.ReactElement;
-    theme?: ThemeOptionsType;
+    theme?: IThemeOptionsType;
     mode?: ('light' | 'dark');
     cssVarsRoot?: string;
-};
+}
 /**
  *
  */
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const ThemeProvider: React.FC<IThemeProviderProps>;
 export {};

package/dist/types/styles/types.d.ts

@@ -1,22 +1,22 @@
-export type ColorType = ('primary-tint-5' | 'primary-tint-4' | 'primary-tint-3' | 'primary-tint-2' | 'primary-tint-1' | 'primary' | 'primary-shade-1' | 'primary-shade-2' | 'primary-shade-3' | 'primary-shade-4' | 'primary-shade-5' | 'primary-contrast' | 'secondary-tint-5' | 'secondary-tint-4' | 'secondary-tint-3' | 'secondary-tint-2' | 'secondary-tint-1' | 'secondary' | 'secondary-shade-1' | 'secondary-shade-2' | 'secondary-shade-3' | 'secondary-shade-4' | 'secondary-shade-5' | 'secondary-contrast' | 'wrong-tint-5' | 'wrong-tint-4' | 'wrong-tint-3' | 'wrong-tint-2' | 'wrong-tint-1' | 'wrong' | 'wrong-shade-1' | 'wrong-shade-2' | 'wrong-shade-3' | 'wrong-shade-4' | 'wrong-shade-5' | 'wrong-contrast' | 'attention-tint-5' | 'attention-tint-4' | 'attention-tint-3' | 'attention-tint-2' | 'attention-tint-1' | 'attention' | 'attention-shade-1' | 'attention-shade-2' | 'attention-shade-3' | 'attention-shade-4' | 'attention-shade-5' | 'success-tint-5' | 'success-tint-4' | 'success-tint-3' | 'success-tint-2' | 'success-tint-1' | 'success' | 'success-shade-1' | 'success-shade-2' | 'success-shade-3' | 'success-shade-4' | 'success-shade-5' | 'black' | 'gray-10' | 'gray-9' | 'gray-8' | 'gray-7' | 'gray-6' | 'gray-5' | 'gray-4' | 'gray-3' | 'gray-2' | 'gray-1' | 'white' | 'extra-1' | 'extra-2');
-export type ShadowType = ('light-low' | 'light-medium' | 'light-hight' | 'light-soft' | 'dark-medium' | 'dark-hight');
-export type TypographyPropertiesType = {
+export type TColorType = ('primary-tint-5' | 'primary-tint-4' | 'primary-tint-3' | 'primary-tint-2' | 'primary-tint-1' | 'primary' | 'primary-shade-1' | 'primary-shade-2' | 'primary-shade-3' | 'primary-shade-4' | 'primary-shade-5' | 'primary-contrast' | 'secondary-tint-5' | 'secondary-tint-4' | 'secondary-tint-3' | 'secondary-tint-2' | 'secondary-tint-1' | 'secondary' | 'secondary-shade-1' | 'secondary-shade-2' | 'secondary-shade-3' | 'secondary-shade-4' | 'secondary-shade-5' | 'secondary-contrast' | 'wrong-tint-5' | 'wrong-tint-4' | 'wrong-tint-3' | 'wrong-tint-2' | 'wrong-tint-1' | 'wrong' | 'wrong-shade-1' | 'wrong-shade-2' | 'wrong-shade-3' | 'wrong-shade-4' | 'wrong-shade-5' | 'wrong-contrast' | 'attention-tint-5' | 'attention-tint-4' | 'attention-tint-3' | 'attention-tint-2' | 'attention-tint-1' | 'attention' | 'attention-shade-1' | 'attention-shade-2' | 'attention-shade-3' | 'attention-shade-4' | 'attention-shade-5' | 'success-tint-5' | 'success-tint-4' | 'success-tint-3' | 'success-tint-2' | 'success-tint-1' | 'success' | 'success-shade-1' | 'success-shade-2' | 'success-shade-3' | 'success-shade-4' | 'success-shade-5' | 'black' | 'gray-10' | 'gray-9' | 'gray-8' | 'gray-7' | 'gray-6' | 'gray-5' | 'gray-4' | 'gray-3' | 'gray-2' | 'gray-1' | 'white' | 'extra-1' | 'extra-2');
+export type TShadowType = ('light-low' | 'light-medium' | 'light-hight' | 'light-soft' | 'dark-medium' | 'dark-hight');
+export interface ITypographyPropertiesType {
     weight: string;
     size: string;
     height: string;
     spacing: string;
-};
-export type TypographyType = ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 's1' | 's2' | 'b1' | 'b2' | 'b3' | 'btn1' | 'btn2' | 'c1' | 'c2');
-export type SizeType = ('base-half' | 'base' | 'base-2' | 'base-3' | 'base-4' | 'base-5' | 'base-6' | 'base-7' | 'base-8' | 'base-9' | 'base-10' | 'base-11' | 'base-12' | 'base-14' | 'base-16');
-export type ThemeType = {
-    color: Record<ColorType, string>;
-    shadow: Record<ShadowType, string>;
-    text: Record<TypographyType, TypographyPropertiesType>;
-    size: Record<SizeType, string>;
-};
-export type ThemeOptionsType = {
-    color?: Partial<ThemeType['color']>;
-    shadow?: Partial<ThemeType['shadow']>;
-    text?: Partial<ThemeType['text']>;
+}
+export type TTypographyType = ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 's1' | 's2' | 'b1' | 'b2' | 'b3' | 'btn1' | 'btn2' | 'c1' | 'c2');
+export type TSizeType = ('base-half' | 'base' | 'base-2' | 'base-3' | 'base-4' | 'base-5' | 'base-6' | 'base-7' | 'base-8' | 'base-9' | 'base-10' | 'base-11' | 'base-12' | 'base-14' | 'base-16');
+export interface IThemeType {
+    color: Record<TColorType, string>;
+    shadow: Record<TShadowType, string>;
+    text: Record<TTypographyType, ITypographyPropertiesType>;
+    size: Record<TSizeType, string>;
+}
+export interface IThemeOptionsType {
+    color?: Partial<IThemeType['color']>;
+    shadow?: Partial<IThemeType['shadow']>;
+    text?: Partial<IThemeType['text']>;
     size?: number;
-};
+}

package/dist/types/styles/utils.d.ts

@@ -1,5 +1,5 @@
-import type { ThemeOptionsType, ThemeType } from './types';
+import type { IThemeOptionsType, IThemeType } from './types';
 export declare const themeCSSVariablePrefix = "pv";
 export declare const contrastThreshold = 2;
-export declare const createTheme: (mode: 'light' | 'dark', options?: ThemeOptionsType) => ThemeType;
+export declare const createTheme: (mode: 'light' | 'dark', options?: IThemeOptionsType) => IThemeType;
 export declare const createThemeCSSVariablesFromObject: (object: Record<string, any>) => Record<string, string>;

package/dist/types/utils/copy_to_clipboard.d.ts

@@ -1,3 +1,3 @@
-type SuccessCallback = () => void;
-export declare const copyToClipboard: (text: string, onSuccess?: SuccessCallback) => void;
+type TSuccessCallback = () => void;
+export declare const copyToClipboard: (text: string, onSuccess?: TSuccessCallback) => void;
 export {};

package/dist/types/utils/intersection_observer.d.ts

@@ -4,7 +4,7 @@ declare class IntersectionObserverDirective {
     constructor();
     init(): IntersectionObserver;
     private assertObserver;
-    add(element: HTMLElement, callback: Function): void;
+    add(element: HTMLElement, callback: (isIntersecting: boolean) => void): void;
     destroy(): void;
     remove(element: HTMLElement): void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "1.1.2",
+  "version": "1.2.0",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "packages/react-components"
   },
   "scripts": {
-    "start": "storybook dev -p 3000",
+    "dev": "storybook dev -p 3000",
     "prebuild": "yarn clean",
     "build": "yarn build:esm && yarn build:cjs && yarn build:esnext",
     "build:esm": "tsc -p tsconfig.build.json",
@@ -48,7 +48,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@peculiar/color": "^0.1.5",
+    "@peculiar/color": "^0.1.7",
     "@popperjs/core": "^2.11.7",
     "@types/flat": "^5.0.2",
     "@types/react-transition-group": "^4.4.5",
@@ -60,20 +60,20 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.26.0",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/react": "8.4.7",
-    "@storybook/react-vite": "8.4.7",
+    "@babel/preset-env": "7.26.9",
+    "@storybook/addon-essentials": "8.6.4",
+    "@storybook/react": "8.6.4",
+    "@storybook/react-vite": "8.6.4",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitejs/plugin-react-swc": "^3.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "storybook": "8.4.7",
+    "storybook": "8.6.4",
     "storybook-dark-mode": "^4.0.2",
     "typescript": "5.1.6",
-    "vite": "^5.4.8"
+    "vite": "^6.2.0"
   },
   "publishConfig": {
     "access": "public"
@@ -82,5 +82,5 @@
     "node": ">=18.x"
   },
   "license": "MIT",
-  "gitHead": "d537ba8a16dbe15b908e873844ce8b53b7fb3603"
+  "gitHead": "dc16091f8475599d02fe2e8170fbb33f869f7455"
 }