docs: migrate UI docs (#13245)

* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
2025-08-20 11:42:25 +03:00
parent 5b7a041246
commit d1a1135328
748 changed files with 13079 additions and 7319 deletions
@@ -0,0 +1,44 @@
+import { Checkbox, CheckboxCheckedState, Label } from "@medusajs/ui"
+import { useState } from "react"
+
+export default function CheckboxControlled() {
+  const [checked, setChecked] = useState<CheckboxCheckedState>(false)
+
+  const handleToggle = () => {
+    switch (checked) {
+      case "indeterminate":
+        setChecked(true)
+        return
+      case true:
+        setChecked(false)
+        return
+      default:
+        setChecked("indeterminate")
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-6 items-center">
+      <span className="txt-small text-center w-3/4">
+        The following checkbox will move from unchecked, to indeterminate, and
+        finally checked each time you click it
+      </span>
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id="controlled-checkbox"
+          checked={checked}
+          onCheckedChange={handleToggle}
+        />
+        <Label htmlFor="controlled-checkbox">
+          Controlled Checkbox: (
+          {checked === "indeterminate"
+            ? "Indeterminate"
+            : checked
+              ? "Checked"
+              : "Unchecked"}
+          )
+        </Label>
+      </div>
+    </div>
+  )
+}