kui-basic 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,660 @@
+import * as React$1 from 'react';
+import { HTMLInputTypeAttribute, SyntheticEvent } from 'react';
+
+type PrimaryColorsType = {
+  main: string
+  pressed: string
+  hover: string
+  light: string
+  light2: string
+}
+
+type SecondaryColorsType = {
+  main: string
+  gray60: string
+  gray50: string
+  gray40: string
+  gray30: string
+  gray15: string
+  white: string
+  light: string
+  disabled: string
+}
+
+type BackgroundColorsType = {
+  main: string
+  light2: string
+  light3: string
+}
+
+type SuccessColorsType = {
+  green70: string
+  green60: string
+  main: string
+  green10: string
+  green5: string
+}
+
+type ErrorColorsType = {
+  red70: string
+  red60: string
+  main: string
+  red10: string
+  red5: string
+}
+
+type InfoColorsType = {
+  blue70: string
+  blue60: string
+  main: string
+  blue10: string
+  blue5: string
+}
+
+type PurpleColorsType = {
+  purple70: string
+  purple60: string
+  main: string
+  purple10: string
+  purple5: string
+}
+
+type ColorsType = {
+  primary: PrimaryColorsType
+  secondary: SecondaryColorsType
+  background: BackgroundColorsType
+  success: SuccessColorsType
+  error: ErrorColorsType
+  info: InfoColorsType
+  purple: PurpleColorsType
+}
+
+type ShadowsType = {
+  shadow1: string
+  shadow2: string
+  shadow3: string
+  shadow4: string
+}
+
+type BreakpointsType = {
+  xxs: number
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+}
+
+type ThemeType = {
+  palette: ColorsType
+  shadows: ShadowsType
+  breakpoints: BreakpointsType
+}
+
+declare const theme: ThemeType
+
+type CaptionSizes = "xs" | "sm" | "s" | "m" | "l"
+
+type CaptionWeight = 400 | 500 | 600
+
+type CaptionColors =
+  | "main"
+  | "gray60"
+  | "gray50"
+  | "gray40"
+  | "white"
+  | "brand"
+
+interface CaptionProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLParagraphElement>,
+      HTMLParagraphElement
+    >,
+    React$1.AriaAttributes {
+  size?: CaptionSizes
+  weight?: CaptionWeight
+  color?: CaptionColors
+  uppercase?: boolean
+  disableUserSelect?: boolean
+  align?: "center" | "right" | "left"
+}
+
+type CaptionType = (props: CaptionProps) => React$1.ReactElement
+
+declare const Caption: CaptionType
+
+type ButtonThemes =
+  | "primary"
+  | "orange"
+  | "white"
+  | "whiteWithOrangeHover"
+  | "whiteWithBrand"
+  | "blur"
+  | "whiteWithGray"
+  | "grayLightWithBorder"
+  | "grayLight"
+  | "green"
+  | "red"
+  | "transparent"
+
+type ButtonSizes = "xs" | "s" | "m" | "l"
+
+type ButtonTypes = "button" | "submit"
+
+type ButtonBorder = "brand" | "lightGray" | "lightOrange"
+
+interface ButtonProps
+  extends React$1.DetailedHTMLProps<
+      React$1.ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    >,
+    React$1.AriaAttributes {
+  variant?: ButtonThemes
+  size?: ButtonSizes
+  type?: ButtonTypes
+  fullWidth?: boolean
+  endIcon?: React$1.ReactElement
+  startIcon?: React$1.ReactElement
+  disabled?: boolean
+  isCircle?: boolean
+  captionSize?: CaptionSizes
+  disabledStyle?: string
+  border?: ButtonBorder
+}
+
+type ButtonType = (props: ButtonProps) => React$1.ReactElement
+
+declare const Button: ButtonType
+
+interface CheckboxProps
+  extends React$1.DetailedHTMLProps<
+      React$1.InputHTMLAttributes<HTMLInputElement>,
+      HTMLInputElement
+    >,
+    React$1.AriaAttributes {
+  error?: any
+  label?: React$1.ReactElement | string
+  inputRef?: React$1.RefObject<HTMLInputElement>
+}
+
+type CheckboxType = (props: CheckboxProps) => React$1.ReactElement
+
+declare const Checkbox: CheckboxType
+
+interface DividerProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLHRElement>,
+      HTMLHRElement
+    >,
+    React$1.AriaAttributes {}
+
+type DividerType = (props: DividerProps) => React$1.ReactElement
+
+declare const Divider: DividerType
+
+type HeadingSizes = "hero" | "h1" | "h2" | "h3" | "h4"
+
+type HeadingColors =
+  | "main"
+  | "gray60"
+  | "gray50"
+  | "gray40"
+  | "white"
+  | "brand"
+
+interface HeadingProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLElement>,
+      HTMLElement
+    >,
+    React$1.AriaAttributes {
+  size?: HeadingSizes
+  uppercase?: boolean
+  disableUserSelect?: boolean
+  color?: HeadingColors
+  align?: "center" | "right" | "left"
+}
+
+type HeadingType = (props: HeadingProps) => React$1.ReactElement
+
+declare const Heading: HeadingType
+
+interface InputProps
+  extends React$1.DetailedHTMLProps<
+      React$1.InputHTMLAttributes<HTMLInputElement>,
+      HTMLInputElement
+    >,
+    React$1.AriaAttributes {
+  isTextArea?: boolean
+  inputRef?: React$1.RefObject<HTMLInputElement>
+  inputStyles?: string
+  labelStyles?: string
+  label?: string
+  startIcon?: string | React$1.ReactElement
+  endIcon?: string | React$1.ReactElement
+  messageClassName?: string
+  labelInlineStyles?: string
+  errorMessage?: string
+  inputValue?: string | number | undefined
+  type?: HTMLInputTypeAttribute
+}
+
+type InputType = (props: InputProps) => React$1.ReactElement
+
+declare const Input: InputType
+
+interface InputFileProps
+  extends React$1.DetailedHTMLProps<
+      React$1.InputHTMLAttributes<HTMLInputElement>,
+      HTMLInputElement
+    >,
+    React$1.AriaAttributes {
+  label?: string
+  name?: string
+}
+
+type InputFileType = (props: InputFileProps) => React$1.ReactElement
+
+declare const InputFile: InputFileType
+
+type InputMessageVariant = "error" | "warning" | "success"
+
+interface InputMessageProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    React$1.AriaAttributes {
+  msg?: string
+  variant?: InputMessageVariant
+}
+
+type InputMessageType = (props: InputMessageProps) => React$1.ReactElement
+
+declare const InputMessage: InputMessageType
+
+interface InputWithAdornmentsProps extends InputProps {
+  cornerLabel?: string
+}
+
+type InputWithAdornmentsType = (
+  props: InputWithAdornmentsProps
+) => React$1.ReactElement
+
+declare const InputWithAdornments: InputWithAdornmentsType
+
+type CountryItem = {
+  name: string
+  nameCode: string
+  nameRus: string
+  phoneCode: string
+  mask: string
+}
+
+interface InputWithCountryDropdownProps
+  extends InputWithAdornmentsProps {
+  onSelectCountry?: (country: CountryItem) => void
+  hiddenInputProps?: React$1.DetailedHTMLProps<
+    React$1.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  >
+}
+
+type InputWithCountryDropdownType = (
+  props: InputWithCountryDropdownProps
+) => React$1.ReactElement
+
+declare const InputWithCountryDropdown: InputWithCountryDropdownType
+
+interface InputWithMaskProps extends InputWithAdornmentsProps {
+  mask?: string
+  defaultValue?: string | number | undefined
+}
+
+type InputWithMaskType = (
+  props: InputWithMaskProps
+) => React.ReactElement
+
+declare const InputWithMask: InputWithMaskType
+
+type ModalSizes = "small" | "large"
+
+interface ModalProps
+  extends React$1.DetailedHTMLProps<
+    React$1.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  isOpen?: boolean
+  handleClose?: () => void
+  title?: string
+  isHasHeader?: boolean
+  headerStyles?: string
+  classNameContent?: string
+  classNameClose?: string
+  size?: ModalSizes
+}
+
+type ModalType = (props: ModalProps) => React$1.ReactElement
+
+declare const Modal: ModalType
+
+interface RadioProps
+  extends React$1.DetailedHTMLProps<
+      React$1.InputHTMLAttributes<HTMLInputElement>,
+      HTMLInputElement
+    >,
+    React$1.AriaAttributes {
+  label?: React$1.ReactElement | string
+  inputRef?: React$1.RefObject<HTMLInputElement>
+}
+
+type RadioType = (props: RadioProps) => React$1.ReactElement
+
+declare const Radio: RadioType
+
+type SwitchSizes = "s" | "m" | "l"
+
+// @ts-ignore
+interface SwitchProps
+  extends React$1.DetailedHTMLProps<
+      React$1.InputHTMLAttributes<HTMLInputElement>,
+      HTMLInputElement
+    >,
+    React$1.AriaAttributes {
+  error?: any
+  label?: React$1.ReactElement | string
+  inputRef?: React$1.RefObject<HTMLInputElement>
+  size?: SwitchSizes
+}
+
+type SwitchType = (props: SwitchProps) => React$1.ReactElement
+
+declare const Switch: SwitchType
+
+type TextSizes = "xs" | "s" | "m"
+
+type TextWeight = 400 | 500 | 600
+
+type TextColors =
+  | "main"
+  | "gray60"
+  | "gray50"
+  | "gray40"
+  | "white"
+  | "brand"
+
+interface TextProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLParagraphElement>,
+      HTMLParagraphElement
+    >,
+    React$1.AriaAttributes {
+  size?: TextSizes
+  weight?: TextWeight
+  color?: TextColors
+  uppercase?: boolean
+  disableUserSelect?: boolean
+}
+
+type TextType = (props: TextProps) => React$1.ReactElement
+
+declare const Text: TextType
+
+type ContainerType = (
+  props: React$1.DetailedHTMLProps<
+    React$1.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+) => React$1.ReactElement
+
+declare const Container: ContainerType
+
+type GridJustify = "center" | "flex-start" | "flex-end" | "space-between"
+
+type GridAlignItems = "center" | "flex-start" | "flex-end"
+
+type GridDirections = "column" | "row"
+
+type GridSizing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+interface GridProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    React$1.AriaAttributes {
+  spacing?: GridSizing
+  item?: boolean
+  container?: boolean
+  justify?: GridJustify
+  alignItems?: GridAlignItems
+  alignContent?: GridAlignItems
+  direction?: GridDirections
+  xs?: GridSizing
+  sm?: GridSizing
+  md?: GridSizing
+  lg?: GridSizing
+  xl?: GridSizing
+}
+
+type GridType = (props: GridProps) => React$1.ReactElement
+
+declare const Grid: GridType
+
+type BoxSizing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+interface BoxProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    React$1.AriaAttributes {
+  mt?: BoxSizing
+  mr?: BoxSizing
+  ml?: BoxSizing
+  mb?: BoxSizing
+  pt?: BoxSizing
+  pr?: BoxSizing
+  pl?: BoxSizing
+  pb?: BoxSizing
+}
+
+type BoxType = (props: BoxProps) => React$1.ReactElement
+
+declare const Box: BoxType
+
+type AccordionType = (
+  props: React$1.DetailedHTMLProps<
+    React$1.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+) => React$1.ReactElement
+
+declare const Accordion: AccordionType
+
+interface AccordionSummaryProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    React$1.AriaAttributes {
+  detailsBlock?: React$1.RefObject<HTMLDivElement>
+  expandIcon?: React$1.ReactElement | React$1.ReactElement[] | string
+  contentStyles?: string
+  expandedStyles?: string
+  iconStyles?: string
+}
+
+type AccordionSummaryType = (
+  props: AccordionSummaryProps
+) => React$1.ReactElement
+
+declare const AccordionSummary: AccordionSummaryType
+
+type AccordionDetailsType = (
+  props: React$1.DetailedHTMLProps<
+    React$1.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+) => React$1.ReactElement
+
+declare const AccordionDetails: AccordionDetailsType
+
+type SkeletonType = (
+  props: React$1.DetailedHTMLProps<
+    React$1.HTMLAttributes<HTMLSpanElement>,
+    HTMLSpanElement
+  >
+) => React$1.ReactElement
+
+declare const Skeleton: SkeletonType
+
+interface AppBarProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLElement>,
+      HTMLElement
+    >,
+    React$1.AriaAttributes {
+  isFixed?: boolean
+}
+
+type AppBarType = (props: AppBarProps) => React$1.ReactElement
+
+declare const AppBar: AppBarType
+
+type ToolBarType = (
+  props: React$1.DetailedHTMLProps<
+    React$1.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+) => React$1.ReactElement
+
+declare const ToolBar: ToolBarType
+
+interface CircularProgressProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    React$1.AriaAttributes {
+  svgStyles?: string
+  circleStyles?: string
+}
+
+type CircularProgressType = (
+  props: CircularProgressProps
+) => React$1.ReactElement
+
+declare const CircularProgress: CircularProgressType
+
+interface LinearProgressProps
+  extends React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    React$1.AriaAttributes {
+  className?: string
+  progressBarStyles?: string
+  value?: number
+}
+
+type LinearProgressType = (
+  props: LinearProgressProps
+) => React$1.ReactElement
+
+declare const LinearProgress: LinearProgressType
+
+type TabChangeHandlerType = (
+  e: SyntheticEvent<HTMLButtonElement>,
+  value: number
+) => void
+
+interface TabProps
+  extends Omit<
+    React$1.DetailedHTMLProps<
+      React$1.ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    >,
+    "onChange"
+  > {
+  selected?: boolean
+  value?: number
+  label: string
+  onChange?: TabChangeHandlerType
+}
+
+type TabType = (props: TabProps) => React$1.ReactElement
+
+declare const Tab: TabType
+
+type TabsIndicatorPositions = "bottom" | "top"
+
+interface TabsProps
+  extends Omit<
+    React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    "onChange"
+  > {
+  value: number
+  onChange?: TabChangeHandlerType
+  indicatorPos?: TabsIndicatorPositions
+}
+
+type TabsType = (props: TabsProps) => React$1.ReactElement
+
+declare const Tabs: TabsType
+
+interface TabsPanelProps
+  extends Omit<
+    React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    "onChange"
+  > {
+  tabs: string[]
+  tabPanels: React$1.ReactNode[]
+  paths?: string[]
+  activeTab?: number
+  onChange?: TabChangeHandlerType
+  indicatorPos?: TabsIndicatorPositions
+}
+
+type TabsPanelType = (props: TabsPanelProps) => React$1.ReactElement
+
+declare const TabsPanel: TabsPanelType
+
+interface MenuPanelProps
+  extends Omit<
+    React$1.DetailedHTMLProps<
+      React$1.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    "onChange"
+  > {
+  tabs: string[]
+  tabsId?: string[]
+  activeTab?: number
+  offset?: number
+  onChange?: TabChangeHandlerType
+  indicatorPos?: TabsIndicatorPositions
+}
+
+type MenuPanelType = (props: MenuPanelProps) => React$1.ReactElement
+
+declare const MenuPanel: MenuPanelType
+
+interface IconButtonProps
+  extends React$1.DetailedHTMLProps<
+      React$1.ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    >,
+    React$1.AriaAttributes {}
+
+type IconButtonType = (props: IconButtonProps) => React$1.ReactElement
+
+declare const IconButton: IconButtonType
+
+export { Accordion, AccordionDetails, AccordionDetailsType, AccordionSummary, AccordionSummaryProps, AccordionSummaryType, AccordionType, AppBar, AppBarProps, AppBarType, BackgroundColorsType, Box, BoxProps, BoxSizing, BoxType, BreakpointsType, Button, ButtonBorder, ButtonProps, ButtonSizes, ButtonThemes, ButtonType, ButtonTypes, Caption, CaptionColors, CaptionProps, CaptionSizes, CaptionType, CaptionWeight, Checkbox, CheckboxProps, CheckboxType, CircularProgress, CircularProgressType, ColorsType, Container, ContainerType, CountryItem, Divider, DividerProps, DividerType, ErrorColorsType, Grid, GridAlignItems, GridDirections, GridJustify, GridProps, GridSizing, GridType, Heading, HeadingColors, HeadingProps, HeadingSizes, HeadingType, IconButton, IconButtonProps, IconButtonType, InfoColorsType, Input, InputFile, InputFileProps, InputFileType, InputMessage, InputMessageProps, InputMessageType, InputMessageVariant, InputProps, InputType, InputWithAdornments, InputWithAdornmentsProps, InputWithAdornmentsType, InputWithCountryDropdown, InputWithCountryDropdownProps, InputWithCountryDropdownType, InputWithMask, InputWithMaskProps, InputWithMaskType, LinearProgress, LinearProgressType, MenuPanel, MenuPanelProps, MenuPanelType, Modal, ModalProps, ModalSizes, ModalType, PrimaryColorsType, PurpleColorsType, Radio, RadioProps, RadioType, SecondaryColorsType, ShadowsType, Skeleton, SkeletonType, SuccessColorsType, Switch, SwitchProps, SwitchSizes, SwitchType, Tab, TabChangeHandlerType, TabProps, TabType, Tabs, TabsIndicatorPositions, TabsPanel, TabsPanelProps, TabsPanelType, TabsProps, TabsType, Text, TextColors, TextProps, TextSizes, TextType, TextWeight, ThemeType, ToolBar, ToolBarType, theme };