@spies-ui/react 1.0.1 → 1.0.3

package/dist/index.js

@@ -97,9 +97,10 @@ var require_dist = __commonJS({
       smokedWhite: "#f5f5f5",
       richBlack: "#000014",
       gray100: "#e0e0e0",
-      gray200: "#a0a6ae",
-      gray400: "#7a828e",
-      gray500: "#4a5057",
+      gray200: "#CCCCCC",
+      gray300: "#ADADAD",
+      gray400: "#8F8F8F",
+      gray500: "#666F7A",
       gray600: "#40454c",
       gray700: "#2f3238",
       gray800: "#1f1f1f",
@@ -186,7 +187,15 @@ __export(src_exports, {
   Heading: () => Heading,
   Text: () => Text,
   TextArea: () => TextArea,
-  TextInput: () => TextInput
+  TextInput: () => TextInput,
+  config: () => config,
+  createTheme: () => createTheme,
+  css: () => css,
+  getCssText: () => getCssText,
+  globalCss: () => globalCss,
+  keyframes: () => keyframes,
+  styled: () => styled,
+  theme: () => theme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -220,7 +229,7 @@ var {
 
 // src/components/Box.tsx
 var Box = styled("div", {
-  padding: "$4",
+  padding: "$6",
   borderRadius: "$md",
   variants: {
     background: {
@@ -376,10 +385,10 @@ var Button = styled("button", {
         border: "2px solid $gray500",
         color: "$smokedWhite",
         "&:not(:disabled):hover": {
-          // backgroundColor: '$smokedWhite',
-          // borderColor: '$smokedWhite',
-          // color: '$gray900',
           borderColor: "$gray600"
+        },
+        "&:focus": {
+          borderColor: "$primary"
         }
       },
       primary: {
@@ -389,6 +398,9 @@ var Button = styled("button", {
         "&:not(:disabled):hover": {
           backgroundColor: "$primaryLight",
           borderColor: "$primaryLight"
+        },
+        "&:focus": {
+          borderColor: "$smokedWhite"
         }
       }
     },
@@ -425,15 +437,17 @@ var Button = styled("button", {
 });
 Button.displayName = "Button";
 
+// src/components/TextInput/index.tsx
+var import_react2 = require("react");
+
 // src/components/TextInput/styles.ts
 var TextInputContainer = styled("div", {
   backgroundColor: "$gray900",
-  padding: "$3 $4",
   borderRadius: "$sm",
   boxSizing: "border-box",
   border: "2px solid $gray900",
   display: "flex",
-  alignItems: "baseline",
+  alignItems: "center",
   "&:has(input:focus)": {
     borderColor: "$primary"
   },
@@ -442,6 +456,14 @@ var TextInputContainer = styled("div", {
     cursor: "not-alowed"
   },
   variants: {
+    size: {
+      small: {
+        padding: "$2 $3"
+      },
+      default: {
+        padding: "$3 $4"
+      }
+    },
     errored: {
       true: {
         borderColor: "$danger"
@@ -449,6 +471,7 @@ var TextInputContainer = styled("div", {
     }
   },
   defaultVariants: {
+    size: "default",
     errored: false
   }
 });
@@ -472,7 +495,7 @@ var Input = styled("input", {
   "&:disabled": {
     cursor: "not-allowed"
   },
-  "&:placeholder": {
+  "&::placeholder": {
     color: "$gray400"
   }
 });
@@ -497,15 +520,20 @@ InputBox.displayName = "InputBox";
 
 // src/components/TextInput/index.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function TextInput(_a) {
-  var _b = _a, { label, prefix, error } = _b, props = __objRest(_b, ["label", "prefix", "error"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputBox, { label, error, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TextInputContainer, { errored: !!error, children: [
-    !!prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Prefix, { children: prefix }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadValues({}, props))
-  ] }) });
-}
+var TextInput = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { label, prefix, error, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "size"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InputBox, { label, error, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(TextInputContainer, { errored: !!error, size, children: [
+      !!prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Prefix, { children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, __spreadValues({ ref }, props))
+    ] }) });
+  }
+);
 TextInput.displayName = "TextInput";
 
+// src/components/TextArea/index.tsx
+var import_react3 = require("react");
+
 // src/components/TextArea/styles.ts
 var TextAreaInput = styled("textarea", {
   backgroundColor: "$gray900",
@@ -527,7 +555,7 @@ var TextAreaInput = styled("textarea", {
     opacity: 0.5,
     cursor: "not-allowed"
   },
-  "&:placeholder": {
+  "&::placeholder": {
     color: "$gray400"
   },
   variants: {
@@ -544,10 +572,10 @@ var TextAreaInput = styled("textarea", {
 
 // src/components/TextArea/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-function TextArea(_a) {
+var TextArea = (0, import_react3.forwardRef)((_a, ref) => {
   var _b = _a, { label, error } = _b, props = __objRest(_b, ["label", "error"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputBox, { label, error, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextAreaInput, __spreadProps(__spreadValues({}, props), { errored: !!error })) });
-}
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputBox, { label, error, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
+});
 TextArea.displayName = "TextArea";
 
 // src/components/Checkbox/index.tsx
@@ -637,7 +665,7 @@ function Checkbox2(_a) {
 Checkbox2.displayName = "Checkbox";
 
 // src/components/Dropdown/index.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 
 // src/components/Dropdown/styles.ts
 var DropdownContainer = styled("div", {
@@ -707,9 +735,9 @@ var DropdownItem = styled("li", {
 // src/components/Dropdown/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Dropdown({ options, children, name }) {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const dropdownRef = (0, import_react2.useRef)(null);
-  const buttonRef = (0, import_react2.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
+  const dropdownRef = (0, import_react4.useRef)(null);
+  const buttonRef = (0, import_react4.useRef)(null);
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
@@ -722,13 +750,13 @@ function Dropdown({ options, children, name }) {
       setIsOpen(false);
     }
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleReposition = () => {
       if (isOpen && buttonRef.current && dropdownRef.current) {
         const buttonRect = buttonRef.current.getBoundingClientRect();
@@ -773,5 +801,13 @@ Dropdown.displayName = "Dropdown";
   Heading,
   Text,
   TextArea,
-  TextInput
+  TextInput,
+  config,
+  createTheme,
+  css,
+  getCssText,
+  globalCss,
+  keyframes,
+  styled,
+  theme
 });

package/dist/index.mjs

@@ -91,9 +91,10 @@ var require_dist = __commonJS({
       smokedWhite: "#f5f5f5",
       richBlack: "#000014",
       gray100: "#e0e0e0",
-      gray200: "#a0a6ae",
-      gray400: "#7a828e",
-      gray500: "#4a5057",
+      gray200: "#CCCCCC",
+      gray300: "#ADADAD",
+      gray400: "#8F8F8F",
+      gray500: "#666F7A",
       gray600: "#40454c",
       gray700: "#2f3238",
       gray800: "#1f1f1f",
@@ -199,7 +200,7 @@ var {
 
 // src/components/Box.tsx
 var Box = styled("div", {
-  padding: "$4",
+  padding: "$6",
   borderRadius: "$md",
   variants: {
     background: {
@@ -355,10 +356,10 @@ var Button = styled("button", {
         border: "2px solid $gray500",
         color: "$smokedWhite",
         "&:not(:disabled):hover": {
-          // backgroundColor: '$smokedWhite',
-          // borderColor: '$smokedWhite',
-          // color: '$gray900',
           borderColor: "$gray600"
+        },
+        "&:focus": {
+          borderColor: "$primary"
         }
       },
       primary: {
@@ -368,6 +369,9 @@ var Button = styled("button", {
         "&:not(:disabled):hover": {
           backgroundColor: "$primaryLight",
           borderColor: "$primaryLight"
+        },
+        "&:focus": {
+          borderColor: "$smokedWhite"
         }
       }
     },
@@ -404,15 +408,17 @@ var Button = styled("button", {
 });
 Button.displayName = "Button";
 
+// src/components/TextInput/index.tsx
+import { forwardRef } from "react";
+
 // src/components/TextInput/styles.ts
 var TextInputContainer = styled("div", {
   backgroundColor: "$gray900",
-  padding: "$3 $4",
   borderRadius: "$sm",
   boxSizing: "border-box",
   border: "2px solid $gray900",
   display: "flex",
-  alignItems: "baseline",
+  alignItems: "center",
   "&:has(input:focus)": {
     borderColor: "$primary"
   },
@@ -421,6 +427,14 @@ var TextInputContainer = styled("div", {
     cursor: "not-alowed"
   },
   variants: {
+    size: {
+      small: {
+        padding: "$2 $3"
+      },
+      default: {
+        padding: "$3 $4"
+      }
+    },
     errored: {
       true: {
         borderColor: "$danger"
@@ -428,6 +442,7 @@ var TextInputContainer = styled("div", {
     }
   },
   defaultVariants: {
+    size: "default",
     errored: false
   }
 });
@@ -451,7 +466,7 @@ var Input = styled("input", {
   "&:disabled": {
     cursor: "not-allowed"
   },
-  "&:placeholder": {
+  "&::placeholder": {
     color: "$gray400"
   }
 });
@@ -476,15 +491,20 @@ InputBox.displayName = "InputBox";
 
 // src/components/TextInput/index.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function TextInput(_a) {
-  var _b = _a, { label, prefix, error } = _b, props = __objRest(_b, ["label", "prefix", "error"]);
-  return /* @__PURE__ */ jsx3(InputBox, { label, error, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, children: [
-    !!prefix && /* @__PURE__ */ jsx3(Prefix, { children: prefix }),
-    /* @__PURE__ */ jsx3(Input, __spreadValues({}, props))
-  ] }) });
-}
+var TextInput = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { label, prefix, error, size } = _b, props = __objRest(_b, ["label", "prefix", "error", "size"]);
+    return /* @__PURE__ */ jsx3(InputBox, { label, error, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, size, children: [
+      !!prefix && /* @__PURE__ */ jsx3(Prefix, { children: prefix }),
+      /* @__PURE__ */ jsx3(Input, __spreadValues({ ref }, props))
+    ] }) });
+  }
+);
 TextInput.displayName = "TextInput";
 
+// src/components/TextArea/index.tsx
+import { forwardRef as forwardRef2 } from "react";
+
 // src/components/TextArea/styles.ts
 var TextAreaInput = styled("textarea", {
   backgroundColor: "$gray900",
@@ -506,7 +526,7 @@ var TextAreaInput = styled("textarea", {
     opacity: 0.5,
     cursor: "not-allowed"
   },
-  "&:placeholder": {
+  "&::placeholder": {
     color: "$gray400"
   },
   variants: {
@@ -523,10 +543,10 @@ var TextAreaInput = styled("textarea", {
 
 // src/components/TextArea/index.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-function TextArea(_a) {
+var TextArea = forwardRef2((_a, ref) => {
   var _b = _a, { label, error } = _b, props = __objRest(_b, ["label", "error"]);
-  return /* @__PURE__ */ jsx4(InputBox, { label, error, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({}, props), { errored: !!error })) });
-}
+  return /* @__PURE__ */ jsx4(InputBox, { label, error, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({ ref }, props), { errored: !!error })) });
+});
 TextArea.displayName = "TextArea";
 
 // src/components/Checkbox/index.tsx
@@ -751,5 +771,13 @@ export {
   Heading,
   Text,
   TextArea,
-  TextInput
+  TextInput,
+  config,
+  createTheme,
+  css,
+  getCssText,
+  globalCss,
+  keyframes,
+  styled,
+  theme
 };

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@spies-ui/react",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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.1 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
-CJS dist/index.js 20.79 KB
-CJS ⚡️ Build success in 23ms
-ESM dist/index.mjs 19.45 KB
-ESM ⚡️ Build success in 24ms
-DTS Build start
-DTS ⚡️ Build success in 1998ms
-DTS dist/index.d.mts 46.42 KB
-DTS dist/index.d.ts  46.42 KB

package/CHANGELOG.md

@@ -1,7 +0,0 @@
-# @spies-ui/react
-
-## 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: '$4',
-  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,97 +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': {
-          // backgroundColor: '$smokedWhite',
-          // borderColor: '$smokedWhite',
-          // color: '$gray900',
-          borderColor: '$gray600',
-        },
-      },
-      primary: {
-        backgroundColor: '$primary',
-        border: '2px solid $primary',
-        color: '$smokedWhite',
-
-        '&:not(:disabled):hover': {
-          backgroundColor: '$primaryLight',
-          borderColor: '$primaryLight',
-        },
-      },
-    },
-
-    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'