fix: add ref to TextInput and adjust styles

Author: robsonnatanael

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

@@ -31,6 +31,7 @@ export const Disabled: StoryObj<TextInputProps> = {
 
 export const WithPrefix: StoryObj<TextInputProps> = {
   args: {
-    prefix: 'cal.com/'
+    prefix: 'cal.com/',
+    placeholder: 'your-username'
   }
 };

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ign-ui/react
 
+## 2.0.1
+
+### Patch Changes
+
+- Add option to pass reference to TextInput and adjust some styles
+
 ## 2.0.0
 
 ### Major Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ign-ui/react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

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

@@ -4,8 +4,8 @@ import { styled } from '../../styles'
 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

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

packages/react/src/components/Button.tsx

@@ -28,6 +28,10 @@ export const Button = styled('button', {
     cursor: 'not-allowed',
   },
 
+  '&:focus': {
+    boxShadow: '0 0 0 2px $color$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,17 +1,19 @@
-import { ComponentProps } from 'react'
+import { ComponentProps, ElementRef, forwardRef } 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,22 @@ 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 +27,10 @@ export const TextInputContainer = styled('div', {
     opacity: 0.5,
     cursor: 'not-allowed',
   },
+
+  defaultVariants: {
+    size: 'md',
+  },
 })
 
 export const Prefix = styled('span', {
@@ -43,7 +57,7 @@ export const Input = styled('input', {
     cursor: 'not-allowed',
   },
 
-  '&:placeholder': {
+  '&::placeholder': {
     color: '$gray400',
   },
 })