refactoring(check/boolean): add optionClass to props for styling

Author: adaptive-shield-matrix

lib/input/check/CheckBoolean.tsx

@@ -17,6 +17,7 @@ export interface CheckBooleanProps
     MayHaveDisabled {
   valueSignal: SignalObject<boolean>
   valueText: (value: boolean) => string
+  optionClass?: string
 }
 
 export function CheckBoolean(p: CheckBooleanProps) {
@@ -42,7 +43,7 @@ export function CheckBoolean(p: CheckBooleanProps) {
           icon={!currentValue() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}
           onClick={() => p.valueSignal.set(false)}
           variant={!currentValue() ? (p.variant ?? buttonVariant.filled) : buttonVariant.outline}
-          class={classMerge("justify-start text-left", p.innerClass)}
+          class={classMerge("justify-start text-left", p.innerClass, p.optionClass)}
           disabled={p.disabled}
         >
           {p.valueText(false)}
@@ -54,7 +55,7 @@ export function CheckBoolean(p: CheckBooleanProps) {
           icon={currentValue() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}
           onClick={() => p.valueSignal.set(true)}
           variant={currentValue() ? (p.variant ?? buttonVariant.filled) : buttonVariant.outline}
-          class={classMerge("justify-start text-left", p.innerClass)}
+          class={classMerge("justify-start text-left", p.innerClass, p.optionClass)}
           disabled={p.disabled}
         >
           {p.valueText(true)}

lib/input/check/CheckBooleanSingle.tsx

@@ -17,6 +17,7 @@ export interface CheckBooleanSingleProps
     MayHaveDisabled {
   valueSignal: SignalObject<boolean>
   valueText: (value: boolean) => string
+  optionClass?: string
 }
 
 export function CheckBooleanSingle(p: CheckBooleanSingleProps) {
@@ -42,7 +43,7 @@ export function CheckBooleanSingle(p: CheckBooleanSingleProps) {
         icon={isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}
         onClick={() => toggleOption(p)}
         variant={p.variant ?? buttonVariant.filled}
-        class={classMerge("justify-start text-left", p.innerClass)}
+        class={classMerge("justify-start text-left", p.innerClass, p.optionClass)}
         disabled={p.disabled}
       >
         {label()}

src/demos/input/DemoCheckBoolean.tsx

@@ -15,13 +15,15 @@ export function DemoCheckBoolean() {
           valueSignal={booleanValueSignal}
           valueText={(value) => (value ? "Enabled" : "Disabled")}
           class="max-w-sm"
+          optionClass="bg-gray-50"
         />
 
         <CheckBoolean
           id="DemoBooleanBothCheck"
           valueSignal={booleanBothValueSignal}
           valueText={(value) => (value ? "Enabled" : "Disabled")}
           class="max-w-sm"
+          optionClass="bg-gray-50"
         />
       </div>
     </PageWrapper>