@zvoove/unity-ui 2.28.0 → 2.29.0

package/dist/components/TextField/TextField.styled.d.ts

@@ -0,0 +1,335 @@
+export declare const textFieldWrapperStyles: import('tailwind-variants').TVReturnType<{
+    density: {
+        default: string[];
+        '-2': string[];
+        '-4': string[];
+    };
+}, undefined, string[], {
+    density: {
+        default: string[];
+        '-2': string[];
+        '-4': string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    density: {
+        default: string[];
+        '-2': string[];
+        '-4': string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const textFieldStyles: import('tailwind-variants').TVReturnType<{
+    error: {
+        true: string[];
+        false: string[];
+    };
+    isFocused: {
+        true: never[];
+    };
+    density: {
+        default: never[];
+        '-2': never[];
+        '-4': never[];
+    };
+    hasIconLeft: {
+        true: never[];
+        false: never[];
+    };
+    hasIconRight: {
+        true: never[];
+        false: never[];
+    };
+    hasIconBothSides: {
+        true: never[];
+        false: never[];
+    };
+    isFilled: {
+        true: never[];
+    };
+    hideLabel: {
+        true: never[];
+        false: never[];
+    };
+    clearable: {
+        true: never[];
+    };
+}, undefined, string[], {
+    error: {
+        true: string[];
+        false: string[];
+    };
+    isFocused: {
+        true: never[];
+    };
+    density: {
+        default: never[];
+        '-2': never[];
+        '-4': never[];
+    };
+    hasIconLeft: {
+        true: never[];
+        false: never[];
+    };
+    hasIconRight: {
+        true: never[];
+        false: never[];
+    };
+    hasIconBothSides: {
+        true: never[];
+        false: never[];
+    };
+    isFilled: {
+        true: never[];
+    };
+    hideLabel: {
+        true: never[];
+        false: never[];
+    };
+    clearable: {
+        true: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    error: {
+        true: string[];
+        false: string[];
+    };
+    isFocused: {
+        true: never[];
+    };
+    density: {
+        default: never[];
+        '-2': never[];
+        '-4': never[];
+    };
+    hasIconLeft: {
+        true: never[];
+        false: never[];
+    };
+    hasIconRight: {
+        true: never[];
+        false: never[];
+    };
+    hasIconBothSides: {
+        true: never[];
+        false: never[];
+    };
+    isFilled: {
+        true: never[];
+    };
+    hideLabel: {
+        true: never[];
+        false: never[];
+    };
+    clearable: {
+        true: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const labelStyles: import('tailwind-variants').TVReturnType<{
+    isFilled: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        false: string[];
+        true: string[];
+    };
+    hasIconLeft: {
+        true: never[];
+        false: never[];
+    };
+    hasIconRight: {
+        true: never[];
+        false: never[];
+    };
+    iconPosition: {
+        left: never[];
+        right: never[];
+    };
+    density: {
+        default: never[];
+        '-2': never[];
+        '-4': never[];
+    };
+    hideLabel: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], {
+    isFilled: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        false: string[];
+        true: string[];
+    };
+    hasIconLeft: {
+        true: never[];
+        false: never[];
+    };
+    hasIconRight: {
+        true: never[];
+        false: never[];
+    };
+    iconPosition: {
+        left: never[];
+        right: never[];
+    };
+    density: {
+        default: never[];
+        '-2': never[];
+        '-4': never[];
+    };
+    hideLabel: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isFilled: {
+        true: string[];
+        false: string[];
+    };
+    error: {
+        false: string[];
+        true: string[];
+    };
+    hasIconLeft: {
+        true: never[];
+        false: never[];
+    };
+    hasIconRight: {
+        true: never[];
+        false: never[];
+    };
+    iconPosition: {
+        left: never[];
+        right: never[];
+    };
+    density: {
+        default: never[];
+        '-2': never[];
+        '-4': never[];
+    };
+    hideLabel: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const iconStyles: import('tailwind-variants').TVReturnType<{
+    withErrorIcon: {
+        true: string[];
+    };
+    error: {
+        true: string[];
+        false: string[];
+    };
+    density: {
+        default: string[];
+        '-2': string[];
+        '-4': string[];
+    };
+    iconPosition: {
+        left: never[];
+        right: never[];
+    };
+    isError: {
+        true: string[];
+    };
+    disabled: {
+        true: never[];
+    };
+    hasAction: {
+        true: string[];
+        false: string[];
+    };
+    clearable: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], {
+    withErrorIcon: {
+        true: string[];
+    };
+    error: {
+        true: string[];
+        false: string[];
+    };
+    density: {
+        default: string[];
+        '-2': string[];
+        '-4': string[];
+    };
+    iconPosition: {
+        left: never[];
+        right: never[];
+    };
+    isError: {
+        true: string[];
+    };
+    disabled: {
+        true: never[];
+    };
+    hasAction: {
+        true: string[];
+        false: string[];
+    };
+    clearable: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    withErrorIcon: {
+        true: string[];
+    };
+    error: {
+        true: string[];
+        false: string[];
+    };
+    density: {
+        default: string[];
+        '-2': string[];
+        '-4': string[];
+    };
+    iconPosition: {
+        left: never[];
+        right: never[];
+    };
+    isError: {
+        true: string[];
+    };
+    disabled: {
+        true: never[];
+    };
+    hasAction: {
+        true: string[];
+        false: string[];
+    };
+    clearable: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const errorMessageStyles: import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], {
+    open: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    open: {
+        true: string[];
+        false: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,67 @@
+import { CommonIconNames, Density, ResponsiveType } from '../../index.ts';
+export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * The label that will be displayed above the input. <br />
+     * It is required for accessibility purposes.
+     */
+    label: string;
+    /**
+     * When true, the input applies the error style. <br />
+     * Will also display the error message is any is provided.
+     */
+    error?: boolean;
+    /**
+     * The error message that will be displayed below the input. <br />
+     * It is only displayed when the error prop is true.
+     */
+    errorMessage?: string;
+    /**
+     * The value of the input. <br />
+     */
+    value?: string;
+    /**
+     * The placeholder that will be displayed inside the input. <br />
+     * If the label is visible, it will be shown in its active state.
+     */
+    placeholder?: string;
+    /**
+     * The  density of the input will control the size of the input.
+     */
+    density?: ResponsiveType<Density>;
+    /**
+     * If true the label will be hidden. <br />
+     * This will apply only visually, the label will still be present in the DOM for accessibility purposes.
+     */
+    hideLabel?: boolean;
+    /**
+     * Make the input disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Make the input focused in a controlled way.
+     */
+    isFocused?: boolean;
+    /**
+     * Make the input clearable. <br />
+     * When true, a clear button will be displayed on the right side of the input. <br />
+     * When there's a icon placed on the right side of the input, the clear button will be hidden. <br />
+     * Important: only works with controlled inputs.
+     */
+    clearable?: boolean;
+    /**
+     * The icon that will be displayed on the left side of the input.
+     */
+    icon?: CommonIconNames;
+    /**
+     * The action that will be triggered when the icon is clicked.
+     */
+    onIconClick?: () => void;
+    /**
+     * This prop controls the position of the icon.
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Callback function that will be called when the input changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}

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

@@ -0,0 +1,2 @@
+export { default as TextField } from './TextField';
+export type { TextFieldProps } from './TextField.types';

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,3 @@
+import { TextareaProps } from './Textarea.types';
+declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export default Textarea;

package/dist/components/Textarea/Textarea.styled.d.ts

@@ -0,0 +1,67 @@
+export declare const mainWrapperStyles: import('tailwind-variants').TVReturnType<{
+    borderRadius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+    error: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], {
+    borderRadius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+    error: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    borderRadius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+    error: {
+        true: string[];
+        false: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const textareaHeaderStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const textareaWrapperStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const textareaStyles: import('tailwind-variants').TVReturnType<{
+    error: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    error: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    error: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,32 @@
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'> {
+    /**
+     * If true, the textarea will display an error state.
+     */
+    error?: boolean;
+    /**
+     * The value of the textarea.
+     */
+    value?: string;
+    /**
+     * The error message to display below the textarea.
+     */
+    errorMessage?: string;
+    /**
+     * The maximum length of the textarea.
+     */
+    maxLength?: number;
+    /**
+     * The border radius of the textarea.
+     * @default 'sm'
+     */
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Content rendered above the textarea input, separated by a subtle border.
+     * Use to display contextual items such as attached files (e.g. `<Chip type="input" />`).
+     */
+    header?: React.ReactNode;
+    /**
+     * The actions to display below the textarea.
+     */
+    actions?: React.ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { default as Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea.types';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from './Tooltip.types';
+declare const Tooltip: ({ children, content, placement, disabled, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/dist/components/Tooltip/Tooltip.styled.d.ts

@@ -0,0 +1,51 @@
+export declare const tooltipStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const tooltipContentStyles: import('tailwind-variants').TVReturnType<{
+    placement: {
+        top: string[];
+        bottom: string[];
+        left: string[];
+        right: string[];
+    };
+    allowLineBreak: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    placement: {
+        top: string[];
+        bottom: string[];
+        left: string[];
+        right: string[];
+    };
+    allowLineBreak: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    placement: {
+        top: string[];
+        bottom: string[];
+        left: string[];
+        right: string[];
+    };
+    allowLineBreak: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const tooltipPortalStyles: import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,22 @@
+export interface TooltipProps {
+    /**
+     * The trigger element that the tooltip is attached to
+     */
+    children: React.ReactNode;
+    /**
+     * The content to be displayed in the tooltip
+     */
+    content: React.ReactNode;
+    /**
+     * The position of the tooltip relative to its trigger
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Whether the tooltip should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the tooltip should be open
+     */
+    isOpen?: boolean;
+}

package/dist/components/Tooltip/TooltipPortal.d.ts

@@ -0,0 +1,8 @@
+interface TooltipPortalProps {
+    children: React.ReactNode;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    placement: 'top' | 'bottom' | 'left' | 'right';
+    isOpen: boolean;
+}
+export declare const TooltipPortal: ({ children, triggerRef, placement, isOpen, }: TooltipPortalProps) => import('react').ReactPortal | null;
+export {};

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

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip.types';

package/dist/components/TopBar/TopBar.d.ts

@@ -0,0 +1,3 @@
+import { TopBarProps } from './TopBar.types';
+declare const TopBar: ({ leftBottomContent, subtitle, leftTopContent, rightTopContent, rightBottomContent, density, }: TopBarProps) => import("react/jsx-runtime").JSX.Element;
+export default TopBar;

package/dist/components/TopBar/TopBar.styled.d.ts

@@ -0,0 +1,19 @@
+export declare const topBarStyles: import('tailwind-variants').TVReturnType<{
+    density: {
+        '-4': string;
+        '-2': string;
+        default: string;
+    };
+}, undefined, string[], {
+    density: {
+        '-4': string;
+        '-2': string;
+        default: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    density: {
+        '-4': string;
+        '-2': string;
+        default: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export interface TopBarProps {
+    /**
+     * The content to be displayed in the left top section.
+     */
+    leftTopContent?: ReactNode;
+    /**
+     * The content to be displayed in the right top section.
+     */
+    rightTopContent?: ReactNode;
+    /**
+     * The content to be displayed in the left bottom section.
+     */
+    leftBottomContent?: string | ReactNode;
+    /**
+     * The content to be displayed in the right bottom section.
+     */
+    rightBottomContent?: ReactNode;
+    /**
+     * The subtitle to be displayed bellow the bottom section.
+     */
+    subtitle?: string;
+    /**
+     * The density of the top bar. It can be used to adjust the spacing and font sizes.
+     */
+    density?: 'default' | '-2' | '-4';
+}

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

@@ -0,0 +1,2 @@
+export { default as TopBar } from './TopBar';
+export type { TopBarProps } from './TopBar.types';

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,3 @@
+import { TypographyProps } from './Typography.types';
+declare const Typography: ({ children, variant, size, as: AsComponent, color, textAlign, truncate, textTransform, hyphenate, wrap, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export default Typography;