@blockle/blocks-react 1.0.1 → 1.0.3

package/dist/components/display/Divider/Divider.d.ts

@@ -1,7 +1,7 @@
-import { Sprinkles } from '@blockle/blocks-core';
+import { Atoms } from '@blockle/blocks-core';
 export type DividerProps = {
     className?: string;
-    color?: Sprinkles['backgroundColor'];
+    color?: Atoms['backgroundColor'];
     style?: React.CSSProperties;
 };
 export declare const Divider: React.FC<DividerProps>;

package/dist/components/feedback/Spinner/Spinner.d.ts

@@ -1,10 +1,10 @@
-import { ComponentThemes, MarginSprinkles } from '@blockle/blocks-core';
+import { ComponentThemes, MarginAtoms } from '@blockle/blocks-core';
 type SpinnerTheme = ComponentThemes['spinner'];
 export type SpinnerProps = {
     className?: string;
     color?: SpinnerTheme['variants']['color'];
     size?: SpinnerTheme['variants']['size'];
     style?: React.CSSProperties;
-} & MarginSprinkles;
+} & MarginAtoms;
 export declare const Spinner: React.FC<SpinnerProps>;
 export {};

package/dist/components/form/Button/Button.cjs

@@ -42,7 +42,7 @@ const Button = ({
       className: blocksCore.classnames(
         Button_css.buttonReset,
         buttonClassName,
-        blocksCore.sprinkles(atomsProps),
+        blocksCore.atoms(atomsProps),
         className
       ),
       ...otherProps,

package/dist/components/form/Button/Button.d.ts

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
-import { ComponentThemes, HTMLElementProps, MarginSprinkles, Sprinkles } from '@blockle/blocks-core';
+import { Atoms, ComponentThemes, HTMLElementProps, MarginAtoms } from '@blockle/blocks-core';
 type ButtonTheme = ComponentThemes['button'];
 export type ButtonProps = {
-    alignSelf?: Sprinkles['alignSelf'];
+    alignSelf?: Atoms['alignSelf'];
     asChild?: boolean;
     children: React.ReactNode;
     disabled?: boolean;
     endSlot?: React.ReactNode;
-    inlineSize?: Sprinkles['inlineSize'];
+    inlineSize?: Atoms['inlineSize'];
     intent?: ButtonTheme['variants']['intent'];
     loading?: boolean;
     popovertarget?: string;
@@ -16,6 +16,6 @@ export type ButtonProps = {
     startSlot?: React.ReactNode;
     type?: 'button' | 'submit' | 'reset';
     variant?: ButtonTheme['variants']['variant'];
-} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginSprinkles;
+} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
 export declare const Button: React.FC<ButtonProps>;
 export {};

package/dist/components/form/Button/Button.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { getAtomsAndProps, classnames, sprinkles } from "@blockle/blocks-core";
+import { getAtomsAndProps, classnames, atoms } from "@blockle/blocks-core";
 import { createSlottable } from "@blockle/blocks-react-slot";
 import { buttonReset } from "./Button.css.js";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
@@ -40,7 +40,7 @@ const Button = ({
       className: classnames(
         buttonReset,
         buttonClassName,
-        sprinkles(atomsProps),
+        atoms(atomsProps),
         className
       ),
       ...otherProps,

package/dist/components/form/Label/Label.cjs

@@ -21,11 +21,7 @@ const Label = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: blocksCore.classnames(
-        containerClassName,
-        className,
-        blocksCore.sprinkles({ cursor })
-      ),
+      className: blocksCore.classnames(containerClassName, className, blocksCore.atoms({ cursor })),
       ...restProps,
       children
     }

package/dist/components/form/Label/Label.d.ts

@@ -1,4 +1,4 @@
-import { ComponentThemes, HTMLElementProps, Sprinkles } from '@blockle/blocks-core';
+import { Atoms, ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
 type LabelTheme = ComponentThemes['label'];
 export type LabelProps = {
     /**
@@ -12,7 +12,7 @@ export type LabelProps = {
     children?: React.ReactNode;
     required?: boolean;
     size?: LabelTheme['variants']['size'];
-    cursor?: Sprinkles['cursor'];
+    cursor?: Atoms['cursor'];
 } & HTMLElementProps<HTMLLabelElement>;
 export declare const Label: React.FC<LabelProps>;
 export {};

package/dist/components/form/Label/Label.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { classnames, sprinkles } from "@blockle/blocks-core";
+import { classnames, atoms } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 const Label = ({
   asSpan,
@@ -19,11 +19,7 @@ const Label = ({
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: classnames(
-        containerClassName,
-        className,
-        sprinkles({ cursor })
-      ),
+      className: classnames(containerClassName, className, atoms({ cursor })),
       ...restProps,
       children
     }

package/dist/components/layout/Box/Box.cjs

@@ -17,7 +17,7 @@ const Box = ({
     {
       ref,
       asChild,
-      className: blocksCore.classnames(className, blocksCore.sprinkles(atomsProps)),
+      className: blocksCore.classnames(className, blocksCore.atoms(atomsProps)),
       ...otherProps,
       children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
     }

package/dist/components/layout/Box/Box.d.ts

@@ -1,4 +1,4 @@
-import { HTMLElementProps, Sprinkles } from '@blockle/blocks-core';
+import { Atoms, HTMLElementProps } from '@blockle/blocks-core';
 import { default as React } from 'react';
 export type BoxProps = {
     asChild?: boolean;
@@ -6,5 +6,5 @@ export type BoxProps = {
     className?: string;
     ref?: React.Ref<HTMLDivElement>;
     style?: React.CSSProperties;
-} & Sprinkles & HTMLElementProps<HTMLDivElement>;
+} & Atoms & HTMLElementProps<HTMLDivElement>;
 export declare const Box: React.FC<BoxProps>;

package/dist/components/layout/Box/Box.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { getAtomsAndProps, classnames, sprinkles } from "@blockle/blocks-core";
+import { getAtomsAndProps, classnames, atoms } from "@blockle/blocks-core";
 import { createSlottable } from "@blockle/blocks-react-slot";
 const [Template, Slot] = createSlottable("div");
 const Box = ({
@@ -15,7 +15,7 @@ const Box = ({
     {
       ref,
       asChild,
-      className: classnames(className, sprinkles(atomsProps)),
+      className: classnames(className, atoms(atomsProps)),
       ...otherProps,
       children: /* @__PURE__ */ jsx(Slot, { children })
     }

package/dist/components/layout/Inline/Inline.d.ts

@@ -1,12 +1,12 @@
-import { AlignItemsMap, JustifyContentMap, MarginSprinkles, PaddingSprinkles, ResponsiveDisplayFlex, Sprinkles } from '@blockle/blocks-core';
+import { AlignItemsMap, Atoms, JustifyContentMap, MarginAtoms, PaddingAtoms } from '@blockle/blocks-core';
 export type InlineProps = {
     alignX?: keyof JustifyContentMap;
     alignY?: keyof AlignItemsMap;
     tag?: 'div' | 'ul' | 'ol' | 'nav';
     children: React.ReactNode;
     className?: string;
-    display?: ResponsiveDisplayFlex;
-    spacing: Sprinkles['gap'];
+    display?: Atoms['display'];
+    spacing: Atoms['gap'];
     style?: React.CSSProperties;
-} & MarginSprinkles & PaddingSprinkles;
+} & MarginAtoms & PaddingAtoms;
 export declare const Inline: React.FC<InlineProps>;

package/dist/components/layout/Stack/Stack.d.ts

@@ -1,16 +1,16 @@
-import { AlignItemsMap, MarginSprinkles, PaddingSprinkles, ResponsiveDisplayFlex, Sprinkles } from '@blockle/blocks-core';
+import { AlignItemsMap, Atoms, MarginAtoms, PaddingAtoms } from '@blockle/blocks-core';
 export type StackProps = {
     alignX?: keyof AlignItemsMap;
     tag?: 'div' | 'section' | 'ul' | 'ol';
     children: React.ReactNode;
     className?: string;
-    display?: ResponsiveDisplayFlex;
-    spacing: Sprinkles['gap'];
+    display?: Atoms['display'];
+    spacing: Atoms['gap'];
     style?: React.CSSProperties;
     role?: React.AriaRole;
     /**
      * Start prop is only valid when tag="ol"
      */
     start?: number;
-} & MarginSprinkles & PaddingSprinkles;
+} & MarginAtoms & PaddingAtoms;
 export declare const Stack: React.FC<StackProps>;

package/dist/components/navigation/Link/Link.d.ts

@@ -1,4 +1,4 @@
-import { ComponentThemes, HTMLElementProps, MarginSprinkles } from '@blockle/blocks-core';
+import { ComponentThemes, HTMLElementProps, MarginAtoms } from '@blockle/blocks-core';
 type LinkTheme = ComponentThemes['link'];
 export type LinkProps = {
     asChild?: boolean;
@@ -6,6 +6,6 @@ export type LinkProps = {
     ref?: React.Ref<HTMLAnchorElement>;
     underline?: LinkTheme['variants']['underline'];
     variant?: LinkTheme['variants']['variant'];
-} & MarginSprinkles & HTMLElementProps<HTMLAnchorElement>;
+} & MarginAtoms & HTMLElementProps<HTMLAnchorElement>;
 export declare const Link: React.FC<LinkProps>;
 export {};

package/dist/components/providers/BlocksProvider/BlocksProvider.cjs

@@ -24,7 +24,7 @@ const BlocksProvider = ({
     {
       className: blocksCore.classnames(
         theme.vars,
-        blocksCore.sprinkles({ fontFamily: "primary" }),
+        blocksCore.atoms({ fontFamily: "primary" }),
         className
       ),
       ...restProps,

package/dist/components/providers/BlocksProvider/BlocksProvider.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { classnames, sprinkles } from "@blockle/blocks-core";
+import { classnames, atoms } from "@blockle/blocks-core";
 import { createSlottable } from "@blockle/blocks-react-slot";
 import { BlocksProviderContext } from "./context.js";
 const [Template, Slot] = createSlottable("div");
@@ -22,7 +22,7 @@ const BlocksProvider = ({
     {
       className: classnames(
         theme.vars,
-        sprinkles({ fontFamily: "primary" }),
+        atoms({ fontFamily: "primary" }),
         className
       ),
       ...restProps,

package/dist/components/typography/Heading/Heading.d.ts

@@ -1,7 +1,7 @@
-import { HTMLElementProps, MarginSprinkles, PaddingSprinkles, TextSprinkles } from '@blockle/blocks-core';
+import { HTMLElementProps, MarginAtoms, PaddingAtoms, TextAtoms } from '@blockle/blocks-core';
 export type HeadingProps = {
     children: React.ReactNode;
     className?: string;
     level: 1 | 2 | 3 | 4 | 5 | 6;
-} & TextSprinkles & MarginSprinkles & PaddingSprinkles & HTMLElementProps<HTMLHeadingElement>;
+} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
 export declare const Heading: React.FC<HeadingProps>;

package/dist/components/typography/Heading/heading.stories.d.ts

@@ -4,9 +4,5 @@ declare const _default: Meta<typeof Heading>;
 export default _default;
 export declare const Default: StoryObj<HeadingProps>;
 export declare const All: {
-    render: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, {
-        children: React.ReactNode;
-        className?: string;
-        level: 1 | 2 | 3 | 4 | 5 | 6;
-    } & import('@blockle/blocks-core').TextSprinkles & import('@blockle/blocks-core').MarginSprinkles & import('@blockle/blocks-core').PaddingSprinkles & import('@blockle/blocks-core').HTMLElementProps<HTMLHeadingElement>>;
+    render: any;
 };

package/dist/components/typography/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import { HTMLElementProps, MarginSprinkles, PaddingSprinkles, TextSprinkles } from '@blockle/blocks-core';
+import { HTMLElementProps, MarginAtoms, PaddingAtoms, TextAtoms } from '@blockle/blocks-core';
 import { default as React } from 'react';
 type Tags = 'del' | 'em' | 'ins' | 'label' | 'p' | 's' | 'small' | 'span' | 'strong' | 'sub' | 'sup';
 export type TextProps<Tag extends Tags = 'span'> = {
@@ -6,6 +6,6 @@ export type TextProps<Tag extends Tags = 'span'> = {
     children: React.ReactNode;
     ref?: React.Ref<HTMLElementTagNameMap[Tag]>;
     tag?: Tag;
-} & TextSprinkles & MarginSprinkles & PaddingSprinkles & HTMLElementProps<HTMLSpanElement>;
+} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLSpanElement>;
 export declare const Text: <T extends Tags = "span">({ asChild, children, className, ref, tag, ...restProps }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-react",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "React hooks and components for Blockle",
   "type": "module",
   "exports": {
@@ -37,11 +37,13 @@
     "url": "https://github.com/Blockle/blocks/issues"
   },
   "homepage": "https://github.com/Blockle/blocks#readme",
+  "dependencies": {
+    "@vanilla-extract/css": "^1.17.1"
+  },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0",
+    "react": "^19",
+    "react-dom": "^19",
     "@blockle/blocks-core": "^0.21.0",
-    "@blockle/blocks-react-slot": "^1.0.0",
-    "@vanilla-extract/css": "^1.17.1"
+    "@blockle/blocks-react-slot": "^1.0.0"
   }
 }