select.ts•5.52 kB
import { selectAnatomy } from "@ark-ui/react";
import { defineSlotRecipe } from "@pandacss/dev";
export const select = defineSlotRecipe({
className: "select",
slots: selectAnatomy.keys(),
base: {
root: {
colorPalette: "accent",
display: "flex",
flexDirection: "column",
gap: "1.5",
width: "full",
},
content: {
background: "bg.default",
borderRadius: "l2",
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: "l1",
cursor: "pointer",
display: "flex",
justifyContent: "space-between",
transitionDuration: "fast",
transitionProperty: "background, color",
transitionTimingFunction: "default",
_hover: {
background: "bg.emphasized",
color: "fg.default",
},
_highlighted: {
background: "bg.selected",
color: "fg.default",
},
_selected: {
color: "fg.default",
},
_disabled: {
color: "fg.disabled",
cursor: "not-allowed",
_hover: {
background: "transparent",
color: "fg.disabled",
},
},
},
itemGroupLabel: {
fontWeight: "semibold",
textStyle: "sm",
},
itemIndicator: {
color: "colorPalette.default",
},
label: {
color: "fg.default",
fontWeight: "medium",
},
trigger: {
appearance: "none",
alignItems: "center",
borderColor: "border.default",
borderRadius: "l2",
cursor: "pointer",
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",
},
_disabled: {
color: "fg.disabled",
cursor: "not-allowed",
"& :where(svg)": {
color: "fg.disabled",
},
},
"& :where(svg)": {
color: "fg.subtle",
},
},
},
defaultVariants: {
size: "md",
variant: "outline",
},
variants: {
variant: {
outline: {
trigger: {
borderWidth: "1px",
_focus: {
borderColor: "colorPalette.default",
boxShadow: "0 0 0 1px var(--colors-color-palette-default)",
},
},
},
ghost: {
trigger: {
_hover: {
background: "gray.a3",
},
_focus: {
background: "gray.a3",
},
},
},
},
size: {
xs: {
content: { p: "0.5", gap: "1", borderRadius: "sm" },
item: { textStyle: "xs", px: "2", height: "6", borderRadius: "sm" },
itemIndicator: {
"& :where(svg)": {
width: "4",
height: "4",
},
},
itemGroupLabel: {
px: "2",
py: "1.5",
},
label: { textStyle: "xs" },
trigger: {
px: "2.5",
h: "6",
minW: "9",
fontSize: "xs",
borderRadius: "sm",
gap: "2",
"& :where(svg)": {
width: "4",
height: "4",
},
},
},
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: "8",
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",
},
},
},
},
},
});