ark select wip

web/panda.config.ts

@@ -13,6 +13,7 @@ import { heading } from "src/theme/components/Heading/heading.recipe";
 import { input } from "src/theme/components/Input/input.recipe";
 import { link } from "src/theme/components/Link/link.recipe";
 import { menu } from "src/theme/components/Menu/menu.recipe";
+import { select } from "src/theme/components/Select/select.recipe";
 import { skeleton } from "src/theme/components/Skeleton/skeleton.recipe";
 import { titleInput } from "src/theme/components/TitleInput/titleInput.recipe";
 
@@ -69,6 +70,7 @@ export default defineConfig({
       button: button,
       link: link,
       menu: menu,
+      select: select,
       checkbox: checkbox,
       skeleton: skeleton,
     },

web/src/screens/compose/components/CategorySelect/CategorySelect.tsx

@@ -1,40 +1,61 @@
-import {
-  FormControl,
-  FormErrorMessage,
-  Select,
-  SelectProps,
-} from "@chakra-ui/react";
-import { map } from "lodash/fp";
+import { Select } from "@ark-ui/react";
+import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
 import { Controller } from "react-hook-form";
 
-import { Category } from "src/api/openapi/schemas";
 import { Unready } from "src/components/site/Unready";
+import { FormControl } from "src/theme/components/FormControl";
+import { FormErrorText } from "src/theme/components/FormErrorText";
 
+// import {
+//   Select,
+//   SelectContent,
+//   SelectControl,
+//   SelectItem,
+//   SelectItemText,
+//   SelectPositioner,
+//   SelectTrigger,
+//   SelectValueText,
+// } from "src/theme/components/Select";
 import { useCategorySelect } from "./useCategorySelect";
 
-const mapCategories = map((c: Category) => (
-  <option key={c.id} value={c.id}>
-    {c.name}
-  </option>
-));
-
-export function CategorySelect({ ...props }: SelectProps) {
+export function CategorySelect() {
   const { control, fieldError, categories, error } = useCategorySelect();
 
   if (!categories) return <Unready {...error} />;
 
   return (
-    <FormControl isInvalid={!!fieldError}>
+    <FormControl>
       <Controller
-        render={() => (
-          <Select w="max-content" size="xs" borderRadius="lg" {...props}>
-            {mapCategories(categories)}
-          </Select>
+        render={({ field }) => (
+          <Select.Root
+            // size="sm"
+            positioning={{ sameWidth: true }}
+            items={categories}
+            onChange={(e) => field.onChange(e?.value)}
+            closeOnSelect
+          >
+            <Select.Control>
+              <Select.Trigger>
+                <Select.Value placeholder="Select category" />
+                <ChevronUpDownIcon />
+              </Select.Trigger>
+            </Select.Control>
+
+            <Select.Positioner>
+              <Select.Content>
+                {categories.map((c) => (
+                  <Select.Item key={c.id} item={c}>
+                    <Select.ItemText>{c.name}</Select.ItemText>
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select.Positioner>
+          </Select.Root>
         )}
         control={control}
         name="category"
       />
-      <FormErrorMessage>{fieldError?.message}</FormErrorMessage>
+      <FormErrorText>{fieldError?.message}</FormErrorText>
     </FormControl>
   );
 }

web/src/theme/components/Select/index.ts

@@ -0,0 +1,84 @@
+import { Select as ArkSelect } from "@ark-ui/react/select";
+import { styled } from "styled-system/jsx";
+
+import { createStyleContext } from "src/theme/create-style-context";
+
+import { select } from "@/styled-system/recipes";
+
+const { withProvider, withContext } = createStyleContext(select);
+
+const Select = withProvider(styled(ArkSelect.Root), "root");
+const SelectClearTrigger = withContext(
+  styled(ArkSelect.ClearTrigger),
+  "clearTrigger",
+);
+const SelectContent = withContext(styled(ArkSelect.Content), "content");
+const SelectControl = withContext(styled(ArkSelect.Control), "control");
+const SelectIndicator = withContext(
+  styled(ArkSelect.ItemIndicator),
+  "indicator",
+);
+const SelectItem = withContext(styled(ArkSelect.Item), "item");
+const SelectItemGroup = withContext(styled(ArkSelect.ItemGroup), "itemGroup");
+const SelectItemGroupLabel = withContext(
+  styled(ArkSelect.ItemGroupLabel),
+  "itemGroupLabel",
+);
+const SelectItemIndicator = withContext(
+  styled(ArkSelect.ItemIndicator),
+  "itemIndicator",
+);
+const SelectItemText = withContext(styled(ArkSelect.ItemText), "itemText");
+const SelectLabel = withContext(styled(ArkSelect.Label), "label");
+const SelectPositioner = withContext(
+  styled(ArkSelect.Positioner),
+  "positioner",
+);
+const SelectTrigger = withContext(styled(ArkSelect.Trigger), "trigger");
+const SelectValueText = withContext(styled(ArkSelect.Value), "valueText");
+
+const Root = Select;
+const ClearTrigger = SelectClearTrigger;
+const Content = SelectContent;
+const Control = SelectControl;
+const Indicator = SelectIndicator;
+const Item = SelectItem;
+const ItemGroup = SelectItemGroup;
+const ItemGroupLabel = SelectItemGroupLabel;
+const ItemIndicator = SelectItemIndicator;
+const ItemText = SelectItemText;
+const Label = SelectLabel;
+const Positioner = SelectPositioner;
+const Trigger = SelectTrigger;
+const ValueText = SelectValueText;
+
+export {
+  ClearTrigger,
+  Content,
+  Control,
+  Indicator,
+  Item,
+  ItemGroup,
+  ItemGroupLabel,
+  ItemIndicator,
+  ItemText,
+  Label,
+  Positioner,
+  Root,
+  Select,
+  SelectClearTrigger,
+  SelectContent,
+  SelectControl,
+  SelectIndicator,
+  SelectItem,
+  SelectItemGroup,
+  SelectItemGroupLabel,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectPositioner,
+  SelectTrigger,
+  SelectValueText,
+  Trigger,
+  ValueText,
+};

web/src/theme/components/Select/select.recipe.ts

@@ -0,0 +1,191 @@
+import { selectAnatomy } from "@ark-ui/react";
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export const select = defineSlotRecipe({
+  className: "select",
+  slots: selectAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      width: "full",
+    },
+    content: {
+      background: "bg.default",
+      borderRadius: "md",
+      boxShadow: "lg",
+      display: "flex",
+      flexDirection: "column",
+      zIndex: "dropdown",
+      _hidden: {
+        display: "none",
+      },
+      _open: {
+        animation: "fadeIn 0.25s ease-out",
+      },
+      _closed: {
+        animation: "fadeOut 0.2s ease-out",
+      },
+      _focusVisible: {
+        outlineOffset: "2px",
+        outline: "2px solid",
+        outlineColor: "border.outline",
+      },
+    },
+    item: {
+      alignItems: "center",
+      borderRadius: "md",
+      cursor: "pointer",
+      display: "flex",
+      justifyContent: "space-between",
+      transitionDuration: "fast",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+      _hover: {
+        background: "gray.300",
+        color: "fg.default",
+      },
+      _highlighted: {
+        background: "gray.300",
+        color: "fg.default",
+      },
+      _selected: {
+        color: "fg.default",
+      },
+      _disabled: {
+        color: "fg.disabled",
+        cursor: "not-allowed",
+        _hover: {
+          background: "transparent",
+        },
+      },
+    },
+    itemGroupLabel: {
+      fontWeight: "semibold",
+      textStyle: "sm",
+    },
+    itemIndicator: {
+      color: "fg.default",
+    },
+    label: {
+      color: "fg.default",
+      fontWeight: "medium",
+    },
+    positioner: {
+      zIndex: "dropdown",
+    },
+    trigger: {
+      appearance: "none",
+      alignItems: "center",
+      cursor: "pointer",
+
+      backgroundColor: "whiteAlpha.600",
+      borderColor: "blackAlpha.50",
+      borderRadius: "lg",
+      boxShadow: "xs",
+
+      color: "fg.default",
+      display: "inline-flex",
+      justifyContent: "space-between",
+      outline: 0,
+      position: "relative",
+      transitionDuration: "normal",
+      transitionProperty: "background, box-shadow, border-color",
+      transitionTimingFunction: "default",
+      width: "full",
+
+      _placeholderShown: {
+        color: "fg.subtle",
+      },
+      "& :where(svg)": {
+        color: "fg.subtle",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+  variants: {
+    size: {
+      sm: {
+        content: { p: "0.5", gap: "1" },
+        item: { textStyle: "sm", px: "2", height: "9" },
+        itemIndicator: {
+          "& :where(svg)": {
+            width: "4",
+            height: "4",
+          },
+        },
+        itemGroupLabel: {
+          px: "2",
+          py: "1.5",
+        },
+        label: { textStyle: "sm" },
+        trigger: {
+          px: "2.5",
+          h: "9",
+          minW: "9",
+          fontSize: "sm",
+          gap: "2",
+          "& :where(svg)": {
+            width: "4",
+            height: "4",
+          },
+        },
+      },
+      md: {
+        content: { p: "1", gap: "1" },
+        item: { textStyle: "md", px: "2", height: "10" },
+        itemIndicator: {
+          "& :where(svg)": {
+            width: "4",
+            height: "4",
+          },
+        },
+        itemGroupLabel: {
+          px: "2",
+          py: "1.5",
+        },
+        label: { textStyle: "sm" },
+        trigger: {
+          px: "3",
+          h: "10",
+          minW: "10",
+          fontSize: "md",
+          gap: "2",
+          "& :where(svg)": {
+            width: "4",
+            height: "4",
+          },
+        },
+      },
+      lg: {
+        content: { p: "1.5", gap: "1" },
+        item: { textStyle: "md", px: "2", height: "11" },
+        itemIndicator: {
+          "& :where(svg)": {
+            width: "5",
+            height: "5",
+          },
+        },
+        itemGroupLabel: {
+          px: "2",
+          py: "1.5",
+        },
+        label: { textStyle: "sm" },
+        trigger: {
+          px: "3.5",
+          h: "11",
+          minW: "11",
+          fontSize: "md",
+          gap: "2",
+          "& :where(svg)": {
+            width: "5",
+            height: "5",
+          },
+        },
+      },
+    },
+  },
+});

web/styled-system/recipes/index.d.ts

@@ -7,4 +7,5 @@ export * from './button';
 export * from './link';
 export * from './menu';
 export * from './checkbox';
-export * from './skeleton';
+export * from './skeleton';
+export * from './select';

web/styled-system/recipes/index.mjs

@@ -6,4 +6,5 @@ export * from './button.mjs';
 export * from './link.mjs';
 export * from './menu.mjs';
 export * from './checkbox.mjs';
-export * from './skeleton.mjs';
+export * from './skeleton.mjs';
+export * from './select.mjs';