@inntechcorp/it-design 3.1.23 → 4.0.0-beta.1

package/dist/helpers/theme/cssVariables.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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
+ */
+export declare function injectDesignTokens(): void;
+/**
+ * CSS variables'ları export et (dokümantasyon için)
+ */
+export 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
+ */
+export declare function injectThemeColors(theme: Record<string, string>): void;

package/dist/helpers/theme/dark.d.ts

@@ -0,0 +1,3 @@
+import { ITDTheme } from '../../types/Theme';
+declare const darkTheme: ITDTheme;
+export default darkTheme;

package/dist/helpers/theme/index.d.ts

@@ -0,0 +1,9 @@
+export { default as AddDefaultThemeStyle } from '../../AddDefaultThemeStyle';
+export { default as UpdateThemeStyle } from '../../UpdateThemeStyle';
+export { default as GenerateColorScale, generateColorScaleFromBase } from '../../GenerateColorScale';
+export { hexToRgba, withOpacity, getContrastText } from '../../Color';
+export { default as lightTheme } from '../../light';
+export { default as darkTheme } from '../../dark';
+export { default as themes } from '../../themes.js';
+export { TYPOGRAPHY_TOKENS, SPACING_TOKENS, ICON_TOKENS, INPUT_SIZE_MAP, SELECT_SIZE_MAP, BUTTON_SIZE_MAP, ALERT_TOKENS, CARD_TOKENS, MODAL_TOKENS } from '../../tokens';
+export { injectDesignTokens, injectThemeColors, CSS_VARIABLES_MAP } from '../../cssVariables';

package/dist/helpers/theme/light.d.ts

@@ -0,0 +1,3 @@
+import { ITDTheme } from '../../types/Theme';
+declare const lightTheme: ITDTheme;
+export default lightTheme;

package/dist/helpers/theme/themes.d.ts

@@ -0,0 +1,5 @@
+declare const themes: {
+    light: import('../../index').ITDTheme;
+    dark: import('../../index').ITDTheme;
+};
+export default themes;

package/dist/helpers/theme/tokens.d.ts

@@ -0,0 +1,392 @@
+/**
+ * Design Tokens - Merkezi tasarım değerleri
+ * Tüm componentler bu token'ları kullanmalı
+ */
+export 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;
+    };
+};
+export 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ı
+ */
+export 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
+ */
+export 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
+ */
+export 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ı
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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";
+    };
+};

package/dist/hooks/index.d.ts

@@ -1,15 +1,15 @@
-export { default as useReCaptcha } from './useReCaptcha';
-export { default as useConstructor } from './useConstructor';
-export { default as useAddExternalCSS } from './useAddExternalCSS';
-export { default as useOnClickOutside } from './useOnClickOutside';
-export { default as useOnESCKeyDown } from './useOnESCKeyDown';
-export { default as useSingleQuery } from './useSingleQuery';
-export { default as useMultiQuery } from './useMultiQuery';
-export { default as useOnResize } from './useOnResize';
-export { default as useConnectionStatus } from './useConnectionStatus';
-export { default as useComponentSize } from './useComponentSize';
-export { default as useCoreFetch } from './useCoreFetch';
-export { default as useContextBridge } from './useContextBridge';
-export { default as useKeyboardShortcut } from './useKeyboardShortcut';
-export { default as useOrientation } from './useOrientation';
-export { default as useAvoidCollision } from './useAvoidCollision';
+export { default as useReCaptcha } from '../useReCaptcha';
+export { default as useConstructor } from '../useConstructor';
+export { default as useAddExternalCSS } from '../useAddExternalCSS';
+export { default as useOnClickOutside } from '../useOnClickOutside';
+export { default as useOnESCKeyDown } from '../useOnESCKeyDown';
+export { default as useSingleQuery } from '../useSingleQuery';
+export { default as useMultiQuery } from '../useMultiQuery';
+export { default as useOnResize } from '../useOnResize';
+export { default as useConnectionStatus } from '../useConnectionStatus';
+export { default as useComponentSize } from '../useComponentSize';
+export { default as useCoreFetch } from '../useCoreFetch';
+export { default as useContextBridge } from '../useContextBridge';
+export { default as useKeyboardShortcut } from '../useKeyboardShortcut';
+export { default as useOrientation } from '../useOrientation';
+export { default as useAvoidCollision } from '../useAvoidCollision';

package/dist/hooks/useAddExternalCSS.d.ts

@@ -2,12 +2,11 @@
  *
  * ADD EXTERNAL CSS
  *
- * Dinamik css dosyalarını yüklemek için kullanılır. Eğer yüklenecek
- * olan css dosyası daha önce eklenmiş ise tekrar yüklemez. Bunu yükleyen
- * component ekrandan silinirse yüklediği yazı da silinir.
+ * Load dynamic css files. If the css file to be loaded has already been added, it will not be loaded again.
+ * If the component that loads it is removed from the screen, the css it loads will also be removed.
  *
- * @param link      string
- * @param temporary boolean
+ * @param link      string (the css file to be loaded)
+ * @param temporary boolean (if true, the css file will be removed when the component that loads it is removed from the screen)
  *
  */
 declare const useAddExternalCSS: (link: string, temporary?: boolean) => void;

package/dist/hooks/useAvoidCollision.d.ts

