@blockle/blocks 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +6 -2
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.mjs +5 -1
  4. package/dist/momotaro.chunk.d.ts +97 -54
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,7 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
4
3
  const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
4
+ const styles_lib_css_theme_makeTheme_cjs = require("./styles/lib/css/theme/makeTheme.cjs");
5
+ const styles_lib_css_theme_makeComponentTheme_cjs = require("./styles/lib/css/theme/makeComponentTheme.cjs");
6
+ const styles_lib_css_theme_vars_css_cjs = require("./styles/lib/css/theme/vars.css.cjs");
5
7
  const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
6
8
  const jsxRuntime = require("react/jsx-runtime");
7
9
  const react = require("react");
@@ -265,8 +267,10 @@ const Link = react.forwardRef(function Link2({ as, className, variant, underline
265
267
  const linkClassName = useComponentStyles("link", { base: true, variant, underline });
266
268
  return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
267
269
  });
268
- exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
269
270
  exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
271
+ exports.makeTheme = styles_lib_css_theme_makeTheme_cjs.makeTheme;
272
+ exports.makeComponentTheme = styles_lib_css_theme_makeComponentTheme_cjs.makeComponentTheme;
273
+ exports.vars = styles_lib_css_theme_vars_css_cjs.vars;
270
274
  exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
271
275
  exports.BlocksProvider = BlocksProvider;
272
276
  exports.Box = Box;
package/dist/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, vars } from './momotaro.chunk.js';
1
+ export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, vars } from './momotaro.chunk.js';
package/dist/index.mjs CHANGED
@@ -1,7 +1,9 @@
1
1
  'use client';
2
2
 
3
- import { vars } from "./styles/lib/css/theme/vars.css.mjs";
4
3
  import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
4
+ import { makeTheme } from "./styles/lib/css/theme/makeTheme.mjs";
5
+ import { makeComponentTheme } from "./styles/lib/css/theme/makeComponentTheme.mjs";
6
+ import { vars } from "./styles/lib/css/theme/vars.css.mjs";
5
7
  import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
6
8
  import { jsx, jsxs } from "react/jsx-runtime";
7
9
  import { createContext, forwardRef, useContext } from "react";
@@ -278,5 +280,7 @@ export {
278
280
  atoms,
279
281
  breakpointQuery,
280
282
  classnames,
283
+ makeComponentTheme,
284
+ makeTheme,
281
285
  vars
282
286
  };
package/dist/momotaro.chunk.d.ts CHANGED
@@ -4,11 +4,11 @@ import { HTMLProps, ReactNode, FC } from 'react';
4
4
  import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
5
5
 
