@dadehkav/ui 0.0.1

package/README.md

@@ -0,0 +1,123 @@
+# @dadeKav/ui
+
+A reusable **React UI component library** built with **TypeScript**, **Bootstrap**, and **Vite**.  
+Designed for real-world applications such as dashboards, admin panels, and form-heavy systems.
+
+---
+
+## ✨ Features
+
+- ⚛️ React 19 compatible
+- 🧩 Fully typed components (TypeScript)
+- 🎨 Bootstrap-based styling
+- 📦 ES Module & CommonJS builds
+- 🌳 Tree-shakable
+- 📚 Storybook for development & documentation
+- 🚫 Storybook not included in published package
+
+---
+
+## 📥 Installation
+
+npm install @dadeKav/ui  
+# or  
+yarn add @dadeKav/ui
+
+---
+
+## ⚠️ Peer Dependencies
+
+You must have these installed in your project:
+
+npm install react react-dom bootstrap
+
+> Make sure `react` and `react-dom` versions match your project.
+
+---
+
+## 🎨 Styling
+
+This library uses **Bootstrap styles**, but does **not automatically include Bootstrap CSS**.  
+Import Bootstrap in your project:
+
+import "bootstrap/dist/css/bootstrap.min.css";
+
+### Customize Bootstrap colors
+
+Create `custom.scss`:
+
+$primary: #519257;
+$success: #519257;
+$warning: #d29f58;
+$info: #6bc9cc;
+$danger: #ea5455;
+
+@import "bootstrap/scss/bootstrap";
+
+Then import it:
+
+import "./custom.scss";
+
+---
+
+## 🚀 Basic Usage
+
+import { SimpleButton } from "@dadeKav/ui";
+
+function App() {
+  return <SimpleButton btnText="Click me" />;
+}
+
+export default App;
+
+---
+
+## 🧠 TypeScript
+
+- Fully typed components and utilities
+- Type definitions included in package
+
+---
+
+## 📚 Storybook
+
+For development & documentation:
+
+npm run storybook
+
+> Storybook files are **not published**.  
+> You can view the components locally by running the above command, or check the hosted Storybook at: `https://docdadehkavui.dadehkavdehghan.ir`
+
+---
+
+## 📂 Published Package Contents
+
+- dist/ → compiled JS and CSS
+- .d.ts type declarations
+- Only production-ready files included
+
+---
+
+## 🛠 Tech Stack
+
+- React
+- TypeScript
+- Vite
+- Bootstrap
+- Reactstrap
+- Storybook
+
+---
+
+## 🏷 Versioning
+
+Semantic versioning:
+
+- 0.x.x — early development
+- 1.0.0 — first stable release
+
+---
+
+## ❤️ Contributing
+
+Feedback and improvements are welcome. Open an issue or PR.

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/Buttons/ClearableSubmitButton/index.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { TReactStrapColor } from '../../../core/types/react-strap.model';
+import { ISubmitButtonProps } from '../SubmitButton';
+export interface IClearableSubmitButtonProps extends ISubmitButtonProps {
+    clearable?: boolean;
+    clearableText?: string;
+    clearBtnColor?: TReactStrapColor;
+    clearableDisabled?: boolean;
+    isClearableLoading?: boolean;
+    clearBtnOutLine?: boolean;
+    onClear?: () => void;
+}
+declare const ClearableSubmitButton: FC<IClearableSubmitButtonProps>;
+export { ClearableSubmitButton };

package/dist/components/Buttons/CollapseButton/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ISimpleButtonProps } from '../SimpleButton';
+declare const CollapseButton: FC<ISimpleButtonProps>;
+export { CollapseButton };

package/dist/components/Buttons/ConfirmButton/index.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactElement } from 'react';
+import { ISweetAlertProps } from '../../SweetAlert';
+import { ISimpleButtonProps } from '../SimpleButton';
+interface IProps extends Pick<ISweetAlertProps, "title" | "icon" | "content" | "onConfirm" | "onCancel" | "onClose" | "loading"> {
+    children?: ReactElement<{
+        onClick?: (e: MouseEvent) => void;
+    }>;
+    buttonProps?: Omit<ISimpleButtonProps, "onClick">;
+}
+declare const ConfirmButton: FC<IProps>;
+export { ConfirmButton };

