@kaio-xyz/design-system 1.1.15 → 1.1.17

package/dist/index.d.ts

@@ -1,24 +1,314 @@
-import './styles/_vars.css';
-import './styles/main.css';
-export { Badge } from "@/components/atoms/badge";
-export { Button, ButtonProps } from "@/components/atoms/button";
-export { Stack } from "@/components/atoms/stack";
-export { TextField } from "@/components/atoms/text-field";
-export { Container } from "@/components/atoms/container";
-export { PasswordField, ValidatePasswordField } from "@/components/molecules/password-field";
-export { Select } from "@/components/atoms/select";
-export { FormSelect } from "@/components/molecules/form-select";
-export { SpinnedIcon } from "@/components/atoms/spinned-icon";
-export { Loader } from "@/components/atoms/loader";
-export { Checkbox } from "@/components/atoms/checkbox";
-export { Clipboard } from "@/components/atoms/clipboard";
-export { Stepper, Step } from "@/components/atoms/stepper";
-export { List, ListItem } from "@/components/atoms/list";
-export { Accordion } from "@/components/atoms/accordion";
-export { Modal } from "@/components/atoms/modal";
-export { InfoModal, OtpModal, ConfirmModal, ConfirmModalProps } from "@/components/molecules/modal";
-export { DropdownMenu } from "@/components/atoms/dropdown-menu";
-export { Tooltip } from "@/components/atoms/tooltip";
-export { InvestmentGraph, TimeFrame, periodOptions, Timeframes, DataPoint } from "@/components/molecules/investments-graph";
-export { InvestmentsHeader } from "@/components/molecules/investments-header";
-export { Table, TableColumn } from "@/components/atoms/table";
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, PropsWithChildren, InputHTMLAttributes, JSX, Dispatch, SetStateAction, HTMLAttributes } from 'react';
+import { GroupBase, Props as Props$2, SingleValue } from 'react-select';
+export { SingleValue } from 'react-select';
+import { FieldValues, ControllerProps, Control, Path } from 'react-hook-form';
+import * as _radix_ui_react_accordion from '@radix-ui/react-accordion';
+import { TableProps as TableProps$1 } from 'react-data-table-component';
+export { TableColumn } from 'react-data-table-component';
+
+declare const BadgeStatuses: {
+    readonly success: "success";
+    readonly rejected: "rejected";
+    readonly none: "none";
+    readonly warning: "warning";
+    readonly loading: "loading";
+};
+type BadgeStatus = typeof BadgeStatuses[keyof typeof BadgeStatuses];
+type BadgeProps = {
+    children: ReactNode;
+    fullWidth?: boolean;
+    dataTest?: string;
+    status?: BadgeStatus;
+    size?: "s" | "m" | "l";
+    reverted?: boolean;
+    hasIcon?: boolean;
+    className?: string;
+};
+declare const Badge: ({ className, children, status, fullWidth, dataTest, reverted, size, hasIcon, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+type CommonButtonProps = {
+    variant?: "primary" | "secondary" | "info" | "warning" | "danger" | "success";
+    fullWidth?: boolean;
+    size?: "small" | "normal" | "large";
+    isInverted?: boolean;
+    isLoading?: boolean;
+    icon?: SvgIcon | null;
+    iconSize?: number;
+};
+type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    disabled?: boolean;
+    onClick?: never;
+};
+type ButtonProps = {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    href?: never;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+type PolymorphicProps = ButtonProps | AnchorProps;
+type Props$1 = CommonButtonProps & PolymorphicProps;
+type RefType = HTMLButtonElement | HTMLAnchorElement;
+declare const Button: react.ForwardRefExoticComponent<Props$1 & react.RefAttributes<RefType>>;
+
+type StackProps = PropsWithChildren & {
+    space?: "none" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+    position?: "vertical" | "horizontal" | "horizontal-end" | "horizontal-space" | "horizontal-start" | "horizontal-center";
+    className?: string;
+    fullHeight?: boolean;
+    fullWidth?: boolean;
+    dataTest?: string;
+    dataAlignItems?: "center" | "flex-end" | "flex-start";
+    dataCapitalize?: boolean;
+    dataMarginTop?: boolean;
+    dataMarginBottom?: boolean;
+    dataMarginLeft?: boolean;
+    dataPaddingBottom?: boolean;
+};
+declare const Stack: ({ children, space, className, position, fullHeight, fullWidth, dataTest, dataAlignItems, dataCapitalize, dataMarginTop, dataMarginBottom, dataMarginLeft, dataPaddingBottom, ...rest }: StackProps) => react_jsx_runtime.JSX.Element;
+
+type TextFieldAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "placeholder">;
+type TextFieldProps = TextFieldAttributes & {
+    hint?: string | ReactNode;
+    label?: ReactNode;
+    invalid?: boolean;
+    fullWidth?: boolean;
+    button?: JSX.Element;
+    size?: "default" | "small";
+    noPadding?: boolean;
+    floatingLabel?: boolean;
+};
+declare const TextField: react.ForwardRefExoticComponent<TextFieldAttributes & {
+    hint?: string | ReactNode;
+    label?: ReactNode;
+    invalid?: boolean;
+    fullWidth?: boolean;
+    button?: JSX.Element;
+    size?: "default" | "small";
+    noPadding?: boolean;
+    floatingLabel?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type ContainerProps = PropsWithChildren<{
+    size?: "full" | "small" | "medium" | "large" | "extra";
+    noPadding?: boolean;
+    className?: string;
+}>;
+declare const Container: ({ children, className, size, noPadding, ...attributes }: ContainerProps) => react_jsx_runtime.JSX.Element;
+
+type PasswordFieldProps = Omit<TextFieldProps, "type" | "button">;
+declare const PasswordField: react.ForwardRefExoticComponent<PasswordFieldProps & react.RefAttributes<HTMLInputElement>>;
+
+declare const ValidatePasswordField: react.ForwardRefExoticComponent<PasswordFieldProps & {
+    setIsPasswordValid: Dispatch<SetStateAction<boolean>>;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type SelectOption<T = string> = {
+    value: T;
+    label: string;
+    icon?: SvgIcon;
+};
+type SelectProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Props$2<Option, IsMulti, Group> & {
+    label?: ReactNode;
+    dataTest: string;
+    error?: string;
+};
+declare const Select: {
+    <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, label, dataTest, isDisabled, className, error, components: customComponents, ...rest }: SelectProps<Option, IsMulti, Group>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type FormSelectProps<T extends FieldValues, Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Omit<SelectProps<Option, IsMulti, Group>, "value" | "onChange" | "onBlur" | "name"> & Pick<ControllerProps<T>, "rules" | "defaultValue"> & {
+    control: Control<T>;
+    name: Path<T>;
+};
+declare const FormSelect: {
+    <T extends FieldValues, Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ name, control, rules, defaultValue, ...rest }: FormSelectProps<T, Option, IsMulti, Group>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type SpinnedIconProps = {
+    icon?: SvgIcon;
+    size?: number;
+    duration?: number;
+    className?: string;
+};
+declare const SpinnedIcon: ({ size, duration, className, icon: Icon, ...rest }: SpinnedIconProps) => react_jsx_runtime.JSX.Element;
+
+type LoaderProps = PropsWithChildren<{
+    fullPage?: boolean;
+    text?: string;
+    isLightOverlay?: boolean;
+}>;
+declare const Loader: ({ text, fullPage, isLightOverlay, children }: LoaderProps) => react_jsx_runtime.JSX.Element;
+
+type CheckboxAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "id" | "size">;
+type Props = CheckboxAttributes & {
+    id?: string;
+    label?: ReactNode;
+    verticalAlign?: "start" | "center" | "end";
+    dataTest: string;
+    size?: "small" | "medium";
+    variant?: "primary" | "secondary";
+    indeterminate?: boolean;
+};
+declare const Checkbox: {
+    ({ className, disabled, id, label, verticalAlign, onChange, dataTest, size, variant, indeterminate, checked, ...attributes }: Props): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ClipboardProps = {
+    value: string;
+    trim?: boolean;
+    trimLength?: number;
+};
+declare const Clipboard: ({ value, trim, trimLength }: ClipboardProps) => react_jsx_runtime.JSX.Element;
+
+type StepperProps = {
+    children: ReactNode;
+};
+declare const Stepper: ({ children }: StepperProps) => react_jsx_runtime.JSX.Element;
+
+type StepProps = {
+    label: string;
+    isCompleted?: boolean;
+    isCurrent?: boolean;
+    iconSize?: number;
+    key?: string;
+};
+declare const Step: ({ key, label, iconSize, isCompleted, isCurrent }: StepProps) => react_jsx_runtime.JSX.Element;
+
+type ListProps = {
+    label?: string;
+    children?: ReactNode;
+};
+declare const List: ({ label, children }: ListProps) => react_jsx_runtime.JSX.Element;
+
+type ListItem = {
+    value: string;
+    label: string;
+    key?: string;
+};
+declare const ListItem: ({ value, label, key }: ListItem) => react_jsx_runtime.JSX.Element;
+
+declare const Accordion: {
+    Root: ({ children, ...rest }: (_radix_ui_react_accordion.AccordionSingleProps | _radix_ui_react_accordion.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+    Item: react.ForwardRefExoticComponent<{
+        icon?: SvgIcon;
+        value: string;
+        triggerClassName?: string;
+        dataTest?: string;
+        trigger: react.ReactNode;
+        hasChildrenPadding?: boolean;
+    } & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLDivElement | null>>;
+};
+
+type ModalProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+    id?: string;
+    visible?: boolean;
+    title?: string;
+    actions?: ReactNode[];
+    size?: "default" | "small" | "medium" | "large";
+    isFullWidth?: boolean;
+    isScrollable?: boolean;
+    onClose?: () => void;
+};
+declare const Modal: ({ visible, ...props }: ModalProps) => react.ReactPortal | null;
+
+type ConfirmModalProps$1 = Omit<ModalProps, "actions"> & {
+    isLoading?: boolean;
+    cancelDataTest: string;
+    confirmDataTest: string;
+    isConfirmDisabled?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirmClick: () => void;
+};
+declare const ConfirmModal: ({ children, isLoading, cancelDataTest, confirmDataTest, isConfirmDisabled, confirmText, cancelText, onClose, onConfirmClick, ...props }: ConfirmModalProps$1) => react_jsx_runtime.JSX.Element;
+
+type OtpModalProps = Omit<ConfirmModalProps$1, "cancelDataTest" | "confirmDataTest" | "title"> & {
+    code: string;
+    setCode: Dispatch<SetStateAction<string>>;
+};
+declare const OtpModal: ({ code, setCode, onConfirmClick, isLoading, ...rest }: OtpModalProps) => react_jsx_runtime.JSX.Element;
+
+type ConfirmModalProps = Omit<ModalProps, "actions"> & {
+    acceptDataTest: string;
+    acceptText?: string;
+};
+declare const InfoModal: ({ children, acceptDataTest, acceptText, onClose, ...props }: ConfirmModalProps) => react_jsx_runtime.JSX.Element;
+
+declare const DropdownMenu: {
+    Root: ({ text, children, icon: Icon, disabled, body, variant, ...rest }: {
+        children?: react.ReactNode | undefined;
+    } & {
+        text?: string;
+        icon?: SvgIcon;
+        disabled?: boolean;
+        body?: React.ReactNode;
+        variant?: CommonButtonProps["variant"];
+    }) => react_jsx_runtime.JSX.Element;
+    Item: ({ children, disabled, ...rest }: {
+        children?: react.ReactNode | undefined;
+    } & {
+        disabled?: boolean;
+        onClick: () => void;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+type TooltipProps = PropsWithChildren<{
+    title: string;
+    description?: ReactNode;
+}>;
+declare const Tooltip: ({ children, title, description }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+type DataPoint = {
+    date: string;
+    value: number;
+};
+declare const Timeframes: {
+    readonly month: "month";
+    readonly quarter: "quarter";
+    readonly halfYear: "half-year";
+    readonly year: "year";
+};
+type TimeFrame = typeof Timeframes[keyof typeof Timeframes];
+declare const periodOptions: ({
+    value: "month";
+    label: string;
+} | {
+    value: "quarter";
+    label: string;
+} | {
+    value: "half-year";
+    label: string;
+} | {
+    value: "year";
+    label: string;
+})[];
+type InvestmentGraphProps = {
+    dataPoints: DataPoint[];
+    timeFrame: SingleValue<SelectOption<TimeFrame>>;
+    setTimeFrame: Dispatch<SetStateAction<SingleValue<SelectOption<TimeFrame>>>>;
+    header?: ReactNode;
+};
+declare const InvestmentGraph: ({ dataPoints, timeFrame, header, setTimeFrame, }: InvestmentGraphProps) => react_jsx_runtime.JSX.Element;
+
+type InvestmentsHeaderProps = {
+    currentTotalInvestmentValue: number;
+    currentGainLossValue: number;
+    currentGainLossPercentageValue: number;
+};
+declare const InvestmentsHeader: ({ currentTotalInvestmentValue, currentGainLossValue, currentGainLossPercentageValue, }: InvestmentsHeaderProps) => react_jsx_runtime.JSX.Element;
+
+type TableProps<T> = TableProps$1<T> & {
+    dataTest: string;
+    isLoading?: boolean;
+};
+declare const Table: <T>({ data, columns, dataTest, customStyles, isLoading, onRowClicked, ...rest }: TableProps<T>) => react_jsx_runtime.JSX.Element | null;
+
+export { Accordion, Badge, Button, Checkbox, Clipboard, ConfirmModal, Container, DropdownMenu, FormSelect, InfoModal, InvestmentGraph, InvestmentsHeader, List, ListItem, Loader, Modal, OtpModal, PasswordField, Select, SpinnedIcon, Stack, Step, Stepper, Table, TextField, Timeframes, Tooltip, ValidatePasswordField, periodOptions };
+export type { ButtonProps, ConfirmModalProps$1 as ConfirmModalProps, DataPoint, TimeFrame };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kaio-xyz/design-system",
-    "version": "1.1.15",
+    "version": "1.1.17",
     "description": "",
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.js",
@@ -46,6 +46,7 @@
         "react": "19.2.1",
         "react-dom": "19.2.1",
         "rollup": "4.53.3",
+        "rollup-plugin-dts": "6.3.0",
         "rollup-plugin-postcss": "4.0.2",
         "storybook": "10.1.4",
         "tslib": "2.8.1",