From 5a9d8cf22c32f88c4e8b0f08b0ab5251743a7d29 Mon Sep 17 00:00:00 2001
From: Ricardo Augusto Kowalski <ricardoakowalski@gmail.com>
Date: Tue, 12 Mar 2024 14:32:18 -0300
Subject: [PATCH] fix: Add ref to TextInput component, fixed components styles,
 fixed styles folder location

---
 package.json                                  |  2 +-
 .../docs/src/stories/text-input.stories.tsx   |  1 +
 packages/react/CHANGELOG.md                   |  8 +++++++
 packages/react/package.json                   |  2 +-
 .../react/src/components/avatar/styles.ts     |  6 +++---
 packages/react/src/components/box.tsx         |  2 +-
 packages/react/src/components/button.tsx      |  9 +++++++-
 .../react/src/components/checkbox/styles.ts   |  4 ++--
 packages/react/src/components/heading.tsx     |  2 +-
 .../react/src/components/multi-step/styles.ts |  2 +-
 packages/react/src/components/text-area.tsx   |  2 +-
 .../react/src/components/text-input/index.tsx | 21 +++++++++++--------
 .../react/src/components/text-input/styles.ts | 21 ++++++++++++++++---
 packages/react/src/components/text.tsx        |  2 +-
 packages/react/src/index.tsx                  |  2 ++
 packages/react/{ => src}/styles/index.ts      |  0
 16 files changed, 61 insertions(+), 25 deletions(-)
 rename packages/react/{ => src}/styles/index.ts (100%)

diff --git a/package.json b/package.json
index 47e8302..51c7e80 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
 		"build": "turbo run build",
 		"changeset": "changeset",
 		"version-packages": "changeset version",
-		"release": "turbo run build --filter=@rcrdk-ignite-ui/docs && changeset publish"
+		"release": "turbo run build --filter=!docs && changeset publish"
 	},
 	"devDependencies": {
 		"@changesets/cli": "^2.27.1",
diff --git a/packages/docs/src/stories/text-input.stories.tsx b/packages/docs/src/stories/text-input.stories.tsx
index 466c3f0..04d85fd 100644
--- a/packages/docs/src/stories/text-input.stories.tsx
+++ b/packages/docs/src/stories/text-input.stories.tsx
@@ -29,6 +29,7 @@ export const Primary: StoryObj<TextInputProps> = {
 export const WithPrefix: StoryObj<TextInputProps> = {
 	args: {
 		prefix: 'cal.com/',
+		placeholder: 'your-username',
 	},
 }
 
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 3e494a6..f88fddf 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @rcrdk-ignite-ui/react
 
+## 2.0.1
+
+### Patch Changes
+
+- - Fixed components styles.
+  - Add ref to TextInput component.
+  - Fixed styles folder location.
+
 ## 2.0.0
 
 ### Major Changes
diff --git a/packages/react/package.json b/packages/react/package.json
index 4ddc567..2000607 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rcrdk-ignite-ui/react",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"description": "",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
diff --git a/packages/react/src/components/avatar/styles.ts b/packages/react/src/components/avatar/styles.ts
index a8361a1..e158d59 100644
--- a/packages/react/src/components/avatar/styles.ts
+++ b/packages/react/src/components/avatar/styles.ts
@@ -1,12 +1,12 @@
 import * as Avatar from '@radix-ui/react-avatar'
 
-import { styled } from '../../../styles'
+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',
 })
 
diff --git a/packages/react/src/components/box.tsx b/packages/react/src/components/box.tsx
index e4548ad..1c473d2 100644
--- a/packages/react/src/components/box.tsx
+++ b/packages/react/src/components/box.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, ElementType } from 'react'
 
