@wallarm-org/design-system 0.1.0

package/dist/components/Tabs/TabsButton.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { ButtonBase } from "../ButtonBase/index.js";
+import { tabsTriggerVariants } from "./classes.js";
+const TabsButton = ({ children, size = 'medium', ref, ...props })=>/*#__PURE__*/ jsx(ButtonBase, {
+        ...props,
+        ref: ref,
+        size: size,
+        className: tabsTriggerVariants({
+            size
+        }),
+        children: children
+    });
+TabsButton.displayName = 'TabsButton';
+export { TabsButton };

package/dist/components/Tabs/TabsContent.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+interface TabsContentProps {
+    children: ReactNode;
+    value: string;
+}
+export declare const TabsContent: FC<TabsContentProps>;
+export {};

package/dist/components/Tabs/TabsContent.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+import { cn } from "../../utils/cn.js";
+const TabsContent = ({ children, value })=>/*#__PURE__*/ jsx(Tabs.Content, {
+        className: cn('outline-none'),
+        value: value,
+        children: children
+    });
+TabsContent.displayName = 'TabsContent';
+export { TabsContent };

package/dist/components/Tabs/TabsLineActions.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from 'react';
+interface TabsLineActionsProps {
+    children: ReactNode;
+}
+export declare const TabsLineActions: FC<TabsLineActionsProps>;
+export {};

package/dist/components/Tabs/TabsLineActions.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const TabsLineActions = ({ children })=>/*#__PURE__*/ jsx("div", {
+        className: cn('flex items-center gap-4 ml-auto'),
+        children: children
+    });
+TabsLineActions.displayName = 'TabsLineActions';
+export { TabsLineActions };

package/dist/components/Tabs/TabsList/TabsList.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type ReactNode } from 'react';
+interface TabsListProps {
+    children: ReactNode;
+}
+export declare const TabsList: FC<TabsListProps>;
+export {};

package/dist/components/Tabs/TabsList/TabsList.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Tabs } from "@ark-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../utils/cn.js";
+import { useTabsSharedContext } from "../TabsSharedContext/index.js";
+import { TabsListIndicator } from "./TabsListIndicator.js";
+import { TabsListScrollArea } from "./TabsListScrollArea.js";
+import { TabsListScrollButton } from "./TabsListScrollButton.js";
+const tabsListVariants = cva("relative flex items-center px-24 gap-4 border-b-1 border-border-primary-light", {
+    variants: {
+        size: {
+            medium: '',
+            small: ''
+        }
+    },
+    defaultVariants: {
+        size: 'medium'
+    }
+});
+const TabsList = ({ children })=>{
+    const { scrollRef, size } = useTabsSharedContext();
+    const listRef = useRef(null);
+    const [hasOverflow, setHasOverflow] = useState(false);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    useLayoutEffect(()=>{
+        const list = listRef.current;
+        if (!list) return;
+        const checkOverflow = ()=>{
+            const overflow = list.scrollWidth > list.clientWidth;
+            setHasOverflow(overflow);
+            if (!overflow) {
+                setCanScrollLeft(false);
+                setCanScrollRight(false);
+            }
+        };
+        checkOverflow();
+        const ro = new ResizeObserver(checkOverflow);
+        ro.observe(list);
+        return ()=>{
+            ro.disconnect();
+        };
+    }, []);
+    useLayoutEffect(()=>{
+        if (!hasOverflow) return;
+        const el = scrollRef.current;
+        if (!el) return;
+        const updateScrollButtons = ()=>{
+            setCanScrollLeft(el.scrollLeft > 0);
+            setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+        };
+        updateScrollButtons();
+        const ro = new ResizeObserver(updateScrollButtons);
+        ro.observe(el);
+        el.addEventListener('scroll', updateScrollButtons);
+        return ()=>{
+            ro.disconnect();
+            el.removeEventListener('scroll', updateScrollButtons);
+        };
+    }, [
+        scrollRef,
+        hasOverflow
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('relative'),
+        "data-slot": "tabs-list",
+        children: [
+            hasOverflow && /*#__PURE__*/ jsx(TabsListScrollButton, {
+                direction: "left",
+                visible: canScrollLeft
+            }),
+            /*#__PURE__*/ jsx(TabsListScrollArea, {
+                children: /*#__PURE__*/ jsxs(Tabs.List, {
+                    ref: listRef,
+                    className: cn(tabsListVariants({
+                        size
+                    })),
+                    children: [
+                        children,
+                        /*#__PURE__*/ jsx(TabsListIndicator, {})
+                    ]
+                })
+            }),
+            hasOverflow && /*#__PURE__*/ jsx(TabsListScrollButton, {
+                direction: "right",
+                visible: canScrollRight
+            })
+        ]
+    });
+};
+TabsList.displayName = 'TabsList';
+export { TabsList };

