@ttoss/ui 5.0.7 → 5.0.9

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.0.7",
+  "version": "5.0.9",
   "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.22"
+    "@ttoss/theme": "^1.8.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.4.3"
+    "@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/config": "^1.34.0",
-    "@ttoss/react-icons": "^0.4.3",
-    "@ttoss/test-utils": "^2.1.16"
+    "@ttoss/config": "^1.34.1",
+    "@ttoss/test-utils": "^2.1.17",
+    "@ttoss/react-icons": "^0.4.4"
   },
   "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';

package/src/components/InputNumber.tsx

@@ -1,150 +0,0 @@
-import * as React from 'react';
-import { Flex, Text } from '..';
-import { Icon } from '@ttoss/react-icons';
-import { Input, type InputProps as InputPropsUI } from 'theme-ui';
-
-export type InputNumberProps = Omit<
-  InputPropsUI,
-  'type' | 'variant' | 'onChange'
-> & {
-  onChange: (value: number) => void;
-  value?: number;
-  infoIcon?: boolean;
-  onClickInfoIcon?: () => void;
-};
-
-export const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
-  ({ sx, value, infoIcon, onChange, onClickInfoIcon, ...inputProps }, ref) => {
-    const sxProps: InputPropsUI['sx'] = React.useMemo(() => {
-      const size = String(typeof value === 'undefined' ? 0 : value).length;
-
-      if (inputProps['aria-invalid'] === 'true') {
-        return {
-          width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
-          textAlign: 'left',
-          '&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button':
-            {
-              WebkitAppearance: 'none',
-              margin: 0,
-            },
-          ...sx,
-          paddingLeft: '3xl',
-          paddingRight: '2xl',
-          margin: 0,
-        };
-      }
-
-      return {
-        width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
-        textAlign: 'center',
-        '&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button':
-          {
-            WebkitAppearance: 'none',
-            margin: 0,
-          },
-        fontFamily: 'body',
-        paddingY: 'lg',
-        paddingX: 'xl',
-        ...sx,
-        paddingLeft: '2xl',
-        paddingRight: '2xl',
-        margin: 0,
-      };
-    }, [inputProps, value, sx]);
-
-    const handleChangeUp = () => {
-      if (inputProps.disabled) {
-        return;
-      }
-
-      if (typeof value !== 'number') {
-        onChange(-1);
-        return;
-      }
-
-      onChange(value - 1);
-    };
-
-    const handleChangeDown = () => {
-      if (inputProps.disabled) {
-        return;
-      }
-
-      if (typeof value !== 'number') {
-        onChange(1);
-        return;
-      }
-
-      onChange(value + 1);
-    };
-
-    return (
-      <Flex
-        sx={{
-          width: 'fit-content',
-          ...sx,
-          position: 'relative',
-          padding: 0,
-          border: 'none',
-        }}
-        ref={ref}
-        aria-invalid={inputProps['aria-invalid']}
-      >
-        <Input
-          ref={ref}
-          variant="forms.inputNumber"
-          sx={sxProps}
-          type="number"
-          onChange={(e) => {
-            onChange(Number(e.target.value));
-          }}
-          value={value}
-          {...inputProps}
-        />
-
-        <Text
-          sx={{
-            position: 'absolute',
-            alignSelf: 'center',
-            left: '1rem',
-            zIndex: 1,
-            cursor: 'pointer',
-          }}
-          onClick={handleChangeUp}
-        >
-          <Icon icon="picker-down" />
-        </Text>
-
-        {infoIcon && (
-          <Text
-            sx={{
-              position: 'absolute',
-              alignSelf: 'center',
-              right: '2.5rem',
-              zIndex: 1,
-              cursor: onClickInfoIcon ? 'pointer' : 'default',
-            }}
-            onClick={onClickInfoIcon}
-          >
-            <Icon icon="info" />
-          </Text>
-        )}
-
-        <Text
-          sx={{
-            position: 'absolute',
-            alignSelf: 'center',
-            right: '1rem',
-            zIndex: 1,
-            cursor: 'pointer',
-          }}
-          onClick={handleChangeDown}
-        >
-          <Icon icon="picker-up" />
-        </Text>
-      </Flex>
-    );
-  }
-);
-
-InputNumber.displayName = 'InputNumber';

package/src/components/InputPassword/InputPassword.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { Input } from '../Input';
-import { type InputProps } from '../Input';
-import { useHidePassInput } from './useHidePassInput';
-
-export type InputPasswordProps = Omit<
-  InputProps,
-  'trailingIcon' | 'onTrailingIconClick' | 'type'
-> & {
-  showPasswordByDefault?: boolean;
-};
-
-export const InputPassword = React.forwardRef<
-  HTMLInputElement,
-  InputPasswordProps
->(({ showPasswordByDefault, ...inputPasswordProps }, ref) => {
-  const { handleClick, icon, inputType } = useHidePassInput(
-    !showPasswordByDefault
-  );
-
-  return (
-    <Input
-      ref={ref}
-      {...inputPasswordProps}
-      trailingIcon={icon}
-      onTrailingIconClick={handleClick}
-      type={inputType}
-    />
-  );
-});
-
-InputPassword.displayName = 'InputPassword';

package/src/components/InputPassword/useHidePassInput.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-export const useHidePassInput = (defaultValue = true) => {
-  const [hidePass, setHidePass] = React.useState<boolean>(
-    Boolean(defaultValue)
-  );
-
-  const { icon, inputType } = React.useMemo(() => {
-    return {
-      icon: hidePass ? 'view-off' : 'view-on',
-      inputType: hidePass ? 'password' : 'text',
-    };
-  }, [hidePass]);
-
-  const handleClick = () => {
-    setHidePass((prev) => {
-      return !prev;
-    });
-  };
-
-  return {
-    handleClick,
-    icon,
-    inputType,
-  };
-};