refactor(disabled): add disabled prop to lib/input, use centrally defined disabled classs

adaptive-shield-matrix · adaptive-shield-matrix · commit 83c2d1c412dd · 2025-11-12T13:52:39.000+06:00
diff --git a/lib/classes/classesDisabledDirectly.ts b/lib/classes/classesDisabledDirectly.ts
@@ -0,0 +1 @@
+export const classesDisabledDirectly = "cursor-not-allowed opacity-70"
diff --git a/lib/classes/classesDisabledModifier.ts b/lib/classes/classesDisabledModifier.ts
@@ -0,0 +1 @@
+export const classesDisabledModifier = "disabled:cursor-not-allowed disabled:opacity-70"
diff --git a/lib/classes/classesDisabledModifierPeer.ts b/lib/classes/classesDisabledModifierPeer.ts
@@ -0,0 +1 @@
+export const classesDisabledModifierPeer = "peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
diff --git a/lib/input/check/CheckMultiple.tsx b/lib/input/check/CheckMultiple.tsx
@@ -11,6 +11,7 @@ import type { HasValueSignalStringArray } from "~ui/utils/HasValueSignalStringAr
 import type { MayHaveValueText } from "~ui/utils/HasValueText"
 import type { MayHaveButtonVariant } from "~ui/utils/MayHaveButtonVariant"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import type { MayHaveDisabled } from "~ui/utils/MayHaveDisabled"
 import type { MayHaveId } from "~ui/utils/MayHaveId"
 import type { MayHaveInnerClass } from "~ui/utils/MayHaveInnerClass"
 
@@ -21,7 +22,8 @@ export interface CheckMultipleProps
     MayHaveId,
     MayHaveButtonVariant,
     MayHaveClass,
-    MayHaveInnerClass {
+    MayHaveInnerClass,
+    MayHaveDisabled {
   // styling
   optionClass?: string
 }
@@ -57,7 +59,8 @@ interface OptionListProps
     HasGetOptions,
     MayHaveValueText,
     MayHaveButtonVariant,
-    MayHaveInnerClass {
+    MayHaveInnerClass,
+    MayHaveDisabled {
   optionClass?: string
 }
 
@@ -72,14 +75,15 @@ function OptionList(p: OptionListProps) {
             valueText={p.valueText}
             optionClass={p.optionClass}
             variant={p.variant}
+            disabled={p.disabled}
           />
         )}
       </For>
     </div>
   )
 }
 
