kiban-design-system 1.1.3-hotfix.0 → 1.1.3

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

@@ -1,96 +1,99 @@
-/// <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;
-}
+import type { TooltipInput } from '../InputText';
+export interface TagPropsInputTag {
+    content: React.ReactNode;
+    state: 'success' | 'error';
+    value: string;
+}
+export 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 +1,3 @@
-import InputTag from './InputTag';
-export type { InputTagProps, TagPropsInputTag, keyToAddTag, } from './InputTag.props';
-export { InputTag };
+import InputTag from './InputTag';
+export type { InputTagProps, TagPropsInputTag, keyToAddTag, } from './InputTag.props';
+export { InputTag };

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

@@ -1,35 +1,35 @@
-/// <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.
- * @returns {symbol} The component.
- */
-declare const InputText: ({ action, 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;
+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) => import("react/jsx-runtime").JSX.Element;
+export default InputText;

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

@@ -1,169 +1,172 @@
-/// <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;
-}
+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 type TypeInput = 'text' | 'number' | 'password' | 'currency';
+export 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 +1,4 @@
-import InputText from './InputText';
-export type { InputTextProps } from './InputText.props';
-export * from './InputText.props';
-export { InputText };
+import InputText from './InputText';
+export type { InputTextProps } from './InputText.props';
+export * from './InputText.props';
+export { InputText };