@spies-ui/react 1.0.2 → 1.0.4

package/dist/index.js

@@ -199,7 +199,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/styles/index.ts
+// src/styles/index.tsx
 var import_tokens = __toESM(require_dist());
 var import_react = require("@stitches/react");
 var {

package/dist/index.mjs

@@ -170,7 +170,7 @@ var require_dist = __commonJS({
   }
 });
 
-// src/styles/index.ts
+// src/styles/index.tsx
 var import_tokens = __toESM(require_dist());
 import { createStitches, defaultThemeMap } from "@stitches/react";
 var {

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@spies-ui/react",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
     "dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch",

package/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "@spies-ui/eslint-config"
-}

package/.turbo/turbo-build.log

@@ -1,18 +0,0 @@
-
-> @spies-ui/react@1.0.2 build
-> tsup src/index.tsx --format esm,cjs --dts --external react
-
-CLI Building entry: src/index.tsx
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.0.2
-CLI Target: es6
-ESM Build start
-CJS Build start
-ESM dist/index.mjs 19.94 KB
-ESM ⚡️ Build success in 42ms
-CJS dist/index.js 21.52 KB
-CJS ⚡️ Build success in 41ms
-DTS Build start
-DTS ⚡️ Build success in 3984ms
-DTS dist/index.d.mts 104.63 KB
-DTS dist/index.d.ts  104.63 KB

package/CHANGELOG.md

@@ -1,13 +0,0 @@
-# @spies-ui/react
-
-## 1.0.2
-
-### Patch Changes
-
-- Add fixes and variants to react components
-
-## 1.0.1
-
-### Patch Changes
-
-- Remove unnecessary comment

package/src/components/Avatar/index.tsx

@@ -1,19 +0,0 @@
-import { ComponentProps } from 'react'
-import { AvatarContainer, AvatarFallback, AvatarImage } from './styles'
-import { User } from 'phosphor-react'
-
-export interface AvatarProps extends ComponentProps<typeof AvatarImage> {}
-
-export function Avatar(props: AvatarProps) {
-  return (
-    <AvatarContainer>
-      <AvatarImage {...props} />
-
-      <AvatarFallback delayMs={600}>
-        <User />
-      </AvatarFallback>
-    </AvatarContainer>
-  )
-}
-
-Avatar.displayName = 'Avatar'

package/src/components/Avatar/styles.ts

@@ -1,31 +0,0 @@
-import * as Avatar from '@radix-ui/react-avatar'
-import { styled } from '../../styles'
-
-export const AvatarContainer = styled(Avatar.Root, {
-  borderRadius: '$full',
-  display: 'inline-block',
-  width: '$12',
-  height: '$12',
-  overflow: 'hidden',
-})
-
-export const AvatarImage = styled(Avatar.Image, {
-  width: '100%',
-  height: '100%',
-  objectFix: 'cover',
-  borderRadius: 'inherit',
-})
-export const AvatarFallback = styled(Avatar.Fallback, {
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: '$gray600',
-  color: '$gray800',
-
-  svg: {
-    width: '$6',
-    height: '$6',
-  },
-})

package/src/components/Box.tsx

@@ -1,32 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-
-export const Box = styled('div', {
-  padding: '$6',
-  borderRadius: '$md',
-  variants: {
-    background: {
-      default: {
-        backgroundColor: 'transparent',
-      },
-      gray600: {
-        backgroundColor: '$gray600',
-      },
-      gray700: {
-        backgroundColor: '$gray700',
-      },
-      gray800: {
-        backgroundColor: '$gray800',
-      },
-      gray900: {
-        backgroundColor: '$gray900',
-      },
-    },
-  },
-})
-
-export interface BoxProps extends ComponentProps<typeof Box> {
-  as?: ElementType
-}
-
-Box.displayName = 'Box'

package/src/components/Button.tsx

