@dreamy-ui/panda-preset
Version:
A panda preset for Dreamy UI React component library
1,989 lines (1,944 loc) • 111 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
// ../../node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js
var require_cjs = __commonJS({
"../../node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js"(exports, module) {
"use strict";
var isMergeableObject = function isMergeableObject2(value) {
return isNonNullObject(value) && !isSpecial(value);
};
function isNonNullObject(value) {
return !!value && typeof value === "object";
}
function isSpecial(value) {
var stringValue = Object.prototype.toString.call(value);
return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value);
}
var canUseSymbol = typeof Symbol === "function" && Symbol.for;
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for("react.element") : 60103;
function isReactElement(value) {
return value.$$typeof === REACT_ELEMENT_TYPE;
}
function emptyTarget(val) {
return Array.isArray(val) ? [] : {};
}
function cloneUnlessOtherwiseSpecified(value, options) {
return options.clone !== false && options.isMergeableObject(value) ? deepmerge2(emptyTarget(value), value, options) : value;
}
function defaultArrayMerge(target, source, options) {
return target.concat(source).map(function(element) {
return cloneUnlessOtherwiseSpecified(element, options);
});
}
function getMergeFunction(key, options) {
if (!options.customMerge) {
return deepmerge2;
}
var customMerge = options.customMerge(key);
return typeof customMerge === "function" ? customMerge : deepmerge2;
}
function getEnumerableOwnPropertySymbols(target) {
return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol) {
return Object.propertyIsEnumerable.call(target, symbol);
}) : [];
}
function getKeys(target) {
return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target));
}
function propertyIsOnObject(object, property) {
try {
return property in object;
} catch (_) {
return false;
}
}
function propertyIsUnsafe(target, key) {
return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key));
}
function mergeObject(target, source, options) {
var destination = {};
if (options.isMergeableObject(target)) {
getKeys(target).forEach(function(key) {
destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
});
}
getKeys(source).forEach(function(key) {
if (propertyIsUnsafe(target, key)) {
return;
}
if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) {
destination[key] = getMergeFunction(key, options)(target[key], source[key], options);
} else {
destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
}
});
return destination;
}
function deepmerge2(target, source, options) {
options = options || {};
options.arrayMerge = options.arrayMerge || defaultArrayMerge;
options.isMergeableObject = options.isMergeableObject || isMergeableObject;
options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified;
var sourceIsArray = Array.isArray(source);
var targetIsArray = Array.isArray(target);
var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
if (!sourceAndTargetTypesMatch) {
return cloneUnlessOtherwiseSpecified(source, options);
} else if (sourceIsArray) {
return options.arrayMerge(target, source, options);
} else {
return mergeObject(target, source, options);
}
}
deepmerge2.all = function deepmergeAll(array, options) {
if (!Array.isArray(array)) {
throw new Error("first argument should be an array");
}
return array.reduce(function(prev, next) {
return deepmerge2(prev, next, options);
}, {});
};
var deepmerge_1 = deepmerge2;
module.exports = deepmerge_1;
}
});
// src/theme/patters/divider.ts
import { definePattern } from "@pandacss/dev";
var divider = definePattern({
jsx: ["Divider"],
description: "divider pattern",
properties: {
orientation: {
type: "enum",
value: ["horizontal", "vertical"]
},
thickness: {
type: "string",
value: "1px"
}
},
defaultValues: {
orientation: "horizontal",
thickness: "1px",
color: "alpha.300"
},
transform(props, { map }) {
const { orientation, thickness, color, backgroundColor, background, bg, ...rest } = props;
return {
"--thickness": thickness,
width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
borderTop: "none",
borderBlockEndWidth: map(
orientation,
(v) => v === "horizontal" ? "var(--thickness)" : void 0
),
borderInlineStartWidth: map(
orientation,
(v) => v === "vertical" ? "var(--thickness)" : void 0
),
borderColor: color ?? backgroundColor ?? background ?? bg,
...rest
};
}
});
// src/theme/patters/stack.ts
import { definePattern as definePattern2 } from "@pandacss/dev";
var stack = definePattern2({
description: "stack pattern"
// defaultValues: {
// align: "center"
// }
// transform(props) {
// const { align, justify, direction, gap, ...rest } = props;
// return {
// display: "flex",
// flexDirection: direction,
// alignItems: align ,
// justifyContent: justify,
// gap,
// ...rest
// };
// }
});
// src/theme/patters/text.ts
import { definePattern as definePattern3 } from "@pandacss/dev";
var text = definePattern3({
jsx: ["Heading", "Text"],
properties: {
variant: {
type: "enum",
value: ["heading", "link"]
},
size: {
type: "enum",
value: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"]
}
},
transform(props, { map }) {
const { variant, size, ...rest } = props;
return {
textStyle: size ?? map(variant, (v) => v === "heading" ? "xl" : void 0),
fontWeight: map(
variant,
(v) => v === "heading" ? "bold" : v === "link" ? "semibold" : void 0
),
fontFamily: map(variant, (v) => v === "heading" ? "heading" : void 0),
transition: map(variant, (v) => v === "link" ? "colors" : void 0),
_hover: map(
variant,
(v) => v === "link" ? { color: "{colors.fg.max}" } : void 0
),
...rest
};
}
});
// src/theme/patters/visually-hidden.ts
import { definePattern as definePattern4 } from "@pandacss/dev";
var visuallyHidden = definePattern4({
jsx: ["VisuallyHidden", "VisuallyHiddenInput"]
});
// src/theme/patters/index.ts
var patters = {
divider,
stack,
text,
visuallyHidden
};
// src/theme/resolve-button-colors.ts
function resolveButtonColors(options) {
if (options.primaryColor && !options.buttonPrimaryTextColor) {
const contrast = getContrast(options.primaryColor);
options.buttonPrimaryTextColor = contrast;
}
if (options.secondaryColor && !options.buttonSecondaryTextColor) {
const contrast = getContrast(options.secondaryColor);
options.buttonSecondaryTextColor = contrast;
}
}
function getContrast(color) {
const [red, green, blue] = resolveColorScheme(color);
return red * 0.299 + green * 0.587 + blue * 0.114 > 186 ? "#000000" : "#ffffff";
}
function resolveColorScheme(color) {
if (color.startsWith("#")) {
const hex = color.slice(1);
const [r, g, b] = hexToRgb(hex);
return [r, g, b];
}
if (color.startsWith("rgb")) {
const rgb = color.slice(4).split(")")[0].split(",");
return rgb.map((value) => Number.parseInt(value, 10));
}
if (color.startsWith("hsl")) {
const hsl = color.slice(4).split(")")[0].split(",");
const [h, s, l] = hsl.map((value) => Number.parseInt(value, 10));
return hslToRgb(h, s, l);
}
throw new Error(
`Invalid color: ${color}. Make sure provided color is a valid hex value, rgb value, or hsl value.`
);
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result) throw new Error(`Invalid hex color: ${hex}`);
return [
Number.parseInt(result[1], 16),
Number.parseInt(result[2], 16),
Number.parseInt(result[3], 16)
];
}
function hslToRgb(h, s, l) {
let r;
let g;
let b;
if (s === 0) {
r = g = b = l;
} else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r = hueToRgb(p, q, h + 1 / 3);
g = hueToRgb(p, q, h);
b = hueToRgb(p, q, h - 1 / 3);
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
function hueToRgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
// src/theme/semantic-tokens/colors.ts
import { defineSemanticTokens } from "@pandacss/dev";
function createColorTokens({
backgrounds: { light: lightBackground, dark: darkBackground },
primaryColor,
secondaryColor,
buttonPrimaryTextColor,
buttonSecondaryTextColor
}) {
return defineSemanticTokens.colors({
primary: {
value: primaryColor
},
secondary: {
value: secondaryColor
},
primaryButtonText: {
value: buttonPrimaryTextColor
},
secondaryButtonText: {
value: buttonSecondaryTextColor
},
bg: {
DEFAULT: {
value: { base: lightBackground, _dark: darkBackground }
},
light: {
value: lightBackground
},
dark: {
value: darkBackground
}
},
fg: {
DEFAULT: {
value: {
_light: "{colors.black/87}",
_dark: "{colors.white/87}"
}
},
max: {
value: {
_light: "{colors.black}",
_dark: "{colors.white}"
}
},
medium: {
value: {
_light: "{colors.fgInternal.50/60}",
_dark: "{colors.fgInternal.900/60}"
}
},
disabled: {
value: {
_light: "{colors.fgInternal.50/38}",
_dark: "{colors.fgInternal.900/38}"
}
}
},
success: {
value: {
_light: "{colors.green.600}",
_dark: "{colors.green.400}"
}
},
warning: {
value: {
_light: "{colors.yellow.500}",
_dark: "{colors.yellow.400}"
}
},
error: {
value: {
_light: "#d60b3e",
_dark: "#db6371"
}
},
info: {
value: {
_light: "{colors.blue.500}",
_dark: "{colors.blue.400}"
}
},
border: {
default: { value: "{colors.alpha.300}" },
muted: { value: "{colors.alpha.150}" },
hover: { value: "{colors.alpha.200}" }
},
alpha: {
50: {
value: {
_light: "{colors.blackAlpha.50}",
_dark: "{colors.whiteAlpha.50}"
}
},
100: {
value: {
_light: "{colors.blackAlpha.100}",
_dark: "{colors.whiteAlpha.100}"
}
},
150: {
value: {
_light: "{colors.blackAlpha.150}",
_dark: "{colors.whiteAlpha.150}"
}
},
200: {
value: {
_light: "{colors.blackAlpha.200}",
_dark: "{colors.whiteAlpha.200}"
}
},
300: {
value: {
_light: "{colors.blackAlpha.300}",
_dark: "{colors.whiteAlpha.300}"
}
},
400: {
value: {
_light: "{colors.blackAlpha.400}",
_dark: "{colors.whiteAlpha.400}"
}
},
500: {
value: {
_light: "{colors.blackAlpha.500}",
_dark: "{colors.whiteAlpha.500}"
}
},
600: {
value: {
_light: "{colors.blackAlpha.600}",
_dark: "{colors.whiteAlpha.600}"
}
},
700: {
value: {
_light: "{colors.blackAlpha.700}",
_dark: "{colors.whiteAlpha.700}"
}
},
800: {
value: {
_light: "{colors.blackAlpha.800}",
_dark: "{colors.whiteAlpha.800}"
}
},
900: {
value: {
_light: "{colors.blackAlpha.900}",
_dark: "{colors.whiteAlpha.900}"
}
}
},
inverted: {
value: {
_light: "{colors.fg.max}",
_dark: "{colors.bg}"
}
}
});
}
// src/theme/semantic-tokens/radii.ts
import { defineSemanticTokens as defineSemanticTokens2 } from "@pandacss/dev";
function createRadiiTokens(borderRadius) {
return defineSemanticTokens2.radii(
(() => {
switch (borderRadius) {
case "none":
return {
l05: { value: "{radii.none}" },
l1: { value: "{radii.none}" },
l2: { value: "{radii.none}" },
l3: { value: "{radii.none}" }
};
case "xs":
return {
l05: { value: "{radii.none}" },
l1: { value: "{radii.2xs}" },
l2: { value: "{radii.xs}" },
l3: { value: "{radii.sm}" }
};
case "sm":
return {
l05: { value: "{radii.2xs}" },
l1: { value: "{radii.xs}" },
l2: { value: "{radii.sm}" },
l3: { value: "{radii.md}" }
};
case "md":
return {
l05: { value: "{radii.xs}" },
l1: { value: "{radii.sm}" },
l2: { value: "{radii.md}" },
l3: { value: "{radii.lg}" }
};
case "lg":
return {
l05: { value: "{radii.sm}" },
l1: { value: "{radii.md}" },
l2: { value: "{radii.lg}" },
l3: { value: "{radii.xl}" }
};
case "xl":
return {
l05: { value: "{radii.md}" },
l1: { value: "{radii.lg}" },
l2: { value: "{radii.xl}" },
l3: { value: "{radii.2xl}" }
};
case "2xl":
return {
l05: { value: "{radii.lg}" },
l1: { value: "{radii.xl}" },
l2: { value: "{radii.2xl}" },
l3: { value: "{radii.3xl}" }
};
}
})()
);
}
// src/theme/semantic-tokens/index.ts
import { defineSemanticTokens as defineSemanticTokens5 } from "@pandacss/dev";
// src/theme/semantic-tokens/animations.ts
import { defineTokens } from "@pandacss/dev";
var animations = defineTokens.animations({
"spinner-linear-spin": {
value: "spinner-spin var(--spinner-speed, 0.8s) linear infinite"
},
"spinner-ease-spin": {
value: "spinner-spin var(--spinner-speed, 0.8s) ease infinite"
}
});
var animations_default = animations;
// src/theme/semantic-tokens/font-sizes.ts
import { defineSemanticTokens as defineSemanticTokens3 } from "@pandacss/dev";
var fontSizes = defineSemanticTokens3.fontSizes({
sm: {
value: {
DEFAULT: "xs",
_md: "sm"
}
},
md: {
value: {
DEFAULT: "sm",
_md: "md"
}
},
lg: {
value: {
DEFAULT: "md",
_md: "lg"
}
},
xl: {
value: {
DEFAULT: "lg",
_md: "xl"
}
},
"2xl": {
value: {
DEFAULT: "xl",
_md: "2xl"
}
},
"3xl": {
value: {
DEFAULT: "2xl",
_md: "3xl"
}
},
"4xl": {
value: {
DEFAULT: "3xl",
_md: "4xl"
}
},
"5xl": {
value: {
DEFAULT: "4xl",
_md: "5xl"
}
},
"6xl": {
value: {
DEFAULT: "5xl",
_md: "6xl"
}
}
});
// src/theme/semantic-tokens/shadows.ts
import { defineSemanticTokens as defineSemanticTokens4 } from "@pandacss/dev";
var shadows = defineSemanticTokens4.shadows({
xs: {
value: {
base: "0px 1px 2px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 1px 1px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
sm: {
value: {
base: "0px 2px 4px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 2px 4px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
md: {
value: {
base: "0px 4px 8px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 4px 8px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
lg: {
value: {
base: "0px 8px 16px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 8px 16px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
xl: {
value: {
base: "0px 16px 24px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 16px 24px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
},
"2xl": {
value: {
base: "0px 24px 40px {colors.blackAlpha.100}, 0px 0px 1px {colors.blackAlpha.100}",
_dark: "0px 24px 40px {colors.blackAlpha.100}, 0px 0px 1px inset {colors.blackAlpha.100}"
}
}
});
var shadows_default = shadows;
// src/theme/semantic-tokens/index.ts
function createSemanticTokens(options) {
const radii2 = createRadiiTokens(options.rounded);
const colors = createColorTokens(options);
return defineSemanticTokens5({
fontSizes,
colors,
shadows: shadows_default,
animations: animations_default,
easings: {
easeInOut: {
value: [0.4, 0, 0.3, 1]
}
},
radii: radii2
});
}
// src/theme/tokens/assets.ts
import { defineTokens as defineTokens2 } from "@pandacss/dev";
var assets = defineTokens2.assets({});
// src/theme/tokens/colors.ts
import { defineTokens as defineTokens3 } from "@pandacss/dev";
function defineColorTokens() {
return defineTokens3.colors({
current: { value: "currentColor" },
fgInternal: {
50: { value: "#1b1b1f" },
900: { value: "#e9eeff" }
},
blackAlpha: {
50: { value: "rgba(0, 0, 0, 0.04)" },
100: { value: "rgba(0, 0, 0, 0.08)" },
150: { value: "rgba(0, 0, 0, 0.12)" },
200: { value: "rgba(0, 0, 0, 0.16)" },
300: { value: "rgba(0, 0, 0, 0.24)" },
400: { value: "rgba(0, 0, 0, 0.32)" },
500: { value: "rgba(0, 0, 0, 0.40)" },
600: { value: "rgba(0, 0, 0, 0.48)" },
700: { value: "rgba(0, 0, 0, 0.56)" },
800: { value: "rgba(0, 0, 0, 0.64)" },
900: { value: "rgba(0, 0, 0, 0.72)" }
},
whiteAlpha: {
50: { value: "rgba(255, 255, 255, 0.04)" },
100: { value: "rgba(255, 255, 255, 0.08)" },
150: { value: "rgba(255, 255, 255, 0.12)" },
200: { value: "rgba(255, 255, 255, 0.16)" },
300: { value: "rgba(255, 255, 255, 0.24)" },
400: { value: "rgba(255, 255, 255, 0.32)" },
500: { value: "rgba(255, 255, 255, 0.40)" },
600: { value: "rgba(255, 255, 255, 0.48)" },
700: { value: "rgba(255, 255, 255, 0.56)" },
800: { value: "rgba(255, 255, 255, 0.64)" },
900: { value: "rgba(255, 255, 255, 0.72)" }
},
transparent: { value: "rgb(0 0 0 / 0)" }
});
}
// src/theme/tokens/typography/fonts.ts
function createFonts({ body, heading, mono }) {
return {
body: {
value: [body, "sans"]
},
heading: {
value: [heading, body, "sans"]
},
sans: {
value: [
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
'"Segoe UI"',
"Roboto",
'"Helvetica Neue"',
"Arial",
'"Noto Sans"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"'
]
},
serif: {
value: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"]
},
mono: {
value: [
mono,
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
'"Liberation Mono"',
'"Courier New"',
"monospace"
]
}
};
}
// src/theme/tokens/index.ts
import { defineTokens as defineTokens10 } from "@pandacss/dev";
// src/theme/tokens/blurs.ts
import { defineTokens as defineTokens4 } from "@pandacss/dev";
var blurs = defineTokens4.blurs({
sm: { value: "4px" },
base: { value: "8px" },
md: { value: "12px" },
lg: { value: "16px" },
xl: { value: "24px" },
"2xl": { value: "40px" },
"3xl": { value: "64px" }
});
// src/theme/tokens/borders.ts
var borders = {
none: { value: "none" }
};
// src/theme/tokens/durations.ts
import { defineTokens as defineTokens5 } from "@pandacss/dev";
var durations = defineTokens5.durations({
fastest: { value: "50ms" },
faster: { value: "100ms" },
fast: { value: "150ms" },
normal: { value: "200ms" },
slow: { value: "300ms" },
slower: { value: "400ms" },
slowest: { value: "500ms" }
});
// src/theme/tokens/easings.ts
import { defineTokens as defineTokens6 } from "@pandacss/dev";
var easings = defineTokens6.easings({
pulse: { value: "cubic-bezier(0.4, 0.0, 0.6, 1.0)" },
default: { value: "cubic-bezier(0.4, 0, 0.3, 1)" },
"emphasized-in": { value: "cubic-bezier(0.05, 0.7, 0.1, 1.0)" },
"emphasized-out": { value: "cubic-bezier(0.3, 0.0, 0.8, 0.15)" },
"ease-in-out": { value: "cubic-bezier(0.4, 0, 0.3, 1)" },
"ease-in": { value: "cubic-bezier(0.4, 0, 1, 1)" },
"ease-out": { value: "cubic-bezier(0, 0, 0.2, 1)" }
});
// src/theme/tokens/radii.ts
import { defineTokens as defineTokens7 } from "@pandacss/dev";
var radii = defineTokens7.radii({
none: { value: "0" },
"2xs": { value: "0.0625rem" },
xs: { value: "0.125rem" },
sm: { value: "0.25rem" },
md: { value: "0.375rem" },
lg: { value: "0.5rem" },
xl: { value: "0.75rem" },
"2xl": { value: "1rem" },
"3xl": { value: "1.5rem" },
full: { value: "9999px" }
});
// src/theme/tokens/spacing.ts
import { defineTokens as defineTokens8 } from "@pandacss/dev";
var spacing = defineTokens8.spacing({
0: { value: "0rem" },
0.5: { value: "0.125rem" },
1: { value: "0.25rem" },
1.5: { value: "0.375rem" },
2: { value: "0.5rem" },
2.5: { value: "0.625rem" },
3: { value: "0.75rem" },
3.5: { value: "0.875rem" },
4: { value: "1rem" },
4.5: { value: "1.125rem" },
5: { value: "1.25rem" },
6: { value: "1.5rem" },
7: { value: "1.75rem" },
8: { value: "2rem" },
9: { value: "2.25rem" },
10: { value: "2.5rem" },
11: { value: "2.75rem" },
12: { value: "3rem" },
14: { value: "3.5rem" },
16: { value: "4rem" },
20: { value: "5rem" },
24: { value: "6rem" },
28: { value: "7rem" },
32: { value: "8rem" },
36: { value: "9rem" },
40: { value: "10rem" },
44: { value: "11rem" },
48: { value: "12rem" },
52: { value: "13rem" },
56: { value: "14rem" },
60: { value: "15rem" },
64: { value: "16rem" },
72: { value: "18rem" },
80: { value: "20rem" },
96: { value: "24rem" }
});
// src/theme/tokens/sizes.ts
var largeSizes = {
"2xs": { value: "16rem" },
xs: { value: "20rem" },
sm: { value: "24rem" },
md: { value: "28rem" },
lg: { value: "32rem" },
xl: { value: "36rem" },
"2xl": { value: "42rem" },
"3xl": { value: "48rem" },
"4xl": { value: "56rem" },
"5xl": { value: "64rem" },
"6xl": { value: "72rem" },
"7xl": { value: "80rem" },
"8xl": { value: "90rem" }
};
var sizes = {
...spacing,
...largeSizes,
full: { value: "100%" },
min: { value: "min-content" },
max: { value: "max-content" },
fit: { value: "fit-content" }
};
// src/theme/tokens/typography/font-sizes.ts
var fontSizes2 = {
"2xs": { value: "0.5rem" },
xs: { value: "0.75rem" },
sm: { value: "0.875rem" },
md: { value: "1rem" },
lg: { value: "1.125rem" },
xl: { value: "1.25rem" },
"2xl": { value: "1.5rem" },
"3xl": { value: "1.875rem" },
"4xl": { value: "2.25rem" },
"5xl": { value: "3rem" },
"6xl": { value: "3.75rem" },
"7xl": { value: "4.5rem" },
"8xl": { value: "6rem" },
"9xl": { value: "8rem" }
};
// src/theme/tokens/typography/font-weights.ts
var fontWeights = {
thin: { value: "100" },
extralight: { value: "200" },
light: { value: "300" },
normal: { value: "400" },
medium: { value: "500" },
semibold: { value: "600" },
bold: { value: "700" },
extrabold: { value: "800" },
black: { value: "900" }
};
// src/theme/tokens/typography/letter-spacings.ts
var letterSpacings = {
tighter: { value: "-0.05em" },
tight: { value: "-0.025em" },
normal: { value: "0em" },
wide: { value: "0.025em" },
wider: { value: "0.05em" },
widest: { value: "0.1em" }
};
// src/theme/tokens/typography/line-heights.ts
var lineHeights = {
none: { value: "1" },
tight: { value: "1.25" },
normal: { value: "1.5" },
relaxed: { value: "1.75" },
loose: { value: "2" }
};
// src/theme/tokens/z-index.ts
import { defineTokens as defineTokens9 } from "@pandacss/dev";
var zIndex = defineTokens9.zIndex({
hide: {
value: -1
},
base: {
value: 0
},
docked: {
value: 10
},
dropdown: {
value: 1e3
},
sticky: {
value: 1100
},
banner: {
value: 1200
},
overlay: {
value: 1300
},
modal: {
value: 1400
},
popover: {
value: 1500
},
skipLink: {
value: 1600
},
toast: {
value: 1700
},
tooltip: {
value: 1800
}
});
// src/theme/tokens/index.ts
function createTokens(options) {
const fonts = createFonts(options.fonts);
return defineTokens10({
blurs,
borders,
colors: defineColorTokens(),
durations,
assets,
easings,
fonts,
fontSizes: fontSizes2,
fontWeights,
letterSpacings,
lineHeights,
radii,
sizes,
spacing,
zIndex
});
}
// src/theme/preset.ts
var import_deepmerge = __toESM(require_cjs(), 1);
import { definePreset } from "@pandacss/dev";
// src/recipes/alert.ts
import { defineParts, defineRecipe } from "@pandacss/dev";
var parts = defineParts({
root: { selector: "&" },
icon: { selector: "& [data-part='icon']" },
title: { selector: "& [data-part='title']" },
description: { selector: "& [data-part='description']" }
});
var alert = defineRecipe({
className: "dream-alert",
description: "Dreamy UI Alert component",
jsx: ["Alert"],
base: parts({
root: {
display: "flex",
flexDirection: "column",
paddingX: 4,
paddingY: 3,
borderRadius: "l2",
fontSize: "md",
width: "100%",
gap: 0.5
},
title: {
display: "flex",
alignItems: "center",
fontWeight: "semibold",
fontSize: "md",
textWrap: "wrap"
},
description: {
ml: 7
},
icon: {
width: "5",
height: "5",
mr: 2,
flexShrink: 0,
"[data-status=success]&": {
color: "{colors.success}",
fill: "{colors.success}",
stroke: "{colors.success}"
},
"[data-status=warning]&": {
color: "{colors.warning}",
fill: "{colors.warning}"
},
"[data-status=error]&": {
color: "{colors.error}",
fill: "{colors.error}"
},
"[data-status=info]&": {
color: "{colors.info}",
fill: "{colors.info}",
stroke: "{colors.info}"
}
}
}),
variants: {
variant: {
subtle: parts({
root: {
"&[data-status=success]": {
bg: "{colors.success}/10"
},
"&[data-status=warning]": {
bg: "{colors.warning}/10"
},
"&[data-status=error]": {
bg: "{colors.error}/10"
},
"&[data-status=info]": {
bg: "{colors.info}/10"
}
}
}),
outline: parts({
root: {
borderWidth: 1,
borderStyle: "solid",
"&[data-status=success]": {
borderColor: "{colors.success}"
},
"&[data-status=warning]": {
borderColor: "{colors.warning}"
},
"&[data-status=error]": {
borderColor: "{colors.error}"
},
"&[data-status=info]": {
borderColor: "{colors.info}"
}
}
})
}
},
defaultVariants: {
variant: "subtle"
}
});
// src/recipes/avatar.ts
import { defineParts as defineParts2, defineRecipe as defineRecipe2 } from "@pandacss/dev";
var parts2 = defineParts2({
root: {
selector: "&"
},
image: { selector: '& [data-part="image"]' },
name: { selector: '& [data-part="name"]' },
group: { selector: '[data-part="group"]:has(&)' },
excess: { selector: '[data-part="group"]:has(&) [data-part="excess"]' }
});
var avatar = defineRecipe2({
className: "dream-avatar",
jsx: ["Avatar", "AvatarImage", "AvatarName"],
base: parts2({
root: {
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "full",
overflow: "hidden"
// transition: "transform 0.2s {easings.ease-in-out}",
// _hover: {
// '[data-part="group"]:has(&) &': {
// transform: "translateX(-0.75rem)"
// }
// }
},
name: {
fontWeight: "500",
fontSize: "md"
},
image: {
objectFit: "cover",
objectPosition: "center",
width: "100%",
height: "100%",
rounded: "inherit"
},
group: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
flexDirection: "row-reverse"
},
excess: {
bg: "{colors.alpha.100}",
backdropFilter: "blur({blurs.md})",
fontWeight: "500",
display: "flex",
alignItems: "center",
justifyContent: "center",
rounded: "full"
}
}),
defaultVariants: {
size: "md"
},
variants: {
size: {
sm: parts2({
root: {
width: "8",
height: "8"
},
excess: {
width: "8",
height: "8"
}
}),
md: parts2({
root: {
width: "10",
height: "10"
},
excess: {
width: "10",
height: "10"
}
}),
lg: parts2({
root: {
width: "12",
height: "12"
},
excess: {
width: "12",
height: "12"
}
})
},
showBorder: {
true: parts2({
root: {
borderWidth: "2px",
borderStyle: "solid",
borderColor: "{colors.bg}"
}
})
}
}
});
// src/recipes/color-scheme.ts
var schemeNames = [
"primary",
"secondary",
"success",
"warning",
"error",
"info",
"none"
];
var schemes = {
primary: "{colors.primary}",
secondary: "{colors.secondary}",
success: "{colors.success}",
warning: "{colors.warning}",
error: "{colors.error}",
info: "{colors.info}",
none: "{colors.fg.max}"
};
function getColorSchemes(cssVar, schemeProps, slot) {
const entries = Object.fromEntries(
schemeNames.map((scheme) => {
const val = slot ? { [slot]: { [cssVar]: schemes[scheme], ...schemeProps?.(scheme) } } : {
[cssVar]: schemes[scheme],
...schemeProps?.(scheme)
};
return [scheme, val];
})
);
return Object.assign({}, entries);
}
// src/recipes/badge.ts
import { defineRecipe as defineRecipe3 } from "@pandacss/dev";
var badge = defineRecipe3({
className: "dream-badge",
jsx: ["Badge"],
base: {
display: "inline-block",
whiteSpace: "nowrap",
verticalAlign: "middle",
px: 1,
textTransform: "uppercase",
fontSize: "xs",
borderRadius: "sm",
fontWeight: "bold",
width: "fit-content"
},
defaultVariants: {
variant: "subtle",
scheme: "primary"
},
variants: {
variant: {
outline: {
border: "1px solid",
borderColor: "var(--badge-color)",
color: "var(--badge-color)",
bg: "transparent"
},
subtle: {
color: "var(--badge-color)",
bg: "var(--badge-color)/10"
}
},
scheme: getColorSchemes("--badge-color")
}
});
// src/recipes/button.ts
import { defineParts as defineParts3, defineRecipe as defineRecipe4 } from "@pandacss/dev";
var parts3 = defineParts3({
root: { selector: "&" },
leftIcon: { selector: '& > [data-part="icon-left"]' },
rightIcon: { selector: '& > [data-part="icon-right"]' },
ripple: { selector: '& > [data-part="ripple"]' },
rippleContainer: { selector: '& > [data-part="ripple-container"]' }
});
var button = defineRecipe4({
className: "dream-button",
staticCss: [],
jsx: [
"Button",
"ModalCloseButton",
"PopoverCloseButton",
"CloseButton",
"IconButton",
"ModalCloseButtonBase",
"ButtonIcon"
],
base: parts3({
root: {
position: "relative",
display: "inline-flex",
alignItems: "center",
fontWeight: "semibold",
cursor: "pointer",
borderRadius: "l2",
textAlign: "center",
userSelect: "none",
transition: "background-color 0.2s {easings.ease-in-out}, color 0.2s {easings.ease-in-out}, border-color 0.2s {easings.ease-in-out}, fill 0.2s {easings.ease-in-out}, transform 0.15s {easings.ease-in-out}",
justifyContent: "center",
_disabled: {
cursor: "not-allowed",
opacity: 0.5
}
}
}),
defaultVariants: {
variant: "solid",
size: "md"
},
variants: {
variant: {
primary: parts3({
root: {
bg: "primary",
color: "{colors.primaryButtonText}",
_hover: {
bg: "color-mix(in srgb, {colors.primary}, currentColor 10%)"
}
}
}),
secondary: parts3({
root: {
bg: "secondary",
color: "{colors.secondaryButtonText}",
_hover: {
bg: "color-mix(in srgb, {colors.secondary}, currentColor 10%)"
}
}
}),
solid: parts3({
root: {
bg: "currentColor/08",
_hover: {
bg: "currentColor/12"
}
}
}),
outline: parts3({
root: {
bg: "transparent",
borderWidth: 1,
borderStyle: "solid",
borderColor: "currentColor/32",
_hover: {
bg: "currentColor/12"
}
}
}),
ghost: parts3({
root: {
bg: "transparent",
_hover: {
bg: "currentColor/12"
}
}
}),
link: parts3({
root: {
bg: "transparent",
h: "fit-content",
px: 0,
py: 0,
rounded: "none",
_hover: {
bg: "transparent",
color: "fg.max"
}
},
ripple: {
display: "none"
},
rippleContainer: {
display: "none"
}
})
},
// scheme: getColorSchemes("--button-color", undefined, "root"),
size: {
sm: parts3({
root: {
fontSize: "sm",
h: 8,
px: 3,
py: 1
},
leftIcon: {
marginRight: 1.5
},
rightIcon: {
marginLeft: 1.5
}
}),
md: parts3({
root: {
fontSize: "md",
h: 10,
px: 4,
py: 2
},
leftIcon: {
marginRight: 2
},
rightIcon: {
marginLeft: 2
}
}),
lg: parts3({
root: {
fontSize: "lg",
h: 12,
px: 5,
py: 3
},
leftIcon: {
marginRight: 3
},
rightIcon: {
marginLeft: 3
}
})
}
}
});
// src/recipes/checkbox-card.ts
import { defineParts as defineParts4, defineRecipe as defineRecipe5 } from "@pandacss/dev";
var parts4 = defineParts4({
root: { selector: "&" },
header: { selector: "& [data-part='header']" },
title: { selector: "& [data-part='title']" },
description: { selector: "& [data-part='description']" },
checkboxRoot: {
selector: "& [data-part='checkbox-root']"
},
control: {
selector: '& [data-part="control"]'
},
icon: {
selector: '& [data-part="icon"]'
},
label: {
selector: '& [data-part="label"]'
}
});
var checkboxCard = defineRecipe5({
className: "dream-checkbox-card",
jsx: ["CheckboxCard"],
base: parts4({
root: {
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "start",
cursor: "pointer",
WebkitTapHighlightColor: "transparent",
borderWidth: "1px",
borderColor: "border.muted",
borderStyle: "solid",
borderRadius: "l2",
width: "auto",
flex: 1,
_disabled: {
cursor: "not-allowed",
opacity: 0.6
},
_hover: {
borderColor: "border.hover"
}
},
header: {
display: "flex",
flexDir: "row",
alignItems: "flex-start",
justifyContent: "space-between",
gap: 6,
pr: 10
},
title: {
color: "fg",
fontWeight: "semibold"
},
description: {
color: "fg.medium"
},
checkboxRoot: {
position: "absolute",
top: 3,
right: 3,
display: "inline-flex",
alignItems: "center",
justifyContent: "start",
cursor: "pointer",
WebkitTapHighlightColor: "transparent",
maxWidth: "fit-content",
_disabled: {
cursor: "not-allowed",
opacity: 0.6
}
},
control: {
flex: 1,
position: "relative",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
flexShrink: 0,
overflow: "hidden",
borderWidth: "1px",
borderStyle: "solid",
borderRadius: "l1",
transition: "border-color 0.1s, background-color 0.1s"
}
}),
defaultVariants: {
size: "md",
checkboxVariant: "solid",
variant: "outline",
scheme: "primary"
},
variants: {
size: {
sm: parts4({
root: {
padding: "3",
gap: "0.5"
},
title: {
textStyle: "sm"
},
description: {
textStyle: "xs"
},
control: {
width: "5",
height: "5"
}
}),
md: parts4({
root: {
padding: "3",
gap: "1.5"
},
title: {
textStyle: "md"
},
description: {
textStyle: "sm"
},
control: {
width: "5",
height: "5"
}
}),
lg: parts4({
root: {
padding: "4",
gap: "1.5"
},
title: {
textStyle: "lg"
},
description: {
textStyle: "md"
},
control: {
width: "6",
height: "6"
}
})
},
variant: {
outline: parts4({
root: {
borderWidth: "1px",
borderColor: "border.muted",
transition: "border-color 0.1s",
_hover: {
borderColor: "border.hover"
},
_checked: {
borderColor: "var(--checkbox-bg)",
boxShadow: "0 0 0 0.5px var(--checkbox-bg)",
_hover: {
borderColor: "var(--checkbox-bg)"
}
},
_focusVisible: {
borderColor: "border.hover",
boxShadow: "0 0 0 1.5px {colors.primary}"
}
}
}),
subtle: parts4({
root: {
borderWidth: "0px",
_checked: {
bg: "var(--checkbox-bg)/18"
},
_focusVisible: {
bg: "var(--checkbox-bg)/18"
}
}
// title: {
// ".group:is(:checked, [data-checked], [aria-checked=true])&": {
// color: "var(--checkbox-bg)"
// }
// },
// description: {
// ".group:is(:checked, [data-checked], [aria-checked=true])&": {
// color: "var(--checkbox-bg)"
// }
// }
})
},
checkboxVariant: {
outline: parts4({
control: {
borderColor: "border.muted",
".group:is([data-checked])&": {
borderColor: "var(--checkbox-bg)"
},
".group:is(:active)&": {
borderColor: "var(--checkbox-bg)"
},
color: "var(--checkbox-bg)"
}
}),
solid: parts4({
control: {
".group:is([data-checked])&": {
background: "var(--checkbox-bg)",
borderColor: "var(--checkbox-bg)"
},
".group:is(:active)&": {
background: "var(--checkbox-bg)/50",
borderColor: "var(--checkbox-bg)"
},
borderColor: "border.muted"
}
})
},
scheme: getColorSchemes(
"--checkbox-bg",
(scheme) => {
return {
color: scheme === "success" || scheme === "warning" || scheme === "info" ? "black/87" : "white/87"
};
},
"root"
)
}
});
// src/recipes/field.ts
import { defineSlotRecipe } from "@pandacss/dev";
var field = defineSlotRecipe({
className: "dream-field",
description: "Dreamy UI Field component",
slots: ["root", "label", "error", "helpText", "requiredIndicator", "errorIcon"],
jsx: ["Field", "FieldLabel", "FieldError", "FieldHelpText", "FieldErrorIcon"],
base: {
root: {
width: "100%",
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: 1.5
},
label: {
fontSize: "md",
fontWeight: "medium",
opacity: 1,
width: "100%",
_disabled: {
opacity: 0.4
}
},
error: {
fontSize: "sm",
color: "{colors.error}",
display: "flex",
alignItems: "center",
fontWeight: "medium",
gap: 1
},
errorIcon: {
color: "{colors.error}",
width: "4",
height: "4",
flexShrink: 0
},
helpText: {
fontSize: "sm",
color: "{colors.fg.medium}"
},
requiredIndicator: {
color: "{colors.error}",
marginStart: 0.5
}
}
});
// src/recipes/icon.ts
import { defineRecipe as defineRecipe6 } from "@pandacss/dev";
var icon = defineRecipe6({
className: "icon",
base: {
color: "currentcolor",
display: "inline-block",
flexShrink: "0",
verticalAlign: "middle",
lineHeight: "1em"
},
jsx: ["Icon", "FieldErrorIcon"],
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/recipes/image.ts
import { defineParts as defineParts5, defineRecipe as defineRecipe7 } from "@pandacss/dev";
var parts5 = defineParts5({
zoomedWrapper: { selector: '[data-part="wrapper-zoomed"]:has(&)' },
wrapper: { selector: '[data-part="wrapper"]:has(&)' },
image: { selector: "&" },
blurredImg: { selector: '[data-part="wrapper"]:has(&) [data-part="blurred"]' }
});
var image = defineRecipe7({
className: "dream-image",
jsx: ["Image"],
staticCss: ["*"],
base: parts5({
image: {
"&[data-zoomed]": {
transition: "transform {durations.normal} {easings.ease-in-out}",
_hover: {
transform: "scale(1.1)"
}
}
},
wrapper: {
position: "relative",
maxW: "fit-content",
rounded: "inherit"
},
zoomedWrapper: {
overflow: "hidden",
position: "relative",
maxW: "fit-content"
},
blurredImg: {
filter: "auto",
blur: "{blurs.lg}",
position: "absolute",
inset: "0",
zIndex: -1,
translate: "auto",
scale: "1.05",
saturate: "150%",
opacity: 0.4,
y: "1"
}
})
});
// src/recipes/input.ts
import { defineRecipe as defineRecipe8 } from "@pandacss/dev";
var input = defineRecipe8({
className: "dream-input",
jsx: ["Input", "PinInput", "PinInputField", "InputGroup"],
staticCss: ["*"],
base: {
appearance: "none",
borderRadius: "l2",
borderWidth: 0,
colorPalette: "accent",
color: "fg",
background: "transparent",
position: "relative",
transitionDuration: "normal",
transitionTimingFunction: "default",
transitionProperty: "box-shadow, border-color, background",
width: "fit-content",
_disabled: {
opacity: 0.4,
cursor: "not-allowed"
}
},
defaultVariants: {
size: "md",
variant: "outline"
},
variants: {
size: {
sm: { px: "2", h: "8", minW: "8", fontSize: "xs" },
md: { px: "3", h: "10", minW: "10", fontSize: "md" },
lg: { px: "4", h: "12", minW: "12", fontSize: "lg" }
},
variant: {
outline: {
borderWidth: "1px",
background: "none",
borderColor: "{colors.border.muted}",
_hover: {
borderColor: "{colors.border.hover}"
},
_focusWithin: {
boxShadow: "0 0 0 0.5px {colors.primary}",
borderColor: "{colors.primary}",
_hover: {
boxShadow: "0 0 0 0.5px {colors.primary}",
borderColor: "{colors.primary}"
}
},
_invalid: {
_focusWithin: {
boxShadow: "0 0 0 0.5px {colors.error} !important"
},
borderColor: "{colors.error} !important",
_hover: {
boxShadow: "0 0 0 0.5px {colors.error}",
borderColor: "{colors.error}"
}
}
},
filled: {
background: "{colors.alpha.100}",
borderColor: "transparent",
borderWidth: "0",
_hover: {
background: "{colors.alpha.150}"
},
_focusWithin: {
boxShadow: "0 0 0 1.5px {colors.primary}"
},
_invalid: {
_focusWithin: {
boxShadow: "0 0 0 1.5px {colors.error} !important"
},
boxShadow: "0 0 0 1px {colors.error} !important"
}
},
flushed: {
borderRadius: 0,
borderBottomWidth: "1px",
borderBottomColor: "{colors.border.muted}",
_hover: {
borderBottomColor: "{colors.border.hover}"
},
_focusVisible: {
borderBottomColor: "{colors.primary}",
boxShadow: "0 0.5px 0 0 {colors.primary}",
outline: "none",
_hover: {
borderBottomColor: "{colors.primary}"
}
},
_invalid: {
borderBottomColor: "{colors.error} !important",
_focusWithin: {
boxShadow: "0 0.5px 0 0 {colors.error} !important"
},
_hover: {
borderBottomColor: "{colors.error}"
}
}
}
},
inputType: {
pin: {
width: "fit-content",
minWidth: "0",
aspectRatio: "1/1",
textAlign: "center"
},
default: {}
}
},
compoundVariants: [
{
size: "sm",
inputType: "pin",
css: {
fontSize: "xs"
}
},
{
size: "md",
inputType: "pin",
css: {
fontSize: "sm"
}
},
{
size: "lg",
inputType: "pin",
css: {
fontSize: "md"
}
}
]
});
// src/recipes/kbd.ts
import { defineRecipe as defineRecipe9 } from "@pandacss/dev";
var kbd = defineRecipe9({
className: "dream-keyboard-key",
jsx: ["Kbd"],
base: {
display: "inline-flex",
gap: 0.5,
alignItems: "center",
bg: "alpha.100",
width: "fit-content",
fontWeight: "normal"
},
variants: {
size: {
sm: {
px: 1,
py: 0.25,
fontSize: "xs",
rounded: "l1"
},
md: {
px: 1.5,
py: 0.5,
fontSize: "sm",
rounded: "l2"
},
lg: {
px: 2,
py: 0.75,
fontSize: "md",
rounded: "l3"
}
}
},
defaultVariants: {
size: "md"
}
});
// src/recipes/list.ts
import { defineRecipe as defineRecipe10 } from "@pandacss/dev";
var list = defineRecipe10({
className: "Dream-list",
jsx: ["List", "ListItem"],
base: {
listStylePosition: "inside",
"&[data-type=ordered]": {
listStyleType: "decimal"
},
"&[data-type=unordered]": {
listStyleType: "disc"
}
}
});
// src/recipe