@cerberus-design/panda-preset
Version:
The official Panda-CSS preset for the omni-federal design system
125 lines (123 loc) • 2.63 kB
JavaScript
import {
focusStates,
formStates
} from "./chunk-4NPQKTHD.js";
import {
action,
secondaryAction
} from "./chunk-CUF2I7W3.js";
// src/recipes/slots/tabs.ts
import { defineSlotRecipe } from "@pandacss/dev";
var tabs = defineSlotRecipe({
className: "tab",
slots: ["tabList", "tab", "tabPanel"],
base: {
tabList: {
borderBottom: "1px solid",
borderBottomColor: "action.border.100",
gap: "0",
w: "full"
},
tab: {
alignItems: "center",
display: "inline-flex",
borderTopLeftRadius: "md",
borderTopRightRadius: "md",
fontSize: "sm",
fontWeight: "600",
gap: "2",
h: "2.75rem",
justifyContent: "center",
position: "relative",
pxi: "4",
zIndex: "base",
_motionSafe: {
transition: "all 200ms ease-in-out",
_before: {
transitionProperty: "height",
transitionDuration: "200ms",
transitionTimingFunction: "ease-in-out"
},
_after: {
transitionProperty: "height",
transitionDuration: "200ms",
transitionTimingFunction: "ease-in-out"
}
},
_before: {
bgColor: "colorPalette.border.initial",
bottom: "0",
content: '""',
h: "0",
position: "absolute",
left: "0",
right: "0",
w: "full",
willChange: "height",
zIndex: "decorator"
},
_after: {
borderTopLeftRadius: "md",
borderTopRightRadius: "md",
bottom: "0",
bgColor: "page.surface.100",
content: '""',
left: "0",
position: "absolute",
right: "0",
h: "0",
w: "full",
willChange: "height",
zIndex: "-1"
},
...focusStates,
...formStates,
_hover: {
color: "colorPalette.text.200",
_after: {
h: "full"
}
},
_selected: {
color: "colorPalette.text.200",
_before: {
h: "3px"
},
_hover: {
_after: {
h: "0"
}
}
}
},
tabPanel: {
rounded: "md",
...focusStates
}
},
variants: {
palette: {
action: {
tab: {
...action,
_before: action,
_after: action
}
},
secondaryAction: {
tab: {
...secondaryAction,
_before: secondaryAction,
_after: secondaryAction
}
}
}
},
defaultVariants: {
palette: "action"
}
});
export {
tabs
};
//# sourceMappingURL=chunk-3LM4CYSC.js.map