feat(check): add check boolean and check boolean single variant

Author: adaptive-shield-matrix

lib/input/check/CheckBoolean.tsx

@@ -0,0 +1,65 @@
+import { mdiCheckboxBlankCircleOutline, mdiCheckboxMarkedCircle } from "@mdi/js"
+import { buttonVariant } from "~ui/interactive/button/buttonCva"
+import { ButtonIcon } from "~ui/interactive/button/ButtonIcon"
+import { classMerge } from "~ui/utils/classMerge"
+import type { SignalObject } from "~ui/utils/createSignalObject"
+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"
+
+export interface CheckBooleanProps
+  extends MayHaveId,
+    MayHaveButtonVariant,
+    MayHaveClass,
+    MayHaveInnerClass,
+    MayHaveDisabled {
+  valueSignal: SignalObject<boolean>
+  valueText: (value: boolean) => string
+}
+
+export function CheckBoolean(p: CheckBooleanProps) {
+  const currentValue = () => p.valueSignal.get()
+
+  return (
+    <div
+      id={p.id}
+      class={classMerge(
+        "group border border-input",
+        "px-2 py-2",
+        "ring-offset-background",
+        "rounded-md",
+        "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "flex flex-col justify-center gap-1", // layout
+        p.class,
+      )}
+    >
+      <div class="flex gap-2">
+        <ButtonIcon
+          role="option"
+          aria-selected={!currentValue()}
+          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)}
+          disabled={p.disabled}
+        >
+          {p.valueText(false)}
+        </ButtonIcon>
+
+        <ButtonIcon
+          role="option"
+          aria-selected={currentValue()}
+          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)}
+          disabled={p.disabled}
+        >
+          {p.valueText(true)}
+        </ButtonIcon>
+      </div>
+    </div>
+  )
+}

lib/input/check/CheckBooleanSingle.tsx

@@ -0,0 +1,56 @@
+import { mdiCheckboxBlankCircleOutline, mdiCheckboxMarkedCircle } from "@mdi/js"
+import { buttonVariant } from "~ui/interactive/button/buttonCva"
+import { ButtonIcon } from "~ui/interactive/button/ButtonIcon"
+import { classMerge } from "~ui/utils/classMerge"
+import type { SignalObject } from "~ui/utils/createSignalObject"
+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"
+
+export interface CheckBooleanSingleProps
+  extends MayHaveId,
+    MayHaveButtonVariant,
+    MayHaveClass,
+    MayHaveInnerClass,
+    MayHaveDisabled {
+  valueSignal: SignalObject<boolean>
+  valueText: (value: boolean) => string
+}
+
+export function CheckBooleanSingle(p: CheckBooleanSingleProps) {
+  const label = () => p.valueText(p.valueSignal.get())
+  const isSelected = () => p.valueSignal.get()
+
+  return (
+    <div
+      id={p.id}
+      class={classMerge(
+        "group border border-input",
+        "px-2 py-2",
+        "ring-offset-background",
+        "rounded-md",
+        "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "flex flex-col justify-center", // layout
+        p.class,
+      )}
+    >
+      <ButtonIcon
+        role="option"
+        aria-selected={isSelected()}
+        icon={isSelected() ? mdiCheckboxMarkedCircle : mdiCheckboxBlankCircleOutline}
+        onClick={() => toggleOption(p)}
+        variant={p.variant ?? buttonVariant.filled}
+        class={classMerge("justify-start text-left", p.innerClass)}
+        disabled={p.disabled}
+      >
+        {label()}
+      </ButtonIcon>
+    </div>
+  )
+}
+
+function toggleOption(p: CheckBooleanSingleProps) {
+  p.valueSignal.set(!p.valueSignal.get())
+}

src/demos/demoList.ts

@@ -31,6 +31,11 @@ const DemoSwitchSingle = lazy(async () => {
   return { default: c.DemoSwitchSingle }
 })
 
+const DemoCheckBoolean = lazy(async () => {
+  const c = await import("@/demos/input/DemoCheckBoolean")
+  return { default: c.DemoCheckBoolean }
+})
+
 const DemoInputS = lazy(async () => {
   const c = await import("@/demos/input/DemoInputS")
   return { default: c.DemoInputS }
@@ -185,6 +190,7 @@ export const demoList = {
   input: {
     DemoCheckSingle: DemoCheckSingle,
     DemoSwitchSingle: DemoSwitchSingle,
+    DemoCheckBoolean: DemoCheckBoolean,
     DemoInputS: DemoInputS,
     DemoNumberInput: DemoNumberInput,
     DemoSelectSingleNative: DemoSelectSingleNative,

src/demos/input/DemoCheckBoolean.tsx

@@ -0,0 +1,29 @@
+import { CheckBoolean } from "~ui/input/check/CheckBoolean"
+import { CheckBooleanSingle } from "~ui/input/check/CheckBooleanSingle"
+import { PageWrapper } from "~ui/static/page/PageWrapper"
+import { createSignalObject } from "~ui/utils/createSignalObject"
+
+const booleanValueSignal = createSignalObject<boolean>(false)
+const booleanBothValueSignal = createSignalObject<boolean>(false)
+
+export function DemoCheckBoolean() {
+  return (
+    <PageWrapper>
+      <div class="space-y-6">
+        <CheckBooleanSingle
+          id="DemoBooleanCheck"
+          valueSignal={booleanValueSignal}
+          valueText={(value) => (value ? "Enabled" : "Disabled")}
+          class="max-w-sm"
+        />
+
+        <CheckBoolean
+          id="DemoBooleanBothCheck"
+          valueSignal={booleanBothValueSignal}
+          valueText={(value) => (value ? "Enabled" : "Disabled")}
+          class="max-w-sm"
+        />
+      </div>
+    </PageWrapper>
+  )
+}