@mekari/pixel3-styled-system 0.0.0

package/css/css.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import type { SystemStyleObject } from '../types/index';
+
+interface CssFunction {
+  (...styles: Array<SystemStyleObject | undefined | null | false>): string
+  raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
+}
+
+export declare const css: CssFunction;

package/css/css.mjs

@@ -0,0 +1,44 @@
+import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs';
+import { sortConditions, finalizeConditions } from './conditions.mjs';
+
+const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:object,objectFit:object,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x,insetBlock:inset-y,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,insetX:inset-x,insetY:inset-y,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,outlineWidth:ring/ringWidth,outlineColor:ring/ringColor,outline:ring/1,outlineOffset:ring/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide,divideStyle:divide,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:font,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text,textDecoration:text-decor,textDecorationColor:text-decor,textEmphasisColor:text-emphasis,textDecorationStyle:decoration,textDecorationThickness:decoration,textUnderlineOffset:underline-offset,textTransform:text,textIndent:indent,textShadow:text-shadow,textOverflow:text,verticalAlign:align,wordBreak:break,textWrap:text,truncate:truncate,lineClamp:clamp,listStyleType:list,listStylePosition:list,listStyleImage:list-img,backgroundPosition:bg/bgPosition,backgroundPositionX:bg-x/bgPositionX,backgroundPositionY:bg-y/bgPositionY,backgroundAttachment:bg/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFrom:from,gradientTo:to,gradientVia:via,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationDelay:animation-delay,transformOrigin:origin,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginX:scroll-mx,scrollMarginY:scroll-my,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingX:scroll-px,scrollPaddingY:scroll-py,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap,scrollSnapStop:snap,scrollSnapType:snap,scrollSnapStrictness:strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-size-adjust,textStyle:textStyle"
+
+const classNameByProp = new Map()
+const shorthands = new Map()
+utilities.split(',').forEach((utility) => {
+  const [prop, meta] = utility.split(':')
+  const [className, ...shorthandList] = meta.split('/')
+  classNameByProp.set(prop, className)
+  if (shorthandList.length) {
+    shorthandList.forEach((shorthand) => {
+      shorthands.set(shorthand === '1' ? className : shorthand, prop)
+    })
+  }
+})
+
+const resolveShorthand = (prop) => shorthands.get(prop) || prop
+
+const context = {
+  
+  conditions: {
+    shift: sortConditions,
+    finalize: finalizeConditions,
+    breakpoints: { keys: ["base","sm","md","lg","xl"] }
+  },
+  utility: {
+    prefix: "mp",
+    transform: (prop, value) => {
+              const key = resolveShorthand(prop)
+              const propKey = classNameByProp.get(key) || hypenateProperty(key)
+              return { className: `${propKey}_${withoutSpace(value)}` }
+            },
+    hasShorthand: true,
+    resolveShorthand: resolveShorthand,
+  }
+}
+
+const cssFn = createCss(context)
+export const css = (...styles) => cssFn(mergeCss(...styles))
+css.raw = (...styles) => mergeCss(...styles)
+
+export const { mergeCss, assignCss } = createMergeCss(context)

package/css/cva.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import type { RecipeCreatorFn } from '../types/recipe';
+
+export declare const cva: RecipeCreatorFn
+
+export type { RecipeVariantProps } from '../types/recipe';

package/css/cva.mjs