@@ -1,5 +1,5 @@
 type UseAvoidCollisionOpts = {
-    /** .chat-bubble, .cookie-bar gibi engellerin CSS seçicileri */
+    /** ".chat-bubble", ".whatsapp-button", ".cookie-consent", "[data-fixed-obstacle='true']" gibi engellerin CSS seçicileri */
     obstacles?: string[];
     /** Sağa/sola yerleşim - şu an sağ-alt odaklı, gerekirse geliştirilebilir */
     corner?: "bottom-right" | "bottom-left" | "bottom-center";
@@ -10,6 +10,11 @@ type UseAvoidCollisionOpts = {
     /** Otomatik algıda en az kaç px boşluk bırakalım */
     minGap?: number;
 };
+/**
+ * Use avoid collision
+ *
+ * Avoid collision with obstacles.
+ */
 declare const useAvoidCollision: ({ obstacles, corner, autoAvoid, extraBottom, minGap, }?: UseAvoidCollisionOpts) => {
     bottomOffset: number;
 };

package/dist/hooks/useComponentSize.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { RefObject } from 'react';
 declare const useComponentSize: (comRef: RefObject<any>) => {
     width: number;
     height: number;

package/dist/hooks/useConnectionStatus.d.ts

@@ -1,4 +1,4 @@
-import { ConnectionStatus } from "enums/enum";
+import { ConnectionStatus } from '../enums/enum';
 /**
  *
  * window objesine event listener ekler ve

package/dist/hooks/useFloatingPosition.d.ts

@@ -0,0 +1,63 @@
+import { RefObject } from 'react';
+import { ComponentXPositions, ComponentYPositions } from '../enums/enum';
+type Placement = ComponentYPositions | ComponentXPositions;
+/**
+ * Use floating position options
+ *
+ * Options for the useFloatingPosition hook.
+ */
+export type UseFloatingPositionOptions = {
+    /** Is the floating element open? */
+    isOpen: boolean;
+    /** Trigger element ref */
+    triggerRef: RefObject<HTMLElement | null>;
+    /** Floating content ref */
+    contentRef: RefObject<HTMLElement | null>;
+    /** Placement preference */
+    placement?: Placement;
+    /** Offset (pixels) */
+    offset?: number;
+    /** Show arrow? (for offset calculation) */
+    showArrow?: boolean;
+};
+/**
+ * Floating position
+ *
+ * Position of the floating element.
+ */
+export type FloatingPosition = {
+    /** Top position */
+    top: number;
+    /** Left position */
+    left: number;
+    /** Actual placement */
+    actualPlacement: Placement;
+};
+/**
+ *
+ * Floating element (tooltip, popover, hovercard) position calculation
+ *
+ * - Calculate the position of the floating element based on the trigger element
+ * - Check for viewport collision (outside the viewport)
+ * - Flip the placement if it collides (if it collides, flip to the other side)
+ * - Update on scroll and resize
+ *
+ * @example
+ * ```tsx
+ * const { position } = useFloatingPosition({
+ *   isOpen,
+ *   triggerRef,
+ *   contentRef,
+ *   placement: 'top',
+ *   offset: 8
+ * });
+ *
+ * <div style={{ top: position.top, left: position.left }}>
+ *   Content
+ * </div>
+ * ```
+ */
+export declare function useFloatingPosition({ isOpen, triggerRef, contentRef, placement, offset: customOffset, showArrow }: UseFloatingPositionOptions): {
+    position: FloatingPosition;
+};
+export {};

package/dist/hooks/useFloatingTrigger.d.ts

@@ -0,0 +1,64 @@
+import { TriggerTypes } from '../enums/enum';
+import { MouseEvent as ReactMouseEvent } from 'react';
+/**
+ * Use floating trigger options
+ *
+ * Options for the useFloatingTrigger hook.
+ */
+export type UseFloatingTriggerOptions = {
+    /** Trigger type - auto-extracted from TriggerTypes enum */
+    trigger?: `${TriggerTypes}`;
+    /** Open delay (ms) */
+    openDelay?: number;
+    /** Close delay (ms) */
+    closeDelay?: number;
+    /** Close on click outside */
+    closeOnClickOutside?: boolean;
+    /** Initial state for manual control */
+    defaultOpen?: boolean;
+    /** Controlled mode */
+    open?: boolean;
+    /** On open change */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Return type for useFloatingTrigger
+ */
+export type UseFloatingTriggerResult = {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    getTriggerProps: () => any;
+    getContentProps: () => {
+        ref: (el: HTMLElement | null) => void;
+        onClick?: (e: ReactMouseEvent) => void;
+        onMouseEnter?: () => void;
+        onMouseLeave?: () => void;
+    };
+    triggerRef: React.RefObject<HTMLElement | null>;
+    contentRef: React.RefObject<HTMLElement | null>;
+};
+/**
+ *
+ * Floating element interaction logic
+ *
+ * - Trigger with hover, click, focus or manual
+ * - Configurable delays
+ * - Check for click outside
+ * - Controlled or uncontrolled mode
+ *
+ * @example
+ * ```tsx
+ * const floating = useFloatingTrigger({
+ *   trigger: TriggerTypes.HOVER,
+ *   openDelay: 700,
+ *   closeDelay: 0
+ * });
+ *
+ * <div {...floating.getTriggerProps()}>
+ *   Trigger
+ * </div>
+ * ```
+ */
+export declare function useFloatingTrigger({ trigger, openDelay, closeDelay, closeOnClickOutside, defaultOpen, open: controlledOpen, onOpenChange, }?: UseFloatingTriggerOptions): UseFloatingTriggerResult;