armtek-uikit-react 1.0.15 → 1.0.16

package/esm/assets/global.css

@@ -0,0 +1,72 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:wght@400;500;700&display=swap');
+
+body{
+    font-family: 'Roboto';
+}
+
+::-webkit-scrollbar {
+    width: 4px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #DFE2E6;
+    border-radius: 0px;
+}
+* {
+    box-sizing: border-box;
+}
+
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v133/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
+}
+
+/* fallback */
+@font-face {
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-weight: 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v134/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1p-p_4MrImHCIJIZrDBIG-ej.woff2) format('woff2');
+}
+
+.text_error{
+    color: #CC2935;
+}
+.text_success{
+    color: #0BD998;
+}
+.material_icon {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+.material_icon_solid{
+    font-family: 'Material Symbols Outlined';
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    font-weight: 700;
+}

package/esm/assets/styles.scss

@@ -0,0 +1,31 @@
+//@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+//@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+@import "variables";
+@import "Button";
+@import "Adornment";
+@import "Alert";
+@import "Badge";
+@import "Card";
+@import "Avatar";
+@import "AvatarGroup";
+@import "Chip";
+@import "HelperText";
+@import "ListItem";
+@import "Loader";
+@import "Logo";
+@import "Slider";
+@import "Status";
+@import "StepItem";
+@import "StepItemIcon";
+@import "Stepper";
+@import "Tooltip";
+@import "Checkbox";
+@import "DatePicker";
+@import "Interval";
+@import "Period";
+@import "Rating";
+@import "Select";
+@import "Switch";
+@import "TextArea";
+@import "TextField";

package/esm/assets/variables.scss

@@ -0,0 +1,67 @@
+
+
+$font-family: 'Roboto';
+
+
+$size-elarge: 56px;
+$size-large: 42px;
+$size-medium: 36px;
+$size-small: 30px;
+$size-step: 8px;
+
+$radius: 4px;
+
+$color-primary: #0D46FF;
+$color-primary-dark: #0B3CD9;
+$color-primary-light: #0B3CD9;
+$color-blue-800: #406DFF;
+$color-blue-A100: #D9E2FF;
+$color-blue-50: #F2F5FF;
+
+$color-info: #0D46FF;
+$color-info-dark: #0B3CD9;
+
+$color-secondary: #FF7F00;
+$color-secondary-dark: #D96C00;
+$color-secondary-light: #FFA140;
+$color-orange-800: #FF9426;
+$color-orange-400: #FFC68C;
+$color-orange-300: #FFD3A6;
+$color-orange-100: #FFE6CC;
+$color-orange-50: #FFF8F0;
+
+$color-neutral: #4D5359;
+$color-neutral-dark: #40454A;
+$color-neutral-light: #9AA4AE;
+$color-gray-900: #212529;
+$color-gray-800: #40454A;
+$color-gray-700: #4D5359;
+$color-gray-600: #6C757D;
+$color-gray-500: #9AA4AE;
+$color-gray-400: #B1BCC6;
+$color-gray-300: #D3DAE1;
+$color-gray-200: #DFE2E6;
+$color-gray-100: #E9ECEF;
+$color-gray-50: #F8F9FA;
+
+$color-greent-50: #F2FFFB;
+
+$color-success: #0BD998;
+$color-success-dark: #08996B;
+$color-error: #FF3342;
+$color-error-dark: #CC2935;
+$color-warning: #FFC61A;
+$color-warning-dark: #F7B519;
+
+$color-red-50: #FFF0F1;
+
+$box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
+
+@mixin transition($time: 0.5s, $target: all, $animation: ease) {
+  transition: $time $target $animation;
+}
+@mixin flex($justifyContent: flex-start, $alignItems: center) {
+  display: flex;
+  align-items: $alignItems;
+  justify-content: $justifyContent;
+}

package/esm/index.d.ts

@@ -0,0 +1,29 @@
+export { default as Button } from './ui/Button';
+export { default as ButtonIcon } from './ui/ButtonIcon';
+export type { ButtonProps } from './ui/Button';
+export { default as Alert } from './ui/Alert/Alert';
+export type { AlertProps } from './ui/Alert/Alert';
+export { default as Avatar } from './ui/Avatar/Avatar';
+export type { AvatarProps } from './ui/Avatar/Avatar';
+export { default as AvatarGroup } from './ui/Avatar/AvatarGroup';
+export type { AvatarGroupProps } from './ui/Avatar/AvatarGroup';
+export { default as Badge } from './ui/Badge/Badge';
+export type { BadgeProps } from './ui/Badge/Badge';
+export { default as Card } from './ui/Card/Card';
+export type { CardProps } from './ui/Card/Card';
+export { default as Chip } from './ui/Chip/Chip';
+export type { ChipProps } from './ui/Chip/Chip';
+export { default as ListItem } from './ui/List/ListItem';
+export type { ListItemProps } from './ui/List/ListItem';
+export { default as Loader } from './ui/Loader/Loader';
+export type { LoaderProps } from './ui/Loader/Loader';
+export { default as Logo } from './ui/Logo/Logo';
+export type { LogoProps } from './ui/Logo/Logo';
+export { default as Slider } from './ui/Slider/Slider';
+export type { SliderProps } from './ui/Slider/Slider';
+export { default as Status } from './ui/Status/Status';
+export type { StatusProps } from './ui/Status/Status';
+export { default as Stepper } from './ui/Stepper/Stepper';
+export type { StepperProps } from './ui/Stepper/Stepper';
+export { default as Tooltip } from './ui/Tooltip/Tooltip';
+export type { TooltipProps } from './ui/Tooltip/Tooltip';

package/esm/lib/const/styles.d.ts

@@ -0,0 +1 @@
+export declare const CSS_PREFIX = "Armtek-";

package/esm/lib/helpers/helpers.d.ts

@@ -0,0 +1,6 @@
+import { ColorStatusType, ColorType, SizeType, VariantType } from '../../types/theme';
+export declare const getVariants: (except?: string[]) => Record<VariantType, string>;
+export declare const getColors: () => Record<ColorType, string>;
+export declare const getStatusColors: () => Record<ColorStatusType, string>;
+export declare const getSizes: (except?: string[]) => Record<SizeType, string>;
+export declare const getCssPrefix: (classes: string[]) => Record<string, string>;

package/esm/lib/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useClickOutside: (callback: () => void) => MutableRefObject<any>;
+export default useClickOutside;

package/esm/lib/services/DateService.d.ts

@@ -0,0 +1,12 @@
+declare class DateClass {
+    date: Date;
+    constructor(date: Date);
+    format(form: string): string;
+    static isValid(dateStr: string, format?: string): boolean;
+    static parseDate(dateStr: string, format?: string): Date | null;
+    static toDate(dateStr: string): Date | null;
+    static getDisplayValue(value: number): string;
+    private getStrMonth;
+}
+export declare const DateService: (date: Date) => DateClass;
+export default DateClass;

package/esm/types/theme.d.ts

@@ -0,0 +1,10 @@
+export type ShapeType = 'square' | 'circle';
+export type SizeType = 'small' | 'medium' | 'large' | 'extraLarge';
+export type VariantType = 'contained' | 'outlined' | 'transparent';
+export type ColorStatusType = 'success' | 'error' | 'warning' | 'info';
+export type ColorThemeType = 'black' | 'white';
+export type ColorType = 'primary' | 'secondary' | 'neutral';
+export type OptionType = {
+    text: string;
+    value?: string;
+};

package/esm/ui/Adornment/Adornment.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+type PropsType = {
+    position?: 'start' | 'end';
+} & HTMLAttributes<HTMLDivElement>;
+declare const Adornment: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+export declare const AdornmentContainer: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+export default Adornment;

package/esm/ui/Adornment/Adornment.module.scss

@@ -0,0 +1,2 @@
+@import "./../../assets/variables";
+@import "./../../assets/Adornment";

package/esm/ui/Alert/Alert.d.ts

@@ -0,0 +1,10 @@
+import { ColorStatusType } from '../../types/theme';
+import { HTMLAttributes, ReactNode } from 'react';
+export type AlertProps = {
+    status: ColorStatusType;
+    title: string;
+    children: ReactNode | string;
+    onClose?: () => void;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/esm/ui/Alert/Alert.module.scss

@@ -0,0 +1,2 @@
+@import "./../../assets/variables";
+@import "./../../assets/Alert";

package/esm/ui/Avatar/Avatar.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { ColorStatusType, SizeType } from '../../types/theme';
+export type AvatarProps = {
+    photo?: string;
+    name?: string;
+    href?: string;
+    linkProps?: HTMLAttributes<HTMLAnchorElement>;
+    icon?: string;
+    size?: Exclude<SizeType, 'extraLarge'>;
+    status?: Exclude<ColorStatusType, 'info'>;
+};
+declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/esm/ui/Avatar/Avatar.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Avatar";

package/esm/ui/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { AvatarProps } from './Avatar';
+export type AvatarGroupProps = {
+    limit?: number;
+    children: ReactNode;
+} & Pick<AvatarProps, 'size'>;
+declare const AvatarGroup: (props: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default AvatarGroup;

package/esm/ui/Avatar/AvatarGroup.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/AvatarGroup";

package/esm/ui/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import { ColorStatusType, ColorType, ShapeType } from '../../types/theme';
+import { ReactNode } from 'react';
+export type BadgeProps = {
+    color?: ColorType | ColorStatusType;
+    children: ReactNode | string;
+    shape?: ShapeType;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    badgeText?: string;
+};
+declare function Badge(props: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/esm/ui/Badge/Badge.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Badge";

package/esm/ui/Button/Button.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Button";

package/esm/ui/Button/index.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
+import { ColorThemeType, ColorType, SizeType, VariantType } from '../../types/theme';
+type OwnProps<T extends ElementType = ElementType> = {
+    children: ReactNode;
+    size?: SizeType;
+    color?: ColorType | Exclude<ColorThemeType, 'white'>;
+    variant?: VariantType;
+    startAdornment?: string | ReactNode;
+    endAdornment?: string | ReactNode;
+    group?: 'inline' | 'column';
+    as?: T;
+};
+export type ButtonProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps>;
+declare const Index: <T extends ElementType>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Index;

package/esm/ui/ButtonGroup/ButtonGroup.module.scss

@@ -0,0 +1,2 @@
+@import "./../../assets/ButtonGroup";
+

package/esm/ui/ButtonGroup/index.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+type PropsType = {
+    orientation?: 'column' | 'inline';
+} & HTMLAttributes<HTMLDivElement>;
+declare const ButtonGroup: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/esm/ui/ButtonIcon/ButtonIcon.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/ButtonIcon";

package/esm/ui/ButtonIcon/index.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '../Button';
+declare const ButtonIcon: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ButtonIcon;

package/esm/ui/Card/Card.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type CardProps = HTMLAttributes<HTMLDivElement>;
+declare const Card: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/esm/ui/Card/Card.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Card";

package/esm/ui/Chip/Chip.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef, ElementType, HTMLAttributes } from 'react';
+import { ColorType, SizeType, VariantType } from '../../types/theme';
+export type ChipProps<T extends ElementType = ElementType<HTMLAttributes<HTMLSpanElement>>> = Omit<ComponentPropsWithoutRef<T>, 'color'> & {
+    size?: Exclude<SizeType, 'large' | 'extraLarge'>;
+    color?: ColorType;
+    text?: string;
+    onClose?: () => void;
+    icon?: string;
+    variant?: Exclude<VariantType, 'transparent'>;
+    as?: T;
+};
+declare function Chip<T extends ElementType>(props: ChipProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Chip;

package/esm/ui/Chip/Chip.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Chip";

package/esm/ui/Form/Checkbox/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { ColorType, SizeType, VariantType } from '../../../types/theme';
+type BaseCheckboxPropsType = {
+    label?: string | ReactNode;
+    size?: Exclude<SizeType, 'extraLarge'>;
+    color?: ColorType;
+    variant?: Exclude<VariantType, 'transparent'>;
+    intermediate?: boolean;
+};
+export type CheckboxPropsType = BaseCheckboxPropsType & Omit<InputHTMLAttributes<any>, 'size'>;
+declare const Checkbox: (props: CheckboxPropsType) => import("react/jsx-runtime").JSX.Element;
+export default Checkbox;

package/esm/ui/Form/Checkbox/Checkbox.module.scss

@@ -0,0 +1 @@
+@import "../../../assets/Checkbox";

package/esm/ui/Form/Checkbox/Radio.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxPropsType } from './Checkbox';
+declare const Radio: (props: CheckboxPropsType) => import("react/jsx-runtime").JSX.Element;
+export default Radio;

package/esm/ui/Form/DateField/DateField.d.ts

@@ -0,0 +1,26 @@
+import { TextFieldProps } from '../TextField/TextField';
+import { ChangeEvent } from 'react';
+export type DateFieldProps = {
+    format?: string;
+    onInput?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (value: Date | null) => void;
+    showTime?: boolean;
+    showTimeOnly?: boolean;
+} & TextFieldProps;
+declare const DateField: import("react").ForwardRefExoticComponent<{
+    format?: string | undefined;
+    onInput?: ((e: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    onChange?: ((value: Date | null) => void) | undefined;
+    showTime?: boolean | undefined;
+    showTimeOnly?: boolean | undefined;
+} & {
+    label?: string | undefined;
+    size?: "large" | "small" | undefined;
+    variant?: import("../../../types/theme").VariantType | undefined;
+    error?: boolean | undefined;
+    success?: boolean | undefined;
+    helperText?: string | undefined;
+    endAdornment?: import("react").ReactNode;
+    multiline?: boolean | undefined;
+} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+export default DateField;

package/esm/ui/Form/DateField/DateField.module.scss

@@ -0,0 +1 @@
+ @import "../../../assets/styles";

package/esm/ui/Form/DateField/TimeField.d.ts

@@ -0,0 +1,3 @@
+import { DateFieldProps } from './DateField';
+declare const TimeField: (props: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default TimeField;

package/esm/ui/Form/DatePicker/DatePicker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ReactDatePickerProps } from 'react-datepicker';
+import '!style-loader!css-loader!./styles.css';
+declare const DatePicker: import("react").ForwardRefExoticComponent<{
+    selectsRange?: boolean | undefined;
+} & Omit<ReactDatePickerProps<never, boolean | undefined>, "selectsRange"> & import("react").RefAttributes<unknown>>;
+export default DatePicker;

package/esm/ui/Form/DatePicker/DatePicker.module.scss

@@ -0,0 +1 @@
+@import "../../../assets/DatePicker";

package/esm/ui/Form/DatePicker/PeriodSelect.d.ts

@@ -0,0 +1,2 @@
+declare const PeriodSelect: () => import("react/jsx-runtime").JSX.Element;
+export default PeriodSelect;

package/esm/ui/Form/DatePicker/TimePicker.d.ts

@@ -0,0 +1,2 @@
+declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;
+export default TimePicker;