@@ -0,0 +1,85 @@
+import { compact, mergeProps, splitProps, uniq } from '../helpers.mjs';
+import { css, mergeCss } from './css.mjs';
+
+const defaults = (conf) => ({
+  base: {},
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+  ...conf,
+})
+
+export function cva(config) {
+  const { base, variants, defaultVariants, compoundVariants } = defaults(config)
+
+  function resolve(props = {}) {
+    const computedVariants = { ...defaultVariants, ...compact(props) }
+    let variantCss = { ...base }
+    for (const [key, value] of Object.entries(computedVariants)) {
+      if (variants[key]?.[value]) {
+        variantCss = mergeCss(variantCss, variants[key][value])
+      }
+    }
+    const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
+    return mergeCss(variantCss, compoundVariantCss)
+  }
+
+  function merge(__cva) {
+    const override = defaults(__cva.config)
+    const variantKeys = uniq(__cva.variantKeys, Object.keys(variants))
+    return cva({
+      base: mergeCss(base, override.base),
+      variants: Object.fromEntries(
+        variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]),
+      ),
+      defaultVariants: mergeProps(defaultVariants, override.defaultVariants),
+      compoundVariants: [...compoundVariants, ...override.compoundVariants],
+    })
+  }
+
+  function cvaFn(props) {
+    return css(resolve(props))
+  }
+
+  const variantKeys = Object.keys(variants)
+
+  function splitVariantProps(props) {
+    return splitProps(props, variantKeys)
+  }
+
+  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
+
+  return Object.assign(cvaFn, {
+    __cva__: true,
+    variantMap,
+    variantKeys,
+    raw: resolve,
+    config,
+    merge,
+    splitVariantProps,
+  })
+}
+
+export function getCompoundVariantCss(compoundVariants, variantMap) {
+  let result = {}
+  compoundVariants.forEach((compoundVariant) => {
+    const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
+      if (key === 'css') return true
+
+      const values = Array.isArray(value) ? value : [value]
+      return values.some((value) => variantMap[key] === value)
+    })
+
+    if (isMatching) {
+      result = mergeCss(result, compoundVariant.css)
+    }
+  })
+
+  return result
+}
+
+export function assertCompoundVariant(name, compoundVariants, variants, prop) {
+  if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {
+    throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
+  }
+}

package/css/cx.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+type Argument = string | boolean | null | undefined
+
+/** Conditionally join classNames into a single string */
+export declare function cx(...args: Argument[]): string

package/css/cx.mjs

@@ -0,0 +1,15 @@
+function cx() {
+  let str = '',
+    i = 0,
+    arg
+
+  for (; i < arguments.length; ) {
+    if ((arg = arguments[i++]) && typeof arg === 'string') {
+      str && (str += ' ')
+      str += arg
+    }
+  }
+  return str
+}
+
+export { cx }

package/css/index.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+export * from './css';
+export * from './cx';
+export * from './cva';
+export * from './sva';

package/css/index.mjs

@@ -0,0 +1,4 @@
+export * from './css.mjs';
+export * from './cx.mjs';
+export * from './cva.mjs';
+export * from './sva.mjs';

package/css/sva.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import type { SlotRecipeCreatorFn } from '../types/recipe';
+
+export declare const sva: SlotRecipeCreatorFn

package/css/sva.mjs

@@ -0,0 +1,35 @@
+import { getSlotRecipes, splitProps } from '../helpers.mjs';
+import { cva } from './cva.mjs';
+
+export function sva(config) {
+  const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
+
+  function svaFn(props) {
+    const result = slots.map(([slot, cvaFn]) => [slot, cvaFn(props)])
+    return Object.fromEntries(result)
+  }
+
+  function raw(props) {
+    const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)])
+    return Object.fromEntries(result)
+  }
+
+  const variants = config.variants ?? {};
+  const variantKeys = Object.keys(variants);
+
+  function splitVariantProps(props) {
+    return splitProps(props, variantKeys);
+  }
+
+  const variantMap = Object.fromEntries(
+    Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
+  );
+
+  return Object.assign(svaFn, {
+    __cva__: false,
+    raw,
+    variantMap,
+    variantKeys,
+    splitVariantProps,
+  })
+}

package/global.css

