ics-ui-kit 0.1.0-alpha.8 → 0.1.0

package/dist/components/tag/Tag.d.ts

@@ -1,1106 +1,62 @@
-import { default as React } from 'react';
-import { VariantProps, TVReturnType } from 'tailwind-variants';
+import { default as React, PropsWithChildren } from 'react';
+import { LucideIcon } from 'lucide-react';
 import { ButtonProps } from '../button/button/Button';
-import { TVConfig } from 'tailwind-variants/dist/config.js';
-declare const tagVariants: TVReturnType<{
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    container: string;
-    base: string;
-    button: string;
-    divider: string;
-    closeButton: string;
-    icon: string;
-}, undefined, TVConfig<{
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}>, {
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    container: string;
-    base: string;
-    button: string;
-    divider: string;
-    closeButton: string;
-    icon: string;
-}, TVReturnType<{
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    container: string;
-    base: string;
-    button: string;
-    divider: string;
-    closeButton: string;
-    icon: string;
-}, undefined, TVConfig<{
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-export type TagProps = ButtonProps & VariantProps<typeof tagVariants> & {
-    onClose?: () => void;
+export interface TagBaseVariants {
+    status?: "default" | "info" | "success" | "warning" | "error";
+    focus?: "low" | "high";
+    size?: "sm" | "md" | "lg";
+}
+export type TagBaseProps = React.HTMLAttributes<HTMLElement> & TagBaseVariants & {
+    asChild?: boolean;
+};
+export declare const TagBase: {
+    ({ asChild, children, ...props }: PropsWithChildren<TagBaseProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
-export declare const Tag: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps< TVReturnType<{
-    variant: {
-        primary: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        text: string;
-    };
-    status: {
-        default: string;
-        info: string;
-        success: string;
-        warning: string;
-        error: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-}, undefined, "inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md font-medium text-primary-fg transition-all disabled:pointer-events-none disabled:opacity-50", TVConfig<{
-    variant: {
-        primary: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        text: string;
-    };
-    status: {
-        default: string;
-        info: string;
-        success: string;
-        warning: string;
-        error: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        text: string;
-    };
-    status: {
-        default: string;
-        info: string;
-        success: string;
-        warning: string;
-        error: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-}>, {
-    variant: {
-        primary: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        text: string;
-    };
-    status: {
-        default: string;
-        info: string;
-        success: string;
-        warning: string;
-        error: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-}, undefined, TVReturnType<{
-    variant: {
-        primary: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        text: string;
-    };
-    status: {
-        default: string;
-        info: string;
-        success: string;
-        warning: string;
-        error: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-}, undefined, "inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md font-medium text-primary-fg transition-all disabled:pointer-events-none disabled:opacity-50", TVConfig<{
-    variant: {
-        primary: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        text: string;
-    };
-    status: {
-        default: string;
-        info: string;
-        success: string;
-        warning: string;
-        error: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        text: string;
-    };
-    status: {
-        default: string;
-        info: string;
-        success: string;
-        warning: string;
-        error: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-}>, unknown, unknown, undefined>>> & {
+export interface TagButtonVariants {
+    size?: "sm" | "md" | "lg";
+    clickable?: boolean;
+    position?: "standalone" | "left" | "right" | "middle";
+}
+export type TagButtonProps = React.HTMLAttributes<HTMLElement> & TagButtonVariants & Omit<TagBaseVariants, "size"> & {
     asChild?: boolean;
-} & {
-    startIcon?: React.ElementType;
-    endIcon?: React.ElementType;
-    containerClassName?: string;
-    iconClassName?: string;
-} & {
-    children?: React.ReactNode | undefined;
-} & VariantProps< TVReturnType<{
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    container: string;
-    base: string;
-    button: string;
-    divider: string;
-    closeButton: string;
-    icon: string;
-}, undefined, TVConfig<{
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}>, {
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    container: string;
-    base: string;
-    button: string;
-    divider: string;
-    closeButton: string;
-    icon: string;
-}, TVReturnType<{
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    container: string;
-    base: string;
-    button: string;
-    divider: string;
-    closeButton: string;
-    icon: string;
-}, undefined, TVConfig<{
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}, {
-    status: {
-        default: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        info: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        success: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        warning: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-        error: {
-            button: string;
-            divider: string;
-            closeButton: string;
-        };
-    };
-    focus: {
-        low: {
-            base: string;
-            closeButton: string;
-            button: string;
-        };
-        high: {
-            base: string;
-            button: string;
-            closeButton: string;
-        };
-    };
-    size: {
-        sm: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            button: string;
-            closeButton: string;
-            container: string;
-            icon: string;
-        };
-    };
-}>, unknown, unknown, undefined>>> & {
-    onClose?: () => void;
-} & React.RefAttributes<HTMLDivElement>>;
-export {};
+};
+export declare const TagButton: {
+    (props: PropsWithChildren<TagButtonProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface TagCloseVariants {
+    size?: "sm" | "md" | "lg";
+    focus?: "low" | "high";
+}
+export type TagCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & TagCloseVariants & Omit<TagBaseVariants, "size"> & {
+    icon?: LucideIcon;
+    tag?: React.ElementType;
+};
+export declare const TagClose: {
+    (props: TagCloseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface TagDividerVariants {
+    status?: "default" | "info" | "success" | "warning" | "error";
+}
+export type TagDividerProps = React.HTMLAttributes<HTMLDivElement> & TagDividerVariants;
+export declare const TagDivider: {
+    (props: TagDividerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface TagWrapperVariants {
+    size?: "sm" | "md" | "lg";
+}
+export type TagWrapperProps = React.HTMLAttributes<HTMLDivElement> & TagWrapperVariants;
+export declare const TagWrapper: (props: TagWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export type TagProps = PropsWithChildren<Pick<TagBaseVariants, "focus" | "size"> & ButtonProps & {
+    onLabelClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    buttonClassName?: string;
+}>;
+export declare const Tag: {
+    (props: TagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};