@@ -1,102 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-
-export const Button = styled('button', {
-  all: 'unset',
-  fontFamily: '$default',
-  fontWeight: '$medium',
-  fontSize: '$sm',
-  textAlign: 'center',
-  minWidth: 0,
-  boxSizing: 'border-box',
-
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  gap: '$2',
-
-  cursor: 'pointer',
-
-  transition: '0.2s',
-
-  svg: {
-    width: '$4',
-    height: '$4',
-  },
-
-  '&:disabled': {
-    cursor: 'not-allowed',
-    backgroundColor: '$gray200',
-    borderColor: '$gray200',
-  },
-
-  variants: {
-    variant: {
-      default: {
-        backgroundColor: 'transparent',
-        border: '2px solid $gray500',
-        color: '$smokedWhite',
-
-        '&:not(:disabled):hover': {
-          borderColor: '$gray600',
-        },
-
-        '&:focus': {
-          borderColor: '$primary',
-        },
-      },
-      primary: {
-        backgroundColor: '$primary',
-        border: '2px solid $primary',
-        color: '$smokedWhite',
-
-        '&:not(:disabled):hover': {
-          backgroundColor: '$primaryLight',
-          borderColor: '$primaryLight',
-        },
-
-        '&:focus': {
-          borderColor: '$smokedWhite',
-        },
-      },
-    },
-
-    size: {
-      default: {
-        padding: '$3 $6',
-      },
-      fit: {
-        width: '100%',
-        paddingTop: '$3',
-        paddingBottom: '$3',
-      },
-      small: {
-        padding: '$3 $4',
-      },
-    },
-
-    radius: {
-      small: {
-        borderRadius: '$sm',
-      },
-      default: {
-        borderRadius: '$lg',
-      },
-      full: {
-        borderRadius: '$full',
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'default',
-    radius: 'default',
-    variant: 'default',
-  },
-})
-
-export interface ButtonProps extends ComponentProps<typeof Button> {
-  as?: ElementType
-}
-
-Button.displayName = 'Button'

package/src/components/Checkbox/index.tsx

@@ -1,28 +0,0 @@
-import { Check } from 'phosphor-react'
-import { CheckboxContainer, CheckboxIndicator, CheckboxBox } from './styles'
-import { Text } from '../Text'
-import { InputBox } from '../InputBox'
-import { ComponentProps } from 'react'
-
-export interface CheckboxProps
-  extends ComponentProps<typeof CheckboxContainer> {
-  label?: string
-  error?: string
-}
-
-export function Checkbox({ label, error, ...props }: CheckboxProps) {
-  return (
-    <InputBox error={error}>
-      <CheckboxBox>
-        <CheckboxContainer {...props} errored={!!error}>
-          <CheckboxIndicator asChild>
-            <Check weight="bold" />
-          </CheckboxIndicator>
-        </CheckboxContainer>
-        {!!label && <Text size="sm">{label}</Text>}
-      </CheckboxBox>
-    </InputBox>
-  )
-}
-
-Checkbox.displayName = 'Checkbox'

package/src/components/Checkbox/styles.ts

@@ -1,84 +0,0 @@
-import { styled, keyframes } from '../../styles'
-import * as Checkbox from '@radix-ui/react-checkbox'
-
-export const CheckboxBox = styled('div', {
-  display: 'flex',
-  gap: '$2',
-
-  '&:has(button:disabled)': {
-    opacity: 0.5,
-  },
-})
-
-export const CheckboxContainer = styled(Checkbox.Root, {
-  all: 'unset',
-  width: '$6',
-  height: '$6',
-  backgroundColor: '$gray900',
-  borderRadius: '$xs',
-  lineHeight: 0,
-  cursor: 'pointer',
-  overflow: 'hidden',
-  boxSizing: 'border-box',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  border: '2px solid $gray900',
-
-  '&[data-state="checked"]': {
-    backgroundColor: '$primary',
-    borderColor: '$primary',
-  },
-
-  '&:focus': {
-    border: '2px solid $primary',
-  },
-
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-
-  variants: {
-    errored: {
-      true: {
-        borderColor: '$danger',
-      },
-    },
-  },
-
-  defaultVariants: {
-    errored: false,
-  },
-})
-
-const slideIn = keyframes({
-  from: {
-    transform: 'translateX(-100%)',
-  },
-  to: {
-    transform: 'translateX(0)',
-  },
-})
-
-const slideOut = keyframes({
-  from: {
-    transform: 'translateX(0)',
-  },
-  to: {
-    transform: 'translateX(100%)',
-  },
-})
-
-export const CheckboxIndicator = styled(Checkbox.Indicator, {
-  color: '$smokedWhite',
-  width: '$4',
-  height: '$4',
-
-  '&[data-state="checked"]': {
-    animation: `${slideIn} 100ms ease-out`,
-  },
-
-  '&[data-state="unchecked"]': {
-    animation: `${slideOut} 100ms ease-out`,
-  },
-})

package/src/components/Dropdown/index.tsx

@@ -1,98 +0,0 @@
-import { useRef, useState, useEffect } from 'react'
-import {
-  DropdownContainer,
-  DropdownList,
-  DropdownItem,
-  DropdownTrigger,
-} from './styles'
-import { Button } from './../Button'
-
-export interface Option {
-  text: string
-  variant?: 'default' | 'danger'
-  onSelect: () => void
-}
-
-export interface DropdownProps {
-  options: Option[]
-  name?: string
-  children?: React.ReactElement
-}
-
-export function Dropdown({ options, children, name }: DropdownProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const dropdownRef = useRef<HTMLUListElement>(null)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  const toggleDropdown = () => {
-    setIsOpen(!isOpen)
-  }
-
-  const handleSelectOption = (option: Option) => {
-    option.onSelect()
-    setIsOpen(false)
-  }
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (
-      dropdownRef.current &&
-      buttonRef.current &&
-      !dropdownRef.current.contains(event.target as Node) &&
-      !buttonRef.current.contains(event.target as Node)
-    ) {
-      setIsOpen(false)
-    }
-  }
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [])
-
-  useEffect(() => {
-    const handleReposition = () => {
-      if (isOpen && buttonRef.current && dropdownRef.current) {
-        const buttonRect = buttonRef.current.getBoundingClientRect()
-        const dropdownRect = dropdownRef.current.getBoundingClientRect()
-        const buttonTop = buttonRect.top
-        const buttonHeight = buttonRect.height
-        const dropdownHeight = dropdownRect.height
-
-        const spaceBelow = window.innerHeight - buttonTop - buttonHeight
-        if (spaceBelow < dropdownHeight) {
-          dropdownRef.current.style.bottom = `${buttonHeight + 6}px`
-        } else {
-          dropdownRef.current.style.top = `${buttonHeight + 6}px`
-        }
-      }
-    }
-
-    handleReposition()
-  }, [isOpen])
-
-  return (
-    <DropdownContainer>
-      <DropdownTrigger ref={buttonRef} onClick={toggleDropdown}>
-        {name && children === undefined && <Button>{name}</Button>}
-        {children && name === undefined && children}
-      </DropdownTrigger>
-      {isOpen && (
-        <DropdownList ref={dropdownRef}>
-          {options.map((option, index) => (
-            <DropdownItem
-              key={index}
-              onClick={() => handleSelectOption(option)}
-              variant={option.variant}
-            >
-              {option.text}
-            </DropdownItem>
-          ))}
-        </DropdownList>
-      )}
-    </DropdownContainer>
-  )
-}
-
-Dropdown.displayName = 'Dropdown'

