@kvdbil/components 16.0.2 → 16.0.3

package/esm/utils/utils.js

@@ -1,4 +1,4 @@
-import{css as l}from"styled-components";const s=e=>{let a=0,r=0,t=0;return e.length===4?(a=parseInt("0x"+e[1]+e[1]),r=parseInt("0x"+e[2]+e[2]),t=parseInt("0x"+e[3]+e[3])):e.length===7&&(a=parseInt("0x"+e[1]+e[2]),r=parseInt("0x"+e[3]+e[4]),t=parseInt("0x"+e[5]+e[6])),(Math.max(Number(a/255),Number(r/255),Number(t/255))+Math.min(Number(a/255),Number(r/255),Number(t/255)))/2*100},c=(e,a=1)=>{const r=parseInt(e.slice(1,3),16),t=parseInt(e.slice(3,5),16),o=parseInt(e.slice(5,7),16);return`rgba(${r}, ${t}, ${o}, ${a})`},i=l`
+import{css as s}from"styled-components";const i=e=>{let t=0,a=0,r=0;return e.length===4?(t=parseInt("0x"+e[1]+e[1]),a=parseInt("0x"+e[2]+e[2]),r=parseInt("0x"+e[3]+e[3])):e.length===7&&(t=parseInt("0x"+e[1]+e[2]),a=parseInt("0x"+e[3]+e[4]),r=parseInt("0x"+e[5]+e[6])),(Math.max(Number(t/255),Number(a/255),Number(r/255))+Math.min(Number(t/255),Number(a/255),Number(r/255)))/2*100},c=(e,t=1)=>{const a=parseInt(e.slice(1,3),16),r=parseInt(e.slice(3,5),16),l=parseInt(e.slice(5,7),16);return`rgba(${a}, ${r}, ${l}, ${t})`},g=s`
   appearance: none;
   background-color: transparent;
   border: 0;
