@ttoss/ui 6.1.0 → 6.2.0

package/dist/index.d.ts

@@ -0,0 +1,238 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconType } from '@ttoss/react-icons';
+import * as React from 'react';
+import * as theme_ui from 'theme-ui';
+import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, CloseProps, TextProps, IconButtonProps as IconButtonProps$1, SxProp, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, FlexProps, SwitchProps, ThemeUIStyleObject, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SwitchProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
+import { ITooltip } from 'react-tooltip';
+import { Props } from 'react-select';
+export { Keyframes, keyframes } from '@emotion/react';
+export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
+
+type ButtonProps = ButtonProps$1 & {
+    leftIcon?: IconType;
+    rightIcon?: IconType;
+    loading?: boolean;
+};
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'> & {
+    icon: ButtonProps['leftIcon'];
+    variant?: 'default' | 'accent' | 'quiet';
+};
+declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+
+type BadgeProps = BadgeProps$1 & {
+    icon?: IconType;
+    chip?: boolean;
+    onDelete?: () => void;
+};
+declare const Badge: ({ icon, children, sx, chip, onDelete, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+declare const Card: {
+    (props: CardProps): react_jsx_runtime.JSX.Element;
+    Title: ({ children, ...props }: React.PropsWithChildren<BoxProps>) => react_jsx_runtime.JSX.Element;
+    Body: ({ children, ...props }: React.PropsWithChildren<BoxProps>) => react_jsx_runtime.JSX.Element;
+    Footer: ({ children, ...props }: React.PropsWithChildren<BoxProps>) => react_jsx_runtime.JSX.Element;
+};
+
+interface CheckboxProps extends CheckboxProps$1 {
+    indeterminate?: boolean;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+type CloseButtonProps = CloseProps & {
+    ariaLabel?: string;
+};
+declare const CloseButton: (props: CloseButtonProps) => react_jsx_runtime.JSX.Element;
+
+declare const Container: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLDivElement>>;
+
+type HelpTextProps = Omit<TextProps, 'variant'> & {
+    disabled?: boolean;
+    negative?: boolean;
+};
+declare const HelpText: ({ sx, disabled, negative, ...props }: HelpTextProps) => react_jsx_runtime.JSX.Element;
+
+type IconButtonProps = IconButtonProps$1 & {
+    icon?: string;
+};
+declare const IconButton: (props: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
+declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
+
+type TooltipProps = ITooltip & SxProp;
+declare const Tooltip: ({ variant, sx, ...props }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the TooltipIcon component.
+ */
+interface TooltipIconProps {
+    /**
+     * The icon to display. Can be a string identifier or an icon object from @ttoss/react-icons.
+     */
+    icon: IconType;
+    /**
+     * Optional click handler for the icon.
+     */
+    onClick?: () => void;
+    /**
+     * Optional tooltip configuration.
+     * Pass tooltip props to display a tooltip when hovering over the icon.
+     * The 'variant' prop is excluded as it's controlled by the component's variant prop.
+     */
+    tooltip?: Omit<TooltipProps, 'variant'>;
+    /**
+     * Test ID for testing purposes.
+     */
+    'data-testid'?: string;
+    /**
+     * Visual variant for both the text wrapper and tooltip.
+     * @default 'info'
+     */
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * Additional styles to apply to the Text wrapper component.
+     */
+    sx?: Record<string, unknown>;
+}
+/**
+ * TooltipIcon component renders an icon with an optional tooltip.
+ *
+ * This component is useful for displaying icons with explanatory tooltips,
+ * especially in contexts where space is limited or additional information
+ * should be revealed on hover.
+ *
+ * @example
+ * ```tsx
+ * <TooltipIcon
+ *   icon="info-circle"
+ *   tooltip={{ children: 'Additional information' }}
+ *   variant="info"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <TooltipIcon
+ *   icon="warning-alt"
+ *   tooltip={{ children: 'Warning message', place: 'top' }}
+ *   variant="warning"
+ *   onClick={() => console.log('Clicked')}
+ * />
+ * ```
+ */
+declare const TooltipIcon: ({ icon, onClick, tooltip, "data-testid": dataTestId, variant, sx, }: TooltipIconProps) => react_jsx_runtime.JSX.Element;
+
+interface InputProps extends InputProps$1 {
+    leadingIcon?: TooltipIconProps | IconType;
+    trailingIcon?: TooltipIconProps | IconType;
+}
+declare const Input: ({ leadingIcon, trailingIcon: trailingIconProp, className, sx, ...inputProps }: InputProps) => react_jsx_runtime.JSX.Element;
+
+type InputNumberProps = Omit<InputProps$1, 'type' | 'variant' | 'onChange'> & {
+    onChange: (value: number) => void;
+    value?: number;
+    infoIcon?: boolean;
+    onClickInfoIcon?: () => void;
+};
+declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'type'> & {
+    showPasswordByDefault?: boolean;
+};
+declare const InputPassword: ({ showPasswordByDefault, ...inputPasswordProps }: InputPasswordProps) => react_jsx_runtime.JSX.Element;
+
+type LabelProps = LabelProps$1 & {
+    tooltip?: TooltipProps;
+};
+declare const Label: ({ children, tooltip, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
+
+type LinkProps = LinkProps$1 & {
+    quiet?: boolean;
+};
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+
+interface SegmentedControlProps {
+    options: (string | number | {
+        label: React.ReactNode;
+        value: string | number;
+        disabled?: boolean;
+    })[];
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number) => void;
+    disabled?: boolean;
+    className?: string;
+    sx?: FlexProps['sx'];
+}
+declare const SegmentedControl: ({ options, value: propValue, defaultValue, onChange, disabled, className, sx, ...rest }: SegmentedControlProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * We're using React Select component to build ttoss Select.
+ * More info about React Select: https://react-select.com/home
+ * ttoss Figma: https://www.figma.com/file/VrB76VkH4hKCDUe9iYhpYu/_Component-%2F-Forms-%2F-Select?type=design&mode=design&t=ZBIeOpqcvQn3yq2t-0
+ */
+
+type SelectOptionValue = string | number | boolean;
+type SelectOption = {
+    label: string;
+    value: SelectOptionValue;
+};
+type SelectOptions = SelectOption[];
+/**
+ * TODO: remove this when we accept multi select.
+ */
+type IsMulti = false;
+type SelectProps = Omit<Props<SelectOption, IsMulti>, 'styles' | 'value' | 'onChange' | 'components'> & SxProp & {
+    value?: SelectOptionValue;
+    onChange?: (value: SelectOptionValue | undefined) => void;
+    disabled?: boolean;
+    leadingIcon?: IconType;
+    trailingIcon?: IconType;
+};
+/**
+ * https://react-select.com/home
+ */
+declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "value" | "onChange" | "styles" | "components"> & SxProp & {
+    value?: SelectOptionValue;
+    onChange?: (value: SelectOptionValue | undefined) => void;
+    disabled?: boolean;
+    leadingIcon?: IconType;
+    trailingIcon?: IconType;
+} & React.RefAttributes<any>>;
+
+type StackProps = FlexProps;
+/**
+ * A component that renders its children in a column.
+ */
+declare const Stack: (props: StackProps) => react_jsx_runtime.JSX.Element;
+
+declare const Switch: (props: SwitchProps) => react_jsx_runtime.JSX.Element;
+
+type TagVariant = 'accent' | 'positive' | 'caution' | 'muted' | 'negative' | 'primary' | 'secondary' | 'default';
+type TagProps = {
+    children: React.ReactNode | React.ReactNode[];
+    variant?: TagVariant;
+    sx?: ThemeUIStyleObject;
+};
+declare const Tag: ({ children, variant, sx }: TagProps) => react_jsx_runtime.JSX.Element;
+
+interface TextareaProps extends TextareaProps$1 {
+    trailingIcon?: IconType;
+}
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+
+type ThemeProviderProps = {
+    children?: React.ReactNode;
+    theme?: Theme;
+    /**
+     * Fonts URLs.
+     */
+    fonts?: string[];
+};
+declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+
+declare const useTheme: () => theme_ui.ThemeUIContextValue;
+
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipIcon, type TooltipIconProps, type TooltipProps, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -45,8 +45,8 @@
     "react": "^19.2.1",
     "tsup": "^8.5.1",
     "@ttoss/config": "^1.35.12",
-    "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/test-utils": "^4.0.2"
+    "@ttoss/test-utils": "^4.0.2",
+    "@ttoss/react-icons": "^0.5.6"
   },
   "keywords": [
     "React",