@park-ui/panda-preset
Version:
Panda CSS Preset for Park UI
2,204 lines (2,170 loc) • 117 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, {
accentColors: () => accentColors,
createPreset: () => createPreset,
grayColors: () => grayColors,
radii: () => radii2
});
module.exports = __toCommonJS(src_exports);
// src/create-preset.ts
var import_dev71 = require("@pandacss/dev");
// src/colors/red.ts
var import_dev = require("@pandacss/dev");
var tokens = import_dev.defineTokens.colors({
light: {
"1": { value: "#fffcfc" },
"2": { value: "#fff7f7" },
"3": { value: "#feebec" },
"4": { value: "#ffdbdc" },
"5": { value: "#ffcdce" },
"6": { value: "#fdbdbe" },
"7": { value: "#f4a9aa" },
"8": { value: "#eb8e90" },
"9": { value: "#e5484d" },
"10": { value: "#dc3e42" },
"11": { value: "#ce2c31" },
"12": { value: "#641723" },
a1: { value: "#ff000003" },
a2: { value: "#ff000008" },
a3: { value: "#f3000d14" },
a4: { value: "#ff000824" },
a5: { value: "#ff000632" },
a6: { value: "#f8000442" },
a7: { value: "#df000356" },
a8: { value: "#d2000571" },
a9: { value: "#db0007b7" },
a10: { value: "#d10005c1" },
a11: { value: "#c40006d3" },
a12: { value: "#55000de8" }
},
dark: {
"1": { value: "#191111" },
"2": { value: "#201314" },
"3": { value: "#3b1219" },
"4": { value: "#500f1c" },
"5": { value: "#611623" },
"6": { value: "#72232d" },
"7": { value: "#8c333a" },
"8": { value: "#b54548" },
"9": { value: "#e5484d" },
"10": { value: "#ec5d5e" },
"11": { value: "#ff9592" },
"12": { value: "#ffd1d9" },
a1: { value: "#f4121209" },
a2: { value: "#f22f3e11" },
a3: { value: "#ff173f2d" },
a4: { value: "#fe0a3b44" },
a5: { value: "#ff204756" },
a6: { value: "#ff3e5668" },
a7: { value: "#ff536184" },
a8: { value: "#ff5d61b0" },
a9: { value: "#fe4e54e4" },
a10: { value: "#ff6465eb" },
a11: { value: "#ff9592" },
a12: { value: "#ffd1d9" }
}
});
var semanticTokens = import_dev.defineSemanticTokens.colors({
"1": { value: { _light: "{colors.red.light.1}", _dark: "{colors.red.dark.1}" } },
"2": { value: { _light: "{colors.red.light.2}", _dark: "{colors.red.dark.2}" } },
"3": { value: { _light: "{colors.red.light.3}", _dark: "{colors.red.dark.3}" } },
"4": { value: { _light: "{colors.red.light.4}", _dark: "{colors.red.dark.4}" } },
"5": { value: { _light: "{colors.red.light.5}", _dark: "{colors.red.dark.5}" } },
"6": { value: { _light: "{colors.red.light.6}", _dark: "{colors.red.dark.6}" } },
"7": { value: { _light: "{colors.red.light.7}", _dark: "{colors.red.dark.7}" } },
"8": { value: { _light: "{colors.red.light.8}", _dark: "{colors.red.dark.8}" } },
"9": { value: { _light: "{colors.red.light.9}", _dark: "{colors.red.dark.9}" } },
"10": { value: { _light: "{colors.red.light.10}", _dark: "{colors.red.dark.10}" } },
"11": { value: { _light: "{colors.red.light.11}", _dark: "{colors.red.dark.11}" } },
"12": { value: { _light: "{colors.red.light.12}", _dark: "{colors.red.dark.12}" } },
a1: { value: { _light: "{colors.red.light.a1}", _dark: "{colors.red.dark.a1}" } },
a2: { value: { _light: "{colors.red.light.a2}", _dark: "{colors.red.dark.a2}" } },
a3: { value: { _light: "{colors.red.light.a3}", _dark: "{colors.red.dark.a3}" } },
a4: { value: { _light: "{colors.red.light.a4}", _dark: "{colors.red.dark.a4}" } },
a5: { value: { _light: "{colors.red.light.a5}", _dark: "{colors.red.dark.a5}" } },
a6: { value: { _light: "{colors.red.light.a6}", _dark: "{colors.red.dark.a6}" } },
a7: { value: { _light: "{colors.red.light.a7}", _dark: "{colors.red.dark.a7}" } },
a8: { value: { _light: "{colors.red.light.a8}", _dark: "{colors.red.dark.a8}" } },
a9: { value: { _light: "{colors.red.light.a9}", _dark: "{colors.red.dark.a9}" } },
a10: { value: { _light: "{colors.red.light.a10}", _dark: "{colors.red.dark.a10}" } },
a11: { value: { _light: "{colors.red.light.a11}", _dark: "{colors.red.dark.a11}" } },
a12: { value: { _light: "{colors.red.light.a12}", _dark: "{colors.red.dark.a12}" } },
default: { value: { _light: "{colors.red.light.9}", _dark: "{colors.red.dark.9}" } },
emphasized: { value: { _light: "{colors.red.light.10}", _dark: "{colors.red.dark.10}" } },
fg: { value: { _light: "white", _dark: "white" } },
text: { value: { _light: "{colors.red.light.a11}", _dark: "{colors.red.dark.a11}" } }
});
var red_default = {
name: "red",
tokens,
semanticTokens
};
// src/theme/breakpoints.ts
var breakpoints = {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px"
};
// src/theme/conditions.ts
var conditions = {
extend: {
collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
current: "&:is([data-current])",
hidden: "&:is([hidden])",
hover: ["@media (hover: hover) and (pointer: fine)", "&:is(:hover, [data-hover])"],
indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])",
off: '&:is([data-state="off"])',
on: '&:is([data-state="on"])',
today: "&:is([data-today])",
underValue: '&:is([data-state="under-value"])',
dark: ".dark &",
light: ":root &, .light &",
invalid: "&:is([aria-invalid])"
}
};
// src/theme/global-css.ts
var import_dev2 = require("@pandacss/dev");
var globalCss = (0, import_dev2.defineGlobalStyles)({
body: {
background: "bg.canvas",
color: "fg.default",
_dark: {
colorScheme: "dark"
}
},
"*, *::before, *::after": {
borderColor: "border.subtle",
borderStyle: "solid",
boxSizing: "border-box"
},
"*::placeholder": {
opacity: 1,
color: "fg.subtle"
},
"*::selection": {
bg: "accent.a4"
}
});
// src/theme/keyframes.ts
var import_dev3 = require("@pandacss/dev");
var keyframes = (0, import_dev3.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%)" }
},
"collapse-in": {
"0%": { height: "0" },
"100%": { height: "var(--height)" }
},
"collapse-out": {
"0%": { height: "var(--height)" },
"100%": { height: "0" }
},
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)" }
},
"skeleton-pulse": {
"50%": { opacity: "0.5" }
},
spin: {
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" }
}
});
// src/theme/recipes/accordion.ts
var import_anatomy = require("@ark-ui/anatomy");
var import_dev4 = require("@pandacss/dev");
var accordion = (0, import_dev4.defineSlotRecipe)({
className: "accordion",
slots: import_anatomy.accordionAnatomy.keys(),
base: {
root: {
divideY: "1px",
width: "full",
borderTopWidth: "1px",
borderBottomWidth: "1px"
},
itemTrigger: {
alignItems: "center",
color: "fg.default",
cursor: "pointer",
display: "flex",
fontWeight: "semibold",
gap: "3",
justifyContent: "space-between",
textStyle: "lg",
textAlign: "left",
width: "full",
_disabled: {
color: "fg.disabled",
cursor: "not-allowed"
}
},
itemIndicator: {
color: "fg.muted",
transformOrigin: "center",
transitionDuration: "normal",
transitionProperty: "transform",
transitionTimingFunction: "default",
_open: {
transform: "rotate(-180deg)"
}
},
itemContent: {
color: "fg.muted",
overflow: "hidden",
transitionProperty: "padding-bottom",
transitionDuration: "normal",
transitionTimingFunction: "default",
_open: {
animation: "collapse-in"
},
_closed: {
animation: "collapse-out"
}
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
md: {
itemTrigger: {
py: "4"
},
itemContent: {
pb: "6",
pr: "8",
_closed: {
pb: "0"
}
}
}
}
}
});
// src/theme/recipes/alert.ts
var import_dev5 = require("@pandacss/dev");
var alert = (0, import_dev5.defineSlotRecipe)({
className: "alert",
slots: ["root", "content", "description", "icon", "title"],
base: {
root: {
background: "bg.default",
borderWidth: "1px",
borderRadius: "l3",
display: "flex",
gap: "3",
p: "4",
width: "full"
},
content: {
display: "flex",
flexDirection: "column",
gap: "1"
},
description: {
color: "fg.muted",
textStyle: "sm"
},
icon: {
color: "fg.default",
flexShrink: "0",
width: "5",
height: "5"
},
title: {
color: "fg.default",
fontWeight: "semibold",
textStyle: "sm"
}
}
});
// src/theme/recipes/avatar.ts
var import_anatomy2 = require("@ark-ui/anatomy");
var import_dev6 = require("@pandacss/dev");
var avatar = (0, import_dev6.defineSlotRecipe)({
className: "avatar",
slots: import_anatomy2.avatarAnatomy.keys(),
base: {
root: {
borderRadius: "full",
flexShrink: 0,
overflow: "hidden"
},
fallback: {
alignItems: "center",
background: "bg.subtle",
borderRadius: "full",
borderWidth: "1px",
color: "fg.default",
display: "flex",
fontWeight: "semibold",
height: "inherit",
justifyContent: "center",
_hidden: {
display: "none"
}
},
image: {
objectFit: "cover"
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
xs: {
root: {
height: "8",
width: "8"
},
image: {
height: "8",
width: "8"
},
fallback: {
textStyle: "xs",
"& svg": {
width: "4",
height: "4"
}
}
},
sm: {
root: {
height: "9",
width: "9"
},
image: {
height: "9",
width: "9"
},
fallback: {
textStyle: "sm",
"& svg": {
width: "4",
height: "4"
}
}
},
md: {
root: {
height: "10",
width: "10"
},
image: {
height: "10",
width: "10"
},
fallback: {
textStyle: "md",
"& svg": {
width: "5",
height: "5"
}
}
},
lg: {
root: {
height: "11",
width: "11"
},
image: {
height: "11",
width: "11"
},
fallback: {
textStyle: "lg",
"& svg": {
width: "6",
height: "6"
}
}
},
xl: {
root: {
height: "12",
width: "12"
},
image: {
height: "12",
width: "12"
},
fallback: {
textStyle: "xl",
"& svg": {
width: "7",
height: "7"
}
}
},
"2xl": {
root: {
height: "16",
width: "16"
},
image: {
height: "16",
width: "16"
},
fallback: {
textStyle: "2xl",
"& svg": {
width: "8",
height: "8"
}
}
}
}
}
});
// src/theme/recipes/badge.ts
var import_dev7 = require("@pandacss/dev");
var badge = (0, import_dev7.defineRecipe)({
className: "badge",
base: {
alignItems: "center",
borderRadius: "full",
display: "inline-flex",
fontWeight: "medium",
userSelect: "none",
whiteSpace: "nowrap"
},
defaultVariants: {
variant: "subtle",
size: "md"
},
variants: {
variant: {
solid: {
background: "colorPalette.default",
color: "colorPalette.fg"
},
subtle: {
background: "bg.subtle",
borderColor: "border.subtle",
borderWidth: "1px",
color: "fg.default",
"& svg": {
color: "fg.muted"
}
},
outline: {
color: "fg.default",
borderWidth: "2px",
borderColor: "border.default"
}
},
size: {
sm: {
textStyle: "xs",
px: "2",
h: "5",
gap: "1",
"& svg": {
width: "3",
height: "3"
}
},
md: {
textStyle: "xs",
px: "2.5",
h: "6",
gap: "1.5",
"& svg": {
width: "4",
height: "4"
}
},
lg: {
textStyle: "sm",
px: "3",
h: "7",
gap: "1.5",
"& svg": {
width: "4",
height: "4"
}
}
}
}
});
// src/theme/recipes/button.ts
var import_dev8 = require("@pandacss/dev");
var button = (0, import_dev8.defineRecipe)({
className: "button",
jsx: ["Button", "IconButton", "SubmitButton"],
base: {
alignItems: "center",
appearance: "none",
borderRadius: "l2",
cursor: "pointer",
display: "inline-flex",
flexShrink: "0",
fontWeight: "semibold",
isolation: "isolate",
minWidth: "0",
justifyContent: "center",
outline: "none",
position: "relative",
transitionDuration: "normal",
transitionProperty: "background, border-color, color, box-shadow",
transitionTimingFunction: "default",
userSelect: "none",
verticalAlign: "middle",
whiteSpace: "nowrap",
_hidden: {
display: "none"
},
"& :where(svg)": {
fontSize: "1.1em",
width: "1.1em",
height: "1.1em"
}
},
defaultVariants: {
variant: "solid",
size: "md"
},
variants: {
variant: {
solid: {
background: "colorPalette.default",
color: "colorPalette.fg",
_hover: {
background: "colorPalette.emphasized"
},
_focusVisible: {
outline: "2px solid",
outlineColor: "colorPalette.default",
outlineOffset: "2px"
},
_disabled: {
color: "fg.disabled",
background: "bg.disabled",
cursor: "not-allowed",
_hover: {
color: "fg.disabled",
background: "bg.disabled"
}
}
},
outline: {
borderWidth: "1px",
borderColor: "colorPalette.a7",
color: "colorPalette.text",
colorPalette: "gray",
_hover: {
background: "colorPalette.a2"
},
_disabled: {
borderColor: "border.disabled",
color: "fg.disabled",
cursor: "not-allowed",
_hover: {
background: "transparent",
borderColor: "border.disabled",
color: "fg.disabled"
}
},
_focusVisible: {
outline: "2px solid",
outlineColor: "colorPalette.default",
outlineOffset: "2px"
},
_selected: {
background: "accent.default",
borderColor: "accent.default",
color: "accent.fg",
_hover: {
background: "accent.emphasized",
borderColor: "accent.emphasized"
}
}
},
ghost: {
color: "colorPalette.text",
colorPalette: "gray",
_hover: {
background: "colorPalette.a3"
},
_selected: {
background: "colorPalette.a3"
},
_disabled: {
color: "fg.disabled",
cursor: "not-allowed",
_hover: {
background: "transparent",
color: "fg.disabled"
}
},
_focusVisible: {
outline: "2px solid",
outlineColor: "colorPalette.default",
outlineOffset: "2px"
}
},
link: {
verticalAlign: "baseline",
_disabled: {
color: "border.disabled",
cursor: "not-allowed",
_hover: {
color: "border.disabled"
}
},
height: "auto!",
px: "0!",
minW: "0!"
},
subtle: {
background: "colorPalette.a3",
color: "colorPalette.text",
colorPalette: "gray",
_hover: {
background: "colorPalette.a4"
},
_focusVisible: {
outline: "2px solid",
outlineColor: "colorPalette.default",
outlineOffset: "2px"
},
_disabled: {
background: "bg.disabled",
color: "fg.disabled",
cursor: "not-allowed",
_hover: {
background: "bg.disabled",
color: "fg.disabled"
}
}
}
},
size: {
xs: {
h: "8",
minW: "8",
textStyle: "xs",
px: "3",
gap: "2"
},
sm: {
h: "9",
minW: "9",
textStyle: "sm",
px: "3.5",
gap: "2"
},
md: {
h: "10",
minW: "10",
textStyle: "sm",
px: "4",
gap: "2"
},
lg: {
h: "11",
minW: "11",
textStyle: "md",
px: "4.5",
gap: "2"
},
xl: {
h: "12",
minW: "12",
textStyle: "md",
px: "5",
gap: "2.5"
},
"2xl": {
h: "16",
minW: "16",
textStyle: "lg",
px: "7",
gap: "3"
}
}
}
});
// src/theme/recipes/card.ts
var import_dev9 = require("@pandacss/dev");
var card = (0, import_dev9.defineSlotRecipe)({
className: "card",
slots: ["root", "header", "body", "footer", "title", "description"],
base: {
root: {
bg: "bg.default",
borderRadius: "l3",
boxShadow: "lg",
display: "flex",
flexDirection: "column",
overflow: "hidden",
position: "relative"
},
header: {
display: "flex",
flexDirection: "column",
gap: "1",
p: "6"
},
body: {
display: "flex",
flex: "1",
flexDirection: "column",
pb: "6",
px: "6"
},
footer: {
display: "flex",
justifyContent: "flex-end",
pb: "6",
pt: "2",
px: "6"
},
title: {
color: "fg.default",
textStyle: "lg",
fontWeight: "semibold"
},
description: {
color: "fg.muted",
textStyle: "sm"
}
}
});
// src/theme/recipes/carousel.ts
var import_anatomy3 = require("@ark-ui/anatomy");
var import_dev10 = require("@pandacss/dev");
var carousel = (0, import_dev10.defineSlotRecipe)({
className: "carousel",
slots: import_anatomy3.carouselAnatomy.keys(),
base: {
viewport: {
overflowX: "hidden",
position: "relative",
borderRadius: "l2"
},
control: {
alignItems: "center",
background: { _light: "gray.dark.a12", _dark: "gray.light.a12" },
borderRadius: "l2",
bottom: "4",
display: "flex",
left: "50%",
position: "absolute",
transform: "translateX(-50%)"
},
indicatorGroup: {
display: "flex"
},
indicator: {
borderRadius: "full",
background: "gray.6",
cursor: "pointer",
_current: {
background: "colorPalette.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_anatomy4 = require("@ark-ui/anatomy");
var import_dev11 = require("@pandacss/dev");
var checkbox = (0, import_dev11.defineSlotRecipe)({
className: "checkbox",
slots: import_anatomy4.checkboxAnatomy.keys(),
base: {
root: {
alignItems: "center",
display: "flex"
},
label: {
color: "fg.default",
fontWeight: "medium"
},
control: {
alignItems: "center",
borderColor: "border.default",
borderWidth: "1px",
color: "colorPalette.fg",
cursor: "pointer",
display: "flex",
justifyContent: "center",
transitionDuration: "normal",
transitionProperty: "border-color, background",
transitionTimingFunction: "default",
_hover: {
background: "bg.subtle"
},
_checked: {
background: "colorPalette.default",
borderColor: "colorPalette.default",
_hover: {
background: "colorPalette.default"
}
},
_indeterminate: {
background: "colorPalette.default",
borderColor: "colorPalette.default",
_hover: {
background: "colorPalette.default"
}
},
"&:has(+ :focus-visible)": {
outlineOffset: "2px",
outline: "2px solid",
outlineColor: "border.outline",
_checked: {
outlineColor: "colorPalette.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/clipboard.ts
var import_anatomy5 = require("@ark-ui/anatomy");
var import_dev12 = require("@pandacss/dev");
var clipboard = (0, import_dev12.defineSlotRecipe)({
className: "clipboard",
slots: import_anatomy5.clipboardAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: "column",
gap: "1.5"
},
control: {
display: "flex",
gap: "3"
}
}
});
// src/theme/recipes/code.ts
var import_dev13 = require("@pandacss/dev");
var code = (0, import_dev13.defineRecipe)({
className: "code",
base: {
alignItems: "center",
bg: "bg.subtle",
borderRadius: "l2",
color: "fg.default",
display: "inline-flex",
fontWeight: "medium!",
fontFamily: "var(--fonts-code)",
whiteSpace: "pre"
},
defaultVariants: {
size: "md",
variant: "outline"
},
variants: {
variant: {
outline: {
borderWidth: "1px"
},
ghost: {}
},
size: {
sm: {
minHeight: "5",
px: "0.5",
textStyle: "xs"
},
md: {
minHeight: "6",
textStyle: "sm",
px: "1",
py: "1px"
},
lg: {
minHeight: "7",
px: "1.5",
py: "1px",
textStyle: "md"
}
}
}
});
// src/theme/recipes/collapsible.ts
var import_anatomy6 = require("@ark-ui/anatomy");
var import_dev14 = require("@pandacss/dev");
var collapsible = (0, import_dev14.defineSlotRecipe)({
className: "collapsible",
slots: import_anatomy6.collapsibleAnatomy.keys(),
base: {
root: {
alignItems: "flex-start",
display: "flex",
flexDirection: "column",
width: "full"
},
content: {
overflow: "hidden",
width: "full",
_open: {
animation: "collapse-in"
},
_closed: {
animation: "collapse-out"
}
}
}
});
// src/theme/recipes/color-picker.ts
var import_anatomy7 = require("@ark-ui/anatomy");
var import_dev15 = require("@pandacss/dev");
var colorPicker = (0, import_dev15.defineSlotRecipe)({
className: "colorPicker",
slots: import_anatomy7.colorPickerAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: "column",
gap: "1.5"
},
label: {
color: "fg.default",
fontWeight: "medium",
textStyle: "sm"
},
control: {
display: "flex",
flexDirection: "row",
gap: "2"
},
content: {
background: "bg.default",
borderRadius: "l3",
boxShadow: "lg",
display: "flex",
flexDirection: "column",
maxWidth: "sm",
p: "4",
zIndex: "dropdown",
_open: {
animation: "fadeIn 0.25s ease-out"
},
_closed: {
animation: "fadeOut 0.2s ease-out"
},
_hidden: {
display: "none"
}
},
area: {
height: "36",
borderRadius: "l2",
overflow: "hidden"
},
areaThumb: {
borderRadius: "full",
height: "2.5",
width: "2.5",
boxShadow: "white 0px 0px 0px 2px, black 0px 0px 2px 1px",
outline: "none"
},
areaBackground: {
height: "full"
},
channelSlider: {
borderRadius: "l2"
},
channelSliderTrack: {
height: "3",
borderRadius: "l2"
},
swatchGroup: {
display: "grid",
gridTemplateColumns: "repeat(7, 1fr)",
gap: "2",
background: "bg.default"
},
swatch: {
height: "6",
width: "6",
borderRadius: "l2",
boxShadow: "0 0 0 1px var(--colors-border-emphasized), 0 0 0 2px var(--colors-bg-default) inset"
},
channelSliderThumb: {
borderRadius: "full",
height: "2.5",
width: "2.5",
boxShadow: "white 0px 0px 0px 2px, black 0px 0px 2px 1px",
transform: "translate(-50%, -50%)",
outline: "none"
},
transparencyGrid: {
borderRadius: "l2"
}
}
});
// src/theme/recipes/combobox.ts
var import_anatomy8 = require("@ark-ui/anatomy");
var import_dev16 = require("@pandacss/dev");
var combobox = (0, import_dev16.defineSlotRecipe)({
className: "combobox",
slots: import_anatomy8.comboboxAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: "column",
gap: "1.5",
width: "full"
},
control: {
position: "relative"
},
label: {
color: "fg.default",
fontWeight: "medium"
},
trigger: {
bottom: "0",
color: "fg.muted",
position: "absolute",
right: "0",
top: "0"
},
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.muted"
},
_highlighted: {
background: "bg.muted"
},
_disabled: {
color: "fg.disabled",
cursor: "not-allowed",
_hover: {
background: "transparent"
}
}
},
itemGroupLabel: {
fontWeight: "semibold",
textStyle: "sm"
},
itemIndicator: {
color: "colorPalette.default"
}
},
defaultVariants: {
size: "md"
},
variants: {
size: {
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: { right: "2.5" }
},
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: { right: "3" }
},
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: { right: "3.5" }
}
}
}
});
// src/theme/recipes/date-picker.ts
var import_anatomy9 = require("@ark-ui/anatomy");
var import_dev17 = require("@pandacss/dev");
var datePicker = (0, import_dev17.defineSlotRecipe)({
className: "datePicker",
slots: [...import_anatomy9.datePickerAnatomy.keys()],
base: {
root: {
display: "flex",
flexDirection: "column",
gap: "1.5"
},
content: {
background: "bg.default",
borderRadius: "l3",
boxShadow: "lg",
display: "flex",
flexDirection: "column",
gap: "3",
p: "4",
width: "344px",
zIndex: "dropdown",
_open: {
animation: "fadeIn 0.25s ease-out"
},
_closed: {
animation: "fadeOut 0.2s ease-out"
},
_hidden: {
display: "none"
}
},
control: {
display: "flex",
flexDirection: "row",
gap: "2"
},
label: {
color: "fg.default",
fontWeight: "medium",
textStyle: "sm"
},
tableHeader: {
color: "fg.muted",
fontWeight: "semibold",
height: "10",
textStyle: "sm"
},
viewControl: {
display: "flex",
gap: "2",
justifyContent: "space-between"
},
table: {
width: "full",
borderCollapse: "separate",
borderSpacing: "1",
m: "-1"
},
tableCell: {
textAlign: "center"
},
tableCellTrigger: {
width: "100%",
_today: {
_before: {
content: "'\u2212'",
color: "colorPalette.default",
position: "absolute",
marginTop: "6"
}
},
"&[data-in-range]": {
background: "bg.muted"
},
_selected: {
_before: {
color: "colorPalette.fg"
}
}
},
view: {
display: "flex",
flexDirection: "column",
gap: "3",
_hidden: {
display: "none"
}
}
}
});
// src/theme/recipes/dialog.ts
var import_anatomy10 = require("@ark-ui/anatomy");
var import_dev18 = require("@pandacss/dev");
var dialog = (0, import_dev18.defineSlotRecipe)({
className: "dialog",
slots: import_anatomy10.dialogAnatomy.keys(),
base: {
backdrop: {
backdropFilter: "blur(4px)",
background: {
_light: "white.a10",
_dark: "black.a10"
},
height: "100vh",
left: "0",
position: "fixed",
top: "0",
width: "100vw",
zIndex: "overlay",
_open: {
animation: "backdrop-in"
},
_closed: {
animation: "backdrop-out"
}
},
positioner: {
alignItems: "center",
display: "flex",
justifyContent: "center",
left: "0",
overflow: "auto",
position: "fixed",
top: "0",
width: "100vw",
height: "100dvh",
zIndex: "modal"
},
content: {
background: "bg.default",
borderRadius: "l3",
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_anatomy11 = require("@ark-ui/anatomy");
var import_dev19 = require("@pandacss/dev");
var anatomy = import_anatomy11.dialogAnatomy.extendWith("header", "body", "footer");
var drawer = (0, import_dev19.defineSlotRecipe)({
className: "drawer",
slots: [...anatomy.keys()],
base: {
backdrop: {
backdropFilter: "blur(4px)",
background: {
_light: "white.a10",
_dark: "black.a10"
},
height: "100vh",
left: "0",
position: "fixed",
top: "0",
width: "100vw",
zIndex: "overlay",
_open: {
animation: "backdrop-in"
},
_closed: {
animation: "backdrop-out"
}
},
positioner: {
alignItems: "center",
display: "flex",
height: "100dvh",
justifyContent: "center",
position: "fixed",
top: 0,
width: { base: "100vw", sm: "sm" },
zIndex: "modal"
},
content: {
background: "bg.default",
boxShadow: "lg",
display: "grid",
divideY: "1px",
gridTemplateColumns: "1fr",
gridTemplateRows: "auto 1fr auto",
gridTemplateAreas: `
'header'
'body'
'footer'
`,
height: "full",
width: "full",
_hidden: {
display: "none"
}
},
header: {
display: "flex",
flexDirection: "column",
gap: "1",
gridArea: "header",
pt: { base: "4", md: "6" },
pb: "4",
px: { base: "4", md: "6" }
},
body: {
display: "flex",
flexDirection: "column",
gridArea: "body",
overflow: "auto",
p: { base: "4", md: "6" }
},
footer: {
display: "flex",
gridArea: "footer",
justifyContent: "flex-end",
py: "4",
px: { base: "4", md: "6" }
},
title: {
color: "fg.default",
fontWeight: "semibold",
textStyle: "xl"
},
description: {
color: "fg.muted",
textStyle: "sm"
}
},
defaultVariants: {
variant: "right"
},
variants: {
variant: {
left: {
positioner: {
left: 0
},
content: {
_open: {
animation: "drawer-in-left"
},
_closed: {
animation: "drawer-out-left"
}
}
},
right: {
positioner: {
right: 0
},
content: {
_open: {
animation: "drawer-in-right"
},
_closed: {
animation: "drawer-out-right"
}
}
}
}
}
});
// src/theme/recipes/editable.ts
var import_anatomy12 = require("@ark-ui/anatomy");
var import_dev20 = require("@pandacss/dev");
var editable = (0, import_dev20.defineSlotRecipe)({
className: "editable",
slots: import_anatomy12.editableAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: "column",
gap: "1.5",
width: "100%"
},
control: {
display: "flex",
gap: "2"
}
}
});
// src/theme/recipes/field.ts
var import_anatomy13 = require("@ark-ui/anatomy");
var import_dev21 = require("@pandacss/dev");
var field = (0, import_dev21.defineSlotRecipe)({
className: "field",
slots: import_anatomy13.fieldAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: "column",
gap: "1.5"
},
label: {
color: "fg.default",
fontWeight: "medium",
textStyle: "sm",
_disabled: {
color: "fg.disabled"
}
},
helperText: {
color: "fg.muted",
textStyle: "sm",
_disabled: {
color: "fg.disabled"
}
},
errorText: {
alignItems: "center",
color: "fg.error",
display: "inline-flex",
gap: "2",
textStyle: "sm",
_disabled: {
color: "fg.disabled"
}
}
}
});
// src/theme/recipes/fieldset.ts
var import_anatomy14 = require("@ark-ui/anatomy");
var import_dev22 = require("@pandacss/dev");
var fieldset = (0, import_dev22.defineSlotRecipe)({
className: "fieldset",
slots: [...import_anatomy14.fieldsetAnatomy.keys(), "control"],
base: {
root: {
display: "grid",
borderTopWidth: "1px",
py: "6",
columnGap: "8",
rowGap: "1.5",
gridTemplateAreas: {
base: `
"legend legend"
"helperText helperText"
"control control"
"errorText errorText"
`,
md: `
"legend control"
"helperText control"
"errorText errorText"`
},
gridTemplateRows: "auto 1fr",
gridTemplateColumns: "1fr auto",
width: "full"
},
control: {
gridArea: "control",
display: "grid",
gap: "4"
},
legend: {
color: "fg.default",
fontWeight: "medium",
gridArea: "legend",
textStyle: "sm",
float: "left",
"+ *": {
clear: "both"
},
_disabled: {
color: "fg.disabled"
}
},
helperText: {
color: "fg.muted",
gridArea: "helperText",
textStyle: "sm",
_disabled: {
color: "fg.disabled"
}
},
errorText: {
alignItems: "center",
color: "fg.error",
display: "inline-flex",
gap: "2",
gridArea: "errorText",
mt: "4",
textStyle: "sm",
_disabled: {
color: "fg.disabled"
}
}
}
});
// src/theme/recipes/file-upload.ts
var import_anatomy15 = require("@ark-ui/anatomy");
var import_dev23 = require("@pandacss/dev");
var fileUpload = (0, import_dev23.defineSlotRecipe)({
className: "fileUpload",
slots: import_anatomy15.fileUploadAnatomy.keys(),
base: {
root: {
display: "flex",
flexDirection: "column",
gap: "4",
width: "100%"
},
label: {
fontWeight: "medium",
textStyle: "sm"
},
dropzone: {
alignItems: "center",
background: "bg.default",
borderRadius: "l3",
borderWidth: "1px",
display: "flex",
flexDirection: "column",
gap: "3",
justifyContent: "center",
minHeight: "xs",
px: "6",
py: "4"
},
item: {
animation: "fadeIn 0.25s ease-out",
background: "bg.default",
borderRadius: "l3",
borderWidth: "1px",
columnGap: "3",
display: "grid",
gridTemplateColumns: "auto 1fr auto",
gridTemplateAreas: `
"preview name delete"
"preview size delete"
`,
p: "4"
},
itemGroup: {
display: "flex",
flexDirection: "column",
gap: "3"
},
itemName: {
color: "fg.default",
fontWeight: "medium",
gridArea: "name",
textStyle: "sm"
},
itemSizeText: {
color: "fg.muted",
gridArea: "size",
textStyle: "sm"
},
itemDeleteTrigger: {
alignSelf: "flex-start",
gridArea: "delete"
},
itemPreview: {
gridArea: "preview"
},
itemPreviewImage: {
aspectRatio: "1",
height: "10",
objectFit: "scale-down",
width: "10"
}
}
});
// src/theme/recipes/form-label.ts
var import_dev24 = require("@pandacss/dev");
var formLabel = (0, import_dev24.defineRecipe)({
className: "formLabel",
base: {
color: "fg.default",
fontWeight: "medium"
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
textStyle: "sm"
},
md: {
textStyle: "sm"
},
lg: {
textStyle: "sm"
},
xl: {
textStyle: "md"
}
}
}
});
// src/theme/recipes/hover-card.ts
var import_anatomy16 = require("@ark-ui/anatomy");
var import_dev25 = require("@pandacss/dev");
var hoverCard = (0, import_dev25.defineSlotRecipe)({
className: "hoverCard",
slots: import_anatomy16.hoverCardAnatomy.keys(),
base: {
content: {
"--hover-card-background": "colors.bg.default",
background: "var(--hover-card-background)",
borderRadius: "l3",
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/icon.ts
var import_dev26 = require("@pandacss/dev");
var icon = (0, import_dev26.defineRecipe)({
className: "icon",
base: {
color: "currentcolor",
display: "inline-block",
flexShrink: "0",
verticalAlign: "middle",
lineHeight: "1em"
},
defaultVariants: {
size: "md"
},
variants: {
size: {
xs: {
w: "3",
h: "3"
},
sm: {
w: "4",
h: "4"
},
md: {
w: "5",
h: "5"
},
lg: {
w: "6",
h: "6"
},
xl: {
w: "7",
h: "7"
},
"2xl": {
w: "8",
h: "8"
}
}
}
});
// src/theme/recipes/input.ts
var import_dev27 = require("@pandacss/dev");
var input = (0, import_dev27.defineRecipe)({
className: "input",
jsx: ["Input", "Field.Input"],
base: {
appearance: "none",
background: "none",
borderColor: "border.default",
borderRadius: "l2",
borderWidth: "1px",
color: "fg.default",
outline: 0,
position: "relative",
transitionDuration: "normal",
transitionProperty: "box-shadow, border-color",
transitionTimingFunction: "default",
width: "full",
_disabled: {
opacity: 0.4,
cursor: "not-allowed"
},
_focus: {
borderColor: "colorPalette.default",
boxShadow: "0 0 0 1px var(--colors-color-palette-default)"
},
_invalid: {
borderColor: "fg.error",
_focus: {
borderColor: "fg.error",
boxShadow: "0 0 0 1px var(--colors-border-error)"
}
}
},
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: "4.5", h: "16", minW: "16", textStyle: "3xl" }
}
}
});
// src/theme/recipes/kbd.ts
var import_dev28 = require("@pandacss/dev");
var kbd = (0, import_dev28.defineRecipe)({
className: "kbd",
base: {
alignItems: "center",
bg: "bg.subtle",
borderRadius: "l2",
boxShadow: "0 -2px 0 0 inset var(--colors-border-muted), 0 0 0 1px inset var(--colors-border-muted)",
color: "fg.default",
display: "inline-flex",
fontFamily: "var(--fonts-code)",
fontWeight: "medium",
whiteSpace: "pre"
},
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: {
minHeight: "5",
px: "0.5",
textStyle: "xs"
},
md: {
minHeight: "6",
textStyle: "sm",
px: "1",
py: "1px"
},
lg: {
minHeight: "7",
px: "1.5",
py: "1px",
textStyle: "md"
}
}
}
});
// src/theme/recipes/link.ts
var import_dev29 = require("@pandacss/dev");
var link = (0, import_dev29.defineRecipe)({
className: "link",
base: {
alignItems: "center",
color: "fg.default",
cursor: "pointer",
display: "inline-flex",
fontWeight: "medium",
gap: "2",
textDecoration: "underline 0.1em transparent",
textUnderlineOffset: "0.125em",
transitionDuration: "normal",
transitionProperty: "text-decoration-color",
transitionTimingFunction: "default",
_hover: {
textDecorationColor: "colorPalette.default"
},
"& svg": {
width: "1em",
height: "1em"
}
}
});
// src/theme/recipes/menu.ts
var import_anatomy17 = require("@ark-ui/anatomy");
var import_dev30 = require("@pandacss/dev");
var itemStyle = {
alignItems: "center",
borderRadius: "l1",
cursor: "pointer",
display: "flex",
fontWeight: "medium",
textStyle: "sm",
transitionDuration: "fast",
transitionProperty: "background, color",
transitionTimingFunction: "default",
_hover: {
background: "bg.muted",
"& :where(svg)": {
color: "fg.default"
}
},
_highlighted: {
background: "bg.muted"
},
"& :where(svg)": {
color: "fg.muted"
},
_disabled: {
color: "fg.disabled",
cursor: "not-allowed",
_hover: {
color: "fg.disabled",
background: "none"
}
}
};
var menu = (0, import_dev30.defineSlotRecipe)({
className: "menu",
slots: import_anatomy17.menuAnatomy.keys(),
base: {
itemGroupLabel: {
fontWeight: "semibold",
textStyle: "sm"
},
content: {
background: "bg.default",
borderRadius: "l2",
boxShadow: "lg",
display: "flex",
flexDirection: "column",
outline: "none",
width: "calc(100% + 2rem)",
zIndex: "dropdown",
_hidden: {
display: "none"
},
_open: {
animation: "fadeIn 0.25s ease-out"
},
_closed: {
animation: "fadeOut 0.2s ease-out"
}
},
itemGroup: {
display: "flex",
flexDirection: "column"
},
positioner: {
zIndex: "dropdown"
},
item: 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"
},
item: {
h: "8",
px: "1.5",
mx: "1",
"& :where(svg)": {
width: "4",
height: "4"
}
},
optionItem: {
h: "8",
px: "1.5",
mx: "1",
"& :where(svg)": {
width: "4",
height: "4"
}
},
triggerItem: {
h: "8",
px: "1.5",
mx: "1",
"& :where(svg)": {
width: "4",
height: "4"
}
}
},
sm: {
itemGroup: {
gap: "1"
},
itemGroupLabel: {
py: "2",
px: "2",
mx: "1"
},
content: {
py: "1",
gap: "1"
},
item: {
h: "9",
px: "2",
mx: "1",
"& :where(svg)": {
width: "4",
height: "4"
}
},
optionItem: {
h: "9",
px: "2",
mx: "1",
"& :where(svg)": {
width: "4",
height: "4"
}
},
triggerItem: {
h: "9",
px: "2",
mx: "1.5",
"& :where(svg)": {
width: "4",
height: "4"
}
}
},
md: {
itemGroup: {
gap: "1"
},
itemGroupLabel: {
py: "2.5",
px: "2.5",
mx: "1"
},
content: {
py: "1",
gap: "1"
},
item: {
h: "10",
px: "2.5",
mx: "1",
"& :where(svg)": {
width: "4",
height: "4"
}
},
optionItem: {
h: "10",
px: "2.5",
mx: "1",
"& :where(svg)": {
width: "4",
heigh