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

package/dist/form/context/FormRegistry.d.ts

@@ -0,0 +1,13 @@
+type FormRegistryEntry = {
+    disabled: boolean;
+    locked: boolean;
+};
+type Listener = () => void;
+export declare const FormRegistry: {
+    register(name: string, entry: FormRegistryEntry): void;
+    unregister(name: string): void;
+    getDisabled(name: string | undefined): boolean | undefined;
+    getLocked(name: string | undefined): boolean | undefined;
+    subscribe(listener: Listener): () => void;
+};
+export {};

package/dist/form/context/FormStore.d.ts

@@ -1,11 +1,15 @@
 import { FieldUpdateProps } from "../../index";
 import { FormContextType } from "./FormContext";
+import { ITDVariant } from "../../types/ITDProps";
 export type FormStoreProps = {
     name: string;
     onUpdate?: (values: {}) => void;
     onFieldUpdate?: (update: FieldUpdateProps) => void;
     onReset?: () => void;
     useQueryString?: boolean;
+    variant?: ITDVariant;
+    disabled?: boolean;
+    locked?: boolean;
 };
-declare function FormStore({ name, useQueryString, onUpdate, onReset, onFieldUpdate, }: FormStoreProps): FormContextType;
+declare function FormStore({ name, useQueryString, onUpdate, onReset, onFieldUpdate, variant, disabled, locked, }: FormStoreProps): FormContextType;
 export default FormStore;

package/dist/form/control/Control.d.ts

@@ -2,6 +2,7 @@ import { ChildrenProps } from "types/ChildrenProps";
 export type ControlProps = {
     className?: string;
     position?: "start" | "end" | "center";
+    form?: string;
     children?: ChildrenProps;
 };
-export default function Control({ position, className, children }: ControlProps): import("react/jsx-runtime").JSX.Element;
+export default function Control({ position, className, form, children }: ControlProps): import("react/jsx-runtime").JSX.Element;

package/dist/form/item/Item.d.ts

@@ -4,7 +4,6 @@ export type ItemProps = {
     name: string;
     id?: string;
     label?: string;
-    placeholder?: string;
     error?: string;
     rules?: FormRuleProps[];
     mask?: string | null;

package/dist/form/validation/Validator.d.ts

@@ -14,7 +14,6 @@ declare const Validator: {
     checkAdminUsername: (value: string) => boolean;
     checkURL: (value: string) => boolean;
     checkForbiddenWords: (value: string, words: (string | number)[]) => boolean;
-    checkMultipleOf: (value: number, multiple: number) => boolean;
 };
 export declare function CheckValidations(rules: FormRuleProps[], value: FormValueProps, getFieldValue: (name: string) => FormValueProps, t: TFunction): string[];
 export default Validator;

package/dist/global.css

@@ -1,146 +1,48 @@
-body {
-  
-  padding: 0;
-  margin: 0;
-
-}
-
-*, ::after, ::before {
-  box-sizing                  : border-box;
-  -webkit-tap-highlight-color : transparent;
-  -webkit-font-smoothing      : antialiased;
-  margin    : 0px;
-  padding   : 0px;
-  outline   : none;
-}
-
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-  outline: 0;
-  font-weight: bold;
-}
-
-a {
-  cursor: pointer;
-  color: #029CFD;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #0083d4;
-}
-
-button, span, input, textarea {
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-input {
-  background: transparent;
-  border: none;
-}
-
-input, textarea {
-  &::placeholder {
-    color: inherit;
-  }
-}
-
-button {
-  border: none;
-}
-
-textarea {
-  vertical-align: top;
-  vertical-align: text-top;
-}
-
-.itd-provider, #itd-modal-root, #itd-tooltip-root, #itd-notification-root {
-
-  font-size   : 0.875rem;
-  line-height : 1rem;
-  font-weight : 500;
-  font-family : "Inter", sans-serif;
-  color       : #555;
-  -webkit-font-smoothing: antialiased;
-
-}
-
-.os-theme-dark {
-  --os-size: 8px;
-  --os-handle-bg: #3598fe80;
-  --os-handle-bg-hover: #3598fe;
-  --os-handle-bg-active: #3598fe;
-}
-
 /* ================================= */
-/* Component Transitions */
+/* ITD DESIGN SYSTEM - GLOBAL STYLES */
 /* ================================= */
+/* 
+ * Bu dosya tüm ITD stillerini bir araya getirir.
+ * İsterseniz sadece ihtiyacınız olan parçaları import edebilirsiniz:
+ * 
+ * @import '@inntechcorp/it-design/css/properties.css';  // Sadece CSS properties
+ * @import '@inntechcorp/it-design/css/reset.css';       // Sadece CSS reset
+ * @import '@inntechcorp/it-design/css/base.css';        // Sadece design tokens
+ * @import '@inntechcorp/it-design/css/components.css';  // Sadece component transitions
+ * @import '@inntechcorp/it-design/css/utilities.css';   // Sadece utility classes
+ * 
+ * Veya hepsini birden:
+ * @import '@inntechcorp/it-design/dist/global.css';     // Full package
+ */
 