package/dist/components/Tabs/TabsList/TabsListIndicator.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const TabsListIndicator: FC;

package/dist/components/Tabs/TabsList/TabsListIndicator.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../utils/cn.js";
+import { useTabsSharedContext } from "../TabsSharedContext/index.js";
+const tabsListIndicatorVariants = cva(cn('bottom-[-1px]', 'h-2', 'left-(--left)', 'w-(--width)'), {
+    variants: {
+        variant: {
+            default: 'bg-border-strong-brand',
+            grayscale: 'bg-border-strong-primary'
+        }
+    }
+});
+const TabsListIndicator = ()=>{
+    const { variant } = useTabsSharedContext();
+    return /*#__PURE__*/ jsx(Tabs.Indicator, {
+        className: cn(tabsListIndicatorVariants({
+            variant
+        }))
+    });
+};
+export { TabsListIndicator };

package/dist/components/Tabs/TabsList/TabsListScrollArea.d.ts

@@ -0,0 +1,6 @@
+import type { FC, ReactNode } from 'react';
+interface TabsListScrollAreaProps {
+    children: ReactNode;
+}
+export declare const TabsListScrollArea: FC<TabsListScrollAreaProps>;
+export {};

package/dist/components/Tabs/TabsList/TabsListScrollArea.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTabsSharedContext } from "../TabsSharedContext/index.js";
+const TabsListScrollArea = ({ children })=>{
+    const { scrollRef } = useTabsSharedContext();
+    return /*#__PURE__*/ jsx("div", {
+        ref: scrollRef,
+        className: cn('overflow-x-auto', '[&::-webkit-scrollbar]:hidden', '[-ms-overflow-style:none]', '[scrollbar-width:none]'),
+        children: children
+    });
+};
+TabsListScrollArea.displayName = 'TabsListScrollArea';
+export { TabsListScrollArea };

package/dist/components/Tabs/TabsList/TabsListScrollButton.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+interface TabsListScrollButtonProps {
+    direction: 'left' | 'right';
+    visible: boolean;
+}
+export declare const TabsListScrollButton: FC<TabsListScrollButtonProps>;
+export {};

package/dist/components/Tabs/TabsList/TabsListScrollButton.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ChevronLeft, ChevronRight } from "../../../icons/index.js";
+import { cn } from "../../../utils/cn.js";
+import { Button } from "../../Button/index.js";
+import { TABS_SCROLL_BUTTON_WIDTH } from "../constants.js";
+import { useTabsSharedContext } from "../TabsSharedContext/index.js";
+const scrollButtonVariants = cva([
+    'absolute top-0 bottom-0',
+    'flex items-center justify-center',
+    `w-${TABS_SCROLL_BUTTON_WIDTH}`,
+    'bg-white',
+    'shadow-[0_-1px_0_0_inset_var(--color-slate-200)]',
+    'transition-opacity duration-200',
+    'cursor-pointer',
+    'z-11'
+].join(' '), {
+    variants: {
+        side: {
+            left: "left-0",
+            right: "right-0"
+        },
+        visible: {
+            true: "opacity-100 pointer-events-auto",
+            false: "opacity-0 pointer-events-none"
+        }
+    }
+});
+const scrollGradientVariants = cva(cn('absolute top-0 bottom-2', 'w-8', 'from-white to-transparent bg-gradient-to-r', 'pointer-events-none', 'z-10'), {
+    variants: {
+        side: {
+            left: 'right-[-8px] bg-gradient-to-r',
+            right: 'left-[-8px] bg-gradient-to-l'
+        }
+    }
+});
+const TabsListScrollButton = ({ direction, visible })=>{
+    const { scrollRef } = useTabsSharedContext();
+    const handleClick = ()=>{
+        const el = scrollRef.current;
+        if (!el) return;
+        const step = el.clientWidth ?? 200;
+        el.scrollBy({
+            left: 'left' === direction ? -step : step,
+            behavior: 'smooth'
+        });
+    };
+    const Icon = 'left' === direction ? ChevronLeft : ChevronRight;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn(scrollButtonVariants({
+            side: direction,
+            visible
+        })),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: cn(scrollGradientVariants({
+                    side: direction
+                }))
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                color: "neutral",
+                size: "small",
+                onClick: handleClick,
+                "aria-label": 'left' === direction ? 'Scroll left' : 'Scroll right',
+                children: /*#__PURE__*/ jsx(Icon, {
+                    className: "text-slate-900"
+                })
+            })
+        ]
+    });
+};
+TabsListScrollButton.displayName = 'TabsListScrollButton';
+export { TabsListScrollButton };