package/dist/components/Buttons/SimpleButton/index.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import { TReactStrapColor } from '../../../core/types/react-strap.model';
+export interface ISimpleButtonProps {
+    isLoading?: boolean;
+    btnText?: string;
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    outline?: boolean;
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+    color?: TReactStrapColor;
+    size?: "sm" | "md" | "lg";
+    children?: ReactNode;
+}
+declare const SimpleButton: FC<ISimpleButtonProps>;
+export { SimpleButton };

package/dist/components/Buttons/StepperSubmitButton/index.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { TReactStrapColor } from '../../../core/types/react-strap.model';
+import { IClearableSubmitButtonProps } from '../ClearableSubmitButton';
+interface IProps extends IClearableSubmitButtonProps {
+    nextTo?: string;
+    backTo?: string;
+    backToText?: string;
+    nextToText?: string;
+    navigationBtnsColor?: TReactStrapColor;
+}
+declare const StepperSubmitButton: FC<IProps>;
+export { StepperSubmitButton };

package/dist/components/Buttons/SubmitButton/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ISimpleButtonProps } from '../SimpleButton';
+export interface ISubmitButtonProps extends ISimpleButtonProps {
+    onClick?: () => void;
+}
+declare const SubmitButton: FC<ISubmitButtonProps>;
+export { SubmitButton };

package/dist/components/Buttons/XButton/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+interface IProps {
+    handleRemoveClicked: () => void;
+    isShow?: boolean;
+    style: CSSProperties;
+}
+declare const XButton: FC<IProps>;
+export { XButton };

package/dist/components/Card/index.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+interface IProps {
+    text?: string;
+    cardClassName?: string;
+    headerClassName?: string;
+    titleClassName?: string;
+    bodyClassName?: string;
+    onClick?: () => void;
+    children: ReactNode;
+    variant?: "bordered" | "shadow";
+    headerVariant?: "default" | "plain";
+}
+declare const Card: FC<IProps>;
+export { Card };

package/dist/components/Divider/LinearDivider/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, FC } from 'react';
+interface IProps {
+    text?: string;
+    className?: string;
+    borderColor?: string;
+    width?: string | number;
+    fontSize?: string | number;
+    textStyle?: CSSProperties;
+}
+declare const LinearDivider: FC<IProps>;
+export { LinearDivider };

package/dist/components/Divider/SectionDivider/index.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+interface IProps {
+    children: ReactNode;
+    textHeader?: string;
+    classNames?: string;
+    borderColor?: string;
+    headerBgColor?: string;
+    contentPadding?: string;
+    style?: CSSProperties;
+}
+declare const SectionDivider: FC<IProps>;
+export { SectionDivider };

package/dist/components/FilePreview/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface IProps {
+    file: File;
+    isFileDownloadable?: boolean;
+    onFileRemove?: () => void;
+}
+declare const FilePreview: FC<IProps>;
+export { FilePreview };

package/dist/components/Form/Checkbox/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface IProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+declare const Checkbox: FC<IProps>;
+export { Checkbox };

package/dist/components/Form/DatePicker/index.d.ts

@@ -0,0 +1,21 @@
+import { DayValue } from '@hassanmojab/react-modern-calendar-datepicker';
+import { CSSProperties, FC, ReactNode } from 'react';
+import { IInfoPopoverProps } from '../../InfoPopover';
+interface IProps {
+    id?: string;
+    name: string;
+    labelText?: string;
+    significant?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    customLabelStyle?: CSSProperties;
+    customInputStyle?: CSSProperties;
+    generalStyle?: Record<string, string>;
+    infoPopover?: IInfoPopoverProps;
+    leftIcon?: ReactNode;
+    icon?: ReactNode;
+    minimumDate?: DayValue;
+    maximumDate?: DayValue;
+}
+export declare const DatePicker: FC<IProps>;
+export {};

