qucoon-components 0.0.2 → 0.0.3

package/dist/types/components/ui/button/BaseButton.d.ts

@@ -1,11 +1,12 @@
-import { default as React, CSSProperties, SVGProps } from 'react';
+import { default as React, CSSProperties } from 'react';
 import { TypographyProps } from '../..';
+import { IconType } from '../../../utilities';
 export type BaseButtonProps = {
     variant?: "primary" | "secondary" | "text";
     type?: "icon" | "button" | "submit" | "reset";
-    startIcon?: React.ReactElement<SVGProps<SVGSVGElement>> | React.FC<SVGProps<SVGSVGElement>> | string;
-    endIcon?: React.ReactElement<SVGProps<SVGSVGElement>> | React.FC<SVGProps<SVGSVGElement>> | string;
-    textIcon?: React.ReactElement<SVGProps<SVGSVGElement>> | React.FC<SVGProps<SVGSVGElement>> | string;
+    startIcon?: IconType;
+    endIcon?: IconType;
+    textIcon?: IconType;
     text?: string;
     isLoading?: boolean;
     size?: "x-small" | "small" | "medium" | "large";

package/dist/types/components/ui/input/BaseInput.d.ts

@@ -1,12 +1,12 @@
-import { default as React, CSSProperties, SVGProps } from 'react';
+import { default as React, CSSProperties } from 'react';
 import { FormikValues } from 'formik';
 import { EnhancedLabelProps } from '../label/EnhancedLabel';
-import { Formik } from '../../../utilities';
+import { Formik, IconRenderProps, IconType } from '../../../utilities';
 export type BaseInputProps<T extends FormikValues> = {
-    startIcon?: React.ReactElement<SVGProps<SVGSVGElement>> | React.FC<SVGProps<SVGSVGElement>> | string;
-    endIcon?: React.ReactElement<SVGProps<SVGSVGElement>> | React.FC<SVGProps<SVGSVGElement>> | string;
-    startIconProps?: SVGProps<SVGSVGElement>;
-    endIconProps?: SVGProps<SVGSVGElement>;
+    startIcon?: IconType;
+    endIcon?: IconType;
+    startIconProps?: IconRenderProps;
+    endIconProps?: IconRenderProps;
     label?: string;
     labelStyle?: CSSProperties;
     labelProps?: EnhancedLabelProps;

package/dist/types/components/ui/label/EnhancedLabel.d.ts

@@ -1,6 +1,14 @@
-import { default as React, CSSProperties, SVGProps } from 'react';
+import { default as React, CSSProperties } from 'react';
 import { default as Typography } from '../typography/typography';
+import { IconRenderProps, IconType } from '../../../utilities';
 export type DefaultIconType = 'required' | 'info' | 'addition' | 'warning' | 'optional';
+export interface DefaultIconConfig {
+    component: IconType;
+    defaultSize: string;
+    defaultColor: string;
+    defaultProps?: IconRenderProps;
+    className?: string;
+}
 export type EnhancedLabelProps = {
     /** The label text */
     label?: string;
@@ -13,13 +21,13 @@ export type EnhancedLabelProps = {
     /** Override default icon color */
     defaultIconColor?: string;
     /** Additional props for default icon */
-    defaultIconProps?: SVGProps<SVGSVGElement>;
+    defaultIconProps?: IconRenderProps;
     /** Custom icon to display alongside the label (in addition to default icon) */
-    icon?: React.ReactElement<SVGProps<SVGSVGElement>> | React.FC<SVGProps<SVGSVGElement>> | string;
+    icon?: IconType;
     /** Icon position relative to the label */
     iconPosition?: "start" | "end";
     /** Props for the custom icon */
-    iconProps?: SVGProps<SVGSVGElement>;
+    iconProps?: IconRenderProps;
     /** Custom icon size */
     iconSize?: string;
     /** Custom style for the label container */
@@ -35,10 +43,20 @@ export type EnhancedLabelProps = {
     /** Gap between icons and text */
     iconGap?: string;
     required?: boolean;
-    requiredIcon?: React.ReactElement<SVGProps<SVGSVGElement>> | React.FC<SVGProps<SVGSVGElement>>;
+    requiredIcon?: IconType;
     requiredIconSize?: string;
-    requiredIconProps?: SVGProps<SVGSVGElement>;
+    requiredIconProps?: IconRenderProps;
     showRequiredWithIcon?: boolean;
 };
+/**
+ * Enhanced label component with flexible icon support using IconRenderer
+ */
 declare const EnhancedLabel: React.FC<EnhancedLabelProps>;
+/**
+ * Utility function to get default icon configuration
+ */
+export declare const getDefaultIconConfig: (type: DefaultIconType) => DefaultIconConfig;
+/**
+ //  * Utility function to add custom default icon types
+ //  */
 export default EnhancedLabel;

package/dist/types/components/ui/menu/BaseSidebar.d.ts

@@ -1,8 +1,9 @@
-import { default as React, SVGProps } from 'react';
+import { default as React } from 'react';
 import { GetSupportCardProps } from '../card/GetSupportCard';
+import { IconType } from '../../../utilities';
 export type BaseSidebarModuleItemType = {
     title: string;
-    icon?: React.FC<SVGProps<SVGSVGElement>>;
+    icon?: IconType;
     tabRoute?: string;
     onClick?: () => void;
     disabled?: boolean;
@@ -13,7 +14,7 @@ export type BaseSidebarModuleConfig = {
     moduleName?: string;
     moduleRoute?: string;
     moduleItems?: BaseSidebarModuleItemType[];
-    moduleIcon?: React.FC<SVGProps<SVGSVGElement>>;
+    moduleIcon?: IconType;
     disabled?: boolean;
     defaultOpen?: boolean;
 };

package/dist/types/utilities/helpers/iconRenderer.d.ts

@@ -0,0 +1,65 @@
+import { default as React } from 'react';
+import { IconConfig, IconRenderProps, IconType } from '../types/iconTypes';
+/**
+ * Utility class for consistent icon rendering across the library
+ */
+export declare class IconRenderer {
+    private static config;
+    /**
+     * Update global icon configuration
+     */
+    static configure(config: Partial<IconConfig>): void;
+    /**
+     * Get current configuration
+     */
+    static getConfig(): IconConfig;
+    /**
+     * Render an icon with consistent styling and props
+     */
+    static render(icon: IconType, props?: IconRenderProps, localConfig?: Partial<IconConfig>): React.ReactElement | null;
+    /**
+     * Render multiple icons with consistent spacing
+     */
+    static renderGroup(icons: Array<{
+        icon: IconType;
+        props?: IconRenderProps;
+        key?: string | number;
+    }>, groupProps?: {
+        spacing?: string;
+        direction?: 'row' | 'column';
+        className?: string;
+        style?: React.CSSProperties;
+    }): React.ReactElement | null;
+    /**
+     * Type-adaptive rendering logic
+     */
+    private static renderWithAdaptation;
+    /**
+     * Smart function component renderer with type adaptation
+     */
+    private static renderFunctionComponent;
+    /**
+     * Type-specific rendering logic
+     */
+    private static renderByType;
+}
+/**
+ * Hook for using icon renderer in components
+ */
+export declare function useIconRenderer(localConfig?: Partial<IconConfig>): {
+    render: (icon: IconType, props?: IconRenderProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+    renderGroup: (icons: Array<{
+        icon: IconType;
+        props?: IconRenderProps;
+        key?: string | number;
+    }>, groupProps?: Parameters<typeof IconRenderer.renderGroup>[1]) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+    config: IconConfig;
+};
+/**
+ * Simple render function for direct use
+ */
+export declare const renderIcon: typeof IconRenderer.render;
+/**
+ * Export default instance
+ */
+export default IconRenderer;

package/dist/types/utilities/helpers/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Auto-generated barrel for src/utilities/helpers
+ */
+export * from './iconRenderer';

package/dist/types/utilities/hooks/useModal.d.ts

@@ -12,7 +12,7 @@ export declare const useModal: <T extends keyof ModalRegistry>(type: T) => {
     activeInstance: import('..').ModalInstance<keyof ModalRegistry>;
     count: number;
     focus: () => void;
-    data: import('../..').NotificationModalLayoutProps | import('../..').ConfirmationModalLayoutProps;
+    data: import('../..').ConfirmationModalLayoutProps | import('../..').NotificationModalLayoutProps;
     id: string;
 };
 export default useModal;

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

@@ -13,6 +13,7 @@ export * from './context';
 export * from './data';
 export * from './enums';
 export * from './factory';
+export * from './helpers';
 export * from './hooks';
 export * from './theme';
 export * from './types';

package/dist/types/utilities/types/iconTypes.d.ts

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+/**
+ * Universal icon type that works across React 18 and 19
+ * Supports multiple icon formats for maximum flexibility
+ */
+export type UniversalSVGProps = Omit<React.SVGProps<SVGSVGElement>, 'ref'> & {
+    ref?: React.Ref<SVGSVGElement> | React.LegacyRef<SVGSVGElement> | string;
+};
+/**
+ * Smart SVG props type that adapts to React 18/19 differences
+ */
+export type SmartSVGProps = Omit<React.SVGProps<SVGSVGElement>, 'ref'> & {
+    ref?: React.Ref<SVGSVGElement> | React.LegacyRef<SVGSVGElement> | string;
+} | any;
+export type IconType = React.ReactElement<SmartSVGProps> | React.ComponentType<SmartSVGProps> | React.FC<SmartSVGProps> | ((props: SmartSVGProps) => React.ReactElement) | string | null | undefined;
+/**
+ * Props for configuring icon rendering
+ */
+export interface IconRenderProps extends Omit<SmartSVGProps, 'width' | 'height'> {
+    /** Icon size - applies to both width and height */
+    size?: string | number;
+    /** Explicit width (overrides size) */
+    width?: string | number;
+    /** Explicit height (overrides size) */
+    height?: string | number;
+    /** CSS class name */
+    className?: string;
+    /** Additional styles */
+    style?: React.CSSProperties;
+    /** Alt text for string-based icons */
+    alt?: string;
+}
+/**
+ * Configuration for default icon behavior
+ */
+export interface IconConfig {
+    /** Default size when none specified */
+    defaultSize: string | number;
+    /** Default props to apply to all icons */
+    defaultProps?: IconRenderProps;
+    /** Whether to add default className */
+    addDefaultClassName?: boolean;
+    /** Default className to add */
+    defaultClassName?: string;
+}
+/**
+ * Icon position type for components that support multiple icons
+ */
+export type IconPosition = 'start' | 'end' | 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Props for components that accept icons with positions
+ */
+export interface IconPositionProps {
+    /** Start/left icon */
+    startIcon?: IconType;
+    /** End/right icon */
+    endIcon?: IconType;
+    /** Top icon */
+    topIcon?: IconType;
+    /** Bottom icon */
+    bottomIcon?: IconType;
+    /** Props for start icon */
+    startIconProps?: IconRenderProps;
+    /** Props for end icon */
+    endIconProps?: IconRenderProps;
+    /** Props for top icon */
+    topIconProps?: IconRenderProps;
+    /** Props for bottom icon */
+    bottomIconProps?: IconRenderProps;
+}
+/**
+ * Utility type for extracting icon prop names
+ */
+export type IconPropKey = `${IconPosition}Icon` | `${IconPosition}IconProps`;

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

@@ -2,5 +2,6 @@
  * Auto-generated barrel for src/utilities/types
  */
 export * from './formTypes';
+export * from './iconTypes';
 export * from './modalTypes';
 export * from './themeTypes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qucoon-components",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -31,7 +31,6 @@
     "axios": "^1.9.0",
     "dompurify": "^3.1.6",
     "file-saver": "^2.0.5",
-    "formik": "^2.4.6",
     "lottie-react": "^2.4.0",
     "luxon": "^3.5.0",
     "moment": "^2.30.1",
@@ -54,10 +53,11 @@
     "yup": "^1.4.0"
   },
   "peerDependencies": {
+    "formik": "^2.4.6",
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
-    "@types/react": "^18.0.0 || ^19.0.0",
-    "@types/react-dom": "^18.0.0 || ^19.0.0"
+    "@types/react": "*",
+    "@types/react-dom": "*"
   },
   "devDependencies": {
     "@react-buddy/ide-toolbox": "^2.4.0",
@@ -67,8 +67,6 @@
     "@types/file-saver": "^2.0.7",
     "@types/luxon": "^3.6.2",
     "@types/node": "^22.15.3",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.4",
     "barrelsby": "^2.8.1",
@@ -77,11 +75,20 @@
     "eslint-plugin-react-refresh": "^0.4.20",
     "glob": "^11.0.2",
     "react": ">=18 <20",
+    "formik": "^2.4.6",
     "react-dom": ">=18 <20",
     "typescript": "^5.3.2",
     "typescript-eslint": "^8.31.1",
     "vite": "^6.3.1",
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-svgr": "^4.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
   }
 }