fix: Add ref to TextInput component, fixed components styles, fixed s…

…tyles folder location

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",

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',
 	},
 }
 

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

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",

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',
 })
 

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',

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',
+				},
 			},
 		},
 

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`,
 		},
 	},
 })

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',

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', {})

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',

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'

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',
 	},
 })

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',

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'