package/dist/components/Form/DropZone/index.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+export type MimeImage = "image/jpeg" | "image/jpg" | "image/png" | "image/gif" | "image/webp" | "image/tif" | "image/tiff";
+export type MimeDocument = "application/pdf" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+export type AllowedMimeType = MimeImage | MimeDocument;
+export type DropzoneAccept = AllowedMimeType | AllowedMimeType[];
+export interface IProps {
+    name: string;
+    significant?: boolean;
+    labelText?: string;
+    placeholder?: string;
+    isSingle?: boolean;
+    toggleModal?: () => void;
+    acceptedFileTypes?: DropzoneAccept;
+    showSelectedFiles?: boolean;
+}
+declare const DropZone: FC<IProps>;
+export { DropZone };

package/dist/components/Form/FieldArray/index.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement, ReactNode } from 'react';
+import { FieldArrayRenderProps } from 'formik';
+interface IProps<T = {}> {
+    name: string;
+    newSampleItem?: T;
+    headerTitle?: string;
+    isDisabled?: boolean;
+    hideRemoveFor?: boolean[];
+    canAdd?: boolean;
+    canRemove?: boolean;
+    onRemove?: (index: number) => void;
+    classNames?: string;
+    children: ReactElement<{
+        index?: number;
+        arrayHelpers?: FieldArrayRenderProps;
+    }> | ((index: number, arrayHelpers: FieldArrayRenderProps) => ReactNode);
+}
+declare function FieldArray<T = {}>({ name, newSampleItem, headerTitle, isDisabled, hideRemoveFor, canAdd, canRemove, onRemove, children, classNames, }: IProps<T>): import("react/jsx-runtime").JSX.Element;
+export { FieldArray };

package/dist/components/Form/FieldLabel/index.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, FC } from 'react';
+import { IInfoPopoverProps } from '../../InfoPopover';
+interface IProps {
+    significant: boolean;
+    labelText?: string;
+    className?: string;
+    infoPopover?: IInfoPopoverProps;
+    customStyle?: CSSProperties;
+}
+declare const FieldLabel: FC<IProps>;
+export { FieldLabel };

package/dist/components/Form/FormField/index.d.ts

@@ -0,0 +1,19 @@
+import { FieldProps } from 'formik';
+import { CSSProperties, FC, ReactNode } from 'react';
+import { IInfoPopoverProps } from '../../InfoPopover';
+interface IProps {
+    name: string;
+    id?: string;
+    labelText?: string;
+    significant?: boolean;
+    customLabelStyle?: CSSProperties;
+    infoPopover?: IInfoPopoverProps;
+    generalStyle?: Record<string, string>;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    type?: string;
+    value?: any;
+    children: (props: FieldProps) => ReactNode;
+}
+declare const FormField: FC<IProps>;
+export { FormField };

package/dist/components/Form/Formik/index.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { FormikConfig, FormikHelpers, FormikProps, FormikValues } from 'formik';
+interface IProps<TValues extends FormikValues> {
+    children: ReactNode | ((form: FormikProps<TValues>) => ReactNode);
+    initialValues: TValues;
+    validationSchema?: FormikConfig<TValues>["validationSchema"];
+    enableReinitialize?: boolean;
+    onSubmit: (values: TValues, formikHelpers: FormikHelpers<TValues>) => void | Promise<any>;
+    className?: string;
+    noValidate?: boolean;
+    noEnter?: boolean;
+}
+declare const Formik: <TValues extends FormikValues>({ children, initialValues, validationSchema, enableReinitialize, onSubmit, className, noValidate, noEnter, }: IProps<TValues>) => import("react/jsx-runtime").JSX.Element;
+export { Formik };

