feat: add custom select from ark ui

.changeset/shiny-dogs-promise.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react": minor
+---
+
+Add custom select from Ark UI and design recipe

packages/react/__stories__/select.stories.tsx

@@ -0,0 +1,54 @@
+import { HiCheck, HiChevronDown } from "react-icons/hi"
+import { Select, chakra } from "../src"
+
+export default {
+  title: "Components / Select",
+  decorators: [
+    (Story: any) => (
+      <chakra.div maxWidth="500px" mx="auto" mt="40px">
+        <Story />
+      </chakra.div>
+    ),
+  ],
+}
+
+const items = [
+  { label: "React", value: "react" },
+  { label: "Solid", value: "solid" },
+  { label: "Svelte", value: "svelte", disabled: true },
+  { label: "Vue", value: "vue" },
+]
+
+export const Demo = (props: Select.RootProps) => {
+  return (
+    <Select.Root
+      positioning={{ sameWidth: true }}
+      width="12rem"
+      {...props}
+      items={items}
+    >
+      <Select.Label>Framework</Select.Label>
+      <Select.Control>
+        <Select.Trigger>
+          <Select.ValueText placeholder="Select a Framework" />
+          <HiChevronDown />
+        </Select.Trigger>
+      </Select.Control>
+      <Select.Positioner>
+        <Select.Content>
+          <Select.ItemGroup>
+            <Select.ItemGroupLabel>Framework</Select.ItemGroupLabel>
+            {items.map((item) => (
+              <Select.Item key={item.value} item={item}>
+                <Select.ItemText>{item.label}</Select.ItemText>
+                <Select.ItemIndicator>
+                  <HiCheck />
+                </Select.ItemIndicator>
+              </Select.Item>
+            ))}
+          </Select.ItemGroup>
+        </Select.Content>
+      </Select.Positioner>
+    </Select.Root>
+  )
+}

packages/react/src/components/index.ts

@@ -42,6 +42,7 @@ export * from "./popover"
 export * from "./portal"
 export * from "./progress"
 export * from "./radio-group"
+export * from "./select"
 export * from "./separator"
 export * from "./show"
 export * from "./skeleton"

packages/react/src/components/select/index.ts

@@ -0,0 +1,44 @@
+export {
+  SelectClearTrigger,
+  SelectContent,
+  SelectControl,
+  SelectIndicator,
+  SelectItem,
+  SelectItemGroup,
+  SelectItemGroupLabel,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectPositioner,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText,
+} from "./select"
+
+export type {
+  SelectClearTriggerProps,
+  SelectContentProps,
+  SelectControlProps,
+  SelectIndicatorProps,
+  SelectItemGroupLabelProps,
+  SelectItemGroupProps,
+  SelectItemIndicatorProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectLabelProps,
+  SelectPositionerProps,
+  SelectRootProps,
+  SelectTriggerProps,
+  SelectValueTextProps,
+} from "./select"
+
+export { useSelectStyles } from "./select"
+
+export { SelectContext } from "@ark-ui/react/select"
+export type {
+  SelectHighlightChangeDetails,
+  SelectOpenChangeDetails,
+  SelectValueChangeDetails,
+} from "@ark-ui/react/select"
+
+export * as Select from "./namespace"

packages/react/src/components/select/namespace.ts

@@ -0,0 +1,40 @@
+export {
+  SelectClearTrigger as ClearTrigger,
+  SelectContent as Content,
+  SelectControl as Control,
+  SelectItem as Item,
+  SelectItemGroup as ItemGroup,
+  SelectItemGroupLabel as ItemGroupLabel,
+  SelectItemText as ItemText,
+  SelectLabel as Label,
+  SelectPositioner as Positioner,
+  SelectRoot as Root,
+  SelectTrigger as Trigger,
+  SelectValueText as ValueText,
+  SelectIndicator as Indicator,
+  SelectItemIndicator as ItemIndicator,
+} from "./select"
+
+export type {
+  SelectClearTriggerProps as ClearTriggerProps,
+  SelectContentProps as ContentProps,
+  SelectControlProps as ControlProps,
+  SelectIndicatorProps as IndicatorProps,
+  SelectValueTextProps as ValueTextProps,
+  SelectItemIndicatorProps as ItemIndicatorProps,
+  SelectItemGroupLabelProps as ItemGroupLabelProps,
+  SelectItemGroupProps as ItemGroupProps,
+  SelectItemProps as ItemProps,
+  SelectItemTextProps as ItemTextProps,
+  SelectLabelProps as LabelProps,
+  SelectPositionerProps as PositionerProps,
+  SelectRootProps as RootProps,
+  SelectTriggerProps as TriggerProps,
+} from "./select"
+
+export { SelectContext as Context } from "@ark-ui/react/select"
+export type {
+  SelectHighlightChangeDetails as HighlightChangeDetails,
+  SelectOpenChangeDetails as OpenChangeDetails,
+  SelectValueChangeDetails as ValueChangeDetails,
+} from "@ark-ui/react/select"