@blockle/blocks-react 2.6.5 → 2.6.6

package/dist/components/layout/Grid/Grid.css.js

@@ -0,0 +1,27 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createResponsiveStyles, layers } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/layout/Grid/Grid.css.ts", "@blockle/blocks-react");
+const grid = style({
+  gridTemplateColumns: "repeat(12, 1fr)"
+});
+const responsiveColSpanStyles = createResponsiveStyles(
+  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+  (value) => ({
+    gridColumn: `span ${value} / span ${value}`
+  }),
+  layers.molecule
+);
+const responsiveRowSpanStyles = createResponsiveStyles(
+  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+  (value) => ({
+    gridRow: `span ${value} / span ${value}`
+  }),
+  layers.molecule
+);
+endFileScope();
+export {
+  grid,
+  responsiveColSpanStyles,
+  responsiveRowSpanStyles
+};

package/dist/components/layout/Grid/Grid.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "../Box/Box.js";
+import { grid } from "./Grid.css.js";
+const Grid = ({
+  children,
+  columnGap,
+  gap,
+  rowGap,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: "grid",
+      className: grid,
+      gap,
+      rowGap,
+      columnGap,
+      ...restProps,
+      children
+    }
+  );
+};
+export {
+  Grid
+};

package/dist/components/layout/Grid/GridItem.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { getResponsiveStyle, classnames } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+import { responsiveColSpanStyles, responsiveRowSpanStyles } from "./Grid.css.js";
+const [Template, Slot] = createSlottable("div");
+const GridItem = ({
+  children,
+  className,
+  colSpan,
+  rowSpan,
+  asChild,
+  ...restProps
+}) => {
+  const colSpanClass = getResponsiveStyle(
+    responsiveColSpanStyles,
+    colSpan
+  );
+  const rowSpanClass = getResponsiveStyle(
+    responsiveRowSpanStyles,
+    rowSpan
+  );
+  return /* @__PURE__ */ jsx(
+    Template,
+    {
+      asChild,
+      className: classnames(colSpanClass, rowSpanClass, className),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Slot, { children })
+    }
+  );
+};
+export {
+  GridItem
+};

package/dist/index.d.ts

@@ -20,6 +20,8 @@ export { Textarea, type TextareaProps, } from './components/form/Textarea/Textar
 export { TextInput, type TextInputProps, } from './components/form/TextInput/TextInput.js';
 export { Box, type BoxProps } from './components/layout/Box/Box.js';
 export { Flex, type FlexProps } from './components/layout/Flex/Flex.js';
+export { Grid, type GridProps } from './components/layout/Grid/Grid.js';
+export { GridItem, type GridItemProps, } from './components/layout/Grid/GridItem.js';
 export { Inline, type InlineProps } from './components/layout/Inline/Inline.js';
 export { Stack, type StackProps } from './components/layout/Stack/Stack.js';
 export { Link, type LinkProps } from './components/navigation/Link/Link.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -20,6 +20,8 @@ import { Textarea } from "./components/form/Textarea/Textarea.js";
 import { TextInput } from "./components/form/TextInput/TextInput.js";
 import { Box } from "./components/layout/Box/Box.js";
 import { Flex } from "./components/layout/Flex/Flex.js";
+import { Grid } from "./components/layout/Grid/Grid.js";
+import { GridItem } from "./components/layout/Grid/GridItem.js";
 import { Inline } from "./components/layout/Inline/Inline.js";
 import { Stack } from "./components/layout/Stack/Stack.js";
 import { Link } from "./components/navigation/Link/Link.js";
@@ -47,6 +49,8 @@ export {
   Divider,
   Drawer,
   Flex,
+  Grid,
+  GridItem,
   Heading,
   IconMask,
   Inline,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-react",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "description": "React hooks and components for Blockle",
   "type": "module",
   "exports": {