kui-basic 1.1.167 → 1.1.169

package/index.d.ts

@@ -3,150 +3,151 @@ import { HTMLInputTypeAttribute, ReactElement, ReactNode, SyntheticEvent, RefObj
 import { Placement, OffsetOptions, Strategy } from '@floating-ui/react';
 import { MiddlewareData } from '@floating-ui/core/src/types';
 
-interface BrandColors {
-  main: string
-  pressed: string
-  hover: string
-  light: string
-  background: string
-}
-interface ColorOption {
-  fiftyP: string
-  seventy: string
-  sixty: string
-  ten: string
-  five: string
-}
-interface GreyColors {
-  seventy: string
-  sixty: string
-  fiftyP: string
-  fourty: string
-  thirty: string
-  fifteenB: string
-  zero: string
-}
-interface BackgroundColors {
-  light1: string
-  light2: string
-  light3: string
-  light4: string
-}
-
-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 SettingsType = {
-  spacing: number
-  columns: number
-}
-
-type ThemeType = {
-  palette: ColorsType
-  shadows: ShadowsType
-  breakpoints: BreakpointsType
-  settings: SettingsType
-}
-
-type Palette = {
-  brand: BrandColors
-  green: ColorOption
-  red: ColorOption
-  blue: ColorOption
-  purple: ColorOption
-  grey: GreyColors
-  background: BackgroundColors
-}
-
-type ThemeInterface = {
-  palette: Palette
-  shadows: ShadowsType
-  breakpoints: BreakpointsType
-  settings: SettingsType
-}
-
-declare const themeOld: ThemeType
+interface BrandColors {
+  main: string
+  pressed: string
+  hover: string
+  light: string
+  background: string
+}
+interface ColorOption {
+  fiftyP: string
+  seventy: string
+  sixty: string
+  ten: string
+  five: string
+}
+interface GreyColors {
+  seventy: string
+  sixty: string
+  fiftyP: string
+  fourty: string
+  thirty: string
+  fifteenB: string
+  zero: string
+  disabled: string
+}
+interface BackgroundColors {
+  light1: string
+  light2: string
+  light3: string
+  light4: string
+}
+
+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 SettingsType = {
+  spacing: number
+  columns: number
+}
+
+type ThemeType = {
+  palette: ColorsType
+  shadows: ShadowsType
+  breakpoints: BreakpointsType
+  settings: SettingsType
+}
+
+type Palette = {
+  brand: BrandColors
+  green: ColorOption
+  red: ColorOption
+  blue: ColorOption
+  purple: ColorOption
+  grey: GreyColors
+  background: BackgroundColors
+}
+
+type ThemeInterface = {
+  palette: Palette
+  shadows: ShadowsType
+  breakpoints: BreakpointsType
+  settings: SettingsType
+}
+
+declare const themeOld: ThemeType
 declare const theme: ThemeInterface
 
 type CaptionSizes = "xs" | "sm" | "s" | "m" | "l"
@@ -674,27 +675,29 @@ type LinearProgressType = (
 
 declare const LinearProgress: LinearProgressType
 
-type TabChangeHandlerType = (
-  e: SyntheticEvent<HTMLButtonElement>,
-  value: number
-) => void
-
-interface TabProps
-  extends Omit<
-    React.DetailedHTMLProps<
-      React.ButtonHTMLAttributes<HTMLButtonElement>,
-      HTMLButtonElement
-    >,
-    "onChange"
-  > {
-  selected?: boolean
-  value?: number
-  label: string | ReactNode
-  onChange?: TabChangeHandlerType
-}
-
-type TabType = (props: TabProps) => React.ReactElement
-
+type TabChangeHandlerType = (
+  e: SyntheticEvent<HTMLButtonElement>,
+  value: number
+) => void
+
+interface TabProps
+  extends Omit<
+    React.DetailedHTMLProps<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      HTMLButtonElement
+    >,
+    "onChange"
+  > {
+  selected?: boolean
+  disabled?: boolean
+  value?: number
+  label: string | ReactNode
+  onChange?: TabChangeHandlerType
+  renderTabWrapper?: (tab: string) => ReactNode
+}
+
+type TabType = (props: TabProps) => React.ReactElement
+
 declare const Tab: TabType
 
 type TabsIndicatorPositions = "bottom" | "top"
@@ -733,6 +736,7 @@ interface TabsPanelProps
   endComponent?: ReactNode
   navigate?: (state: string) => void
   tabsPanelId?: string
+  renderTabWrapper?: (tab: string) => ReactNode
 }
 
 type TabsPanelType = (props: TabsPanelProps) => React.ReactElement