@peculiar/react-components 1.6.0 → 1.7.0

package/dist/types/Dialog/dialog.d.ts

@@ -42,9 +42,9 @@ interface IDialogOwnProps {
     onClose?: (event: React.SyntheticEvent) => void;
     /**
      * The size of the dialog.
-     * @default 'medium'
+     * @default 'small'
      */
-    size?: ('small' | 'medium' | 'large');
+    size?: ('small' | 'large');
     /**
      * If `true`, the dialog will be show CircularProgress component and disable all interactions.
      */

package/dist/types/Dialog/dialog_content.d.ts

@@ -11,11 +11,6 @@ interface IDialogContentOwnProps {
      * The className of the component.
      */
     className?: string;
-    /**
-     * Display the top and bottom dividers.
-     * @default true
-     */
-    dividers?: boolean;
     /**
      * The content of the error message.
      */

package/dist/types/Dialog/dialog_title.d.ts

@@ -12,9 +12,9 @@ interface IDialogTitleOwnProps {
      */
     className?: string;
     /**
-     * Callback fired when the component requests to be closed.
+     * Element placed before the title.
      */
-    onClose?: () => void;
+    startIcon?: React.ReactNode;
 }
 /**
  *

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

@@ -0,0 +1,72 @@
+import React from 'react';
+interface IDialogRef<T> {
+    openParams: T;
+    close: () => void;
+}
+type TDialogComponent<T> = React.ComponentType<IDialogRef<T>>;
+/**
+ * Generic hook factory for managing dialog state.
+ *
+ * Accepts an inline arrow function component that receives IDialogRef<T> as props.
+ *
+ * @example
+ * ```tsx
+ * interface IDeleteDialogParams {
+ *   itemId: string;
+ *   onSuccess: VoidFunction;
+ * }
+ *
+ * export const useDeleteDialog = createDialog<IDeleteDialogParams>(({
+ *   openParams,
+ *   close,
+ * }) => {
+ *   const handleSubmit = () => {
+ *     fetch(`/api/items/${openParams.itemId}`, {
+ *       method: 'DELETE',
+ *     }).then(() => {
+ *       openParams.onSuccess();
+ *       close();
+ *     }).catch(() => {
+ *       // Handle error
+ *     });
+ *   };
+ *
+ *   return (
+ *     <ConfirmationDialog=
+ *         onClose={close}
+ *         onSubmit={handleSubmit}
+ *       >
+ *         Are you sure you want to delete this item?
+ *       </ConfirmationDialog>
+ *   );
+ * });
+ *
+ * // Usage:
+ * function MyComponent() {
+ *   const deleteDialog = useDeleteDialog();
+ *
+ *   return (
+ *     <>
+ *       <button
+ *         onClick={() => {
+ *           deleteDialog.open({
+ *             itemId: '123',
+ *             onSuccess: () => {
+ *               console.log('Item deleted');
+ *             },
+ *           })
+ *         }}
+ *       >
+ *         Delete
+ *       </button>
+ *       {deleteDialog.dialog}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function createDialog<T>(component: TDialogComponent<T>): () => {
+    dialog: React.ReactNode | null;
+    open: (params: T) => void;
+};
+export {};

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

@@ -13,3 +13,4 @@ export { useEventCallback } from './use_event_callback';
 export { useEnhancedEffect } from './use_enhanced_effect';
 export { useDebounceCallback } from './use_debounce_callback';
 export { useOutsideClick } from './use_outside_click';
+export { createDialog } from './create_dialog';

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

@@ -1,34 +1,6 @@
 export declare const generateSize: (grid?: number) => {
-    'base-half': string;
     base: string;
-    'base-2': string;
-    'base-3': string;
-    'base-4': string;
-    'base-5': string;
-    'base-6': string;
-    'base-7': string;
-    'base-8': string;
-    'base-9': string;
-    'base-10': string;
-    'base-11': string;
-    'base-12': string;
-    'base-14': string;
-    'base-16': string;
 };
 export declare const size: {
-    'base-half': string;
     base: string;
-    'base-2': string;
-    'base-3': string;
-    'base-4': string;
-    'base-5': string;
-    'base-6': string;
-    'base-7': string;
-    'base-8': string;
-    'base-9': string;
-    'base-10': string;
-    'base-11': string;
-    'base-12': string;
-    'base-14': string;
-    'base-16': string;
 };

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

@@ -7,7 +7,7 @@ export interface ITypographyPropertiesType {
     spacing: string;
 }
 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 type TSizeType = 'base';
 export interface IThemeType {
     color: Record<TColorType, string>;
     shadow: Record<TShadowType, string>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "1.6.0",
+  "version": "1.7.0",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -60,14 +60,14 @@
   },
   "devDependencies": {
     "@babel/preset-env": "7.26.9",
-    "@storybook/addon-essentials": "8.6.4",
-    "@storybook/react": "8.6.4",
-    "@storybook/react-vite": "8.6.4",
+    "@storybook/addon-essentials": "8.6.15",
+    "@storybook/react": "8.6.15",
+    "@storybook/react-vite": "8.6.15",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "8.6.4",
+    "storybook": "8.6.15",
     "storybook-dark-mode": "^4.0.2",
     "typescript": "5.9.3",
     "vite": "^6.4.1"
@@ -79,5 +79,5 @@
     "node": ">=18.x"
   },
   "license": "MIT",
-  "gitHead": "2fa2518b092ee7bc46f58372b779bd6674c8bc76"
+  "gitHead": "6e4f8db9e9e1b440c671b8b18a6c6d015e7b5cde"
 }