gd-design-library 0.0.1

package/README.md

@@ -0,0 +1,201 @@
+# GD Design System
+
+Welcome to the GD Design System project!
+This design system is built using React and Vite, and it aims to provide a comprehensive set of reusable components and styles for Grid Dynamics.
+
+## Project Structure
+
+The project structure is as follows:
+gd-design-system/
+
+```
+├── dist
+├── [src](src)
+│ ├── App.css
+│ ├── App.tsx
+│ ├── assets
+│ │ └── index.ts
+│ ├── [components](src/components)
+│ │ ├── [core](src/components/core)
+│ │ │ ├── [types](src/components/core/types)
+│ │ │ │ ├── common.ts
+│ │ │ │ ├── cursors.ts
+│ │ │ │ └── index.ts
+│ │ │ ├── [Button](src/components/core/Button)
+│ │ │ │ ├── index.ts
+│ │ │ │ ├── constants.ts
+│ │ │ │ ├── Button.stories.tsx
+│ │ │ │ ├── Button.test.tsx
+│ │ │ │ ├── Button.types.ts
+│ │ │ │ ├── Button.tsx
+│ │ │ │ └── StyledButton.ts
+│ │ │ ├── [Input](src/components/core/Input)
+│ │ │ │ ├── index.ts
+│ │ │ │ ├── constants.ts
+│ │ │ │ ├── Input.stories.tsx
+│ │ │ │ ├── Input.test.tsx
+│ │ │ │ ├── Input.types.ts
+│ │ │ │ ├── input.tsx
+│ │ │ │ └── StyledInput.ts
+│ │ │ ├── [Label](src/components/core/Label)
+│ │ │ │ ├── index.ts
+│ │ │ │ ├── constants.ts
+│ │ │ │ ├── Label.stories.tsx
+│ │ │ │ ├── Label.test.tsx
+│ │ │ │ ├── Label.types.ts
+│ │ │ │ ├── Label.tsx
+│ │ │ │ └── StyledLabel.ts
+│ │ │ ├── [Form](src/components/core/Form)
+│ │ │ │ ├── index.ts
+│ │ │ │ ├── constants.ts
+│ │ │ │ ├── utils.ts
+│ │ │ │ ├── Form.stories.tsx
+│ │ │ │ ├── Form.test.tsx
+│ │ │ │ ├── Form.types.ts
+│ │ │ │ ├── Form.tsx
+│ │ │ │ └── StyledForm.ts
+│ │ │ ├── [Typography](src/components/core/Typography)
+│ │ │ │ ├── index.ts
+│ │ │ │ ├── constants.ts
+│ │ │ │ ├── Typography.stories.tsx
+│ │ │ │ ├── Typography.test.tsx
+│ │ │ │ ├── Typography.types.ts
+│ │ │ │ ├── Typography.tsx
+│ │ │ │ └── StyledTypography.ts
+│ │ │ └── index.ts
+│ │ ├── [domainSpecific](src/components/domainSpecific)
+│ │ │ └── index.ts
+│ │ └── index.ts
+│ ├── [hooks](src/hooks)
+│ │ └── [useTheme](src/hooks/useTheme)
+│ │   ├── index.ts
+│ │   ├── types.ts
+│ │   └── useTheme.ts
+│ ├── index.css
+│ ├── main.tsx
+│ ├── [tokens](src/tokens)
+│ │ ├── borders.ts
+│ │ ├── button.ts
+│ │ ├── colors.ts
+│ │ ├── defaultTheme.ts
+│ │ ├── index.ts
+│ │ ├── utils.ts
+│ │ ├── spacing.ts
+│ │ ├── typography.ts
+│ │ └── values.ts
+│ ├── [utils](src/utils)
+│ │ └── index.ts
+│ └── vite-env.d.ts
+├── tsconfig.app.json
+├── tsconfig.json
+├── tsconfig.node.json
+|── vite.config.ts
+├── eslint.config.js
+├── index.html
+├── package-lock.json
+├── package.json
+└── README.md
+```
+
+## Getting Started
+
+### Prerequisites
+
+Make sure you have the following installed:
+
+- Node.js (version 18 or higher)
+- npm (version 6 or higher) or yarn
+
+### Installation
+
+Clone the repository and install the dependencies:
+
+```sh
+git clone https://github.com/griddynamics/cto-rnd-system-design.git
+cd gd-design-system
+npm install
+```
+
+### Development
+
+To start the development server, run:
+
+```sh
+npm run dev
+```
+
+This will start the Vite development server and open the project in your default web browser.
+
+### Building
+
+To build the project for production, run:
+
+```sh
+npm run build
+```
+
+The output will be generated in the dist directory.
+
+### Linting & Prettier
+
+To lint the project, run:
+
+```sh
+npm run lint
+```
+
+### Code Formatting with Prettier
+
+To lint the project, run:
+
+```sh
+yarn format
+```
+
+Check for formatting issues:
+
+```sh
+yarn format:check
+```
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+});
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react';
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+});
+```

package/assets/icons/arrow-forward.d.ts

@@ -0,0 +1,6 @@
+export declare const ArrowForwardIcon: ({ width, height, fillSvg, fill, }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/check.d.ts

@@ -0,0 +1,6 @@
+export declare const CheckIcon: ({ width, height, fillSvg, fill, }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/chevron-right.d.ts

@@ -0,0 +1,6 @@
+export declare const ChevronRightIcon: ({ width, height, fillSvg, fill, }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/cross.d.ts

@@ -0,0 +1,6 @@
+export declare const CrossIcon: ({ width, height, fillSvg, fill, }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/dot.d.ts

@@ -0,0 +1,6 @@
+export declare const DotIcon: ({ width, height, fillSvg, fill }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/home.d.ts

@@ -0,0 +1,6 @@
+export declare const HomeIcon: ({ width, height, fillSvg, fill }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/slash.d.ts

@@ -0,0 +1,6 @@
+export declare const SlashIcon: ({ width, height, fillSvg, fill, }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/star.d.ts

@@ -0,0 +1,5 @@
+export declare const StarIcon: ({ width, height, fill }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    fill?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/toast_error.d.ts

@@ -0,0 +1,5 @@
+export declare const ToastErrorIcon: ({ width, height, color }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    color?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/toast_info.d.ts

@@ -0,0 +1,5 @@
+export declare const ToastInfoIcon: ({ width, height, color }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    color?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/toast_success.d.ts

@@ -0,0 +1,5 @@
+export declare const ToastSuccessIcon: ({ width, height, color }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    color?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/icons/toast_warning.d.ts

@@ -0,0 +1,5 @@
+export declare const ToastWarningIcon: ({ width, height, color }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    color?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/assets/index.d.ts

@@ -0,0 +1,83 @@
+import { StarIcon } from './icons/star';
+import { CrossIcon } from './icons/cross';
+import { ToastSuccessIcon } from './icons/toast_success';
+import { ToastWarningIcon } from './icons/toast_warning';
+import { ToastErrorIcon } from './icons/toast_error';
+import { ToastInfoIcon } from './icons/toast_info';
+import { DotIcon } from './icons/dot';
+import { CheckIcon } from './icons/check';
+import { HomeIcon } from './icons/home';
+import { ChevronRightIcon } from './icons/chevron-right';
+import { SlashIcon } from './icons/slash';
+import { ArrowForwardIcon } from './icons/arrow-forward';
+export { StarIcon, CrossIcon, ToastSuccessIcon, ToastWarningIcon, ToastErrorIcon, ToastInfoIcon, DotIcon, CheckIcon, HomeIcon, ChevronRightIcon, SlashIcon, ArrowForwardIcon, };
+declare const _default: {
+    cross: ({ width, height, fillSvg, fill, }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    success: ({ width, height, color }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        color?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    star: ({ width, height, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fill?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    error: ({ width, height, color }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        color?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    warning: ({ width, height, color }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        color?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    info: ({ width, height, color }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        color?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    dot: ({ width, height, fillSvg, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    check: ({ width, height, fillSvg, fill, }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    home: ({ width, height, fillSvg, fill }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    chevronRight: ({ width, height, fillSvg, fill, }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    slash: ({ width, height, fillSvg, fill, }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    arrowForward: ({ width, height, fillSvg, fill, }: {
+        width?: number | undefined;
+        height?: number | undefined;
+        fillSvg?: string | undefined;
+        fill?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;

package/components/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,2 @@
+import { BreadcrumbsProps } from './Breadcrumbs.types';
+export declare const Breadcrumbs: import('react').ForwardRefExoticComponent<BreadcrumbsProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/core/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CommonCoreComponentProps, CommonStyledComponentProps } from '../..';
+export interface BreadcrumbsProps extends Exclude<CommonCoreComponentProps, 'variant' | 'color'> {
+    separator?: ReactNode;
+    itemStart?: ReactNode;
+    itemEnd?: ReactNode;
+    separatorAfterLastItem?: boolean;
+    bordered?: boolean;
+    items?: (never | ReactNode)[];
+    ariaLabel?: string;
+}
+export interface StyledBreadcrumbsProps extends CommonStyledComponentProps {
+    $bordered?: boolean;
+}

package/components/core/Breadcrumbs/StyledBreadcrumbs.d.ts

@@ -0,0 +1,6 @@
+import { StyledBreadcrumbsProps } from './Breadcrumbs.types';
+export declare const StyledBreadcrumbs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBreadcrumbsProps>> & string;
+export declare const StyledBreadcrumbItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBreadcrumbsProps>> & string;
+export declare const StyledSeparator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBreadcrumbsProps>> & string;
+export declare const StyledItemStart: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBreadcrumbsProps>> & string;
+export declare const StyledItemEnd: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledBreadcrumbsProps>> & string;

package/components/core/Breadcrumbs/constants.d.ts

@@ -0,0 +1 @@
+export declare const COMPONENT_NAME = "Breadcrumbs";

package/components/core/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Breadcrumbs';
+export * from './Breadcrumbs.types';

package/components/core/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from './Button.types';
+declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export default Button;

package/components/core/Button/Button.types.d.ts

@@ -0,0 +1,52 @@
+import { MouseEvent, ReactNode } from 'react';
+import { CommonCoreComponentProps, CommonCoreStyledComponentProps } from '../..';
+import { TabIndex } from '../../../types';
+export declare enum ButtonVariant {
+    Contained = "contained",
+    Outlined = "outlined",
+    Text = "text",
+    Inherit = "inherit"
+}
+export declare enum ButtonColorVariant {
+    Primary = "primary",
+    Secondary = "secondary"
+}
+export declare enum IconPosition {
+    Left = "left",
+    Right = "right"
+}
+export declare enum ButtonTypes {
+    Button = "button",
+    Submit = "submit",
+    Reset = "reset"
+}
+export declare enum ButtonAriaLabel {
+    Button = "Button",
+    Submit = "Submit",
+    Cancel = "Cancel",
+    Close = "Close"
+}
+export declare enum ButtonRole {
+    Button = "button",
+    Link = "link",
+    Checkbox = "checkbox",
+    Switch = "switch",
+    Tab = "tab"
+}
+export interface ButtonProps extends CommonCoreComponentProps<ButtonVariant, ButtonColorVariant> {
+    iconStart?: ReactNode;
+    iconEnd?: ReactNode;
+    iconPosition?: IconPosition;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    type?: ButtonTypes | `${ButtonTypes}`;
+    disabled?: boolean;
+    isIcon?: boolean;
+    ariaLabel?: ButtonAriaLabel | `${ButtonAriaLabel}`;
+    ariaPressed?: boolean;
+    role?: ButtonRole | `${ButtonRole}`;
+    tabIndex?: TabIndex;
+    children: ReactNode;
+}
+export interface StyledButtonProps extends CommonCoreStyledComponentProps<ButtonVariant, ButtonColorVariant> {
+    $isIcon?: boolean;
+}

package/components/core/Button/StyledButton.d.ts

@@ -0,0 +1,5 @@
+import { StyledButtonProps } from './Button.types';
+export declare const StyledButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;
+export declare const StyledContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledButtonProps>> & string;
+export declare const StyledStartIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledButtonProps>> & string;
+export declare const StyledEndIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledButtonProps>> & string;

package/components/core/Button/constants.d.ts

@@ -0,0 +1 @@
+export declare const COMPONENT_NAME = "Button";

package/components/core/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export * from './Button.types';

package/components/core/Form/Form.d.ts

@@ -0,0 +1,5 @@
+import { FormProps } from '.';
+declare const Form: import('react').ForwardRefExoticComponent<FormProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLFormElement>>;
+export default Form;

package/components/core/Form/Form.types.d.ts

@@ -0,0 +1,24 @@
+import { FormEvent } from 'react';
+import { CommonCoreComponentProps } from '../..';
+export type FormFieldValue = string | number | boolean;
+export type FormFieldsData = Record<string, {
+    value: FormFieldValue;
+    isChecked?: boolean;
+}>;
+export type FormOnChangeEventData = {
+    event: FormEvent<Element>;
+    changedControlNames: string[];
+    controlValues: FormFieldsData;
+    formData: FormFieldsData;
+};
+export type FormOnSubmitEventData = {
+    event: FormEvent<Element>;
+    formData: FormFieldsData;
+};
+export interface FormProps extends CommonCoreComponentProps {
+    onSubmit?: (formOnSubmitEventData: FormOnSubmitEventData) => void;
+    onChange?: (formOnChangeEventData: FormOnChangeEventData) => void;
+    ariaLabelBy?: string;
+    describedBy?: string;
+    role?: string;
+}

package/components/core/Form/StyledForm.d.ts

@@ -0,0 +1,2 @@
+import { CommonCoreStyledComponentProps } from '../..';
+export declare const StyledForm: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, CommonCoreStyledComponentProps<never, never>>> & string;

package/components/core/Form/constants.d.ts

@@ -0,0 +1 @@
+export declare const COMPONENT_NAME = "Form";

package/components/core/Form/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Form } from './Form';
+export * from './Form.types';

package/components/core/Form/utils.d.ts

@@ -0,0 +1,3 @@
+import { FormFieldsData } from './';
+export declare const transformFormDataToObjectWithValues: (targetForm?: HTMLFormElement) => FormFieldsData;
+export declare const transformFormElementDataToObjectWithValues: (targetElement: EventTarget, output?: FormFieldsData) => FormFieldsData;

package/components/core/Icon/Icon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from './Icon.types';
+export declare const Icon: {
+    (props: IconProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/components/core/Icon/Icon.types.d.ts

@@ -0,0 +1,8 @@
+import { default as IconsList } from '../../../assets';
+export interface IconProps {
+    name: keyof typeof IconsList;
+    width?: number;
+    height?: number;
+    fill?: string;
+    fillSvg?: string;
+}

package/components/core/Icon/constants.d.ts

@@ -0,0 +1 @@
+export declare const COMPONENT_NAME = "CustomIcon";

package/components/core/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Icon';
+export * from './Icon.types';

package/components/core/Input/Input.d.ts

@@ -0,0 +1,3 @@
+import { InputFieldProps } from './';
+declare const Input: import('react').ForwardRefExoticComponent<InputFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Input;

package/components/core/Input/Input.types.d.ts

@@ -0,0 +1,68 @@
+import { ChangeEvent, FocusEvent, MouseEvent } from 'react';
+import { CommonCoreComponentProps, CommonCoreStyledComponentProps } from '../..';
+import { EnumOrPrimitive } from '../../../types';
+export declare enum InputVariantType {
+    Text = "text",
+    Password = "password",
+    Email = "email",
+    Search = "search",
+    Url = "url",
+    Tel = "tel",
+    Date = "date",
+    Time = "time",
+    Month = "month",
+    Week = "week",
+    Color = "color",
+    Range = "range",
+    Number = "number",
+    Radio = "radio",
+    Checkbox = "checkbox"
+}
+export declare enum InputColorVariant {
+    Default = "default",
+    Primary = "primary",
+    Secondary = "secondary",
+    Error = "error",
+    Info = "info",
+    Success = "success",
+    Warning = "warning"
+}
+export declare enum InputRole {
+    Textbox = "textbox",
+    Checkbox = "checkbox",
+    Radio = "radio"
+}
+export interface BaseInputFieldProps extends CommonCoreComponentProps<InputVariantType, InputColorVariant> {
+    readOnly?: boolean;
+    id?: string;
+    name?: string;
+    type?: EnumOrPrimitive<InputVariantType>;
+    label?: string;
+    placeholder?: string;
+    value?: string | number;
+    defaultValue?: string | number;
+    onClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    required?: boolean;
+    ariaRequired?: boolean;
+    ariaDescribedBy?: string;
+    role?: EnumOrPrimitive<InputRole>;
+    tabIndex?: number;
+    debounceCallbackTime?: number;
+}
+export interface RadioButtonProps extends Omit<BaseInputFieldProps, 'type'> {
+    type: InputVariantType.Radio;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    value: string | number;
+}
+export interface CheckboxFieldProps extends Omit<BaseInputFieldProps, 'type' | 'value'> {
+    type: InputVariantType;
+    checked?: boolean;
+    defaultChecked?: boolean;
+}
+export type InputFieldProps = BaseInputFieldProps | RadioButtonProps | CheckboxFieldProps;
+export type StyledInputProps = CommonCoreStyledComponentProps<InputVariantType, InputColorVariant>;

package/components/core/Input/StyledInput.d.ts

@@ -0,0 +1,3 @@
+import { StyledInputProps } from '.';
+declare const StyledInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputProps>> & string;
+export default StyledInput;

package/components/core/Input/constants.d.ts

@@ -0,0 +1 @@
+export declare const COMPONENT_NAME = "Input";

package/components/core/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Input } from './Input';
+export * from './Input.types';

package/components/core/Label/Label.d.ts

@@ -0,0 +1,5 @@
+import { LabelProps } from './';
+declare const Label: import('react').ForwardRefExoticComponent<LabelProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLLabelElement>>;
+export default Label;