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

package/dist/stories/Tooltip.d.ts

@@ -0,0 +1 @@
+export declare const TooltipExample: ({ content, placement, openDelay, variant }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Tooltip.stories.d.ts

@@ -0,0 +1,35 @@
+import type { StoryObj } from '@storybook/react';
+import { ComponentXPositions, ComponentYPositions } from '../enums/enum';
+declare const meta: {
+    title: string;
+    component: ({ content, placement, openDelay, variant }: any) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        placement: {
+            control: "select";
+            options: (ComponentYPositions | ComponentXPositions)[];
+        };
+        content: {
+            control: "text";
+        };
+        openDelay: {
+            control: "number";
+        };
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Top: Story;
+export declare const Bottom: Story;
+export declare const FastOpen: Story;
+export declare const WithoutSolidColor: Story;
+export declare const WithCustomSolidColor: Story;

package/dist/stories/Upload.stories.d.ts

@@ -8,7 +8,7 @@ declare const meta: {
     tags: string[];
     argTypes: {};
     args: {
-        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onClick: import("storybook/test").Mock<(...args: any[]) => any>;
     };
 };
 export default meta;
@@ -16,9 +16,4 @@ type Story = StoryObj<typeof meta>;
 export declare const PreDefined: Story;
 export declare const Disabled: Story;
 export declare const NoDefinedFile: Story;
-export declare const MinImageSize: Story;
-export declare const CropEnabled: Story;
-export declare const CropEnabled16x9: Story;
-export declare const CropEnabledRetina: Story;
-export declare const CropExactOutput: Story;
 export declare const Error: Story;

package/dist/stories/root/index.d.ts

@@ -1,5 +1,4 @@
 import { ChildrenProps } from "types/ChildrenProps";
-import "./index.scss";
 declare const StoryRoot: ({ children }: {
     children: ChildrenProps;
 }) => ChildrenProps;

package/dist/switch/index.d.ts

@@ -1,3 +1,4 @@
-import { ITDImperativeFuncProps, SwitchProps } from '../index';
+import type { SwitchProps } from '../types/SwitchProps';
+import type { ITDImperativeFuncProps } from '../types/ITDImperativeFuncProps';
 declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<ITDImperativeFuncProps>>;
 export default Switch;

package/dist/tabs/index.d.ts

@@ -1,3 +1,3 @@
-import { TabsProps } from "../index";
-declare const Tabs: ({ tabs, activeTabKey, className, variant, height, overflow, onTabChange }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+import type { TabsProps } from "../types/TabsProps";
+declare const Tabs: ({ tabs, activeTabKey, className, variant, orientation, height, fill, onTabChange }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/tooltip/Tooltip.d.ts

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

package/dist/tooltip/TooltipContent.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { ComponentVariants, ComponentYPositions } from 'enums/enum';
+export type TooltipContentProps = {
+    children: ReactNode;
+    placement?: ComponentYPositions;
+    variant?: `${ComponentVariants}`;
+    offset?: number;
+};
+export declare const TooltipContent: {
+    ({ children, placement, variant, offset, }: TooltipContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/tooltip/TooltipTrigger.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+/**
+ * TooltipTrigger props
+ */
+export type TooltipTriggerProps = {
+    /**
+     * The children to be used as the trigger element
+     */
+    children: ReactNode;
+    /**
+     * - When `asChild` is true, children are wrapped with Slot and used as the trigger element
+     * - When `asChild` is false, a native `<span>` is used as the trigger element
+     */
+    asChild?: boolean;
+};
+export declare const TooltipTrigger: {
+    ({ children, asChild, }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip } from './Tooltip';
+import { TooltipTrigger } from './TooltipTrigger';
+import { TooltipContent } from './TooltipContent';
+export { Tooltip, TooltipTrigger, TooltipContent };

package/dist/tooltip/tooltipContext.d.ts

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

package/dist/types/AlertProps.d.ts

@@ -1,13 +1,14 @@
 import React from "react";
 import { ChildrenProps } from "./ChildrenProps";
-import { ComponentSizes } from "enums/enum";
+import { ITDSize } from "./ITDProps";
+import { ITDVariant } from "./ITDProps";
 export type AlertProps = {
     type?: AlertType;
-    size?: AlertSize;
+    size?: ITDSize;
     icon?: string | React.ReactNode;
     title?: string;
+    variant?: ITDVariant;
     className?: string;
     children?: ChildrenProps;
 };
-export type AlertType = "success" | "info" | "warning" | "error";
-export type AlertSize = ComponentSizes.X_SMALL | ComponentSizes.SMALL | ComponentSizes.MEDIUM | ComponentSizes.DEFAULT | ComponentSizes.LARGE | ComponentSizes.X_LARGE;
+export type AlertType = "neutral" | "success" | "info" | "warning" | "error";

package/dist/types/ButtonProps.d.ts

@@ -2,43 +2,24 @@ import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from "react";
 import { ChildrenProps } from "./ChildrenProps";
 import { IStyledComponent } from "styled-components";
 import { Substitute } from "styled-components/dist/types";
-import { ITDSize, ITDPosition } from "./ITDProps";
+import { ButtonTypes, ComponentVariants, ButtonSizes } from "enums/enum";
 export type ButtonProps = {
     id?: string;
+    form?: 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;
+    variant?: ButtonVariants;
+    state?: ButtonStates;
+    size?: ButtonSize;
     href?: string;
     target?: string;
     className?: string;
     children?: ChildrenProps;
     onClick?: null | ((event: MouseEvent<any>) => void);
 };
-export type ButtonType = "button" | "submit" | "reset";
-export type ButtonVariant = "default" | "solid" | "filled" | "outline" | "ghost" | "link" | "statable" | "custom";
-export type ButtonState = "primary" | "secondary" | "request" | "approve" | "reject" | "pending" | "requested" | string | null;
+export type ButtonType = `${ButtonTypes}`;
+export type ButtonSize = `${ButtonSizes}`;
+export type ButtonVariants = `${ComponentVariants}` | "solid" | "outline" | "ghost" | "link" | "statable";
+export type ButtonStates = "primary" | "secondary" | "request" | "approve" | "reject" | "pending" | "requested" | string | null;
 export type StyledElementProps = IStyledComponent<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>>;
-export interface IIcon {
-    $useIconPadding?: boolean;
-    $contentPosition?: string;
-    $justify?: string;
-    children?: ChildrenProps;
-}
-export interface ISVG {
-    $singleIcon: boolean;
-    $contentPosition: string | undefined;
-    $justify: string | undefined;
-}
-export interface IImage {
-    $contentPosition: string | undefined;
-    $justify: string | undefined;
-}

package/dist/types/CalendarProps.d.ts

@@ -11,7 +11,6 @@ export 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;

package/dist/types/CardProps.d.ts

@@ -1,6 +1,9 @@
 import { ChildrenProps } from "./ChildrenProps";
+import { ITDVariant } from "./ITDProps";
 export type CardProps = {
     title?: ChildrenProps;
+    variant?: ITDVariant;
+    description?: ChildrenProps;
     titleSeparator?: boolean;
     extra?: ChildrenProps;
     tabs?: {
@@ -10,8 +13,9 @@ export type CardProps = {
     activeTabKey?: string;
     onTabChange?: (key: string) => void;
     updating?: boolean;
-    minWidth?: number | string;
-    minHeight?: number | string;
+    minWidth?: string;
+    minHeight?: string;
     contentPadding?: string;
     children: ChildrenProps;
+    className?: string;
 };

package/dist/types/CheckboxProps.d.ts

@@ -1,12 +1,15 @@
 import { ReactElement, RefObject } from "react";
 import { ChildrenProps } from "./ChildrenProps";
+import { ITDVariant } from "./ITDProps";
 export 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);
@@ -18,6 +21,7 @@ export 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;

package/dist/types/ChildrenProps.d.ts

@@ -1,3 +1,4 @@
-type Element = string | number | React.ReactNode | undefined;
+import { ReactNode } from 'react';
+type Element = string | number | ReactNode | undefined;
 export type ChildrenProps = Element | Element[] | null;
 export {};

package/dist/types/DatePickerProps.d.ts

@@ -2,7 +2,8 @@ import type dayjs from "dayjs";
 import { CalendarValueProps } from "./CalendarProps";
 import { ChildrenProps } from "./ChildrenProps";
 import { InputVariant } from "./InputProps";
-import { ITDPosition, ITDSize } from "./ITDProps";
+import { ITDHorizontalPosition, ITDSize } from "./ITDProps";
+import type { CalendarLocale } from "../calendar";
 export type DatePickerProps = {
     id?: string;
     placeholder?: string;
@@ -13,10 +14,11 @@ export type DatePickerProps = {
     size?: ITDSize;
     variant?: InputVariant;
     disabled?: boolean;
-    floating?: boolean;
-    position?: ITDPosition;
+    locked?: boolean;
+    position?: ITDHorizontalPosition;
     suffix?: ChildrenProps;
     onChange?: ((value: CalendarValueProps) => void) | null;
     onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;
     disabledDate?: (date: dayjs.Dayjs) => boolean;
+    calendarLocale?: CalendarLocale;
 };

package/dist/types/FormProps.d.ts

@@ -5,6 +5,7 @@ import { ITDImperativeFuncProps } from "../index";
 import { FormStoreProps } from "../form/context/FormStore";
 import { FormContextType } from "../form/context/FormContext";
 import { Item, Group, Control } from "../form";
+import { ITDVariant } from "./ITDProps";
 export type FormProps = {
     initialValues?: {};
     children: ChildrenProps;
@@ -15,6 +16,9 @@ export type FormProps = {
     onValidated?: (validate: boolean) => void;
     onFieldUpdate?: (update: FieldUpdateProps) => void;
     useQueryString?: boolean;
+    variant?: ITDVariant;
+    disabled?: boolean;
+    locked?: boolean;
     className?: string;
     ref?: RefObject<FormContextType>;
     name: string;
@@ -31,7 +35,6 @@ export type FormRuleProps = {
     field?: string;
     value?: string | number | (string | number)[];
     message?: string;
-    currency?: string;
 };
 export type FormItemProps = {
     name: string;

package/dist/types/ITDProps.d.ts

@@ -1,4 +1,6 @@
-import { ComponentPositions, ComponentSizes, ComponentSizesSlug } from "enums/enum";
+import { ComponentXPositions, ComponentSizes, ComponentSizesSlug, ComponentYPositions, ComponentVariants } from "../enums/enum";
 export type ITDSize = ComponentSizes | "x-small" | "small" | "medium" | "default" | "large" | "x-large";
 export type ITDSizeSlug = ComponentSizesSlug | "xs" | "sm" | "md" | "df" | "lg" | "xlg";
-export type ITDPosition = ComponentPositions | "left" | "right";
+export type ITDVariant = ComponentVariants | "default" | "filled" | "custom";
+export type ITDHorizontalPosition = ComponentXPositions | "left" | "right";
+export type ITDVerticalPosition = ComponentYPositions | "top" | "bottom";

package/dist/types/InputProps.d.ts

@@ -1,6 +1,6 @@
-import { FocusEvent, KeyboardEvent, MutableRefObject } from "react";
+import React, { FocusEvent, KeyboardEvent, MutableRefObject } from "react";
 import { ChildrenProps } from "./ChildrenProps";
-import { ITDSize } from "../index";
+import { ITDSize } from "./ITDProps";
 export declare enum InputTypes {
     TEXT = "text",
     NUMBER = "number",
@@ -9,13 +9,13 @@ export declare enum InputTypes {
 }
 export type InputType = `${InputTypes}`;
 export type InputVariant = "default" | "filled" | "dashed";
-export type InputProps = {
-    id?: string;
-    placeholder?: string;
-    value?: string;
-    defaultValue?: string;
+/**
+ * Input component props extending native HTML input attributes
+ * Omits conflicting props that have custom implementations
+ */
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'type' | 'children' | 'style'> & {
+    style?: React.CSSProperties;
     type?: InputType;
-    className?: string;
     size?: ITDSize;
     variant?: InputVariant;
     prefix?: ChildrenProps;
@@ -23,24 +23,19 @@ export type InputProps = {
     addonBefore?: ChildrenProps;
     addonAfter?: ChildrenProps;
     locked?: ChildrenProps | boolean;
-    status?: ChildrenProps;
     minValue?: number;
     maxValue?: number;
-    maxLength?: number;
-    disabled?: boolean;
-    floating?: boolean;
-    autoComplete?: boolean;
     keepFocus?: boolean;
-    focusRef?: null | MutableRefObject<HTMLDivElement>;
     mask?: null | string;
     allowEmptyFormatting?: null | boolean;
     allowLeadingZeros?: boolean;
     decimalSeparator?: string;
     thousandSeparator?: string;
     decimalScale?: number;
-    onChange?: ((value: any) => void) | null;
-    onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;
-    onFocus?: ((event: any) => void) | null;
+    focusRef?: null | MutableRefObject<HTMLDivElement>;
+    onChange?: ((value: string | number) => void) | null;
+    onUpdate?: ((value: string | number, update: boolean, validation: boolean) => void) | null;
+    onFocus?: ((event: FocusEvent<HTMLInputElement>) => void) | null;
     onBlur?: ((event: FocusEvent<HTMLInputElement>) => void) | null;
     onPressEnter?: ((event: KeyboardEvent) => void) | null;
     onKeyDown?: ((event: KeyboardEvent) => void) | null;

package/dist/types/LabelProps.d.ts

@@ -0,0 +1,7 @@
+import { ChildrenProps } from "./ChildrenProps";
+export type LabelProps = {
+    id?: string;
+    htmlFor?: string;
+    children?: ChildrenProps;
+    className?: string;
+};

package/dist/types/PopoverProps.d.ts

@@ -0,0 +1,10 @@
+import { ComponentXPositions, ComponentYPositions } from "enums/enum";
+import { ChildrenProps } from "./ChildrenProps";
+export type PopoverProps = {
+    children: ChildrenProps;
+    content: ChildrenProps | ((placement: ComponentYPositions | ComponentXPositions) => ChildrenProps);
+    offset?: number;
+    placement?: ComponentYPositions | ComponentXPositions;
+    maxWidth?: number;
+    showArrow?: boolean;
+};

package/dist/types/RadioProps.d.ts

@@ -15,7 +15,6 @@ export type RadioGroupProps = {
     length?: number;
     onlyFlow?: boolean;
     autoSize?: boolean;
-    disabled?: boolean;
     buttonProps?: ButtonProps;
     onChange?: (value: string) => void;
     onUpdate?: (value: string, update: boolean, validation: boolean) => void;
@@ -28,8 +27,8 @@ export type RadioButtonProps = {
     type?: RadioType;
     checked?: boolean;
     hasError?: boolean;
+    className?: string;
     children?: React.ReactNode;
-    disabled?: boolean;
     buttonProps?: ButtonProps;
     icon?: string | null;
     image?: string | null;

package/dist/types/ResultProps.d.ts

@@ -3,6 +3,7 @@ export type ResultProps = {
     image: string | ChildrenProps;
     title: string;
     description: string;
+    className?: string;
     type?: string;
     extra?: ChildrenProps | null;
     footer?: ChildrenProps | null;

package/dist/types/SelectProps.d.ts

@@ -1,26 +1,25 @@
 import { CSSProperties } from "react";
 import { ITDSize } from "../index";
 import { ChildrenProps } from "./ChildrenProps";
+import { ITDHorizontalPosition, ITDVariant, ITDVerticalPosition } from "./ITDProps";
 export type SelectProps = {
     id?: string;
     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;
@@ -29,23 +28,19 @@ export type SelectProps = {
 export 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;
 };
@@ -58,7 +53,18 @@ export type SelectOptionProps = {
     disabled?: boolean;
     searchText?: string;
 };
+export type SelectorInputProps = {
+    id?: string;
+    label?: string | number | ChildrenProps;
+    placeholder?: string;
+    size: string;
+    isOpen: boolean;
+    showSearch: boolean;
+    disabled: boolean;
+    errorMessage?: string;
+    activeOptionId?: string;
+    onFocus: () => void;
+    onFilter: (value: string) => void;
+    onShow: (value: boolean) => void;
+};
 export type SelectValue = string | number | (string | number)[];
-export type SelectVariant = "default" | "solid" | "filled" | "outline" | "custom";
-export type SelectPosition = "top" | "bottom";
-export type SelectDirection = "right" | "left";

package/dist/types/SwitchProps.d.ts

@@ -1,10 +1,13 @@
+import { ChildrenProps } from "./ChildrenProps";
+import { ITDVariant } from "./ITDProps";
 export 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;
 };

package/dist/types/TableProps.d.ts

@@ -14,6 +14,7 @@ export type TableProps<T extends TableRow> = {
     columns: TableColumnType<T>[];
     data: T[] | null;
     cellHeight?: number | string;
+    className?: string;
     size?: ITDSize;
     headless?: boolean;
     bordered?: boolean;

package/dist/types/TabsProps.d.ts

@@ -1,16 +1,22 @@
+import { ReactNode } from "react";
 import { ChildrenProps } from "./ChildrenProps";
 export type TabsItemProps = {
     key: string;
     tab: string;
+    icon?: ReactNode;
+    disabled?: boolean;
     children?: ChildrenProps;
     link?: string;
 };
+export type TabsVariant = "default" | "filled" | "line";
+export type TabsOrientation = "horizontal" | "vertical";
 export type TabsProps = {
     activeTabKey?: string;
     tabs?: TabsItemProps[];
     onTabChange?: (key: string) => void;
-    variant?: "default" | "bold";
+    variant?: TabsVariant;
+    orientation?: TabsOrientation;
     height?: number;
-    overflow?: boolean;
+    fill?: boolean;
     className?: string;
 };

package/dist/types/TextAreaProps.d.ts

@@ -12,6 +12,7 @@ export type TextAreaProps = {
     rows?: number;
     maxLength?: number;
     disabled?: boolean;
+    locked?: boolean;
     showCount?: boolean;
     onChange?: ((event: TextAreaEvent) => void);
     onUpdate?: ((value: any, update: any, validation: boolean) => void) | null;