6
6
  declare const atoms: ((props: {
7
- readonly backgroundColor?: ("white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link") | undefined;
7
+ readonly backgroundColor?: ("link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger") | undefined;
8
8
  readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
9
9
  readonly bottom?: 0 | undefined;
10
10
  readonly boxShadow?: ("small" | "medium" | "large") | undefined;
11
- readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
11
+ readonly color?: "link" | "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "currentColor" | undefined;
12
12
  readonly cursor?: "auto" | "pointer" | undefined;
13
13
  readonly fontFamily?: "secondary" | "standard" | undefined;
14
14
  readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
@@ -24,13 +24,13 @@ declare const atoms: ((props: {
24
24
  readonly overflowY?: "auto" | "hidden" | "scroll" | "visible" | undefined;
25
25
  readonly pointerEvents?: "none" | undefined;
26
26
  readonly right?: 0 | undefined;
27
- readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
27
+ readonly textDecoration?: "none" | "underline" | "overline" | "line-through" | undefined;
28
28
  readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
29
29
  readonly textWrap?: "balance" | "wrap" | undefined;
30
30
  readonly top?: 0 | undefined;
31
31
  readonly transition?: ("slow" | "normal" | "fast") | undefined;
32
32
  readonly userSelect?: "none" | undefined;
33
- readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
33
+ readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
34
34
  readonly width?: "auto" | "fit-content" | "full" | undefined;
35
35
  readonly wordBreak?: "break-word" | undefined;
36
36
  readonly wordWrap?: "break-word" | undefined;
@@ -41,183 +41,183 @@ declare const atoms: ((props: {
41
41
  tablet?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
42
42
  desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
43
43
  wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
44
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
44
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
45
45
  readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
46
46
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
47
47
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
48
48
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
49
49
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
50
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
50
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
51
51
  readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
52
52
  mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
53
53
  tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
54
54
  desktop?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
55
55
  wide?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
56
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
56
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | null>;
57
57
  readonly flex?: (1 | {
58
58
  mobile?: 1 | undefined;
59
59
  tablet?: 1 | undefined;
60
60
  desktop?: 1 | undefined;
61
61
  wide?: 1 | undefined;
62
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 1 | null>;
62
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 1 | null>;
63
63
  readonly flexDirection?: ("row" | "row-reverse" | "column" | "column-reverse" | {
64
64
  mobile?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
65
65
  tablet?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
66
66
  desktop?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
67
67
  wide?: "row" | "row-reverse" | "column" | "column-reverse" | undefined;
68
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
68
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "row" | "row-reverse" | "column" | "column-reverse" | null>;
69
69
  readonly flexGrow?: (0 | 1 | {
70
70
  mobile?: 0 | 1 | undefined;
71
71
  tablet?: 0 | 1 | undefined;
72
72
  desktop?: 0 | 1 | undefined;
73
73
  wide?: 0 | 1 | undefined;
74
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
74
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
75
75
  readonly flexShrink?: (0 | 1 | {
76
76
  mobile?: 0 | 1 | undefined;
77
77
  tablet?: 0 | 1 | undefined;
78
78
  desktop?: 0 | 1 | undefined;
79
79
  wide?: 0 | 1 | undefined;
80
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
81
- readonly flexWrap?: ("nowrap" | "wrap" | {
82
- mobile?: "nowrap" | "wrap" | undefined;
83
- tablet?: "nowrap" | "wrap" | undefined;
84
- desktop?: "nowrap" | "wrap" | undefined;
85
- wide?: "nowrap" | "wrap" | undefined;
86
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
80
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, 0 | 1 | null>;
81
+ readonly flexWrap?: ("wrap" | "nowrap" | {
82
+ mobile?: "wrap" | "nowrap" | undefined;
83
+ tablet?: "wrap" | "nowrap" | undefined;
84
+ desktop?: "wrap" | "nowrap" | undefined;
85
+ wide?: "wrap" | "nowrap" | undefined;
86
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "wrap" | "nowrap" | null>;
87
87
  readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
88
88
  mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
89
89
  tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
90
90
  desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
91
91
  wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
92
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
92
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
93
93
  readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
94
94
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
95
95
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
96
96
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
97
97
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
98
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
98
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
99
99
  readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
100
100
  mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
101
101
  tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
102
102
  desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
103
103
  wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
104
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
104
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
105
105
  readonly marginBottom?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
106
106
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
107
107
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
108
108
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
109
109
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
110
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
110
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
111
111
  readonly marginLeft?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
112
112
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
113
113
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
114
114
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
115
115
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
116
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
116
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
117
117
  readonly marginRight?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
118
118
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
119
119
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
120
120
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
121
121
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
122
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
122
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
123
123
  readonly marginTop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
124
124
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
125
125
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
126
126
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
127
127
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
128
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
128
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
129
129
  readonly outline?: ("none" | {
130
130
  mobile?: "none" | undefined;
131
131
  tablet?: "none" | undefined;
132
132
  desktop?: "none" | undefined;
133
133
  wide?: "none" | undefined;
134
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
134
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | null>;
135
135
  readonly paddingBottom?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
136
136
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
137
137
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
138
138
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
139
139
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
140
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
140
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
141
141
  readonly paddingLeft?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
142
142
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
143
143
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
144
144
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
145
145
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
146
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
146
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
147
147
  readonly paddingRight?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
148
148
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
149
149
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
150
150
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
151
151
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
152
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
152
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
153
153
  readonly paddingTop?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
154
154
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
155
155
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
156
156
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
157
157
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
158
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
158
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
159
159
  readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
160
160
  mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
161
161
  tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
162
162
  desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
163
163
  wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
164
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
164
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
165
165
  readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
166
166
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
167
167
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
168
168
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
169
169
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
170
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
170
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
171
171
  readonly textAlign?: ("left" | "right" | "center" | "justify" | {
172
172
  mobile?: "left" | "right" | "center" | "justify" | undefined;
173
173
  tablet?: "left" | "right" | "center" | "justify" | undefined;
174
174
  desktop?: "left" | "right" | "center" | "justify" | undefined;
175
175
  wide?: "left" | "right" | "center" | "justify" | undefined;
176
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
176
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "left" | "right" | "center" | "justify" | null>;
177
177
  margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
178
178
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
179
179
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
180
180
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
181
181
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
182
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
182
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
183
183
  marginX?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
184
184
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
185
185
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
186
186
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
187
187
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
188
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
188
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
189
189
  marginY?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
190
190
  mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
191
191
  tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
192
192
  desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
193
193
  wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
194
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
194
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
195
195
  padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
196
196
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
197
197
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
198
198
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
199
199
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
200
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
200
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
201
201
  paddingX?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
202
202
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
203
203
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
204
204
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
205
205
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
206
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
206
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
207
207
  paddingY?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
208
208
  mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
209
209
  tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
210
210
  desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
211
211
  wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
212
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
212
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
213
213
  placeItems?: ("center" | "flex-start" | "flex-end" | {
214
214
  mobile?: "center" | "flex-start" | "flex-end" | undefined;
215
215
  tablet?: "center" | "flex-start" | "flex-end" | undefined;
216
216
  desktop?: "center" | "flex-start" | "flex-end" | undefined;
217
217
  wide?: "center" | "flex-start" | "flex-end" | undefined;
218
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
218
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 2 | 1 | 3, "center" | "flex-start" | "flex-end" | null>;
219
219
  }) => string) & {
220
- properties: Set<"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" | "flex" | "gap" | "inset" | "margin" | "outline" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
220
+ properties: Set<"borderRadius" | "color" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "outline" | "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" | "flex" | "gap" | "inset" | "margin" | "overflow" | "padding" | "placeItems" | "textDecoration" | "textWrap" | "marginX" | "marginY" | "paddingX" | "paddingY">;
221
221
  };
222
222
 
223
223
  type Atoms = Parameters<typeof atoms>[0];
@@ -243,20 +243,11 @@ type PaddingAtoms = {
243
243
  };
244
244
  type MarginAndPaddingAtoms = MarginAtoms & PaddingAtoms;
245
245
 
246
- declare const breakpoints: {
247
- readonly mobile: 0;
248
- readonly tablet: 740;
249
- readonly desktop: 992;
250
- readonly wide: 1200;
251
- };
252
- type Breakpoint = keyof typeof breakpoints;
253
- declare const breakpointQuery: (key: Breakpoint) => string;
254
-
255
- type Theme = {
246
+ type Theme$1 = {
256
247
  type: string;
257
248
  variants?: Record<string, string | boolean>;
258
249
  };
259
- type CreateComponentTheme<T extends Theme> = {
250
+ type CreateComponentTheme<T extends Theme$1> = {
260
251
  type: T['type'];
261
252
  base?: string;
262
253
  variants?: {
@@ -274,6 +265,7 @@ type CreateComponentTheme<T extends Theme> = {
274
265
  [VariantGroup in keyof T['variants']]?: T['variants'][VariantGroup] extends string ? T['variants'][VariantGroup] : boolean;
275
266
  };
276
267
  };
268
+ declare const makeComponentTheme: <T extends ComponentThemes>(options: T) => T;
277
269
 
278
270
  type ButtonTheme = {
279
271
  type: 'button';
@@ -345,7 +337,7 @@ type ButtonProps = {
345
337
  declare const Button: react.ForwardRefExoticComponent<{
346
338
  children: ReactNode;
347
339
  type?: "button" | "submit" | "reset" | undefined;
348
- variant?: "link" | "outline" | "solid" | "ghost" | undefined;
340
+ variant?: "link" | "solid" | "outline" | "ghost" | undefined;
349
341
  intent?: "danger" | "neutral" | undefined;
350
342
  size?: "small" | "medium" | "large" | undefined;
351
343
  width?: Atoms['width'];
@@ -439,6 +431,57 @@ type SpinnerProps = {
439
431
  } & MarginAtoms;
440
432
  declare const Spinner: FC<SpinnerProps>;
441
433
 
434
+ declare const breakpoints: {
435
+ readonly mobile: 0;
436
+ readonly tablet: 740;
437
+ readonly desktop: 992;
438
+ readonly wide: 1200;
439
+ };
440
+ type Breakpoint = keyof typeof breakpoints;
441
+ declare const breakpointQuery: (key: Breakpoint) => string;
442
+
443
+ type FontWeight = 'regular' | 'medium' | 'strong';
444
+ type Space = 'none' | 'gutter' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
445
+ type Transition = 'slow' | 'normal' | 'fast';
446
+ type BorderRadius = 'small' | 'medium' | 'large' | 'xlarge';
447
+ type BorderWidth = 'small' | 'medium' | 'large';
448
+ type BoxShadow = 'small' | 'medium' | 'large';
449
+ type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
450
+ type LineHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
451
+ type Color = 'white' | 'black' | 'body' | 'primaryLight' | 'primary' | 'primaryDark' | 'secondaryLight' | 'secondary' | 'secondaryDark' | 'text' | 'textLight' | 'textDark' | 'danger' | 'link';
452
+ type BlocksTokens = {
453
+ typography: {
454
+ fontFamily: {
455
+ standard: string;
456
+ secondary?: string;
457
+ };
458
+ fontSize: Record<FontSize, number | string>;
459
+ fontWeight: Record<FontWeight, 400 | 500 | 600 | 700 | 800>;
460
+ lineHeight: Record<LineHeight, number | string>;
461
+ };
462
+ spacing: Record<Space, number | string>;
463
+ transition: Record<Transition, string>;
464
+ border: {
465
+ radius: Record<BorderRadius, number | string>;
466
+ width: Record<BorderWidth, number | string>;
467
+ };
468
+ shadow: Record<BoxShadow, string>;
469
+ focus: {
470
+ boxShadow: string;
471
+ };
472
+ color: Record<Color, string>;
473
+ };
474
+
475
+ type Theme = {
476
+ name: string;
477
+ tokens: BlocksTokens;
478
+ components: ComponentThemesMap;
479
+ };
480
+ declare const makeTheme: (theme: Theme) => {
481
+ vars: string;
482
+ components: ComponentThemesMap;
483
+ };
484
+
442
485
  declare const vars: {
443
486
  space: {
444
487
  none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -456,6 +499,7 @@ declare const vars: {
456
499
  xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
457
500
  };
458
501
  color: {
502
+ link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
459
503
  white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
460
504
  black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
461
505
  body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -469,7 +513,6 @@ declare const vars: {
469
513
  textLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
470
514
  textDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
471
515
  danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
472
- link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
473
516
  };
474
517
  borderWidth: {
475
518
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -522,4 +565,4 @@ declare const momotaro: {
522
565
  components: ComponentThemesMap;
523
566
  };
524
567
 
525
- export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, momotaro, vars };
568
+ export { BlocksProvider, BlocksProviderProps, BlocksTokens, Box, BoxProps, Button, ButtonProps, ComponentThemesMap, Heading, HeadingProps, Inline, InlineProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, vars };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "description": "Blocks design system",
5
5
  "repository": "git@github.com:Blockle/blocks.git",
6
6
  "license": "MIT",