@ttoss/ui 5.0.6 → 5.0.8

package/dist/index.d.ts

@@ -0,0 +1,143 @@
+import * as theme_ui from 'theme-ui';
+import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, IconButtonProps, CheckboxProps as CheckboxProps$1, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
+export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
+export { Keyframes, keyframes } from '@emotion/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { IconType } from '@ttoss/react-icons';
+import { Props } from 'react-select';
+
+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;
+
+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;
+
+type ButtonProps = ButtonProps$1 & {
+    leftIcon?: IconType;
+    rightIcon?: IconType;
+    loading?: boolean;
+};
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends InputProps$1 {
+    leadingIcon?: IconType;
+    onLeadingIconClick?: () => void;
+    trailingIcon?: IconType;
+    onTrailingIconClick?: () => void;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+type LabelProps = LabelProps$1 & {
+    tooltip?: boolean;
+    onTooltipClick?: () => void;
+};
+declare const Label: ({ children, onTooltipClick, 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>>;
+
+/**
+ * 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>>;
+
+declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+interface CheckboxProps extends CheckboxProps$1 {
+    indeterminate?: boolean;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
+
+interface TextareaProps extends TextareaProps$1 {
+    trailingIcon?: IconType;
+}
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+
+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 CloseButtonProps = ButtonProps & {
+    label?: string;
+    onlyText?: boolean;
+};
+declare const CloseButton: React.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+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 StackProps = FlexProps;
+/**
+ * A component that renders its children in a column.
+ */
+declare const Stack: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLElement>>;
+
+type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'onTrailingIconClick' | 'type'> & {
+    showPasswordByDefault?: boolean;
+};
+declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputPasswordProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+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;
+
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, useTheme };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.0.6",
+  "version": "5.0.8",
   "description": "Primitive layout, typographic, and other components for styling applications.",
+  "license": "MIT",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -19,20 +20,19 @@
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "sideEffects": false,
   "dependencies": {
     "@theme-ui/match-media": "^0.16.2",
     "react-select": "^5.8.0",
     "theme-ui": "^0.16.2",
-    "@ttoss/theme": "^1.7.21"
+    "@ttoss/theme": "^1.7.23"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.4.2"
+    "@ttoss/react-icons": "^0.4.4"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.4",
@@ -42,9 +42,9 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.3.0",
-    "@ttoss/react-icons": "^0.4.2",
-    "@ttoss/test-utils": "^2.1.15",
-    "@ttoss/config": "^1.33.0"
+    "@ttoss/react-icons": "^0.4.4",
+    "@ttoss/test-utils": "^2.1.17",
+    "@ttoss/config": "^1.34.1"
   },
   "keywords": [
     "React",

package/src/components/ActionButton.tsx

@@ -1,41 +0,0 @@
-import { Button, type ButtonProps } from './Button';
-
-export type ActionButtonProps = Omit<
-  ButtonProps,
-  'rightIcon' | 'leftIcon' | 'variant'
-> & {
-  icon: ButtonProps['leftIcon'];
-  variant?: 'default' | 'accent' | 'quiet';
-};
-
-export const ActionButton = ({
-  icon,
-  variant = 'default',
-  sx,
-  ...props
-}: ActionButtonProps) => {
-  return (
-    <Button
-      variant={`buttons.actionButton.${variant}`}
-      leftIcon={icon}
-      sx={{
-        padding: 'sm',
-        gap: 'xs',
-        fontFamily: 'caption',
-        borderRadius: 'action',
-        outlineColor: 'transparent',
-        ':disabled': props.disabled
-          ? {
-              backgroundColor: 'muted',
-              color: 'onMuted',
-              cursor: 'not-allowed',
-              border: 'muted',
-              borderColor: 'onMuted',
-            }
-          : undefined,
-        ...sx,
-      }}
-      {...props}
-    />
-  );
-};

package/src/components/Badge.tsx

@@ -1,54 +0,0 @@
-import { type BadgeProps as BadgePropsUi, Badge as BadgeUi } from 'theme-ui';
-import { Icon, IconType } from '@ttoss/react-icons';
-import { Text } from '../components/Text';
-
-export type BadgeProps = BadgePropsUi & {
-  icon?: IconType;
-  chip?: boolean;
-  onDelete?: () => void;
-};
-
-export const Badge = ({
-  icon,
-  children,
-  sx,
-  chip,
-  onDelete,
-  ...props
-}: BadgeProps) => {
-  return (
-    <BadgeUi
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        fontFamily: 'caption',
-        fontWeight: 'normal',
-        lineHeight: 'base',
-        fontSize: 'sm',
-        paddingX: 'xs',
-        borderRadius: 'informative',
-        paddingY: '2xs',
-        gap: 'xs',
-        ...sx,
-      }}
-      {...props}
-    >
-      {icon && <Icon inline icon={icon} />}
-
-      {children}
-
-      {chip && (
-        <Text
-          sx={{
-            cursor: 'pointer',
-            lineHeight: 0,
-            color: 'currentcolor',
-            alignSelf: 'center',
-          }}
-        >
-          <Icon onClick={onDelete} inline icon="close" />
-        </Text>
-      )}
-    </BadgeUi>
-  );
-};

package/src/components/Box.tsx

@@ -1 +0,0 @@
-export { Box, type BoxProps } from 'theme-ui';

package/src/components/Button.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import {
-  type ButtonProps as ButtonPropsUi,
-  Button as ButtonUi,
-} from 'theme-ui';
-import { Icon, IconType } from '@ttoss/react-icons';
-
-export type ButtonProps = ButtonPropsUi & {
-  leftIcon?: IconType;
-  rightIcon?: IconType;
-  loading?: boolean;
-};
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const { children, leftIcon, rightIcon, loading, ...restProps } = props;
-
-    return (
-      <ButtonUi
-        type="button"
-        {...restProps}
-        ref={ref}
-        sx={{
-          cursor: 'pointer',
-          paddingX: 'xl',
-          paddingY: 'lg',
-          fontFamily: 'body',
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: 'lg',
-          ...restProps.sx,
-        }}
-      >
-        {loading && <Icon inline icon="three-dots-loading" />}
-        {!loading && leftIcon && <Icon inline icon={leftIcon} />}
-        {children}
-        {rightIcon && <Icon inline icon={rightIcon} />}
-      </ButtonUi>
-    );
-  }
-);
-
-Button.displayName = 'Button';

