@blockle/blocks-core 0.21.0

package/dist/sprinkles/atomicProperties.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vars_css = require("../css/vars.css.cjs");
+const colorsWithCurrentColor = { ...vars_css.vars.color, currentColor: "currentColor" };
+const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
+const unresponsiveProperties = {
+  // textboxtrim: ['none'],
+  backgroundColor: colorsWithCurrentColor,
+  borderColor: colorsWithCurrentColor,
+  borderRadius: vars_css.vars.borderRadius,
+  borderWidth: vars_css.vars.borderWidth,
+  border: ["none"],
+  insetBlock: [0],
+  insetBlockStart: [0],
+  insetBlockEnd: [0],
+  insetInline: [0],
+  insetInlineStart: [0],
+  insetInlineEnd: [0],
+  boxShadow: vars_css.vars.shadow,
+  color: colorsWithCurrentColor,
+  cursor: ["auto", "pointer"],
+  fontFamily: vars_css.vars.fontFamily,
+  fontStyle: ["normal", "italic", "oblique"],
+  fontWeight: vars_css.vars.fontWeight,
+  lineHeight: vars_css.vars.lineHeight,
+  blockSize: size,
+  maxBlockSize: size,
+  inlineSize: size,
+  maxInlineSize: size,
+  opacity: [0, 1],
+  overflow: ["hidden", "scroll", "visible", "auto"],
+  overflowBlock: ["hidden", "scroll", "visible", "auto"],
+  overflowInline: ["hidden", "scroll", "visible", "auto"],
+  pointerEvents: ["none"],
+  textDecoration: ["overline", "line-through", "underline", "none"],
+  textTransform: ["lowercase", "uppercase", "capitalize"],
+  textWrap: ["balance", "wrap"],
+  transition: vars_css.vars.transition,
+  userSelect: ["none"],
+  whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
+  wordBreak: ["break-word"],
+  wordWrap: ["break-word"]
+};
+const marginSpace = { auto: "auto", ...vars_css.vars.space };
+const responsiveProperties = {
+  alignContent: ["stretch", "center", "flex-start", "flex-end"],
+  alignItems: ["stretch", "center", "flex-start", "flex-end"],
+  alignSelf: ["stretch", "center", "flex-start", "flex-end"],
+  columnGap: vars_css.vars.space,
+  display: [
+    "none",
+    "flex",
+    "inline-flex",
+    "block",
+    "inline",
+    "inline-block",
+    "grid",
+    "inline-grid"
+  ],
+  flex: [1],
+  flexDirection: ["row", "row-reverse", "column", "column-reverse"],
+  flexGrow: [0, 1],
+  flexShrink: [0, 1],
+  flexWrap: ["nowrap", "wrap"],
+  fontSize: vars_css.vars.fontSize,
+  gap: vars_css.vars.space,
+  justifyContent: [
+    "flex-start",
+    "flex-end",
+    "center",
+    "space-between",
+    "space-around"
+  ],
+  marginBlockStart: marginSpace,
+  marginBlockEnd: marginSpace,
+  marginInlineStart: marginSpace,
+  marginInlineEnd: marginSpace,
+  outline: ["none"],
+  padding: vars_css.vars.space,
+  paddingBlock: vars_css.vars.space,
+  paddingBlockStart: vars_css.vars.space,
+  paddingBlockEnd: vars_css.vars.space,
+  paddingInline: vars_css.vars.space,
+  paddingInlineStart: vars_css.vars.space,
+  paddingInlineEnd: vars_css.vars.space,
+  position: ["relative", "fixed", "absolute", "sticky", "static"],
+  rowGap: vars_css.vars.space,
+  textAlign: ["center", "left", "right", "justify"]
+};
+exports.responsiveProperties = responsiveProperties;
+exports.unresponsiveProperties = unresponsiveProperties;

package/dist/sprinkles/atomicProperties.d.ts

