(feat): initial stuff

src/theme/pickers/PolarityPicker.tsx

@@ -1,3 +1,6 @@
+import { useId } from "react";
+
+import { Label } from "../../cmp/label";
 import {
   Select,
   SelectContent,
@@ -6,19 +9,20 @@ import {
   SelectValue,
 } from "../../cmp/select";
 import type { ThemePolarity } from "../types";
-import { useTheme } from "../ThemeProvider";
+import { useTheme } from "../Provider";
 
 export function PolarityPicker() {
+  const id = useId();
   const { themePolarity, setThemePolarity } = useTheme();
 
   return (
-    <label className="flex flex-col gap-2 text-sm font-medium">
-      Color scheme
+    <div className="flex flex-col gap-2">
+      <Label htmlFor={id}>Polarity</Label>
       <Select
         value={themePolarity}
         onValueChange={(value) => setThemePolarity(value as ThemePolarity)}
       >
-        <SelectTrigger className="w-65">
+        <SelectTrigger id={id} className="w-65">
           <SelectValue>
             {themePolarity === "system"
               ? "System"
@@ -33,6 +37,6 @@ export function PolarityPicker() {
           <SelectItem value="light">Light</SelectItem>
         </SelectContent>
       </Select>
-    </label>
+    </div>
   );
 }