@@ -0,0 +1,59 @@
+@layer pixel_base {
+  :root {
+    --made-with-panda: '🐼';
+    }
+
+  *, *::before, *::after, ::backdrop {
+    --blur:   ;
+    --brightness:   ;
+    --contrast:   ;
+    --grayscale:   ;
+    --hue-rotate:   ;
+    --invert:   ;
+    --saturate:   ;
+    --sepia:   ;
+    --drop-shadow:   ;
+    --backdrop-blur:   ;
+    --backdrop-brightness:   ;
+    --backdrop-contrast:   ;
+    --backdrop-grayscale:   ;
+    --backdrop-hue-rotate:   ;
+    --backdrop-invert:   ;
+    --backdrop-opacity:   ;
+    --backdrop-saturate:   ;
+    --backdrop-sepia:   ;
+    --scroll-snap-strictness: proximity;
+    --border-spacing-x: 0;
+    --border-spacing-y: 0;
+    --translate-x: 0;
+    --translate-y: 0;
+    --rotate: 0;
+    --skew-x: 0;
+    --skew-y: 0;
+    --scale-x: 1;
+    --scale-y: 1;
+    }
+
+  html {
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-size-adjust: 100%;
+    }
+
+  body {
+    background: var(--mp-colors-white);
+    color: var(--mp-colors-dark);
+    font-family: var(--mp-fonts-body);
+    font-size: 14px;
+    }
+
+  body.dark, .dark body {
+    color-scheme: dark;
+    }
+
+  *, *::before, *::after {
+    border-style: solid;
+    box-sizing: border-box;
+    }
+}

package/helpers.mjs

