fix add ref to textinput and styles

package.json

@@ -8,7 +8,7 @@
     "build": "turbo run build",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "release": "turbo run build --filter=packages/docs && changeset publish"
+    "release": "turbo run build --filter=!docs && changeset publish"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.2",

packages/docs/src/stories/TextInput.stories.tsx

@@ -26,7 +26,8 @@ export const Primary: StoryObj<TextInputProps> = {
 
 export const WithPrefix: StoryObj<TextInputProps> = {
   args: {
-    prefix: 'call.com/'
+    prefix: 'call.com/',
+    placeholder: 'your-username'
   }
 };
 

packages/react/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @far-ui/react
+
+## 1.0.1
+
+### Patch Changes
+
+- add option to pass reference to textInput and styles fixes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@far-ui/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

packages/react/src/components/Avatar/styles.ts

@@ -4,8 +4,8 @@ import * as Avatar from '@radix-ui/react-avatar'
 export const AvatarContainer = styled(Avatar.Root, {
   borderRadius: '$full',
   display: 'inline-block',
-  width: '$12',
-  height: '$12',
+  width: '$16',
+  height: '$16',
   overflow: 'hidden',
 })
 

packages/react/src/components/Box.tsx

@@ -4,7 +4,7 @@ import { styled } from "../styles";
 import { ComponentProps } from "react";
 
 export const Box = styled("div", {
-  padding: "$4",
+  padding: "$6",
   borderRadius: "$md",
   backgroundColor: "$gray800",
   border: "1px solid $gray600",

packages/react/src/components/Button.tsx

@@ -31,6 +31,10 @@ export const ButtonType = styled("div", {
     cursor: 'not-allowed'
   },
 
+  '&:focus': {
+    boxShadow: '0 0 0 2px $colors$gray100'
+  },
+
   variants: {
     variant: {
       primary: {

packages/react/src/components/Checkbox/styles.ts

@@ -20,7 +20,7 @@ export const CheckboxContainer = styled(Checkbox.Root, {
     backgroundColor: '$ignite300',
   },
 
-  '&:focus': {
+  '&:focus, &[data-state="checked"]': {
     border: '2px solid $ignite300',
   },
 })

packages/react/src/components/TextInput/index.tsx

@@ -1,18 +1,20 @@
 /* eslint-disable @typescript-eslint/no-empty-interface */
-import { ComponentProps } from 'react'
+import { ComponentProps, forwardRef, ElementRef } from 'react'
 import { Input, Prefix, TextInputContainer } from './styles'
 
 export interface TextInputProps extends ComponentProps<typeof Input> {
   prefix?: string
 }
 
-export function TextInput({ prefix, ...props }: TextInputProps) {
-  return (
-    <TextInputContainer>
-      {!!prefix && <Prefix>{prefix}</Prefix>}
-      <Input {...props} />
-    </TextInputContainer>
-  )
-}
+export const TextInput = forwardRef<ElementRef<typeof Input>, TextInputProps>(
+  ({ prefix, ...props }: TextInputProps, ref) => {
+    return (
+      <TextInputContainer>
+        {!!prefix && <Prefix>{prefix}</Prefix>}
+        <Input ref={ref} {...props} />
+      </TextInputContainer>
+    )
+  },
+)
 
 TextInput.displayName = 'TextInput'

packages/react/src/components/TextInput/styles.ts

@@ -2,12 +2,23 @@ import { styled } from '../../styles'
 
 export const TextInputContainer = styled('div', {
   backgroundColor: '$gray900',
-  padding: '$3 $4',
+
   borderRadius: '$sm',
   boxSizing: 'border-box',
   border: '2px solid $gray900',
   display: 'flex',
-  alignItems: 'baseline',
+  alignItems: 'center',
+
+  variants: {
+    size: {
+      sm: {
+        padding: '$2 $3',
+      },
+      md: {
+        padding: '$3 $4',
+      },
+    },
+  },
 
   '&:has(input:focus)': {
     borderColor: '$ignite300',
@@ -17,6 +28,10 @@ export const TextInputContainer = styled('div', {
     opacity: 0.5,
     cursor: 'not-allowed',
   },
+
+  defaultVariants: {
+    size: 'md',
+  },
 })
 
 export const Prefix = styled('span', {
@@ -43,7 +58,7 @@ export const Input = styled('input', {
     cursor: 'not-allowed',
   },
 
-  '&:placeholder': {
+  '&::placeholder': {
     color: '$gray400',
   },
 })

packages/react/src/index.tsx

@@ -9,4 +9,4 @@ export * from "./components/TextArea";
 export * from "./components/Checkbox";
 export * from "./components/MultiStep";
 
-
+export * from './styles'