kiban-design-system 1.1.16-hotfix.0 → 3.0.0

package/dist/components/InputPhoneNumber/InputPhoneNumber.props.d.ts

@@ -1,107 +0,0 @@
-/// <reference types="react" />
-import type { CountryData } from 'react-phone-input-2';
-import type { TooltipInput } from '../InputText';
-export type { CountryData };
-export interface TooltipInputPhoneNumber {
-    text?: string;
-    id?: string;
-    position?: 'topLeft' | 'topRight' | 'topCenter' | 'bottomLeft' | 'bottomRight' | 'bottomCenter' | 'right' | 'left';
-}
-export interface InputPhoneNumberOnChangeProps {
-    paramsOnChange: {} | CountryData;
-    value: string;
-    formattedValue: string;
-}
-export interface InputPhoneNumberOnFocusProps extends InputPhoneNumberOnChangeProps {
-    event: React.FocusEvent<HTMLInputElement>;
-}
-export interface InputPhoneNumberProps {
-    /**
-     * Element to show a helper text information in inputText
-     */
-    helperText?: React.ReactNode;
-    /**
-     * Show input label
-     */
-    label?: string;
-    /**
-     * To show a different style in input (style help)
-     *
-     * @default false
-     */
-    isHelperMode?: boolean;
-    /**
-     * To show a different style in input (style error)
-     *
-     * @default false
-     */
-    isErrorMode?: boolean;
-    /**
-     * To show tooltip
-     *
-     */
-    tooltip?: TooltipInputPhoneNumber;
-    /**
-     * To desactivate input
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * To event on change input
-     *
-     */
-    onChange?: (data: InputPhoneNumberOnChangeProps) => void;
-    /**
-     * To show a text inside input
-     */
-    placeholder?: string;
-    /** Callback when focus leaves button */
-    onBlur?: (paramsOnBlur: CountryData) => void;
-    /** Callback when input becomes focussed */
-    onFocus?: (paramsOnFocus: {} | CountryData) => void;
-    /**
-     * id element
-     *
-     */
-    id?: string;
-    /**
-     * name element
-     *
-     */
-    name?: string;
-    /**
-     * to value for input
-     *
-     */
-    value?: string;
-    /**
-     * to force input to show focus
-     *
-     * @default false
-     */
-    isFocused?: boolean;
-    /**
-     * country default
-     * @default 'mx'
-     */
-    defaultCountry?: string;
-    /**
-     * list of preferred countries
-     * @default []
-     */
-    preferredCountries?: string[];
-    /**
-     * List to language preference
-     */
-    language?: 'es' | 'en';
-    /**
-     * Returns a * if the field is required
-     */
-    isRequired?: boolean;
-    tooltipLabel?: TooltipInput;
-    /**
-     * Label to use in automatic tests
-     */
-    ariaLabel?: string;
-}

package/dist/components/InputPhoneNumber/InputPhoneNumber.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/InputPhoneNumber/index.d.ts

@@ -1,3 +0,0 @@
-import InputPhoneNumber from './InputPhoneNumber';
-export * from './InputPhoneNumber.props';
-export { InputPhoneNumber };

package/dist/components/InputTag/InputTag.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-import type { InputTagProps } from './InputTag.props';
-import './InputTag.styles.scss';
-/**
- * InputTag component is used to display as a tag any word
- * that was typed, to do it possible it is necessary to type enter or lose the
- * input focus, also the triggerKeys parameter is an array with extra keys that
- * user should add as trigger, now there are only two keys, comma and space.
- * if user types the backspace key and there is not letters in the input,
- * the last tag will be deleted
- *
- * @param {InputTagProps}  PageActionsProps - PageActionsProps
- * @param {ReactNode}  PageActionsProps.helperText - Messaje to display after the InputTag
- * @param {boolean} PageActionsProps.isDisabled - Flag to disable the component
- * @param {boolean} PageActionsProps.isDanger - Flag to set error styles
- * @param {boolean} PageActionsProps.isFocused - Flag to set focus styles
- * @param {boolean} PageActionsProps.isHelperMode - Flag to set help style
- * @param {boolean} PageActionsProps.isReadOnly - Flag to set input text as read only
- * @param {string} PageActionsProps.label - Label to show above
- * @param {Function} PageActionsProps.onAddTag - Function to execute when a tag is added
- * @param {Function} PageActionsProps.onBlur - Function to execute when onBlur happens
- * @param {Function} PageActionsProps.onChange - Function to execute when onChange happens
- * @param {Function} PageActionsProps.onDeleteTag - Function to execute when a tag es going to be deleted
- * @param {Function} PageActionsProps.onFocus - Function to execute when onFocus happens
- * @param {string} PageActionsProps.placeholder - Array of string to preload tags
- * @param {TagPropsInputTag[]} PageActionsProps.tags - Array of string to preload tags
- * @param {Tooltip} PageActionsProps.tooltip - Array of objects to preload tags
- * @param {keyToAddTag[]} PageActionsProps.triggerKeys - Array of string to set keys to add tag
- * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
- */
-declare const InputTag: ({ ariaLabel, helperText, isDisabled, isDanger, isFocused, isHelperMode, isReadOnly, label, onAddTag, onBlur, onChange, onDeleteTag, onFocus, placeholder, tags, tooltip, triggerKeys, value, isRequired, tooltipLabel, }: InputTagProps) => JSX.Element;
-export default InputTag;