package/dist/components/Tabs/TabsList/index.d.ts

@@ -0,0 +1 @@
+export { TabsList } from './TabsList';

package/dist/components/Tabs/TabsList/index.js

@@ -0,0 +1,2 @@
+import { TabsList } from "./TabsList.js";
+export { TabsList };

package/dist/components/Tabs/TabsSeparator.d.ts

@@ -0,0 +1 @@
+export declare const TabsSeparator: import("react").FC<import("../SegmentedControl").SegmentedControlSeparatorProps>;

package/dist/components/Tabs/TabsSeparator.js

@@ -0,0 +1,4 @@
+import { SegmentedControlSeparator } from "../SegmentedControl/index.js";
+const TabsSeparator = SegmentedControlSeparator;
+TabsSeparator.displayName = 'TabsSeparator';
+export { TabsSeparator };

package/dist/components/Tabs/TabsSharedContext/TabsSharedContext.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+import type { TabsSize, TabsVariant } from '../types';
+export interface TabsSharedContextValue {
+    scrollRef: RefObject<HTMLDivElement | null>;
+    variant?: TabsVariant;
+    size?: TabsSize;
+}
+export declare const TabsSharedContext: import("react").Context<TabsSharedContextValue>;

package/dist/components/Tabs/TabsSharedContext/TabsSharedContext.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+const TabsSharedContext = createContext({
+    scrollRef: {
+        current: null
+    },
+    size: 'medium',
+    variant: 'default'
+});
+export { TabsSharedContext };

package/dist/components/Tabs/TabsSharedContext/TabsSharedContextProvider.d.ts

@@ -0,0 +1,8 @@
+import { type FC, type PropsWithChildren } from 'react';
+import type { TabsSize, TabsVariant } from '../types';
+interface TabsSharedContextProviderProps extends PropsWithChildren {
+    size?: TabsSize;
+    variant?: TabsVariant;
+}
+export declare const TabsSharedContextProvider: FC<TabsSharedContextProviderProps>;
+export {};

package/dist/components/Tabs/TabsSharedContext/TabsSharedContextProvider.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { TabsSharedContext } from "./TabsSharedContext.js";
+const TabsSharedContextProvider = ({ children, size = 'medium', variant = 'default' })=>{
+    const scrollRef = useRef(null);
+    return /*#__PURE__*/ jsx(TabsSharedContext.Provider, {
+        value: {
+            scrollRef,
+            size,
+            variant
+        },
+        children: children
+    });
+};
+export { TabsSharedContextProvider };

package/dist/components/Tabs/TabsSharedContext/index.d.ts

@@ -0,0 +1,2 @@
+export { TabsSharedContextProvider } from './TabsSharedContextProvider';
+export { useTabsSharedContext } from './useTabsSharedContext';

package/dist/components/Tabs/TabsSharedContext/index.js

@@ -0,0 +1,3 @@
+import { TabsSharedContextProvider } from "./TabsSharedContextProvider.js";
+import { useTabsSharedContext } from "./useTabsSharedContext.js";
+export { TabsSharedContextProvider, useTabsSharedContext };

package/dist/components/Tabs/TabsSharedContext/useTabsSharedContext.d.ts

@@ -0,0 +1 @@
+export declare const useTabsSharedContext: () => import("./TabsSharedContext").TabsSharedContextValue;

package/dist/components/Tabs/TabsSharedContext/useTabsSharedContext.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { TabsSharedContext } from "./TabsSharedContext.js";
+const useTabsSharedContext = ()=>{
+    const ctx = useContext(TabsSharedContext);
+    if (!ctx) throw new Error('useTabsSharedContext components must be used inside TabsSharedContentProvider');
+    return ctx;
+};
+export { useTabsSharedContext };

