@etus/ui 0.1.0

package/src/components/forms/SearchInput/SearchInput.types.ts

@@ -0,0 +1,40 @@
+import type { InputSize, InputVariant } from "../TextInput/TextInput.types"
+import type { ComponentProps, ReactNode } from "react"
+
+/**
+ * SearchInput component props
+ */
+export interface SearchInputProps extends Omit<ComponentProps<"input">, "size" | "type"> {
+  /**
+   * Custom clear icon
+   */
+  clearIcon?: ReactNode
+
+  /**
+   * Callback when clear button is clicked
+   */
+  onClear?: () => void
+
+  /**
+   * Custom search icon
+   */
+  searchIcon?: ReactNode
+
+  /**
+   * Show clear button when input has value
+   * @default true
+   */
+  showClearButton?: boolean
+
+  /**
+   * Visual size of the input
+   * @default "md"
+   */
+  size?: InputSize
+
+  /**
+   * Visual variant
+   * @default "default"
+   */
+  variant?: InputVariant
+}

package/src/components/forms/SearchInput/SearchInput.variants.ts

@@ -0,0 +1,51 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * Search icon visual variants
+ */
+export const searchIconVariants = cva(
+  "flex items-center justify-center text-muted-foreground/80",
+  {
+    variants: {
+      size: {
+        xs: "[&_svg]:size-3",
+        sm: "[&_svg]:size-3.5",
+        md: "[&_svg]:size-4",
+        lg: "[&_svg]:size-4.5",
+        xl: "[&_svg]:size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+/**
+ * Clear button visual variants
+ */
+export const searchClearButtonVariants = cva(
+  [
+    "flex items-center justify-center",
+    "text-muted-foreground hover:text-foreground",
+    "transition-colors rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  ],
+  {
+    variants: {
+      size: {
+        xs: "size-4 [&_svg]:size-3",
+        sm: "size-5 [&_svg]:size-3.5",
+        md: "size-6 [&_svg]:size-4",
+        lg: "size-7 [&_svg]:size-4.5",
+        xl: "size-8 [&_svg]:size-5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+
+export type SearchIconVariantProps = VariantProps<typeof searchIconVariants>
+export type SearchClearButtonVariantProps = VariantProps<typeof searchClearButtonVariants>

package/src/components/forms/SearchInput/index.ts

@@ -0,0 +1,8 @@
+export * from './SearchInput'
+export {
+  type SearchClearButtonVariantProps,
+  searchClearButtonVariants,
+  type SearchIconVariantProps,
+  searchIconVariants,
+} from './SearchInput.variants'
+export type { SearchInputProps } from './SearchInput.types'