package/dist/components/InputTag/InputTag.props.d.ts

@@ -1,100 +0,0 @@
-/// <reference types="react" />
-import type { TooltipInput } from '../InputText';
-export interface TagPropsInputTag {
-    content: React.ReactNode;
-    state: 'success' | 'error';
-    value: string;
-}
-export declare type keyToAddTag = ' ' | ',';
-export interface TooltipInputTag {
-    id?: string;
-    position?: 'topLeft' | 'topRight' | 'topCenter' | 'bottomLeft' | 'bottomRight' | 'bottomCenter' | 'right' | 'left';
-    text?: string;
-}
-export interface InputTagProps {
-    /**
-     * Help text displayed in the bottom of the inputTag
-     */
-    helperText?: React.ReactNode;
-    /**
-     * Flag that disabled the inputTag
-     *
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Flag that shows a different style in inputTag (style error)
-     *
-     * @default false
-     */
-    isDanger?: boolean;
-    /**
-     * Flag that shows a different style in inputTag (style focus)
-     *
-     * @default false
-     */
-    isFocused?: boolean;
-    /**
-     * Flag that shows a different style in inputTag (style help)
-     *
-     * @default false
-     */
-    isHelperMode?: boolean;
-    /**
-     * Flag that sets readonly to the inputTag
-     *
-     * @default false
-     */
-    isReadOnly?: boolean;
-    /**
-     * Label to show in the top of the inputTag
-     */
-    label?: string;
-    /**
-     * Array that display tags when inputTag is loaded
-     */
-    tags?: TagPropsInputTag[];
-    /**
-     * Function that is executed when component is onBlur
-     */
-    onBlur?(): void;
-    /**
-     * Function that is executed when a tag is deleted
-     */
-    onAddTag(e: string): void;
-    /**
-     * Function that is executed when component is onChange
-     */
-    onChange(e: string): void;
-    /**
-     * Function that is executed when a tag is deleted
-     */
-    onDeleteTag?(e: string): void;
-    /**
-     * Function that is executed when component is onFocus
-     */
-    onFocus?(): void;
-    /**
-     * Place holder that is displayed in inputTag
-     */
-    placeholder?: string;
-    /**
-     * Tooltip props
-     */
-    tooltip?: TooltipInputTag;
-    /**
-     * Array ok keys that will be the trigger to add a tag
-     */
-    triggerKeys?: keyToAddTag[];
-    /** Input field value */
-    value?: string;
-    /**
-     * Returns a * if the field is required
-     */
-    isRequired?: boolean;
-    tooltipLabel?: TooltipInput;
-    /**
-     * Label to use in automatic tests
-     */
-    ariaLabel?: string;
-}

package/dist/components/InputTag/index.d.ts

@@ -1,3 +0,0 @@
-import InputTag from './InputTag';
-export type { InputTagProps, TagPropsInputTag, keyToAddTag, } from './InputTag.props';
-export { InputTag };

package/dist/components/InputText/InputTest.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/InputText/InputText.d.ts

