@inntechcorp/it-design 2.2.89 → 3.1.0

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode, RefObject, Context, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, FunctionComponent, Ref, MutableRefObject, FocusEvent, KeyboardEvent, MouseEvent, ReactElement, CSSProperties } from 'react';
+import react__default, { ReactNode, RefObject, Context, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, FunctionComponent, MouseEvent, FC, Ref, MutableRefObject, FocusEvent, KeyboardEvent, ReactElement, CSSProperties } from 'react';
 import { ChildrenProps as ChildrenProps$1 } from 'types/ChildrenProps';
 import dayjs from 'dayjs';
-import { ConnectionStatus as ConnectionStatus$1, ModalState as ModalState$1, ComponentSizes as ComponentSizes$1, ComponentPositions as ComponentPositions$1, ComponentSizesSlug as ComponentSizesSlug$1, FormValidationTypes as FormValidationTypes$1 } from 'enums/enum';
+import { ConnectionStatus as ConnectionStatus$1, ComponentYPositions as ComponentYPositions$1, ComponentXPositions as ComponentXPositions$1, ComponentSizes as ComponentSizes$1, ComponentVariants, ComponentSizesSlug as ComponentSizesSlug$1, ModalState as ModalState$1, FormValidationTypes as FormValidationTypes$1 } from 'enums/enum';
 import { Cancel, AxiosProgressEvent } from 'axios';
 import { SelectValue as SelectValue$1 } from 'types/SelectProps';
+import { ITDVariant as ITDVariant$1, ITDSizeSlug as ITDSizeSlug$1 } from 'types/ITDProps';
 import { ModalProps as ModalProps$1 } from 'types/ModalProps';
 import { RadioButtonProps as RadioButtonProps$1, RadioGroupProps as RadioGroupProps$1 } from 'types/RadioProps';
 import { ITDImperativeFuncProps as ITDImperativeFuncProps$1 } from 'types/ITDImperativeFuncProps';