-interface CheckOptionProps extends MayHaveButtonVariant {
+interface CheckOptionProps extends MayHaveButtonVariant, MayHaveDisabled {
   option: string
   valueSignal: SignalObject<string[]>
   valueText?: (value: string) => string
@@ -99,6 +103,7 @@ function CheckOption(p: CheckOptionProps) {
       onClick={() => toggleOption(p)}
       variant={p.variant ?? buttonVariant.filled}
       class={classMerge("justify-start text-left", p.optionClass)}
+      disabled={p.disabled}
     >
       {label()}
     </ButtonIcon>
diff --git a/lib/input/check/Checkbox.tsx b/lib/input/check/Checkbox.tsx
@@ -1,15 +1,16 @@
 import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js"
 import { splitProps, type ComponentProps } from "solid-js"
+import { classesDisabledDirectly } from "~ui/classes/classesDisabledDirectly"
 import { Icon1 } from "~ui/static/icon/Icon1"
 import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import type { MayHaveDisabled } from "~ui/utils/MayHaveDisabled"
 import { classMerge } from "~ui/utils/classMerge"
 
-interface CheckboxProps extends MayHaveClass, MayHaveChildren, ComponentProps<"checkbox"> {
+interface CheckboxProps extends MayHaveClass, MayHaveChildren, MayHaveDisabled, ComponentProps<"checkbox"> {
   id?: string
   checked: boolean
   onChange: (checked: boolean) => void
-  disabled?: boolean
 }
 
 export function Checkbox(p: CheckboxProps) {
@@ -37,7 +38,7 @@ export function Checkbox(p: CheckboxProps) {
           "size-6", // sizing + interaction
           "cursor-pointer", // cursor
           "flex items-center justify-center", // layout children
-          s.disabled && "cursor-not-allowed opacity-50", // disabled state
+          s.disabled && classesDisabledDirectly, // disabled state
         )}
         role="checkbox"
         aria-checked={s.checked}
@@ -57,7 +58,7 @@ export function Checkbox(p: CheckboxProps) {
         for={s.id}
         class={classMerge(
           "cursor-pointer", // interaction
-          s.disabled && "cursor-not-allowed opacity-70", // disabled state
+          s.disabled && classesDisabledDirectly, // disabled state
         )}
         onClick={(e) => {
           e.preventDefault()
diff --git a/lib/input/input/Input.tsx b/lib/input/input/Input.tsx
@@ -1,5 +1,6 @@
 import type { Component, ComponentProps } from "solid-js"
 import { splitProps } from "solid-js"
+import { classesDisabledModifier } from "~ui/classes/classesDisabledModifier"
 import { classMerge } from "~ui/utils/classMerge"
 
 export const Input: Component<ComponentProps<"input">> = (p) => {
@@ -17,7 +18,7 @@ export const Input: Component<ComponentProps<"input">> = (p) => {
         "placeholder:text-muted-foreground", // typography
         "file:border-0 file:bg-transparent file:font-medium", // file input styling
         "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-2", // focus states
-        "disabled:cursor-not-allowed disabled:opacity-50", // disabled states
+        classesDisabledModifier, // disabled
         s.class,
       )}
       dir="auto"
diff --git a/lib/input/label/Label.tsx b/lib/input/label/Label.tsx
@@ -1,5 +1,6 @@
 import type { Component, ComponentProps } from "solid-js"
 import { splitProps } from "solid-js"
+import { classesDisabledModifierPeer } from "~ui/classes/classesDisabledModifierPeer"
 import { classMerge } from "~ui/utils/classMerge"
 
 export const Label: Component<ComponentProps<"label">> = (p) => {
@@ -9,7 +10,7 @@ export const Label: Component<ComponentProps<"label">> = (p) => {
       class={classMerge(
         "font-medium leading-none", // font
         "whitespace-nowrap", // no text wrapping
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-70", // disabled
+        classesDisabledModifierPeer, // disabled
         s.class,
       )}
       {...rest}
diff --git a/lib/input/select/SelectMultiple.tsx b/lib/input/select/SelectMultiple.tsx
@@ -16,6 +16,7 @@ import type { HasValueSignalStringArray } from "~ui/utils/HasValueSignalStringAr
 import type { MayHaveValueText } from "~ui/utils/HasValueText"
 import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import type { MayHaveDisabled } from "~ui/utils/MayHaveDisabled"
 import type { MayHaveId } from "~ui/utils/MayHaveId"
 import type { MayHaveInnerClass } from "~ui/utils/MayHaveInnerClass"
 
@@ -29,7 +30,8 @@ export interface SelectMultipleProps
     MayHaveId,
     MayHaveClass,
     MayHaveInnerClass,
-    MayHaveChildren {
+    MayHaveChildren,
+    MayHaveDisabled {
   buttonProps: CorvuPopoverProps
   textNoEntries?: string
   textAddEntry?: string
@@ -44,6 +46,7 @@ export function SelectMultiple(p: SelectMultipleProps) {
     icon: mdiPlus,
     children: p.textAddEntry ?? ct0(t4multiselect.Add_entry),
     class: buttonClass,
+    disabled: p.disabled,
   })
   return (
     <div
@@ -68,6 +71,7 @@ export function SelectMultiple(p: SelectMultipleProps) {
           noItemsClass={p.noItemsClass}
           listOptionClass={p.listOptionClass}
           innerClass={p.innerClass}
+          disabled={p.disabled}
         />
       </CorvuPopover>
     </div>
@@ -121,7 +125,8 @@ interface OptionListProps
     HasGetOptions,
     MayHaveValueText,
     MayHaveId,
-    MayHaveInnerClass {
+    MayHaveInnerClass,
+    MayHaveDisabled {
   noItemsClass?: string
   listOptionClass?: string
 }
@@ -138,6 +143,7 @@ function OptionList(p: OptionListProps) {
             valueSignal={p.valueSignal}
             valueText={p.valueText}
             listOptionClass={p.listOptionClass}
+            disabled={p.disabled}
           />
         )}
       </For>
@@ -155,7 +161,7 @@ function getInnerClass(optionAmount: number, innerClass?: string): string {
   return ""
 }
 
-interface ListOptionProps extends MayHaveId, MultiselectOptionState {
+interface ListOptionProps extends MayHaveId, MultiselectOptionState, MayHaveDisabled {
   index: number
   listOptionClass?: string
 }
@@ -173,6 +179,7 @@ function ListOption(p: ListOptionProps) {
       }}
       variant={buttonVariant.ghost}
       class={classMerge("justify-start", p.listOptionClass)}
+      disabled={p.disabled}
     >
       {label()}
     </ButtonIcon>
diff --git a/lib/input/select/SelectSingleNative.tsx b/lib/input/select/SelectSingleNative.tsx
@@ -1,11 +1,13 @@
 import { Key } from "@solid-primitives/keyed"
+import { classesDisabledDirectly } from "~ui/classes/classesDisabledDirectly"
 import { ct0 } from "~ui/i18n/ct0"
 import { t4multiselect } from "~ui/input/select/t4multiselect"
 import type { HasGetOptions } from "~ui/utils/HasGetOptions"
 import type { HasValueSignalString } from "~ui/utils/HasValueSignalString"
 import type { MayHaveValueText } from "~ui/utils/HasValueText"
 import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import type { MayHaveDisabled } from "~ui/utils/MayHaveDisabled"
 import type { MayHaveId } from "~ui/utils/MayHaveId"
 import { classArr } from "~ui/utils/classArr"
 
@@ -17,7 +19,8 @@ export interface SelectSingleNativeProps
     MayHaveValueText,
     MayHaveClass,
     MayHaveId,
-    MayHaveChildren {}
+    MayHaveChildren,
+    MayHaveDisabled {}
 
 export function SelectSingleNative(p: SelectSingleNativeProps) {
   return (
@@ -30,10 +33,12 @@ export function SelectSingleNative(p: SelectSingleNativeProps) {
         "bg-gray-50 dark:bg-gray-700", // bg
         "rounded-lg border border-gray-300 dark:border-gray-500", // border
         "focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:focus:ring-blue-500",
+        p.disabled && classesDisabledDirectly,
         p.class,
       )}
       value={p.valueSignal.get()}
       onChange={(e) => onChange(e, p)}
+      disabled={p.disabled}
     >
       <Key each={p.getOptions()} by={(item) => item} fallback={<NoItems />}>
         {(getItem) => <SelectItem itemValue={getItem()} valueText={p.valueText} />}
diff --git a/lib/input/textarea/Textarea.tsx b/lib/input/textarea/Textarea.tsx
@@ -1,5 +1,6 @@
 import type { Component, ComponentProps } from "solid-js"
 import { splitProps } from "solid-js"
+import { classesDisabledModifier } from "~ui/classes/classesDisabledModifier"
 import { classMerge } from "~ui/utils/classMerge"
 
 export const Textarea: Component<ComponentProps<"textarea">> = (p) => {
@@ -15,7 +16,7 @@ export const Textarea: Component<ComponentProps<"textarea">> = (p) => {
         "placeholder:text-muted-foreground", // typography
         "px-3 py-2", // spacing
         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background", // focus states
-        "disabled:cursor-not-allowed disabled:opacity-50", // disabled states
+        classesDisabledModifier, // disabled
         s.class,
       )}
       {...rest}
diff --git a/lib/interactive/button/Button.tsx b/lib/interactive/button/Button.tsx
@@ -1,16 +1,16 @@
 import type { Component, ComponentProps } from "solid-js"
 import { splitProps } from "solid-js"
+import { classesDisabledDirectly } from "~ui/classes/classesDisabledDirectly"
 import { buttonCva2, type ButtonCvaProps } from "~ui/interactive/button/buttonCva"
 import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
-import { classesButtonDisabled } from "~ui/interactive/button/classesButtonDisabled"
 
 export interface ButtonProps extends ComponentProps<"button">, ButtonCvaProps {}
 
 export const Button: Component<ButtonProps> = (p) => {
   const [s, rest] = splitProps(p, ["variant", "size", "class", "type"])
   return (
     <button
-      class={buttonCva2(s.variant, s.size, classesButtonClickAnimation, p.disabled && classesButtonDisabled, s.class)}
+      class={buttonCva2(s.variant, s.size, classesButtonClickAnimation, p.disabled && classesDisabledDirectly, s.class)}
       type={s.type ?? "button"}
       {...rest}
     />
diff --git a/lib/interactive/button/ButtonIcon1.tsx b/lib/interactive/button/ButtonIcon1.tsx
@@ -1,8 +1,8 @@
 import { type Accessor, type Component, type ComponentProps, splitProps } from "solid-js"
+import { classesDisabledDirectly } from "~ui/classes/classesDisabledDirectly"
 import { buttonCva2, type ButtonCvaProps } from "~ui/interactive/button/buttonCva"
 import { buttonIconCva } from "~ui/interactive/button/buttonIconCva"
 import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
-import { classesButtonDisabled } from "~ui/interactive/button/classesButtonDisabled"
 import { Icon1 } from "~ui/static/icon/Icon1"
 import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import type { MayHaveClass } from "~ui/utils/MayHaveClass"
@@ -50,7 +50,7 @@ export const ButtonIcon1: Component<ButtonIcon1Props> = (p) => {
         s.variant,
         s.size,
         classesButtonClickAnimation,
-        (s.disabled || s.isDisabled?.()) && classesButtonDisabled,
+        (s.disabled || s.isDisabled?.()) && classesDisabledDirectly,
         s.class,
       )}
       onClick={onClick2}
diff --git a/lib/interactive/button/ButtonIconOnly.tsx b/lib/interactive/button/ButtonIconOnly.tsx
@@ -1,8 +1,8 @@
 import { type Component, type ComponentProps, splitProps } from "solid-js"
+import { classesDisabledDirectly } from "~ui/classes/classesDisabledDirectly"
 import { buttonCvaIconOnly, type ButtonCvaProps } from "~ui/interactive/button/buttonCva"
 import { buttonIconCva } from "~ui/interactive/button/buttonIconCva"
 import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
-import { classesButtonDisabled } from "~ui/interactive/button/classesButtonDisabled"
 import { Icon0 } from "~ui/static/icon/Icon0"
 import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
 import { isDisabled } from "~ui/utils/MayHaveDisabledAccessor"
@@ -51,7 +51,7 @@ export const ButtonIconOnly: Component<ButtonIconOnlyProps> = (p) => {
             s.variant,
             s.children && "mr-2",
             s.isLoading && "animate-spin-faster",
-            s.disabled && classesButtonDisabled,
+            s.disabled && classesDisabledDirectly,
             s.iconClass,
           )}
         />
diff --git a/lib/interactive/button/buttonCva.ts b/lib/interactive/button/buttonCva.ts
@@ -1,5 +1,6 @@
+import { classesDisabledDirectly } from "~ui/classes/classesDisabledDirectly"
+import { classesDisabledModifier } from "~ui/classes/classesDisabledModifier"
 import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
-import { classesButtonDisabled } from "~ui/interactive/button/classesButtonDisabled"
 import { classArr } from "~ui/utils/classArr"
 import { classMerge } from "~ui/utils/classMerge"
 
@@ -46,6 +47,7 @@ const baseClasses = classArr(
   "transition-colors", // animation
   "group",
   "cursor-pointer",
+  classesDisabledModifier,
 )
 
 const variantClasses = {
@@ -179,7 +181,7 @@ export function buttonCvaIconOnly(
     buttonSize.none,
     classesButtonClickAnimation,
     "rounded-full p-2.5",
-    (isDisabled || isLoading) && classesButtonDisabled,
+    (isDisabled || isLoading) && classesDisabledDirectly,
     ...customClasses,
   )
   return classes
diff --git a/lib/interactive/button/classesButtonDisabled.ts b/lib/interactive/button/classesButtonDisabled.ts
diff --git a/lib/interactive/popover/CorvuPopover.tsx b/lib/interactive/popover/CorvuPopover.tsx
@@ -1,10 +1,10 @@
 import Popover from "@corvu/popover"
 import type { JSX } from "solid-js"
+import { classesDisabledDirectly } from "~ui/classes/classesDisabledDirectly"
 import { buttonCva2 } from "~ui/interactive/button/buttonCva"
 import type { ButtonIcon1Props } from "~ui/interactive/button/ButtonIcon1"
 import { buttonIconCva } from "~ui/interactive/button/buttonIconCva"
 import { classesButtonClickAnimation } from "~ui/interactive/button/classesButtonClickAnimation"
-import { classesButtonDisabled } from "~ui/interactive/button/classesButtonDisabled"
 import { Icon1 } from "~ui/static/icon/Icon1"
 import { classArr } from "~ui/utils/classArr"
 import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
@@ -31,7 +31,7 @@ export function CorvuPopover(p: CorvuPopoverProps) {
           p.variant,
           p.size,
           classesButtonClickAnimation,
-          (p.disabled || p.isDisabled?.()) && classesButtonDisabled,
+          (p.disabled || p.isDisabled?.()) && classesDisabledDirectly,
           p.class,
         )}
       >

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const classesDisabledDirectly = "cursor-not-allowed opacity-70"`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const classesDisabledModifier = "disabled:cursor-not-allowed disabled:opacity-70"`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const classesDisabledModifierPeer = "peer-disabled:cursor-not-allowed peer-disabled:opacity-70"`