package/src/components/Card.tsx

@@ -1 +0,0 @@
-export { Card, type CardProps } from 'theme-ui';

package/src/components/Checkbox.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import {
-  Checkbox as CheckBoxUi,
-  CheckboxProps as CheckboxPropsUi,
-} from 'theme-ui';
-
-export interface CheckboxProps extends CheckboxPropsUi {
-  indeterminate?: boolean;
-}
-
-export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ indeterminate = false, ...rest }, ref) => {
-    const innerRef = React.useRef<HTMLInputElement>(null);
-
-    /**
-     * https://stackoverflow.com/a/68163315/8786986
-     */
-    React.useImperativeHandle(ref, () => {
-      return innerRef.current as HTMLInputElement;
-    });
-
-    React.useEffect(() => {
-      if (innerRef.current) {
-        innerRef.current.indeterminate = indeterminate;
-      }
-    }, [indeterminate]);
-
-    if (indeterminate) {
-      return <input type="checkbox" ref={innerRef} {...rest} />;
-    }
-
-    return <CheckBoxUi ref={innerRef} {...rest} />;
-  }
-);
-
-Checkbox.displayName = 'Checkbox';

package/src/components/CloseButton.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { Button, type ButtonProps } from './Button';
-import { Icon } from '@ttoss/react-icons';
-
-export type CloseButtonProps = ButtonProps & {
-  label?: string;
-  onlyText?: boolean;
-};
-
-export const CloseButton = React.forwardRef<
-  HTMLButtonElement,
-  CloseButtonProps
->(({ label, sx, onlyText, ...props }, ref) => {
-  if (onlyText && !label) {
-    return null;
-  }
-
-  return (
-    <Button
-      variant="buttons.closeButton"
-      type="button"
-      aria-label={label}
-      sx={{
-        fontFamily: 'caption',
-        fontSize: 'xs',
-        display: 'inline-flex',
-        alignItems: 'center',
-        cursor: 'pointer',
-        lineHeight: 'normal',
-        gap: 'sm',
-        padding: 'sm',
-        width: 'fit-content',
-        transition: 'all 0.2s',
-        '& > iconify-icon': {
-          fontSize: 'base',
-        },
-        ...sx,
-      }}
-      {...props}
-      ref={ref}
-    >
-      {label}
-
-      {!onlyText && <Icon icon="close" />}
-    </Button>
-  );
-});
-
-CloseButton.displayName = 'CloseButton';

package/src/components/Container.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { type ContainerProps, Container as ContainerUi } from 'theme-ui';
-
-export type { ContainerProps };
-
-export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
-  (props, ref) => {
-    return <ContainerUi ref={ref} {...props} />;
-  }
-);
-
-Container.displayName = 'Container';

package/src/components/Divider.tsx

@@ -1 +0,0 @@
-export { Divider, type DividerProps } from 'theme-ui';

package/src/components/Flex.tsx

@@ -1 +0,0 @@
-export { Flex, type FlexProps } from 'theme-ui';

package/src/components/Grid.tsx

