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

package/README.md

@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```

package/dist/assets/ArrowLeftIcon.d.ts

@@ -0,0 +1,2 @@
+declare const ArrowLeftIcon: () => import("react/jsx-runtime").JSX.Element;
+export default ArrowLeftIcon;

package/dist/assets/ArrowRightIcon.d.ts

@@ -0,0 +1,2 @@
+declare const ArrowRightIcon: () => import("react/jsx-runtime").JSX.Element;
+export default ArrowRightIcon;

package/dist/assets/InfoIcon.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const InfoIcon: () => JSX.Element;
-export default InfoIcon;
+declare const InfoIcon: () => import("react/jsx-runtime").JSX.Element;
+export default InfoIcon;

package/dist/assets/SideBarIcon.d.ts

@@ -0,0 +1,2 @@
+declare const SideBarIcon: () => import("react/jsx-runtime").JSX.Element;
+export default SideBarIcon;

package/dist/assets/TrashIcon.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const TrashIcon: () => JSX.Element;
-export default TrashIcon;
+declare const TrashIcon: () => import("react/jsx-runtime").JSX.Element;
+export default TrashIcon;

package/dist/assets/XIcon.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const XIcon: () => JSX.Element;
-export default XIcon;
+declare const XIcon: () => import("react/jsx-runtime").JSX.Element;
+export default XIcon;

package/dist/components/ActionList/ActionList.d.ts

@@ -1,16 +1,15 @@
-/// <reference types="react" />
-import type { ActionListProps } from './ActionList.props';
-import './ActionList.styles.scss';
-/**
- * It is necessary to create a list that receives
- * strings or Nodes as elements, clicking on
- * an element of the list should trigger an action.
- *
- * @param {ActionListProps}  ActionListProps - ActionList Props
- * @param {Object} ActionListProps.header - Action list header
- * @param {Array} ActionListProps.items - Items that are rendered in the list
- * @param {Array} ActionListProps.sections - Sections that are rendered in the list
- * @returns {symbol} - Returns the component
- */
-declare const ActionList: ({ header, items, sections }: ActionListProps) => JSX.Element;
-export default ActionList;
+import type { ActionListProps } from './ActionList.props';
+import './ActionList.styles.scss';
+/**
+ * It is necessary to create a list that receives
+ * strings or Nodes as elements, clicking on
+ * an element of the list should trigger an action.
+ *
+ * @param {ActionListProps}  ActionListProps - ActionList Props
+ * @param {Object} ActionListProps.header - Action list header
+ * @param {Array} ActionListProps.items - Items that are rendered in the list
+ * @param {Array} ActionListProps.sections - Sections that are rendered in the list
+ * @returns {symbol} - Returns the component
+ */
+declare const ActionList: ({ header, items, sections }: ActionListProps) => import("react/jsx-runtime").JSX.Element;
+export default ActionList;

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

@@ -1,34 +1,41 @@
-/// <reference types="react" />
-import type { IconName } from '../Icon';
-export interface ActionListItemProps {
-    /** Item content */
-    content?: React.ReactNode;
-    /** Action that is triggered when clicking on the item */
-    onClick?: () => void;
-    /** Icon that will or will not be displayed on the item */
-    icon?: IconName;
-    /**
-     * Determines if the item is active or not
-     */
-    isActive?: boolean;
-}
-export interface ActionListHeaderItemsProps {
-    /** Action list header illustration */
-    addon?: React.ReactNode;
-    /** Array to render in the list */
-    title?: string;
-}
-export interface ActionListSectionsProps {
-    /** Array to render in the list */
-    title?: string;
-    /** Text to display in the divider */
-    items?: ActionListItemProps[];
-}
-export interface ActionListProps {
-    /** List header */
-    header?: ActionListHeaderItemsProps;
-    /** Items that are rendered in the list */
-    items?: ActionListItemProps[];
-    /** Sections that are rendered in the list */
-    sections?: ActionListSectionsProps[];
-}
+import type { IconName } from '../Icon';
+export interface ActionListItemProps {
+    /** Item content */
+    content?: React.ReactNode;
+    /** Action that is triggered when clicking on the item */
+    onClick?: () => void;
+    /** Icon that will or will not be displayed on the item */
+    icon?: IconName;
+    /**
+     * Determines if the item is active or not
+     */
+    isActive?: boolean;
+    /**
+     * Label to use in automatic tests
+     */
+    ariaLabel?: string;
+    /**
+     * Determines if the item is disabled or not
+     */
+    isDisabled?: boolean;
+}
+export interface ActionListHeaderItemsProps {
+    /** Action list header illustration */
+    addon?: React.ReactNode;
+    /** Array to render in the list */
+    title?: string;
+}
+export interface ActionListSectionsProps {
+    /** Array to render in the list */
+    title?: string;
+    /** Text to display in the divider */
+    items?: ActionListItemProps[];
+}
+export interface ActionListProps {
+    /** List header */
+    header?: ActionListHeaderItemsProps;
+    /** Items that are rendered in the list */
+    items?: ActionListItemProps[];
+    /** Sections that are rendered in the list */
+    sections?: ActionListSectionsProps[];
+}

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

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

package/dist/components/Alert/Alert.d.ts

@@ -1,17 +1,16 @@
-/// <reference types="react" />
-import type { AlertProps } from './Alert.props';
-import './Alert.styles.scss';
-/**
- * Alert
- *
- * @example
- * <Alert appearance='success' icon='Check' content='Success message'/>
- * @param {AvatarProps} AlertProps - Alert props.
- * @param {IconName} AlertProps.icon
- * @param {string} AlertProps.content -
- * @param {Function} AlertProps.onDismiss -
- * @param {number} AlertProps.id -
- * @returns {symbol} The component.
- */
-declare const Alert: ({ icon, appearance, content, onDismiss, id, }: AlertProps) => JSX.Element;
-export default Alert;
+import type { AlertProps } from './Alert.props';
+import './Alert.styles.scss';
+/**
+ * Alert
+ *
+ * @example
+ * <Alert appearance='success' icon='Check' content='Success message'/>
+ * @param {AvatarProps} AlertProps - Alert props.
+ * @param {IconName} AlertProps.icon
+ * @param {string} AlertProps.content -
+ * @param {Function} AlertProps.onDismiss -
+ * @param {number} AlertProps.id -
+ * @returns {symbol} The component.
+ */
+declare const Alert: ({ icon, appearance, content, onDismiss, id, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

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

@@ -1,16 +1,15 @@
-/// <reference types="react" />
-import type { IconName } from '../Icon';
-export declare type AlertAppearanceType = 'info' | 'success' | 'warning' | 'danger' | 'majorWarning';
-export interface AlertProps {
-    icon?: IconName;
-    /**
-     * The appearance of alert to display
-     *
-     * @default 'info'
-     */
-    appearance: AlertAppearanceType;
-    content: React.ReactNode;
-    onDismiss?: (id?: number) => void;
-    id?: number;
-    duration?: number;
-}
+import type { IconName } from '../Icon';
+export type AlertAppearanceType = 'info' | 'success' | 'warning' | 'danger' | 'majorWarning';
+export interface AlertProps {
+    icon?: IconName;
+    /**
+     * The appearance of alert to display
+     *
+     * @default 'info'
+     */
+    appearance: AlertAppearanceType;
+    content: React.ReactNode;
+    onDismiss?: (id?: number) => void;
+    id?: number;
+    duration?: number;
+}

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

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

package/dist/components/AlertProvider/AlertProvider.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import type { AlertProviderItemProps, AlertProviderProps } from './AlertProvider.props';
-import './AlertProvider.styles.scss';
-declare const AlertProvider: ({ children, limit }: AlertProviderProps) => JSX.Element;
-export default AlertProvider;
-export declare const useShowAlert: () => (props: AlertProviderItemProps) => void;
+import type { AlertProviderItemProps, AlertProviderProps } from "./AlertProvider.props";
+import "./AlertProvider.styles.scss";
+declare const AlertProvider: ({ children, limit }: AlertProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default AlertProvider;
+export declare const useShowAlert: () => (props: AlertProviderItemProps) => number | null;
+export declare const useDeleteAlert: () => (id?: number) => void;

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

@@ -1,29 +1,33 @@
-/// <reference types="react" />
-import type { IconName } from '../Icon';
-export interface AlertProviderProps {
-    /**
-     * ** Content to display
-     */
-    children?: React.ReactNode;
-    /**
-     * ** Limit to content alerts
-     */
-    limit: number;
-}
-export interface AlertProviderItemProps {
-    icon?: IconName;
-    /**
-     * The appearance of alert to display
-     *
-     * @default 'info'
-     */
-    appearance: 'info' | 'success' | 'warning' | 'danger' | 'majorWarning';
-    content: React.ReactNode;
-    onDismiss?: (id?: number) => void;
-    id?: number;
-    duration: number;
-}
-export interface AlertContextType {
-    limit: number;
-    addAlert: (props: AlertProviderItemProps) => void;
-}
+import type { IconName } from "../Icon";
+export interface AlertProviderProps {
+    /**
+     * ** Content to display
+     */
+    children?: React.ReactNode;
+    /**
+     * ** Limit to content alerts
+     */
+    limit: number;
+}
+export interface AlertProviderItemProps {
+    icon?: IconName;
+    /**
+     * The appearance of alert to display
+     *
+     * @default 'info'
+     */
+    appearance: "info" | "success" | "warning" | "danger" | "majorWarning" | "loading";
+    content: React.ReactNode;
+    onDismiss?: (id?: number) => void;
+    id?: number;
+    duration: number | "infinite";
+    /**
+     * Dismissible alert
+     */
+    dismissible?: boolean;
+}
+export interface AlertContextType {
+    limit: number;
+    addAlert: (props: AlertProviderItemProps) => number | null;
+    deleteAlert: (id?: number) => void;
+}

package/dist/components/AlertProvider/context/AlertContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import type { AlertContextType } from '../AlertProvider.props';
-declare const AlertContext: import("react").Context<AlertContextType>;
-export default AlertContext;
+import type { AlertContextType } from "../AlertProvider.props";
+declare const AlertContext: import("react").Context<AlertContextType>;
+export default AlertContext;

package/dist/components/AlertProvider/context/index.d.ts

@@ -1,2 +1,2 @@
-import AlertProvider from './AlertContext';
-export default AlertProvider;
+import AlertProvider from './AlertContext';
+export default AlertProvider;

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

@@ -1,3 +1,3 @@
-import AlertProvider, { useShowAlert } from './AlertProvider';
-export * from './AlertProvider.props';
-export { AlertProvider, useShowAlert };
+import AlertProvider, { useShowAlert, useDeleteAlert } from "./AlertProvider";
+export * from "./AlertProvider.props";
+export { AlertProvider, useShowAlert, useDeleteAlert };

package/dist/components/AlphaAttributeInput/AlphaAttributeInput.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { AlphaAttributeInputProps } from './AlphaAttributeInput.props';
-import './AlphaAttributeInput.styles.scss';
-declare const AlphaAttributeInput: ({ items, divider, label, isRequired, }: AlphaAttributeInputProps) => JSX.Element;
-export default AlphaAttributeInput;
+import type { AlphaAttributeInputProps } from './AlphaAttributeInput.props';
+import './AlphaAttributeInput.styles.scss';
+declare const AlphaAttributeInput: ({ items, divider, label, isRequired, }: AlphaAttributeInputProps) => import("react/jsx-runtime").JSX.Element;
+export default AlphaAttributeInput;

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

@@ -1,22 +1,21 @@
-/// <reference types="react" />
-export declare type AlphaAttributeInputItem = {
-    label: string;
-    value?: string;
-    type: string;
-    onChange?: (value: string) => void;
-    onBlur?: () => void;
-    onFocus?: () => void;
-    placeholder?: string;
-    min?: number;
-    max?: number;
-    minLength?: number;
-    maxLength?: number;
-};
-export interface AlphaAttributeInputProps {
-    label?: string;
-    items: AlphaAttributeInputItem[];
-    error?: string;
-    divider?: string;
-    helperText?: React.ReactNode;
-    isRequired?: boolean;
-}
+export type AlphaAttributeInputItem = {
+    label: string;
+    value?: string;
+    type: string;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    minLength?: number;
+    maxLength?: number;
+};
+export interface AlphaAttributeInputProps {
+    label?: string;
+    items: AlphaAttributeInputItem[];
+    error?: string;
+    divider?: string;
+    helperText?: React.ReactNode;
+    isRequired?: boolean;
+}

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

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

package/dist/components/AlphaBadge/AlphaBadge.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { AlphaBadgeProps } from './AlphaBadge.props';
-import './AlphaBadge.styles.scss';
-declare const AlphaBadge: ({ theme: themeProp, children, isSuccess, isWarning, isDanger, isPrimary, }: AlphaBadgeProps) => JSX.Element;
-export default AlphaBadge;
+import type { AlphaBadgeProps } from "./AlphaBadge.props";
+import "./AlphaBadge.styles.scss";
+declare const AlphaBadge: ({ theme: themeProp, children, isSuccess, isWarning, isDanger, isPrimary, }: AlphaBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default AlphaBadge;

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

@@ -1,16 +1,15 @@
-/// <reference types="react" />
-import { ThemeType } from '../../types';
-export interface AlphaBadgeProps {
-    /** Add styles of kiban tools */
-    theme?: ThemeType;
-    /** Component content */
-    children: React.ReactNode;
-    /** Add success styles */
-    isSuccess?: boolean;
-    /** Add warning styles */
-    isWarning?: boolean;
-    /** Add danger styles */
-    isDanger?: boolean;
-    /** Add primary styles */
-    isPrimary?: boolean;
-}
+import type { ThemeType } from "../../types";
+export interface AlphaBadgeProps {
+    /** Add styles of kiban tools */
+    theme?: ThemeType;
+    /** Component content */
+    children: React.ReactNode;
+    /** Add success styles */
+    isSuccess?: boolean;
+    /** Add warning styles */
+    isWarning?: boolean;
+    /** Add danger styles */
+    isDanger?: boolean;
+    /** Add primary styles */
+    isPrimary?: boolean;
+}

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

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

package/dist/components/AlphaButton/AlphaButton.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { AlphaButtonProps } from './AlphaButton.props';
-import './AlphaButton.styles.scss';
-declare const AlphaButton: ({ children, icon, spinnerIcon, iconPosition, id, isDanger, isDisabled, isFullWidth, isLink, isLoading, isPrimary, isSubmit, isTertiary, size, textAlign, isRounded, theme: themeProp, onClick, onFocus, onBlur, onKeyPress, onKeyUp, onKeyDown, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, }: AlphaButtonProps) => JSX.Element;
-export default AlphaButton;
+import type { AlphaButtonProps } from "./AlphaButton.props";
+import "./AlphaButton.styles.scss";
+declare const AlphaButton: ({ ariaLabel, children, icon, spinnerIcon, iconPosition, id, isDanger, isDisabled, isFullWidth, isLink, isLoading, isPrimary, isSubmit, isTertiary, size, textAlign, isRounded, theme: themeProp, onClick, onFocus, onBlur, onKeyPress, onKeyUp, onKeyDown, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, }: AlphaButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default AlphaButton;

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

@@ -1,35 +1,39 @@
-import type { ActionProps, IconProp, ThemeType } from '../../types';
-export interface AlphaButtonProps extends ActionProps {
-    /** Content which will be displayed inside the button  */
-    children?: string;
-    /** Sets primary style to the button */
-    isPrimary?: boolean;
-    /** Sets tertiary light style to the button */
-    isTertiary?: boolean;
-    /** Sets danger style to the button */
-    isDanger?: boolean;
-    /** Sets the size of the button, adjusting the font, margin and padding dimensions */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Changes the text alignment
-     * @default 'center'
-     **/
-    textAlign?: 'left' | 'center' | 'right';
-    /** Sets the button width to 100% of its parent container */
-    isFullWidth?: boolean;
-    /** Adds link style to the button, removing padding dimensions */
-    isLink?: boolean;
-    /** Renders an icon before or next to the content of the button */
-    icon?: IconProp;
-    /** Renders an icon spinner */
-    spinnerIcon?: IconProp;
-    /**
-     * Sets the icon position
-     * @default 'left'
-     */
-    iconPosition?: 'left' | 'right';
-    /** Round the button when only the icon exists*/
-    isRounded?: boolean;
-    /** Add styles of kiban tools */
-    theme?: ThemeType;
-}
+import type { ActionProps, IconProp, ThemeType } from '../../types';
+export interface AlphaButtonProps extends ActionProps {
+    /**
+     * Label to use in automatic tests
+     */
+    ariaLabel?: string;
+    /** Content which will be displayed inside the button  */
+    children?: string;
+    /** Sets primary style to the button */
+    isPrimary?: boolean;
+    /** Sets tertiary light style to the button */
+    isTertiary?: boolean;
+    /** Sets danger style to the button */
+    isDanger?: boolean;
+    /** Sets the size of the button, adjusting the font, margin and padding dimensions */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Changes the text alignment
+     * @default 'center'
+     **/
+    textAlign?: 'left' | 'center' | 'right';
+    /** Sets the button width to 100% of its parent container */
+    isFullWidth?: boolean;
+    /** Adds link style to the button, removing padding dimensions */
+    isLink?: boolean;
+    /** Renders an icon before or next to the content of the button */
+    icon?: IconProp;
+    /** Renders an icon spinner */
+    spinnerIcon?: IconProp;
+    /**
+     * Sets the icon position
+     * @default 'left'
+     */
+    iconPosition?: 'left' | 'right';
+    /** Round the button when only the icon exists*/
+    isRounded?: boolean;
+    /** Add styles of kiban tools */
+    theme?: ThemeType;
+}

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

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

package/dist/components/AlphaChip/AlphaChip.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { AlphaChipProps } from './AlphaChip.props';
-import './AlphaChip.styles.scss';
-declare const AlphaChip: ({ children, hasError, removeButtonIcon, isDisabled, theme, onRemove, }: AlphaChipProps) => JSX.Element;
-export default AlphaChip;
+import type { AlphaChipProps } from "./AlphaChip.props";
+import "./AlphaChip.styles.scss";
+declare const AlphaChip: ({ children, hasError, removeButtonIcon, isDisabled, theme, onRemove, }: AlphaChipProps) => import("react/jsx-runtime").JSX.Element;
+export default AlphaChip;