@@ -1,36 +0,0 @@
-/// <reference types="react" />
-import type { InputTextProps } from './InputText.props';
-import './InputText.styles.scss';
-/**
- * Input Text are used primarily to write in forms.
- * The styles of this component are similar to the native html component, except for a few extra variations.
- * This component have all properties of HTML InputText
- *
- * @example <InputText placeholder='Placeholder' label='Helper Text' helperText='This is helperText'/>
- * @param {InputTextProps} InputTextProps - The appearance of the inputText.
- * @param {object} InputTextProps.action - Object to show action icon in Input.
- * @param {ReactNode} InputTextProps.helperText - Helper text to show in bottom of input.
- * @param {boolean} InputTextProps.isHelperMode - Flag to show helper styles in input.
- * @param {boolean} InputTextProps.isErrorMode - Flag to show error styles in input.
- * @param {string} InputTextProps.icon - Text for show icon inside input.
- * @param {string} InputTextProps.label - Text for label top on input.
- * @param {object} InputTextProps.secondaryAction - Text for show icon inside right input.
- * @param {boolean} InputTextProps.showPrefix - For to shoy prefix inside left input.
- * @param {boolean} InputTextProps.disabled - for disabled element.
- * @param {string} InputTextProps.placeholder - For show placeholder in a input
- * @param {string} InputTextProps.type - For type inut.
- * @param {string} InputTextProps.name - For a name input.
- * @param {string} InputTextProps.id - For a id input.
- * @param {string} InputTextProps.className - For add className input.
- * @param {boolean} InputTextProps.readOnly - For a readonly input.
- * @param {string} InputTextProps.value - For a value input.
- * @param {number} InputTextProps.maxLength - For a maxLength value input.
- * @param {number} InputTextProps.minLength - For a minLength value input.
- * @param {number} InputTextProps.max - For a max value input.
- * @param {number} InputTextProps.min - For a min value input.
- * @param {boolean} InputTextProps.isFocused - For active focus whit a boolean.
- * @param {string} InputTextProps.ariaLabel - Label to use in automatic tests
- * @returns {symbol} The component.
- */
-declare const InputText: ({ action, ariaLabel, helperText, isHelperMode, isErrorMode, icon, label, secondaryAction, prefix, suffix, tooltip, disabled, placeholder, type, readOnly, id, name, className, value, maxLength, minLength, max, min, isFocused, onChange, onBlur, onFocus, onKeyDown, isRequired, isMultiline, autoComplete, inputMode, tooltipLabel, }: InputTextProps) => JSX.Element;
-export default InputText;

package/dist/components/InputText/InputText.props.d.ts

@@ -1,173 +0,0 @@
-/// <reference types="react" />
-import type { ThemeType } from '../../types';
-import type { IconName } from '../Icon';
-export interface InputElementActionType {
-    icon?: IconName;
-    onClick?: () => void;
-}
-export interface InputElementSecondaryActionType {
-    text?: string;
-    onClick?: () => void;
-}
-export interface PrefixAndSuffixType {
-    content?: string;
-    condensed?: boolean;
-}
-export interface TooltipInputText {
-    text?: string;
-    id?: string;
-    position?: 'topLeft' | 'topRight' | 'topCenter' | 'bottomLeft' | 'bottomRight' | 'bottomCenter' | 'right' | 'left';
-}
-export declare type TypeInput = 'text' | 'number' | 'password' | 'currency';
-export declare type TooltipInput = {
-    icon?: IconName;
-    content: React.ReactNode;
-    theme?: ThemeType;
-};
-export interface InputTextProps {
-    /**
-     * Element to show action icon inside inputText
-     */
-    action?: InputElementActionType;
-    /**
-     * Element to show a helper text information in inputText
-     */
-    helperText?: React.ReactNode;
-    /**
-     * This Element show a icon in position left inside in inputText (this element is visual only)
-     */
-    icon?: IconName;
-    /**
-     * Show input label
-     */
-    label?: string;
-    /**
-     * Element to show a one action on right top to the input
-     */
-    secondaryAction?: InputElementSecondaryActionType;
-    /**
-     * To show a different style in input (style help)
-     *
-     * @default false
-     */
-    isHelperMode?: boolean;
-    /**
-     * To show a different style in input (style error)
-     *
-     * @default false
-     */
-    isErrorMode?: boolean;
-    /**
-     * To show a preffix inside left input
-     *
-     */
-    prefix?: PrefixAndSuffixType;
-    /**
-     * To show a preffix inside right input
-     *
-     */
-    suffix?: PrefixAndSuffixType;
-    /**
-     * To show tooltip
-     *
-     */
-    tooltip?: TooltipInputText;
-    /**
-     * To desactivate input
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * To event on change input
-     *
-     */
-    onChange?: (value?: string, id?: string) => void;
-    /**
-     * To show a text inside input
-     */
-    placeholder?: string;
-    /** Callback when focus leaves button */
-    onBlur?: () => void;
-    /** Callback when input becomes focussed */
-    onFocus?: () => void;
-    /** Callback when input event keyboard */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
-    /**
-     * type input element
-     *
-     * @default text
-     */
-    type?: TypeInput;
-    /**
-     * show a only read input
-     *
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * id element
-     *
-     */
-    id?: string;
-    /**
-     * name element
-     *
-     */
-    name?: string;
-    /**
-     * to add new clasName to input
-     *
-     */
-    className?: string;
-    /**
-     * to value for input
-     *
-     */
-    value?: string;
-    /**
-     * to limit to characters to show
-     *
-     */
-    maxLength?: number;
-    /**
-     * to minimun to characters to show
-     *
-     */
-    minLength?: number;
-    /**
-     * to limit to characters to show
-     *
-     */
-    max?: number;
-    /**
-     * to minimun to characters to show
-     *
-     */
-    min?: number;
-    /**
-     * to force input to show focus
-     *
-     * @default false
-     */
-    isFocused?: boolean;
-    /**
-     * Returns a * if the field is required
-     *
-     */
-    isRequired?: boolean;
-    /**
-     * To show a multiline input (textarea)
-     */
-    isMultiline?: boolean | number;
-    /**
-     * To let the browser automatically complete the input based on user inputs to similar fields
-     */
-    autoComplete?: 'on' | 'off';
-    inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-    tooltipLabel?: TooltipInput;
-    /**
-     * Label to use in automatic tests
-     */
-    ariaLabel?: string;
-}