@@ -0,0 +1,286 @@
+export declare const unresponsiveProperties: {
+    readonly backgroundColor: {
+        currentColor: string;
+        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly borderColor: {
+        currentColor: string;
+        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly borderRadius: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly borderWidth: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly border: readonly ["none"];
+    readonly insetBlock: readonly [0];
+    readonly insetBlockStart: readonly [0];
+    readonly insetBlockEnd: readonly [0];
+    readonly insetInline: readonly [0];
+    readonly insetInlineStart: readonly [0];
+    readonly insetInlineEnd: readonly [0];
+    readonly boxShadow: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly color: {
+        currentColor: string;
+        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondaryDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly cursor: readonly ["auto", "pointer"];
+    readonly fontFamily: {
+        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly fontStyle: readonly ["normal", "italic", "oblique"];
+    readonly fontWeight: {
+        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly lineHeight: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly blockSize: {
+        auto: string;
+        full: string;
+        'fit-content': string;
+    };
+    readonly maxBlockSize: {
+        auto: string;
+        full: string;
+        'fit-content': string;
+    };
+    readonly inlineSize: {
+        auto: string;
+        full: string;
+        'fit-content': string;
+    };
+    readonly maxInlineSize: {
+        auto: string;
+        full: string;
+        'fit-content': string;
+    };
+    readonly opacity: readonly [0, 1];
+    readonly overflow: readonly ["hidden", "scroll", "visible", "auto"];
+    readonly overflowBlock: readonly ["hidden", "scroll", "visible", "auto"];
+    readonly overflowInline: readonly ["hidden", "scroll", "visible", "auto"];
+    readonly pointerEvents: readonly ["none"];
+    readonly textDecoration: readonly ["overline", "line-through", "underline", "none"];
+    readonly textTransform: readonly ["lowercase", "uppercase", "capitalize"];
+    readonly textWrap: readonly ["balance", "wrap"];
+    readonly transition: {
+        slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly userSelect: readonly ["none"];
+    readonly whiteSpace: readonly ["nowrap", "pre", "pre-line", "pre-wrap"];
+    readonly wordBreak: readonly ["break-word"];
+    readonly wordWrap: readonly ["break-word"];
+};
+export type UnresponsiveProperties = keyof typeof unresponsiveProperties;
+export declare const responsiveProperties: {
+    readonly alignContent: readonly ["stretch", "center", "flex-start", "flex-end"];
+    readonly alignItems: readonly ["stretch", "center", "flex-start", "flex-end"];
+    readonly alignSelf: readonly ["stretch", "center", "flex-start", "flex-end"];
+    readonly columnGap: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly display: readonly ["none", "flex", "inline-flex", "block", "inline", "inline-block", "grid", "inline-grid"];
+    readonly flex: readonly [1];
+    readonly flexDirection: readonly ["row", "row-reverse", "column", "column-reverse"];
+    readonly flexGrow: readonly [0, 1];
+    readonly flexShrink: readonly [0, 1];
+    readonly flexWrap: readonly ["nowrap", "wrap"];
+    readonly fontSize: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly gap: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly justifyContent: readonly ["flex-start", "flex-end", "center", "space-between", "space-around"];
+    readonly marginBlockStart: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: string;
+    };
+    readonly marginBlockEnd: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: string;
+    };
+    readonly marginInlineStart: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: string;
+    };
+    readonly marginInlineEnd: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        auto: string;
+    };
+    readonly outline: readonly ["none"];
+    readonly padding: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingBlock: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingBlockStart: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingBlockEnd: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingInline: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingInlineStart: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly paddingInlineEnd: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly position: readonly ["relative", "fixed", "absolute", "sticky", "static"];
+    readonly rowGap: {
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    readonly textAlign: readonly ["center", "left", "right", "justify"];
+};
+export type ResponsiveProperties = keyof typeof responsiveProperties;

package/dist/sprinkles/atomicProperties.js

@@ -0,0 +1,91 @@
+import { vars } from "../css/vars.css.js";
+const colorsWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
+const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
+const unresponsiveProperties = {
+  // textboxtrim: ['none'],
+  backgroundColor: colorsWithCurrentColor,
+  borderColor: colorsWithCurrentColor,
+  borderRadius: vars.borderRadius,
+  borderWidth: vars.borderWidth,
+  border: ["none"],
+  insetBlock: [0],
+  insetBlockStart: [0],
+  insetBlockEnd: [0],
+  insetInline: [0],
+  insetInlineStart: [0],
+  insetInlineEnd: [0],
+  boxShadow: vars.shadow,
+  color: colorsWithCurrentColor,
+  cursor: ["auto", "pointer"],
+  fontFamily: vars.fontFamily,
+  fontStyle: ["normal", "italic", "oblique"],
+  fontWeight: vars.fontWeight,
+  lineHeight: vars.lineHeight,
+  blockSize: size,
+  maxBlockSize: size,
+  inlineSize: size,
+  maxInlineSize: size,
+  opacity: [0, 1],
+  overflow: ["hidden", "scroll", "visible", "auto"],
+  overflowBlock: ["hidden", "scroll", "visible", "auto"],
+  overflowInline: ["hidden", "scroll", "visible", "auto"],
+  pointerEvents: ["none"],
+  textDecoration: ["overline", "line-through", "underline", "none"],
+  textTransform: ["lowercase", "uppercase", "capitalize"],
+  textWrap: ["balance", "wrap"],
+  transition: vars.transition,
+  userSelect: ["none"],
+  whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
+  wordBreak: ["break-word"],
+  wordWrap: ["break-word"]
+};
+const marginSpace = { auto: "auto", ...vars.space };
+const responsiveProperties = {
+  alignContent: ["stretch", "center", "flex-start", "flex-end"],
+  alignItems: ["stretch", "center", "flex-start", "flex-end"],
+  alignSelf: ["stretch", "center", "flex-start", "flex-end"],
+  columnGap: vars.space,
+  display: [
+    "none",
+    "flex",
+    "inline-flex",
+    "block",
+    "inline",
+    "inline-block",
+    "grid",
+    "inline-grid"
+  ],
+  flex: [1],
+  flexDirection: ["row", "row-reverse", "column", "column-reverse"],
+  flexGrow: [0, 1],
+  flexShrink: [0, 1],
+  flexWrap: ["nowrap", "wrap"],
+  fontSize: vars.fontSize,
+  gap: vars.space,
+  justifyContent: [
+    "flex-start",
+    "flex-end",
+    "center",
+    "space-between",
+    "space-around"
+  ],
+  marginBlockStart: marginSpace,
+  marginBlockEnd: marginSpace,
+  marginInlineStart: marginSpace,
+  marginInlineEnd: marginSpace,
+  outline: ["none"],
+  padding: vars.space,
+  paddingBlock: vars.space,
+  paddingBlockStart: vars.space,
+  paddingBlockEnd: vars.space,
+  paddingInline: vars.space,
+  paddingInlineStart: vars.space,
+  paddingInlineEnd: vars.space,
+  position: ["relative", "fixed", "absolute", "sticky", "static"],
+  rowGap: vars.space,
+  textAlign: ["center", "left", "right", "justify"]
+};
+export {
+  responsiveProperties,
+  unresponsiveProperties
+};

package/dist/sprinkles/getAtomsAndProps.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const sprinkles_css = require("./sprinkles.css.cjs");
+function getAtomsAndProps(props) {
+  const atomProps = {};
+  const otherProps = {};
+  for (const [name, value] of Object.entries(props)) {
+    if (sprinkles_css.sprinkles.properties.has(name)) {
+      atomProps[name] = value;
+    } else {
+      otherProps[name] = value;
+    }
+  }
+  return [atomProps, otherProps];
+}
+exports.getAtomsAndProps = getAtomsAndProps;

package/dist/sprinkles/getAtomsAndProps.d.ts

@@ -0,0 +1,2 @@
+import { UknownRecord } from '../utils/react/mergeProps';
+export declare function getAtomsAndProps(props: UknownRecord): [atoms: UknownRecord, props: UknownRecord];

package/dist/sprinkles/getAtomsAndProps.js

@@ -0,0 +1,16 @@
+import { sprinkles } from "./sprinkles.css.js";
+function getAtomsAndProps(props) {
+  const atomProps = {};
+  const otherProps = {};
+  for (const [name, value] of Object.entries(props)) {
+    if (sprinkles.properties.has(name)) {
+      atomProps[name] = value;
+    } else {
+      otherProps[name] = value;
+    }
+  }
+  return [atomProps, otherProps];
+}
+export {
+  getAtomsAndProps
+};

package/dist/sprinkles/sprinkles.css.cjs

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const sprinkles$1 = require("@vanilla-extract/sprinkles");
+const breakpoint = require("../css/breakpoint/breakpoint.cjs");
+const atomicProperties = require("./atomicProperties.cjs");
+fileScope.setFileScope("src/sprinkles/sprinkles.css.ts", "@blockle/blocks-core");
+const unresponsiveAtomicProperties = sprinkles$1.defineProperties({
+  properties: atomicProperties.unresponsiveProperties,
+  shorthands: {
+    inset: [
+      "insetBlockStart",
+      "insetBlockEnd",
+      "insetInlineStart",
+      "insetInlineEnd"
+    ]
+  }
+});
+const responsiveAtomicProperties = sprinkles$1.defineProperties({
+  defaultCondition: "mobile",
+  conditions: {
+    mobile: {},
+    tablet: {
+      "@media": breakpoint.minMediaQuery("tablet")
+    },
+    desktop: {
+      "@media": breakpoint.minMediaQuery("desktop")
+    },
+    wide: {
+      "@media": breakpoint.minMediaQuery("wide")
+    }
+  },
+  responsiveArray: breakpoint.breakpointNames,
+  properties: atomicProperties.responsiveProperties,
+  shorthands: {
+    margin: [
+      "marginBlockStart",
+      "marginBlockEnd",
+      "marginInlineStart",
+      "marginInlineEnd"
+    ],
+    marginBlock: ["marginBlockStart", "marginBlockEnd"],
+    marginInline: ["marginInlineStart", "marginInlineEnd"],
+    placeItems: ["justifyContent", "alignItems"]
+  }
+});
+const sprinkles = sprinkles$1.createSprinkles(
+  unresponsiveAtomicProperties,
+  responsiveAtomicProperties
+);
+fileScope.endFileScope();
+exports.sprinkles = sprinkles;