@blockle/blocks 0.11.0 → 0.11.2

package/dist/index.cjs

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const css = require("@vanilla-extract/css");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
+const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
+const styles_lib_css_style_style_cjs = require("./styles/lib/css/style/style.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("./styles/lib/theme/makeComponentTheme.cjs");
 const styles_lib_theme_makeTheme_cjs = require("./styles/lib/theme/makeTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("./styles/lib/theme/vars.css.cjs");
 const styles_components_display_Divider_Divider_cjs = require("./styles/components/display/Divider/Divider.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const require$$0 = require("react");
 const styles_components_form_Button_Button_cjs = require("./styles/components/form/Button/Button.cjs");
 const styles_components_form_Checkbox_Checkbox_cjs = require("./styles/components/form/Checkbox/Checkbox.cjs");
 const styles_components_form_Input_Input_cjs = require("./styles/components/form/Input/Input.cjs");
@@ -18,41 +20,7 @@ const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("./sty
 const styles_components_overlay_Dialog_Dialog_cjs = require("./styles/components/overlay/Dialog/Dialog.cjs");
 const styles_components_typography_Heading_Heading_cjs = require("./styles/components/typography/Heading/Heading.cjs");
 const styles_components_typography_Text_Text_cjs = require("./styles/components/typography/Text/Text.cjs");
-const breakpoints = {
-  mobile: 0,
-  tablet: 740,
-  desktop: 992,
-  wide: 1200
-};
-const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
-function style(props) {
-  const styleRule = {};
-  const atomClassNames = [];
-  if (Array.isArray(props)) {
-    return props.map((rule) => {
-      if (typeof rule === "string") {
-        return rule;
-      }
-      return style(rule);
-    }).join(" ");
-  }
-  for (const [name, value] of Object.entries(props)) {
-    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
-      try {
-        atomClassNames.push(styles_lib_css_atoms_sprinkles_css_cjs.atoms({ [name]: value }));
-      } catch {
-        styleRule[name] = value;
-      }
-    } else {
-      styleRule[name] = value;
-    }
-  }
-  return css.style([styleRule, ...atomClassNames]);
-}
-function makeComponentTheme(component, componentTheme) {
-  return componentTheme;
-}
-const Progress = react.forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
+const Progress = require$$0.forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
   const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
     "progress",
     {
@@ -152,7 +120,7 @@ const Stack = ({
   );
 };
 const Slottable = styles_components_display_Divider_Divider_cjs.createSlottable("a");
-const Link = react.forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
+const Link = require$$0.forwardRef(function Link2({ asChild, className, children, variant, underline, ...restProps }, ref) {
   const linkClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("link", {
     base: true,
     variants: { variant, underline }
@@ -169,7 +137,7 @@ const Link = react.forwardRef(function Link2({ asChild, className, children, var
   );
 });
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
-  react.useEffect(() => {
+  require$$0.useEffect(() => {
     if (!enabled) {
       return;
     }
@@ -236,27 +204,27 @@ const Dropdown = ({
   onRequestClose,
   open,
   repositionOnScroll,
-  style: style2,
+  style,
   variant,
   ...restProps
 }) => {
   const layer = styles_components_overlay_Dialog_Dialog_cjs.useLayer();
   const [visible, hide] = styles_components_overlay_Dialog_Dialog_cjs.useVisibilityState(open);
-  const [position, setPosition] = react.useState({ x: 0, y: 0 });
-  const dropdownRef = react.useRef(null);
+  const [position, setPosition] = require$$0.useState({ x: 0, y: 0 });
+  const dropdownRef = require$$0.useRef(null);
   const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
     "dropdown",
     { base: true, variants: { variant } },
     false
   );
-  react.useLayoutEffect(() => {
+  require$$0.useLayoutEffect(() => {
     if (!visible) {
       return;
     }
     const position2 = getDropdownPosition(align, anchorElement, dropdownRef);
     setPosition({ x: position2[0], y: position2[1] });
   }, [align, anchorElement, visible]);
-  react.useEffect(() => {
+  require$$0.useEffect(() => {
     if (!open || !repositionOnScroll) {
       return;
     }
@@ -287,12 +255,12 @@ const Dropdown = ({
       cancelAnimationFrame(timer);
     };
   }, [open, visible]);
-  const onAnimationEnd = react.useCallback(() => {
+  const onAnimationEnd = require$$0.useCallback(() => {
     if (!open) {
       hide();
     }
   }, [hide, open]);
-  react.useEffect(() => {
+  require$$0.useEffect(() => {
     if (open) {
       return;
     }
@@ -316,7 +284,7 @@ const Dropdown = ({
       className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className),
       position: "absolute",
       style: {
-        ...style2,
+        ...style,
         // TODO Think about how to handle this, perhaps we could add a custom class to the dropdown
         // Or we remove it from getDropdownPosition?
         // "horizontal" ? "vertical"
@@ -330,10 +298,10 @@ const Dropdown = ({
   ) });
 };
 const Tooltip = ({ align = "top", children, label }) => {
-  const id = react.useId();
-  const ref = react.useRef(null);
-  const [open, setOpen] = react.useState(false);
-  react.useEffect(() => {
+  const id = require$$0.useId();
+  const ref = require$$0.useRef(null);
+  const [open, setOpen] = require$$0.useState(false);
+  require$$0.useEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -355,15 +323,15 @@ const Tooltip = ({ align = "top", children, label }) => {
       element.removeEventListener("focusout", onLeave);
     };
   }, [ref, setOpen]);
-  if (react.Children.count(children) !== 1) {
+  if (require$$0.Children.count(children) !== 1) {
     throw new Error("Tooltip component can only have one child");
   }
-  const child = react.Children.toArray(children)[0];
-  if (!react.isValidElement(child)) {
+  const child = require$$0.Children.toArray(children)[0];
+  if (!require$$0.isValidElement(child)) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    react.cloneElement(child, {
+    require$$0.cloneElement(child, {
       ref: styles_components_display_Divider_Divider_cjs.composeRefs(ref, child.ref),
       ["aria-describedby"]: open ? id : void 0
     }),
@@ -383,7 +351,9 @@ const Tooltip = ({ align = "top", children, label }) => {
     )
   ] });
 };
-exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
+exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
+exports.style = styles_lib_css_style_style_cjs.style;
+exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
 exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
 exports.vars = styles_lib_theme_vars_css_cjs.vars;
 exports.Box = styles_components_display_Divider_Divider_cjs.Box;
@@ -393,6 +363,7 @@ exports.classnames = styles_components_display_Divider_Divider_cjs.classnames;
 exports.createSlottable = styles_components_display_Divider_Divider_cjs.createSlottable;
 exports.useComponentStyleDefaultProps = styles_components_display_Divider_Divider_cjs.useComponentStyleDefaultProps;
 exports.useComponentStyles = styles_components_display_Divider_Divider_cjs.useComponentStyles;
+exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.Button = styles_components_form_Button_Button_cjs.Button;
 exports.Spinner = styles_components_form_Button_Button_cjs.Spinner;
 exports.Checkbox = styles_components_form_Checkbox_Checkbox_cjs.Checkbox;
@@ -416,6 +387,3 @@ exports.Link = Link;
 exports.Progress = Progress;
 exports.Stack = Stack;
 exports.Tooltip = Tooltip;
-exports.breakpointQuery = breakpointQuery;
-exports.makeComponentTheme = makeComponentTheme;
-exports.style = style;

package/dist/index.mjs

@@ -1,11 +1,13 @@
 'use client';
 
-import { style as style$1 } from "@vanilla-extract/css";
-import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
+import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
+import { style } from "./styles/lib/css/style/style.mjs";
+import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
 import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
 import { useComponentStyles, Box, classnames, createSlottable, composeRefs } from "./styles/components/display/Divider/Divider.mjs";
 import { Divider, Slot, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
+import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState, useRef, useLayoutEffect, useCallback, useId, Children, isValidElement, cloneElement } from "react";
 import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";
@@ -20,40 +22,6 @@ import { useLayer, useVisibilityState, useIsomorphicLayoutEffect, hasAnimationDu
 import { Dialog, usePreventBodyScroll, useRootAriaHidden } from "./styles/components/overlay/Dialog/Dialog.mjs";
 import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
 import { Text } from "./styles/components/typography/Text/Text.mjs";
-const breakpoints = {
-  mobile: 0,
-  tablet: 740,
-  desktop: 992,
-  wide: 1200
-};
-const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
-function style(props) {
-  const styleRule = {};
-  const atomClassNames = [];
-  if (Array.isArray(props)) {
-    return props.map((rule) => {
-      if (typeof rule === "string") {
-        return rule;
-      }
-      return style(rule);
-    }).join(" ");
-  }
-  for (const [name, value] of Object.entries(props)) {
-    if (atoms.properties.has(name)) {
-      try {
-        atomClassNames.push(atoms({ [name]: value }));
-      } catch {
-        styleRule[name] = value;
-      }
-    } else {
-      styleRule[name] = value;
-    }
-  }
-  return style$1([styleRule, ...atomClassNames]);
-}
-function makeComponentTheme(component, componentTheme) {
-  return componentTheme;
-}
 const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
   const containerClassName = useComponentStyles(
     "progress",