@peculiar/react-components 1.1.1 → 1.1.2

package/dist/types/Switch/switch.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 /**
  * Types.
  */
-declare type SwitchOwnProps = {
+type SwitchOwnProps = {
     /**
      * If `true`, the component is checked.
      */
@@ -44,7 +44,7 @@ declare type SwitchOwnProps = {
      */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
-export declare type SwitchProps = SwitchOwnProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'htmlFor' | 'onChange'>;
+export type SwitchProps = SwitchOwnProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'htmlFor' | 'onChange'>;
 /**
  *
  */

package/dist/types/Tabs/tab.d.ts

@@ -30,7 +30,7 @@ export interface TabTypeMap<P = {}, D extends React.ElementType = 'button'> {
     props: P & TabOwnProps;
     defaultComponent: D;
 }
-export declare type TabProps<D extends React.ElementType = TabTypeMap['defaultComponent']> = OverrideProps<TabTypeMap<{}, D>, D> & {
+export type TabProps<D extends React.ElementType = TabTypeMap['defaultComponent']> = OverrideProps<TabTypeMap<{}, D>, D> & {
     component?: D;
 };
 /**

package/dist/types/Tabs/tabs.d.ts

@@ -3,7 +3,7 @@ import { Tab, TabProps } from './tab';
 /**
  * Types.
  */
-declare type TabsOwnProps = {
+type TabsOwnProps = {
     /**
      * The content of the component.
      */

package/dist/types/TextField/text_field.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 /**
  * Types.
  */
-declare type TextFieldOwnProps = {
+type TextFieldOwnProps = {
     /**
      * If `true`, the component is disabled.
      */

package/dist/types/TextareaField/textarea_field.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 /**
  * Types.
  */
-declare type TextareaFieldOwnProps = {
+type TextareaFieldOwnProps = {
     /**
      * If `true`, the component is disabled.
      */

package/dist/types/Toast/toast.d.ts

@@ -3,7 +3,7 @@ import { AlertProps } from '../Alert';
 /**
  * Types.
  */
-declare type ToastOwnProps = {
+type ToastOwnProps = {
     /**
      * The `id` of the toast. Mostly used when you need to prevent duplicate.
      */

package/dist/types/Toast/toast_container.d.ts

@@ -2,13 +2,13 @@ import * as React from 'react';
 /**
  * Types.
  */
-declare type ToastContainerOwnProps = {
+type ToastContainerOwnProps = {
     /**
      * The content of the component.
      */
     children: React.ReactNode;
 };
-export declare type ToastContainerProps = ToastContainerOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+export type ToastContainerProps = ToastContainerOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 /**
  *
  */

package/dist/types/Toast/toast_context.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AlertProps } from '../Alert';
-export declare type BaseToastType = {
+export type BaseToastType = {
     /**
      * The message of the toast.
      */
@@ -28,10 +28,10 @@ export declare type BaseToastType = {
      */
     id?: string;
 };
-export declare type ToastType = BaseToastType & {
+export type ToastType = BaseToastType & {
     createdAt: number;
 };
-export declare type ToastContextType = {
+export type ToastContextType = {
     addToast: (options: BaseToastType) => void;
     removeToast: (id: string) => void;
     removeAllToasts: () => void;

package/dist/types/Toast/toast_provider.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ToastContainerProps } from './toast_container';
-declare type BaseProps = {
+type BaseProps = {
     /**
      * The content of the component.
      */

package/dist/types/Tooltip/tooltip.d.ts

@@ -3,7 +3,7 @@ import { Placement } from '@popperjs/core';
 /**
  * Types.
  */
-export declare type TooltipOwnProps = {
+export type TooltipOwnProps = {
     /**
      * If `true`, the component is shown.
      */
@@ -70,7 +70,7 @@ export declare type TooltipOwnProps = {
      */
     offset?: number;
 };
-export declare type TooltipProps = TooltipOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
+export type TooltipProps = TooltipOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
 /**
  *
  */

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

@@ -28,7 +28,7 @@ export interface TypographyTypeMap<P = {}, D extends React.ElementType = 'p'> {
     props: P & TypographyOwnProps;
     defaultComponent: D;
 }
-export declare type TypographyProps<D extends React.ElementType = TypographyTypeMap['defaultComponent']> = OverrideProps<TypographyTypeMap<{}, D>, D> & {
+export type TypographyProps<D extends React.ElementType = TypographyTypeMap['defaultComponent']> = OverrideProps<TypographyTypeMap<{}, D>, D> & {
     component?: D;
 };
 export declare const Typography: OverridableComponent<TypographyTypeMap<{}, "p">>;

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

@@ -3,23 +3,23 @@ import type { PopoverProps } from '../Popover';
 /**
  * Types.
  */
-export declare type AutocompleteHighlightChangeReason = ('auto' | 'mouse' | 'keyboard');
-export declare type AutocompleteHighlightChangeDirectionType = ('next' | 'previous');
-export declare type AutocompleteHighlightChangeDiffType = (number | 'reset' | 'start' | 'end');
-export declare type AutocompleteChangeReason = ('selectOption' | 'removeOption');
+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> {
     option: T;
     index: number;
 }
-export declare type AutocompleteValue<T, Multiple> = Multiple extends undefined | false ? T | null : T[];
-export declare type AutocompleteFilterOptionsType<T, Multiple> = (options: ReadonlyArray<T>, searchValue: string, value: AutocompleteValue<T, Multiple>, getOptionLabel: (option: T) => string) => ReadonlyArray<T>;
-export declare type AutocompleteGroupedOption<T> = {
+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> = {
     key: number;
     index: number;
     group: string;
     options: T[];
 };
-export declare type UseAutocompleteProps<T, Multiple extends boolean | undefined = undefined> = {
+export type UseAutocompleteProps<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.
@@ -87,7 +87,7 @@ export declare type UseAutocompleteProps<T, Multiple extends boolean | undefined
      */
     onInputChange?: (event: React.SyntheticEvent, value: string) => void;
 };
-export declare type UseAutocompleteReturnType<T, Multiple extends boolean | undefined = undefined> = {
+export type UseAutocompleteReturnType<T, Multiple extends boolean | undefined = undefined> = {
     groupedOptions: ReadonlyArray<T> | ReadonlyArray<AutocompleteGroupedOption<T>>;
     value: AutocompleteValue<T, Multiple>;
     searchValue: string;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type UseControllableStateProps<T> = {
+export type UseControllableStateProps<T> = {
     /**
      * The value to used in controlled mode
      */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type UseImageOptionsType = {
+export type UseImageOptionsType = {
     /**
      * A callback for when the image `src` has been loaded.
      */
@@ -9,7 +9,7 @@ export declare type UseImageOptionsType = {
      */
     onError?: (error: string | React.SyntheticEvent<HTMLImageElement, Event>) => void;
 };
-declare type Status = ('loading' | 'failed' | 'pending' | 'loaded');
+type Status = ('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,7 +26,7 @@ declare type Status = ('loading' | 'failed' | 'pending' | 'loaded');
  * }
  * ```
  */
-declare type UseImageReturnType = {
+type UseImageReturnType = {
     status: Status;
     image?: HTMLImageElement;
 };

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

@@ -1,6 +1,6 @@
-export declare type IntersectionObserverHookRefCallbackNode = HTMLElement | null;
-export declare type IntersectionObserverHookRefCallback = (node: IntersectionObserverHookRefCallbackNode) => void;
-export declare type IntersectionObserverHookResult = [
+export type IntersectionObserverHookRefCallbackNode = HTMLElement | null;
+export type IntersectionObserverHookRefCallback = (node: IntersectionObserverHookRefCallbackNode) => void;
+export type IntersectionObserverHookResult = [
     IntersectionObserverHookRefCallback,
     {
         isIntersecting: boolean;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-declare type ColorPalletteSuffix = {
+type ColorPalletteSuffix = {
     '-tint-5': string;
     '-tint-4': string;
     '-tint-3': string;
@@ -11,7 +11,7 @@ declare type ColorPalletteSuffix = {
     '-shade-4': string;
     '-shade-5': string;
 };
-declare type RemapColorPaletteKeys<Type, Name extends string> = {
+type RemapColorPaletteKeys<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>;

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

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

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

@@ -3,7 +3,7 @@ import type { ThemeOptionsType } from './types';
 /**
  * Types.
  */
-declare type ThemeProviderProps = {
+type ThemeProviderProps = {
     children: React.ReactElement;
     theme?: ThemeOptionsType;
     mode?: ('light' | 'dark');

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

@@ -1,20 +1,20 @@
-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 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 = {
     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 = {
+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 declare type ThemeOptionsType = {
+export type ThemeOptionsType = {
     color?: Partial<ThemeType['color']>;
     shadow?: Partial<ThemeType['shadow']>;
     text?: Partial<ThemeType['text']>;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.2",
   "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.5",
     "@popperjs/core": "^2.11.7",
     "@types/flat": "^5.0.2",
     "@types/react-transition-group": "^4.4.5",
@@ -60,18 +60,19 @@
     "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.0",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react-swc": "^3.5.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",
+    "storybook": "8.4.7",
+    "storybook-dark-mode": "^4.0.2",
+    "typescript": "5.1.6",
     "vite": "^5.4.8"
   },
   "publishConfig": {
@@ -81,5 +82,5 @@
     "node": ">=18.x"
   },
   "license": "MIT",
-  "gitHead": "b609664ee4a8ef6c687c1e41ce2271124236be49"
+  "gitHead": "d537ba8a16dbe15b908e873844ce8b53b7fb3603"
 }