add container

This commit is contained in:
2025-02-21 19:39:38 -03:00
parent a557ee6e34
commit e3f39a0313
3 changed files with 46 additions and 10 deletions

View File

@@ -1,4 +1,4 @@
import React, { forwardRef, useContext, useId } from 'react'
import React, { createElement, forwardRef, useContext, useId } from 'react'
import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
import { omit } from 'ramda'
import { Loader } from './loader'
@@ -42,7 +42,7 @@ export function Button({
props['disabled'] = isLoading
}
return React.createElement(
return createElement(
as,
{
className: clsx(
@@ -90,15 +90,13 @@ export const Input = forwardRef(function Input(
const { className: _, ...field } = useControl(props)
const sizes = { base: 'h-12' }
return React.createElement(
return createElement(
as,
{
className: clsx(
'bg-white outline-none px-4 rounded-lg transition',
'border border-green-light dark:border-gray-700 dark:bg-gray-800',
'focus:ring-1 focus:border-green-secondary focus:ring-green-secondary focus:placeholder:text-transparent',
// Tailwind's won't inherit focus behavior; you must define it explicitly for both modes.
'dark:focus:border-green-secondary',
'aria-[invalid=true]:border-red-400 aria-[invalid=true]:ring-red-400',
'dark:aria-[invalid=true]:border-red-500 dark:aria-[invalid=true]:ring-red-500',
'disabled:text-gray-400 disabled:border-gray-300 disabled:bg-gray-200',
@@ -123,10 +121,10 @@ export const Checkbox = forwardRef(function Checkbox(
<input
type="checkbox"
className={clsx(
'text-green-secondary border border-gray-300',
'focus:ring-2 focus:border-green-secondary focus:ring-green-secondary focus:ring-offset-0 focus:ring-opacity-30',
'dark:border-gray-700 dark:bg-gray-800 focus:dark:border-security dark:checked:bg-green-secondary dark:checked:border-security dark:disabled:bg-gray-700',
'disabled:bg-gray-200 outline-none rounded transition',
// 'text-green-secondary border border-gray-300',
// 'focus:ring-2 focus:border-green-secondary focus:ring-green-secondary focus:ring-offset-0 focus:ring-opacity-30',
// 'dark:border-gray-700 dark:bg-gray-800 focus:dark:border-security dark:checked:bg-green-secondary dark:checked:border-security dark:disabled:bg-gray-700',
// 'disabled:bg-gray-200 outline-none rounded transition',
className,
)}
ref={ref}