Inlay hints for Sprinkles? Idk what to call em

[p7gg]

I was doing some testing and found out something by accident that I think it's really helpful for ppl building for public API's

lets say you have some sprinkles - pay attention to the comment I added to the display property:

const responsiveProperties = defineProperties({
  conditions: {
    mobile: {},
    tablet: { "@media": "screen and (min-width: 768px)" },
    desktop: { "@media": "screen and (min-width: 1024px)" },
  },
  defaultCondition: "mobile",
  properties: {
    /** The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. */
    display: ["none", "flex", "block", "inline"],
    flexDirection: ["row", "column"],
    justifyContent: [
      "stretch",
      "flex-start",
      "center",
      "flex-end",
      "space-around",
      "space-between",
    ],
    alignItems: ["stretch", "flex-start", "center", "flex-end"],
    paddingTop: space,
    paddingBottom: space,
    paddingLeft: space,
    paddingRight: space,
    // etc.
  },
  shorthands: {
    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
    paddingX: ["paddingLeft", "paddingRight"],
    paddingY: ["paddingTop", "paddingBottom"],
    placeItems: ["justifyContent", "alignItems"],
  },
});

If you create a component that extends the Sprinkles type, like this:

type DivProps = JSX.IntrinsicElements["div"];
export interface BoxProps extends OverrideProps<DivProps, Sprinkles> {}

export const Box: Component<BoxProps> = (props) => {
  const [local, atomicProps, rest] = splitProps(
    props,
    ["class"],
    [...sprinkles.properties.keys()]
  );

  return <div class={`${local.class} ${sprinkles(atomicProps)}`} {...rest} />;
};

Whenever you use this component you'll get the same inlay hints you added in the sprinkles definition:

Codesandbox:
https://codesandbox.io/p/sandbox/practical-minsky-7y88uw?file=%2Fsrc%2FApp.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A6%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A6%7D%5D