package/dist/components/InputText/index.d.ts

@@ -1,4 +0,0 @@
-import InputText from './InputText';
-export type { InputTextProps } from './InputText.props';
-export * from './InputText.props';
-export { InputText };

package/dist/components/JsonViewer/JsonViewer.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-import type { JsonViewerProps } from './JsonViewer.props';
-import './JsonViewer.styles.scss';
-/**
- * JsonViewr is ised to show each level of information in a json in an accordion
- *
- * @param {IconButtonProps} JsonViewerProps - JsonViewerProps props
- * @param {function} JsonViewerProps.downloadFunction - JsonViewerProps download function
- * @param {string} JsonViewerProps.downloadBtnIcon - JsonViewerProps download Icon
- * @param {string} JsonViewerProps.downloadBtnLabel - JsonViewerProps download label
- * @param {string} JsonViewerProps.downloadBtnType - JsonViewerProps download type
- * @param {object} JsonViewerProps.jsonData - Json object
- * @param {object} JsonViewerProps.sortFields - Array to sort jsonData
- * @returns {symbol} The component.
- */
-declare const JsonViewer: ({ downloadFunction, downloadBtnIcon, downloadBtnLabel, downloadBtnType, jsonData, sortFields, keysShowBtnDownload, }: JsonViewerProps) => JSX.Element;
-export default JsonViewer;

package/dist/components/JsonViewer/JsonViewer.props.d.ts

@@ -1,21 +0,0 @@
-import type { IconName } from '../Icon';
-export interface sortField {
-    key: string;
-    value: string;
-}
-export interface JsonViewerProps {
-    /** Download buuton appearance */
-    downloadBtnType?: 'primary' | 'secondary' | 'tertiary' | 'transparent' | 'danger';
-    /** Icon name to show in download button */
-    downloadBtnIcon?: IconName;
-    /** Label to show in download button */
-    downloadBtnLabel?: string;
-    /** Data to show in JsonViewer */
-    jsonData: {};
-    /** Function to execute when click in download button */
-    downloadFunction?(value: string, key: string): void;
-    /** Array used to sort and rename jsonData */
-    sortFields?: sortField[];
-    /** Keys to show button download */
-    keysShowBtnDownload?: string[];
-}

package/dist/components/JsonViewer/JsonViewer.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/JsonViewer/components/Accordion/Accordion.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import { AccordionProps } from './Accordion.props';
-import './Accordion.styles.scss';
-/**
- * Accordion is used as a JsonViewer subcomponent, it has all information of
- * each json level loaded in JsonViewer
- *
- * @param {IconButtonProps} AccordionProps - Accordion props.
- * @param {string} AccordionProps.title - Accordion title
- * @param {React.ReactNode} AccordionProps.children - Accordion content
- * @param {boolean} AccordionProps.isGlobalOpen - Flag that indicates if external button opened the accordion
- * @param {string} AccordionProps.isParentClick - Flag that indicates if click was made by external button
- * @param {string} AccordionProps.id - Id to use as key
- * @param {boolean} AccordionProps.isLastSon - Flag to validate if it is last json element
- * @returns {symbol} The component.
- */
-declare const Accordion: ({ title, children, isGlobalOpen, isParentClick, id, isLastSon, }: AccordionProps) => JSX.Element;
-export default Accordion;

