add: indeterminate state for checkbox (#135)

* feat: indeterminate state for checkbox * Create fuzzy-pears-watch.md --------- Co-authored-by: Stefan E-K <[email protected]>
stefan-karger · Oct 7, 2024 · 9cac3d4 · 9cac3d4
1 parent b7480c5
commit 9cac3d4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 15 deletions.
diff --git a/.changeset/fuzzy-pears-watch.md b/.changeset/fuzzy-pears-watch.md
@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+add: indeterminate state for checkbox
diff --git a/apps/docs/public/registry/ui/checkbox.json b/apps/docs/public/registry/ui/checkbox.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "checkbox.tsx",
-      "content": "import type { ValidComponent } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as CheckboxPrimitive from \"@kobalte/core/checkbox\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\ntype CheckboxRootProps<T extends ValidComponent = \"div\"> =\n  CheckboxPrimitive.CheckboxRootProps<T> & { class?: string | undefined }\n\nconst Checkbox = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, CheckboxRootProps<T>>\n) => {\n  const [local, others] = splitProps(props as CheckboxRootProps, [\"class\"])\n  return (\n    <CheckboxPrimitive.Root class={cn(\"items-top group flex space-x-2\", local.class)} {...others}>\n      <CheckboxPrimitive.Input class=\"peer\" />\n      <CheckboxPrimitive.Control class=\"size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[checked]:bg-primary data-[checked]:text-primary-foreground\">\n        <CheckboxPrimitive.Indicator>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class=\"size-4\"\n          >\n            <path d=\"M5 12l5 5l10 -10\" />\n          </svg>\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Control>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n"
+      "content": "import type { ValidComponent } from \"solid-js\"\nimport { Match, splitProps, Switch } from \"solid-js\"\n\nimport * as CheckboxPrimitive from \"@kobalte/core/checkbox\"\nimport type { PolymorphicProps } from \"@kobalte/core/polymorphic\"\n\nimport { cn } from \"~/lib/utils\"\n\ntype CheckboxRootProps<T extends ValidComponent = \"div\"> =\n  CheckboxPrimitive.CheckboxRootProps<T> & { class?: string | undefined }\n\nconst Checkbox = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, CheckboxRootProps<T>>\n) => {\n  const [local, others] = splitProps(props as CheckboxRootProps, [\"class\"])\n  return (\n    <CheckboxPrimitive.Root class={cn(\"items-top group flex space-x-2\", local.class)} {...others}>\n      <CheckboxPrimitive.Input class=\"peer\" />\n      <CheckboxPrimitive.Control class=\"size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-primary data-[indeterminate]:bg-primary data-[checked]:text-primary-foreground data-[indeterminate]:text-primary-foreground\">\n        <CheckboxPrimitive.Indicator>\n          <Switch>\n            <Match when={!others.indeterminate}>\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"size-4\"\n              >\n                <path d=\"M5 12l5 5l10 -10\" />\n              </svg>\n            </Match>\n            <Match when={others.indeterminate}>\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"size-4\"\n              >\n                <path d=\"M5 12l14 0\" />\n              </svg>\n            </Match>\n          </Switch>\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Control>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n"
     }
   ],
   "type": "ui"

diff --git a/apps/docs/src/registry/ui/checkbox.tsx b/apps/docs/src/registry/ui/checkbox.tsx
@@ -1,5 +1,5 @@
 import type { ValidComponent } from "solid-js"
-import { splitProps } from "solid-js"
+import { Match, splitProps, Switch } from "solid-js"
 
 import * as CheckboxPrimitive from "@kobalte/core/checkbox"
 import type { PolymorphicProps } from "@kobalte/core/polymorphic"
@@ -16,20 +16,38 @@ const Checkbox = <T extends ValidComponent = "div">(
   return (
     <CheckboxPrimitive.Root class={cn("items-top group flex space-x-2", local.class)} {...others}>
       <CheckboxPrimitive.Input class="peer" />
-      <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[checked]:bg-primary data-[checked]:text-primary-foreground">
+      <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-primary data-[indeterminate]:bg-primary data-[checked]:text-primary-foreground data-[indeterminate]:text-primary-foreground">
         <CheckboxPrimitive.Indicator>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="size-4"
-          >
-            <path d="M5 12l5 5l10 -10" />
-          </svg>
+          <Switch>
+            <Match when={!others.indeterminate}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l5 5l10 -10" />
+              </svg>
+            </Match>
+            <Match when={others.indeterminate}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="size-4"
+              >
+                <path d="M5 12l14 0" />
+              </svg>
+            </Match>
+          </Switch>
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Control>
     </CheckboxPrimitive.Root>