-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3069a1f
commit 548470d
Showing
12 changed files
with
472 additions
and
146 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@chakra-ui/react": minor | ||
--- | ||
|
||
Add custom select from Ark UI and design recipe |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
126 changes: 0 additions & 126 deletions
126
packages/react/src/components/live-region/live-region.ts
This file was deleted.
Oops, something went wrong.
17 changes: 0 additions & 17 deletions
17
packages/react/src/components/live-region/use-live-region.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" |
Oops, something went wrong.