mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 18:00:20 -04:00
Ivan Vasilov
56de26fe22
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com>
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
export interface InputWithAddonsProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
leading?: ReactNode
|
|
trailing?: ReactNode
|
|
containerClassName?: string
|
|
}
|
|
|
|
export const InputWithAddons = forwardRef<HTMLInputElement, InputWithAddonsProps>(
|
|
({ leading, trailing, containerClassName, className, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'group border-input ring-offset-background flex h-10 w-full rounded-sm border bg-transparent text-sm overflow-hidden',
|
|
'focus-within:ring-ring focus-within:outline-hidden focus-within:ring-2 focus-within:ring-offset-2',
|
|
containerClassName
|
|
)}
|
|
>
|
|
{leading ? (
|
|
<div className="border-input px-2 flex items-center justify-center">{leading}</div>
|
|
) : null}
|
|
<input
|
|
className={cn(
|
|
'bg-transparent w-full px-0 py-2 focus:outline-hidden border-0 placeholder:text-foreground-lighter ',
|
|
'disabled:cursor-not-allowed disabled:opacity-50 text-[0.75rem]',
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
{trailing ? (
|
|
<div className="border-input bg-muted/50 border-l px-3 py-2 flex items-center justify-center">
|
|
{trailing}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
InputWithAddons.displayName = 'InputWithAddons'
|