@@ -6,4 +6,4 @@ import{css as l}from"styled-components";const s=e=>{let a=0,r=0,t=0;return e.len
   font-family: inherit;
   outline: none;
   padding: 0;
-`,n=e=>({darker:e.colors.grayscaleNeutral.dark1,dark:e.colors.grayscaleNeutral.dark1,mainAlt:e.colors.grayscaleToned.dark1,main:e.colors.grayscaleToned.dark1,light:e.colors.grayscaleToned.light1}),u=(e,a)=>a==="neutral"?n(e):e.colors[a];export{s as getLuminosity,c as hexToRGB,n as neutralColorSwap,i as resetButtonStyle,u as resolveColorWithNeutral};
+`,o=e=>({darker:e.colors.grayscaleNeutral.dark1,dark:e.colors.grayscaleNeutral.dark1,mainAlt:e.colors.grayscaleToned.dark1,main:e.colors.grayscaleToned.dark1,light:e.colors.grayscaleToned.light1,lighter:e.colors.grayscaleToned.light2,lighter2:e.colors.grayscaleToned.light3,lighter3:e.colors.grayscaleToned.light4}),h=(e,t)=>t==="neutral"?o(e):e.colors[t],n=["darker","dark","mainAlt","main","light","lighter","lighter2","lighter3"],d=e=>{const t=n.indexOf(e);return t>=0&&t<n.length-1?n[t+1]:e},u=e=>{const t=n.indexOf(e);return t>0?n[t-1]:e};export{u as getDarkerShade,d as getLighterShade,i as getLuminosity,c as hexToRGB,o as neutralColorSwap,g as resetButtonStyle,h as resolveColorWithNeutral};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "16.0.2",
+  "version": "16.0.3",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "16.0.2",
+  "version": "16.0.3",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

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

@@ -17,7 +17,7 @@ export declare const largeSizeStyles: () => string;
 export declare const disabledColorStyles: (theme: Theme, variant: Variant) => string;
 export declare const colorStyles: {
     solid: ({ theme, $color, $colorShade }: ColorStylesProp) => string;
-    outline: ({ theme, $color }: ColorStylesProp) => string;
-    flat: ({ theme, $color }: ColorStylesProp) => string;
+    outline: ({ theme, $color, $colorShade, }: ColorStylesProp) => string;
+    flat: ({ theme, $color, $colorShade }: ColorStylesProp) => string;
 };
 export {};

package/types/components/Card/index.d.ts

@@ -1,10 +1,13 @@
 import { ReactNode } from 'react';
+import { Color, ColorShade } from '../../Types';
 export interface CardProps {
     children: ReactNode;
     topBorder?: string;
+    topBorderColor?: Color;
+    topBorderColorShade?: ColorShade;
     noFrame?: boolean;
     lineBorder?: boolean;
     as?: keyof JSX.IntrinsicElements;
 }
-export declare const Card: ({ children, topBorder, noFrame, lineBorder, as: element, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, topBorder, topBorderColor, topBorderColorShade, noFrame, lineBorder, as: element, }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export default Card;

package/types/components/CheckBox/index.d.ts

@@ -1,14 +1,15 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { CheckboxSize, Color } from '../../Types';
+import { CheckboxSize, Color, ColorShade } from '../../Types';
 type ComponentPropsWithoutSize = Omit<ComponentPropsWithoutRef<'input'>, 'size'>;
 export interface CheckBoxProps extends ComponentPropsWithoutSize {
     name?: string;
     size?: CheckboxSize;
     color?: Color;
+    colorShade?: ColorShade;
     checked?: boolean;
     isDisabled?: boolean;
     hasError?: boolean;
     label?: ReactNode;
 }
-export declare const CheckBox: ({ name, isDisabled, size, checked, color, hasError, label, ...rest }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBox: ({ name, isDisabled, size, checked, color, colorShade, hasError, label, ...rest }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
 export default CheckBox;

package/types/components/DayPicker/index.d.ts

@@ -1,11 +1,12 @@
 import { PropsBase } from 'react-day-picker';
 import { Locale } from '../../Types';
-import { Color } from '../../Types';
+import { Color, ColorShade } from '../../Types';
 export interface DayPickerProps extends Omit<PropsBase, 'locale'> {
     locale?: Locale;
     color?: Color;
     selectedDay?: Date;
     disabledDays?: Date[];
+    colorShade?: ColorShade;
 }
-export declare const DayPicker: ({ locale, color, selectedDay, disabledDays, ...props }: DayPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DayPicker: ({ locale, color, colorShade, selectedDay, disabledDays, ...props }: DayPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DayPicker;

package/types/components/IconButton.d.ts

@@ -1,16 +1,18 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { ColorWithNeutral } from '../Types';
+import { ColorShade, ColorWithNeutral } from '../Types';
 export declare const BackgroundStyles: import("styled-components").RuleSet<{
-    color: ColorWithNeutral;
+    $color: ColorWithNeutral;
+    $colorShade: ColorShade;
     isDisabled: boolean;
 }>;
 interface Props {
     color: ColorWithNeutral;
+    colorShade?: ColorShade;
     children: ReactNode;
     isActive: boolean;
     isDisabled: boolean;
     noTabIndex?: boolean;
     onClick?(event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void;
 }
-declare const IconButton: ({ children, isActive, isDisabled, onClick, noTabIndex, color, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const IconButton: ({ children, isActive, isDisabled, onClick, noTabIndex, color, colorShade, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default IconButton;

package/types/components/RadioButton/index.d.ts

@@ -1,14 +1,15 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { RadioButtonSize, Color } from '../../Types';
+import { RadioButtonSize, Color, ColorShade } from '../../Types';
 type ComponentPropsWithoutSize = Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type'>;
 export interface RadioButtonProps extends ComponentPropsWithoutSize {
     name?: string;
     color?: Color;
     size?: RadioButtonSize;
+    colorShade?: ColorShade;
     checked?: boolean;
     isDisabled?: boolean;
     label?: ReactNode;
     hasError?: boolean;
 }
-export declare const RadioButton: ({ name, size, checked, isDisabled, color, label, hasError, ...props }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButton: ({ name, size, checked, isDisabled, color, colorShade, label, hasError, ...props }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default RadioButton;

package/types/components/Select/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, RefObject } from 'react';
 import { ActionMeta, GroupBase, Props, SelectInstance, DropdownIndicatorProps as SelectDropdownIndicatorProps, OnChangeValue } from 'react-select';
-import { Color } from '../../Types';
+import { Color, ColorShade } from '../../Types';
 export interface DropdownIndicatorProps extends SelectDropdownIndicatorProps {
     isFocused: boolean;
     isDisabled: boolean;
@@ -13,6 +13,7 @@ export interface SelectProps<Option = OptionType, IsMulti extends boolean = fals
     autoFocus?: boolean;
     className?: string;
     color?: Color;
+    colorShade?: ColorShade;
     forwardRef?: RefObject<SelectInstance<Option, IsMulti, Group>>;
     hasError?: boolean;
     height?: number;
@@ -48,5 +49,5 @@ export interface SelectProps<Option = OptionType, IsMulti extends boolean = fals
  *  );
  * };
  */
-export declare function Select<Option = OptionType, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ className, color, forwardRef, hasError, height, helperText, isDisabled, onBlur, onFocus, onInputChange, placeholder, name, ...props }: SelectProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<Option = OptionType, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ className, color, colorShade, forwardRef, hasError, height, helperText, isDisabled, onBlur, onFocus, onInputChange, placeholder, name, ...props }: SelectProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
 export default Select;

package/types/components/Stamp/index.d.ts

@@ -1,10 +1,11 @@
-import { Color, Locale, StampType, Variant } from '../../Types';
+import { Color, ColorShade, Locale, StampType, Variant } from '../../Types';
 export interface Props {
     color: Color;
+    colorShade?: ColorShade;
     appearance: Exclude<Variant, 'flat'>;
     locale: Locale;
     type: StampType;
     size?: number;
 }
-declare const Stamp: ({ color, appearance, locale, type, size }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Stamp: ({ color, appearance, locale, type, size, colorShade, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Stamp;

package/types/components/Stepper/index.d.ts

@@ -1,11 +1,12 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { Color } from '../../Types';
+import { Color, ColorShade } from '../../Types';
 export interface StepperProps extends ComponentPropsWithoutRef<'div'> {
     children: ReactNode[];
     orientation?: 'horizontal' | 'vertical';
     variant?: 'solid' | 'outline';
     color?: Color;
+    colorShade?: ColorShade;
     size?: number;
     activeStep?: number;
 }
-export declare const Stepper: ({ children, orientation, variant, color, size, activeStep, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Stepper: ({ children, orientation, variant, color, colorShade, size, activeStep, ...props }: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/types/components/StepperAccordion/index.d.ts

@@ -1,8 +1,9 @@
 import { ComponentProps, ReactNode, RefObject } from 'react';
-import { Color } from '../../Types';
+import { Color, ColorShade } from '../../Types';
 export interface StepperAccordionProps extends ComponentProps<'div'> {
     step: number;
     color?: Color;
+    colorShade?: ColorShade;
     isComplete?: boolean;
     isExpanded?: boolean;
     isDisabled?: boolean;

package/types/components/Switcher/index.d.ts

@@ -1,9 +1,10 @@
-import { Color } from '../../Types';
+import { Color, ColorShade } from '../../Types';
 export interface Props {
     selected?: boolean;
     disabled?: boolean;
     onToggle(selected: boolean): void;
     color?: Color;
+    colorShade?: ColorShade;
 }
-export declare const Switcher: ({ selected, disabled, onToggle, color, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Switcher: ({ selected, disabled, onToggle, color, colorShade, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Switcher;

package/types/components/Tabs/Tab.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Color } from '../../Types';
+import { Color, ColorShade } from '../../Types';
 import { ReactNode } from 'react';
 export interface TabProps {
     label: ReactNode;
     isDisabled?: boolean;
     isActive?: boolean;
     activeColor?: Color;
+    activeColorShade?: ColorShade;
     index?: number;
     id?: number;
     children?: ReactNode;

package/types/components/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Color } from '../../Types';
+import { Color, ColorShade } from '../../Types';
 import { ReactElement } from 'react';
 import { TabProps } from './Tab';
 import { CSSProperties } from 'styled-components';
@@ -7,6 +7,7 @@ import theme from '../../theme';
 type TabElement = ReactElement<TabProps>;
 export interface TabsProps {
     activeColor?: Color;
+    activeColorShade?: ColorShade;
     justify?: CSSProperties['justifyContent'];
     activeIndex?: number;
     initalActive?: number;
@@ -17,5 +18,5 @@ export interface TabsProps {
     borderColor?: keyof typeof theme.colors.grayscaleToned;
     headline?: string;
 }
-export declare const Tabs: ({ activeColor, justify, activeIndex, initalActive, children, kbNavAutoOpen, onTabClick, fullWidthBorder, borderColor, headline, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ activeColor, activeColorShade, justify, activeIndex, initalActive, children, kbNavAutoOpen, onTabClick, fullWidthBorder, borderColor, headline, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/types/components/Toggle/index.d.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from 'react';
-import { Color } from '../../Types';
+import { Color, ColorShade } from '../../Types';
 type LeftOrRight = 'LEFT' | 'RIGHT';
 export interface ToggleProps {
     color: Color;
+    colorShade?: ColorShade;
     active?: LeftOrRight;
     left: ReactNode;
     right: ReactNode;
     onChange(value: LeftOrRight): void;
 }
-export declare const Toggle: ({ onChange, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toggle: ({ onChange, color, colorShade, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/components/ValuationRange/index.d.ts

@@ -1,12 +1,13 @@
-import { Color } from '../../Types';
+import { Color, ColorShade } from '../../Types';
 export interface Props {
     intervalMin?: number;
     intervalMax?: number;
     value?: number;
     color?: Color;
+    colorShade?: ColorShade;
     noApproximateSymbol?: boolean;
     isDisabled?: boolean;
     manualValuationText?: string;
 }
-declare const ValuationRange: ({ intervalMin, intervalMax, value, color, noApproximateSymbol, isDisabled, manualValuationText, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ValuationRange: ({ intervalMin, intervalMax, value, color, colorShade, noApproximateSymbol, isDisabled, manualValuationText, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ValuationRange;

package/types/index.d.ts

@@ -46,7 +46,7 @@ export { useDynamicScript } from './hooks/useDynamicScript';
 export { Title, Subtitle, Headline, Display1, Display2, Display3, TinyTitleRegular, TinyTitleBold, } from './typography/Heading';
 export { Quote, Status, BodyLink, BodyText, Caption, CaptionLink, } from './typography/BodyText';
 export { Button as ButtonRegularText, ButtonLarge as ButtonLargeText, ButtonSmall as ButtonSmallText, } from './typography/ButtonText';
-export { hexToRGB, resolveColorWithNeutral } from './utils/utils';
+export { hexToRGB, resolveColorWithNeutral, getLighterShade, getDarkerShade, } from './utils/utils';
 export { resetButtonStyle } from './utils/utils';
 export { ButtonLargeTextStyle, ButtonRegularTextStyle, ButtonSmallTextStyle, } from './typography/ButtonText';
 export { Display3Style, Display2Style, Display1Style, HeadlineStyle, TitleStyle, SubtitleStyle, TinyTitleRegularStyle, TinyTitleBoldStyle, } from './typography/Heading';

package/types/utils/utils.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from '../theme';
-import { ColorWithNeutral } from '../Types';
+import { ColorShade, ColorWithNeutral } from '../Types';
 export declare const getLuminosity: (hexColor: string) => number;
 export declare const hexToRGB: (hex: string, alpha?: number) => string;
 export declare const resetButtonStyle: import("styled-components").RuleSet<object>;
@@ -9,6 +9,9 @@ export declare const neutralColorSwap: (theme: Theme) => {
     mainAlt: "#1a2030";
     main: "#1a2030";
     light: "#8d8f97";
+    lighter: "#a4a6ac";
+    lighter2: "#babcc2";
+    lighter3: "#d1d2d6";
 };
 export declare const resolveColorWithNeutral: (theme: Theme, color: ColorWithNeutral) => {
     darker: "#c48900";
@@ -79,4 +82,9 @@ export declare const resolveColorWithNeutral: (theme: Theme, color: ColorWithNeu
     mainAlt: "#1a2030";
     main: "#1a2030";
     light: "#8d8f97";
+    lighter: "#a4a6ac";
+    lighter2: "#babcc2";
+    lighter3: "#d1d2d6";
 };
+export declare const getLighterShade: (currentShade: ColorShade) => ColorShade;
+export declare const getDarkerShade: (currentShade: ColorShade) => ColorShade;