package/dist/components/Tabs/TabsTrigger.d.ts

@@ -0,0 +1,11 @@
+import type { FC, FocusEvent, ReactNode } from 'react';
+interface TabsTriggerProps {
+    children: ReactNode;
+    value: string;
+    disabled?: boolean;
+    asChild?: boolean;
+    className?: string;
+    onFocus?: (e: FocusEvent<HTMLButtonElement>) => void;
+}
+export declare const TabsTrigger: FC<TabsTriggerProps>;
+export {};

package/dist/components/Tabs/TabsTrigger.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+import { cn } from "../../utils/cn.js";
+import { tabsTriggerVariants } from "./classes.js";
+import { TABS_SCROLL_BUTTON_WIDTH } from "./constants.js";
+import { useTabsSharedContext } from "./TabsSharedContext/index.js";
+const TabsTrigger = ({ children, value, disabled = false, asChild = false, className, onFocus })=>{
+    const { scrollRef, size } = useTabsSharedContext();
+    const handleFocus = (e)=>{
+        onFocus?.(e);
+        const el = e.currentTarget;
+        const parent = scrollRef.current;
+        if (!parent) return;
+        const rect = el.getBoundingClientRect();
+        const parentRect = parent.getBoundingClientRect();
+        if (rect.left < parentRect.left) parent.scrollBy({
+            left: rect.left - parentRect.left - TABS_SCROLL_BUTTON_WIDTH,
+            behavior: 'smooth'
+        });
+        if (rect.right > parentRect.right) parent.scrollBy({
+            left: rect.right - parentRect.right + TABS_SCROLL_BUTTON_WIDTH,
+            behavior: 'smooth'
+        });
+    };
+    return /*#__PURE__*/ jsx(Tabs.Trigger, {
+        className: cn(tabsTriggerVariants({
+            size
+        }), className),
+        value: value,
+        disabled: disabled,
+        asChild: asChild,
+        onFocus: handleFocus,
+        tabIndex: 0,
+        children: children
+    });
+};
+TabsTrigger.displayName = 'TabsTrigger';
+export { TabsTrigger };

package/dist/components/Tabs/classes.d.ts

@@ -0,0 +1,3 @@
+export declare const tabsTriggerVariants: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Tabs/classes.js

@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const tabsTriggerVariants = cva(cn('relative inline-flex items-center justify-center', 'rounded-lg bg-transparent', 'border-b-1 border-transparent', 'transition-all cursor-pointer', 'text-text-secondary font-medium font-sans whitespace-nowrap', 'not-data-disabled:data-selected:text-text-primary', 'not-data-disabled:hover:bg-states-primary-hover not-data-disabled:not-data-selected:hover:text-text-primary', 'not-data-disabled:active:bg-states-primary-pressed', 'not-data-disabled:not-data-selected:active:text-text-secondary', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary focus-visible:bg-states-primary-hover', 'data-[focus=true]:outline-none data-[focus=true]:bg-bg-primary data-[focus=true]:text-text-primary', 'disabled:opacity-50 disabled:cursor-not-allowed'), {
+    variants: {
+        size: {
+            medium: cn('h-32', 'px-8 py-6 mt-4 mb-6 gap-6', 'text-sm'),
+            small: cn('h-24', 'px-6 py-4 mt-4 mb-4 gap-4', 'text-xs')
+        }
+    },
+    defaultVariants: {
+        size: 'medium'
+    }
+});
+export { tabsTriggerVariants };

package/dist/components/Tabs/constants.d.ts

@@ -0,0 +1 @@
+export declare const TABS_SCROLL_BUTTON_WIDTH = 32;

package/dist/components/Tabs/constants.js

@@ -0,0 +1,2 @@
+const TABS_SCROLL_BUTTON_WIDTH = 32;
+export { TABS_SCROLL_BUTTON_WIDTH };

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

@@ -0,0 +1,7 @@
+export { Tabs } from './Tabs';
+export { TabsButton } from './TabsButton';
+export { TabsContent } from './TabsContent';
+export { TabsLineActions } from './TabsLineActions';
+export { TabsList } from './TabsList';
+export { TabsSeparator } from './TabsSeparator';
+export { TabsTrigger } from './TabsTrigger';