package/dist/components/Form/SelectOption/BasicSelectOption/index.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, FC, FocusEventHandler } from 'react';
+import { GroupBase, OptionsOrGroups } from 'react-select';
+import { TOption } from '../../../../core/types/option.model';
+import { IInfoPopoverProps } from '../../../InfoPopover';
+export interface IProps {
+    id?: string;
+    name: string;
+    significant?: boolean;
+    labelText?: string;
+    options: OptionsOrGroups<TOption, GroupBase<TOption>>;
+    isLoading?: boolean;
+    selectedDefault?: TOption;
+    placeHolder?: string;
+    onChange?: (opt: TOption | null, e: any) => void;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    generalStyle?: Record<string, string>;
+    infoPopover?: IInfoPopoverProps;
+    customLabelStyle?: CSSProperties;
+}
+declare const BasicSelectOption: FC<IProps>;
+export default BasicSelectOption;

package/dist/components/Form/SelectOption/MultiSelectOption/index.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, FC, FocusEventHandler } from 'react';
+import { GroupBase, MultiValue, OptionsOrGroups } from 'react-select';
+import { TOption } from '../../../../core/types/option.model';
+import { IInfoPopoverProps } from '../../../InfoPopover';
+interface IProps {
+    options: OptionsOrGroups<TOption, GroupBase<TOption>>;
+    id?: string;
+    name: string;
+    placeHolder?: string;
+    labelText?: string;
+    significant?: boolean;
+    selectedDefault?: TOption[];
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    onChange?: (opt: MultiValue<{
+        value: string | number;
+        label: string | number;
+    }> | null) => void;
+    isClearable?: boolean;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    generalStyle?: Record<string, string>;
+    infoPopover?: IInfoPopoverProps;
+    customLabelStyle?: CSSProperties;
+}
+declare const MultiSelectOption: FC<IProps>;
+export { MultiSelectOption };

package/dist/components/Form/TextArea/index.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import { IInfoPopoverProps } from '../../InfoPopover';
+interface IProps {
+    id?: string;
+    name: string;
+    significant?: boolean;
+    labelText?: string;
+    placeholder: string;
+    value?: string | number;
+    disabled?: boolean;
+    className?: string;
+    singleSpace?: boolean;
+    onChange?: (val: string | number) => void;
+    icon?: ReactNode;
+    leftIcon?: ReactNode;
+    customLabelStyle?: CSSProperties;
+    customInputStyle?: CSSProperties;
+    generalStyle?: Record<string, string>;
+    infoPopover?: IInfoPopoverProps;
+}
+declare const TextArea: FC<IProps>;
+export { TextArea };

package/dist/components/Form/TextInput/index.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties, FC, ReactNode, Ref } from 'react';
+import { TextInputType } from '../../../core/types/react-strap.model';
+import { IInfoPopoverProps } from '../../InfoPopover';
+type Size = "sm" | "lg";
+interface IProps {
+    passRef?: Ref<HTMLInputElement>;
+    id?: string;
+    name: string;
+    significant?: boolean;
+    size?: Size;
+    labelText?: string;
+    placeholder: string;
+    type?: TextInputType;
+    value?: string | number;
+    disabled?: boolean;
+    className?: string;
+    novalidate?: boolean;
+    singleSpace?: boolean;
+    onChange?: (val: string | number) => void;
+    icon?: ReactNode;
+    leftIcon?: ReactNode;
+    customLabelStyle?: CSSProperties;
+    customInputStyle?: CSSProperties;
+    generalStyle?: Record<string, string>;
+    infoPopover?: IInfoPopoverProps;
+}
+declare const TextInput: FC<IProps>;
+export { TextInput };

package/dist/components/Form/Toggle/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ISimpleToggleProps } from '../../SimpleToggle';
+type TProps = Omit<ISimpleToggleProps, "value"> & Partial<Pick<ISimpleToggleProps, "onChange">>;
+declare const Toggle: FC<TProps>;
+export { Toggle };

package/dist/components/Icons/Components/ArrowLeft/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IIconProps } from '../../../../core/types/icon.model';
+declare const ArrowLeft: FC<IIconProps>;
+export { ArrowLeft };

package/dist/components/Icons/Components/ArrowRight.tsx/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IIconProps } from '../../../../core/types/icon.model';
+declare const ArrowRight: FC<IIconProps>;
+export { ArrowRight };

