update

dashboard_js/app/components/form.jsx

@@ -1,145 +0,0 @@
-import React, { forwardRef, useContext, useId } from 'react'
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
-import { omit } from 'ramda'
-import Loader from './loader'
-import clsx from 'clsx'
-
-const ControlContext = React.createContext({})
-
-function ControlProvider({ children, ...props }) {
-  return (
-    <ControlContext.Provider value={props}>{children}</ControlContext.Provider>
-  )
-}
-
-function useControl(props) {
-  const field = useContext(ControlContext)
-  return { ...field, ...props }
-}
-
-export const Control = forwardRef(function Control(
-  { as = 'div', children, ...props },
-  ref,
-) {
-  const id = useId()
-  const props_ = omit(['id'], props)
-
-  return (
-    <ControlProvider id={props?.id || id} {...props_}>
-      {React.createElement(as, { ref, ...props }, children)}
-    </ControlProvider>
-  )
-})
-
-export function Button({
-  children,
-  as = 'button',
-  className,
-  isLoading = false,
-  ...props
-}) {
-  if (isLoading) {
-    props['disabled'] = isLoading
-  }
-
-  return React.createElement(
-    as,
-    {
-      className: clsx(
-        'font-medium text-green-primary rounded-lg bg-green-secondary hover:bg-green-support',
-        'h-12 px-4 relative',
-        'disabled:bg-green-secondary/50 disabled:pointer-events-none',
-        'transition',
-        className,
-      ),
-      ...props,
-    },
-    <>
-      {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center bg-green-secondary rounded-xl">
-          <Loader className="w-5 text-white" />
-        </div>
-      )}
-
-      {children}
-    </>,
-  )
-}
-
-export function Label({ children, className, ...props }) {
-  const { id, htmlFor, className: _, ...field } = useControl(props)
-
-  return (
-    <label
-      className={clsx(
-        "black cursor-pointer aria-required:after:content-['*'] aria-required:after:ml-0.5 aria-required:after:text-red-500",
-        className,
-      )}
-      htmlFor={htmlFor ?? id}
-      {...field}
-    >
-      {children}
-    </label>
-  )
-}
-
-export const Input = forwardRef(function Input(
-  { as = 'input', size = 'base', className, children, ...props },
-  ref,
-) {
-  const { className: _, ...field } = useControl(props)
-  const sizes = { base: 'h-12' }
-
-  return React.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',
-        'dark:disabled:text-gray-500 dark:disabled:bg-gray-700',
-        sizes?.[size],
-        className,
-      ),
-      ref,
-      ...field,
-    },
-    children,
-  )
-})
-
-export const Checkbox = forwardRef(function Checkbox(
-  { className, ...props },
-  ref,
-) {
-  const { className: _, ...field } = useControl(props)
-
-  return (
-    <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',
-        className,
-      )}
-      ref={ref}
-      {...field}
-    />
-  )
-})
-
-export function Error({ children }) {
-  return (
-    <div className="text-sm text-red-500 flex items-start gap-0.5">
-      <ExclamationCircleIcon className="w-4 mt-[1.5px] flex-shrink-0" />
-      <div>{children}</div>
-    </div>
-  )
-}