@blockle/blocks-core 0.21.0

package/README.md

@@ -0,0 +1,2 @@
+# @blockle/theme
+

package/dist/config/componentThemes.d.ts

@@ -0,0 +1,137 @@
+import { Sprinkles } from '../sprinkles/sprinkles.css';
+import { RecordLike } from '../utils/typing/helpers';
+/**
+ * Theming options for components.
+ */
+export type ButtonTheme = {
+    base: string;
+    variants: {
+        variant: 'solid' | 'outline' | 'ghost';
+        intent: 'neutral' | 'danger';
+        size: 'small' | 'medium' | 'large';
+        loading: boolean;
+        disabled: boolean;
+    };
+};
+export type LinkTheme = {
+    base: string;
+    variants: {
+        variant: 'inherit' | 'primary' | 'secondary';
+        underline: boolean;
+    };
+};
+export type SpinnerTheme = {
+    base: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        color: Exclude<Sprinkles['color'], undefined>;
+    };
+};
+export type DividerTheme = {
+    base?: string;
+    variants: {
+        color: Exclude<Sprinkles['color'], undefined>;
+    };
+};
+export type DialogTheme = {
+    dialog: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+    };
+};
+export type InputTheme = {
+    container: string;
+    input: string;
+    variants: {
+        variant: 'solid' | 'outline';
+        disabled: boolean;
+        required: boolean;
+    };
+};
+export type CheckboxTheme = {
+    base: string;
+    icon: string;
+    label: string;
+    variants: {
+        required: boolean;
+    };
+};
+export type RadioTheme = {
+    base: string;
+    icon: string;
+    label: string;
+};
+export type LabelTheme = {
+    base: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        required: boolean;
+    };
+};
+export type ProgressTheme = {
+    base: string;
+    bar: string;
+    variants: {
+        indeterminate: boolean;
+    };
+};
+export type SwitchTheme = {
+    base: string;
+    slider: string;
+};
+export type PopoverTheme = {
+    base: string;
+};
+export type SelectTheme = {
+    wrapper?: string;
+    select: string;
+    icon: string;
+    variants: {
+        variant: 'solid' | 'outline';
+    };
+};
+export type SliderTheme = {
+    base: string;
+    track: string;
+    filledTrack: string;
+    thumb: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        colorScheme: 'primary' | 'secondary';
+        disabled: boolean;
+    };
+};
+export type TooltipTheme = {
+    base: string;
+    variants: {
+        colorScheme: 'primary' | 'secondary';
+    };
+};
+export type ComponentThemes = {
+    button: ButtonTheme;
+    checkbox: CheckboxTheme;
+    dialog: DialogTheme;
+    divider: DividerTheme;
+    input: InputTheme;
+    label: LabelTheme;
+    link: LinkTheme;
+    popover: PopoverTheme;
+    progress: ProgressTheme;
+    radio: RadioTheme;
+    select: SelectTheme;
+    slider: SliderTheme;
+    spinner: SpinnerTheme;
+    switch: SwitchTheme;
+    tooltip: TooltipTheme;
+};
+/**
+ * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
+ */
+export type ComponentThemeProps<T extends RecordLike> = Omit<{
+    [K in keyof T]?: Exclude<T[K], undefined> extends string ? boolean : never;
+}, 'variants'> & {
+    variants?: T['variants'] extends RecordLike ? Partial<T['variants']> : never;
+};
+export type ComponentThemesProps = {
+    [K in keyof ComponentThemes]: ComponentThemeProps<ComponentThemes[K]>;
+};

package/dist/config/themeTokens.d.ts