package/dist/components/Icons/Components/ChevronLeft/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IIconProps } from '../../../../core/types/icon.model';
+declare const ChevronLeft: FC<IIconProps>;
+export { ChevronLeft };

package/dist/components/Icons/Components/ChevronRight/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IIconProps } from '../../../../core/types/icon.model';
+declare const ChevronRight: FC<IIconProps>;
+export { ChevronRight };

package/dist/components/Icons/Components/Info/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IIconProps } from '../../../../core/types/icon.model';
+declare const Info: FC<IIconProps>;
+export { Info };

package/dist/components/Icons/Components/Search/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IIconProps } from '../../../../core/types/icon.model';
+declare const Search: FC<IIconProps>;
+export { Search };

package/dist/components/Icons/Components/X/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IIconProps } from '../../../../core/types/icon.model';
+declare const X: FC<IIconProps>;
+export { X };

package/dist/components/Icons/index.d.ts

@@ -0,0 +1,10 @@
+import { FC, SVGProps } from 'react';
+import { IconEnum } from '../../core/enums/Icon.enum';
+interface IProps extends SVGProps<SVGSVGElement> {
+    name: IconEnum;
+    size?: number;
+    color?: string;
+    className?: string;
+}
+declare const Icon: FC<IProps>;
+export { Icon };

package/dist/components/InfoPopover/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface IInfoPopoverProps {
+    id: string;
+    placement: "top" | "bottom" | "left" | "right";
+    text: string;
+    title: string;
+}
+declare const InfoPopover: FC<IInfoPopoverProps>;
+export { InfoPopover };

package/dist/components/Layout/Grid/index.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+interface IProps {
+    children: ReactNode;
+    rowClassName?: string;
+    colClassName?: string;
+    xs?: number | string;
+    sm?: number | string;
+    md?: number | string;
+    lg?: number | string;
+    xl?: number | string;
+    gap?: number | string;
+}
+declare const Grid: FC<IProps>;
+export { Grid };

package/dist/components/ListGridDetails/AdvanceListGridDetails/index.d.ts

@@ -0,0 +1,12 @@
+type ValueType = string | number | boolean | null | undefined;
+export interface IAdvanceInfoItem<T> {
+    path?: string;
+    label?: string;
+    format?: (value: ValueType, data?: T) => string;
+}
+interface IProps<T> {
+    data: T;
+    items: IAdvanceInfoItem<T>[][];
+}
+export declare const AdvanceListGridDetails: <T>({ data, items }: IProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/ListGridDetails/SimpleListGridDetails/index.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+export interface ISimpleInfoItem {
+    label: string;
+    value?: string | number | boolean | ReactNode | null;
+}
+interface IProps {
+    data: ISimpleInfoItem[];
+    showEmptyValues?: boolean;
+}
+declare const SimpleListGridDetails: FC<IProps>;
+export { SimpleListGridDetails };

package/dist/components/Loading/DotLoader/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface IProps {
+    size?: number;
+    color?: string;
+    text?: string;
+    className?: string;
+}
+declare const DotLoader: FC<IProps>;
+export default DotLoader;

package/dist/components/Loading/Loader/index.d.ts

@@ -0,0 +1,13 @@
+import { FC, CSSProperties } from 'react';
+interface IProps {
+    type?: "circular" | "dots";
+    size?: number;
+    color?: string;
+    text?: string;
+    height?: string;
+    position?: "center" | "flex-start" | "flex-end";
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Loader: FC<IProps>;
+export { Loader };

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+interface IProps {
+    isOpen: boolean;
+    toggle?: () => void;
+    title: string;
+    subTitle?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    fullscreen?: boolean;
+    showBackButton?: boolean;
+    BackButton?: boolean;
+    titleClassName?: string;
+    subTitleClassName?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+declare const Modal: FC<IProps> & {
+    Body: FC<{
+        children: ReactNode;
+    }>;
+    Footer: FC<{
+        children: ReactNode;
+    }>;
+};
+export { Modal };