@@ -0,0 +1,300 @@
+// src/assert.ts
+function isObject(value) {
+  return typeof value === "object" && value != null && !Array.isArray(value);
+}
+
+// src/compact.ts
+function compact(value) {
+  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
+}
+
+// src/condition.ts
+var isBaseCondition = (v) => v === "base";
+function filterBaseConditions(c) {
+  return c.slice().filter((v) => !isBaseCondition(v));
+}
+
+// src/css-important.ts
+var importantRegex = /!(important)?$/;
+function isImportant(value) {
+  return typeof value === "string" ? importantRegex.test(value) : false;
+}
+function withoutImportant(value) {
+  return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
+}
+function withoutSpace(str) {
+  return typeof str === "string" ? str.replaceAll(" ", "_") : str;
+}
+
+// src/hash.ts
+function toChar(code) {
+  return String.fromCharCode(code + (code > 25 ? 39 : 97));
+}
+function toName(code) {
+  let name = "";
+  let x;
+  for (x = Math.abs(code); x > 52; x = x / 52 | 0)
+    name = toChar(x % 52) + name;
+  return toChar(x % 52) + name;
+}
+function toPhash(h, x) {
+  let i = x.length;
+  while (i)
+    h = h * 33 ^ x.charCodeAt(--i);
+  return h;
+}
+function toHash(value) {
+  return toName(toPhash(5381, value) >>> 0);
+}
+
+// src/merge-props.ts
+function mergeProps(...sources) {
+  const objects = sources.filter(Boolean);
+  return objects.reduce((prev, obj) => {
+    Object.keys(obj).forEach((key) => {
+      const prevValue = prev[key];
+      const value = obj[key];
+      if (isObject(prevValue) && isObject(value)) {
+        prev[key] = mergeProps(prevValue, value);
+      } else {
+        prev[key] = value;
+      }
+    });
+    return prev;
+  }, {});
+}
+
+// src/walk-object.ts
+var isNotNullish = (element) => element != null;
+function walkObject(target, predicate, options = {}) {
+  const { stop, getKey } = options;
+  function inner(value, path = []) {
+    if (isObject(value) || Array.isArray(value)) {
+      const result = {};
+      for (const [prop, child] of Object.entries(value)) {
+        const key = getKey?.(prop) ?? prop;
+        const childPath = [...path, key];
+        if (stop?.(value, childPath)) {
+          return predicate(value, path);
+        }
+        const next = inner(child, childPath);
+        if (isNotNullish(next)) {
+          result[key] = next;
+        }
+      }
+      return result;
+    }
+    return predicate(value, path);
+  }
+  return inner(target);
+}
+function mapObject(obj, fn) {
+  if (!isObject(obj))
+    return fn(obj);
+  return walkObject(obj, (value) => fn(value));
+}
+
+// src/normalize-style-object.ts
+function toResponsiveObject(values, breakpoints) {
+  return values.reduce((acc, current, index) => {
+    const key = breakpoints[index];
+    if (current != null) {
+      acc[key] = current;
+    }
+    return acc;
+  }, {});
+}
+function normalizeShorthand(styles, context) {
+  const { hasShorthand, resolveShorthand } = context.utility;
+  return walkObject(styles, (v) => v, {
+    getKey: (prop) => {
+      return hasShorthand ? resolveShorthand(prop) : prop;
+    }
+  });
+}
+function normalizeStyleObject(styles, context) {
+  const { utility, conditions } = context;
+  const { hasShorthand, resolveShorthand } = utility;
+  return walkObject(
+    styles,
+    (value) => {
+      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
+    },
+    {
+      stop: (value) => Array.isArray(value),
+      getKey: (prop) => {
+        return hasShorthand ? resolveShorthand(prop) : prop;
+      }
+    }
+  );
+}
+
+// src/classname.ts
+var fallbackCondition = {
+  shift: (v) => v,
+  finalize: (v) => v,
+  breakpoints: { keys: [] }
+};
+var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
+function createCss(context) {
+  const { utility, hash, conditions: conds = fallbackCondition } = context;
+  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
+  const hashFn = (conditions, className) => {
+    let result;
+    if (hash) {
+      const baseArray = [...conds.finalize(conditions), className];
+      result = formatClassName(toHash(baseArray.join(":")));
+    } else {
+      const baseArray = [...conds.finalize(conditions), formatClassName(className)];
+      result = baseArray.join(":");
+    }
+    return result;
+  };
+  return (styleObject = {}) => {
+    const normalizedObject = normalizeStyleObject(styleObject, context);
+    const classNames = /* @__PURE__ */ new Set();
+    walkObject(normalizedObject, (value, paths) => {
+      const important = isImportant(value);
+      if (value == null)
+        return;
+      const [prop, ...allConditions] = conds.shift(paths);
+      const conditions = filterBaseConditions(allConditions);
+      const transformed = utility.transform(prop, withoutImportant(sanitize(value)));
+      let className = hashFn(conditions, transformed.className);
+      if (important)
+        className = `${className}!`;
+      classNames.add(className);
+    });
+    return Array.from(classNames).join(" ");
+  };
+}
+function compactStyles(...styles) {
+  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
+}
+function createMergeCss(context) {
+  function resolve(styles) {
+    const allStyles = compactStyles(...styles);
+    if (allStyles.length === 1)
+      return allStyles;
+    return allStyles.map((style) => normalizeShorthand(style, context));
+  }
+  function mergeCss(...styles) {
+    return mergeProps(...resolve(styles));
+  }
+  function assignCss(...styles) {
+    return Object.assign({}, ...resolve(styles));
+  }
+  return { mergeCss, assignCss };
+}
+
+// src/memo.ts
+var memo = (fn) => {
+  const cache = /* @__PURE__ */ new Map();
+  const get = (...args) => {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = fn(...args);
+    cache.set(key, result);
+    return result;
+  };
+  return get;
+};
+
+// src/hypenate-property.ts
+var wordRegex = /([A-Z])/g;
+var msRegex = /^ms-/;
+var hypenateProperty = memo((property) => {
+  if (property.startsWith("--"))
+    return property;
+  return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
+});
+
+// src/slot.ts
+var getSlotRecipes = (recipe = {}) => {
+  const init = (slot) => ({
+    className: [recipe.className, slot].filter(Boolean).join("__"),
+    base: recipe.base?.[slot] ?? {},
+    variants: {},
+    defaultVariants: recipe.defaultVariants ?? {},
+    compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
+  });
+  const slots = recipe.slots ?? [];
+  const recipeParts = slots.map((slot) => [slot, init(slot)]);
+  for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
+    for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
+      recipeParts.forEach(([slot, slotRecipe]) => {
+        slotRecipe.variants[variantsKey] ??= {};
+        slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};
+      });
+    }
+  }
+  return Object.fromEntries(recipeParts);
+};
+var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
+
+// src/split-props.ts
+function splitProps(props, ...keys) {
+  const descriptors = Object.getOwnPropertyDescriptors(props);
+  const dKeys = Object.keys(descriptors);
+  const split = (k) => {
+    const clone = {};
+    for (let i = 0; i < k.length; i++) {
+      const key = k[i];
+      if (descriptors[key]) {
+        Object.defineProperty(clone, key, descriptors[key]);
+        delete descriptors[key];
+      }
+    }
+    return clone;
+  };
+  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
+  return keys.map(fn).concat(split(dKeys));
+}
+
+// src/uniq.ts
+var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);
+export {
+  compact,
+  createCss,
+  createMergeCss,
+  filterBaseConditions,
+  getSlotCompoundVariant,
+  getSlotRecipes,
+  hypenateProperty,
+  isBaseCondition,
+  isObject,
+  mapObject,
+  memo,
+  mergeProps,
+  splitProps,
+  toHash,
+  uniq,
+  walkObject,
+  withoutSpace
+};
+
+
+
+// src/normalize-html.ts
+var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
+function convert(key) {
+  return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;
+}
+function normalizeHTMLProps(props) {
+  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
+}
+normalizeHTMLProps.keys = htmlProps;
+export {
+  normalizeHTMLProps
+};
+
+
+export function __spreadValues(a, b) {
+  return { ...a, ...b }
+}
+
+export function __objRest(source, exclude) {
+  return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
+}

