@blockle/blocks 0.5.0 → 0.5.1

package/dist/index.cjs

@@ -129,7 +129,9 @@ const Button = react.forwardRef(function Button2({
     base: true,
     variant: isLinkVariant ? "solid" : variant,
     intent,
-    size
+    size,
+    disabled,
+    loading
   });
   const linkClassName = useComponentStyles("link", { base: true, variant: "primary" });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -275,7 +277,7 @@ const Link = react.forwardRef(function Link2({ as, className, variant, underline
   const linkClassName = useComponentStyles("link", { base: true, variant, underline });
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
 });
-const Divider = ({ className, color }) => {
+const Divider = ({ className, color, ...restProps }) => {
   const dividerClass = useComponentStyles("divider", { base: true });
   const dividerDefaults = useComponentStyleDefaultProps("divider");
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -284,7 +286,8 @@ const Divider = ({ className, color }) => {
       role: "separator",
       width: "full",
       backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider)
+      className: classnames(className, dividerClass, styles_components_Divider_divider_css_cjs.divider),
+      ...restProps
     }
   );
 };

package/dist/index.mjs

@@ -129,7 +129,9 @@ const Button = forwardRef(function Button2({
     base: true,
     variant: isLinkVariant ? "solid" : variant,
     intent,
-    size
+    size,
+    disabled,
+    loading
   });
   const linkClassName = useComponentStyles("link", { base: true, variant: "primary" });
   return /* @__PURE__ */ jsxs(
@@ -275,7 +277,7 @@ const Link = forwardRef(function Link2({ as, className, variant, underline, ...r
   const linkClassName = useComponentStyles("link", { base: true, variant, underline });
   return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
 });
-const Divider = ({ className, color }) => {
+const Divider = ({ className, color, ...restProps }) => {
   const dividerClass = useComponentStyles("divider", { base: true });
   const dividerDefaults = useComponentStyleDefaultProps("divider");
   return /* @__PURE__ */ jsx(
@@ -284,7 +286,8 @@ const Divider = ({ className, color }) => {
       role: "separator",
       width: "full",
       backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, divider)
+      className: classnames(className, dividerClass, divider),
+      ...restProps
     }
   );
 };

package/dist/momotaro.chunk.d.ts

@@ -38,12 +38,24 @@ declare const atoms: ((props: {
     readonly wordWrap?: "break-word" | undefined;
     inset?: 0 | undefined;
 } & {
+    readonly alignContent?: ("stretch" | "center" | "flex-start" | "flex-end" | {
+        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly alignItems?: ("stretch" | "center" | "flex-start" | "flex-end" | {
         mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
+    readonly alignSelf?: ("stretch" | "center" | "flex-start" | "flex-end" | {
+        mobile?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+        wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly columnGap?: (("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | {
         mobile?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
         tablet?: ("small" | "medium" | "large" | "none" | "gutter" | "xsmall" | "xlarge") | undefined;
@@ -219,7 +231,7 @@ declare const atoms: ((props: {
         wide?: "center" | "flex-start" | "flex-end" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    properties: Set<"outline" | "borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignItems" | "backgroundColor" | "bottom" | "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" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
+    properties: Set<"outline" | "borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "bottom" | "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" | "border" | "borderColor" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
 };
 
 declare const breakpoints: {
@@ -473,6 +485,7 @@ declare const BlocksProvider: React.FC<BlocksProviderProps>;
 type BoxProps = {
     children?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 } & Atoms;
 type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
 declare const Box: PolymorphicBox;
@@ -486,6 +499,7 @@ type ButtonProps = {
     intent?: ButtonTheme['variants']['intent'];
     size?: ButtonTheme['variants']['size'];
     width?: Atoms['width'];
+    alignSelf?: Atoms['alignSelf'];
     loading?: boolean;
     startSlot?: ReactNode;
     endSlot?: ReactNode;
@@ -498,6 +512,7 @@ declare const Button: react.ForwardRefExoticComponent<{
     intent?: "neutral" | "danger" | undefined;
     size?: "small" | "medium" | "large" | undefined;
     width?: Atoms['width'];
+    alignSelf?: Atoms['alignSelf'];
     loading?: boolean | undefined;
     startSlot?: ReactNode;
     endSlot?: ReactNode;
@@ -505,13 +520,13 @@ declare const Button: react.ForwardRefExoticComponent<{
 } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
 
 type HeadingProps = {
-    className?: string;
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-    children: React.ReactNode;
     align?: Atoms['textAlign'];
+    children: React.ReactNode;
+    className?: string;
+    fontFamily?: Atoms['fontFamily'];
     fontSize?: Atoms['fontSize'];
     fontWeight?: Atoms['fontWeight'];
-    fontFamily?: Atoms['fontFamily'];
+    level: 1 | 2 | 3 | 4 | 5 | 6;
 } & MarginAndPaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
 declare const Heading: React.FC<HeadingProps>;
 
@@ -532,22 +547,25 @@ declare const alignItemsMap: {
 type AlignItemsMap = typeof alignItemsMap;
 
 type InlineProps = {
-    as?: 'div' | 'ul' | 'ol' | 'nav';
-    children: React.ReactNode;
     alignX?: keyof JustifyContentMap;
     alignY?: keyof AlignItemsMap;
-    gap: Atoms['gap'];
+    as?: 'div' | 'ul' | 'ol' | 'nav';
+    children: React.ReactNode;
+    className?: string;
     display?: ResponsiveDisplayFlex;
+    gap: Atoms['gap'];
+    style?: React.CSSProperties;
 } & MarginAndPaddingAtoms;
 declare const Inline: React.FC<InlineProps>;
 
 type StackProps = {
+    alignX?: keyof AlignItemsMap;
     as?: 'div' | 'section' | 'ul' | 'ol';
     children: React.ReactNode;
-    alignX?: keyof AlignItemsMap;
-    gap: Atoms['gap'];
-    display?: ResponsiveDisplayFlex;
     className?: string;
+    display?: ResponsiveDisplayFlex;
+    gap: Atoms['gap'];
+    style?: React.CSSProperties;
     /**
      * Start prop is only valid when as="ol"
      */
@@ -573,24 +591,25 @@ type TextProps = {
 declare const Text: React.FC<TextProps>;
 
 type LinkProps = {
-    variant?: LinkTheme['variants']['variant'];
-    underline?: LinkTheme['variants']['underline'];
     children?: ReactNode;
-    className?: string;
+    underline?: LinkTheme['variants']['underline'];
+    variant?: LinkTheme['variants']['variant'];
 } & Atoms & HTMLElementProps<HTMLAnchorElement>;
 type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
 declare const Link: PolymorphicLink;
 
 type SpinnerProps = {
     className?: string;
-    size?: SpinnerTheme['variants']['size'];
     color?: SpinnerTheme['variants']['color'];
+    size?: SpinnerTheme['variants']['size'];
+    style?: React.CSSProperties;
 } & MarginAtoms;
 declare const Spinner: FC<SpinnerProps>;
 
 type DividerProps = {
     className?: string;
     color?: Atoms['backgroundColor'];
+    style?: React.CSSProperties;
 };
 declare const Divider: FC<DividerProps>;
 

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

@@ -37,7 +37,9 @@ const unresponsiveProperties = {
 };
 const marginSpace = { auto: "auto", ...styles_lib_css_theme_vars_css_cjs.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: styles_lib_css_theme_vars_css_cjs.vars.space,
   display: [
     "none",

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

@@ -36,7 +36,9 @@ const unresponsiveProperties = {
 };
 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",

package/dist/styles/themes/momotaro/components/button.css.cjs

@@ -79,20 +79,20 @@ const button = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("b
       }, "button_variants_intent_danger")
     }
   },
-  compoundVariants: [
-    // Example of compound variants
-    // {
-    //   variants: {
-    //     intent: 'danger',
-    //     variant: 'ghost',
-    //   },
-    //   style: style({
-    //     color: vars.color.danger,
-    //     fontSize: vars.fontSize.small,
-    //     background: 'red',
-    //   }),
-    // },
-  ],
+  // compoundVariants: [
+  //   {
+  //     variants: {
+  //       intent: 'danger',
+  //       variant: 'ghost',
+  //       loading: true,
+  //     },
+  //     style: style({
+  //       color: vars.color.danger,
+  //       fontSize: vars.fontSize.small,
+  //       background: 'red',
+  //     }),
+  //   },
+  // ],
   defaultVariants: {
     size: "small",
     variant: "ghost",

package/dist/styles/themes/momotaro/components/button.css.mjs

@@ -78,20 +78,20 @@ const button = makeComponentTheme("button", {
       }, "button_variants_intent_danger")
     }
   },
-  compoundVariants: [
-    // Example of compound variants
-    // {
-    //   variants: {
-    //     intent: 'danger',
-    //     variant: 'ghost',
-    //   },
-    //   style: style({
-    //     color: vars.color.danger,
-    //     fontSize: vars.fontSize.small,
-    //     background: 'red',
-    //   }),
-    // },
-  ],
+  // compoundVariants: [
+  //   {
+  //     variants: {
+  //       intent: 'danger',
+  //       variant: 'ghost',
+  //       loading: true,
+  //     },
+  //     style: style({
+  //       color: vars.color.danger,
+  //       fontSize: vars.fontSize.small,
+  //       background: 'red',
+  //     }),
+  //   },
+  // ],
   defaultVariants: {
     size: "small",
     variant: "ghost",

package/dist/styles/themes/momotaro/components/link.css.cjs

@@ -38,8 +38,7 @@ const link = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme("lin
     }, "link_variants_underline")
   },
   defaultVariants: {
-    variant: "primary",
-    underline: true
+    variant: "primary"
   }
 });
 fileScope.endFileScope();

package/dist/styles/themes/momotaro/components/link.css.mjs

@@ -37,8 +37,7 @@ const link = makeComponentTheme("link", {
     }, "link_variants_underline")
   },
   defaultVariants: {
-    variant: "primary",
-    underline: true
+    variant: "primary"
   }
 });
 endFileScope();

package/package.json

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