@blockle/blocks 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -25,6 +25,33 @@ const Box = react.forwardRef(function Box2({ className, as, ...restProps }, ref)
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomProps)), ...otherProps });
 });
+const Heading = ({
+  className,
+  level = 1,
+  children,
+  align,
+  fontSize,
+  fontWeight = "strong",
+  fontFamily,
+  ...restProps
+}) => {
+  const as = `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      as,
+      className,
+      fontFamily,
+      fontWeight,
+      fontSize,
+      textAlign: align,
+      padding: "none",
+      margin: "none",
+      ...restProps,
+      children
+    }
+  );
+};
 const justifyContentMap = {
   left: "flex-start",
   right: "flex-end",
@@ -70,6 +97,9 @@ const Stack = ({
   alignX,
   ...restProps
 }) => {
+  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && as !== "ol") {
+    console.warn('Stack: start prop is only valid when as="ol"');
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
@@ -113,6 +143,7 @@ exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
 exports.BlocksProvider = BlocksProvider;
 exports.Box = Box;
+exports.Heading = Heading;
 exports.Inline = Inline;
 exports.Stack = Stack;
 exports.Text = Text;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, vars } from './reset.css.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Heading, HeadingProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, vars } from './reset.css.js';

package/dist/index.mjs

@@ -23,6 +23,33 @@ const Box = forwardRef(function Box2({ className, as, ...restProps }, ref) {
   }
   return /* @__PURE__ */ jsx(Component, { ref, className: classnames(className, atoms(atomProps)), ...otherProps });
 });
+const Heading = ({
+  className,
+  level = 1,
+  children,
+  align,
+  fontSize,
+  fontWeight = "strong",
+  fontFamily,
+  ...restProps
+}) => {
+  const as = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as,
+      className,
+      fontFamily,
+      fontWeight,
+      fontSize,
+      textAlign: align,
+      padding: "none",
+      margin: "none",
+      ...restProps,
+      children
+    }
+  );
+};
 const justifyContentMap = {
   left: "flex-start",
   right: "flex-end",
@@ -68,6 +95,9 @@ const Stack = ({
   alignX,
   ...restProps
 }) => {
+  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && as !== "ol") {
+    console.warn('Stack: start prop is only valid when as="ol"');
+  }
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -110,6 +140,7 @@ const Text = ({
 export {
   BlocksProvider,
   Box,
+  Heading,
   Inline,
   Stack,
   Text,

package/dist/reset.css.d.ts

@@ -1,5 +1,6 @@
 import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
+import { HTMLProps } from 'react';
 
 type BlocksProviderProps = {
     children: React.ReactNode;
@@ -32,6 +33,7 @@ declare const atoms: ((props: {
     readonly right?: 0 | undefined;
     readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
     readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
+    readonly textWrap?: "balance" | "wrap" | undefined;
     readonly top?: 0 | undefined;
     readonly transition?: ("slow" | "normal" | "fast") | undefined;
     readonly userSelect?: "none" | undefined;
@@ -222,7 +224,7 @@ declare const atoms: ((props: {
         wide?: "center" | "flex-start" | "flex-end" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "alignItems" | "backgroundColor" | "bottom" | "boxShadow" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "marginX" | "marginY" | "paddingX" | "paddingY">;
+    properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "alignItems" | "backgroundColor" | "bottom" | "boxShadow" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "height" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "rowGap" | "textAlign" | "textTransform" | "top" | "userSelect" | "whiteSpace" | "width" | "wordBreak" | "wordWrap" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };
 
 type Atoms = Parameters<typeof atoms>[0];
@@ -255,6 +257,19 @@ type BoxProps = {
 type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
 declare const Box: PolymorphicBox;
 
+type HTMLElementProps<E extends Element> = Omit<HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
+
+type HeadingProps = {
+    className?: string;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    children: React.ReactNode;
+    align?: Atoms['textAlign'];
+    fontSize?: Atoms['fontSize'];
+    fontWeight?: Atoms['fontWeight'];
+    fontFamily?: Atoms['fontFamily'];
+} & MarginAndPaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
+declare const Heading: React.FC<HeadingProps>;
+
 declare const justifyContentMap: {
     readonly left: "flex-start";
     readonly right: "flex-end";
@@ -288,6 +303,10 @@ type StackProps = {
     gap: Atoms['gap'];
     display?: ResponsiveDisplayFlex;
     className?: string;
+    /**
+     * Start prop is only valid when as="ol"
+     */
+    start?: number;
 } & MarginAndPaddingAtoms;
 declare const Stack: React.FC<StackProps>;
 
@@ -387,4 +406,4 @@ declare const theme: {
     vars: string;
 };
 
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, theme, vars };
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Heading, HeadingProps, Inline, InlineProps, Stack, StackProps, Text, TextProps, atoms, classnames, theme, vars };

package/dist/styles/lib/css/atoms/atomicProperties.cjs

@@ -23,6 +23,7 @@ const unresponsiveProperties = {
   right: [0],
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
+  textWrap: ["balance", "wrap"],
   top: [0],
   transition: styles_lib_css_theme_vars_css_cjs.vars.transition,
   userSelect: ["none"],

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -22,6 +22,7 @@ const unresponsiveProperties = {
   right: [0],
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
+  textWrap: ["balance", "wrap"],
   top: [0],
   transition: vars.transition,
   userSelect: ["none"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",