Merge branch 'main' into feat-select

Author: forestream

.changeset/free-bats-create.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Add Stepper component

.changeset/happy-mammals-travel.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Fix Input test snapshot

.changeset/silly-trams-beam.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Fix Input

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @devup-ui/components
 
+## 0.1.3
+
+### Patch Changes
+
+- 9d7b342: Add onClear prop in input component
+
 ## 0.1.2
 
 ### Patch Changes

packages/components/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "lint": "eslint",

packages/components/src/__tests__/index.browser.test.ts

@@ -4,6 +4,7 @@ describe('export', () => {
     expect({ ...index }).toEqual({
       Button: expect.any(Function),
       Input: expect.any(Function),
+      Stepper: expect.any(Function),
     })
   })
 })

packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap

@@ -155,6 +155,16 @@ describe('Input', () => {
     })
     expect(onChange).toHaveBeenCalledWith(expect.any(Object))
   })
+
+  it('should call onClear props when click clear button', () => {
+    const onClear = vi.fn()
+    const { container } = render(<Input onClear={onClear} />)
+    fireEvent.change(container.querySelector('input')!, {
+      target: { value: 'test' },
+    })
+    fireEvent.click(container.querySelector('[aria-label="clear-button"]')!)
+    expect(onClear).toHaveBeenCalled()
+  })
 })
 
 describe('Controlled Input', () => {

packages/components/src/components/Input/__tests__/index.browser.test.tsx

@@ -17,10 +17,12 @@ interface InputProps extends Omit<ComponentProps<'input'>, 'type'> {
   errorMessage?: string
   allowClear?: boolean
   classNames?: {
+    container?: string
     input?: string
     icon?: string
     errorMessage?: string
   }
+  onClear?: () => void
   colors?: {
     primary?: string
     error?: string
@@ -49,6 +51,7 @@ export function Input({
   className,
   classNames,
   ref,
+  onClear,
   ...props
 }: InputProps) {
   const [value, setValue] = useState(defaultValue || '')
@@ -58,11 +61,13 @@ export function Input({
   }
   const handleClear = () => {
     setValue('')
+    onClear?.()
   }
   const clearButtonVisible = value && !disabled && allowClear
 
   return (
     <Box
+      className={classNames?.container}
       display="inline-block"
       pos="relative"
       selectors={{ '&, & *': { boxSizing: 'border-box' } }}
@@ -102,7 +107,7 @@ export function Input({
           outline: 'none',
         }}
         _hover={{
-          border: '1px solid var(--primary, light-dark(red, blue))',
+          border: '1px solid var(--primary, light-dark(#674DC7, #8163E1))',
         }}
         _placeholder={{
           color: 'var(--inputPlaceholder, light-dark(#A9A8AB, #CBCBCB))',

packages/components/src/components/Input/index.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from 'react'
+
+export function IconMinus({ ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill="none"
+      height="28"
+      viewBox="0 0 28 28"
+      width="28"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M9 14C9 13.4477 9.3731 13 9.83333 13H18.1667C18.6269 13 19 13.4477 19 14C19 14.5523 18.6269 15 18.1667 15H9.83333C9.3731 15 9 14.5523 9 14Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}