@ygor-ui/presets
Version:
Panda CSS presets for Ark UI components
2,270 lines (2,237 loc) • 71.5 kB
JavaScript
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
default: () => src_default
});
module.exports = __toCommonJS(src_exports);
var import_dev51 = require("@pandacss/dev");
// src/conditions.ts
var conditions = {
extend: {
checked: "&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])",
indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])",
closed: "&:is([data-state=closed])",
open: "&:is([open], [data-state=open])",
hidden: "&:is([hidden])",
current: "&:is([data-current])",
today: "&:is([data-today])"
}
};
// src/global-css.ts
var import_dev = require("@pandacss/dev");
var globalCss = (0, import_dev.defineGlobalStyles)({
html: {
lineHeight: 1.5,
MozOsxFontSmoothing: "grayscale",
textRendering: "optimizeLegibility",
WebkitFontSmoothing: "antialiased",
WebkitTextSizeAdjust: "100%"
},
body: {
background: "bg.canvas",
color: "fg.default",
fontFamily: "var(--font-body), sans-serif",
_dark: {
colorScheme: "dark"
}
},
"*, *::before, *::after": {
borderColor: "border.default",
borderStyle: "solid",
boxSizing: "border-box"
},
"*::placeholder": {
opacity: 1,
color: "fg.subtle"
}
});
// src/theme/keyframes.ts
var import_dev2 = require("@pandacss/dev");
var keyframes = (0, import_dev2.defineKeyframes)({
"fade-in": {
from: { opacity: "0" },
to: { opacity: "1" }
},
"fade-out": {
from: { opacity: "1" },
to: { opacity: "0" }
},
"slide-in": {
"0%": { opacity: "0", transform: "translateY(64px)" },
"100%": { opacity: "1", transform: "translateY(0)" }
},
"slide-out": {
"0%": { opacity: "1", transform: "translateY(0)" },
"100%": { opacity: "0", transform: "translateY(64px)" }
},
"slide-in-left": {
"0%": { transform: "translateX(-100%)" },
"100%": { transform: "translateX(0%)" }
},
"slide-out-left": {
"0%": { transform: "translateX(0%)" },
"100%": { transform: "translateX(-100%)" }
},
"slide-in-right": {
"0%": { transform: "translateX(100%)" },
"100%": { transform: "translateX(0%)" }
},
"slide-out-right": {
"0%": { transform: "translateX(0%)" },
"100%": { transform: "translateX(100%)" }
},
fadeIn: {
"0%": { opacity: "0", transform: "translateY(-4px)" },
"100%": { opacity: "1", transform: "translateY(0)" }
},
fadeOut: {
"0%": { opacity: "1", transform: "translateY(0)" },
"100%": { opacity: "0", transform: "translateY(-4px)" }
},
slideInFromBottom: {
"0%": { opacity: "0", transform: "translateY(4px)" },
"100%": { opacity: "1", transform: "translateY(0)" }
},
slideOutToBottom: {
"0%": { opacity: "1", transform: "translateY(0)" },
"100%": { opacity: "0", transform: "translateY(4px)" }
}
});
// src/theme/recipes/accordion.ts
var import_react = require("@ark-ui/react");
var import_dev3 = require("@pandacss/dev");
var accordion = (0, import_dev3.defineSlotRecipe)({
className: "accordion",
description: "An accordion style",
slots: import_react.accordionAnatomy.keys(),
base: {
root: {
divideY: "1px",
width: "full"
},
trigger: {
alignItems: "center",
cursor: "pointer",
display: "flex",
fontWeight: "medium",
justifyContent: "space-between",
width: "full"
},
content: {
color: "fg.muted",
display: "grid",
gridTemplateRows: "0fr",
transitionProperty: "grid-template-rows, padding-bottom",
transitionDuration: "normal",
transitionTimingFunction: "default",
_open: {
gridTemplateRows: "1fr"
},
"& > div": {
overflow: "hidden"
}
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
md: {
trigger: {
py: "4"
},
content: {
pb: "6",
pr: "8",
_closed: {
pb: "0"
}
}
}
}
}
});
// src/theme/recipes/alert.ts
var import_dev4 = require("@pandacss/dev");
var alert = (0, import_dev4.defineRecipe)({
className: "alert",
description: "An alert style",
base: {
background: "bg.default",
borderRadius: "l3",
borderWidth: "1px",
p: "4",
textStyle: "sm",
width: "full"
}
});
// src/theme/recipes/article.ts
var import_dev5 = require("@pandacss/dev");
var article = (0, import_dev5.defineRecipe)({
className: "article",
description: "An article style",
base: {
maxWidth: "65ch",
"& :where(h1, h2)": {
fontWeight: "bold"
},
"& :where(h3)": {
fontWeight: "semibold"
},
"& :where(ul)": {
listStyleType: "disc"
},
"& :where(a)": {
color: "fg.emphasized",
fontWeight: "medium",
textDecoration: "underline",
textDecorationColor: "accent.default",
textUnderlineOffset: "0.2em"
},
"& :where(p, li)": {
color: "fg.muted"
},
"& :where(li::marker)": {
color: "bg.emphasized"
},
"& :where(strong)": {
fontWeight: "semibold",
color: "fg.default"
},
"& :where(code):not(:where(pre code))": {
alignItems: "center",
bg: "bg.subtle",
borderRadius: "l2",
borderWidth: "1px",
display: "inline-flex",
fontFamily: "var(--font-code)",
fontWeight: "medium"
},
"& :where(pre)": {
backgroundColor: "bg.subtle",
borderRadius: "l3",
borderWidth: "1px",
overflowX: "auto"
},
"& :where(blockquote)": {
borderLeftWidth: "4px"
},
"& :where(blockquote > p)": {
color: "fg.default",
fontWeight: "medium",
_first: {
fontStyle: "italic",
_before: {
content: "open-quote"
},
_after: {
content: "close-quote"
}
}
},
"& :where(h1 + *)": {
marginTop: "0!"
},
"& :where(h2 + *)": {
marginTop: "0!"
},
"& :where(h3 + *)": {
marginTop: "0!"
},
"& :where(hr + *)": {
marginTop: "0!"
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
"& :where(h1)": {
fontSize: "3xl",
lineHeight: "2.25rem",
mb: "6"
},
"& :where(h2)": {
fontSize: "xl",
lineHeight: "1.75rem",
mb: "4",
mt: "8"
},
"& :where(h3)": {
fontSize: "lg",
lineHeight: "1.75rem",
mb: "2",
mt: "7"
},
"& :where(p)": {
fontSize: "sm",
lineHeight: "1.5rem",
my: "4"
},
"& :where(hr)": {
my: "10"
},
"& :where(ul)": {
ps: "5"
},
"& :where(li)": {
fontSize: "sm",
lineHeight: "1.5rem",
my: "1"
},
"& :where(code)": {
height: "5",
px: "0.5",
textStyle: "xs"
},
"& :where(pre)": {
my: "5",
px: "3",
py: "2"
},
"& :where(blockquote)": {
my: "4",
ps: "4"
},
"& :where(h1 + p)": {
color: "fg.emphasized",
fontSize: "lg",
lineHeight: "1.75rem",
mb: "4"
}
},
md: {
"& :where(h1)": {
fontSize: "4xl",
letterSpacing: "-0.02em",
lineHeight: "2.5rem",
mb: "8"
},
"& :where(h2)": {
fontSize: "2xl",
lineHeight: "2rem",
mb: "6",
mt: "12"
},
"& :where(h3)": {
fontSize: "xl",
lineHeight: "2rem",
mt: "8",
mb: "3"
},
"& :where(p)": {
fontSize: "md",
lineHeight: "relaxed",
my: "5"
},
"& :where(hr)": {
my: "12"
},
"& :where(ul)": {
ps: "6"
},
"& :where(li)": {
fontSize: "md",
lineHeight: "relaxed",
my: "2"
},
"& :where(code)": {
fontSize: "sm",
height: "6",
px: "1"
},
"& :where(pre)": {
my: "6",
px: "4",
py: "3"
},
"& :where(blockquote)": {
my: "5",
ps: "4"
},
"& :where(h1 + p)": {
color: "fg.emphasized",
fontSize: "xl",
lineHeight: "2rem",
mb: "6"
}
},
lg: {
"& :where(h1)": {
fontSize: "5xl",
letterSpacing: "-0.02em",
lineHeight: "3rem",
mb: "10"
},
"& :where(h2)": {
fontSize: "3xl",
lineHeight: "2.5rem",
mb: "8",
mt: "14"
},
"& :where(h3)": {
fontSize: "2xl",
lineHeight: "2.25rem",
mb: "4",
mt: "10"
},
"& :where(p)": {
fontSize: "lg",
lineHeight: "2rem",
my: "6"
},
"& :where(hr)": {
my: "14"
},
"& :where(ul)": {
ps: "7"
},
"& :where(li)": {
fontSize: "lg",
lineHeight: "2rem",
my: "3"
},
"& :where(code)": {
height: "7",
px: "1.5",
textStyle: "md"
},
"& :where(pre)": {
my: "8",
px: "6",
py: "4"
},
"& :where(blockquote)": {
my: "6",
ps: "4.5"
},
"& :where(h1 + p)": {
color: "fg.emphasized",
fontSize: "2xl",
lineHeight: "2rem",
mb: "6"
}
}
}
}
});
// src/theme/recipes/avatar.ts
var import_react2 = require("@ark-ui/react");
var import_dev6 = require("@pandacss/dev");
var avatar = (0, import_dev6.defineSlotRecipe)({
className: "avatar",
description: "An avatar style",
slots: import_react2.avatarAnatomy.keys(),
base: {
root: {
borderRadius: "full",
borderWidth: "1px",
flexShrink: 0
},
fallback: {
alignItems: "center",
background: "bg.subtle",
borderWidth: "1px",
display: "flex",
fontWeight: "semibold",
height: "inherit",
justifyContent: "center"
},
image: {
objectFit: "cover"
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
xs: {
root: {
height: "8",
width: "8"
},
fallback: {
textStyle: "xs"
}
},
sm: {
root: {
height: "9",
width: "9"
},
fallback: {
textStyle: "sm"
}
},
md: {
root: {
height: "10",
width: "10"
},
fallback: {
textStyle: "md"
}
},
lg: {
root: {
height: "11",
width: "11"
},
fallback: {
textStyle: "lg"
}
},
xl: {
root: {
height: "12",
width: "12"
},
fallback: {
textStyle: "xl"
}
},
"2xl": {
root: {
height: "16",
width: "16"
},
fallback: {
textStyle: "2xl"
}
}
}
}
});
// src/theme/recipes/badge.ts
var import_dev7 = require("@pandacss/dev");
var badge = (0, import_dev7.defineRecipe)({
className: "badge",
description: "A badge style",
base: {
borderRadius: "full",
fontWeight: "medium",
display: "inline-flex",
alignItems: "center",
userSelect: "none",
whiteSpace: "nowrap"
},
defaultVariants: {
variant: "subtle",
size: "md"
},
variants: {
variant: {
solid: {
background: "accent.default",
color: "accent.fg"
},
subtle: {
background: "bg.subtle",
borderColor: "border.default",
borderWidth: "1px",
color: "fg.emphasized"
},
outline: {
borderWidth: "2px",
borderColor: "border.emphasized"
}
},
size: {
sm: { textStyle: "xs", px: "2", h: "5", gap: "1" },
md: { textStyle: "sm", px: "2.5", h: "6", gap: "1.5" },
lg: { textStyle: "sm", px: "3", h: "7", gap: "1.5" }
}
}
});
// src/theme/recipes/button.ts
var import_dev8 = require("@pandacss/dev");
var button = (0, import_dev8.defineRecipe)({
className: "button",
description: "A button style",
base: {
alignItems: "center",
appearance: "none",
borderRadius: "l2",
cursor: "pointer",
display: "inline-flex",
fontWeight: "semibold",
justifyContent: "center",
outline: "none",
position: "relative",
transitionDuration: "normal",
transitionProperty: "background, border-color, color, box-shadow",
transitionTimingFunction: "default",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap"
},
defaultVariants: {
variant: "primary",
size: "md"
},
variants: {
variant: {
primary: {
background: "accent.default",
color: "accent.fg",
_hover: {
background: "accent.emphasized"
},
_focusVisible: {
outlineOffset: "2px",
outline: "2px solid",
outlineColor: "border.accent"
},
_disabled: {
background: "bg.disabled",
cursor: "not-allowed",
_hover: {
background: "bg.disabled"
}
}
},
secondary: {
borderWidth: "1px",
borderColor: "border.emphasized",
background: "bg.default",
color: "fg.emphasized",
_hover: {
color: "fg.default",
background: "bg.subtle"
},
_selected: {
background: "accent.default",
borderColor: "border.accent",
color: "accent.fg",
_hover: {
color: "accent.fg",
background: "accent.default",
borderColor: "border.accent"
}
},
_disabled: {
borderColor: "border.disabled",
color: "fg.disabled",
cursor: "not-allowed",
_hover: {
background: "transparent",
borderColor: "border.disabled",
color: "fg.disabled"
}
},
_focusVisible: {
outlineOffset: "2px",
outline: "2px solid",
outlineColor: "border.outline"
}
},
tertiary: {
color: "fg.emphasized",
_hover: {
color: "fg.default",
background: "bg.subtle"
},
_disabled: {
color: "fg.disabled",
cursor: "not-allowed",
_hover: {
background: "transparent",
color: "fg.disabled"
}
},
_focusVisible: {
outline: "2px solid",
outlineColor: "border.outline"
},
_selected: {
background: "accent.default",
color: "accent.fg",
_hover: {
color: "accent.fg",
background: "accent.default"
}
}
},
link: {
color: "fg.muted",
_hover: {
color: "fg.default"
},
_disabled: {
color: "fg.disabled",
cursor: "not-allowed",
_hover: {
color: "fg.disabled"
}
},
height: "auto!",
px: "0!",
minW: "0!"
}
},
size: {
xs: {
h: "8",
minW: "8",
textStyle: "xs",
px: "3",
gap: "2",
"& svg": {
fontSize: "md",
width: "4",
height: "4"
}
},
sm: {
h: "9",
minW: "9",
textStyle: "sm",
px: "3.5",
gap: "2",
"& svg": {
width: "4.5",
height: "4.5"
}
},
md: {
h: "10",
minW: "10",
textStyle: "sm",
px: "4",
gap: "2",
"& svg": {
fontSize: "xl",
width: "5",
height: "5"
}
},
lg: {
h: "11",
minW: "11",
textStyle: "md",
px: "4.5",
gap: "2",
"& svg": {
width: "5",
height: "5"
}
},
xl: {
h: "12",
minW: "12",
textStyle: "md",
px: "5",
gap: "2.5",
"& svg": {
width: "5",
height: "5"
}
},
"2xl": {
h: "16",
minW: "16",
textStyle: "lg",
px: "7",
gap: "3",
"& svg": {
width: "6",
height: "6"
}
}
}
}
});
// src/theme/recipes/carousel.ts
var import_react3 = require("@ark-ui/react");
var import_dev9 = require("@pandacss/dev");
var carousel = (0, import_dev9.defineSlotRecipe)({
className: "carousel",
description: "A carousel style",
slots: import_react3.carouselAnatomy.keys(),
base: {
viewport: {
overflowX: "hidden",
position: "relative",
borderRadius: "l2"
},
control: {
alignItems: "center",
background: "bg.default",
borderRadius: "l2",
bottom: "4",
display: "flex",
left: "50%",
opacity: "0.9",
position: "absolute",
transform: "translateX(-50%)",
zIndex: "docked"
},
indicatorGroup: {
display: "flex"
},
indicator: {
borderRadius: "full",
background: "bg.emphasized",
cursor: "pointer",
_current: {
background: "accent.default"
},
_focusVisible: {
outlineOffset: "2px",
outline: "2px solid",
outlineColor: "border.outline"
}
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
control: {
gap: "1",
p: "1"
},
indicatorGroup: {
gap: "2"
},
indicator: {
width: "2",
height: "2"
}
},
md: {
control: {
gap: "2",
p: "2.5"
},
indicatorGroup: {
gap: "3"
},
indicator: {
width: "2.5",
height: "2.5"
}
}
}
}
});
// src/theme/recipes/checkbox.ts
var import_react4 = require("@ark-ui/react");
var import_dev10 = require("@pandacss/dev");
var checkbox = (0, import_dev10.defineSlotRecipe)({
className: "checkbox",
description: "A checkbox style",
slots: import_react4.checkboxAnatomy.keys(),
base: {
root: {
alignItems: "center",
display: "flex"
},
label: {
color: "fg.emphasized",
fontWeight: "medium"
},
control: {
alignItems: "center",
borderColor: "border.emphasized",
borderWidth: "1px",
color: "accent.fg",
cursor: "pointer",
display: "flex",
justifyContent: "center",
transitionDuration: "normal",
transitionProperty: "border-color, background",
transitionTimingFunction: "default",
_hover: {
background: "bg.subtle"
},
_checked: {
background: "accent.default",
borderColor: "border.accent",
_hover: {
background: "accent.default"
}
}
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
root: {
gap: "2"
},
control: {
width: "4",
height: "4",
borderRadius: "l1",
"& svg": {
width: "3",
height: "3"
}
},
label: {
textStyle: "sm"
}
},
md: {
root: {
gap: "3"
},
control: {
width: "5",
height: "5",
borderRadius: "l1",
"& svg": {
width: "3.5",
height: "3.5"
}
},
label: {
textStyle: "md"
}
},
lg: {
root: {
gap: "4"
},
control: {
width: "6",
height: "6",
borderRadius: "l1",
"& svg": {
width: "4",
height: "4"
}
},
label: {
textStyle: "lg"
}
}
}
}
});
// src/theme/recipes/code.ts
var import_dev11 = require("@pandacss/dev");
var code = (0, import_dev11.defineRecipe)({
className: "code",
description: "An code style",
base: {
alignItems: "center",
bg: "bg.subtle",
borderRadius: "l2",
borderWidth: "1px",
color: "fg.default",
display: "inline-flex",
fontFamily: "var(--font-code)",
fontWeight: "medium"
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
height: "5",
px: "0.5",
textStyle: "xs"
},
md: {
height: "6",
px: "1",
textStyle: "sm"
},
lg: {
height: "7",
px: "1.5",
textStyle: "md"
}
}
}
});
// src/theme/recipes/color-picker.ts
var import_react5 = require("@ark-ui/react");
var import_dev12 = require("@pandacss/dev");
var colorPicker = (0, import_dev12.defineSlotRecipe)({
className: "colorPicker",
description: "A color picker style",
slots: import_react5.colorPickerAnatomy.keys(),
base: {
content: {
borderRadius: "l3",
borderWidth: "1px",
boxShadow: "lg",
padding: "4",
maxW: "264px"
},
area: {
height: "36",
borderRadius: "l2",
overflow: "hidden"
},
areaGradient: {
height: "100%"
},
channelSliderTrack: {
height: "2",
borderRadius: "full"
},
channelSliderTrackBackground: {
overflow: "hidden",
borderRadius: "full"
},
swatchGroup: {
display: "grid",
gridTemplateColumns: "repeat(7, 1fr)",
gap: "2",
background: "bg.default"
},
swatch: {
height: "6",
width: "6",
borderRadius: "full",
boxShadow: "0 0 0 1px var(--colors-border-emphasized), 0 0 0 2px var(--colors-bg-default) inset"
},
areaThumb: {
borderRadius: "full",
height: "2.5",
width: "2.5",
boxShadow: "white 0px 0px 0px 2px, black 0px 0px 2px 1px",
outline: "none"
},
channelSliderThumb: {
borderRadius: "full",
height: "2.5",
width: "2.5",
boxShadow: "white 0px 0px 0px 2px, black 0px 0px 2px 1px",
transform: "translate(-50%, -50%)",
zIndex: "1",
outline: "none"
}
}
});
// src/theme/recipes/combobox.ts
var import_react6 = require("@ark-ui/react");
var import_dev13 = require("@pandacss/dev");
var combobox = (0, import_dev13.defineSlotRecipe)({
className: "combobox",
description: "A combobox style",
slots: import_react6.comboboxAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: "column",
gap: "1.5"
},
control: {
position: "relative"
},
trigger: {
position: "absolute!",
right: "0",
bottom: "0",
top: "0"
},
content: {
background: "bg.default",
borderRadius: "l2",
borderWidth: "1px",
boxShadow: "lg",
display: "flex",
flexDirection: "column",
_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"
}
},
option: {
alignItems: "center",
borderRadius: "l1",
cursor: "pointer",
display: "flex",
fontWeight: "medium",
transitionDuration: "fast",
transitionProperty: "background, color",
transitionTimingFunction: "default",
_hover: {
background: "bg.subtle"
},
_highlighted: {
background: "bg.subtle"
}
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
content: { p: "0.5", gap: "1" },
option: { textStyle: "sm", px: "2", height: "9" }
},
md: {
content: { p: "1", gap: "1" },
option: { textStyle: "sm", px: "2", height: "10" },
trigger: { right: "4" }
},
lg: {
content: { p: "1.5", gap: "1" },
option: { textStyle: "md", px: "2", height: "11" }
}
}
}
});
// src/theme/recipes/date-picker.ts
var import_react7 = require("@ark-ui/react");
var import_dev14 = require("@pandacss/dev");
var datePicker = (0, import_dev14.defineSlotRecipe)({
className: "datePicker",
description: "A date picker style",
slots: [...import_react7.datePickerAnatomy.keys()],
base: {
cellTrigger: {
_today: {
_before: {
content: "'\u2212'",
color: "accent.default",
position: "absolute",
marginTop: "6"
}
},
"&[data-in-range]": {
background: "bg.subtle"
},
_selected: {
_before: {
color: "accent.fg"
}
}
},
content: {
background: "bg.default",
borderRadius: "l3",
borderWidth: "1px",
p: "4",
width: "fit-content"
},
grid: {
display: "flex",
flexDirection: "column",
gap: "1",
'&[data-type="day"] [data-part="row"]': {
gridTemplateColumns: "repeat(7, 1fr)"
},
'&[data-type="month"] [data-part="row"]': {
gridTemplateColumns: "repeat(4, 1fr)"
},
'&[data-type="year"] [data-part="row"]': {
gridTemplateColumns: "repeat(4, 1fr)"
}
},
rowGroup: {
display: "flex",
flexDirection: "column",
gap: "1"
},
row: {
display: "grid"
},
rowHeader: {
display: "grid",
gridTemplateColumns: "repeat(7, 1fr)"
},
columnHeader: {
alignItems: "center",
color: "fg.subtle",
display: "inline-flex",
fontWeight: "semibold",
height: "10",
justifyContent: "center",
textStyle: "sm",
width: "10"
}
}
});
// src/theme/recipes/dialog.ts
var import_react8 = require("@ark-ui/react");
var import_dev15 = require("@pandacss/dev");
var dialog = (0, import_dev15.defineSlotRecipe)({
className: "dialog",
description: "A dialog style",
slots: import_react8.dialogAnatomy.keys(),
base: {
backdrop: {
backdropFilter: "blur(4px)",
background: {
// TODO: replace when supported in Panda: bg.canvas/80
base: "rgba(250, 250, 250, 0.8)",
_dark: "rgba(10, 10, 10, 0.8)"
},
inset: "0",
position: "fixed",
zIndex: "overlay",
_open: {
animation: "backdrop-in"
},
_closed: {
animation: "backdrop-out"
}
},
container: {
alignItems: "center",
display: "flex",
inset: "0",
justifyContent: "center",
position: "fixed",
zIndex: "modal"
},
content: {
background: "bg.default",
borderRadius: "l3",
borderWidth: "1px",
boxShadow: "lg",
minW: "sm",
position: "relative",
_open: {
animation: "dialog-in"
},
_closed: {
animation: "dialog-out"
}
},
title: {
fontWeight: "semibold",
textStyle: "lg"
},
description: {
color: "fg.muted",
textStyle: "sm"
}
}
});
// src/theme/recipes/drawer.ts
var import_react9 = require("@ark-ui/react");
var import_dev16 = require("@pandacss/dev");
var drawer = (0, import_dev16.defineSlotRecipe)({
className: "drawer",
description: "A drawer style",
slots: import_react9.dialogAnatomy.keys(),
base: {
backdrop: {
backdropFilter: "blur(4px)",
background: {
// TODO: replace when supported in Panda: bg.canvas/80
base: "rgba(250, 250, 250, 0.8)",
_dark: "rgba(10, 10, 10, 0.8)"
},
inset: "0",
position: "fixed",
zIndex: "overlay",
_open: {
animation: "backdrop-in"
},
_closed: {
animation: "backdrop-out"
}
},
container: {
alignItems: "center",
display: "flex",
top: 0,
bottom: 0,
justifyContent: "center",
position: "fixed",
zIndex: "modal"
},
content: {
background: "bg.default",
boxShadow: "lg",
height: "full",
width: { base: "xs", sm: "sm" },
overflowY: "auto",
position: "relative",
px: {
base: "4",
md: "6"
},
py: "6"
},
title: {
fontWeight: "semibold",
textStyle: "xl"
},
description: {
color: "fg.muted",
textStyle: "sm"
}
},
defaultVariants: {
placement: "right"
},
variants: {
placement: {
left: {
container: {
left: 0
},
content: {
borderRightWidth: "1px",
_open: {
animation: "drawer-in-left"
},
_closed: {
animation: "drawer-out-left"
}
}
},
right: {
container: {
right: 0
},
content: {
borderLeftWidth: "1px",
_open: {
animation: "drawer-in-right"
},
_closed: {
animation: "drawer-out-right"
}
}
}
}
}
});
// src/theme/recipes/editable.ts
var import_react10 = require("@ark-ui/react");
var import_dev17 = require("@pandacss/dev");
var editable = (0, import_dev17.defineSlotRecipe)({
className: "editable",
description: "An editable style",
slots: import_react10.editableAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: "column",
gap: "1.5",
width: "100%"
},
control: {
display: "flex",
gap: "2"
}
}
});
// src/theme/recipes/hover-card.ts
var import_react11 = require("@ark-ui/react");
var import_dev18 = require("@pandacss/dev");
var hoverCard = (0, import_dev18.defineSlotRecipe)({
className: "hoverCard",
description: "A hover card style",
slots: import_react11.hoverCardAnatomy.keys(),
base: {
content: {
"--hover-card-background": "colors.bg.default",
background: "var(--hover-card-background)",
borderRadius: "l3",
borderWidth: "1px",
boxShadow: "lg",
maxW: "80",
p: "4",
position: "relative",
_open: {
animation: "fadeIn 0.25s ease-out"
},
_closed: {
animation: "fadeOut 0.2s ease-out"
}
},
arrow: {
"--arrow-size": "12px",
"--arrow-background": "var(--hover-card-background)"
},
arrowTip: {
borderTopWidth: "1px",
borderLeftWidth: "1px"
}
}
});
// src/theme/recipes/input.ts
var import_dev19 = require("@pandacss/dev");
var input = (0, import_dev19.defineRecipe)({
className: "input",
description: "An input style",
base: {
appearance: "none",
backgroundColor: "bg.default",
borderColor: "border.emphasized",
borderRadius: "l2",
borderWidth: "1px",
outline: 0,
position: "relative",
transitionDuration: "normal",
transitionProperty: "box-shadow, border-color",
transitionTimingFunction: "default",
width: "full",
_disabled: {
opacity: 0.4,
cursor: "not-allowed"
},
_focus: {
borderColor: "border.accent",
boxShadow: "accent"
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
"2xs": { px: "1.5", h: "7", minW: "7", fontSize: "xs" },
xs: { px: "2", h: "8", minW: "8", fontSize: "xs" },
sm: { px: "2.5", h: "9", minW: "9", fontSize: "sm" },
md: { px: "3", h: "10", minW: "10", fontSize: "md" },
lg: { px: "3.5", h: "11", minW: "11", fontSize: "md" },
xl: { px: "4", h: "12", minW: "12", fontSize: "lg" },
"2xl": { px: "2", h: "16", minW: "16", textStyle: "3xl" }
}
}
});
// src/theme/recipes/label.ts
var import_dev20 = require("@pandacss/dev");
var label = (0, import_dev20.defineRecipe)({
className: "label",
description: "A label style",
base: {
color: "fg.emphasized",
fontWeight: "medium"
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
textStyle: "sm"
},
md: {
textStyle: "sm"
},
lg: {
textStyle: "sm"
},
xl: {
textStyle: "md"
}
}
}
});
// src/theme/recipes/link.ts
var import_dev21 = require("@pandacss/dev");
var link = (0, import_dev21.defineRecipe)({
className: "link",
description: "A link style",
base: {
color: "fg.subtle",
cursor: "pointer",
display: "inline-flex",
alignItems: "center",
gap: "2",
transitionDuration: "normal",
transitionProperty: "color, font-weight",
transitionTimingFunction: "default"
},
defaultVariants: {
variant: "text"
},
variants: {
variant: {
text: {
fontWeight: "medium",
color: "fg.default",
textDecoration: "underline"
},
toc: {
fontWeight: "medium",
textStyle: "sm",
_hover: {
color: "fg.muted"
},
_currentPage: {
fontWeight: "semibold",
color: "fg.emphasized",
_hover: {
color: "fg.emphasized"
}
}
},
navbar: {
fontWeight: "semibold",
textStyle: "md",
_hover: {
color: "fg.muted"
},
_currentPage: {
color: "fg.emphasized",
_hover: {
color: "fg.emphasized"
}
}
}
}
}
});
// src/theme/recipes/menu.ts
var import_react12 = require("@ark-ui/react");
var import_dev22 = require("@pandacss/dev");
var itemStyle = {
alignItems: "center",
borderRadius: "l1",
color: "fg.emphasized",
cursor: "pointer",
display: "flex",
fontWeight: "medium",
textStyle: "sm",
transitionDuration: "fast",
transitionProperty: "background, color",
transitionTimingFunction: "default",
_hover: {
color: "fg.default",
background: "bg.subtle"
},
_highlighted: {
color: "fg.default",
background: "bg.subtle"
}
};
var menu = (0, import_dev22.defineSlotRecipe)({
className: "menu",
description: "A menu style",
slots: import_react12.menuAnatomy.keys(),
base: {
itemGroupLabel: {
fontWeight: "semibold",
textStyle: "sm"
},
content: {
background: "bg.default",
borderRadius: "l2",
borderWidth: "1px",
boxShadow: "lg",
_hidden: {
display: "none"
},
display: "flex",
flexDirection: "column",
outline: "none"
},
itemGroup: {
display: "flex",
flexDirection: "column"
},
item: itemStyle,
optionItem: itemStyle,
triggerItem: itemStyle
},
defaultVariants: {
size: "md"
},
variants: {
size: {
xs: {
itemGroup: {
gap: "1"
},
itemGroupLabel: {
py: "1.5",
px: "1.5",
mx: "1"
},
content: {
py: "1",
gap: "1",
minW: "24"
},
item: {
h: "8",
px: "1.5",
mx: "1"
},
optionItem: {
h: "8",
px: "1.5",
mx: "1"
},
triggerItem: {
h: "8",
px: "1.5",
mx: "1.5"
}
},
sm: {
itemGroup: {
gap: "1"
},
itemGroupLabel: {
py: "2",
px: "2",
mx: "1"
},
content: {
py: "1",
gap: "1",
minW: "32"
},
item: {
h: "9",
px: "2",
mx: "1"
},
optionItem: {
h: "9",
px: "2",
mx: "1"
},
triggerItem: {
h: "9",
px: "2",
mx: "1.5"
}
},
md: {
itemGroup: {
gap: "1"
},
itemGroupLabel: {
py: "2.5",
px: "2.5",
mx: "1"
},
content: {
py: "1",
gap: "1",
minW: "44"
},
item: {
h: "10",
px: "2.5",
mx: "1"
},
optionItem: {
h: "10",
px: "2.5",
mx: "1"
},
triggerItem: {
h: "10",
px: "2.5",
mx: "1.5"
}
}
}
}
});
// src/theme/recipes/number-input.ts
var import_react13 = require("@ark-ui/react");
var import_dev23 = require("@pandacss/dev");
var numberInput = (0, import_dev23.defineSlotRecipe)({
className: "numberInput",
description: "A number input style",
slots: import_react13.numberInputAnatomy.keys(),
base: {
root: {
borderColor: "border.emphasized",
borderRadius: "l2",
borderWidth: "1px",
display: "flex",
overflow: "hidden",
width: "full",
transitionDuration: "normal",
transitionProperty: "border-color, box-shadow",
transitionTimingFunction: "default",
_focusWithin: {
borderColor: "border.accent",
boxShadow: "accent"
}
},
control: {
borderLeftWidth: "1px",
borderColor: "border.emphasized",
display: "flex",
flexDirection: "column"
},
input: {
outline: "none",
background: "transparent",
width: "full"
},
decrementTrigger: {
borderRadius: "0"
},
incrementTrigger: {
borderRadius: "0"
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
md: {
root: {
ps: "3",
h: "10",
minW: "10",
fontSize: "md"
}
},
lg: {
root: {
ps: "3.5",
h: "11",
minW: "11",
fontSize: "md"
}
},
xl: {
root: {
ps: "4",
h: "12",
minW: "12",
fontSize: "lg"
}
}
}
}
});
// src/theme/recipes/pagination.ts
var import_react14 = require("@ark-ui/react");
var import_dev24 = require("@pandacss/dev");
var pagination = (0, import_dev24.defineSlotRecipe)({
className: "pagination",
description: "A pagination style",
slots: import_react14.paginationAnatomy.keys(),
base: {
root: {
display: "flex",
justifyContent: "space-between",
gap: "4"
},
list: {
display: "flex",
gap: "2"
},
pageTrigger: {
fontVariantNumeric: "tabular-nums"
},
ellipsis: {
alignItems: "center",
color: "fg.emphasized",
display: "inline-flex",
fontWeight: "semibold",
px: "2"
}
}
});
// src/theme/recipes/pin-input.ts
var import_react15 = require("@ark-ui/react");
var import_dev25 = require("@pandacss/dev");
var pinInput = (0, import_dev25.defineSlotRecipe)({
className: "pinInput",
description: "An pin input style",
slots: import_react15.pinInputAnatomy.keys(),
base: {
control: {
display: "flex",
gap: "2"
}
}
});
// src/theme/recipes/popover.ts
var import_react16 = require("@ark-ui/react");
var import_dev26 = require("@pandacss/dev");
var popover = (0, import_dev26.defineSlotRecipe)({
className: "popover",
description: "A popover style",
slots: import_react16.popoverAnatomy.keys(),
base: {
positioner: {
position: "relative",
zIndex: "popover"
},
content: {
background: "bg.default",
borderRadius: "l3",
borderWidth: "1px",
boxShadow: "lg",
maxWidth: "sm",
zIndex: "1",
p: "4",
_open: {
animation: "fadeIn 0.25s ease-out"
},
_closed: {
animation: "fadeOut 0.2s ease-out"
}
},
title: {
fontWeight: "medium",
textStyle: "sm"
},
description: {
color: "fg.muted",
textStyle: "sm"
},
closeTrigger: {
color: "fg.muted"
},
arrow: {
"--arrow-size": "var(--sizes-3)",
"--arrow-background": "var(--colors-bg-default)"
},
arrowTip: {
borderTopWidth: "1px",
borderLeftWidth: "1px"
}
}
});
// src/theme/recipes/radio-button-group.ts
var import_react17 = require("@ark-ui/react");
var import_dev27 = require("@pandacss/dev");
var radioButtonGroup = (0, import_dev27.defineSlotRecipe)({
className: "radioButtonGroup",
description: "A radio button group style",
slots: import_react17.radioGroupAnatomy.keys(),
base: {
root: {
display: "flex",
flexWrap: "wrap"
},
radio: {
alignItems: "center",
appearance: "none",
borderColor: "border.emphasized",
borderRadius: "l2",
borderWidth: "1px",
color: "fg.emphasized",
cursor: "pointer",
display: "inline-flex",
fontWeight: "semibold",
justifyContent: "center",
outline: "none",
position: "relative",
transitionDuration: "normal",
transitionProperty: "background, border-color, color",
transitionTimingFunction: "default",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
_hover: {
color: "fg.default",
background: "bg.subtle"
},
_checked: {
cursor: "default",
color: "accent.fg",
borderColor: "border.accent",
background: "accent.default",
_hover: {
color: "accent.fg",
background: "accent.default"
}
},
_disabled: {
borderColor: "border.disabled",
color: "fg.disabled",
cursor: "not-allowed",
backgroundImage: "linear-gradient(315deg, transparent 49%, var(--colors-border-disabled) 49%, var(--colors-border-disabled) 51%, transparent 51%)",
_hover: {
background: "transparent",
backgroundImage: "linear-gradient(315deg, transparent 49%, var(--colors-border-disabled) 49%, var(--colors-border-disabled) 51%, transparent 51%)",
borderColor: "border.disabled",
color: "fg.disabled"
}
}
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
root: {
gap: "2"
},
radio: {
h: "9",
w: "9",
textStyle: "sm",
"& svg": {
fontSize: "xl"
}
}
},
md: {
root: {
gap: "3"
},
radio: {
h: "10",
w: "10",
textStyle: "sm",
"& svg": {
fontSize: "xl"
}
}
},
lg: {
root: {
gap: "3"
},
radio: {
h: "11",
w: "11",
textStyle: "md",
"& svg": {
fontSize: "xl"
}
}
},
xl: {
root: {
gap: "3"
},
radio: {
h: "12",
w: "12",
textStyle: "md",
"& svg": {
fontSize: "xl"
}
}
}
}
}
});
// src/theme/recipes/radio-group.ts
var import_react18 = require("@ark-ui/react");
var import_dev28 = require("@pandacss/dev");
var radioGroup = (0, import_dev28.defineSlotRecipe)({
className: "radioGroup",
description: "A radio group style",
slots: import_react18.radioGroupAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: {
_vertical: "column",
_horizontal: "row"
}
},
radioControl: {
background: "transparent",
borderColor: "border.emphasized",
borderRadius: "full",
borderWidth: "1px",
transitionDuration: "normal",
transitionProperty: "background",
transitionTimingFunction: "default",
_hover: {
background: "bg.subtle"
},
_checked: {
background: "accent.default",
borderColor: "border.accent",
outlineColor: "bg.default",
outlineStyle: "solid",
_hover: {
background: "accent.default"
}
}
},
radio: {
alignItems: "center",
cursor: "pointer",
display: "flex"
},
radioLabel: {
color: "fg.emphasized",
fontWeight: "medium"
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
root: {
gap: {
_vertical: "3",
_horizontal: "4"
}
},
radio: {
gap: "2"
},
radioControl: {
width: "4",
height: "4",
_checked: {
outlineWidth: "3px",
outlineOffset: "-4px"
}
},
radioLabel: {
textStyle: "sm"
}
},
md: {
root: {
gap: {
_vertical: "4",
_horizontal: "6"
}
},
radio: {
gap: "3"
},
radioControl: {
width: "5",
height: "5",
_checked: {
outlineWidth: "4px",
outlineOffset: "-5px"
}
},
radioLabel: {
textStyle: "md"
}
},
lg: {
root: {
gap: {
_vertical: "5",
_horizontal: "8"
}
},
radio: {
gap: "4"
},
radioControl: {
width: "6",
height: "6",
_checked: {
outlineWidth: "5px",
outlineOffset: "-6px"
}
},
radioLabel: {
textStyle: "lg"
}
}
}
}
});
// src/theme/recipes/range-slider.ts
var import_react19 = require("@ark-ui/react");
var import_dev29 = require("@pandacss/dev");
var rangeSlider = (0, import_dev29.defineSlotRecipe)({
className: "range-slider",
description: "A range slider style",
slots: import_react19.rangeSliderAnatomy.keys(),
base: {
root: {
width: "full"
},
control: {
position: "relative",
display: "flex",
alignItems: "center"
},
track: {
backgroundColor: "bg.muted",
borderRadius: "l2",
flex: "1"
},
range: {
background: "accent.default",
borderRadius: "l2"
},
thumb: {
background: "bg.default",
borderColor: "border.accent",
borderRadius: "full",
borderWidth: "2px",
boxShadow: "sm",
outline: "none"
},
label: {
color: "fg.emphasized",
fontWeight: "semibold"
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
md: {
control: {
py: "2"
},
range: {
height: "2"
},
track: {
height: "2"
},
thumb: {
height: "6",
width: "6"
},
marker: {
mt: "2",
textStyle: "sm"
},
label: {
textStyle: "sm"
}
}
}
}
});
// src/theme/recipes/rating-group.ts
var import_react20 = require("@ark-ui/react");
var import_dev30 = require("@pandacss/dev");
var ratingGroup = (0, import_dev30.defineSlotRecipe)({
className: "ratingGroup",
description: "A rating group style",
slots: import_react20.ratingGroupAnatomy.keys(),
base: {
control: {
display: "flex"
},
rating: {
cursor: "pointer",
transitionDuration: "normal",
transitionProperty: "color, fill",
transitionTimingFunction: "default",
color: "var(--colors-bg-emphasized)",
fill: "var(--colors-bg-emphasized)",
_highlighted: {
color: "var(--colors-accent-default)",
fill: "var(--colors-accent-default)"
},
_focusVisible: {
outline: "2px solid",
outlineColor: "border.accent"
}
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
control: {
gap: "0"
},
rating: {
"& svg": {
width: "4",
height: "4"
}
}
},
md: {
control: {
gap: "0.5"
},
rating: {
"& svg": {
width: "5",
height: "5"
}
}
},
lg: {
control: {
gap: "0.5"
},
rating: {
"& svg": {
width: "6",
height: "6"
}
}
}
}
}
});
// src/theme/recipes/segment-group.ts
var import_react21 = require("@ark-ui/react");
var import_dev31 = require("@pandacss/dev");
var segmentGroup = (0, import_dev31.defineSlotRecipe)({
className: "segmentGroup",
description: "A segment group style",
slots: import_react21.segmentGroupAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: {
_horizontal: "row",
_vertical: "column"
},
gap: {
_horizontal: "4",
_vertical: "1"
},
borderBottomWidth: {
_horizontal: "1px"
},
borderLeftWidth: {
_vertical: "1px"
}
},
indicator: {
borderBottomWidth: {
_horiz