package/dist/components/Tabs/index.js

@@ -0,0 +1,8 @@
+import { Tabs } from "./Tabs.js";
+import { TabsButton } from "./TabsButton.js";
+import { TabsContent } from "./TabsContent.js";
+import { TabsLineActions } from "./TabsLineActions.js";
+import { TabsList } from "./TabsList/index.js";
+import { TabsSeparator } from "./TabsSeparator.js";
+import { TabsTrigger } from "./TabsTrigger.js";
+export { Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger };

package/dist/components/Tabs/types.d.ts

@@ -0,0 +1,2 @@
+export type TabsSize = 'small' | 'medium';
+export type TabsVariant = 'default' | 'grayscale';

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

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes, PropsWithChildren, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type BadgeProps } from '../Badge';
+declare const tagVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TagNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+type TagVariantProps = VariantProps<typeof tagVariants>;
+interface TagBaseProps {
+    size?: BadgeProps['size'];
+    disabled?: boolean;
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export type TagProps = TagNativeProps & TagVariantProps & TagBaseProps & PropsWithChildren;
+export declare const Tag: FC<TagProps>;
+export {};

package/dist/components/Tag/Tag.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { badgeVariants } from "../Badge/index.js";
+const tagVariants = cva(cn('inline-flex items-center', 'rounded-8 border border-border-primary overlay', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary', 'transition-colors cursor-pointer select-none', '[&_[data-slot=tag-close]]:cursor-pointer'), {
+    variants: {
+        disabled: {
+            true: 'opacity-50 cursor-not-allowed pointer-events-none',
+            false: 'hover:overlay-states-primary-hover active:overlay-states-primary-pressed focus-visible:overlay-states-primary-hover'
+        }
+    }
+});
+const Tag = ({ size = 'medium', disabled = false, asChild = false, children, onClick, ...props })=>{
+    const Comp = asChild ? Slot : 'div';
+    const handleClick = (event)=>{
+        event.stopPropagation();
+        onClick?.(event);
+    };
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        className: cn(tagVariants({
+            disabled
+        }), badgeVariants({
+            color: 'slate',
+            type: 'secondary',
+            textVariant: 'default',
+            muted: false,
+            size
+        })),
+        "data-slot": "tag",
+        "data-disabled": disabled ? 'true' : void 0,
+        tabIndex: disabled ? -1 : 0,
+        onClick: handleClick,
+        children: children
+    });
+};
+Tag.displayName = 'Tag';
+export { Tag };

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

@@ -0,0 +1,6 @@
+import type { FC, MouseEvent } from 'react';
+interface TagCloseProps {
+    onClick?: (event: MouseEvent<SVGSVGElement>) => void;
+}
+export declare const TagClose: FC<TagCloseProps>;
+export {};

package/dist/components/Tag/TagClose.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { X } from "../../icons/index.js";
+const TagClose = ({ onClick })=>{
+    const handleClick = (event)=>{
+        event.stopPropagation();
+        onClick?.(event);
+    };
+    return /*#__PURE__*/ jsx(X, {
+        size: "sm",
+        "data-slot": "tag-close",
+        onClick: handleClick
+    });
+};
+export { TagClose };

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

@@ -0,0 +1,2 @@
+export { Tag, type TagProps } from './Tag';
+export { TagClose } from './TagClose';

package/dist/components/Tag/index.js

@@ -0,0 +1,3 @@
+import { Tag } from "./Tag.js";
+import { TagClose } from "./TagClose.js";
+export { Tag, TagClose };

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,20 @@
+import type { FC, HTMLAttributes, PropsWithChildren, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const textVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
+    color?: "inherit" | "primary" | "primary-alt" | "secondary" | "secondary-alt" | "danger" | null | undefined;
+    align?: "left" | "center" | "right" | null | undefined;
+    grow?: boolean | null | undefined;
+    truncate?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextNativeProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'className' | 'color'>;
+type TextVariantProps = VariantProps<typeof textVariants>;
+interface TextBaseProps {
+    asChild?: boolean;
+    lineClamp?: number;
+    ref?: Ref<HTMLHeadingElement>;
+}
+export type TextProps = TextNativeProps & TextVariantProps & TextBaseProps;
+export declare const Text: FC<PropsWithChildren<TextProps>>;
+export {};