@blockle/blocks 0.2.0 → 0.2.2

package/dist/reset.css.d.ts

@@ -1,4 +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;
@@ -20,6 +22,7 @@ declare const atoms: ((props: {
     readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
     readonly height?: "auto" | "full" | undefined;
     readonly left?: 0 | undefined;
+    readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
     readonly maxHeight?: "full" | undefined;
     readonly maxWidth?: "full" | undefined;
     readonly opacity?: 0 | 1 | undefined;
@@ -30,21 +33,22 @@ 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;
     readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
     readonly width?: "auto" | "fit-content" | "full" | undefined;
     readonly wordBreak?: "break-word" | undefined;
     readonly wordWrap?: "break-word" | undefined;
-    readonly transition?: ("slow" | "normal" | "fast") | undefined;
     inset?: 0 | undefined;
 } & {
-    readonly alignItems?: ("center" | "stretch" | "flex-start" | "flex-end" | {
-        mobile?: "center" | "stretch" | "flex-start" | "flex-end" | undefined;
-        tablet?: "center" | "stretch" | "flex-start" | "flex-end" | undefined;
-        desktop?: "center" | "stretch" | "flex-start" | "flex-end" | undefined;
-        wide?: "center" | "stretch" | "flex-start" | "flex-end" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "center" | "stretch" | "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<1 | 2 | 3 | 4, "stretch" | "center" | "flex-start" | "flex-end" | null>;
     readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
@@ -159,12 +163,12 @@ declare const atoms: ((props: {
         desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly position?: ("fixed" | "relative" | "absolute" | "sticky" | "static" | {
-        mobile?: "fixed" | "relative" | "absolute" | "sticky" | "static" | undefined;
-        tablet?: "fixed" | "relative" | "absolute" | "sticky" | "static" | undefined;
-        desktop?: "fixed" | "relative" | "absolute" | "sticky" | "static" | undefined;
-        wide?: "fixed" | "relative" | "absolute" | "sticky" | "static" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "fixed" | "relative" | "absolute" | "sticky" | "static" | null>;
+    readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
+        mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
+        tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
+        desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
+        wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3 | 4, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
     readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
         mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
         tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
@@ -220,8 +224,108 @@ 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" | "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];
+type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
+type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
+type MarginAtoms = {
+    margin?: Atoms['margin'];
+    marginLeft?: Atoms['marginLeft'];
+    marginRight?: Atoms['marginRight'];
+    marginTop?: Atoms['marginTop'];
+    marginBottom?: Atoms['marginBottom'];
+    marginX?: Atoms['marginX'];
+    marginY?: Atoms['marginY'];
 };
+type PaddingAtoms = {
+    padding?: Atoms['padding'];
+    paddingLeft?: Atoms['paddingLeft'];
+    paddingRight?: Atoms['paddingRight'];
+    paddingTop?: Atoms['paddingTop'];
+    paddingBottom?: Atoms['paddingBottom'];
+    paddingX?: Atoms['paddingX'];
+    paddingY?: Atoms['paddingY'];
+};
+type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
+
+type BoxProps = {
+    children?: React.ReactNode;
+    className?: string;
+} & Atoms;
+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";
+    readonly center: "center";
+    readonly between: "space-between";
+    readonly around: "space-around";
+};
+type JustifyContentMap = typeof justifyContentMap;
+declare const alignItemsMap: {
+    readonly left: "flex-start";
+    readonly right: "flex-end";
+    readonly center: "center";
+    readonly stretch: "stretch";
+};
+type AlignItemsMap = typeof alignItemsMap;
+
+type InlineProps = {
+    as?: 'div' | 'ul' | 'ol' | 'nav';
+    children: React.ReactNode;
+    alignX?: keyof JustifyContentMap;
+    alignY?: keyof AlignItemsMap;
+    gap: Atoms['gap'];
+    display?: ResponsiveDisplayFlex;
+} & MarginAndPaddingAtoms;
+declare const Inline: React.FC<InlineProps>;
+
+type StackProps = {
+    as?: 'div' | 'section' | 'ul' | 'ol';
+    children: React.ReactNode;
+    alignX?: keyof AlignItemsMap;
+    gap: Atoms['gap'];
+    display?: ResponsiveDisplayFlex;
+    className?: string;
+    /**
+     * Start prop is only valid when as="ol"
+     */
+    start?: number;
+} & MarginAndPaddingAtoms;
+declare const Stack: React.FC<StackProps>;
+
+type TextProps = {
+    children: React.ReactNode;
+    as?: 'span' | 'p' | 'strong' | 'em' | 'small' | 's' | 'del' | 'ins' | 'sub' | 'sup';
+    color?: Atoms['color'];
+    fontSize?: Atoms['fontSize'];
+    fontWeight?: Atoms['fontWeight'];
+    fontFamily?: Atoms['fontFamily'];
+    textAlign?: Atoms['textAlign'];
+    fontStyle?: Atoms['fontStyle'];
+    textDecoration?: Atoms['textDecoration'];
+    lineHeight?: Atoms['lineHeight'];
+    whiteSpace?: Atoms['whiteSpace'];
+    wordWrap?: Atoms['wordWrap'];
+    wordBreak?: Atoms['wordBreak'];
+} & MarginAndPaddingAtoms;
+declare const Text: React.FC<TextProps>;
 
 declare const vars: {
     space: {
@@ -276,6 +380,13 @@ declare const vars: {
         regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    lineHeight: {
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `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})`;
@@ -288,8 +399,11 @@ declare const vars: {
     };
 };
 
+type Args = null | undefined | boolean | string;
+declare const classnames: (...args: Args[]) => string | undefined;
+
 declare const theme: {
     vars: string;
 };
 
-export { BlocksProvider, atoms, 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

@@ -12,6 +12,7 @@ const unresponsiveProperties = {
   fontWeight: styles_lib_css_theme_vars_css_cjs.vars.fontWeight,
   height: { auto: "auto", full: "100%" },
   left: [0],
+  lineHeight: styles_lib_css_theme_vars_css_cjs.vars.lineHeight,
   maxHeight: { full: "100%" },
   maxWidth: { full: "100%" },
   opacity: [0, 1],
@@ -22,13 +23,14 @@ 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"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
   width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
   wordBreak: ["break-word"],
-  wordWrap: ["break-word"],
-  transition: styles_lib_css_theme_vars_css_cjs.vars.transition
+  wordWrap: ["break-word"]
 };
 const marginSpace = { auto: "auto", ...styles_lib_css_theme_vars_css_cjs.vars.space };
 const responsiveProperties = {

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

@@ -11,6 +11,7 @@ const unresponsiveProperties = {
   fontWeight: vars.fontWeight,
   height: { auto: "auto", full: "100%" },
   left: [0],
+  lineHeight: vars.lineHeight,
   maxHeight: { full: "100%" },
   maxWidth: { full: "100%" },
   opacity: [0, 1],
@@ -21,13 +22,14 @@ const unresponsiveProperties = {
   right: [0],
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
+  textWrap: ["balance", "wrap"],
   top: [0],
+  transition: vars.transition,
   userSelect: ["none"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
   width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
   wordBreak: ["break-word"],
-  wordWrap: ["break-word"],
-  transition: vars.transition
+  wordWrap: ["break-word"]
 };
 const marginSpace = { auto: "auto", ...vars.space };
 const responsiveProperties = {

package/dist/styles/lib/css/reset/reset.css.cjs

@@ -6,8 +6,9 @@ css.globalStyle(":where(*, *::before, *::after)", {
   boxSizing: "inherit"
 });
 css.globalStyle(":where(html)", {
-  lineHeight: 1.15,
-  boxSizing: "border-box"
+  lineHeight: 1.5,
+  boxSizing: "border-box",
+  WebkitFontSmoothing: "antialiased"
 });
 css.globalStyle(":where(body)", {
   margin: 0,

package/dist/styles/lib/css/reset/reset.css.mjs

@@ -5,8 +5,9 @@ globalStyle(":where(*, *::before, *::after)", {
   boxSizing: "inherit"
 });
 globalStyle(":where(html)", {
-  lineHeight: 1.15,
-  boxSizing: "border-box"
+  lineHeight: 1.5,
+  boxSizing: "border-box",
+  WebkitFontSmoothing: "antialiased"
 });
 globalStyle(":where(body)", {
   margin: 0,

package/dist/styles/lib/css/theme/makeVanillaTheme.cjs

@@ -8,6 +8,7 @@ const makeVanillaTheme = (tokens) => {
     fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.fontSize,
     fontWeight: tokens.typography.fontWeight,
+    lineHeight: tokens.typography.lineHeight,
     transition: tokens.transition,
     shadow: tokens.shadow
   };

package/dist/styles/lib/css/theme/makeVanillaTheme.mjs

@@ -7,6 +7,7 @@ const makeVanillaTheme = (tokens) => {
     fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.fontSize,
     fontWeight: tokens.typography.fontWeight,
+    lineHeight: tokens.typography.lineHeight,
     transition: tokens.transition,
     shadow: tokens.shadow
   };

package/dist/styles/lib/css/theme/tokens.cjs

@@ -16,6 +16,13 @@ const tokens = {
       regular: 400,
       medium: 500,
       strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
     }
   },
   space: {

package/dist/styles/lib/css/theme/tokens.mjs

@@ -15,6 +15,13 @@ const tokens = {
       regular: 400,
       medium: 500,
       strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
     }
   },
   space: {

package/dist/styles/themes/momotaro/tokens.cjs

@@ -50,8 +50,8 @@ const tokens = {
   },
   typography: {
     fontFamily: {
-      standard: "Noto Sans JP",
-      secondary: "Noto Sans JP"
+      standard: '"Rubik", sans-serif',
+      secondary: '"Rubik", sans-serif'
     },
     fontSize: {
       xsmall: "12px",
@@ -64,6 +64,13 @@ const tokens = {
       regular: 400,
       medium: 500,
       strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
     }
   }
 };

package/dist/styles/themes/momotaro/tokens.mjs

@@ -49,8 +49,8 @@ const tokens = {
   },
   typography: {
     fontFamily: {
-      standard: "Noto Sans JP",
-      secondary: "Noto Sans JP"
+      standard: '"Rubik", sans-serif',
+      secondary: '"Rubik", sans-serif'
     },
     fontSize: {
       xsmall: "12px",
@@ -63,6 +63,13 @@ const tokens = {
       regular: 400,
       medium: 500,
       strong: 700
+    },
+    lineHeight: {
+      xsmall: "1rem",
+      small: "1.25rem",
+      medium: "1.5rem",
+      large: "1.75rem",
+      xlarge: "2rem"
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -33,34 +33,36 @@
   ],
   "scripts": {
     "build": "crackle package",
-    "fix": "crackle fix"
+    "fix": "crackle fix",
+    "ts": "tsc --noemit --project ./tsconfig.json"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.11.0",
+    "@radix-ui/react-polymorphic": "^0.0.14",
+    "@vanilla-extract/css": "^1.11.1",
     "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/sprinkles": "^1.6.0"
+    "@vanilla-extract/sprinkles": "^1.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@crackle/cli": "^0.11.5",
-    "@crackle/core": "^0.24.1",
-    "@types/react": "^18.2.7",
-    "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@crackle/cli": "^0.12.0",
+    "@crackle/core": "^0.25.0",
+    "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.41.0",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-unicorn": "^47.0.0",
     "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.0.4",
-    "vitest": "^0.31.1"
+    "typescript": "^5.1.3",
+    "vitest": "^0.32.2"
   },
   "packageManager": "yarn@1.22.19"
 }

package/dist/side-effects/lib/css/atoms/atoms.cjs

@@ -1,2 +0,0 @@
-"use strict";
-require("../../../../styles/lib/css/atoms/sprinkles.css.cjs");

package/dist/side-effects/lib/css/atoms/atoms.mjs

@@ -1 +0,0 @@
-import "../../../../styles/lib/css/atoms/sprinkles.css.mjs";

package/dist/side-effects/themes/momotaro/index.cjs

@@ -1,2 +0,0 @@
-"use strict";
-require("../../../styles/themes/momotaro/momotaroTheme.css.cjs");

package/dist/side-effects/themes/momotaro/index.mjs

@@ -1 +0,0 @@
-import "../../../styles/themes/momotaro/momotaroTheme.css.mjs";