@@ -0,0 +1,33 @@
+type FontWeight = 'regular' | 'medium' | 'strong';
+type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type Transition = 'slow' | 'normal' | 'fast';
+type BorderRadius = 'small' | 'medium' | 'large' | 'xlarge';
+type BorderWidth = 'small' | 'medium' | 'large';
+type BoxShadow = 'small' | 'medium' | 'large';
+type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
+export type ThemeTokens = {
+    typography: {
+        fontFamily: {
+            body?: string;
+            primary?: string;
+            secondary?: string;
+        };
+        fontSize: Record<FontSize, number | string>;
+        fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
+        lineHeight: Record<LineHeight, number | string>;
+    };
+    spacing: Record<Space, number | string>;
+    transition: Record<Transition, string>;
+    border: {
+        radius: Record<BorderRadius, number | string>;
+        width: Record<BorderWidth, number | string>;
+    };
+    shadow: Record<BoxShadow, string>;
+    focus: {
+        boxShadow: string;
+    };
+    color: Record<Color, string>;
+};
+export {};

package/dist/css/breakpoint/breakpoint.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
+const breakpoints = {
+  mobile: 0,
+  tablet: 740,
+  desktop: 992,
+  wide: 1200
+};
+function minMediaQuery(breakpoint) {
+  return `screen and (min-width: ${breakpoints[breakpoint]}px)`;
+}
+exports.breakpointNames = breakpointNames;
+exports.breakpoints = breakpoints;
+exports.minMediaQuery = minMediaQuery;

package/dist/css/breakpoint/breakpoint.d.ts

@@ -0,0 +1,9 @@
+export declare const breakpointNames: readonly ["mobile", "tablet", "desktop", "wide"];
+export declare const breakpoints: {
+    readonly mobile: 0;
+    readonly tablet: 740;
+    readonly desktop: 992;
+    readonly wide: 1200;
+};
+export type Breakpoint = keyof typeof breakpoints;
+export declare function minMediaQuery(breakpoint: Exclude<Breakpoint, 'mobile'>): string;

package/dist/css/breakpoint/breakpoint.js

@@ -0,0 +1,15 @@
+const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
+const breakpoints = {
+  mobile: 0,
+  tablet: 740,
+  desktop: 992,
+  wide: 1200
+};
+function minMediaQuery(breakpoint) {
+  return `screen and (min-width: ${breakpoints[breakpoint]}px)`;
+}
+export {
+  breakpointNames,
+  breakpoints,
+  minMediaQuery
+};

package/dist/css/breakpoint/breakpoint.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/css/layers.css.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/css/layers.css.ts", "@blockle/blocks-core");
+const blocksLayer = css.layer("blockle-blocks");
+fileScope.endFileScope();
+exports.blocksLayer = blocksLayer;

package/dist/css/layers.css.d.ts

@@ -0,0 +1 @@
+export declare const blocksLayer: string;

package/dist/css/layers.css.js

@@ -0,0 +1,8 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layer } from "@vanilla-extract/css";
+setFileScope("src/css/layers.css.ts", "@blockle/blocks-core");
+const blocksLayer = layer("blockle-blocks");
+endFileScope();
+export {
+  blocksLayer
+};

package/dist/css/rem.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function rem(value) {
+  return `${value / 16}rem`;
+}
+exports.rem = rem;

package/dist/css/rem.d.ts

@@ -0,0 +1 @@
+export declare function rem(value: number): `${number}rem`;

package/dist/css/rem.js

@@ -0,0 +1,6 @@
+function rem(value) {
+  return `${value / 16}rem`;
+}
+export {
+  rem
+};

