@ttoss/ui 5.0.7 → 5.0.9

package/src/components/Label.tsx

@@ -1,46 +0,0 @@
-import { Icon } from '@ttoss/react-icons';
-import { type LabelProps as LabelPropsUi, Label as LabelUi } from 'theme-ui';
-import { Text } from '..';
-
-const TOOLTIP_LABEL = 'tooltip';
-
-export type LabelProps = LabelPropsUi & {
-  tooltip?: boolean;
-  onTooltipClick?: () => void;
-};
-
-export const Label = ({
-  children,
-  onTooltipClick,
-  tooltip,
-  sx,
-  ...props
-}: LabelProps) => {
-  return (
-    <LabelUi
-      sx={{
-        fontFamily: 'caption',
-        alignItems: 'center',
-        fontSize: 'sm',
-        lineHeight: 'base',
-        ...sx,
-      }}
-      {...props}
-    >
-      {children}
-
-      {tooltip && (
-        <Text
-          sx={{
-            color: 'currentcolor',
-            cursor: onTooltipClick ? 'pointer' : undefined,
-          }}
-          onClick={onTooltipClick}
-          aria-label={TOOLTIP_LABEL}
-        >
-          <Icon inline icon="info" />
-        </Text>
-      )}
-    </LabelUi>
-  );
-};

package/src/components/LinearProgress.tsx

@@ -1,4 +0,0 @@
-export {
-  Progress as LinearProgress,
-  type ProgressProps as LinearProgressProps,
-} from 'theme-ui';

package/src/components/Link.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { type LinkProps as LinkPropsUi, Link as LinkUi } from 'theme-ui';
-
-export type LinkProps = LinkPropsUi & {
-  quiet?: boolean;
-};
-
-export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ quiet, className, ...props }, ref) => {
-    return (
-      <LinkUi
-        className={`${quiet ? 'quiet' : ''} ${className ?? ''}`}
-        {...props}
-        ref={ref}
-      />
-    );
-  }
-);
-
-Link.displayName = 'Link';

package/src/components/Paragraph.tsx

@@ -1 +0,0 @@
-export { Paragraph, type ParagraphProps } from 'theme-ui';

package/src/components/Radio.tsx

@@ -1 +0,0 @@
-export { Radio, type RadioProps } from 'theme-ui';

package/src/components/Select.tsx

