@bamboocss/preset-base 1.11.1

package/dist/index.js

@@ -0,0 +1,3355 @@
+"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 index_exports = {};
+__export(index_exports, {
+  default: () => index_default,
+  preset: () => preset
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/conditions.ts
+var conditions = {
+  hover: "&:is(:hover, [data-hover])",
+  focus: "&:is(:focus, [data-focus])",
+  focusWithin: "&:focus-within",
+  focusVisible: "&:is(:focus-visible, [data-focus-visible])",
+  disabled: "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
+  active: "&:is(:active, [data-active])",
+  visited: "&:visited",
+  target: "&:target",
+  readOnly: "&:is(:read-only, [data-read-only], [aria-readonly=true])",
+  readWrite: "&:read-write",
+  empty: "&:is(:empty, [data-empty])",
+  checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
+  enabled: "&:enabled",
+  expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
+  highlighted: "&[data-highlighted]",
+  complete: "&[data-complete]",
+  incomplete: "&[data-incomplete]",
+  dragging: "&[data-dragging]",
+  before: "&::before",
+  after: "&::after",
+  firstLetter: "&::first-letter",
+  firstLine: "&::first-line",
+  marker: "&::marker, &::-webkit-details-marker",
+  selection: "&::selection",
+  file: "&::file-selector-button",
+  backdrop: "&::backdrop",
+  first: "&:first-child",
+  last: "&:last-child",
+  only: "&:only-child",
+  even: "&:nth-child(even)",
+  odd: "&:nth-child(odd)",
+  firstOfType: "&:first-of-type",
+  lastOfType: "&:last-of-type",
+  onlyOfType: "&:only-of-type",
+  peerFocus: ".peer:is(:focus, [data-focus]) ~ &",
+  peerHover: ".peer:is(:hover, [data-hover]) ~ &",
+  peerActive: ".peer:is(:active, [data-active]) ~ &",
+  peerFocusWithin: ".peer:focus-within ~ &",
+  peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
+  peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &",
+  peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
+  peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
+  peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
+  peerPlaceholderShown: ".peer:placeholder-shown ~ &",
+  groupFocus: ".group:is(:focus, [data-focus]) &",
+  groupHover: ".group:is(:hover, [data-hover]) &",
+  groupActive: ".group:is(:active, [data-active]) &",
+  groupFocusWithin: ".group:focus-within &",
+  groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
+  groupDisabled: ".group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &",
+  groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
+  groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
+  groupInvalid: ".group:is(:invalid, [data-invalid], [aria-invalid=true]) &",
+  indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
+  required: "&:is(:required, [data-required], [aria-required=true])",
+  valid: "&:is(:valid, [data-valid])",
+  invalid: "&:is(:invalid, [data-invalid], [aria-invalid=true])",
+  autofill: "&:autofill",
+  inRange: "&:is(:in-range, [data-in-range])",
+  outOfRange: "&:is(:out-of-range, [data-outside-range])",
+  placeholder: "&::placeholder, &[data-placeholder]",
+  placeholderShown: "&:is(:placeholder-shown, [data-placeholder-shown])",
+  pressed: "&:is([aria-pressed=true], [data-pressed])",
+  selected: "&:is([aria-selected=true], [data-selected])",
+  grabbed: "&:is([aria-grabbed=true], [data-grabbed])",
+  underValue: "&[data-state=under-value]",
+  overValue: "&[data-state=over-value]",
+  atValue: "&[data-state=at-value]",
+  default: "&:default",
+  optional: "&:optional",
+  open: '&:is([open], [data-open], [data-state="open"], :popover-open)',
+  closed: '&:is([closed], [data-closed], [data-state="closed"])',
+  fullscreen: "&:is(:fullscreen, [data-fullscreen])",
+  loading: "&:is([data-loading], [aria-busy=true])",
+  hidden: "&:is([hidden], [data-hidden])",
+  current: "&:is([aria-current=true], [data-current])",
+  currentPage: "&[aria-current=page]",
+  currentStep: "&[aria-current=step]",
+  today: "&[data-today]",
+  unavailable: "&[data-unavailable]",
+  rangeStart: "&[data-range-start]",
+  rangeEnd: "&[data-range-end]",
+  now: "&[data-now]",
+  topmost: "&[data-topmost]",
+  motionReduce: "@media (prefers-reduced-motion: reduce)",
+  motionSafe: "@media (prefers-reduced-motion: no-preference)",
+  print: "@media print",
+  landscape: "@media (orientation: landscape)",
+  portrait: "@media (orientation: portrait)",
+  dark: ".dark &",
+  light: ".light &",
+  osDark: "@media (prefers-color-scheme: dark)",
+  osLight: "@media (prefers-color-scheme: light)",
+  highContrast: "@media (forced-colors: active)",
+  lessContrast: "@media (prefers-contrast: less)",
+  moreContrast: "@media (prefers-contrast: more)",
+  ltr: ":where([dir=ltr], :dir(ltr)) &",
+  rtl: ":where([dir=rtl], :dir(rtl)) &",
+  scrollbar: "&::-webkit-scrollbar",
+  scrollbarThumb: "&::-webkit-scrollbar-thumb",
+  scrollbarTrack: "&::-webkit-scrollbar-track",
+  horizontal: "&[data-orientation=horizontal]",
+  vertical: "&[data-orientation=vertical]",
+  icon: "& :where(svg)",
+  starting: "@starting-style",
+  noscript: "@media (scripting: none)",
+  invertedColors: "@media (inverted-colors: inverted)"
+};
+
+// src/global-css.ts
+var EMPTY = "/*-*/ /*-*/";
+var globalCss = {
+  "*, ::before, ::after, ::backdrop": {
+    "--blur": EMPTY,
+    "--brightness": EMPTY,
+    "--contrast": EMPTY,
+    "--grayscale": EMPTY,
+    "--hue-rotate": EMPTY,
+    "--invert": EMPTY,
+    "--saturate": EMPTY,
+    "--sepia": EMPTY,
+    "--drop-shadow": EMPTY,
+    "--backdrop-blur": EMPTY,
+    "--backdrop-brightness": EMPTY,
+    "--backdrop-contrast": EMPTY,
+    "--backdrop-grayscale": EMPTY,
+    "--backdrop-hue-rotate": EMPTY,
+    "--backdrop-invert": EMPTY,
+    "--backdrop-opacity": EMPTY,
+    "--backdrop-saturate": EMPTY,
+    "--backdrop-sepia": EMPTY,
+    "--gradient-from-position": EMPTY,
+    "--gradient-to-position": EMPTY,
+    "--gradient-via-position": EMPTY,
+    "--scroll-snap-strictness": "proximity",
+    "--border-spacing-x": 0,
+    "--border-spacing-y": 0,
+    "--translate-x": 0,
+    "--translate-y": 0,
+    "--rotate": 0,
+    "--rotate-x": 0,
+    "--rotate-y": 0,
+    "--skew-x": 0,
+    "--skew-y": 0,
+    "--scale-x": 1,
+    "--scale-y": 1
+  }
+};
+
+// src/patterns.ts
+function definePattern(config) {
+  return config;
+}
+var box = definePattern({
+  transform(props) {
+    return props;
+  }
+});
+var flex = definePattern({
+  properties: {
+    align: { type: "property", value: "alignItems" },
+    justify: { type: "property", value: "justifyContent" },
+    direction: { type: "property", value: "flexDirection" },
+    wrap: { type: "property", value: "flexWrap" },
+    basis: { type: "property", value: "flexBasis" },
+    grow: { type: "property", value: "flexGrow" },
+    shrink: { type: "property", value: "flexShrink" }
+  },
+  transform(props) {
+    const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
+    return {
+      display: "flex",
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      flexWrap: wrap2,
+      flexBasis: basis,
+      flexGrow: grow,
+      flexShrink: shrink,
+      ...rest
+    };
+  }
+});
+var stack = definePattern({
+  properties: {
+    align: { type: "property", value: "alignItems" },
+    justify: { type: "property", value: "justifyContent" },
+    direction: { type: "property", value: "flexDirection" },
+    gap: { type: "property", value: "gap" }
+  },
+  defaultValues: {
+    direction: "column",
+    gap: "8px"
+  },
+  transform(props) {
+    const { align, justify, direction, gap, ...rest } = props;
+    return {
+      display: "flex",
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      ...rest
+    };
+  }
+});
+var vstack = definePattern({
+  jsxName: "VStack",
+  properties: {
+    justify: { type: "property", value: "justifyContent" },
+    gap: { type: "property", value: "gap" }
+  },
+  defaultValues: {
+    gap: "8px"
+  },
+  transform(props) {
+    const { justify, gap, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: justify,
+      gap,
+      flexDirection: "column",
+      ...rest
+    };
+  }
+});
+var hstack = definePattern({
+  jsxName: "HStack",
+  properties: {
+    justify: { type: "property", value: "justifyContent" },
+    gap: { type: "property", value: "gap" }
+  },
+  defaultValues: {
+    gap: "8px"
+  },
+  transform(props) {
+    const { justify, gap, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: justify,
+      gap,
+      flexDirection: "row",
+      ...rest
+    };
+  }
+});
+var spacer = definePattern({
+  properties: {
+    size: { type: "token", value: "spacing" }
+  },
+  transform(props, { map, isCssUnit, isCssVar }) {
+    const { size, ...rest } = props;
+    return {
+      alignSelf: "stretch",
+      justifySelf: "stretch",
+      flex: map(size, (v) => {
+        if (v == null) return "1";
+        const val = isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+        return `0 0 ${val}`;
+      }),
+      ...rest
+    };
+  }
+});
+var circle = definePattern({
+  properties: {
+    size: { type: "property", value: "width" }
+  },
+  transform(props) {
+    const { size, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "0 0 auto",
+      width: size,
+      height: size,
+      borderRadius: "9999px",
+      ...rest
+    };
+  }
+});
+var square = definePattern({
+  properties: {
+    size: { type: "property", value: "width" }
+  },
+  transform(props) {
+    const { size, ...rest } = props;
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "0 0 auto",
+      width: size,
+      height: size,
+      ...rest
+    };
+  }
+});
+var grid = definePattern({
+  properties: {
+    gap: { type: "property", value: "gap" },
+    columnGap: { type: "property", value: "gap" },
+    rowGap: { type: "property", value: "gap" },
+    columns: { type: "number" },
+    minChildWidth: { type: "token", value: "sizes", property: "width" }
+  },
+  defaultValues(props) {
+    return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
+  },
+  transform(props, { map, isCssUnit }) {
+    const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+    const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+    return {
+      display: "grid",
+      gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
+      gap,
+      columnGap,
+      rowGap,
+      ...rest
+    };
+  }
+});
+var gridItem = definePattern({
+  properties: {
+    colSpan: { type: "number" },
+    rowSpan: { type: "number" },
+    colStart: { type: "number" },
+    rowStart: { type: "number" },
+    colEnd: { type: "number" },
+    rowEnd: { type: "number" }
+  },
+  transform(props, { map }) {
+    const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
+    const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+    return {
+      gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+      gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+      gridColumnStart: colStart,
+      gridColumnEnd: colEnd,
+      gridRowStart: rowStart,
+      gridRowEnd: rowEnd,
+      ...rest
+    };
+  }
+});
+var wrap = definePattern({
+  properties: {
+    gap: { type: "property", value: "gap" },
+    rowGap: { type: "property", value: "gap" },
+    columnGap: { type: "property", value: "gap" },
+    align: { type: "property", value: "alignItems" },
+    justify: { type: "property", value: "justifyContent" }
+  },
+  transform(props) {
+    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
+    return {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      columnGap,
+      rowGap,
+      ...rest
+    };
+  }
+});
+var container = definePattern({
+  transform(props) {
+    return {
+      position: "relative",
+      maxWidth: "8xl",
+      mx: "auto",
+      px: { base: "4", md: "6", lg: "8" },
+      ...props
+    };
+  }
+});
+var center = definePattern({
+  properties: {
+    inline: { type: "boolean" }
+  },
+  transform(props) {
+    const { inline, ...rest } = props;
+    return {
+      display: inline ? "inline-flex" : "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      ...rest
+    };
+  }
+});
+var aspectRatio = definePattern({
+  properties: {
+    ratio: { type: "number" }
+  },
+  blocklist: ["aspectRatio"],
+  transform(props, { map }) {
+    const { ratio = 4 / 3, ...rest } = props;
+    return {
+      position: "relative",
+      _before: {
+        content: `""`,
+        display: "block",
+        height: "0",
+        paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+      },
+      "&>*": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "hidden",
+        position: "absolute",
+        inset: "0",
+        width: "100%",
+        height: "100%"
+      },
+      "&>img, &>video": {
+        objectFit: "cover"
+      },
+      ...rest
+    };
+  }
+});
+var divider = definePattern({
+  properties: {
+    orientation: { type: "enum", value: ["horizontal", "vertical"] },
+    thickness: { type: "token", value: "sizes", property: "borderWidth" },
+    color: { type: "token", value: "colors", property: "borderColor" }
+  },
+  defaultValues: {
+    orientation: "horizontal",
+    thickness: "1px"
+  },
+  transform(props, { map }) {
+    const { orientation, thickness, color, ...rest } = props;
+    return {
+      "--thickness": thickness,
+      width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
+      height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
+      borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
+      borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
+      borderColor: color,
+      ...rest
+    };
+  }
+});
+var linkOverlay = definePattern({
+  jsxElement: "a",
+  transform(props) {
+    return {
+      _before: {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        zIndex: "0",
+        ...props["_before"]
+      },
+      ...props
+    };
+  }
+});
+var float = definePattern({
+  properties: {
+    offsetX: { type: "token", value: "spacing", property: "left" },
+    offsetY: { type: "token", value: "spacing", property: "top" },
+    offset: { type: "token", value: "spacing", property: "top" },
+    placement: {
+      type: "enum",
+      value: [
+        "bottom-end",
+        "bottom-start",
+        "top-end",
+        "top-start",
+        "bottom-center",
+        "top-center",
+        "middle-center",
+        "middle-end",
+        "middle-start"
+      ]
+    }
+  },
+  defaultValues(props) {
+    const offset = props.offset || "0";
+    return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+  },
+  transform(props, { map }) {
+    const { offset, offsetX, offsetY, placement, ...rest } = props;
+    return {
+      display: "inline-flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      insetBlockStart: map(placement, (v) => {
+        const [side] = v.split("-");
+        const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
+        return map2[side];
+      }),
+      insetBlockEnd: map(placement, (v) => {
+        const [side] = v.split("-");
+        const map2 = { top: "auto", middle: "50%", bottom: offsetY };
+        return map2[side];
+      }),
+      insetInlineStart: map(placement, (v) => {
+        const [, align] = v.split("-");
+        const map2 = { start: offsetX, center: "50%", end: "auto" };
+        return map2[align];
+      }),
+      insetInlineEnd: map(placement, (v) => {
+        const [, align] = v.split("-");
+        const map2 = { start: "auto", center: "50%", end: offsetX };
+        return map2[align];
+      }),
+      translate: map(placement, (v) => {
+        const [side, align] = v.split("-");
+        const mapX = { start: "-50%", center: "-50%", end: "50%" };
+        const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+        return `${mapX[align]} ${mapY[side]}`;
+      }),
+      ...rest
+    };
+  }
+});
+var bleed = definePattern({
+  properties: {
+    inline: { type: "property", value: "marginInline" },
+    block: { type: "property", value: "marginBlock" }
+  },
+  defaultValues: {
+    inline: "0",
+    block: "0"
+  },
+  transform(props, { map, isCssUnit, isCssVar }) {
+    const { inline, block, ...rest } = props;
+    const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+    return {
+      "--bleed-x": map(inline, valueFn),
+      "--bleed-y": map(block, valueFn),
+      marginInline: "calc(var(--bleed-x, 0) * -1)",
+      marginBlock: "calc(var(--bleed-y, 0) * -1)",
+      ...rest
+    };
+  }
+});
+var visuallyHidden = definePattern({
+  transform(props) {
+    return {
+      srOnly: true,
+      ...props
+    };
+  }
+});
+var cq = definePattern({
+  properties: {
+    name: { type: "token", value: "containerNames", property: "containerName" },
+    type: { type: "property", value: "containerType" }
+  },
+  defaultValues: {
+    type: "inline-size"
+  },
+  transform(props) {
+    const { name, type, ...rest } = props;
+    return {
+      containerType: type,
+      containerName: name,
+      ...rest
+    };
+  }
+});
+var patterns = {
+  box,
+  flex,
+  stack,
+  vstack,
+  hstack,
+  spacer,
+  square,
+  circle,
+  center,
+  linkOverlay,
+  aspectRatio,
+  grid,
+  gridItem,
+  wrap,
+  container,
+  divider,
+  float,
+  bleed,
+  visuallyHidden,
+  cq
+};
+
+// src/color-mix-transform.ts
+var createColorMixTransform = (prop) => (value, args) => {
+  const mix = args.utils.colorMix(value);
+  if (mix.invalid) return { [prop]: value };
+  const cssVar = "--mix-" + prop;
+  return {
+    [cssVar]: mix.value,
+    [prop]: `var(${cssVar}, ${mix.color})`
+  };
+};
+
+// src/utilities/background.ts
+var background = {
+  backgroundPosition: {
+    shorthand: "bgPosition",
+    className: "bg-p",
+    group: "Background"
+  },
+  backgroundPositionX: {
+    shorthand: "bgPositionX",
+    className: "bg-p-x",
+    group: "Background"
+  },
+  backgroundPositionY: {
+    shorthand: "bgPositionY",
+    className: "bg-p-y",
+    group: "Background"
+  },
+  backgroundAttachment: {
+    shorthand: "bgAttachment",
+    className: "bg-a",
+    group: "Background"
+  },
+  backgroundClip: {
+    shorthand: "bgClip",
+    className: "bg-cp",
+    group: "Background",
+    transform(value) {
+      return {
+        backgroundClip: value,
+        WebkitBackgroundClip: value
+      };
+    }
+  },
+  background: {
+    shorthand: "bg",
+    className: "bg",
+    values: "colors",
+    group: "Background",
+    transform: createColorMixTransform("background")
+  },
+  backgroundColor: {
+    shorthand: "bgColor",
+    className: "bg-c",
+    values: "colors",
+    group: "Background",
+    transform: createColorMixTransform("backgroundColor")
+  },
+  backgroundOrigin: {
+    shorthand: "bgOrigin",
+    className: "bg-o",
+    group: "Background"
+  },
+  backgroundImage: {
+    shorthand: "bgImage",
+    className: "bg-i",
+    values: "assets",
+    group: "Background"
+  },
+  backgroundRepeat: {
+    shorthand: "bgRepeat",
+    className: "bg-r",
+    group: "Background"
+  },
+  backgroundBlendMode: {
+    shorthand: "bgBlendMode",
+    className: "bg-bm",
+    group: "Background"
+  },
+  backgroundSize: {
+    shorthand: "bgSize",
+    className: "bg-s",
+    group: "Background"
+  }
+};
+
+// src/utilities/border.ts
+var border = {
+  // Border Radius
+  borderRadius: {
+    className: "bdr",
+    shorthand: "rounded",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderTopLeftRadius: {
+    className: "bdr-tl",
+    shorthand: "roundedTopLeft",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderTopRightRadius: {
+    className: "bdr-tr",
+    shorthand: "roundedTopRight",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderBottomRightRadius: {
+    className: "bdr-br",
+    shorthand: "roundedBottomRight",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderBottomLeftRadius: {
+    className: "bdr-bl",
+    shorthand: "roundedBottomLeft",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderTopRadius: {
+    className: "bdr-t",
+    shorthand: "roundedTop",
+    property: "borderRadius",
+    values: "radii",
+    group: "Border Radius",
+    transform(value) {
+      return {
+        borderTopLeftRadius: value,
+        borderTopRightRadius: value
+      };
+    }
+  },
+  borderRightRadius: {
+    className: "bdr-r",
+    shorthand: "roundedRight",
+    property: "borderRadius",
+    values: "radii",
+    group: "Border Radius",
+    transform(value) {
+      return {
+        borderTopRightRadius: value,
+        borderBottomRightRadius: value
+      };
+    }
+  },
+  borderBottomRadius: {
+    className: "bdr-b",
+    shorthand: "roundedBottom",
+    property: "borderRadius",
+    values: "radii",
+    group: "Border Radius",
+    transform(value) {
+      return {
+        borderBottomLeftRadius: value,
+        borderBottomRightRadius: value
+      };
+    }
+  },
+  borderLeftRadius: {
+    className: "bdr-l",
+    shorthand: "roundedLeft",
+    values: "radii",
+    property: "borderRadius",
+    group: "Border Radius",
+    transform(value) {
+      return {
+        borderTopLeftRadius: value,
+        borderBottomLeftRadius: value
+      };
+    }
+  },
+  borderStartStartRadius: {
+    className: "bdr-ss",
+    shorthand: "roundedStartStart",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderStartEndRadius: {
+    className: "bdr-se",
+    shorthand: "roundedStartEnd",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderStartRadius: {
+    className: "bdr-s",
+    values: "radii",
+    property: "borderRadius",
+    shorthand: "roundedStart",
+    group: "Border Radius",
+    transform(value) {
+      return {
+        borderStartStartRadius: value,
+        borderEndStartRadius: value
+      };
+    }
+  },
+  borderEndStartRadius: {
+    className: "bdr-es",
+    shorthand: "roundedEndStart",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderEndEndRadius: {
+    className: "bdr-ee",
+    shorthand: "roundedEndEnd",
+    values: "radii",
+    group: "Border Radius"
+  },
+  borderEndRadius: {
+    className: "bdr-e",
+    shorthand: "roundedEnd",
+    property: "borderRadius",
+    values: "radii",
+    group: "Border Radius",
+    transform(value) {
+      return {
+        borderStartEndRadius: value,
+        borderEndEndRadius: value
+      };
+    }
+  },
+  // Border
+  border: {
+    className: "bd",
+    values: "borders",
+    group: "Border"
+  },
+  borderWidth: {
+    className: "bd-w",
+    values: "borderWidths",
+    group: "Border Radius"
+  },
+  borderTopWidth: {
+    className: "bd-t-w",
+    values: "borderWidths",
+    group: "Border"
+  },
+  borderLeftWidth: {
+    className: "bd-l-w",
+    values: "borderWidths",
+    group: "Border"
+  },
+  borderRightWidth: {
+    className: "bd-r-w",
+    values: "borderWidths",
+    group: "Border"
+  },
+  borderBottomWidth: {
+    className: "bd-b-w",
+    values: "borderWidths",
+    group: "Border"
+  },
+  borderBlockStartWidth: {
+    className: "bd-bs-w",
+    values: "borderWidths",
+    group: "Border Radius"
+  },
+  borderBlockEndWidth: {
+    className: "bd-be-w",
+    values: "borderWidths",
+    group: "Border Radius"
+  },
+  borderColor: {
+    className: "bd-c",
+    values: "colors",
+    group: "Border",
+    transform: createColorMixTransform("borderColor")
+  },
+  borderInline: {
+    className: "bd-x",
+    values: "borders",
+    group: "Border",
+    shorthand: "borderX"
+  },
+  borderInlineWidth: {
+    className: "bd-x-w",
+    values: "borderWidths",
+    group: "Border",
+    shorthand: "borderXWidth"
+  },
+  borderInlineColor: {
+    className: "bd-x-c",
+    values: "colors",
+    group: "Border",
+    shorthand: "borderXColor",
+    transform: createColorMixTransform("borderInlineColor")
+  },
+  borderBlock: {
+    className: "bd-y",
+    values: "borders",
+    group: "Border",
+    shorthand: "borderY"
+  },
+  borderBlockWidth: {
+    className: "bd-y-w",
+    values: "borderWidths",
+    group: "Border",
+    shorthand: "borderYWidth"
+  },
+  borderBlockColor: {
+    className: "bd-y-c",
+    values: "colors",
+    group: "Border",
+    shorthand: "borderYColor",
+    transform: createColorMixTransform("borderBlockColor")
+  },
+  borderLeft: {
+    className: "bd-l",
+    values: "borders",
+    group: "Border"
+  },
+  borderLeftColor: {
+    className: "bd-l-c",
+    values: "colors",
+    group: "Border",
+    transform: createColorMixTransform("borderLeftColor")
+  },
+  borderInlineStart: {
+    className: "bd-s",
+    values: "borders",
+    group: "Border",
+    shorthand: "borderStart"
+  },
+  borderInlineStartWidth: {
+    className: "bd-s-w",
+    values: "borderWidths",
+    group: "Border",
+    shorthand: "borderStartWidth"
+  },
+  borderInlineStartColor: {
+    className: "bd-s-c",
+    values: "colors",
+    group: "Border",
+    shorthand: "borderStartColor",
+    transform: createColorMixTransform("borderInlineStartColor")
+  },
+  borderRight: {
+    className: "bd-r",
+    values: "borders",
+    group: "Border"
+  },
+  borderRightColor: {
+    className: "bd-r-c",
+    values: "colors",
+    group: "Border",
+    transform: createColorMixTransform("borderRightColor")
+  },
+  borderInlineEnd: {
+    className: "bd-e",
+    values: "borders",
+    group: "Border",
+    shorthand: "borderEnd"
+  },
+  borderInlineEndWidth: {
+    className: "bd-e-w",
+    values: "borderWidths",
+    group: "Border",
+    shorthand: "borderEndWidth"
+  },
+  borderInlineEndColor: {
+    className: "bd-e-c",
+    values: "colors",
+    group: "Border",
+    shorthand: "borderEndColor",
+    transform: createColorMixTransform("borderInlineEndColor")
+  },
+  borderTop: {
+    className: "bd-t",
+    values: "borders",
+    group: "Border"
+  },
+  borderTopColor: {
+    className: "bd-t-c",
+    values: "colors",
+    group: "Border",
+    transform: createColorMixTransform("borderTopColor")
+  },
+  borderBottom: {
+    className: "bd-b",
+    values: "borders",
+    group: "Border"
+  },
+  borderBottomColor: {
+    className: "bd-b-c",
+    values: "colors",
+    group: "Border",
+    transform: createColorMixTransform("borderBottomColor")
+  },
+  borderBlockEnd: {
+    className: "bd-be",
+    values: "borders",
+    group: "Border"
+  },
+  borderBlockEndColor: {
+    className: "bd-be-c",
+    values: "colors",
+    group: "Border",
+    transform: createColorMixTransform("borderBlockEndColor")
+  },
+  borderBlockStart: {
+    className: "bd-bs",
+    values: "borders",
+    group: "Border"
+  },
+  borderBlockStartColor: {
+    className: "bd-bs-c",
+    values: "colors",
+    group: "Border",
+    transform: createColorMixTransform("borderBlockStartColor")
+  }
+};
+
+// src/utilities/container.ts
+var container2 = {
+  container: {
+    className: "cq",
+    group: "Container"
+  },
+  containerName: {
+    className: "cq-n",
+    property: "containerName",
+    values: "containerNames",
+    group: "Container"
+  },
+  containerType: {
+    className: "cq-t",
+    group: "Container"
+  }
+};
+
+// src/utilities/cursor.ts
+var cursor = {
+  cursor: {
+    className: "cursor",
+    values: "cursor",
+    group: "System"
+  }
+};
+
+// src/utilities/display.ts
+var display = {
+  display: {
+    className: "d",
+    group: "Display"
+  },
+  hideFrom: {
+    className: "hide",
+    values: "breakpoints",
+    group: "Display",
+    transform(value, { raw, token }) {
+      const bp = token.raw(`breakpoints.${raw}`);
+      const media = bp ? `@breakpoint ${raw}` : `@media screen and (min-width: ${value})`;
+      return {
+        [media]: {
+          display: "none"
+        }
+      };
+    }
+  },
+  hideBelow: {
+    className: "show",
+    values: "breakpoints",
+    group: "Display",
+    transform(value, { raw, token }) {
+      const bp = token.raw(`breakpoints.${raw}`);
+      const media = bp ? `@breakpoint ${raw}Down` : `@media screen and (max-width: ${value})`;
+      return {
+        [media]: {
+          display: "none"
+        }
+      };
+    }
+  }
+};
+
+// src/utilities/divide.ts
+var divideColor = createColorMixTransform("borderColor");
+var divide = {
+  divideX: {
+    className: "dvd-x",
+    values: "borderWidths",
+    group: "Border",
+    transform(value) {
+      return {
+        "& > :not([hidden]) ~ :not([hidden])": {
+          borderInlineStartWidth: value,
+          borderInlineEndWidth: "0px"
+        }
+      };
+    }
+  },
+  divideY: {
+    className: "dvd-y",
+    values: "borderWidths",
+    group: "Border",
+    transform(value) {
+      return {
+        "& > :not([hidden]) ~ :not([hidden])": {
+          borderTopWidth: value,
+          borderBottomWidth: "0px"
+        }
+      };
+    }
+  },
+  divideColor: {
+    className: "dvd-c",
+    values: "colors",
+    group: "Border",
+    transform(value, args) {
+      return {
+        "& > :not([hidden]) ~ :not([hidden])": divideColor(value, args)
+      };
+    }
+  },
+  divideStyle: {
+    className: "dvd-s",
+    property: "borderStyle",
+    group: "Border",
+    transform(value) {
+      return {
+        "& > :not([hidden]) ~ :not([hidden])": {
+          borderStyle: value
+        }
+      };
+    }
+  }
+};
+
+// src/utilities/effects.ts
+var effects = {
+  opacity: {
+    className: "op",
+    values: "opacity",
+    group: "Background"
+  },
+  boxShadow: {
+    shorthand: "shadow",
+    className: "bx-sh",
+    values: "shadows",
+    group: "Shadow"
+  },
+  boxShadowColor: {
+    shorthand: "shadowColor",
+    className: "bx-sh-c",
+    values: "colors",
+    transform: createColorMixTransform("--shadow-color"),
+    group: "Color"
+  },
+  mixBlendMode: {
+    className: "mix-bm",
+    group: "Effect"
+  },
+  filter: {
+    className: "filter",
+    group: "Effect",
+    values: {
+      auto: "var(--blur, ) var(--brightness, ) var(--contrast, ) var(--grayscale, ) var(--hue-rotate, ) var(--invert, ) var(--saturate, ) var(--sepia, ) var(--drop-shadow, )"
+    }
+  },
+  brightness: {
+    className: "brightness",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--brightness": `brightness(${value})`
+      };
+    }
+  },
+  contrast: {
+    className: "contrast",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--contrast": `contrast(${value})`
+      };
+    }
+  },
+  grayscale: {
+    className: "grayscale",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--grayscale": `grayscale(${value})`
+      };
+    }
+  },
+  hueRotate: {
+    className: "hue-rotate",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--hue-rotate": `hue-rotate(${value})`
+      };
+    }
+  },
+  invert: {
+    className: "invert",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--invert": `invert(${value})`
+      };
+    }
+  },
+  saturate: {
+    className: "saturate",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--saturate": `saturate(${value})`
+      };
+    }
+  },
+  sepia: {
+    className: "sepia",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--sepia": `sepia(${value})`
+      };
+    }
+  },
+  dropShadow: {
+    className: "drop-shadow",
+    group: "Effect",
+    values: "dropShadows",
+    transform(value) {
+      return {
+        "--drop-shadow": value
+      };
+    }
+  },
+  blur: {
+    className: "blur",
+    group: "Effect",
+    values: "blurs",
+    transform(value) {
+      return {
+        "--blur": `blur(${value})`
+      };
+    }
+  },
+  backdropFilter: {
+    className: "bkdp",
+    group: "Effect",
+    values: {
+      auto: "var(--backdrop-blur, ) var(--backdrop-brightness, ) var(--backdrop-contrast, ) var(--backdrop-grayscale, ) var(--backdrop-hue-rotate, ) var(--backdrop-invert, ) var(--backdrop-opacity, ) var(--backdrop-saturate, ) var(--backdrop-sepia, )"
+    },
+    transform(value) {
+      return {
+        backdropFilter: value,
+        WebkitBackdropFilter: value
+      };
+    }
+  },
+  backdropBlur: {
+    className: "bkdp-blur",
+    group: "Effect",
+    values: "blurs",
+    transform(value) {
+      return {
+        "--backdrop-blur": `blur(${value})`
+      };
+    }
+  },
+  backdropBrightness: {
+    className: "bkdp-brightness",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-brightness": `brightness(${value})`
+      };
+    }
+  },
+  backdropContrast: {
+    className: "bkdp-contrast",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-contrast": `contrast(${value})`
+      };
+    }
+  },
+  backdropGrayscale: {
+    className: "bkdp-grayscale",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-grayscale": `grayscale(${value})`
+      };
+    }
+  },
+  backdropHueRotate: {
+    className: "bkdp-hue-rotate",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-hue-rotate": `hue-rotate(${value})`
+      };
+    }
+  },
+  backdropInvert: {
+    className: "bkdp-invert",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-invert": `invert(${value})`
+      };
+    }
+  },
+  backdropOpacity: {
+    className: "bkdp-opacity",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-opacity": value
+      };
+    }
+  },
+  backdropSaturate: {
+    className: "bkdp-saturate",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-saturate": `saturate(${value})`
+      };
+    }
+  },
+  backdropSepia: {
+    className: "bkdp-sepia",
+    group: "Effect",
+    transform(value) {
+      return {
+        "--backdrop-sepia": `sepia(${value})`
+      };
+    }
+  }
+};
+
+// src/utilities/flex-and-grid.ts
+var flexGrid = {
+  flexBasis: {
+    className: "flex-b",
+    group: "Flex Layout",
+    values(theme) {
+      return {
+        ...theme("sizes"),
+        "1/2": "50%",
+        "1/3": "33.333333%",
+        "2/3": "66.666667%",
+        "1/4": "25%",
+        "2/4": "50%",
+        "3/4": "75%",
+        "1/5": "20%",
+        "2/5": "40%",
+        "3/5": "60%",
+        "4/5": "80%",
+        "1/6": "16.666667%",
+        "2/6": "33.333333%",
+        "3/6": "50%",
+        "4/6": "66.666667%",
+        "5/6": "83.333333%",
+        "1/12": "8.333333%",
+        "2/12": "16.666667%",
+        "3/12": "25%",
+        "4/12": "33.333333%",
+        "5/12": "41.666667%",
+        "6/12": "50%",
+        "7/12": "58.333333%",
+        "8/12": "66.666667%",
+        "9/12": "75%",
+        "10/12": "83.333333%",
+        "11/12": "91.666667%",
+        full: "100%"
+      };
+    }
+  },
+  flex: {
+    className: "flex",
+    group: "Flex Layout",
+    values: {
+      "1": "1 1 0%",
+      auto: "1 1 auto",
+      initial: "0 1 auto",
+      none: "none"
+    }
+  },
+  flexDirection: {
+    className: "flex-d",
+    group: "Flex Layout",
+    shorthand: "flexDir"
+  },
+  flexGrow: {
+    className: "flex-g",
+    group: "Flex Layout"
+  },
+  flexShrink: {
+    className: "flex-sh",
+    group: "Flex Layout"
+  },
+  gridTemplateColumns: {
+    className: "grid-tc",
+    group: "Grid Layout"
+  },
+  gridTemplateRows: {
+    className: "grid-tr",
+    group: "Grid Layout"
+  },
+  gridColumn: {
+    className: "grid-c",
+    group: "Grid Layout"
+  },
+  gridRow: {
+    className: "grid-r",
+    group: "Grid Layout"
+  },
+  gridColumnStart: {
+    className: "grid-cs",
+    group: "Grid Layout"
+  },
+  gridColumnEnd: {
+    className: "grid-ce",
+    group: "Grid Layout"
+  },
+  gridAutoFlow: {
+    className: "grid-af",
+    group: "Grid Layout"
+  },
+  gridAutoColumns: {
+    className: "grid-ac",
+    group: "Grid Layout",
+    values: {
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    }
+  },
+  gridAutoRows: {
+    className: "grid-ar",
+    group: "Grid Layout",
+    values: {
+      min: "min-content",
+      max: "max-content",
+      fr: "minmax(0, 1fr)"
+    }
+  },
+  gap: {
+    className: "gap",
+    group: "Flex Layout",
+    values: "spacing"
+  },
+  gridGap: {
+    className: "grid-g",
+    group: "Grid Layout",
+    values: "spacing"
+  },
+  gridRowGap: {
+    className: "grid-rg",
+    group: "Grid Layout",
+    values: "spacing"
+  },
+  gridColumnGap: {
+    className: "grid-cg",
+    group: "Grid Layout",
+    values: "spacing"
+  },
+  rowGap: {
+    className: "rg",
+    group: "Grid Layout",
+    values: "spacing"
+  },
+  columnGap: {
+    className: "cg",
+    group: "Grid Layout",
+    values: "spacing"
+  },
+  justifyContent: {
+    className: "jc",
+    group: "Flex Layout"
+  },
+  alignContent: {
+    className: "ac",
+    group: "Flex Layout"
+  },
+  alignItems: {
+    className: "ai",
+    group: "Flex Layout"
+  },
+  alignSelf: {
+    className: "as",
+    group: "Flex Layout"
+  }
+};
+
+// src/utilities/focus-ring.ts
+function createFocusRing(selector, className) {
+  return {
+    className,
+    group: "Focus Ring",
+    values: ["outside", "inside", "mixed", "none"],
+    transform(value) {
+      const fallback = "var(--global-color-focus-ring, #005FCC)";
+      const focusRingColor = `var(--focus-ring-color-prop, ${fallback})`;
+      switch (value) {
+        case "inside":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outlineOffset: "0px",
+              outlineWidth: "var(--focus-ring-width, 1px)",
+              outlineColor: "var(--focus-ring-color)",
+              outlineStyle: "var(--focus-ring-style, solid)",
+              borderColor: "var(--focus-ring-color)"
+            }
+          };
+        case "outside":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outlineWidth: "var(--focus-ring-width, 2px)",
+              outlineOffset: "var(--focus-ring-offset, 2px)",
+              outlineStyle: "var(--focus-ring-style, solid)",
+              outlineColor: "var(--focus-ring-color)"
+            }
+          };
+        case "mixed":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outlineOffset: "0px",
+              outlineWidth: "var(--focus-ring-width, 3px)",
+              outlineStyle: "var(--focus-ring-style, solid)",
+              outlineColor: "color-mix(in srgb, var(--focus-ring-color), transparent 60%)",
+              borderColor: "var(--focus-ring-color)"
+            }
+          };
+        case "none":
+          return {
+            "--focus-ring-color": focusRingColor,
+            [selector]: {
+              outline: "none"
+            }
+          };
+        default:
+          return {};
+      }
+    }
+  };
+}
+var focusRing = {
+  focusRing: createFocusRing("&:is(:focus, [data-focus])", "focus-ring"),
+  focusVisibleRing: createFocusRing("&:is(:focus-visible, [data-focus-visible])", "focus-v-ring"),
+  focusRingColor: {
+    className: "focus-ring-c",
+    values: "colors",
+    group: "Focus Ring",
+    transform(value, { utils }) {
+      const prop = "--focus-ring-color-prop";
+      const mix = utils.colorMix(value);
+      if (mix.invalid) return { [prop]: value };
+      const cssVar = "--mix-" + prop;
+      return {
+        [cssVar]: mix.value,
+        [prop]: `var(${cssVar}, ${mix.color})`
+      };
+    }
+  },
+  focusRingOffset: {
+    className: "focus-ring-o",
+    values: "spacing",
+    group: "Focus Ring",
+    transform: (v) => ({ "--focus-ring-offset": v })
+  },
+  focusRingWidth: {
+    className: "focus-ring-w",
+    values: "borderWidths",
+    property: "outlineWidth",
+    group: "Focus Ring",
+    transform: (v) => ({ "--focus-ring-width": v })
+  },
+  focusRingStyle: {
+    className: "focus-ring-s",
+    values: "borderStyles",
+    property: "outlineStyle",
+    group: "Focus Ring",
+    transform: (v) => ({ "--focus-ring-style": v })
+  }
+};
+
+// src/utilities/gradient.ts
+var gradientVia = createColorMixTransform("--gradient-via");
+var linearGradientDirectionMap = /* @__PURE__ */ new Map([
+  ["to-t", "to top"],
+  ["to-tr", "to top right"],
+  ["to-r", "to right"],
+  ["to-br", "to bottom right"],
+  ["to-b", "to bottom"],
+  ["to-bl", "to bottom left"],
+  ["to-l", "to left"],
+  ["to-tl", "to top left"]
+]);
+var isGradientShortcut = (value) => linearGradientDirectionMap.has(value);
+var linearGradientValues = (theme) => {
+  return {
+    ...theme("gradients"),
+    ...Object.fromEntries(linearGradientDirectionMap.entries())
+  };
+};
+var gradientStops = "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))";
+var gradientViaStops = "var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)";
+var backgroundGradients = {
+  backgroundGradient: {
+    shorthand: "bgGradient",
+    className: "bg-grad",
+    group: "Background Gradient",
+    values: linearGradientValues,
+    transform(value, { raw, token }) {
+      const tokenValue = token(`gradients.${raw}`);
+      if (tokenValue) {
+        return { backgroundImage: tokenValue };
+      }
+      if (!isGradientShortcut(raw)) {
+        return { backgroundImage: value };
+      }
+      return {
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(raw),
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
+      };
+    }
+  },
+  backgroundLinear: {
+    shorthand: "bgLinear",
+    className: "bg-linear",
+    group: "Background Gradient",
+    values: linearGradientValues,
+    transform(value, { raw, token }) {
+      const tokenValue = token(`gradients.${raw}`);
+      if (tokenValue) {
+        return { backgroundImage: tokenValue };
+      }
+      if (!isGradientShortcut(raw)) {
+        return { backgroundImage: value };
+      }
+      return {
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(raw),
+        backgroundImage: `linear-gradient(var(--gradient-stops))`
+      };
+    }
+  },
+  backgroundRadial: {
+    shorthand: "bgRadial",
+    className: "bg-radial",
+    group: "Background Gradient",
+    values: "gradients",
+    transform(value, { raw, token }) {
+      const tokenValue = token(`gradients.${raw}`);
+      if (tokenValue) {
+        return { backgroundImage: tokenValue };
+      }
+      return {
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `radial-gradient(var(--gradient-stops,${value}))`
+      };
+    }
+  },
+  backgroundConic: {
+    shorthand: "bgConic",
+    className: "bg-conic",
+    group: "Background Gradient",
+    transform(value) {
+      return {
+        "--gradient-stops": gradientStops,
+        "--gradient-position": value,
+        backgroundImage: `conic-gradient(var(--gradient-stops))`
+      };
+    }
+  },
+  textGradient: {
+    className: "txt-grad",
+    group: "Background Gradient",
+    values: linearGradientValues,
+    transform(value, { raw, token }) {
+      const tokenValue = token(`gradients.${raw}`);
+      if (tokenValue) {
+        return {
+          backgroundImage: tokenValue,
+          WebkitBackgroundClip: "text",
+          color: "transparent"
+        };
+      }
+      if (!isGradientShortcut(raw)) {
+        return {
+          backgroundImage: value,
+          WebkitBackgroundClip: "text",
+          color: "transparent"
+        };
+      }
+      return {
+        "--gradient-stops": gradientStops,
+        "--gradient-position": linearGradientDirectionMap.get(raw),
+        backgroundImage: `linear-gradient(var(--gradient-stops))`,
+        WebkitBackgroundClip: "text",
+        color: "transparent"
+      };
+    }
+  },
+  gradientFromPosition: {
+    className: "grad-from-pos",
+    group: "Background Gradient",
+    transform(value) {
+      return {
+        "--gradient-from-position": value
+      };
+    }
+  },
+  gradientToPosition: {
+    className: "grad-to-pos",
+    group: "Background Gradient",
+    transform(value) {
+      return {
+        "--gradient-to-position": value
+      };
+    }
+  },
+  gradientFrom: {
+    className: "grad-from",
+    values: "colors",
+    group: "Background Gradient",
+    transform: createColorMixTransform("--gradient-from")
+  },
+  gradientTo: {
+    className: "grad-to",
+    values: "colors",
+    group: "Background Gradient",
+    transform: createColorMixTransform("--gradient-to")
+  },
+  gradientVia: {
+    className: "grad-via",
+    values: "colors",
+    group: "Background Gradient",
+    transform(value, args) {
+      const transformed = gradientVia(value, args);
+      return {
+        ...transformed,
+        "--gradient-stops": "var(--gradient-via-stops)",
+        "--gradient-via-stops": gradientViaStops
+      };
+    }
+  },
+  gradientViaPosition: {
+    className: "grad-via-pos",
+    group: "Background Gradient",
+    transform(value) {
+      return {
+        "--gradient-via-position": value
+      };
+    }
+  }
+};
+
+// src/utilities/helpers.ts
+var srMapping = {
+  true: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: "0",
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: "0"
+  },
+  false: {
+    position: "static",
+    width: "auto",
+    height: "auto",
+    padding: "0",
+    margin: "0",
+    overflow: "visible",
+    clip: "auto",
+    whiteSpace: "normal"
+  }
+};
+var helpers = {
+  srOnly: {
+    className: "sr",
+    values: { type: "boolean" },
+    group: "Other",
+    transform(value) {
+      return srMapping[value] || {};
+    }
+  },
+  debug: {
+    className: "debug",
+    values: { type: "boolean" },
+    group: "Other",
+    transform(value) {
+      if (!value) return {};
+      return {
+        outline: "1px solid blue !important",
+        "&>*": {
+          outline: "1px solid red !important"
+        }
+      };
+    }
+  }
+};
+
+// src/utilities/interactivity.ts
+var interactivity = {
+  accentColor: {
+    className: "ac-c",
+    values: "colors",
+    transform: createColorMixTransform("accentColor"),
+    group: "Color"
+  },
+  caretColor: {
+    className: "ca-c",
+    values: "colors",
+    group: "Color",
+    transform: createColorMixTransform("caretColor")
+  },
+  scrollBehavior: {
+    className: "scr-bhv",
+    group: "Scroll"
+  },
+  // Scroll bar
+  scrollbar: {
+    className: "scr-bar",
+    values: ["visible", "hidden"],
+    group: "Scroll",
+    transform(value) {
+      if (value === "visible") {
+        return {
+          msOverflowStyle: "auto",
+          scrollbarWidth: "auto",
+          "&::-webkit-scrollbar": {
+            display: "block"
+          }
+        };
+      }
+      if (value === "hidden") {
+        return {
+          msOverflowStyle: "none",
+          scrollbarWidth: "none",
+          "&::-webkit-scrollbar": {
+            display: "none"
+          }
+        };
+      }
+    }
+  },
+  scrollbarColor: {
+    className: "scr-bar-c",
+    values: "colors",
+    group: "Scroll",
+    transform: createColorMixTransform("scrollbarColor")
+  },
+  scrollbarGutter: {
+    className: "scr-bar-g",
+    group: "Scroll"
+  },
+  scrollbarWidth: {
+    className: "scr-bar-w",
+    values: "sizes",
+    group: "Scroll"
+  },
+  // Scroll Margin
+  scrollMargin: {
+    className: "scr-m",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginLeft: {
+    className: "scr-ml",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginRight: {
+    className: "scr-mr",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginTop: {
+    className: "scr-mt",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginBottom: {
+    className: "scr-mb",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginBlock: {
+    className: "scr-my",
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollMarginY"]
+  },
+  scrollMarginBlockEnd: {
+    className: "scr-mbe",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginBlockStart: {
+    className: "scr-mbt",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginInline: {
+    className: "scr-mx",
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollMarginX"]
+  },
+  scrollMarginInlineEnd: {
+    className: "scr-me",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollMarginInlineStart: {
+    className: "scr-ms",
+    values: "spacing",
+    group: "Scroll"
+  },
+  // Scroll Padding
+  scrollPadding: {
+    className: "scr-p",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollPaddingBlock: {
+    className: "scr-py",
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollPaddingY"]
+  },
+  scrollPaddingBlockStart: {
+    className: "scr-pbs",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollPaddingBlockEnd: {
+    className: "scr-pbe",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollPaddingInline: {
+    className: "scr-px",
+    values: "spacing",
+    group: "Scroll",
+    shorthand: ["scrollPaddingX"]
+  },
+  scrollPaddingInlineEnd: {
+    className: "scr-pe",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollPaddingInlineStart: {
+    className: "scr-ps",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollPaddingLeft: {
+    className: "scr-pl",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollPaddingRight: {
+    className: "scr-pr",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollPaddingTop: {
+    className: "scr-pt",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollPaddingBottom: {
+    className: "scr-pb",
+    values: "spacing",
+    group: "Scroll"
+  },
+  // Scroll Snap
+  scrollSnapAlign: {
+    className: "scr-sa",
+    group: "Scroll"
+  },
+  scrollSnapStop: {
+    className: "scrs-s",
+    group: "Scroll"
+  },
+  scrollSnapType: {
+    className: "scrs-t",
+    group: "Scroll",
+    values: {
+      none: "none",
+      x: "x var(--scroll-snap-strictness)",
+      y: "y var(--scroll-snap-strictness)",
+      both: "both var(--scroll-snap-strictness)"
+    }
+  },
+  scrollSnapStrictness: {
+    className: "scrs-strt",
+    values: ["mandatory", "proximity"],
+    group: "Scroll",
+    transform(value) {
+      return {
+        "--scroll-snap-strictness": value
+      };
+    }
+  },
+  scrollSnapMargin: {
+    className: "scrs-m",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollSnapMarginTop: {
+    className: "scrs-mt",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollSnapMarginBottom: {
+    className: "scrs-mb",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollSnapMarginLeft: {
+    className: "scrs-ml",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollSnapMarginRight: {
+    className: "scrs-mr",
+    values: "spacing",
+    group: "Scroll"
+  },
+  scrollSnapCoordinate: {
+    className: "scrs-c",
+    group: "Scroll"
+  },
+  scrollSnapDestination: {
+    className: "scrs-d",
+    group: "Scroll"
+  },
+  scrollSnapPointsX: {
+    className: "scrs-px",
+    group: "Scroll"
+  },
+  scrollSnapPointsY: {
+    className: "scrs-py",
+    group: "Scroll"
+  },
+  scrollSnapTypeX: {
+    className: "scrs-tx",
+    group: "Scroll"
+  },
+  scrollSnapTypeY: {
+    className: "scrs-ty",
+    group: "Scroll"
+  },
+  // Scroll Timeline
+  scrollTimeline: {
+    className: "scrtl",
+    group: "Scroll"
+  },
+  scrollTimelineAxis: {
+    className: "scrtl-a",
+    group: "Scroll"
+  },
+  scrollTimelineName: {
+    className: "scrtl-n",
+    group: "Scroll"
+  },
+  touchAction: {
+    className: "tch-a",
+    group: "Interactivity"
+  },
+  userSelect: {
+    className: "us",
+    group: "Interactivity",
+    transform(value) {
+      return {
+        WebkitUserSelect: value,
+        userSelect: value
+      };
+    }
+  },
+  // Overflow
+  overflow: {
+    className: "ov",
+    group: "Scroll"
+  },
+  overflowWrap: {
+    className: "ov-wrap",
+    group: "Scroll"
+  },
+  overflowX: {
+    className: "ov-x",
+    group: "Scroll"
+  },
+  overflowY: {
+    className: "ov-y",
+    group: "Scroll"
+  },
+  overflowAnchor: {
+    className: "ov-a",
+    group: "Scroll"
+  },
+  overflowBlock: {
+    className: "ov-b",
+    group: "Scroll"
+  },
+  overflowInline: {
+    className: "ov-i",
+    group: "Scroll"
+  },
+  overflowClipBox: {
+    className: "ovcp-bx",
+    group: "Scroll"
+  },
+  overflowClipMargin: {
+    className: "ovcp-m",
+    group: "Scroll"
+  },
+  overscrollBehavior: {
+    className: "ovs-b",
+    group: "Scroll"
+  },
+  overscrollBehaviorX: {
+    className: "ovs-bx",
+    group: "Scroll"
+  },
+  overscrollBehaviorY: {
+    className: "ovs-by",
+    group: "Scroll"
+  },
+  overscrollBehaviorBlock: {
+    className: "ovs-bb",
+    group: "Scroll"
+  },
+  overscrollBehaviorInline: {
+    className: "ovs-bi",
+    group: "Scroll"
+  }
+};
+
+// src/utilities/layout.ts
+var layout = {
+  aspectRatio: {
+    className: "asp",
+    values: "aspectRatios",
+    group: "Layout"
+  },
+  boxDecorationBreak: {
+    className: "bx-db",
+    group: "Layout",
+    transform(value) {
+      return {
+        boxDecorationBreak: value,
+        WebkitBoxDecorationBreak: value
+      };
+    }
+  },
+  zIndex: {
+    className: "z",
+    values: "zIndex",
+    group: "Visibility"
+  },
+  boxSizing: {
+    className: "bx-s",
+    group: "System"
+  },
+  objectPosition: {
+    className: "obj-p",
+    group: "Layout"
+  },
+  objectFit: {
+    className: "obj-f",
+    group: "Layout"
+  },
+  overscrollBehavior: {
+    className: "ovscl",
+    group: "Scroll"
+  },
+  overscrollBehaviorX: {
+    className: "ovscl-x",
+    group: "Scroll"
+  },
+  overscrollBehaviorY: {
+    className: "ovscl-y",
+    group: "Scroll"
+  },
+  position: {
+    className: "pos",
+    shorthand: "pos",
+    group: "Position"
+  },
+  top: {
+    className: "top",
+    values: "spacing",
+    group: "Position"
+  },
+  left: {
+    className: "left",
+    values: "spacing",
+    group: "Position"
+  },
+  inset: {
+    className: "inset",
+    group: "Position",
+    values: (theme) => ({
+      auto: "auto",
+      ...theme("spacing")
+    })
+  },
+  insetInline: {
+    className: "inset-x",
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetX"]
+  },
+  insetBlock: {
+    className: "inset-y",
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetY"]
+  },
+  insetBlockEnd: {
+    className: "inset-be",
+    values: "spacing",
+    group: "Position"
+  },
+  insetBlockStart: {
+    className: "inset-bs",
+    values: "spacing",
+    group: "Position"
+  },
+  insetInlineEnd: {
+    className: "inset-e",
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetEnd", "end"]
+  },
+  insetInlineStart: {
+    className: "inset-s",
+    values: "spacing",
+    group: "Position",
+    shorthand: ["insetStart", "start"]
+  },
+  right: {
+    className: "right",
+    values: "spacing",
+    group: "Position"
+  },
+  bottom: {
+    className: "bottom",
+    values: "spacing",
+    group: "Position"
+  },
+  float: {
+    className: "float",
+    values: ["start", "end"],
+    property: "float",
+    group: "Position",
+    transform(value) {
+      if (value === "start") {
+        return {
+          float: "left",
+          '[dir="rtl"] &': {
+            float: "right"
+          }
+        };
+      }
+      if (value === "end") {
+        return {
+          float: "right",
+          '[dir="rtl"] &': {
+            float: "left"
+          }
+        };
+      }
+      return {
+        float: value
+      };
+    }
+  },
+  visibility: {
+    className: "vis",
+    group: "Visibility"
+  }
+};
+
+// src/utilities/list.ts
+var list = {
+  listStyleType: {
+    className: "li-t",
+    group: "List"
+  },
+  listStylePosition: {
+    className: "li-pos",
+    group: "List"
+  },
+  listStyleImage: {
+    className: "li-img",
+    group: "List",
+    values: "assets"
+  },
+  listStyle: {
+    className: "li-s",
+    group: "List"
+  }
+};
+
+// src/utilities/outline.ts
+var outline = {
+  outlineWidth: {
+    className: "ring-w",
+    shorthand: "ringWidth",
+    values: "borderWidths",
+    group: "Border"
+  },
+  outlineColor: {
+    className: "ring-c",
+    values: "colors",
+    group: "Color",
+    shorthand: "ringColor",
+    transform: createColorMixTransform("outlineColor")
+  },
+  outline: {
+    className: "ring",
+    shorthand: "ring",
+    values: "borders",
+    group: "Border",
+    transform(value) {
+      if (value === "none") {
+        return { outline: "2px solid transparent", outlineOffset: "2px" };
+      }
+      return { outline: value };
+    }
+  },
+  outlineOffset: {
+    className: "ring-o",
+    shorthand: "ringOffset",
+    values: "spacing",
+    group: "Border"
+  }
+};
+
+// src/utilities/polyfill.ts
+var polyfill = {
+  appearance: {
+    className: "ap",
+    group: "Visibility",
+    transform(value) {
+      return { appearance: value, WebkitAppearance: value };
+    }
+  },
+  backfaceVisibility: {
+    className: "bfv",
+    group: "Visibility",
+    transform(value) {
+      return { backfaceVisibility: value, WebkitBackfaceVisibility: value };
+    }
+  },
+  clipPath: {
+    className: "cp-path",
+    group: "Other",
+    transform(value) {
+      return { clipPath: value, WebkitClipPath: value };
+    }
+  },
+  hyphens: {
+    className: "hy",
+    group: "Other",
+    transform(value) {
+      return { hyphens: value, WebkitHyphens: value };
+    }
+  },
+  mask: {
+    className: "msk",
+    group: "Other",
+    transform(value) {
+      return { mask: value, WebkitMask: value };
+    }
+  },
+  maskImage: {
+    className: "msk-i",
+    group: "Other",
+    transform(value) {
+      return { maskImage: value, WebkitMaskImage: value };
+    }
+  },
+  maskSize: {
+    className: "msk-s",
+    group: "Other",
+    transform(value) {
+      return { maskSize: value, WebkitMaskSize: value };
+    }
+  },
+  textSizeAdjust: {
+    className: "txt-adj",
+    group: "Typography",
+    transform(value) {
+      return { textSizeAdjust: value, WebkitTextSizeAdjust: value };
+    }
+  }
+};
+
+// src/utilities/sizing.ts
+var widthValues = (theme) => ({
+  auto: "auto",
+  ...theme("sizes"),
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  "1/5": "20%",
+  "2/5": "40%",
+  "3/5": "60%",
+  "4/5": "80%",
+  "1/6": "16.666667%",
+  "2/6": "33.333333%",
+  "3/6": "50%",
+  "4/6": "66.666667%",
+  "5/6": "83.333333%",
+  "1/12": "8.333333%",
+  "2/12": "16.666667%",
+  "3/12": "25%",
+  "4/12": "33.333333%",
+  "5/12": "41.666667%",
+  "6/12": "50%",
+  "7/12": "58.333333%",
+  "8/12": "66.666667%",
+  "9/12": "75%",
+  "10/12": "83.333333%",
+  "11/12": "91.666667%",
+  screen: "100vw"
+});
+var heightValues = (theme) => ({
+  auto: "auto",
+  ...theme("sizes"),
+  svh: "100svh",
+  lvh: "100lvh",
+  dvh: "100dvh",
+  screen: "100vh",
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  "1/5": "20%",
+  "2/5": "40%",
+  "3/5": "60%",
+  "4/5": "80%",
+  "1/6": "16.666667%",
+  "2/6": "33.333333%",
+  "3/6": "50%",
+  "4/6": "66.666667%",
+  "5/6": "83.333333%"
+});
+var sizing = {
+  width: {
+    shorthand: "w",
+    className: "w",
+    group: "Width",
+    values: widthValues
+  },
+  inlineSize: {
+    className: "w-is",
+    group: "Width",
+    values: widthValues
+  },
+  minWidth: {
+    shorthand: "minW",
+    className: "min-w",
+    group: "Width",
+    values: widthValues
+  },
+  minInlineSize: {
+    className: "min-w-is",
+    group: "Width",
+    values: widthValues
+  },
+  maxWidth: {
+    shorthand: "maxW",
+    className: "max-w",
+    group: "Width",
+    values: widthValues
+  },
+  maxInlineSize: {
+    className: "max-w-is",
+    group: "Width",
+    values: widthValues
+  },
+  height: {
+    shorthand: "h",
+    className: "h",
+    group: "Height",
+    values: heightValues
+  },
+  blockSize: {
+    className: "h-bs",
+    group: "Height",
+    values: heightValues
+  },
+  minHeight: {
+    shorthand: "minH",
+    className: "min-h",
+    group: "Height",
+    values: heightValues
+  },
+  minBlockSize: {
+    className: "min-h-bs",
+    group: "Height",
+    values: heightValues
+  },
+  maxHeight: {
+    shorthand: "maxH",
+    className: "max-h",
+    group: "Height",
+    values: heightValues
+  },
+  maxBlockSize: {
+    className: "max-b",
+    group: "Height",
+    values: heightValues
+  },
+  boxSize: {
+    className: "size",
+    group: "Width",
+    values: widthValues,
+    transform(value) {
+      return {
+        width: value,
+        height: value
+      };
+    }
+  }
+};
+
+// src/utilities/spacing.ts
+var marginValues = (theme) => ({
+  auto: "auto",
+  ...theme("spacing")
+});
+var spacing = {
+  padding: {
+    className: "p",
+    shorthand: "p",
+    values: "spacing",
+    group: "Padding"
+  },
+  paddingLeft: {
+    className: "pl",
+    shorthand: "pl",
+    values: "spacing",
+    group: "Padding"
+  },
+  paddingRight: {
+    className: "pr",
+    shorthand: "pr",
+    values: "spacing",
+    group: "Padding"
+  },
+  paddingTop: {
+    className: "pt",
+    shorthand: "pt",
+    values: "spacing",
+    group: "Padding"
+  },
+  paddingBottom: {
+    className: "pb",
+    shorthand: "pb",
+    values: "spacing",
+    group: "Padding"
+  },
+  paddingBlock: {
+    className: "py",
+    values: "spacing",
+    group: "Padding",
+    shorthand: ["py", "paddingY"]
+  },
+  paddingBlockEnd: {
+    className: "pbe",
+    values: "spacing",
+    group: "Padding"
+  },
+  paddingBlockStart: {
+    className: "pbs",
+    values: "spacing",
+    group: "Padding"
+  },
+  paddingInline: {
+    className: "px",
+    values: "spacing",
+    group: "Padding",
+    shorthand: ["paddingX", "px"]
+  },
+  paddingInlineEnd: {
+    className: "pe",
+    shorthand: ["pe", "paddingEnd"],
+    values: "spacing",
+    group: "Padding"
+  },
+  paddingInlineStart: {
+    className: "ps",
+    shorthand: ["ps", "paddingStart"],
+    values: "spacing",
+    group: "Padding"
+  },
+  marginLeft: {
+    className: "ml",
+    shorthand: "ml",
+    values: marginValues,
+    group: "Margin"
+  },
+  marginRight: {
+    className: "mr",
+    shorthand: "mr",
+    values: marginValues,
+    group: "Margin"
+  },
+  marginTop: {
+    className: "mt",
+    shorthand: "mt",
+    values: marginValues,
+    group: "Margin"
+  },
+  marginBottom: {
+    className: "mb",
+    shorthand: "mb",
+    values: marginValues,
+    group: "Margin"
+  },
+  margin: {
+    className: "m",
+    shorthand: "m",
+    values: marginValues,
+    group: "Margin"
+  },
+  marginBlock: {
+    className: "my",
+    values: marginValues,
+    group: "Margin",
+    shorthand: ["my", "marginY"]
+  },
+  marginBlockEnd: {
+    className: "mbe",
+    values: marginValues,
+    group: "Margin"
+  },
+  marginBlockStart: {
+    className: "mbs",
+    values: marginValues,
+    group: "Margin"
+  },
+  marginInline: {
+    className: "mx",
+    values: marginValues,
+    group: "Margin",
+    shorthand: ["mx", "marginX"]
+  },
+  marginInlineEnd: {
+    className: "me",
+    shorthand: ["me", "marginEnd"],
+    values: marginValues,
+    group: "Margin"
+  },
+  marginInlineStart: {
+    className: "ms",
+    shorthand: ["ms", "marginStart"],
+    values: marginValues,
+    group: "Margin"
+  },
+  spaceX: {
+    className: "sx",
+    values: marginValues,
+    property: "marginInlineStart",
+    group: "Margin",
+    transform(value) {
+      return {
+        "& > :not([hidden]) ~ :not([hidden])": {
+          marginInlineStart: value,
+          marginInlineEnd: "0px"
+        }
+      };
+    }
+  },
+  spaceY: {
+    className: "sy",
+    values: marginValues,
+    property: "marginBlockStart",
+    group: "Margin",
+    transform(value) {
+      return {
+        "& > :not([hidden]) ~ :not([hidden])": {
+          marginTop: value,
+          marginBottom: "0px"
+        }
+      };
+    }
+  }
+};
+
+// src/utilities/svg.ts
+var svg = {
+  fill: {
+    className: "fill",
+    values: "colors",
+    group: "Color",
+    transform: createColorMixTransform("fill")
+  },
+  stroke: {
+    className: "stk",
+    values: "colors",
+    group: "Color",
+    transform: createColorMixTransform("stroke")
+  },
+  strokeWidth: {
+    className: "stk-w",
+    values: "borderWidths",
+    group: "Border"
+  },
+  strokeDasharray: {
+    className: "stk-dsh",
+    group: "Border"
+  },
+  strokeDashoffset: {
+    className: "stk-do",
+    group: "Border"
+  },
+  strokeLinecap: {
+    className: "stk-lc",
+    group: "Border"
+  },
+  strokeLinejoin: {
+    className: "stk-lj",
+    group: "Border"
+  },
+  strokeMiterlimit: {
+    className: "stk-ml",
+    group: "Border"
+  },
+  strokeOpacity: {
+    className: "stk-op",
+    group: "Border"
+  }
+};
+
+// src/utilities/tables.ts
+var tables = {
+  borderCollapse: {
+    className: "bd-cl",
+    group: "Table"
+  },
+  borderSpacing: {
+    className: "bd-sp",
+    group: "Table",
+    values(theme) {
+      return {
+        ...theme("spacing"),
+        auto: "var(--border-spacing-x) var(--border-spacing-y)"
+      };
+    }
+  },
+  borderSpacingX: {
+    className: "bd-sx",
+    values: "spacing",
+    group: "Table",
+    transform(value) {
+      return {
+        "--border-spacing-x": value
+      };
+    }
+  },
+  borderSpacingY: {
+    className: "bd-sy",
+    values: "spacing",
+    group: "Table",
+    transform(value) {
+      return {
+        "--border-spacing-y": value
+      };
+    }
+  },
+  tableLayout: {
+    className: "tbl",
+    group: "Table"
+  }
+};
+
+// src/utilities/transforms.ts
+var positiveFractions = {
+  "1/2": "50%",
+  "1/3": "33.333333%",
+  "2/3": "66.666667%",
+  "1/4": "25%",
+  "2/4": "50%",
+  "3/4": "75%",
+  full: "100%"
+};
+var negativeFractions = Object.fromEntries(
+  Object.entries(positiveFractions).map(([key, value]) => [`-${key}`, `-${value}`])
+);
+var fractions = { ...positiveFractions, ...negativeFractions };
+var transforms = {
+  transformOrigin: {
+    className: "trf-o",
+    group: "Transform"
+  },
+  transformBox: {
+    className: "trf-b",
+    group: "Transform"
+  },
+  transformStyle: {
+    className: "trf-s",
+    group: "Transform"
+  },
+  transform: {
+    className: "trf",
+    group: "Transform"
+  },
+  rotate: {
+    className: "rotate",
+    group: "Transform",
+    property: "rotate",
+    values: {
+      auto: "var(--rotate-x) var(--rotate-y)",
+      "auto-3d": "var(--rotate-x) var(--rotate-y) var(--rotate-z)"
+    }
+  },
+  rotateX: {
+    className: "rotate-x",
+    group: "Transform",
+    property: "rotate",
+    transform(value) {
+      return {
+        "--rotate-x": value
+      };
+    }
+  },
+  rotateY: {
+    className: "rotate-y",
+    group: "Transform",
+    property: "rotate",
+    transform(value) {
+      return {
+        "--rotate-y": value
+      };
+    }
+  },
+  rotateZ: {
+    className: "rotate-z",
+    group: "Transform",
+    property: "rotate",
+    transform(value) {
+      return {
+        "--rotate-z": value
+      };
+    }
+  },
+  scale: {
+    className: "scale",
+    group: "Transform",
+    property: "scale",
+    values: {
+      auto: "var(--scale-x) var(--scale-y)"
+    }
+  },
+  scaleX: {
+    className: "scale-x",
+    group: "Transform",
+    transform(value) {
+      return {
+        "--scale-x": value
+      };
+    }
+  },
+  scaleY: {
+    className: "scale-y",
+    group: "Transform",
+    transform(value) {
+      return {
+        "--scale-y": value
+      };
+    }
+  },
+  translate: {
+    className: "translate",
+    group: "Transform",
+    property: "translate",
+    values: {
+      auto: "var(--translate-x) var(--translate-y)",
+      "auto-3d": "var(--translate-x) var(--translate-y) var(--translate-z)"
+    }
+  },
+  translateX: {
+    shorthand: "x",
+    className: "translate-x",
+    group: "Transform",
+    values(theme) {
+      return {
+        ...theme("spacing"),
+        ...fractions
+      };
+    },
+    transform(value) {
+      return {
+        "--translate-x": value
+      };
+    }
+  },
+  translateY: {
+    shorthand: "y",
+    className: "translate-y",
+    group: "Transform",
+    values(theme) {
+      return {
+        ...theme("spacing"),
+        ...fractions
+      };
+    },
+    transform(value) {
+      return {
+        "--translate-y": value
+      };
+    }
+  },
+  translateZ: {
+    shorthand: "z",
+    className: "translate-z",
+    group: "Transform",
+    values(theme) {
+      return {
+        ...theme("spacing"),
+        ...fractions
+      };
+    },
+    transform(value) {
+      return {
+        "--translate-z": value
+      };
+    }
+  }
+};
+
+// src/utilities/transitions.ts
+var createTransition = (value) => ({
+  transitionProperty: `var(--transition-prop, ${value})`,
+  transitionTimingFunction: "var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1))",
+  transitionDuration: "var(--transition-duration, 150ms)"
+});
+var transitionMap = {
+  all: createTransition("all"),
+  common: createTransition(
+    "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter"
+  ),
+  size: createTransition("width, height, min-width, max-width, min-height, max-height"),
+  position: createTransition("left, right, top, bottom, inset, inset-inline, inset-block"),
+  background: createTransition("background, background-color, background-image, background-position"),
+  colors: createTransition("color, background-color, border-color, outline-color, text-decoration-color, fill, stroke"),
+  opacity: createTransition("opacity"),
+  shadow: createTransition("box-shadow"),
+  transform: createTransition("transform")
+};
+var transitionPropertyMap = {
+  common: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+  colors: "color, background-color, border-color, outline-color, text-decoration-color, fill, stroke",
+  size: "width, height, min-width, max-width, min-height, max-height",
+  position: "left, right, top, bottom, inset, inset-inline, inset-block",
+  background: "background, background-color, background-image, background-position"
+};
+var transitions = {
+  transitionTimingFunction: {
+    className: "trs-tmf",
+    values: "easings",
+    group: "Transition",
+    transform(value) {
+      return {
+        "--transition-easing": value,
+        transitionTimingFunction: value
+      };
+    }
+  },
+  transitionDelay: {
+    className: "trs-dly",
+    values: "durations",
+    group: "Transition"
+  },
+  transitionDuration: {
+    className: "trs-dur",
+    values: "durations",
+    group: "Transition",
+    transform(value) {
+      return {
+        "--transition-duration": value,
+        transitionDuration: value
+      };
+    }
+  },
+  transitionProperty: {
+    className: "trs-prop",
+    group: "Transition",
+    values: transitionPropertyMap,
+    transform(value) {
+      return {
+        "--transition-prop": value,
+        transitionProperty: value
+      };
+    }
+  },
+  transition: {
+    className: "trs",
+    values: Object.keys(transitionMap),
+    group: "Transition",
+    transform(value) {
+      return transitionMap[value] ?? { transition: value };
+    }
+  },
+  // Animations
+  animation: {
+    className: "anim",
+    values: "animations",
+    group: "Animation"
+  },
+  animationName: {
+    className: "anim-n",
+    values: "keyframes",
+    group: "Animation"
+  },
+  animationTimingFunction: {
+    className: "anim-tmf",
+    values: "easings",
+    group: "Animation"
+  },
+  animationDuration: {
+    className: "anim-dur",
+    values: "durations",
+    group: "Animation"
+  },
+  animationDelay: {
+    className: "anim-dly",
+    values: "durations",
+    group: "Animation"
+  },
+  animationPlayState: {
+    className: "anim-ps",
+    group: "Animation"
+  },
+  animationComposition: {
+    className: "anim-comp",
+    group: "Animation"
+  },
+  animationFillMode: {
+    className: "anim-fm",
+    group: "Animation"
+  },
+  animationDirection: {
+    className: "anim-dir",
+    group: "Animation"
+  },
+  animationIterationCount: {
+    className: "anim-ic",
+    group: "Animation"
+  },
+  animationRange: {
+    className: "anim-r",
+    group: "Animation"
+  },
+  animationState: {
+    className: "anim-s",
+    group: "Animation"
+  },
+  animationRangeStart: {
+    className: "anim-rs",
+    group: "Animation"
+  },
+  animationRangeEnd: {
+    className: "anim-re",
+    group: "Animation"
+  },
+  animationTimeline: {
+    className: "anim-tl",
+    group: "Animation"
+  }
+};
+
+// src/utilities/typography.ts
+var typography = {
+  color: {
+    className: "c",
+    values: "colors",
+    group: "Color",
+    transform: createColorMixTransform("color")
+  },
+  fontFamily: {
+    className: "ff",
+    values: "fonts",
+    group: "Typography"
+  },
+  fontSize: {
+    className: "fs",
+    values: "fontSizes",
+    group: "Typography"
+  },
+  fontSizeAdjust: {
+    className: "fs-a",
+    group: "Typography"
+  },
+  fontPalette: {
+    className: "fp",
+    group: "Typography"
+  },
+  fontKerning: {
+    className: "fk",
+    group: "Typography"
+  },
+  fontFeatureSettings: {
+    className: "ff-s",
+    group: "Typography"
+  },
+  fontWeight: {
+    className: "fw",
+    values: "fontWeights",
+    group: "Typography"
+  },
+  fontSmoothing: {
+    className: "fsmt",
+    group: "Typography",
+    values: {
+      antialiased: "antialiased",
+      "subpixel-antialiased": "auto"
+    },
+    transform(value) {
+      return {
+        WebkitFontSmoothing: value
+      };
+    }
+  },
+  fontVariant: {
+    className: "fv",
+    group: "Typography"
+  },
+  fontVariantAlternates: {
+    className: "fv-alt",
+    group: "Typography"
+  },
+  fontVariantCaps: {
+    className: "fv-caps",
+    group: "Typography"
+  },
+  fontVariationSettings: {
+    className: "fv-s",
+    group: "Typography"
+  },
+  fontVariantNumeric: {
+    className: "fv-num",
+    group: "Typography"
+  },
+  letterSpacing: {
+    className: "ls",
+    values: "letterSpacings",
+    group: "Typography"
+  },
+  lineHeight: {
+    className: "lh",
+    values: "lineHeights",
+    group: "Typography"
+  },
+  textAlign: {
+    className: "ta",
+    group: "Typography"
+  },
+  textDecoration: {
+    className: "td",
+    group: "Typography"
+  },
+  textDecorationColor: {
+    className: "td-c",
+    values: "colors",
+    transform: createColorMixTransform("textDecorationColor"),
+    group: "Typography"
+  },
+  textEmphasisColor: {
+    className: "te-c",
+    values: "colors",
+    transform: createColorMixTransform("textEmphasisColor"),
+    group: "Typography"
+  },
+  textDecorationStyle: {
+    className: "td-s",
+    group: "Typography"
+  },
+  textDecorationThickness: {
+    className: "td-t",
+    group: "Typography"
+  },
+  textUnderlineOffset: {
+    className: "tu-o",
+    group: "Typography"
+  },
+  textTransform: {
+    className: "tt",
+    group: "Typography"
+  },
+  textIndent: {
+    className: "ti",
+    group: "Typography",
+    values: "spacing"
+  },
+  textShadow: {
+    className: "tsh",
+    values: "shadows",
+    group: "Typography"
+  },
+  textShadowColor: {
+    shorthand: "textShadowColor",
+    className: "tsh-c",
+    values: "colors",
+    transform: createColorMixTransform("--text-shadow-color"),
+    group: "Typography"
+  },
+  WebkitTextFillColor: {
+    className: "wktf-c",
+    values: "colors",
+    transform: createColorMixTransform("WebkitTextFillColor"),
+    group: "Typography"
+  },
+  textOverflow: {
+    className: "tov",
+    group: "Typography"
+  },
+  verticalAlign: {
+    className: "va",
+    group: "Typography"
+  },
+  wordBreak: {
+    className: "wb",
+    group: "Typography"
+  },
+  textWrap: {
+    className: "tw",
+    values: ["wrap", "balance", "nowrap"],
+    group: "Typography",
+    transform(value) {
+      return { textWrap: value };
+    }
+  },
+  truncate: {
+    className: "trunc",
+    values: { type: "boolean" },
+    group: "Typography",
+    transform(value) {
+      if (!value) return {};
+      return {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      };
+    }
+  },
+  lineClamp: {
+    className: "lc",
+    group: "Typography",
+    transform(value) {
+      if (value === "none") {
+        return {
+          WebkitLineClamp: "unset"
+        };
+      }
+      return {
+        overflow: "hidden",
+        display: "-webkit-box",
+        WebkitLineClamp: value,
+        WebkitBoxOrient: "vertical"
+      };
+    }
+  }
+};
+
+// src/utilities/index.ts
+var utilities = Object.assign(
+  {},
+  layout,
+  display,
+  flexGrid,
+  spacing,
+  outline,
+  focusRing,
+  divide,
+  sizing,
+  typography,
+  list,
+  background,
+  backgroundGradients,
+  border,
+  effects,
+  tables,
+  transitions,
+  transforms,
+  interactivity,
+  svg,
+  helpers,
+  polyfill,
+  container2,
+  cursor
+);
+
+// src/index.ts
+var definePreset = (preset2) => preset2;
+var preset = definePreset({
+  name: "@bamboocss/preset-base",
+  conditions,
+  utilities,
+  patterns,
+  // globalVars,
+  globalCss
+});
+var index_default = preset;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  preset
+});