@blockle/blocks-react 2.4.5 → 2.5.0

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 (15) hide show
  1. package/dist/components/display/Icon/IconMask.css.d.ts.map +1 -1
  2. package/dist/components/display/Icon/IconMask.css.js +9 -4
  3. package/dist/components/feedback/Alert/Alert.css.js +1 -1
  4. package/dist/components/feedback/Skeleton/Skeleton.css.d.ts.map +1 -1
  5. package/dist/components/feedback/Skeleton/Skeleton.css.js +12 -7
  6. package/dist/components/feedback/Skeleton/Skeleton.d.ts +1 -0
  7. package/dist/components/feedback/Skeleton/Skeleton.d.ts.map +1 -1
  8. package/dist/components/feedback/Skeleton/Skeleton.js +2 -0
  9. package/dist/components/feedback/Toast/Toast.css.d.ts.map +1 -1
  10. package/dist/components/feedback/Toast/Toast.css.js +9 -4
  11. package/dist/components/layout/Box/Box.d.ts.map +1 -1
  12. package/dist/components/layout/Box/Box.js +3 -2
  13. package/dist/components/typography/Heading/heading.css.js +1 -1
  14. package/dist/components/typography/Text/text.css.js +1 -1
  15. package/package.json +1 -1
package/dist/components/display/Icon/IconMask.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconMask.css.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Icon/IconMask.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,QAKnB,CAAC"}
1
+ {"version":3,"file":"IconMask.css.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Icon/IconMask.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QASnB,CAAC"}
package/dist/components/display/Icon/IconMask.css.js CHANGED
@@ -1,11 +1,16 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
+ import { layers } from "@blockle/blocks-core";
2
3
  import { style } from "@vanilla-extract/css";
3
4
  setFileScope("src/components/display/Icon/IconMask.css.ts", "@blockle/blocks-react");
4
5
  const iconMask = style({
5
- aspectRatio: "1 / 1",
6
- maskSize: "100%",
7
- display: "inline-block",
8
- backgroundColor: "currentcolor"
6
+ "@layer": {
7
+ [layers.molecule]: {
8
+ aspectRatio: "1 / 1",
9
+ maskSize: "100%",
10
+ display: "inline-block",
11
+ backgroundColor: "currentcolor"
12
+ }
13
+ }
9
14
  });
10
15
  endFileScope();