@@ -1,284 +0,0 @@
-/**
- * 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
- */
-import * as React from 'react';
-import { Box, Flex, Text } from '..';
-import { Icon, IconType } from '@ttoss/react-icons';
-import { type SxProp } from 'theme-ui';
-import ReactSelect, {
-  type ContainerProps,
-  type ControlProps,
-  type DropdownIndicatorProps,
-  type IndicatorsContainerProps,
-  type PlaceholderProps,
-  type Props as ReactSelectProps,
-  type ValueContainerProps,
-  components,
-} from 'react-select';
-
-type SelectOptionValue = string | number | boolean;
-
-export type SelectOption = {
-  label: string;
-  value: SelectOptionValue;
-};
-
-export type SelectOptions = SelectOption[];
-
-/**
- * TODO: remove this when we accept multi select.
- */
-type IsMulti = false;
-
-export type SelectProps = Omit<
-  ReactSelectProps<SelectOption, IsMulti>,
-  'styles' | 'value' | 'onChange' | 'components'
-> &
-  SxProp & {
-    value?: SelectOptionValue;
-    onChange?: (value: SelectOptionValue | undefined) => void;
-    disabled?: boolean;
-    leadingIcon?: IconType;
-    trailingIcon?: IconType;
-  };
-
-const Control = (props: ControlProps<SelectOption, IsMulti>) => {
-  const isDisabled = props.selectProps.isDisabled;
-
-  const hasError = props.selectProps['aria-invalid'] === 'true';
-
-  const border = (() => {
-    if (isDisabled) {
-      return 'muted';
-    }
-
-    if (hasError) {
-      return 'danger';
-    }
-
-    return 'interaction';
-  })();
-
-  const backgroundColor = (() => {
-    if (isDisabled) {
-      return 'muted';
-    }
-
-    return 'surface';
-  })();
-
-  return (
-    <Box
-      sx={{
-        '.react-select__control': {
-          border,
-          backgroundColor,
-          paddingX: 'xl',
-          paddingY: 'lg',
-          borderRadius: 'action',
-        },
-      }}
-    >
-      <components.Control {...props} />
-    </Box>
-  );
-};
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const DropdownIndicator = (
-  props: DropdownIndicatorProps<SelectOption, IsMulti>
-) => {
-  const isDisabled = props.selectProps.isDisabled;
-
-  const color = (() => {
-    if (isDisabled) {
-      return 'onMuted';
-    }
-
-    return 'text';
-  })();
-
-  return (
-    <Text
-      sx={{
-        fontSize: 'base',
-        color,
-        alignSelf: 'center',
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    >
-      <Icon icon="picker-down" />
-    </Text>
-  );
-};
-
-const IndicatorsContainer = ({
-  children,
-}: IndicatorsContainerProps<SelectOption, IsMulti>) => {
-  return (
-    <Box
-      sx={{
-        marginLeft: 'lg',
-        border: 'none',
-      }}
-    >
-      {children}
-    </Box>
-  );
-};
-
-const Placeholder = ({ children }: PlaceholderProps<SelectOption, IsMulti>) => {
-  return (
-    <Text
-      sx={{
-        color: 'onMuted',
-        alignSelf: 'center',
-      }}
-    >
-      {children}
-    </Text>
-  );
-};
-
-const SelectContainer = ({
-  children,
-  ...props
-}: ContainerProps<SelectOption, IsMulti>) => {
-  const { sx, css } = props.selectProps as unknown as SelectProps;
-
-  return (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    <Box sx={sx as any} css={css}>
-      <components.SelectContainer {...props}>
-        {children}
-      </components.SelectContainer>
-    </Box>
-  );
-};
-
-const ValueContainer = ({
-  children,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ...props
-}: ValueContainerProps<SelectOption, IsMulti>) => {
-  const { leadingIcon, trailingIcon, isSearchable } =
-    props.selectProps as unknown as SelectProps;
-
-  const hasError = props.selectProps['aria-invalid'] === 'true';
-
-  const trailingIconColor = (() => {
-    if (hasError) {
-      return 'danger';
-    }
-
-    return 'text';
-  })();
-
-  const finalLeadingIcon = (() => {
-    if (!isSearchable) {
-      return leadingIcon;
-    }
-
-    return leadingIcon || 'search';
-  })();
-
-  return (
-    <Flex
-      sx={{
-        gap: 'lg',
-        flex: 1,
-      }}
-    >
-      {finalLeadingIcon && (
-        <Text
-          sx={{
-            alignSelf: 'center',
-            pointerEvents: 'none',
-            lineHeight: 0,
-            fontSize: 'base',
-          }}
-        >
-          <Icon icon={finalLeadingIcon} />
-        </Text>
-      )}
-      <Flex
-        sx={{
-          flex: 1,
-          alignItems: 'center',
-        }}
-      >
-        {children}
-      </Flex>
-      {(trailingIcon || hasError) && (
-        <Text
-          className={hasError ? 'error-icon' : ''}
-          sx={{
-            alignSelf: 'center',
-            pointerEvents: 'none',
-            lineHeight: 0,
-            fontSize: 'base',
-            color: trailingIconColor,
-          }}
-        >
-          <Icon icon={hasError ? 'warning-alt' : (trailingIcon as IconType)} />
-        </Text>
-      )}
-    </Flex>
-  );
-};
-
-/**
- * https://react-select.com/home
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Select = React.forwardRef<any, SelectProps>(
-  ({ ...props }, ref) => {
-    const value = props.options?.find((option) => {
-      if ('value' in option) {
-        return option.value === props.value;
-      }
-
-      return false;
-    }) as SelectOption | undefined;
-
-    return (
-      <ReactSelect<SelectOption, IsMulti>
-        ref={ref}
-        /**
-         * https://react-select.com/components
-         */
-        components={{
-          Control,
-          DropdownIndicator,
-          IndicatorsContainer,
-          Placeholder,
-          SelectContainer,
-          ValueContainer,
-        }}
-        isDisabled={props.disabled}
-        {...props}
-        value={value}
-        onChange={(value) => {
-          props.onChange?.(value?.value);
-        }}
-        styles={{
-          input: (baseStyles) => {
-            return {
-              ...baseStyles,
-              position: 'absolute',
-            };
-          },
-        }}
-        /**
-         * https://react-select.com/styles#the-classnameprefix-prop
-         */
-        classNamePrefix="react-select"
-      />
-    );
-  }
-);
-
-Select.displayName = 'Select';

package/src/components/Slider.tsx

@@ -1 +0,0 @@
-export { Slider, type SliderProps } from 'theme-ui';

package/src/components/Spinner.tsx

@@ -1 +0,0 @@
-export { Spinner, type SpinnerProps } from 'theme-ui';

package/src/components/Stack.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { Flex, FlexProps } from './Flex';
-
-export type StackProps = FlexProps;
-
-/**
- * A component that renders its children in a column.
- */
-export const Stack = React.forwardRef<HTMLElement, StackProps>(
-  (props: FlexProps, ref) => {
-    return (
-      <Flex
-        ref={ref}
-        {...props}
-        sx={{
-          flexDirection: 'column',
-          ...props.sx,
-        }}
-      />
-    );
-  }
-);
-
-Stack.displayName = 'Stack';

package/src/components/Text.tsx

@@ -1 +0,0 @@
-export { Text, type TextProps } from 'theme-ui';