@@ -1 +0,0 @@
-export { Grid, type GridProps } from 'theme-ui';

package/src/components/Heading.tsx

@@ -1 +0,0 @@
-export { Heading, type HeadingProps } from 'theme-ui';

package/src/components/HelpText.tsx

@@ -1,31 +0,0 @@
-import { Text, TextProps } from './Text';
-
-export type HelpTextProps = Omit<TextProps, 'variant'> & {
-  disabled?: boolean;
-  negative?: boolean;
-};
-
-export const HelpText = ({
-  sx,
-  disabled,
-  negative,
-  ...props
-}: HelpTextProps) => {
-  const variant = ['text.help', negative ? 'negative' : undefined]
-    .filter(Boolean)
-    .join('.');
-
-  return (
-    <Text
-      variant={variant}
-      sx={{
-        fontSize: 'sm',
-        fontFamily: 'caption',
-        lineHeight: 'base',
-        ...sx,
-      }}
-      aria-disabled={disabled ? 'true' : undefined}
-      {...props}
-    />
-  );
-};

package/src/components/IconButton.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { type IconButtonProps, IconButton as IconButtonUi } from 'theme-ui';
-
-export type { IconButtonProps };
-
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  (props, ref) => {
-    return <IconButtonUi type="button" {...props} ref={ref} />;
-  }
-);
-
-IconButton.displayName = 'IconButton';

package/src/components/Image.tsx

@@ -1 +0,0 @@
-export { Image, type ImageProps } from 'theme-ui';

package/src/components/InfiniteLinearProgress.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { LinearProgress } from './LinearProgress';
-
-const MAX_PROGRESS = 100;
-
-export const InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React.useState(0);
-
-  React.useEffect(() => {
-    const timer = setInterval(() => {
-      setProgress((oldProgress) => {
-        if (oldProgress === MAX_PROGRESS) {
-          return 0;
-        }
-
-        let diff = 0;
-
-        if (oldProgress > 0.97 * MAX_PROGRESS) {
-          diff -= 0.75 * MAX_PROGRESS;
-        } else if (oldProgress > 0.6 * MAX_PROGRESS) {
-          diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
-        } else {
-          diff = Math.random() * (MAX_PROGRESS * 0.02);
-        }
-
-        return Math.min(oldProgress + diff, MAX_PROGRESS);
-      });
-    }, 100);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-
-  return (
-    <LinearProgress max={MAX_PROGRESS} value={progress} role="progressbar" />
-  );
-};

package/src/components/Input.tsx

@@ -1,83 +0,0 @@
-import * as React from 'react';
-import { Flex, Text } from '..';
-import { Icon, type IconType } from '@ttoss/react-icons';
-import { InputProps as InputPropsUI, Input as InputUI } from 'theme-ui';
-
-export interface InputProps extends InputPropsUI {
-  leadingIcon?: IconType;
-  onLeadingIconClick?: () => void;
-  trailingIcon?: IconType;
-  onTrailingIconClick?: () => void;
-}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      leadingIcon,
-      trailingIcon: trailingIconProp,
-      onLeadingIconClick,
-      onTrailingIconClick,
-      className,
-      sx,
-      ...inputProps
-    },
-    ref
-  ) => {
-    const trailingIcon = inputProps['aria-invalid']
-      ? 'warning-alt'
-      : trailingIconProp;
-
-    return (
-      <Flex
-        className={className}
-        sx={{ ...sx, position: 'relative', padding: 0, border: 'none' }}
-      >
-        {leadingIcon && (
-          <Text
-            sx={{
-              position: 'absolute',
-              alignSelf: 'center',
-              left: '1rem',
-              cursor: onLeadingIconClick ? 'pointer' : 'default',
-            }}
-            onClick={onLeadingIconClick}
-            variant="leading-icon"
-          >
-            <Icon inline icon={leadingIcon} />
-          </Text>
-        )}
-        <InputUI
-          ref={ref}
-          sx={{
-            fontFamily: 'body',
-            paddingY: 'lg',
-            paddingX: 'xl',
-            ...sx,
-            paddingLeft: leadingIcon ? '3xl' : undefined,
-            paddingRight: trailingIcon ? '3xl' : undefined,
-            margin: 0,
-          }}
-          className={className}
-          {...inputProps}
-        />
-
-        {trailingIcon && (
-          <Text
-            sx={{
-              position: 'absolute',
-              right: '1rem',
-              alignSelf: 'center',
-              cursor: onTrailingIconClick ? 'pointer' : 'default',
-            }}
-            variant="trailing-icon"
-            onClick={onTrailingIconClick}
-          >
-            <Icon inline icon={trailingIcon} />
-          </Text>
-        )}
-      </Flex>
-    );
-  }
-);
-
-Input.displayName = 'Input';