Refactor input contract

ui-parts/autocomplete/src/autocomplete.component.tsx

@@ -13,6 +13,8 @@ import { useState }               from 'react'
 import { Input }                  from '@atls-ui-parts/input'
 import { Row }                    from '@atls-ui-parts/layout'
 import { Box }                    from '@atls-ui-parts/layout'
+import { inputAppearances }       from '@atls-ui-parts/input'
+import { inputShapes }            from '@atls-ui-parts/input'
 import { useFloat }               from '@atls-utils/use-float'
 
 import { Arrow }                  from './arrow/index.js'
@@ -85,7 +87,12 @@ export const Autocomplete = ({
 
   return (
     <Row ref={refs.setReference} {...getReferenceProps()}>
-      <Input size='normal' variant='blue' onFocus={openMenu} {...getInputProps()} />
+      <Input
+        appearance={inputAppearances.blue}
+        shape={inputShapes.normal}
+        onFocus={openMenu}
+        {...getInputProps()}
+      />
       {suffix}
       <Box ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
         <AnimatePresence>

ui-parts/input/package.json

@@ -14,7 +14,6 @@
   },
   "dependencies": {
     "@atls-ui-parts/theme": "workspace:*",
-    "@vanilla-extract/recipes": "0.5.5",
     "clsx": "2.1.1",
     "rainbow-sprinkles": "1.0.0"
   },

ui-parts/input/src/index.ts

@@ -3,6 +3,10 @@ export * from './attachment/index.js'
 export * from './divided-fields/index.js'
 export * from './hidden-input/index.js'
 export * from './input.component.js'
+export type { InputAppearance } from './styles/index.js'
+export type { InputShape } from './styles/index.js'
+export { inputAppearances } from './styles/index.js'
+export { inputShapes } from './styles/index.js'
 export * from './input/index.js'
 export * from './raw-input/index.js'
 export * from './textarea/index.js'

ui-parts/input/src/input.component.tsx

@@ -1,16 +1,21 @@
 'use client'
 
-import type { ReactNode }  from 'react'
+import type { ReactNode }   from 'react'
 
-import type { InputProps } from './input.interfaces.js'
+import type { InputProps }  from './input.interfaces.js'
 
-import { inputStyles }     from './styles/index.js'
+import { clsx }             from 'clsx'
+
+import { baseStyles }       from './styles/index.js'
+import { inputAppearances } from './styles/index.js'
+import { inputShapes }      from './styles/index.js'
 
 export const Input = ({
-  size,
+  appearance = inputAppearances.blue,
+  className,
+  shape = inputShapes.normal,
   value,
   type = 'text',
-  variant = 'blue',
   disabled,
   onChange,
   ref,
@@ -21,11 +26,13 @@ export const Input = ({
     value={value}
     type={type}
     disabled={disabled}
-    className={inputStyles({
-      size,
-      variant,
-      disabled: disabled ? `${variant}Disabled` : undefined,
-    })}
+    className={clsx(
+      baseStyles,
+      appearance.default,
+      disabled && appearance.disabled,
+      shape,
+      className
+    )}
     onChange={onChange}
     {...props}
   />

ui-parts/input/src/input.interfaces.ts

@@ -1,18 +1,15 @@
-import type { RecipeVariants }      from '@vanilla-extract/recipes'
 import type { InputHTMLAttributes } from 'react'
 import type { Ref }                 from 'react'
 import type { JSX }                 from 'react'
 
-import type { inputStyles }         from './styles/index.js'
+import type { InputAppearance }     from './styles/index.js'
+import type { InputShape }          from './styles/index.js'
 
 type InputHTMLAttributesWithoutSize = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>
 
-export type InputVariants = Pick<
-  NonNullable<RecipeVariants<typeof inputStyles>>,
-  'size' | 'variant'
->
-
-export interface InputProps extends InputHTMLAttributesWithoutSize, InputVariants {
+export interface InputProps extends InputHTMLAttributesWithoutSize {
+  appearance?: InputAppearance
   icon?: JSX.Element
   ref?: Ref<HTMLInputElement>
+  shape?: InputShape
 }

ui-parts/input/src/styles/appearance.css.ts

@@ -1,3 +1,5 @@
+import type { InputAppearance }   from './interfaces.js'
+
 import { vars }                   from '@atls-ui-parts/theme'
 
 import { createAppearanceStyles } from '../utils/index.js'
@@ -8,24 +10,6 @@ const appearanceBlueDefaultStyles = createAppearanceStyles({
   borderColor: vars.colors['input.blue.default.border'],
 })
 
-const appearanceBlueHoverStyles = createAppearanceStyles({
-  fontColor: vars.colors['input.blue.hover.font'],
-  backgroundColor: vars.colors['input.blue.hover.background'],
-  borderColor: vars.colors['input.blue.hover.border'],
-})
-
-const appearanceBlueFocusStyles = createAppearanceStyles({
-  fontColor: vars.colors['input.blue.focus.font'],
-  backgroundColor: vars.colors['input.blue.focus.background'],
-  borderColor: vars.colors['input.blue.focus.border'],
-})
-
-const appearanceBlueActiveStyles = createAppearanceStyles({
-  fontColor: vars.colors['input.blue.active.font'],
-  backgroundColor: vars.colors['input.blue.active.background'],
-  borderColor: vars.colors['input.blue.active.border'],
-})
-
 const appearanceBlueDisabledStyles = createAppearanceStyles({
   fontColor: vars.colors['input.blue.disabled.font'],
   backgroundColor: vars.colors['input.blue.disabled.background'],
@@ -38,24 +22,6 @@ const appearanceWhiteDefaultStyles = createAppearanceStyles({
   borderColor: vars.colors['input.white.default.border'],
 })
 
-const appearanceWhiteHoverStyles = createAppearanceStyles({
-  fontColor: vars.colors['input.white.hover.font'],
-  backgroundColor: vars.colors['input.white.hover.background'],
-  borderColor: vars.colors['input.white.hover.border'],
-})
-
-const appearanceWhiteFocusStyles = createAppearanceStyles({
-  fontColor: vars.colors['input.white.focus.font'],
-  backgroundColor: vars.colors['input.white.focus.background'],
-  borderColor: vars.colors['input.white.focus.border'],
-})
-
-const appearanceWhiteActiveStyles = createAppearanceStyles({
-  fontColor: vars.colors['input.white.active.font'],
-  backgroundColor: vars.colors['input.white.active.background'],
-  borderColor: vars.colors['input.white.active.border'],
-})
-
 const appearanceWhiteDisabledStyles = createAppearanceStyles({
   fontColor: vars.colors['input.white.disabled.font'],
   backgroundColor: vars.colors['input.white.disabled.background'],
@@ -67,22 +33,18 @@ export const appearanceVariant = {
   white: appearanceWhiteDefaultStyles,
 }
 
-export const appearanceHover = {
-  blueHover: appearanceBlueHoverStyles,
-  whiteHover: appearanceWhiteHoverStyles,
-}
-
-export const appearanceFocus = {
-  blueFocus: appearanceBlueFocusStyles,
-  whiteFocus: appearanceWhiteFocusStyles,
-}
-
-export const appearanceActive = {
-  blueActive: appearanceBlueActiveStyles,
-  whiteActive: appearanceWhiteActiveStyles,
-}
-
 export const appearanceDisabled = {
   blueDisabled: appearanceBlueDisabledStyles,
   whiteDisabled: appearanceWhiteDisabledStyles,
 }
+
+export const inputAppearances: Record<'blue' | 'white', InputAppearance> = {
+  blue: {
+    default: appearanceVariant.blue,
+    disabled: appearanceDisabled.blueDisabled,
+  },
+  white: {
+    default: appearanceVariant.white,
+    disabled: appearanceDisabled.whiteDisabled,
+  },
+}

ui-parts/input/src/styles/index.ts

@@ -1 +1,4 @@
-export * from './styles.css.js'
+export * from './appearance.css.js'
+export * from './base.css.js'
+export type * from './interfaces.js'
+export * from './shape.css.js'

ui-parts/input/src/styles/interfaces.ts

@@ -0,0 +1,6 @@
+export interface InputAppearance {
+  default: string
+  disabled: string
+}
+
+export type InputShape = string

ui-parts/input/src/styles/shape.css.ts

@@ -1,3 +1,5 @@
+import type { InputShape }   from './interfaces.js'
+
 import { vars }              from '@atls-ui-parts/theme'
 
 import { createShapeStyles } from '../utils/index.js'
@@ -24,3 +26,5 @@ export const shapeStyles = {
   normal: normalSizeStyles,
   big: bigSizeStyles,
 }
+
+export const inputShapes: Record<'big' | 'normal', InputShape> = shapeStyles

ui-parts/input/stories/input.stories.tsx

@@ -1,26 +1,30 @@
-import type { Meta }     from '@storybook/react'
-import type { StoryObj } from '@storybook/react'
+import type { Meta }        from '@storybook/react'
+import type { StoryObj }    from '@storybook/react'
 
-import { Input }         from '../src/input.component.js'
+import { Input }            from '../src/input.component.js'
+import { inputAppearances } from '../src/index.js'
+import { inputShapes }      from '../src/index.js'
 
 const meta: Meta<typeof Input> = {
   title: 'Components/Input',
   component: Input,
   tags: ['autodocs'],
   argTypes: {
-    variant: {
+    appearance: {
       description: 'Вариант инпута',
       control: { type: 'inline-radio' },
-      options: ['blue'],
+      options: Object.keys(inputAppearances),
+      mapping: inputAppearances,
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'blue' },
       },
     },
-    size: {
+    shape: {
       description: 'Размер инпута',
       control: { type: 'inline-radio' },
-      options: ['normal', 'big'],
+      options: Object.keys(inputShapes),
+      mapping: inputShapes,
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'normal' },
@@ -35,7 +39,7 @@ type Story = StoryObj<typeof Input>
 
 export const Variants: Story = {
   args: {
-    variant: 'white',
-    size: 'normal',
+    appearance: inputAppearances.white,
+    shape: inputShapes.normal,
   },
 }

yarn.lock

@@ -649,7 +649,6 @@ __metadata:
     "@types/react": "npm:19.1.2"
     "@vanilla-extract/css": "npm:1.17.1"
     "@vanilla-extract/dynamic": "npm:2.1.2"
-    "@vanilla-extract/recipes": "npm:0.5.5"
     clsx: "npm:2.1.1"
     rainbow-sprinkles: "npm:1.0.0"
     react: "npm:19.1.0"