package/src/components/Textarea.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { Flex, Text } from '..';
-import { Icon, type IconType } from '@ttoss/react-icons';
-import {
-  type TextareaProps as TextareaPropsUI,
-  Textarea as TextareaUI,
-} from 'theme-ui';
-
-export interface TextareaProps extends TextareaPropsUI {
-  trailingIcon?: IconType;
-}
-
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ trailingIcon, className, sx, ...textareaProps }, ref) => {
-    return (
-      <Flex
-        className={className}
-        sx={{
-          ...sx,
-          position: 'relative',
-          padding: 0,
-          border: 'none',
-        }}
-      >
-        <TextareaUI
-          ref={ref}
-          sx={{
-            fontFamily: 'body',
-            paddingY: 'lg',
-            paddingX: 'xl',
-            ...sx,
-            paddingRight: trailingIcon ? '3xl' : undefined,
-            margin: 0,
-          }}
-          className={className}
-          {...textareaProps}
-        />
-
-        {trailingIcon && (
-          <Text
-            sx={{
-              position: 'absolute',
-              right: '1.25rem',
-              top: '0.75rem',
-            }}
-          >
-            <Icon inline icon={trailingIcon} />
-          </Text>
-        )}
-      </Flex>
-    );
-  }
-);
-
-Textarea.displayName = 'Textarea';

package/src/index.ts

@@ -1,58 +0,0 @@
-export {
-  BaseStyles,
-  type Theme,
-  Global,
-  type SxProp,
-  type ThemeUIStyleObject,
-} from 'theme-ui';
-export { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media';
-export { keyframes, type Keyframes } from '@emotion/react';
-
-export { ThemeProvider, type ThemeProviderProps } from './theme/ThemeProvider';
-
-export { useTheme } from './theme/useTheme';
-
-export { Badge, type BadgeProps } from './components/Badge';
-export { Box, type BoxProps } from './components/Box';
-export { Button, type ButtonProps } from './components/Button';
-export { Card, type CardProps } from './components/Card';
-export { Divider, type DividerProps } from './components/Divider';
-export { Flex, type FlexProps } from './components/Flex';
-export { Grid, type GridProps } from './components/Grid';
-export { Heading, type HeadingProps } from './components/Heading';
-export { Image, type ImageProps } from './components/Image';
-export { Input, type InputProps } from './components/Input';
-export { Label, type LabelProps } from './components/Label';
-export { Link, type LinkProps } from './components/Link';
-export {
-  LinearProgress,
-  type LinearProgressProps,
-} from './components/LinearProgress';
-export { Text, type TextProps } from './components/Text';
-export {
-  Select,
-  type SelectProps,
-  type SelectOptions,
-  type SelectOption,
-} from './components/Select';
-export { Spinner, type SpinnerProps } from './components/Spinner';
-export { Radio, type RadioProps } from './components/Radio';
-export { IconButton, type IconButtonProps } from './components/IconButton';
-export { Slider, type SliderProps } from './components/Slider';
-export { Checkbox, type CheckboxProps } from './components/Checkbox';
-export { InfiniteLinearProgress } from './components/InfiniteLinearProgress';
-export { Textarea, type TextareaProps } from './components/Textarea';
-export { Container, type ContainerProps } from './components/Container';
-export { HelpText, type HelpTextProps } from './components/HelpText';
-export { CloseButton, type CloseButtonProps } from './components/CloseButton';
-export { InputNumber, type InputNumberProps } from './components/InputNumber';
-export { Stack, type StackProps } from './components/Stack';
-export { Paragraph, type ParagraphProps } from './components/Paragraph';
-export {
-  InputPassword,
-  type InputPasswordProps,
-} from './components/InputPassword/InputPassword';
-export {
-  ActionButton,
-  type ActionButtonProps,
-} from './components/ActionButton';

package/src/theme/ThemeProvider.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { BruttalFonts, BruttalTheme } from '@ttoss/theme/Bruttal';
-import { Global, css } from '@emotion/react';
-import { Theme, ThemeUIProvider } from 'theme-ui';
-
-export type ThemeProviderProps = {
-  children?: React.ReactNode;
-  theme?: Theme;
-  /**
-   * Fonts URLs.
-   */
-  fonts?: string[];
-};
-
-export const ThemeProvider = ({
-  children,
-  theme = BruttalTheme,
-  fonts = BruttalFonts,
-}: ThemeProviderProps) => {
-  return (
-    <>
-      <ThemeUIProvider theme={theme}>
-        <Global
-          styles={css`
-            ${fonts
-              .map((url) => {
-                return `@import url('${url}');`;
-              })
-              .join('\n')}
-          `}
-        />
-        {children}
-      </ThemeUIProvider>
-    </>
-  );
-};

package/src/theme/useTheme.ts

@@ -1,3 +0,0 @@
-import { useThemeUI } from 'theme-ui';
-
-export const useTheme = useThemeUI;