package/dist/css/tokens.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tokens = {
+  typography: {
+    fontFamily: {
+      body: "Roboto, sans-serif",
+      primary: "Roboto, sans-serif",
+      secondary: "Roboto, sans-serif"
+    },
+    fontSize: {
+      xsmall: "0.75rem",
+      small: "0.875rem",
+      medium: "1rem",
+      large: "1.125rem",
+      xlarge: "1.25rem"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
+    }
+  },
+  spacing: {
+    none: 0,
+    gutter: "1rem",
+    xsmall: "0.25rem",
+    small: "0.5rem",
+    medium: "1rem",
+    large: "1.5rem",
+    xlarge: "2rem"
+  },
+  transition: {
+    slow: "500ms",
+    normal: "300ms",
+    fast: "100ms"
+  },
+  border: {
+    radius: {
+      small: "0.25rem",
+      medium: "0.5rem",
+      large: "1rem",
+      xlarge: "2rem"
+    },
+    width: {
+      small: "1px",
+      medium: "2px",
+      large: "4px"
+    }
+  },
+  shadow: {
+    small: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    medium: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
+    large: "0 4px 8px 0 rgba(0, 0, 0, 0.05)"
+  },
+  focus: {
+    boxShadow: "0 0 0 2px #AF8EFF"
+  },
+  color: {
+    black: "#000000",
+    white: "#ffffff",
+    body: "#ffffff",
+    primaryLight: "#f5f5f5",
+    primary: "#e0e0e0",
+    primaryDark: "#aeaeae",
+    secondaryLight: "#f5f5f5",
+    secondary: "#e0e0e0",
+    secondaryDark: "#aeaeae",
+    text: "#000000",
+    textLight: "#ffffff",
+    textDark: "#aeaeae",
+    danger: "#ff0000",
+    link: "#0000ff"
+  }
+};
+exports.tokens = tokens;

package/dist/css/tokens.d.ts

@@ -0,0 +1,2 @@
+import { ThemeTokens } from '../config/themeTokens';
+export declare const tokens: ThemeTokens;

package/dist/css/tokens.js

@@ -0,0 +1,82 @@
+const tokens = {
+  typography: {
+    fontFamily: {
+      body: "Roboto, sans-serif",
+      primary: "Roboto, sans-serif",
+      secondary: "Roboto, sans-serif"
+    },
+    fontSize: {
+      xsmall: "0.75rem",
+      small: "0.875rem",
+      medium: "1rem",
+      large: "1.125rem",
+      xlarge: "1.25rem"
+    },
+    fontWeight: {
+      regular: 400,
+      medium: 500,
+      strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
+    }
+  },
+  spacing: {
+    none: 0,
+    gutter: "1rem",
+    xsmall: "0.25rem",
+    small: "0.5rem",
+    medium: "1rem",
+    large: "1.5rem",
+    xlarge: "2rem"
+  },
+  transition: {
+    slow: "500ms",
+    normal: "300ms",
+    fast: "100ms"
+  },
+  border: {
+    radius: {
+      small: "0.25rem",
+      medium: "0.5rem",
+      large: "1rem",
+      xlarge: "2rem"
+    },
+    width: {
+      small: "1px",
+      medium: "2px",
+      large: "4px"
+    }
+  },
+  shadow: {
+    small: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    medium: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
+    large: "0 4px 8px 0 rgba(0, 0, 0, 0.05)"
+  },
+  focus: {
+    boxShadow: "0 0 0 2px #AF8EFF"
+  },
+  color: {
+    black: "#000000",
+    white: "#ffffff",
+    body: "#ffffff",
+    primaryLight: "#f5f5f5",
+    primary: "#e0e0e0",
+    primaryDark: "#aeaeae",
+    secondaryLight: "#f5f5f5",
+    secondary: "#e0e0e0",
+    secondaryDark: "#aeaeae",
+    text: "#000000",
+    textLight: "#ffffff",
+    textDark: "#aeaeae",
+    danger: "#ff0000",
+    link: "#0000ff"
+  }
+};
+export {
+  tokens
+};

package/dist/css/vars.css.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const makeVanillaTheme = require("../theme/makeVanillaTheme.cjs");
+const tokens = require("./tokens.cjs");
+fileScope.setFileScope("src/css/vars.css.ts", "@blockle/blocks-core");
+const vars = css.createThemeContract(makeVanillaTheme.makeVanillaTheme(tokens.tokens));
+fileScope.endFileScope();
+exports.vars = vars;

package/dist/css/vars.css.d.ts

@@ -0,0 +1,75 @@
+export declare const vars: {
+    space: {
+        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})`;
+    };
+    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})`;
+    };
+    color: {
+        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})`;
+    };
+    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})`;
+    };
+    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})`;
+    };
+    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})`;
+    };
+    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})`;
+    };
+    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})`;
+    };
+    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})`;
+    };
+    shadow: {
+        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})`;
+    };
+    focus: {
+        boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};