-import { styled } from '../../styles'
+import { styled } from '../styles'
 
 export const Box = styled('div', {
 	padding: '$6',
diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx
index a56e7cb..4b98e2c 100644
--- a/packages/react/src/components/button.tsx
+++ b/packages/react/src/components/button.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, ElementType } from 'react'
 
-import { styled } from '../../styles'
+import { styled } from '../styles'
 
 export const Button = styled('button', {
 	all: 'unset',
@@ -25,6 +25,10 @@ export const Button = styled('button', {
 		cursor: 'not-allowed',
 	},
 
+	'&:focus-visible': {
+		boxShadow: '0 0 0 2px $colors$gray8300, 0 0 0 4px $colors$ignite500',
+	},
+
 	svg: {
 		width: '$4',
 		height: '$4',
@@ -62,6 +66,9 @@ export const Button = styled('button', {
 				'&:disabled': {
 					color: '$gray600',
 				},
+				'&:focus-visible': {
+					boxShadow: '0 0 0 2px $colors$ignite500',
+				},
 			},
 		},
 
diff --git a/packages/react/src/components/checkbox/styles.ts b/packages/react/src/components/checkbox/styles.ts
index b79ada3..29f4864 100644
--- a/packages/react/src/components/checkbox/styles.ts
+++ b/packages/react/src/components/checkbox/styles.ts
@@ -1,6 +1,6 @@
 import * as Checkbox from '@radix-ui/react-checkbox'
 
-import { keyframes, styled } from '../../../styles'
+import { keyframes, styled } from '../../styles'
 
 export const CheckboxContainer = styled(Checkbox.Root, {
 	all: 'unset',
@@ -26,7 +26,7 @@ export const CheckboxContainer = styled(Checkbox.Root, {
 		borderColor: '$ignite500',
 
 		'&:focus-visible': {
-			boxShadow: `0 0 0 1px var(--colors-gray800) inset`,
+			boxShadow: `0 0 0 1px $colors$gray900 inset`,
 		},
 	},
 })
diff --git a/packages/react/src/components/heading.tsx b/packages/react/src/components/heading.tsx
index d96fd03..26cb8a3 100644
--- a/packages/react/src/components/heading.tsx
+++ b/packages/react/src/components/heading.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, ElementType } from 'react'
 
-import { styled } from '../../styles'
+import { styled } from '../styles'
 
 export const Heading = styled('h2', {
 	fontFamily: '$default',
diff --git a/packages/react/src/components/multi-step/styles.ts b/packages/react/src/components/multi-step/styles.ts
index 63c6bde..d881088 100644
--- a/packages/react/src/components/multi-step/styles.ts
+++ b/packages/react/src/components/multi-step/styles.ts
@@ -1,4 +1,4 @@
-import { styled } from '../../../styles'
+import { styled } from '../../styles'
 import { Text } from '../text'
 
 export const MultiStepContainer = styled('div', {})
diff --git a/packages/react/src/components/text-area.tsx b/packages/react/src/components/text-area.tsx
index 2f33634..f60da1b 100644
--- a/packages/react/src/components/text-area.tsx
+++ b/packages/react/src/components/text-area.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, ElementType } from 'react'
 
-import { styled } from '../../styles'
+import { styled } from '../styles'
 
 export const TextArea = styled('textarea', {
 	background: '$gray900',
diff --git a/packages/react/src/components/text-input/index.tsx b/packages/react/src/components/text-input/index.tsx
index 3d949c2..e2b65dd 100644
--- a/packages/react/src/components/text-input/index.tsx
+++ b/packages/react/src/components/text-input/index.tsx
@@ -1,18 +1,21 @@
-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
+	containerProps?: ComponentProps<typeof TextInputContainer>
 }
 
-export function TextInput({ prefix, ...props }: TextInputProps) {
-	return (
-		<TextInputContainer>
-			{!!prefix && <Prefix>{prefix}</Prefix>}
-			<Input {...props} />
-		</TextInputContainer>
-	)
-}
+export const TextInput = forwardRef<ElementRef<typeof Input>, TextInputProps>(
+	({ prefix, containerProps, ...props }: TextInputProps, ref) => {
+		return (
+			<TextInputContainer {...containerProps}>
+				{!!prefix && <Prefix>{prefix}</Prefix>}
+				<Input ref={ref} {...props} />
+			</TextInputContainer>
+		)
+	},
+)
 
 TextInput.displayName = 'TextInput'
diff --git a/packages/react/src/components/text-input/styles.ts b/packages/react/src/components/text-input/styles.ts
index 88a188b..2bd4854 100644
--- a/packages/react/src/components/text-input/styles.ts
+++ b/packages/react/src/components/text-input/styles.ts
@@ -1,15 +1,29 @@
-import { styled } from '../../../styles'
+import { styled } from '../../styles'
 
 export const TextInputContainer = styled('div', {
 	background: '$gray900',
-	padding: '$3 $4',
 	borderRadius: '$sm',
 	boxSizing: 'border-box',
 	border: '2px solid $gray900',
 	display: 'flex',
-	alignItems: 'baseline',
+	alignItems: 'center',
 	cursor: 'text',
 
+	variants: {
+		size: {
+			small: {
+				padding: '$2 $3',
+			},
+			medium: {
+				padding: '$3 $4',
+			},
+		},
+	},
+
+	defaultVariants: {
+		size: 'medium',
+	},
+
 	'&:has(input:focus)': {
 		borderColor: '$ignite300',
 	},
@@ -43,5 +57,6 @@ export const Input = styled('input', {
 
 	'&::placeholder': {
 		color: '$gray400',
+		fontStyle: 'italic',
 	},
 })
diff --git a/packages/react/src/components/text.tsx b/packages/react/src/components/text.tsx
index afe9d02..61c5c15 100644
--- a/packages/react/src/components/text.tsx
+++ b/packages/react/src/components/text.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, ElementType } from 'react'
 
-import { styled } from '../../styles'
+import { styled } from '../styles'
 
 export const Text = styled('p', {
 	fontFamily: '$default',
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
index fbc6bb9..228ab8c 100644
--- a/packages/react/src/index.tsx
+++ b/packages/react/src/index.tsx
@@ -7,3 +7,5 @@ export * from './components/text-input'
 export * from './components/text-area'
 export * from './components/checkbox'
 export * from './components/multi-step'
+
+export * from './styles'
diff --git a/packages/react/styles/index.ts b/packages/react/src/styles/index.ts
similarity index 100%
rename from packages/react/styles/index.ts
rename to packages/react/src/styles/index.ts