package/jsx/aspect-ratio.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionalComponent } from 'vue'
+import type { AspectRatioProperties } from '../patterns/aspect-ratio';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'> {}
+
+
+export declare const AspectRatio: FunctionalComponent<AspectRatioProps>

package/jsx/aspect-ratio.mjs

@@ -0,0 +1,16 @@
+import { defineComponent, h, computed } from 'vue'
+import { styled } from './factory.mjs';
+import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
+
+export const AspectRatio = defineComponent({
+    name: 'AspectRatio',
+    inheritAttrs: false,
+    props: ["ratio"],
+    setup(props, { attrs, slots }) {
+        const styleProps = computed(() => getAspectRatioStyle(props))
+        return () => {
+            const computedProps = { ...styleProps.value, ...attrs }
+            return h(styled.div, computedProps, slots)
+        }
+    }
+})

package/jsx/bleed.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionalComponent } from 'vue'
+import type { BleedProperties } from '../patterns/bleed';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface BleedProps extends BleedProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BleedProperties > {}
+
+
+export declare const Bleed: FunctionalComponent<BleedProps>

package/jsx/bleed.mjs

@@ -0,0 +1,16 @@
+import { defineComponent, h, computed } from 'vue'
+import { styled } from './factory.mjs';
+import { getBleedStyle } from '../patterns/bleed.mjs';
+
+export const Bleed = defineComponent({
+    name: 'Bleed',
+    inheritAttrs: false,
+    props: ["inline", "block"],
+    setup(props, { attrs, slots }) {
+        const styleProps = computed(() => getBleedStyle(props))
+        return () => {
+            const computedProps = { ...styleProps.value, ...attrs }
+            return h(styled.div, computedProps, slots)
+        }
+    }
+})

package/jsx/box.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionalComponent } from 'vue'
+import type { BoxProperties } from '../patterns/box';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BoxProperties > {}
+
+
+export declare const Box: FunctionalComponent<BoxProps>

package/jsx/box.mjs

@@ -0,0 +1,16 @@
+import { defineComponent, h, computed } from 'vue'
+import { styled } from './factory.mjs';
+import { getBoxStyle } from '../patterns/box.mjs';
+
+export const Box = defineComponent({
+    name: 'Box',
+    inheritAttrs: false,
+    props: [],
+    setup(props, { attrs, slots }) {
+        const styleProps = computed(() => getBoxStyle(props))
+        return () => {
+            const computedProps = { ...styleProps.value, ...attrs }
+            return h(styled.div, computedProps, slots)
+        }
+    }
+})