@peculiar/react-components 1.1.1 → 1.1.3

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

@@ -1,7 +1,7 @@
-export declare type IntersectionObserverHookRefCallbackNode = HTMLElement | null;
-export declare type IntersectionObserverHookRefCallback = (node: IntersectionObserverHookRefCallbackNode) => void;
-export declare 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 declare 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';
-declare 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';
-declare 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';
-declare 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';
-declare 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';
-declare 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';
-declare 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';
-declare 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';
-declare 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';
-declare 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';
-declare 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';
-declare 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 @@
-declare type ColorPalletteSuffix = {
+interface IColorPalletteSuffix {
     '-tint-5': string;
     '-tint-4': string;
     '-tint-3': string;
@@ -10,11 +10,11 @@ declare type ColorPalletteSuffix = {
     '-shade-3': string;
     '-shade-4': string;
     '-shade-5': string;
-};
-declare 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.
  */
-declare 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.
  */
-declare 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 declare 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 declare type ShadowType = ('light-low' | 'light-medium' | 'light-hight' | 'light-soft' | 'dark-medium' | 'dark-hight');
-export declare 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 declare type TypographyType = ('h1' | 'h2' | 'h3' | 'h4' | 'h5' | 's1' | 's2' | 'b1' | 'b2' | 'b3' | 'btn1' | 'btn2' | 'c1' | 'c2');
-export declare 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 declare type ThemeType = {
-    color: Record<ColorType, string>;
-    shadow: Record<ShadowType, string>;
-    text: Record<TypographyType, TypographyPropertiesType>;
-    size: Record<SizeType, string>;
-};
-export declare 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 @@
-declare 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.1",
+  "version": "1.1.3",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -48,7 +48,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@peculiar/color": "^0.1.4",
+    "@peculiar/color": "^0.1.6",
     "@popperjs/core": "^2.11.7",
     "@types/flat": "^5.0.2",
     "@types/react-transition-group": "^4.4.5",
@@ -60,19 +60,20 @@
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.6.7",
-    "@storybook/react": "7.6.7",
-    "@storybook/react-vite": "7.6.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": "7.6.7",
-    "storybook-dark-mode": "^3.0.3",
-    "typescript": "^4.6.3",
-    "vite": "^5.4.8"
+    "storybook": "8.6.4",
+    "storybook-dark-mode": "^4.0.2",
+    "typescript": "5.1.6",
+    "vite": "^6.2.0"
   },
   "publishConfig": {
     "access": "public"
@@ -81,5 +82,5 @@
     "node": ">=18.x"
   },
   "license": "MIT",
-  "gitHead": "b609664ee4a8ef6c687c1e41ce2271124236be49"
+  "gitHead": "707402500405b2595e26e029a3e47aefe46b5a0c"
 }