package/dist/css/vars.css.js

@@ -0,0 +1,10 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createThemeContract } from "@vanilla-extract/css";
+import { makeVanillaTheme } from "../theme/makeVanillaTheme.js";
+import { tokens } from "./tokens.js";
+setFileScope("src/css/vars.css.ts", "@blockle/blocks-core");
+const vars = createThemeContract(makeVanillaTheme(tokens));
+endFileScope();
+export {
+  vars
+};

package/dist/index.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const breakpoint = require("./css/breakpoint/breakpoint.cjs");
+const layers_css = require("./css/layers.css.cjs");
+const rem = require("./css/rem.cjs");
+const vars_css = require("./css/vars.css.cjs");
+const atomicProperties = require("./sprinkles/atomicProperties.cjs");
+const getAtomsAndProps = require("./sprinkles/getAtomsAndProps.cjs");
+const sprinkles_css = require("./sprinkles/sprinkles.css.cjs");
+const makeComponentTheme = require("./theme/makeComponentTheme.cjs");
+const makeTheme = require("./theme/makeTheme.cjs");
+const classnames = require("./utils/classnames/classnames.cjs");
+const hasAnimationDuration = require("./utils/dom/hasAnimationDuration.cjs");
+const flexbox = require("./utils/flexbox/flexbox.cjs");
+const math = require("./utils/math/math.cjs");
+const mergeProps = require("./utils/react/mergeProps.cjs");
+const refs = require("./utils/react/refs.cjs");
+const helpers = require("./utils/typing/helpers.cjs");
+exports.minMediaQuery = breakpoint.minMediaQuery;
+exports.blocksLayer = layers_css.blocksLayer;
+exports.rem = rem.rem;
+exports.vars = vars_css.vars;
+exports.responsiveProperties = atomicProperties.responsiveProperties;
+exports.unresponsiveProperties = atomicProperties.unresponsiveProperties;
+exports.getAtomsAndProps = getAtomsAndProps.getAtomsAndProps;
+exports.sprinkles = sprinkles_css.sprinkles;
+exports.makeComponentTheme = makeComponentTheme.makeComponentTheme;
+exports.makeTheme = makeTheme.makeTheme;
+exports.classnames = classnames.classnames;
+exports.hasAnimationDuration = hasAnimationDuration.hasAnimationDuration;
+exports.alignItemsMap = flexbox.alignItemsMap;
+exports.justifyContentMap = flexbox.justifyContentMap;
+exports.getBoundValue = math.getBoundValue;
+exports.roundToPrecision = math.roundToPrecision;
+exports.mergeProps = mergeProps.mergeProps;
+exports.composeRefs = refs.composeRefs;
+exports.isObjectLike = helpers.isObjectLike;

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export type { ComponentThemes, ComponentThemesProps, } from './config/componentThemes';
+export type { ThemeTokens } from './config/themeTokens';
+export { minMediaQuery } from './css/breakpoint/breakpoint';
+export { blocksLayer } from './css/layers.css';
+export { rem } from './css/rem';
+export { vars } from './css/vars.css';
+export { responsiveProperties, unresponsiveProperties, } from './sprinkles/atomicProperties';
+export type { MarginSprinkles, PaddingSprinkles, ResponsiveDisplayFlex, ResponsiveValue, TextSprinkles, } from './sprinkles/atomTypes';
+export { getAtomsAndProps } from './sprinkles/getAtomsAndProps';
+export { sprinkles, type Sprinkles } from './sprinkles/sprinkles.css';
+export { makeComponentTheme } from './theme/makeComponentTheme';
+export type { ComponentTheme, ThemeComponentsStyles, } from './theme/makeComponentTheme';
+export { makeTheme } from './theme/makeTheme';
+export type { Theme } from './theme/makeTheme';
+export { classnames } from './utils/classnames/classnames';
+export { hasAnimationDuration } from './utils/dom/hasAnimationDuration';
+export { alignItemsMap, justifyContentMap, type AlignItemsMap, type JustifyContentMap, } from './utils/flexbox/flexbox';
+export { getBoundValue, roundToPrecision } from './utils/math/math';
+export { mergeProps } from './utils/react/mergeProps';
+export { composeRefs } from './utils/react/refs';
+export { isObjectLike, type AnyString, type HTMLElementProps, type IsNumberUnion, type IsStringUnion, type IsUnion, type OptionalLiteral, type RecordLike, } from './utils/typing/helpers';

