feat: add disabled states for other input components

Author: lars-berger

src/components/checkbox-input.tsx

@@ -16,7 +16,9 @@ export const CheckboxField = makeFieldComponent({
 });
 
 export interface CheckboxInputOptions
-  extends FormInputProps<HTMLInputElement, boolean> {}
+  extends FormInputProps<HTMLInputElement, boolean> {
+  disabled?: boolean;
+}
 
 export type CheckboxInputProps = WithOverride<
   ComponentProps<'div'>,
@@ -30,6 +32,7 @@ export function CheckboxInput(props: CheckboxInputProps) {
     <_Checkbox
       checked={props.value}
       onChange={value => props.onChange?.(value)}
+      disabled={props.disabled}
       {...rest}
     >
       <_Checkbox.Input

src/components/forms.tsx

@@ -115,7 +115,7 @@ export function FormLabel(props: FormLabelProps) {
   return (
     <label
       {...others}
-      data-disabled={props.disabled}
+      data-disabled={props.disabled || null}
       class={cn(labelVariants(), others.class)}
       for={props.for}
     >
@@ -135,7 +135,7 @@ export function FormError(props: FormErrorProps) {
   return (
     <small
       {...others}
-      data-disabled={props.disabled}
+      data-disabled={props.disabled || null}
       class={cn(labelVariants({ error: true }), others.class)}
     >
       {props.children}
@@ -154,7 +154,7 @@ export function FormDescription(props: FormDescriptionProps) {
   return (
     <small
       {...others}
-      data-disabled={props.disabled}
+      data-disabled={props.disabled || null}
       class={cn(
         labelVariants({ description: true, label: false }),
         'mt-1',

src/components/number-input.tsx

@@ -23,6 +23,7 @@ export const NumberField = makeFieldComponent({
 interface NumberInputOptions
   extends FormInputProps<HTMLInputElement, number> {
   placeholder?: string;
+  disabled?: boolean;
 }
 
 export type NumberInputProps = WithOverride<
@@ -42,6 +43,7 @@ export function NumberInput(props: NumberInputProps) {
   return (
     <_NumberField
       rawValue={local.value}
+      disabled={local.disabled}
       class={cn(
         'relative rounded-md transition-shadow focus-within:outline-none focus-within:ring-[1.5px] focus-within:ring-ring',
         local.class,

src/components/select-input.tsx

@@ -51,6 +51,7 @@ interface SelectInputOptions<T>
   placeholder?: string;
   options: SelectOption<T>[];
   required?: boolean;
+  disabled?: boolean;
 }
 
 export type SelectInputProps<T> = WithOverride<
@@ -73,6 +74,7 @@ export function SelectInput<T>(props: SelectInputProps<T>) {
   return (
     <_Select
       {...rest}
+      disabled={props.disabled}
       options={props.options}
       optionValue="value"
       optionTextValue={option =>

src/components/switch-input.tsx

@@ -16,7 +16,9 @@ export const SwitchField = makeFieldComponent({
 });
 
 export interface SwitchInputOptions
-  extends FormInputProps<HTMLInputElement, boolean> {}
+  extends FormInputProps<HTMLInputElement, boolean> {
+  disabled?: boolean;
+}
 
 export type SwitchInputProps = WithOverride<
   ComponentProps<'div'>,
@@ -30,6 +32,7 @@ export function SwitchInput(props: SwitchInputProps) {
     <_Switch
       checked={local.value}
       onChange={val => local.onChange?.(val)}
+      disabled={local.disabled}
       {...rest}
     >
       <_Switch.Input