package/dist/components/JsonViewer/components/Accordion/Accordion.props.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export interface AccordionProps {
-    /** Content to display in Accordion */
-    children: React.ReactNode;
-    /** Id to use in internal Keys */
-    id: string;
-    /** Flag to show opned accordion */
-    isGlobalOpen?: boolean;
-    /** Flag to validate if click was made in Accordion header or in main button to open or close all accordions */
-    isParentClick?: boolean;
-    /** Accordion title */
-    title?: string;
-    /** Flag to validate if this accordion is last son */
-    isLastSon?: boolean;
-}

package/dist/components/JsonViewer/components/Accordion/index.d.ts

@@ -1,3 +0,0 @@
-import Accordion from './Accordion';
-export * from './Accordion.props';
-export { Accordion };

package/dist/components/JsonViewer/components/index.d.ts

@@ -1 +0,0 @@
-export * from './Accordion';

package/dist/components/JsonViewer/index.d.ts

@@ -1,3 +0,0 @@
-import JsonViewer from './JsonViewer';
-export * from './JsonViewer.props';
-export { JsonViewer };

package/dist/components/Label/Label.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import type { LabelProps } from './Label.props';
-import './Label.styles.scss';
-/**
- * Label component shows a Label inside a rounded border
- *
- * @param {LabelProps} LabelProps - Tag props
- * @param {string} LabelProps.color - Color name
- * @param {number} LabelProps.intensity - Color intensity
- * @param {ReactNode} LabelProps.children - Element to display in Label
- * @returns {symbol} The component
- */
-declare const Label: ({ color, intensity, children, }: LabelProps) => JSX.Element;
-export default Label;

package/dist/components/Label/Label.props.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export interface LabelProps {
-    /**
-     * Border and font label color
-     */
-    color?: 'primary' | 'black' | 'white' | 'neutral-light' | 'neutral-dark' | 'secondary' | 'success' | 'error' | 'warning';
-    /**
-     * Color intensity
-     */
-    intensity?: 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
-    /**
-     * Element to display in Label
-     */
-    children: React.ReactNode;
-}

package/dist/components/Label/Label.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/Label/index.d.ts

@@ -1,3 +0,0 @@
-import Label from './Label';
-export type { LabelProps } from './Label.props';
-export { Label };

package/dist/components/Link/Link.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { LinkProps } from './Link.props';
-import './Link.styles.scss';
-declare const Link: ({ children, className: classNameProp, component, to, target, }: LinkProps) => JSX.Element;
-export default Link;

package/dist/components/Link/Link.props.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface LinkProps {
-    to?: string;
-    children: React.ReactNode;
-    className?: string;
-    component: React.ElementType;
-    target?: string;
-}

package/dist/components/Link/index.d.ts

@@ -1,3 +0,0 @@
-import Link from './Link';
-export * from './Link.props';
-export { Link };

package/dist/components/ListInfo/ListInfo.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import type { ListinfoProps } from './Listinfo.props';
-import './Listinfo.styles.scss';
-/**
- * Listinfo is a component to show information in a little list whit styles.
- *
- * @example
- * <Listinfo items={items}/>
- * @param {ListinfoProps} ListinfoProps - Listinfo props.
- * @param {array} ListinfoProps.items - params to show in componente.
- * @returns {symbol} The component.
- */
-declare const ListInfo: ({ items }: ListinfoProps) => JSX.Element;
-export default ListInfo;

package/dist/components/ListInfo/Listinfo.props.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import type { IconName } from '../Icon';
-export interface ListInfoItemtype {
-    icon: IconName;
-    title: string;
-    content: React.ReactNode;
-}
-export interface ListinfoProps {
-    items: ListInfoItemtype[];
-}

package/dist/components/ListInfo/Listinfo.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/ListInfo/index.d.ts

@@ -1,3 +0,0 @@
-export * from './Listinfo.props';
-import ListInfo from './ListInfo';
-export { ListInfo };