package/src/components/Dropdown/styles.ts

@@ -1,75 +0,0 @@
-import { styled, keyframes } from '../../styles'
-
-export const DropdownContainer = styled('div', {
-  position: 'relative',
-  display: 'inline-block',
-})
-
-export const DropdownTrigger = styled('span', {})
-
-const fadeIn = keyframes({
-  '0%': { opacity: '0' },
-  '100%': { opacity: '1' },
-})
-
-export const DropdownList = styled('ul', {
-  position: 'absolute',
-  // top: '100%',
-  // left: 0,
-  backgroundColor: '#18181B',
-  borderRadius: '$lg',
-  padding: 0,
-  // margin: '$1 0',
-  margin: 0,
-  listStyle: 'none',
-  zIndex: 9999,
-  minWidth: '100%', // ensures the dropdown list as wide as the container
-
-  left: '50%',
-  transform: 'translateX(-50%)',
-
-  animation: `${fadeIn} 100ms ease-out`,
-
-  '& li:first-child': {
-    marginTop: '$2',
-  },
-  '& li:last-child': {
-    marginBottom: '$2',
-  },
-})
-
-export const DropdownItem = styled('li', {
-  fontFamily: '$default',
-  fontSize: '$sm',
-  color: '$smokedWhite',
-  padding: '$2 $2',
-  marginLeft: '$2',
-  marginRight: '$2',
-  width: '$40',
-  borderRadius: '$md',
-  cursor: 'pointer',
-
-  variants: {
-    variant: {
-      default: {
-        color: '$smokedWhite',
-
-        '&:hover': {
-          backgroundColor: '$gray700',
-        },
-      },
-      danger: {
-        color: '$danger',
-
-        '&:hover': {
-          backgroundColor: '$danger',
-          color: '$smokedWhite',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'default',
-  },
-})

package/src/components/Heading.tsx

@@ -1,32 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-
-export const Heading = styled('h2', {
-  fontFamily: '$heading',
-  lineHeight: '$shorter',
-  margin: 0,
-  color: '$smokedWhite',
-
-  variants: {
-    size: {
-      sm: { fontSize: '$xl' },
-      md: { fontSize: '$2xl' },
-      lg: { fontSize: '$4xl' },
-      '2xl': { fontSize: '$5xl' },
-      '3xl': { fontSize: '$5xl' },
-      '4xl': { fontSize: '$6xl' },
-      '5xl': { fontSize: '$7xl' },
-      '6xl': { fontSize: '$8xl' },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-})
-
-export interface HeadingProps extends ComponentProps<typeof Heading> {
-  as?: ElementType
-}
-
-Heading.displayName = 'Heading'

package/src/components/InputBox/index.tsx

@@ -1,24 +0,0 @@
-import { Text } from '../Text'
-import { InputContainer } from './styles'
-
-export interface InputProps {
-  label?: string
-  children: React.ReactElement
-  error?: string
-}
-
-export function InputBox({ label, error, children }: InputProps) {
-  return (
-    <InputContainer>
-      {!!label && <Text size={'sm'}>{label}</Text>}
-      {children}
-      {!!error && (
-        <Text size="xs" variant="danger">
-          {error}
-        </Text>
-      )}
-    </InputContainer>
-  )
-}
-
-InputBox.displayName = 'InputBox'

package/src/components/InputBox/styles.ts

@@ -1,7 +0,0 @@
-import { styled } from '../../styles'
-
-export const InputContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '$2',
-})

package/src/components/Text.tsx

@@ -1,45 +0,0 @@
-import { ComponentProps, ElementType } from 'react'
-import { styled } from '../styles'
-
-export const Text = styled('p', {
-  fontFamily: '$default',
-  lineHeight: '$base',
-  margin: 0,
-  color: '$smokedWhite',
-
-  variants: {
-    size: {
-      xxs: { fontSize: '$xxs' },
-      xs: { fontSize: '$xs' },
-      sm: { fontSize: '$sm' },
-      md: { fontSize: '$md' },
-      lg: { fontSize: '$lg' },
-      xl: { fontSize: '$xl' },
-      '2xl': { fontSize: '$2xl' },
-      '4xl': { fontSize: '$4xl' },
-      '5xl': { fontSize: '$5xl' },
-      '6xl': { fontSize: '$6xl' },
-      '7xl': { fontSize: '$7xl' },
-      '8xl': { fontSize: '$8xl' },
-      '9xl': { fontSize: '$9xl' },
-    },
-    variant: {
-      default: { color: '$smokedWhite' },
-      primary: { color: '$primary' },
-      danger: { color: '$danger' },
-      success: { color: '$success' },
-      warning: { color: '$warning' },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'default',
-  },
-})
-
-export interface TextProps extends ComponentProps<typeof Text> {
-  as?: ElementType
-}
-
-Text.displayName = 'Text'

package/src/components/TextArea/index.tsx

@@ -1,21 +0,0 @@
-import { ComponentProps, forwardRef, ElementRef } from 'react'
-import { InputBox } from '../InputBox'
-import { TextAreaInput } from './styles'
-
-export interface TextAreaProps extends ComponentProps<typeof TextAreaInput> {
-  label?: string
-  error?: string
-}
-
-export const TextArea = forwardRef<
-  ElementRef<typeof TextAreaInput>,
-  TextAreaProps
->(({ label, error, ...props }: TextAreaProps, ref) => {
-  return (
-    <InputBox label={label} error={error}>
-      <TextAreaInput ref={ref} {...props} errored={!!error} />
-    </InputBox>
-  )
-})
-
-TextArea.displayName = 'TextArea'

package/src/components/TextArea/styles.ts

@@ -1,42 +0,0 @@
-import { styled } from '../../styles'
-
-export const TextAreaInput = styled('textarea', {
-  backgroundColor: '$gray900',
-  padding: '$3 $4',
-  borderRadius: '$sm',
-  boxSizing: 'border-box',
-  border: '2px solid $gray900',
-
-  fontFamily: '$default',
-  fontSize: '$sm',
-  color: '$white',
-  fontWeight: '$regular',
-  resize: 'vertical',
-  minHeight: 80,
-
-  '&:focus': {
-    outline: 0,
-    borderColor: '$primary',
-  },
-
-  '&:disabled': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-  },
-
-  '&::placeholder': {
-    color: '$gray400',
-  },
-
-  variants: {
-    errored: {
-      true: {
-        borderColor: '$danger',
-      },
-    },
-  },
-
-  defaultVariants: {
-    errored: false,
-  },
-})

package/src/components/TextInput/index.tsx

@@ -1,26 +0,0 @@
-import { ComponentProps, ElementRef, forwardRef } from 'react'
-import { Input, Prefix, TextInputContainer } from './styles'
-import { InputBox } from '../InputBox'
-
-export interface TextInputProps
-  extends Omit<ComponentProps<typeof Input>, 'size'> {
-  label?: string
-  prefix?: string
-  error?: string
-  size?: 'default' | 'small'
-}
-
-export const TextInput = forwardRef<ElementRef<typeof Input>, TextInputProps>(
-  ({ label, prefix, error, size, ...props }: TextInputProps, ref) => {
-    return (
-      <InputBox label={label} error={error}>
-        <TextInputContainer errored={!!error} size={size}>
-          {!!prefix && <Prefix>{prefix}</Prefix>}
-          <Input ref={ref} {...props} />
-        </TextInputContainer>
-      </InputBox>
-    )
-  },
-)
-
-TextInput.displayName = 'TextInput'

package/src/components/TextInput/styles.ts

@@ -1,69 +0,0 @@
-import { styled } from '../../styles'
-
-export const TextInputContainer = styled('div', {
-  backgroundColor: '$gray900',
-  borderRadius: '$sm',
-  boxSizing: 'border-box',
-  border: '2px solid $gray900',
-  display: 'flex',
-  alignItems: 'center',
-
-  '&:has(input:focus)': {
-    borderColor: '$primary',
-  },
-
-  '&:has(input:disabled)': {
-    opacity: 0.5,
-    cursor: 'not-alowed',
-  },
-
-  variants: {
-    size: {
-      small: {
-        padding: '$2 $3',
-      },
-      default: {
-        padding: '$3 $4',
-      },
-    },
-    errored: {
-      true: {
-        borderColor: '$danger',
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'default',
-    errored: false,
-  },
-})
-
-export const Prefix = styled('span', {
-  fontFamily: '$default',
-  fontSize: '$sm',
-  color: '$gray400',
-  fontWeight: 'regular',
-})
-
-export const Input = styled('input', {
-  fontFamily: '$default',
-  fontSize: '$sm',
-  color: '$smokedWhite',
-  fontWeight: 'regular',
-  background: 'transparent',
-  border: 0,
-  width: '100%',
-
-  '&:focus': {
-    outline: 0,
-  },
-
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-
-  '&::placeholder': {
-    color: '$gray400',
-  },
-})

package/src/index.tsx

@@ -1,10 +0,0 @@
-export * from './components/Box'
-export * from './components/Text'
-export * from './components/Heading'
-export * from './components/Avatar'
-export * from './components/Button'
-export * from './components/TextInput'
-export * from './components/TextArea'
-export * from './components/Checkbox'
-export * from './components/Dropdown'
-export * from './styles'

package/src/styles/index.ts

@@ -1,36 +0,0 @@
-import {
-  colors,
-  fontSizes,
-  fontWeights,
-  fonts,
-  lineHeights,
-  radii,
-  space,
-} from '@spies-ui/tokens'
-import { createStitches, defaultThemeMap } from '@stitches/react'
-
-export const {
-  styled,
-  css,
-  globalCss,
-  keyframes,
-  getCssText,
-  theme,
-  createTheme,
-  config,
-} = createStitches({
-  themeMap: {
-    ...defaultThemeMap,
-    height: 'space',
-    width: 'space',
-  },
-  theme: {
-    colors,
-    fontSizes,
-    fontWeights,
-    fonts,
-    lineHeights,
-    radii,
-    space,
-  },
-})

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "@spies-ui/ts-config/react.json",
-  "include": ["src"]
-}