-/* Modal Transitions */
-.modal-enter {
-  opacity: 0 !important;
-  transform: translate(-50%, -40%) !important;
-}
-
-.modal-enter-active {
-  opacity: 1 !important;
-  transform: translate(-50%, -50%) !important;
-  transition: opacity 300ms, transform 300ms !important;
-  transition-delay: .3s !important;
-}
-
-.modal-exit {
-  opacity: 1 !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-.modal-exit-active {
-  opacity: 0 !important;
-  transform: translate(-50%, -40%) !important;
-  transition: opacity 300ms, transform 300ms !important;
-}
-
-/* Select Menu Transitions */
-.select-menu-enter {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-}
-
-.select-menu-enter-active {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
-
-.select-menu-exit {
-  opacity: 1 !important;
-}
-
-.select-menu-exit-active {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
-
-/* DatePicker Modal Transitions */
-.datepicker-modal-enter {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-}
-
-.datepicker-modal-enter-active {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
-
-.datepicker-modal-exit {
-  opacity: 1 !important;
-}
+/* ================================= */
+/* LAYER DECLARATIONS */
+/* ================================= */
+@layer properties, reset, base, components, utilities;
 
-.datepicker-modal-exit-active {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
+/* ================================= */
+/* IMPORTS */
+/* ================================= */
+@import './css/properties.css';
+@import './css/reset.css';
+@import './css/base.css';
+@import './css/components.css';
+@import './css/button.css';
+@import './css/alert.css';
+@import './css/card.css';
+@import './css/input.css';
+@import './css/datepicker.css';
+@import './css/switch.css';
+@import './css/textarea.css';
+@import './css/checkbox.css';
+@import './css/form.css';
+@import './css/hovercard.css';
+@import './css/popover.css';
+@import './css/tooltip.css';
+@import './css/spin.css';
+@import './css/status.css';
+@import './css/tabs.css';
+@import './css/common.css';
+@import './css/upload.css';
+@import './css/select.css';
+@import './css/utilities.css';

package/dist/helpers/binary/GetTypeByFileType.d.ts

@@ -1,2 +1,2 @@
 import { FileTypes, FileExtensions } from "../../index";
-export default function GetTypeByFileType(type: FileTypes): FileExtensions.SVG | FileExtensions.PNG | FileExtensions.GIF | FileExtensions.WEBP | FileExtensions.PDF | FileExtensions.XLSX | FileExtensions.OTF | ".jpg, .jpeg" | "";
+export default function GetTypeByFileType(type: FileTypes): FileExtensions | "";

package/dist/helpers/country/GetCountryCodeByCurrencyCode.d.ts

@@ -1 +1 @@
-export default function GetCountryCodeByCurrencyCode(currency?: string): "tr-TR" | "de-DE" | "en-US" | "en-GB";
+export default function GetCountryCodeByCurrencyCode(currency?: string): "en-US" | "de-DE" | "tr-TR" | "en-GB" | "ja-JP" | "fr-CH" | "en-CA" | "en-AU" | "en-NZ" | "ru-RU" | "en-IN" | "pt-BR" | "es-MX" | "es-AR" | "es-CL" | "es-CO" | "es-PE" | "en-ZA" | "zh-CN" | "sv-SE" | "no-NO" | "da-DK" | "en-SG" | "en-HK";

package/dist/helpers/country/GetCountryCodeByLanguage.d.ts

@@ -1 +1 @@
-export default function GetCountryCodeByLanguage(language: string): "tur" | "usa" | "language_not_found";
+export default function GetCountryCodeByLanguage(language: string): "usa" | "tur" | "deu" | "fra" | "esp" | "ita" | "jpn" | "kor" | "nld" | "pol" | "por" | "rus" | "san" | "snd" | "sin" | "slk" | "slv" | "alb" | "srb" | "swe" | "tam" | "tel" | "tha" | "tgl" | "ukr" | "urd" | "uzb" | "vie" | "chi" | "zul" | "gre" | "ara" | "language_not_found";

package/dist/helpers/css/FindSelector.d.ts

@@ -1 +1,11 @@
+/**
+ *
+ * FIND SELECTOR
+ *
+ * Find the style tag containing the specified class name and return true/false.
+ *
+ * @param searchClassName string
+ * @returns boolean
+ *
+ */
 export default function FindSelector(searchClassName: string): boolean;

package/dist/helpers/currency/ConvertCurrency.d.ts

@@ -1 +1 @@
-export default function ConvertCurrency(balance: number, currency: string): string;
+export default function ConvertCurrency(balance: number, currency: string): string | undefined;

package/dist/helpers/currency/GetCurrencyFormat.d.ts

@@ -1 +1,10 @@
+/**
+ *
+ * Get the currency format of the value.
+ *
+ * @param value string
+ * @param currency string
+ * @returns string
+ *
+ */
 export default function GetCurrencyFormat(value: string, currency?: string): string;

package/dist/helpers/index.d.ts

@@ -9,7 +9,10 @@ export { default as GetCurrencyFormat } from './currency/GetCurrencyFormat';
 export { default as GetCurrencySymbol } from './currency/GetCurrencySymbol';
 export { default as GetDecimalByCurrency } from './currency/GetDecimalByCurrency';
 export { default as AddDefaultThemeStyle } from './theme/AddDefaultThemeStyle';
-export { default as UpdateThemeStyle } from './theme/UpdateThemeStyle';
+export { default as GenerateColorScale, generateColorScaleFromBase } from './theme/GenerateColorScale';
+export { hexToRgba, withOpacity, getContrastText } from './theme/Color';
+export { TYPOGRAPHY_TOKENS, SPACING_TOKENS, ICON_TOKENS, INPUT_SIZE_MAP, SELECT_SIZE_MAP, BUTTON_SIZE_MAP, ALERT_TOKENS, CARD_TOKENS, MODAL_TOKENS } from './theme/tokens';
+export { injectDesignTokens, injectThemeColors, CSS_VARIABLES_MAP } from './theme/cssVariables';
 export { default as IsValidJSON } from './json/IsValidJSON';
 export { default as AddZero } from './math/AddZero';
 export { default as RemoveUnits } from './remover/RemoveUnits';

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

@@ -0,0 +1,19 @@
+/**
+ * HEX to RGBA converter
+ * @param hex - The hex color string
+ * @param alpha - The alpha value (0-1)
+ * @returns The RGBA color string
+ */
+export 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
+ */
+export declare function withOpacity(color: string, alpha?: number): string;
+/**
+ * Returns the contrast text color for a given color (light/dark)
+ * Supports OKLCH and HEX formats
+ */
+export declare function getContrastText(color: string): string;

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

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+export type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+export type ColorScale = Record<Shade, string>;
+export declare function generateColorScaleFromBase(baseColor: string, options?: {
+    clampLightness?: {
+        min?: number;
+        max?: number;
+    };
+}): ColorScale;
+export default generateColorScaleFromBase;

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

@@ -0,0 +1,8 @@
+import type { ITDTheme } from '../../types/Theme';
+type Appearance = 'light' | 'dark';
+export type ThemeScaleConfig = {
+    surfaceBase: string;
+    primaryBase: string;
+};
+export declare function createTheme(appearance: Appearance, config: ThemeScaleConfig): ITDTheme;
+export default createTheme;

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

@@ -0,0 +1,41 @@
+/**
+ * CSS Variables Generator
+ * ITDTheme token'larını CSS custom properties olarak
+ * verilen container elemente (veya fallback olarak :root'a) yazar.
+ * styled-components'taki ${({ theme }) => theme.x} yerine
+ * var(--itd-x) kullanılmasını sağlar → tema değişiminde
+ * React re-render yerine native CSS repaint olur.
+ */
+import type { ITDTheme } from '../../types/Theme';
+/**
+ * Design token'larını (typography, spacing) CSS variables olarak inject eder
+ */
+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";
+};
+/**
+ * ITDTheme objesindeki TÜM string token'ları CSS custom properties olarak yazar.
+ * Naming: camelCase key → --itd-kebab-case
+ *
+ * @param theme     - ITDTheme objesi
+ * @param targetEl  - ITDProvider wrapper elementi. Verilirse hem bu elemente
+ *                    hem de document.documentElement'e yazılır.
+ *                    Wrapper'a yazılması: [data-theme] CSS fallback'lerini override eder.
+ *                    Root'a yazılması: portal content'in (select, modal) inherit edebilmesi için.
+ */
+export declare function injectThemeVars(theme: ITDTheme, targetEl?: HTMLElement | null): void;
+export declare const injectThemeColors: typeof injectThemeVars;

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

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

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

@@ -0,0 +1,12 @@
+export { default as AddDefaultThemeStyle } from './AddDefaultThemeStyle';
+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 { createTheme } from './createTheme';
+export type { ThemeScaleConfig } from './createTheme';
+export { SURFACE_PRESETS, BRAND_PRESETS, DEFAULT_SURFACE, DEFAULT_BRAND } from './presets';
+export type { SurfacePreset, BrandPreset } from './presets';
+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 type { ITDTheme } from "../../types/Theme";
+declare const lightTheme: ITDTheme;
+export default lightTheme;

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

@@ -0,0 +1,12 @@
+export type SurfacePreset = {
+    name: string;
+    base: string;
+};
+export type BrandPreset = {
+    name: string;
+    base: string;
+};
+export declare const SURFACE_PRESETS: Record<string, SurfacePreset>;
+export declare const BRAND_PRESETS: Record<string, BrandPreset>;
+export declare const DEFAULT_SURFACE = "neutral";
+export declare const DEFAULT_BRAND = "blue";

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;