feat: add search-field component

.changeset/good-paws-leave.md

@@ -0,0 +1,6 @@
+---
+"@pixelshades/styles": minor
+"@pixelshades/ui": minor
+---
+
+add search-field component

apps/docs/content/components/search-field.mdx

@@ -0,0 +1,10 @@
+---
+title: SearchField
+description: Displays a SearchField
+
+docLink: https://react-spectrum.adobe.com/react-aria/SearchField.html
+
+slug: search-field
+---
+
+<ComponentPreview name="search-field/preview" />

apps/docs/src/examples/index.ts

@@ -1822,6 +1822,15 @@ export function Example() {
 
 	return <RangeCalendar isDateUnavailable={(date) => isWeekend(date, locale)} />
 }
+`,
+  },
+  "search-field/preview": {
+	  component: lazy(() => import("~/examples/search-field/preview.tsx")),
+	  code: `import { SearchField } from "../../../../../packages/ui/src/components/ui/search-field"
+
+export function Example() {
+	return <SearchField label="Projects" description="Search for a project" helperText="Helper Text" />
+}
 `,
   },
   "select/preview": {

apps/docs/src/examples/search-field/preview.tsx

@@ -0,0 +1,5 @@
+import { SearchField } from "../../../../../packages/ui/src/components/ui/search-field"
+
+export default function Example() {
+	return <SearchField label="Projects" description="Search for a project" helperText="Helper Text" />
+}

packages/styles/src/components/search-field/index.ts

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2024 Deutsche Telekom AG
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export * from "./variants"

packages/styles/src/components/search-field/variants.ts

@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: 2024 Deutsche Telekom AG
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { tv } from "tailwind-variants"
+import { fieldBorderStyles } from "../form"
+
+export const searchFieldVariants = tv({
+	slots: {
+		input: 'pl-[3.25rem] [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-cancel-button]:size-5 [&::-webkit-search-cancel-button]:bg-[url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzAwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMTIgMTJtLTkgMGE5IDkgMCAxIDAgMTggMGE5IDkgMCAxIDAgLTE4IDAiIC8+CiAgPHBhdGggZD0iTTEwIDEwbDQgNG0wIC00bC00IDQiIC8+Cjwvc3ZnPg==")] [&::-webkit-search-cancel-button]:bg-contain',
+		icon: "absolute top-1/2 left-4 size-5 -translate-y-1/2 z-[60]",
+	},
+	variants: {
+		...fieldBorderStyles.variants,
+	},
+})

packages/ui/src/components/ui/search-field/index.ts

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2024 Deutsche Telekom AG
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export * from "./search-field"

packages/ui/src/components/ui/search-field/search-field.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+// SPDX-FileCopyrightText: 2024 Deutsche Telekom AG
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef } from "@pixelshades/utils/jsx"
+import type { ReactNode } from "react"
+import type { SearchFieldProps as AriaSearchFieldProps } from "react-aria-components"
+import { SearchField as AriaSearchField } from "react-aria-components"
+import { If } from "../../utils"
+import { FormDescription, FormFieldError } from "../form"
+import { Input } from "../input"
+import { searchFieldVariants } from "@pixelshades/styles/components/search-field"
+import { type FormComponentLabelProps, Label } from "../label"
+import { IconSearch } from "../../../icons"
+
+const { input, icon } = searchFieldVariants()
+
+export interface SearchFieldProps extends AriaSearchFieldProps, FormComponentLabelProps {
+	/** A helper text to be displayed below the search field. */
+	helperText?: ReactNode
+	/** The error message to be displayed when the search field is in an error state. */
+	errorMessage?: string
+	/** The placeholder text to be displayed in the search field. */
+	placeholder?: string
+}
+
+const SearchField = forwardRef(
+	({
+		label,
+		helperText,
+		description,
+		tooltip,
+		errorMessage,
+		placeholder,
+		ref,
+		isRequired,
+		...props
+	}: SearchFieldProps & { ref?: any }) => (
+		<AriaSearchField className={"flex flex-col gap-sm"} isRequired={isRequired} {...props}>
+			<If condition={label || description || tooltip}>
+				<Label tooltip={tooltip} description={description} isRequired={isRequired}>
+					{label}
+				</Label>
+			</If>
+			<div className="relative">
+				<IconSearch className={icon()} />
+				<Input placeholder={placeholder} ref={ref} className={input()} />
+			</div>
+
+			{helperText && <FormDescription>{helperText}</FormDescription>}
+			<FormFieldError>{errorMessage}</FormFieldError>
+		</AriaSearchField>
+	),
+)
+
+export { SearchField }