package/dist/index.js

@@ -0,0 +1,37 @@
+import { minMediaQuery } from "./css/breakpoint/breakpoint.js";
+import { blocksLayer } from "./css/layers.css.js";
+import { rem } from "./css/rem.js";
+import { vars } from "./css/vars.css.js";
+import { responsiveProperties, unresponsiveProperties } from "./sprinkles/atomicProperties.js";
+import { getAtomsAndProps } from "./sprinkles/getAtomsAndProps.js";
+import { sprinkles } from "./sprinkles/sprinkles.css.js";
+import { makeComponentTheme } from "./theme/makeComponentTheme.js";
+import { makeTheme } from "./theme/makeTheme.js";
+import { classnames } from "./utils/classnames/classnames.js";
+import { hasAnimationDuration } from "./utils/dom/hasAnimationDuration.js";
+import { alignItemsMap, justifyContentMap } from "./utils/flexbox/flexbox.js";
+import { getBoundValue, roundToPrecision } from "./utils/math/math.js";
+import { mergeProps } from "./utils/react/mergeProps.js";
+import { composeRefs } from "./utils/react/refs.js";
+import { isObjectLike } from "./utils/typing/helpers.js";
+export {
+  alignItemsMap,
+  blocksLayer,
+  classnames,
+  composeRefs,
+  getAtomsAndProps,
+  getBoundValue,
+  hasAnimationDuration,
+  isObjectLike,
+  justifyContentMap,
+  makeComponentTheme,
+  makeTheme,
+  mergeProps,
+  minMediaQuery,
+  rem,
+  responsiveProperties,
+  roundToPrecision,
+  sprinkles,
+  unresponsiveProperties,
+  vars
+};

package/dist/sprinkles/atomTypes.d.ts

@@ -0,0 +1,36 @@
+import { Sprinkles } from './sprinkles.css';
+export type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
+export type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
+export type MarginSprinkles = {
+    margin?: Sprinkles['margin'];
+    marginBlock?: Sprinkles['marginBlock'];
+    marginBlockStart?: Sprinkles['marginBlockStart'];
+    marginBlockEnd?: Sprinkles['marginBlockEnd'];
+    marginInline?: Sprinkles['marginInline'];
+    marginInlineStart?: Sprinkles['marginInlineStart'];
+    marginInlineEnd?: Sprinkles['marginInlineEnd'];
+};
+export type PaddingSprinkles = {
+    padding?: Sprinkles['padding'];
+    paddingBlock?: Sprinkles['paddingBlock'];
+    paddingBlockStart?: Sprinkles['paddingBlockStart'];
+    paddingBlockEnd?: Sprinkles['paddingBlockEnd'];
+    paddingInline?: Sprinkles['paddingInline'];
+    paddingInlineStart?: Sprinkles['paddingInlineStart'];
+    paddingInlineEnd?: Sprinkles['paddingInlineEnd'];
+};
+export type TextSprinkles = {
+    color?: Sprinkles['color'];
+    fontFamily?: Sprinkles['fontFamily'];
+    fontSize?: Sprinkles['fontSize'];
+    fontStyle?: Sprinkles['fontStyle'];
+    fontWeight?: Sprinkles['fontWeight'];
+    lineHeight?: Sprinkles['lineHeight'];
+    textAlign?: Sprinkles['textAlign'];
+    textDecoration?: Sprinkles['textDecoration'];
+    textTransform?: Sprinkles['textTransform'];
+    textWrap?: Sprinkles['textWrap'];
+    whiteSpace?: Sprinkles['whiteSpace'];
+    wordBreak?: Sprinkles['wordBreak'];
+    wordWrap?: Sprinkles['wordWrap'];
+};