@inntechcorp/it-design 3.1.24 → 4.0.0-beta.2

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/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/useFloatingPosition.d.ts

@@ -0,0 +1,63 @@
+import type { 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 type { 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;

package/dist/hooks/useFocusTrap.d.ts

@@ -0,0 +1,36 @@
+import type { RefObject } from 'react';
+/**
+ * Focus trap options
+ */
+export type UseFocusTrapOptions = {
+    /** Is active? */
+    isActive?: boolean;
+    /** Container ref */
+    containerRef: RefObject<HTMLElement | null>;
+    /** Initial focus element ref (optional, defaults to first focusable element) */
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Return focus to this element when trap is deactivated */
+    returnFocusRef?: RefObject<HTMLElement | null>;
+    /** Auto focus on activate */
+    autoFocus?: boolean;
+    /**
+     * If true, focus is not only with TAB,
+     * mouse / programmatically also escapes and is pulled back in.
+     * @default false
+     */
+    trapFocusOutside?: boolean;
+    /**
+     * When disabled, focus is returned to the trigger.
+     * @default true
+     */
+    restoreFocus?: boolean;
+};
+/**
+ * Focus trap hook
+ *
+ * Traps focus within a container when active.
+ * - TAB cycles through focusable elements
+ * - Shift+TAB cycles backwards
+ * - Focus returns to returnFocusRef when deactivated
+ */
+export declare function useFocusTrap({ isActive, containerRef, initialFocusRef, returnFocusRef, autoFocus, trapFocusOutside, restoreFocus, }: UseFocusTrapOptions): void;

package/dist/hovercard/HoverCard.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type HoverCardProps = {
+    children: ReactNode;
+    /** Açılma gecikmesi (ms) */
+    openDelay?: number;
+    /** Kapanma gecikmesi (ms) */
+    closeDelay?: number;
+};
+export declare const HoverCard: {
+    ({ children, openDelay, closeDelay, }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/hovercard/HoverCardContent.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { ComponentYPositions } from 'enums/enum';
+export type HoverCardContentProps = {
+    /** Card içeriği (rich content) */
+    children: ReactNode;
+    /** Placement */
+    placement?: ComponentYPositions;
+    /** Ok göster */
+    showArrow?: boolean;
+    /** Max genişlik */
+    maxWidth?: string | number;
+    /** Offset (piksel) */
+    offset?: number;
+    /** A11y: içerikteki başlığın id'si */
+    ariaLabelledby?: string;
+    /** A11y: açıklama elementinin id'si */
+    ariaDescribedby?: string;
+};
+export declare const HoverCardContent: {
+    ({ children, placement, showArrow, maxWidth, offset, ariaLabelledby, ariaDescribedby, }: HoverCardContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/hovercard/HoverCardTrigger.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+/**
+ * HoverCardTrigger props
+ */
+export type HoverCardTriggerProps = {
+    /** Trigger olarak kullanılacak element */
+    children: ReactNode;
+    /**
+     * - `asChild = true` → children Slot ile wrap'lenir, DOM'u child üretir
+     * - `asChild = false` → native `<span>` trigger olarak kullanılır
+     */
+    asChild?: boolean;
+};
+export declare const HoverCardTrigger: {
+    ({ children, asChild, }: HoverCardTriggerProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/hovercard/hoverCardContext.d.ts

@@ -0,0 +1,7 @@
+import { useFloatingTrigger } from '../hooks/useFloatingTrigger';
+export type HoverCardContextValue = {
+    id: string;
+    trigger: ReturnType<typeof useFloatingTrigger>;
+};
+export declare const HoverCardContext: import("react").Context<HoverCardContextValue | null>;
+export declare function useHoverCardContext(componentName: string): HoverCardContextValue;

package/dist/hovercard/index.d.ts

@@ -0,0 +1,4 @@
+import { HoverCard } from './HoverCard';
+import { HoverCardTrigger } from './HoverCardTrigger';
+import { HoverCardContent } from './HoverCardContent';
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/icons/index.d.ts

@@ -9,6 +9,3 @@ export { default as ZoomIn } from './ZoomIn';
 export { default as ZoomOut } from './ZoomOut';
 export { default as Picture } from './Picture';
 export { default as NoData } from './NoData';
-export { default as FileDocument } from './FileDocument';
-export { default as FileExcel } from './FileExcel';
-export { default as FilePdf } from './FilePdf';

package/dist/image/index.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     src: string;
     source?: string;
-    fallback?: string;
     brokenWidth?: number | string;
     brokenHeight?: number | string;
     onLoad?: () => void;