11
16
  export {
package/dist/components/feedback/Alert/Alert.css.js CHANGED
@@ -4,7 +4,7 @@ import { style } from "@vanilla-extract/css";
4
4
  setFileScope("src/components/feedback/Alert/Alert.css.ts", "@blockle/blocks-react");
5
5
  const closeButton = style({
6
6
  "@layer": {
7
- [layers.organism]: {
7
+ [layers.molecule]: {
8
8
  color: "currentColor"
9
9
  }
10
10
  }
package/dist/components/feedback/Skeleton/Skeleton.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Skeleton/Skeleton.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,QAAQ,QAUnB,CAAC"}
1
+ {"version":3,"file":"Skeleton.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Skeleton/Skeleton.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,QAAQ,QAcnB,CAAC"}
package/dist/components/feedback/Skeleton/Skeleton.css.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
+ import { layers } from "@blockle/blocks-core";
2
3
  import { style, keyframes } from "@vanilla-extract/css";
3
4
  setFileScope("src/components/feedback/Skeleton/Skeleton.css.ts", "@blockle/blocks-react");
4
5
  const pulse = keyframes({
@@ -7,13 +8,17 @@ const pulse = keyframes({
7
8
  "100%": { opacity: 1 }
8
9
  });
9
10
  const skeleton = style({
10
- minHeight: "24px",
11
- "@media": {
12
- "screen and (prefers-reduced-motion: no-preference)": {
13
- animationName: pulse,
14
- animationDuration: "3s",
15
- animationTimingFunction: "ease-in-out",
16
- animationIterationCount: "infinite"
11
+ "@layer": {
12
+ [layers.molecule]: {
13
+ minHeight: "24px",
14
+ "@media": {
15
+ "screen and (prefers-reduced-motion: no-preference)": {
16
+ animationName: pulse,
17
+ animationDuration: "3s",
18
+ animationTimingFunction: "ease-in-out",
19
+ animationIterationCount: "infinite"
20
+ }
21
+ }
17
22
  }
18
23
  }
19
24
  });
package/dist/components/feedback/Skeleton/Skeleton.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Atoms } from '@blockle/blocks-core';
2
2
  export type SkeletonProps = {
3
+ ref?: React.Ref<HTMLDivElement>;
3
4
  height?: string | number;
4
5
  circle?: boolean;
5
6
  className?: string;
package/dist/components/feedback/Skeleton/Skeleton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAc,MAAM,sBAAsB,CAAC;AAK9D,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAe5C,CAAC"}
1
+ {"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAc,MAAM,sBAAsB,CAAC;AAK9D,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiB5C,CAAC"}
package/dist/components/feedback/Skeleton/Skeleton.js CHANGED
@@ -3,6 +3,7 @@ import { classnames } from "@blockle/blocks-core";
3
3
  import { Box } from "../../layout/Box/Box.js";
4
4
  import { skeleton } from "./Skeleton.css.js";
5
5
  const Skeleton = ({
6
+ ref,
6
7
  height,
7
8
  circle = false,
8
9
  className,
@@ -12,6 +13,7 @@ const Skeleton = ({
12
13
  return /* @__PURE__ */ jsx(
13
14
  Box,
14
15
  {
16
+ ref,
15
17
  className: classnames(skeleton, className),
16
18
  borderRadius: circle ? "full" : borderRadius,
17
19
  backgroundColor,
package/dist/components/feedback/Toast/Toast.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/Toast.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS,QAKpB,CAAC"}
1
+ {"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/Toast.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,QASpB,CAAC"}
package/dist/components/feedback/Toast/Toast.css.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
2
+ import { layers } from "@blockle/blocks-core";
2
3
  import { style, keyframes } from "@vanilla-extract/css";
3
4
  setFileScope("src/components/feedback/Toast/Toast.css.ts", "@blockle/blocks-react");
4
5
  const toastEnter = keyframes({
@@ -6,10 +7,14 @@ const toastEnter = keyframes({
6
7
  to: { opacity: 1, scale: 1, translate: "0 0" }
7
8
  });
8
9
  const container = style({
9
- animationName: toastEnter,
10
- animationDuration: "240ms",
11
- animationTimingFunction: "ease-out",
12
- height: "fit-content"
10
+ "@layer": {
11
+ [layers.molecule]: {
12
+ animationName: toastEnter,
13
+ animationDuration: "240ms",
14
+ animationTimingFunction: "ease-out",
15
+ height: "fit-content"
16
+ }
17
+ }
13
18
  });
14
19
  endFileScope();
15
20
  export {
package/dist/components/layout/Box/Box.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EAIV,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,KAAK,GACP,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAInC,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAmBlC,CAAC"}
1
+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EAIV,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,KAAK,GACP,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAInC,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAoBlC,CAAC"}
package/dist/components/layout/Box/Box.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { getAtomsAndProps, classnames, atoms } from "@blockle/blocks-core";
3
3
  import { createSlottable } from "@blockle/blocks-react-slot";
4
- const [Template, Slot] = createSlottable("div");
4
+ const [Template] = createSlottable("div");
5
5
  const Box = ({
6
6
  asChild,
7
7
  className,
@@ -16,8 +16,9 @@ const Box = ({
16
16
  ref,
17
17
  asChild,
18
18
  className: classnames(className, atoms(atomsProps)),
19
+ noSlot: true,
19
20
  ...otherProps,
20
- children: /* @__PURE__ */ jsx(Slot, { children })
21
+ children
21
22
  }
22
23
  );
23
24
  };
package/dist/components/typography/Heading/heading.css.js CHANGED
@@ -4,7 +4,7 @@ import { style } from "@vanilla-extract/css";
4
4
  setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks-react");
5
5
  const heading = style({
6
6
  "@layer": {
7
- [layers.molecule]: {
7
+ [layers.reset]: {
8
8
  margin: 0,
9
9
  padding: 0
10
10
  }
package/dist/components/typography/Text/text.css.js CHANGED
@@ -4,7 +4,7 @@ import { style } from "@vanilla-extract/css";
4
4
  setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks-react");
5
5
  const text = style({
6
6
  "@layer": {
7
- [layers.molecule]: {
7
+ [layers.reset]: {
8
8
  margin: 0,
9
9
  padding: 0
10
10
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockle/blocks-react",
3
- "version": "2.4.5",
3
+ "version": "2.5.0",
4
4
  "description": "React hooks and components for Blockle",
5
5
  "type": "module",
6
6
  "exports": {