@@ -32,46 +33,120 @@ type ITDProviderProps = {
 declare const ITDContext: react.Context<ITDContextType>;
 declare const ITDProvider: (props: ITDProviderProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Generate a 50-950 color scale from a single base color (base is 600).
+ * Supports both HEX (#rrggbb) and OKLCH (oklch(L C H)) formats.
+ *
+ * The algorithm uses Tailwind CSS OKLCH color scales as reference,
+ * with specific lightness/chroma/hue curves per color band.
+ */
+type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+type ColorScale = Record<Shade, string>;
+declare function generateColorScaleFromBase(baseColor: string, options?: {
+    clampLightness?: {
+        min?: number;
+        max?: number;
+    };
+}): ColorScale;
+
 type ITDTheme = {
-    brandPrimary: string;
-    brandPrimaryHover: string;
+    appearance: 'light' | 'dark';
+    transitionDuration: string;
+    transitionTimingFunction: string;
+    fontSans?: string;
+    fontMono?: string;
+    boxShadow: string;
+    borderRadius: string;
+    ringOffset: string;
+    ringWidth: string;
+    background: string;
+    foreground: string;
+    input: string;
+    primary: string;
+    primaryHover: string;
+    primaryForeground: string;
+    primaryScale: ColorScale;
+    secondary: string;
+    secondaryHover: string;
+    secondaryForeground: string;
+    secondaryForegroundHover: string;
+    accent: string;
+    accentForeground: string;
+    muted: string;
+    mutedForeground: string;
+    selection: string;
+    selectionForeground: string;
+    popover: string;
+    popoverForeground: string;
+    card: string;
+    cardForeground: string;
     colorText: string;
     colorTextMuted: string;
+    colorTextMutedForeground: string;
     colorPlaceholder: string;
+    colorTextNeutral: string;
+    colorControlLabel: string;
+    colorModalShadow: string;
     colorBorder: string;
     colorBorderHover: string;
-    colorBorderSelected: string;
     colorBorderTransparent: string;
-    colorFocusOutline: string;
-    colorFocusOutlineTransparent: string;
     colorBackgroundAlt: string;
     colorBackgroundAltHover: string;
+    colorBackgroundTransparent: string;
+    colorBackgroundModal: string;
+    colorForegroundItemSelected: string;
+    colorForegroundItemSelectedText: string;
+    colorBackgroundSelect: string;
+    colorBackgroundSelectFilled: string;
+    colorBackgroundSelectFilledItem: string;
+    colorBackgroundSelectItem: string;
+    colorBackgroundSelectItemHover: string;
+    colorBackgroundSelectItemSelected: string;
     colorDisabledBg: string;
     colorDisabledBorder: string;
     colorDisabledText: string;
+    colorIcon: string;
     colorIconMuted: string;
-    colorTextNeutral: string;
-    colorCheckboxLabel: string;
-    colorCheckboxCheckmark: string;
-    colorCheckboxDefaultTick: string;
-    colorCheckboxFilledBg: string;
-    colorCheckboxFilledTick: string;
     colorError: string;
     colorErrorText: string;
     colorErrorBorder: string;
     scrollbarThumb: string;
     scrollbarThumbHover: string;
-    brandPrimaryGradientStart: string;
-    brandPrimaryGradientEnd: string;
-    brandPrimaryHoverStart: string;
-    brandPrimaryHoverEnd: string;
-    brandPrimaryContrastText: string;
+    primaryGradientStart: string;
+    primaryGradientEnd: string;
+    primaryHoverStart: string;
+    primaryHoverEnd: string;
+    primaryContrastText: string;
     buttonGenericBg: string;
     buttonGenericHoverBg: string;
     buttonSelectedBorder: string;
     buttonSelectedBg: string;
     buttonDisabledBg: string;
     buttonDisabledText: string;
+    colorUploadOverlay: string;
+    colorUploadText: string;
+    colorUploadOverlayError: string;
+    colorUploadErrorText: string;
+    colorUploadOverlayCompleted: string;
+    colorUploadCompletedText: string;
+    colorUploadOverlayUploading: string;
+    colorUploadingText: string;
+    colorAlertInfoBackground: string;
+    colorAlertInfoBorder: string;
+    colorAlertInfoTitle: string;
+    colorAlertInfoText: string;
+    colorAlertSuccessBackground: string;
+    colorAlertSuccessBorder: string;
+    colorAlertSuccessTitle: string;
+    colorAlertSuccessText: string;
+    colorAlertWarningBackground: string;
+    colorAlertWarningBorder: string;
+    colorAlertWarningTitle: string;
+    colorAlertWarningText: string;
+    colorAlertErrorBackground: string;
+    colorAlertErrorBorder: string;
+    colorAlertErrorTitle: string;
+    colorAlertErrorText: string;
 };
 
 type ITDThemeProviderProps = {
@@ -116,6 +191,450 @@ declare function AddDefaultThemeStyle(): void;
  */
 declare function UpdateThemeStyle(theme: string): void;
 
+/**
+ * HEX to RGBA converter
+ * @param hex - The hex color string
+ * @param alpha - The alpha value (0-1)
+ * @returns The RGBA color string
+ */
+declare function hexToRgba(hex: string, alpha?: number): string;
+/**
+ * With opacity helper
+ * @param color - The color string
+ * @param alpha - The alpha value (0-1)
+ * @returns The color string with opacity
+ */
+declare function withOpacity(color: string, alpha?: number): string;
+/**
+ * Returns the contrast text color for a given color (light/dark)
+ * Supports OKLCH and HEX formats
+ */
+declare function getContrastText(color: string): string;
+
+/**
+ * Design Tokens - Merkezi tasarım değerleri
+ * Tüm componentler bu token'ları kullanmalı
+ */
+declare const TYPOGRAPHY_TOKENS: {
+    readonly fontSize: {
+        readonly xs: "0.725rem";
+        readonly sm: "0.75rem";
+        readonly md: "0.825rem";
+        readonly df: "0.875rem";
+        readonly lg: "0.875rem";
+        readonly xl: "0.875rem";
+    };
+    readonly lineHeight: {
+        readonly xs: "0.725rem";
+        readonly sm: "0.75rem";
+        readonly md: "0.825rem";
+        readonly df: "0.875rem";
+        readonly lg: "0.875rem";
+        readonly xl: "0.875rem";
+    };
+    readonly fontWeight: {
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+};
+declare const SPACING_TOKENS: {
+    readonly paddingX: {
+        readonly xs: "0.625rem";
+        readonly sm: "0.625rem";
+        readonly md: "0.75rem";
+        readonly df: "0.75rem";
+        readonly lg: "0.9375rem";
+        readonly xl: "0.9375rem";
+    };
+    readonly height: {
+        readonly xs: "1.75rem";
+        readonly sm: "2rem";
+        readonly md: "2.125rem";
+        readonly df: "2.25rem";
+        readonly lg: "2.5rem";
+        readonly xl: "2.75rem";
+    };
+    readonly gap: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "0.75rem";
+        readonly df: "0.875rem";
+        readonly lg: "1rem";
+        readonly xl: "1.25rem";
+    };
+};
+/**
+ * Icon ve Image size tokenları
+ * Select, Button gibi componentlerde kullanılan icon boyutları
+ */
+declare const ICON_TOKENS: {
+    readonly image: {
+        readonly xs: {
+            readonly width: "0.875rem";
+            readonly height: "0.875rem";
+        };
+        readonly sm: {
+            readonly width: "1rem";
+            readonly height: "1rem";
+        };
+        readonly md: {
+            readonly width: "1.125rem";
+            readonly height: "1.125rem";
+        };
+        readonly df: {
+            readonly width: "1.25rem";
+            readonly height: "1.25rem";
+        };
+        readonly lg: {
+            readonly width: "1.25rem";
+            readonly height: "1.25rem";
+        };
+        readonly xl: {
+            readonly width: "1.375rem";
+            readonly height: "1.375rem";
+        };
+    };
+    readonly arrow: {
+        readonly xs: {
+            readonly width: "0.825rem";
+            readonly height: "0.825rem";
+        };
+        readonly sm: {
+            readonly width: "0.825rem";
+            readonly height: "0.825rem";
+        };
+        readonly md: {
+            readonly width: "1rem";
+            readonly height: "1rem";
+        };
+        readonly df: {
+            readonly width: "1rem";
+            readonly height: "1rem";
+        };
+        readonly lg: {
+            readonly width: "1.125rem";
+            readonly height: "1.125rem";
+        };
+        readonly xl: {
+            readonly width: "1.125rem";
+            readonly height: "1.125rem";
+        };
+    };
+    readonly button: {
+        readonly xs: {
+            readonly width: "0.75rem";
+            readonly height: "0.75rem";
+        };
+        readonly sm: {
+            readonly width: "0.875rem";
+            readonly height: "0.875rem";
+        };
+        readonly md: {
+            readonly width: "1rem";
+            readonly height: "1rem";
+        };
+        readonly df: {
+            readonly width: "1rem";
+            readonly height: "1rem";
+        };
+        readonly lg: {
+            readonly width: "1.125rem";
+            readonly height: "1.125rem";
+        };
+        readonly xl: {
+            readonly width: "1.25rem";
+            readonly height: "1.25rem";
+        };
+    };
+    readonly default: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly md: "1rem";
+        readonly df: "1rem";
+        readonly lg: "1.25rem";
+        readonly xl: "1.5rem";
+    };
+};
+/**
+ * Input componentleri için ortak size mapping
+ * Input, Textarea gibi text input elementleri
+ */
+declare const INPUT_SIZE_MAP: {
+    readonly xs: {
+        readonly height: "1.75rem";
+        readonly paddingX: "0.625rem";
+        readonly fontSize: "0.725rem";
+        readonly lineHeight: "0.725rem";
+        readonly fontWeight: 400;
+    };
+    readonly sm: {
+        readonly height: "2rem";
+        readonly paddingX: "0.625rem";
+        readonly fontSize: "0.75rem";
+        readonly lineHeight: "0.75rem";
+        readonly fontWeight: 400;
+    };
+    readonly md: {
+        readonly height: "2.125rem";
+        readonly paddingX: "0.75rem";
+        readonly fontSize: "0.825rem";
+        readonly lineHeight: "0.825rem";
+        readonly fontWeight: 400;
+    };
+    readonly df: {
+        readonly height: "2.25rem";
+        readonly paddingX: "0.75rem";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "0.875rem";
+        readonly fontWeight: 400;
+    };
+    readonly lg: {
+        readonly height: "2.5rem";
+        readonly paddingX: "0.9375rem";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "0.875rem";
+        readonly fontWeight: 500;
+    };
+    readonly xlg: {
+        readonly height: "2.75rem";
+        readonly paddingX: "0.9375rem";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "0.875rem";
+        readonly fontWeight: 500;
+    };
+};
+/**
+ * Select componentleri için ortak size mapping
+ * Select, Dropdown gibi seçim elementleri
+ * NOT: Input ile tamamen aynı değerleri kullanır
+ */
+declare const SELECT_SIZE_MAP: {
+    readonly xs: {
+        readonly height: "1.75rem";
+        readonly paddingX: "0.625rem";
+        readonly fontSize: "0.725rem";
+        readonly lineHeight: "0.725rem";
+        readonly fontWeight: 400;
+    };
+    readonly sm: {
+        readonly height: "2rem";
+        readonly paddingX: "0.625rem";
+        readonly fontSize: "0.75rem";
+        readonly lineHeight: "0.75rem";
+        readonly fontWeight: 400;
+    };
+    readonly md: {
+        readonly height: "2.125rem";
+        readonly paddingX: "0.75rem";
+        readonly fontSize: "0.825rem";
+        readonly lineHeight: "0.825rem";
+        readonly fontWeight: 400;
+    };
+    readonly df: {
+        readonly height: "2.25rem";
+        readonly paddingX: "0.75rem";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "0.875rem";
+        readonly fontWeight: 400;
+    };
+    readonly lg: {
+        readonly height: "2.5rem";
+        readonly paddingX: "0.9375rem";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "0.875rem";
+        readonly fontWeight: 500;
+    };
+    readonly xlg: {
+        readonly height: "2.75rem";
+        readonly paddingX: "0.9375rem";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "0.875rem";
+        readonly fontWeight: 500;
+    };
+};
+/**
+ * Button componentleri için size mapping
+ * Regular button ve icon-only button boyutları
+ */
+declare const BUTTON_SIZE_MAP: {
+    readonly xs: {
+        readonly minWidth: "1.75rem";
+        readonly minHeight: "1.75rem";
+        readonly padding: "0 0.625rem";
+        readonly fontSize: "0.725rem";
+        readonly lineHeight: "0.725rem";
+        readonly fontWeight: 500;
+        readonly iconSize: {
+            readonly width: "0.75rem";
+            readonly height: "0.75rem";
+        };
+        readonly spinnerSize: "0.75rem";
+        readonly spinnerBorder: "1px";
+    };
+    readonly sm: {
+        readonly minWidth: "2rem";
+        readonly minHeight: "2rem";
+        readonly padding: "0 0.9375rem";
+        readonly fontSize: "0.75rem";
+        readonly lineHeight: "0.75rem";
+        readonly fontWeight: 500;
+        readonly iconSize: {
+            readonly width: "0.875rem";
+            readonly height: "0.875rem";
+        };
+        readonly spinnerSize: "1rem";
+        readonly spinnerBorder: "2px";
+    };
+    readonly md: {
+        readonly minWidth: "2.125rem";
+        readonly minHeight: "2.125rem";
+        readonly padding: "0 0.9375rem";
+        readonly fontSize: "0.825rem";
+        readonly lineHeight: "0.825rem";
+        readonly fontWeight: 500;
+        readonly iconSize: {
+            readonly width: "1rem";
+            readonly height: "1rem";
+        };
+        readonly spinnerSize: "1rem";
+        readonly spinnerBorder: "2px";
+    };
+    readonly df: {
+        readonly minWidth: "2.25rem";
+        readonly minHeight: "2.25rem";
+        readonly padding: "0 0.9375rem";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "0.875rem";
+        readonly fontWeight: 500;
+        readonly iconSize: {
+            readonly width: "1rem";
+            readonly height: "1rem";
+        };
+        readonly spinnerSize: "1rem";
+        readonly spinnerBorder: "2px";
+    };
+    readonly lg: {
+        readonly minWidth: "2.5rem";
+        readonly minHeight: "2.5rem";
+        readonly padding: "0 1.25rem";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "0.875rem";
+        readonly fontWeight: 500;
+        readonly iconSize: {
+            readonly width: "1.125rem";
+            readonly height: "1.125rem";
+        };
+        readonly spinnerSize: "1.125rem";
+        readonly spinnerBorder: "2px";
+    };
+    readonly xlg: {
+        readonly minWidth: "2.75rem";
+        readonly minHeight: "2.75rem";
+        readonly padding: "0 1.25rem";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "0.875rem";
+        readonly fontWeight: 500;
+        readonly iconSize: {
+            readonly width: "1.25rem";
+            readonly height: "1.25rem";
+        };
+        readonly spinnerSize: "1.25rem";
+        readonly spinnerBorder: "3px";
+    };
+};
+/**
+ * Alert component için özel token'lar
+ */
+declare const ALERT_TOKENS: {
+    readonly title: {
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "1rem";
+        readonly fontWeight: 500;
+    };
+    readonly description: {
+        readonly fontSize: "0.8125rem";
+        readonly lineHeight: "1rem";
+        readonly fontWeight: 400;
+    };
+    readonly icon: {
+        readonly size: "1rem";
+        readonly marginTop: "0.125rem";
+    };
+    readonly spacing: {
+        readonly gap: "0.875rem";
+        readonly padding: "0.875rem";
+    };
+};
+/**
+ * Card component için özel token'lar
+ */
+declare const CARD_TOKENS: {
+    readonly padding: {
+        readonly xs: "0.5rem";
+        readonly sm: "0.75rem";
+        readonly md: "1rem";
+        readonly lg: "1.25rem";
+    };
+    readonly borderRadius: {
+        readonly sm: "0.375rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+    };
+};
+/**
+ * Modal component için özel token'lar
+ */
+declare const MODAL_TOKENS: {
+    readonly title: {
+        readonly fontSize: "0.9375rem";
+        readonly lineHeight: "1.375rem";
+        readonly fontWeight: 600;
+    };
+    readonly description: {
+        readonly fontSize: "0.8125rem";
+        readonly lineHeight: "1.25rem";
+        readonly fontWeight: 400;
+    };
+    readonly padding: {
+        readonly sm: "1rem";
+        readonly md: "1.25rem";
+        readonly lg: "1.5rem";
+    };
+};
+
+/**
+ * CSS Variables Generator
+ * tokens.ts'deki değerleri CSS custom properties'e dönüştürür
+ */
+/**
+ * Design token'larını CSS variables olarak inject eder
+ * Bu fonksiyon ITDThemeProvider tarafından otomatik çağrılır
+ */
+declare function injectDesignTokens(): void;
+/**
+ * CSS variables'ları export et (dokümantasyon için)
+ */
+declare const CSS_VARIABLES_MAP: {
+    readonly '--itd-text-xs': "0.725rem";
+    readonly '--itd-text-sm': "0.75rem";
+    readonly '--itd-text-md': "0.825rem";
+    readonly '--itd-text-df': "0.875rem";
+    readonly '--itd-text-lg': "0.875rem";
+    readonly '--itd-text-xl': "0.875rem";
+    readonly '--itd-font-weight-normal': 400;
+    readonly '--itd-font-weight-medium': 500;
+    readonly '--itd-font-weight-semibold': 600;
+    readonly '--itd-font-weight-bold': 700;
+    readonly '--itd-spacing': "0.25rem";
+};
+/**
+ * Verilen theme objesini CSS variables olarak inject eder
+ * @param theme - Styled-components theme objesi
+ */
+declare function injectThemeColors(theme: Record<string, string>): void;
+
 declare function IsValidJSON(item: string | {}): boolean;
 
 declare function AddZero(num: string): string;
@@ -460,25 +979,31 @@ type InlineSVGCachedProps = {
     onLoaded?: () => void;
     onError?: (error: unknown) => void;
 };
-declare const _default$5: react.MemoExoticComponent<({ src, className, style, title, role, onLoaded, onError }: InlineSVGCachedProps) => react_jsx_runtime.JSX.Element>;
+declare const _default$4: react.MemoExoticComponent<({ src, className, style, title, role, onLoaded, onError }: InlineSVGCachedProps) => react_jsx_runtime.JSX.Element>;
 
 type OptionsTypeProps = {
     customKey?: string;
+    label: ChildrenProps$1;
+    disabled: boolean;
+    value: SelectValue$1;
+    variant: ITDVariant$1;
+    size: ITDSizeSlug$1;
     icon?: ChildrenProps$1;
     image?: string;
-    label?: ChildrenProps$1;
-    value?: SelectValue$1;
     multi?: boolean;
     checked?: boolean;
+    isActive?: boolean;
+    index?: number;
+    onHover?: (index: number) => void;
     onChange?: (value: SelectValue$1, checked: boolean, label: ChildrenProps$1) => null;
 };
-declare const _default$4: react.MemoExoticComponent<{
-    ({ multi, checked, icon, image, value, customKey, onChange, label }: OptionsTypeProps): react_jsx_runtime.JSX.Element;
+declare const _default$3: react.MemoExoticComponent<{
+    ({ multi, checked, variant, size, icon, image, value, customKey, disabled, isActive, index, onHover, onChange, label }: OptionsTypeProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 }>;
 
 type SelectSubComponentProps = {
-    Option: typeof _default$4;
+    Option: typeof _default$3;
 };
 type SelectComponentProps = ForwardRefExoticComponent<PropsWithoutRef<SelectProps> & RefAttributes<ITDImperativeFuncProps>> & SelectSubComponentProps;
 declare const Select: SelectComponentProps;
@@ -511,7 +1036,6 @@ type ItemProps = {
     name: string;
     id?: string;
     label?: string;
-    placeholder?: string;
     error?: string;
     rules?: FormRuleProps[];
     mask?: string | null;
@@ -523,6 +1047,12 @@ type ItemProps = {
 };
 declare const Item$1: react.ForwardRefExoticComponent<ItemProps & react.RefAttributes<ITDImperativeFuncProps>>;
 
+type ITDSize = ComponentSizes$1 | "x-small" | "small" | "medium" | "default" | "large" | "x-large";
+type ITDSizeSlug = ComponentSizesSlug$1 | "xs" | "sm" | "md" | "df" | "lg" | "xlg";
+type ITDVariant = ComponentVariants | "default" | "filled" | "custom";
+type ITDHorizontalPosition = ComponentXPositions$1 | "left" | "right";
+type ITDVerticalPosition = ComponentYPositions$1 | "top" | "bottom";
+
 type FormContextType = {
     register: (item: FormItemProps) => void;
     unregister: (name: string) => void;
@@ -553,6 +1083,8 @@ type FormContextType = {
     removeFields: () => void;
     formId: string;
     updated: {};
+    variant?: ITDVariant;
+    disabled?: boolean;
 };
 
 type FormStoreProps = {
@@ -561,6 +1093,8 @@ type FormStoreProps = {
     onFieldUpdate?: (update: FieldUpdateProps) => void;
     onReset?: () => void;
     useQueryString?: boolean;
+    variant?: ITDVariant;
+    disabled?: boolean;
 };
 
 type FormSubComponentProps$1 = {
@@ -627,25 +1161,6 @@ declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAtt
  */
 declare const Upload: react.ForwardRefExoticComponent<UploadProps & react.RefAttributes<ITDImperativeFuncProps>>;
 
-declare function Panel({ id, link, icon, title, hasOpen, useLink, onChange, children }: {
-    id?: string | undefined;
-    link?: string | undefined;
-    icon?: string | undefined;
-    title?: string | undefined;
-    hasOpen?: boolean | undefined;
-    useLink?: boolean | undefined;
-    onChange?: null | undefined;
-    children?: null | undefined;
-}): react_jsx_runtime.JSX.Element;
-
-declare function Collapse({ useLink, children }: {
-    useLink?: boolean | undefined;
-    children: any;
-}): react_jsx_runtime.JSX.Element;
-declare namespace Collapse {
-    export { Panel };
-}
-
 type ModalContextType = {
     /**
      * Opens a new modal with the provided information of the modal to be opened.
@@ -702,37 +1217,16 @@ declare const Notification: {
     useNotifications: () => NotificationContextType;
 };
 
-declare function RadioButton({ id, name, value, type, buttonProps, checked, hasError, children, icon, image, component, onChange }: RadioButtonProps$1): react_jsx_runtime.JSX.Element;
+declare function RadioButton({ id, name, value, type, buttonProps, checked, hasError, className, children, icon, image, component, onChange }: RadioButtonProps$1): react_jsx_runtime.JSX.Element;
 
-declare const _default$3: react__default.NamedExoticComponent<RadioGroupProps$1 & react__default.RefAttributes<ITDImperativeFuncProps$1>>;
+declare const _default$2: react__default.NamedExoticComponent<RadioGroupProps$1 & react__default.RefAttributes<ITDImperativeFuncProps$1>>;
 
 interface RadioComponent extends React.FC {
-    Group: typeof _default$3;
+    Group: typeof _default$2;
     Button: typeof RadioButton;
 }
 declare const Radio: RadioComponent;
 
-declare const _default$2: react__default.MemoExoticComponent<({ value, checked, single, onChange, children }: {
-    value?: string | undefined;
-    checked?: boolean | undefined;
-    single?: boolean | undefined;
-    onChange?: null | undefined;
-    children?: null | undefined;
-}) => react_jsx_runtime.JSX.Element>;
-
-declare function InlineSelect({ label, value, children, single, minWidth, className, onChange }: {
-    label?: string | undefined;
-    value?: never[] | undefined;
-    children?: null | undefined;
-    single?: boolean | undefined;
-    minWidth?: number | undefined;
-    className?: string | undefined;
-    onChange?: null | undefined;
-}): react_jsx_runtime.JSX.Element;
-declare namespace InlineSelect {
-    export { _default$2 as Option };
-}
-
 interface ImageProps extends react__default.ImgHTMLAttributes<HTMLImageElement> {
     src: string;
     source?: string;
@@ -753,15 +1247,54 @@ declare function single(message: any, type?: string): void;
 declare function double(title: any, message: any, type?: string): void;
 declare function table(data: any): void;
 
+type Element = string | number | React.ReactNode | undefined;
+type ChildrenProps = Element | Element[] | null;
+
+type ButtonProps = {
+    id?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    selected?: boolean;
+    strecth?: boolean;
+    circle?: boolean;
+    justify?: string;
+    contentPosition?: ITDHorizontalPosition;
+    type?: ButtonType;
+    variant?: ButtonVariant;
+    state?: ButtonState;
+    size?: ITDSize;
+    icon?: string | ChildrenProps | SVGElement;
+    href?: string;
+    target?: string;
+    className?: string;
+    children?: ChildrenProps;
+    onClick?: null | ((event: MouseEvent<any>) => void);
+};
+type ButtonType = "button" | "submit" | "reset";
+type ButtonVariant = "default" | "solid" | "filled" | "outline" | "ghost" | "link" | "statable" | "custom";
+type ButtonState = "primary" | "secondary" | "request" | "approve" | "reject" | "pending" | "requested" | string | null;
+
 declare const Button: ({ id, disabled, loading, selected, circle, strecth, justify, contentPosition, type, variant, size, state, icon, href, target, className, children, onClick }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
+type AlertTitleProps = {
+    children?: ReactNode;
+    className?: string;
+};
+declare const AlertTitle: FC<AlertTitleProps>;
+
+type AlertDescriptionProps = {
+    children?: ReactNode;
+    className?: string;
+};
+declare const AlertDescription: FC<AlertDescriptionProps>;
+
 declare const Alert: {
-    ({ type, size, title, className, children, icon, }: AlertProps): react_jsx_runtime.JSX.Element;
+    ({ type, size, variant, title, className, children, icon, }: AlertProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
 declare const Result: {
-    ({ image, title, description, extra, footer, type, fill, autoCenter, background, animation }: ResultProps$1): react_jsx_runtime.JSX.Element;
+    ({ image, title, description, className, extra, footer, type, fill, autoCenter, background, animation }: ResultProps$1): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -791,7 +1324,7 @@ declare function TinyScrollbar({ className, children, style }: TinyScrollbarProp
 
 declare const Tabs: ({ tabs, activeTabKey, className, variant, height, onTabChange }: TabsProps) => react_jsx_runtime.JSX.Element;
 
-declare const Card: ({ title, titleSeparator, extra, tabs, onTabChange, minWidth, minHeight, children, activeTabKey, updating, contentPadding, }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ title, description, extra, tabs, onTabChange, minWidth, minHeight, children, className, variant, titleSeparator, activeTabKey, updating, contentPadding, }: CardProps) => react_jsx_runtime.JSX.Element;
 
 declare const Table: <T extends TableRow>(props: TableProps<T> & {
     ref?: Ref<TableRefProps>;
@@ -801,9 +1334,6 @@ declare const Flex: ({ gap, justify, align, vertical, wrap, stretch, style, clas
 
 type QueryValueProps = string | number | boolean | string[] | number[];
 
-type Element = string | number | React.ReactNode | undefined;
-type ChildrenProps = Element | Element[] | null;
-
 type AccordionProps = {
     useLink?: boolean;
     onlyOne?: boolean;
@@ -870,7 +1400,6 @@ type InputProps = {
     maxValue?: number;
     maxLength?: number;
     disabled?: boolean;
-    floating?: boolean;
     autoComplete?: boolean;
     keepFocus?: boolean;
     mask?: null | string;
@@ -889,10 +1418,6 @@ type InputProps = {
     children?: ChildrenProps;
 };
 
-type ITDSize = ComponentSizes$1 | "x-small" | "small" | "medium" | "default" | "large" | "x-large";
-type ITDSizeSlug = ComponentSizesSlug$1 | "xs" | "sm" | "md" | "df" | "lg" | "xlg";
-type ITDPosition = ComponentPositions$1 | "left" | "right";
-
 type CalendarProps = {
     id?: string;
     placeholder?: string;
@@ -902,7 +1427,6 @@ type CalendarProps = {
     size?: ITDSize;
     variant?: InputVariant;
     disabled?: boolean;
-    floating?: boolean;
     suffix?: ChildrenProps;
     onChange?: ((value: CalendarValueProps) => void) | null;
     onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;
@@ -931,8 +1455,7 @@ type DatePickerProps = {
     size?: ITDSize;
     variant?: InputVariant;
     disabled?: boolean;
-    floating?: boolean;
-    position?: ITDPosition;
+    position?: ITDHorizontalPosition;
     suffix?: ChildrenProps;
     onChange?: ((value: CalendarValueProps) => void) | null;
     onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;
@@ -965,30 +1488,6 @@ type TextAreaEvent = {
 };
 type TextAreaVariant = "default" | "filled" | "dashed";
 
-type ButtonProps = {
-    id?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    selected?: boolean;
-    strecth?: boolean;
-    circle?: boolean;
-    justify?: string;
-    contentPosition?: ITDPosition;
-    type?: ButtonType;
-    variant?: ButtonVariant;
-    state?: ButtonState;
-    size?: ITDSize;
-    icon?: string | ChildrenProps | SVGElement;
-    href?: string;
-    target?: string;
-    className?: string;
-    children?: ChildrenProps;
-    onClick?: null | ((event: MouseEvent<any>) => void);
-};
-type ButtonType = "button" | "submit" | "reset";
-type ButtonVariant = "default" | "solid" | "filled" | "outline" | "ghost" | "link" | "statable" | "custom";
-type ButtonState = "primary" | "secondary" | "request" | "approve" | "reject" | "pending" | "requested" | string | null;
-
 type RadioType = "default" | "primary";
 type Direction = "column" | "row";
 type RadioGroupProps = {
@@ -1016,6 +1515,7 @@ type RadioButtonProps = {
     type?: RadioType;
     checked?: boolean;
     hasError?: boolean;
+    className?: string;
     children?: React.ReactNode;
     buttonProps?: ButtonProps;
     icon?: string | null;
@@ -1029,21 +1529,19 @@ type SelectProps = {
     defaultValue?: SelectValue;
     value?: SelectValue;
     label?: string | number;
-    position?: SelectPosition;
-    direction?: SelectDirection;
+    position?: ITDVerticalPosition;
+    direction?: ITDHorizontalPosition;
     multi?: boolean;
     size?: ITDSize;
-    variant?: SelectVariant;
+    variant?: ITDVariant;
     className?: string;
     placeholder?: string;
     prefix?: ChildrenProps;
-    suffix?: ChildrenProps;
     icon?: string;
     image?: string;
     disabled?: boolean;
     showSearch?: boolean;
     locked?: boolean;
-    floating?: boolean;
     style?: CSSProperties;
     options?: SelectOptionProps[];
     onChange?: ((value: SelectValue) => void) | null;
@@ -1052,23 +1550,19 @@ type SelectProps = {
 type SelectToggleProps = {
     id?: string;
     label?: string | number | ChildrenProps;
-    value?: SelectValue | null;
     errorMessage: string;
     multi: boolean;
     isOpen: boolean;
     showSearch: boolean;
     locked: boolean;
     disabled: boolean;
-    labelType: string;
     placeholder: string;
     icon?: string;
     prefix?: ChildrenProps;
-    suffix?: ChildrenProps;
     image?: string;
     size: ITDSize;
     onFocus: () => void;
-    onBlur: () => void;
-    onShow: (value: boolean) => void;
+    onShow: (value: boolean, trigger?: 'pointer' | 'keyboard') => void;
     onFilter: (value: string) => void;
     onChange: (open: boolean) => void;
 };
@@ -1082,17 +1576,16 @@ type SelectOptionProps = {
     searchText?: string;
 };
 type SelectValue = string | number | (string | number)[];
-type SelectVariant = "default" | "solid" | "filled" | "outline" | "custom";
-type SelectPosition = "top" | "bottom";
-type SelectDirection = "right" | "left";
 
 type CheckboxProps = {
     id?: string;
     value?: string | number | boolean;
     checked?: boolean;
     disabled?: boolean;
-    variant?: CheckboxVariant;
+    readOnly?: boolean;
+    variant?: ITDVariant;
     indeterminate?: boolean;
+    animated?: boolean;
     className?: string;
     children?: ChildrenProps;
     onChange?: ((event: CheckboxEvent) => void);
@@ -1104,6 +1597,7 @@ type CheckboxGroupProps = {
     defaultValue?: (string | number | boolean)[];
     options?: GroupCheckboxOptionType[];
     disabled?: boolean;
+    variant?: ITDVariant;
     className?: string;
     children?: ChildrenProps | ReactElement<CheckboxProps> | Array<ReactElement<CheckboxProps>>;
     selectAll?: (value: boolean) => void;
@@ -1124,7 +1618,6 @@ type CheckboxEvent = {
     stopPropagation: () => void;
     preventDefault: () => void;
 };
-type CheckboxVariant = "default" | "filled";
 
 type ITDImperativeFuncProps = {
     reset: (update?: boolean, validation?: boolean) => void;
@@ -1155,6 +1648,8 @@ type FormProps = {
     onValidated?: (validate: boolean) => void;
     onFieldUpdate?: (update: FieldUpdateProps) => void;
     useQueryString?: boolean;
+    variant?: ITDVariant;
+    disabled?: boolean;
     className?: string;
     ref?: RefObject<FormContextType>;
     name: string;
@@ -1201,22 +1696,23 @@ type NotificationsProps = {
 
 type AlertProps = {
     type?: AlertType;
-    size?: AlertSize;
+    size?: ITDSize;
     icon?: string | react__default.ReactNode;
     title?: string;
+    variant?: ITDVariant;
     className?: string;
     children?: ChildrenProps;
 };
-type AlertType = "success" | "info" | "warning" | "error";
-type AlertSize = ComponentSizes$1.X_SMALL | ComponentSizes$1.SMALL | ComponentSizes$1.MEDIUM | ComponentSizes$1.DEFAULT | ComponentSizes$1.LARGE | ComponentSizes$1.X_LARGE;
+type AlertType = "neutral" | "success" | "info" | "warning" | "error";
 
 type SwitchProps = {
     id?: string;
-    label?: string;
+    children?: ChildrenProps;
     checked?: boolean;
     defaultChecked?: boolean;
     loading?: boolean;
     disabled?: boolean;
+    variant?: ITDVariant;
     onChange?: ((value: any) => void) | null;
     onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;
 };
@@ -1441,6 +1937,7 @@ type ModalRefProps = {
 
 type UploadProps = {
     id?: string;
+    variant?: ITDVariant;
     action?: string;
     filePath?: string | null;
     removeAction?: string;
@@ -1492,6 +1989,7 @@ type ResultProps = {
     image: string | ChildrenProps;
     title: string;
     description: string;
+    className?: string;
     type?: string;
     extra?: ChildrenProps | null;
     footer?: ChildrenProps | null;
@@ -1530,6 +2028,7 @@ type TableProps<T extends TableRow> = {
     columns: TableColumnType<T>[];
     data: T[] | null;
     cellHeight?: number | string;
+    className?: string;
     size?: ITDSize;
     headless?: boolean;
     bordered?: boolean;
@@ -1553,6 +2052,8 @@ type TableRefProps = {
 
 type CardProps = {
     title?: ChildrenProps;
+    variant?: ITDVariant;
+    description?: ChildrenProps;
     titleSeparator?: boolean;
     extra?: ChildrenProps;
     tabs?: {
@@ -1566,6 +2067,7 @@ type CardProps = {
     minHeight?: number;
     contentPadding?: string;
     children: ChildrenProps;
+    className?: string;
 };
 
 type ProgressProps = {
@@ -1669,10 +2171,14 @@ declare enum ComponentSizesSlug {
     LARGE = "lg",
     X_LARGE = "xlg"
 }
-declare enum ComponentPositions {
+declare enum ComponentXPositions {
     LEFT = "left",
     RIGHT = "right"
 }
+declare enum ComponentYPositions {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
 
 declare const resources: {
     tr: {
@@ -1695,6 +2201,19 @@ declare const resources: {
                 birthday: string;
                 multipleSelection: string;
             };
+            texts: {
+                enabledNotifications: string;
+                create: string;
+                read: string;
+                update: string;
+                delete: string;
+                selectAll: string;
+                termsAndConditions: string;
+                campaignTitle: string;
+                campaignDescription: string;
+                formTitle: string;
+                formDescription: string;
+            };
             options: {
                 all: string;
                 male: string;
@@ -2005,6 +2524,19 @@ declare const resources: {
                 birthday: string;
                 multipleSelection: string;
             };
+            texts: {
+                enabledNotifications: string;
+                create: string;
+                read: string;
+                update: string;
+                delete: string;
+                selectAll: string;
+                termsAndConditions: string;
+                campaignTitle: string;
+                campaignDescription: string;
+                formTitle: string;
+                formDescription: string;
+            };
             options: {
                 all: string;
                 male: string;
@@ -2296,5 +2828,5 @@ declare const resources: {
     };
 };
 
-export { _default as ALink, Accordion, AddDefaultThemeStyle, AddDefaultUnit, AddZero, Alert, Arrow as ArrowIcon, BackToTop, BackTop, Base64Decode, Base64Encode, Button, Calendar, Card, CheckFileURL, Checkbox, Checkmark, ChunkArray, Collapse, ComponentPositions, ComponentSizes, ComponentSizesSlug, ConnectionStatus, ConsoleLog, ConvertCurrency, DatePicker, DetermineNewHeight, DetermineNewWidth, FileChecker, FileExtensions, FileTypes, FindSelector, Flex, Form, FormValidationTypes, FormatBytes, FormatDate, FormatDateTime, FormatSimpleDate, FormatSimpleDateTime, FormatTime, GetByCurrency, GetCountryCodeByCurrencyCode, GetCountryCodeByLanguage, GetCurrencyFormat, GetCurrencySymbol, GetDecimalByCurrency, GetTypeByFileType, H1, H2, H3, H4, ITDContext, ITDProvider, ITDThemeProvider, _default$1 as Image, _default$5 as InlineSVGCached, InlineSelect, InlineSelectArrow, Input, IsValidJSON, Lock as LockIcon, ModalManager, ModalState, NoData, Notification, Picture, Progress, Radio, RemoveUnits, Result, SVGLoader, Select, Spin, Status, Switch, Table, Tabs, TextArea, TinyScrollbar, Trash, UniUpperCase, UpdateThemeStyle, Upload, Upload$1 as UploadIcon, Wait, ZoomIn, ZoomOut, darkTheme, lightTheme, resources, toKebabCase, useAddExternalCSS, useAvoidCollision, useComponentSize, useConnectionStatus, useConstructor, useContextBridge, useCoreFetch, useKeyboardShortcut, useMultiQuery, useOnClickOutside, useOnESCKeyDown, useOnResize, useOrientation, useReCaptcha, useSingleQuery };
-export type { AccordionItemProps, AccordionProps, AccordionSubMenuProps, AlertProps, AlertSize, AlertType, ButtonProps, ButtonState, ButtonType, ButtonVariant, CalendarDayProps, CalendarProps, CalendarValueProps, CardProps, CheckboxEvent, CheckboxGroupProps, CheckboxProps, DatePickerProps, Direction, FieldUpdateProps, FlexAlignProps, FlexGapProps, FlexJustifyProps, FlexProps, FormContextType, FormItemProps, FormProps, FormRuleProps, FormSubComponentProps, FormValueProps, GroupCheckboxOptionType, ITDContextType, ITDImperativeFuncProps, ITDProviderProps, ITDSize, ITDSizeSlug, ITDTheme, InputProps, InputVariant, ModalContentProps, ModalProps, ModalRefProps, NotificationContextType, NotificationsProps, ProgressProps, ProgressStatus, QueryValueProps, RadioButtonProps, RadioGroupProps, RadioType, ResultProps, SelectDirection, SelectOptionProps, SelectPosition, SelectProps, SelectToggleProps, SelectValue, SelectVariant, SingleQueryProps, StatusProps, StatusVariant, SwitchProps, TableColumnType, TableProps, TableRefProps, TableRow, TableTRProps, TabsItemProps, TabsProps, TextAreaEvent, TextAreaProps, TextAreaVariant, UploadProgressProps, UploadProps, UploadResultMessageProps };
+export { ALERT_TOKENS, _default as ALink, Accordion, AddDefaultThemeStyle, AddDefaultUnit, AddZero, Alert, AlertDescription, AlertTitle, Arrow as ArrowIcon, BUTTON_SIZE_MAP, BackToTop, BackTop, Base64Decode, Base64Encode, Button, CARD_TOKENS, CSS_VARIABLES_MAP, Calendar, Card, CheckFileURL, Checkbox, Checkmark, ChunkArray, ComponentSizes, ComponentSizesSlug, ComponentXPositions, ComponentYPositions, ConnectionStatus, ConsoleLog, ConvertCurrency, DatePicker, DetermineNewHeight, DetermineNewWidth, FileChecker, FileExtensions, FileTypes, FindSelector, Flex, Form, FormValidationTypes, FormatBytes, FormatDate, FormatDateTime, FormatSimpleDate, FormatSimpleDateTime, FormatTime, generateColorScaleFromBase as GenerateColorScale, GetByCurrency, GetCountryCodeByCurrencyCode, GetCountryCodeByLanguage, GetCurrencyFormat, GetCurrencySymbol, GetDecimalByCurrency, GetTypeByFileType, H1, H2, H3, H4, ICON_TOKENS, INPUT_SIZE_MAP, ITDContext, ITDProvider, ITDThemeProvider, _default$1 as Image, _default$4 as InlineSVGCached, InlineSelectArrow, Input, IsValidJSON, Lock as LockIcon, MODAL_TOKENS, ModalManager, ModalState, NoData, Notification, Picture, Progress, Radio, RemoveUnits, Result, SELECT_SIZE_MAP, SPACING_TOKENS, SVGLoader, Select, Spin, Status, Switch, TYPOGRAPHY_TOKENS, Table, Tabs, TextArea, TinyScrollbar, Trash, UniUpperCase, UpdateThemeStyle, Upload, Upload$1 as UploadIcon, Wait, ZoomIn, ZoomOut, darkTheme, generateColorScaleFromBase, getContrastText, hexToRgba, injectDesignTokens, injectThemeColors, lightTheme, resources, toKebabCase, useAddExternalCSS, useAvoidCollision, useComponentSize, useConnectionStatus, useConstructor, useContextBridge, useCoreFetch, useKeyboardShortcut, useMultiQuery, useOnClickOutside, useOnESCKeyDown, useOnResize, useOrientation, useReCaptcha, useSingleQuery, withOpacity };
+export type { AccordionItemProps, AccordionProps, AccordionSubMenuProps, AlertProps, AlertType, ButtonProps, ButtonState, ButtonType, ButtonVariant, CalendarDayProps, CalendarProps, CalendarValueProps, CardProps, CheckboxEvent, CheckboxGroupProps, CheckboxProps, DatePickerProps, Direction, FieldUpdateProps, FlexAlignProps, FlexGapProps, FlexJustifyProps, FlexProps, FormContextType, FormItemProps, FormProps, FormRuleProps, FormSubComponentProps, FormValueProps, GroupCheckboxOptionType, ITDContextType, ITDHorizontalPosition, ITDImperativeFuncProps, ITDProviderProps, ITDSize, ITDSizeSlug, ITDTheme, ITDVariant, ITDVerticalPosition, InputProps, InputVariant, ModalContentProps, ModalProps, ModalRefProps, NotificationContextType, NotificationsProps, ProgressProps, ProgressStatus, QueryValueProps, RadioButtonProps, RadioGroupProps, RadioType, ResultProps, SelectOptionProps, SelectProps, SelectToggleProps, SelectValue, SingleQueryProps, StatusProps, StatusVariant, SwitchProps, TableColumnType, TableProps, TableRefProps, TableRow, TableTRProps, TabsItemProps, TabsProps, TextAreaEvent, TextAreaProps, TextAreaVariant, UploadProgressProps, UploadProps, UploadResultMessageProps };