@techsio/ui-kit 0.0.0

package/dist/organisms/header.js

@@ -0,0 +1,245 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { Button } from "../atoms/button.js";
+import { tv } from "../utils.js";
+const headerVariants = tv({
+    slots: {
+        root: [
+            'w-full @container bg-header-bg',
+            'flex justify-between',
+            'max-w-header-max',
+            'relative'
+        ],
+        desktop: 'flex @max-header-desktop:hidden w-full',
+        mobile: [
+            'data-[open=false]:hidden @header-desktop:hidden *:flex *:flex-col absolute top-full data-[position=left]:left-0 data-[position=right]:right-0'
+        ],
+        container: [
+            'grid gap-header-container w-full',
+            'data-[position=start]:justify-items-start-safe',
+            'data-[position=center]:justify-items-center-safe',
+            'data-[position=end]:justify-items-end-safe'
+        ],
+        nav: [
+            'flex items-center flex-1',
+            '@max-header-desktop:bg-header-bg'
+        ],
+        navItem: [
+            'bg-header-nav-item-bg hover:bg-header-nav-item-bg-hover',
+            'data-[active=true]:text-header-nav-fg-active',
+            'data-[active=true]:font-header-nav-active',
+            'min-w-max'
+        ],
+        actions: [
+            'flex items-center',
+            'shrink-0'
+        ],
+        actionItem: [
+            'text-header-actions-fg',
+            'hover:text-header-actions-fg-hover'
+        ],
+        hamburger: [
+            '@header-desktop:hidden',
+            'items-center',
+            'text-header-hamburger-fg hover:text-header-hamburger-fg-hover',
+            'transition-colors duration-header',
+            'cursor-pointer'
+        ]
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'navItem'
+            ],
+            class: [
+                'justify-start font-header-nav text-header-nav-fg hover:text-header-nav-fg-hover',
+                'cursor-pointer'
+            ]
+        }
+    ],
+    variants: {
+        direction: {
+            vertical: {
+                root: [
+                    'flex-col'
+                ]
+            },
+            horizontal: {
+                root: [
+                    'flex-row'
+                ]
+            }
+        },
+        size: {
+            sm: {
+                nav: 'gap-header-nav-sm',
+                navItem: 'p-header-item-sm text-header-item-sm',
+                actions: 'gap-header-actions-sm',
+                actionItem: 'text-header-item-sm p-header-item-sm',
+                hamburger: 'text-header-hamburger-sm p-header-hamburger-sm'
+            },
+            md: {
+                nav: 'gap-header-nav-md',
+                navItem: 'p-header-item-md text-header-item-md',
+                actions: 'gap-header-actions-md',
+                actionItem: 'text-header-item-md p-header-item-md',
+                hamburger: 'text-header-hamburger-md p-header-hamburger-md'
+            },
+            lg: {
+                nav: 'gap-header-nav-lg',
+                navItem: 'p-header-item-lg text-header-item-lg',
+                actions: 'gap-header-actions-lg',
+                actionItem: 'text-header-item-lg p-header-item-lg',
+                hamburger: 'text-header-hamburger-lg p-header-hamburger-lg'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        direction: 'horizontal'
+    }
+});
+const HeaderContext = /*#__PURE__*/ createContext({
+    isMobileMenuOpen: false,
+    setIsMobileMenuOpen: ()=>{},
+    toggleMobileMenu: ()=>{}
+});
+function Header({ size = 'md', direction = 'horizontal', className, children, ref, ...props }) {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const toggleMobileMenu = ()=>setIsMobileMenuOpen((prev)=>!prev);
+    const { root } = headerVariants({
+        size,
+        direction
+    });
+    return /*#__PURE__*/ jsx(HeaderContext.Provider, {
+        value: {
+            size,
+            isMobileMenuOpen,
+            setIsMobileMenuOpen,
+            toggleMobileMenu
+        },
+        children: /*#__PURE__*/ jsx("header", {
+            ref: ref,
+            className: root({
+                className
+            }),
+            ...props,
+            children: children
+        })
+    });
+}
+Header.Desktop = function({ className, children, ref, ...props }) {
+    const { desktop } = headerVariants();
+    return /*#__PURE__*/ jsx("section", {
+        ref: ref,
+        className: desktop({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Header.Mobile = function({ className, children, ref, position = 'right', ...props }) {
+    const { isMobileMenuOpen } = useContext(HeaderContext);
+    const { mobile } = headerVariants();
+    return /*#__PURE__*/ jsx("section", {
+        ref: ref,
+        className: mobile({
+            className
+        }),
+        "data-open": isMobileMenuOpen,
+        "data-position": position,
+        ...props,
+        children: children
+    });
+};
+Header.Container = function({ className, children, ref, position, ...props }) {
+    const { container } = headerVariants();
+    return /*#__PURE__*/ jsx("section", {
+        ref: ref,
+        className: container({
+            className
+        }),
+        "data-position": position,
+        ...props,
+        children: children
+    });
+};
+Header.Nav = function({ className, children, ref, size: overrideSize, ...props }) {
+    const { size: contextSize } = useContext(HeaderContext);
+    const size = overrideSize ?? contextSize ?? 'md';
+    const { nav } = headerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("nav", {
+        ref: ref,
+        className: nav({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Header.NavItem = function({ active = false, className, children, ref, size: overrideSize, ...props }) {
+    const context = useContext(HeaderContext);
+    const size = overrideSize ?? context.size ?? 'md';
+    const { navItem } = headerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: navItem({
+            className
+        }),
+        "data-active": active || void 0,
+        ...props,
+        children: children
+    });
+};
+Header.Actions = function({ className, children, ref, size: overrideSize, ...props }) {
+    const context = useContext(HeaderContext);
+    const size = overrideSize ?? context.size ?? 'md';
+    const { actions } = headerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: actions({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Header.ActionItem = function({ className, children, ref, size: overrideSize, ...props }) {
+    const context = useContext(HeaderContext);
+    const size = overrideSize ?? context.size ?? 'md';
+    const { actionItem } = headerVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: actionItem({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Header.Hamburger = function({ className }) {
+    const { toggleMobileMenu, isMobileMenuOpen } = useContext(HeaderContext);
+    const { hamburger } = headerVariants();
+    return /*#__PURE__*/ jsx(Button, {
+        theme: "unstyled",
+        type: "button",
+        "aria-expanded": isMobileMenuOpen,
+        "aria-label": "Toggle mobile menu",
+        onClick: toggleMobileMenu,
+        size: "current",
+        className: hamburger({
+            className
+        }),
+        icon: isMobileMenuOpen ? 'icon-[mdi--close]' : 'icon-[mdi--menu]'
+    });
+};
+export { Header, HeaderContext };

package/dist/organisms/table.js

@@ -0,0 +1,233 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { tv } from "../utils.js";
+const tableVariants = tv({
+    slots: {
+        root: [
+            'w-full border-collapse',
+            'bg-table-bg text-table-fg'
+        ],
+        caption: [
+            'text-table-caption-fg',
+            'text-start font-table-caption'
+        ],
+        header: [
+            'bg-table-header-bg',
+            'text-table-header-fg font-table-header'
+        ],
+        body: '',
+        footer: [
+            'bg-table-footer-bg',
+            'text-table-footer-fg font-table-footer'
+        ],
+        row: [
+            'border-b-(length:--border-width-table) border-table-border',
+            'data-[selected=true]:bg-table-row-bg-selected',
+            'transition-colors duration-200'
+        ],
+        columnHeader: [
+            'text-start data-[numeric=true]:text-end',
+            'font-table-header'
+        ],
+        cell: [
+            'text-start data-[numeric=true]:text-end'
+        ]
+    },
+    variants: {
+        variant: {
+            line: {
+                root: '',
+                row: 'border-b-(length:--border-width-table) border-table-border'
+            },
+            outline: {
+                root: 'border-(length:--border-width-table) border-table-border rounded-table shadow-table-outline'
+            },
+            striped: {
+                row: 'odd:bg-table-row-striped-bg-primary even:bg-table-row-striped-bg-secondary'
+            }
+        },
+        interactive: {
+            true: {
+                row: 'hover:bg-table-row-bg-hover cursor-pointer'
+            }
+        },
+        size: {
+            sm: {
+                cell: 'text-table-sm p-table-cell-sm',
+                columnHeader: 'text-table-sm p-table-cell-sm',
+                caption: 'text-table-caption-sm p-table-caption-sm'
+            },
+            md: {
+                cell: 'text-table-md p-table-cell-md',
+                columnHeader: 'text-table-md p-table-cell-md',
+                caption: 'text-table-caption-md p-table-caption-md'
+            },
+            lg: {
+                cell: 'text-table-lg p-table-cell-lg',
+                columnHeader: 'text-table-lg p-table-cell-lg',
+                caption: 'text-table-caption-lg p-table-caption-lg'
+            }
+        },
+        stickyHeader: {
+            true: {
+                columnHeader: 'sticky top-0 z-10 bg-table-header-bg'
+            }
+        },
+        stickyFirstColumn: {
+            true: {
+                columnHeader: [
+                    'first:sticky first:start-0 first:z-20',
+                    'bg-table-header-bg'
+                ],
+                cell: [
+                    'first:sticky first:start-0 first:z-10',
+                    'bg-table-bg'
+                ]
+            }
+        },
+        showColumnBorder: {
+            true: {
+                columnHeader: 'border-r-(length:--border-width-table) border-table-border',
+                cell: 'border-r-(length:--border-width-table) border-table-border'
+            }
+        },
+        captionPlacement: {
+            top: {
+                caption: 'caption-top'
+            },
+            bottom: {
+                caption: 'caption-bottom'
+            }
+        }
+    },
+    defaultVariants: {
+        variant: 'line',
+        size: 'md',
+        interactive: false,
+        stickyHeader: false,
+        stickyFirstColumn: false,
+        showColumnBorder: false,
+        captionPlacement: 'top'
+    }
+});
+const TableContext = /*#__PURE__*/ createContext(null);
+function useTableContext() {
+    const context = useContext(TableContext);
+    if (!context) throw new Error('Table components must be used within Table');
+    return context;
+}
+function Table({ variant, size, interactive, stickyHeader, stickyFirstColumn, showColumnBorder, captionPlacement, children, ref, className, ...props }) {
+    const styles = tableVariants({
+        variant,
+        size,
+        interactive,
+        stickyHeader,
+        stickyFirstColumn,
+        showColumnBorder,
+        captionPlacement
+    });
+    return /*#__PURE__*/ jsx(TableContext.Provider, {
+        value: {
+            variant,
+            size,
+            interactive,
+            stickyHeader,
+            stickyFirstColumn,
+            showColumnBorder,
+            captionPlacement,
+            styles
+        },
+        children: /*#__PURE__*/ jsx("table", {
+            ref: ref,
+            className: styles.root({
+                className
+            }),
+            ...props,
+            children: children
+        })
+    });
+}
+Table.Caption = function({ children, ref, className, ...props }) {
+    const { styles } = useTableContext();
+    return /*#__PURE__*/ jsx("caption", {
+        ref: ref,
+        className: styles.caption({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Table.Header = function({ children, ref, className, ...props }) {
+    const { styles } = useTableContext();
+    return /*#__PURE__*/ jsx("thead", {
+        ref: ref,
+        className: styles.header({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Table.Body = function({ children, ref, className, ...props }) {
+    const { styles } = useTableContext();
+    return /*#__PURE__*/ jsx("tbody", {
+        ref: ref,
+        className: styles.body({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Table.Footer = function({ children, ref, className, ...props }) {
+    const { styles } = useTableContext();
+    return /*#__PURE__*/ jsx("tfoot", {
+        ref: ref,
+        className: styles.footer({
+            className
+        }),
+        ...props,
+        children: children
+    });
+};
+Table.Row = function({ children, ref, className, selected, ...props }) {
+    const { styles } = useTableContext();
+    return /*#__PURE__*/ jsx("tr", {
+        ref: ref,
+        className: styles.row({
+            className
+        }),
+        "data-selected": selected,
+        ...props,
+        children: children
+    });
+};
+Table.ColumnHeader = function({ children, ref, className, numeric, ...props }) {
+    const { styles } = useTableContext();
+    return /*#__PURE__*/ jsx("th", {
+        ref: ref,
+        scope: "col",
+        className: styles.columnHeader({
+            className
+        }),
+        "data-numeric": numeric,
+        ...props,
+        children: children
+    });
+};
+Table.Cell = function({ children, ref, className, numeric, ...props }) {
+    const { styles, stickyFirstColumn } = useTableContext();
+    return /*#__PURE__*/ jsx("td", {
+        ref: ref,
+        className: styles.cell({
+            className,
+            stickyFirstColumn
+        }),
+        "data-numeric": numeric,
+        ...props,
+        children: children
+    });
+};
+Table.displayName = 'Table';
+export { Table };

package/dist/src/atoms/badge.d.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+        discount: string[];
+        info: string[];
+        success: string[];
+        warning: string[];
+        danger: string[];
+        outline: string[];
+        dynamic: never[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+        discount: string[];
+        info: string[];
+        success: string[];
+        warning: string[];
+        danger: string[];
+        outline: string[];
+        dynamic: never[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+        discount: string[];
+        info: string[];
+        success: string[];
+        warning: string[];
+        danger: string[];
+        outline: string[];
+        dynamic: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>['variant']>;
+type BaseBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, 'color' | 'children'> & {
+    children: string;
+};
+type DefaultBadgeProps = BaseBadgeProps & {
+    variant?: Exclude<BadgeVariant, 'dynamic'>;
+};
+type DynamicBadgeProps = BaseBadgeProps & {
+    variant: 'dynamic';
+    bgColor: string;
+    fgColor: string;
+    borderColor: string;
+};
+export type BadgeProps = DefaultBadgeProps | DynamicBadgeProps;
+export declare function Badge({ variant, className, children, style, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=badge.d.ts.map

package/dist/src/atoms/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/atoms/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAyCjB,CAAA;AAEF,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;AAE9E,KAAK,cAAc,GAAG,IAAI,CACxB,cAAc,CAAC,eAAe,CAAC,EAC/B,OAAO,GAAG,UAAU,CACrB,GAAG;IACF,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,KAAK,iBAAiB,GAAG,cAAc,GAAG;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,CAAA;CAC3C,CAAA;AAED,KAAK,iBAAiB,GAAG,cAAc,GAAG;IACxC,OAAO,EAAE,SAAS,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG,iBAAiB,CAAA;AAE9D,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,UAAU,2CAwBZ"}

package/dist/src/atoms/button.d.ts

@@ -0,0 +1,97 @@
+import type { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+import { type IconType } from './icon';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        danger: string;
+        warning: string;
+    };
+    theme: {
+        solid: string;
+        light: string;
+        borderless: string;
+        outlined: string;
+        unstyled: string;
+    };
+    uppercase: {
+        true: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        current: string;
+    };
+    block: {
+        true: string;
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        danger: string;
+        warning: string;
+    };
+    theme: {
+        solid: string;
+        light: string;
+        borderless: string;
+        outlined: string;
+        unstyled: string;
+    };
+    uppercase: {
+        true: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        current: string;
+    };
+    block: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        danger: string;
+        warning: string;
+    };
+    theme: {
+        solid: string;
+        light: string;
+        borderless: string;
+        outlined: string;
+        unstyled: string;
+    };
+    uppercase: {
+        true: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        current: string;
+    };
+    block: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof buttonVariants> {
+    icon?: IconType;
+    iconPosition?: 'left' | 'right';
+    uppercase?: boolean;
+    isLoading?: boolean;
+    loadingText?: string;
+    children?: ReactNode;
+}
+export declare function Button({ variant, theme, size, block, isLoading, icon, iconPosition, uppercase, children, className, ...props }: ButtonProps & {
+    ref?: Ref<HTMLButtonElement>;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button.d.ts.map

package/dist/src/atoms/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/atoms/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAE5C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDA8OzB,CAAA;AAEF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,EACJ,YAAqB,EACrB,SAAiB,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,2CAmBhD"}

package/dist/src/atoms/error-text.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+declare const errorVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface ErrorProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof errorVariants> {
+    ref?: Ref<HTMLDivElement>;
+    showIcon?: boolean;
+    children: ReactNode;
+}
+export declare function ErrorText({ className, showIcon, children, ref, size, ...props }: ErrorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=error-text.d.ts.map

package/dist/src/atoms/error-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-text.d.ts","sourceRoot":"","sources":["../../../src/atoms/error-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;qDAYjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,cAAc,CAAC,cAAc,CAAC,EACpC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,UAAU,2CAcZ"}

package/dist/src/atoms/extra-text.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { VariantProps } from 'tailwind-variants';
+declare const extraTextVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface ExtraTextProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof extraTextVariants> {
+    children: ReactNode;
+}
+export declare function ExtraText({ children, size, ...props }: ExtraTextProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=extra-text.d.ts.map