@blockle/blocks 0.8.7 → 0.8.9

package/dist/reset.css.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/reset.css.d.ts

@@ -1,2 +1,2 @@
 
-export { }
+export {  }

package/dist/styles/components/display/Divider/Divider.cjs

@@ -0,0 +1,226 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles_components_display_Divider_divider_css_cjs = require("./divider.css.cjs");
+const react = require("react");
+const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const BlocksProviderContext = react.createContext(null);
+const useTheme = () => {
+  const theme = react.useContext(BlocksProviderContext);
+  if (!theme) {
+    throw new Error("useTheme must be used within a BlocksProvider");
+  }
+  return theme;
+};
+function useComponentStyles(name, props, useDefaultVariants = true) {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(component[key]);
+    }
+  }
+  if (!component.variants) {
+    return classNames.join(" ");
+  }
+  const { defaultVariants } = component;
+  if (useDefaultVariants && defaultVariants) {
+    const keys2 = Object.keys(defaultVariants);
+    for (const key of keys2) {
+      if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
+        variantsWithDefaults[key] = defaultVariants[key];
+      }
+    }
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0 || componentVariants[key] === void 0) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
+      }
+      continue;
+    }
+    const variant = componentVariants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  const { compoundVariants } = component;
+  if (compoundVariants) {
+    for (const compoundVariant of compoundVariants) {
+      const keys2 = Object.keys(compoundVariant.variants);
+      const matches = keys2.every((key) => {
+        const value = variantsWithDefaults[key];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+const useComponentStyleDefaultProps = (name) => {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
+};
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = {};
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    if (childPropValue === void 0) {
+      continue;
+    }
+    if (slotPropValue === void 0) {
+      overrideProps[propName] = childPropValue;
+      continue;
+    }
+    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
+      overrideProps[propName] = (...args) => {
+        childPropValue(...args);
+        slotPropValue(...args);
+      };
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    } else {
+      overrideProps[propName] = childPropValue;
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function createSlottable(defaultElement) {
+  function Slottable2(props, ref) {
+    const { asChild, children, ...slotProps } = props;
+    const Component = defaultElement;
+    if (!asChild) {
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...slotProps, children });
+    }
+    const childrenArray = react.Children.toArray(children);
+    const slot = childrenArray.find((child) => {
+      if (!react.isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    if (!slot) {
+      const Slot2 = childrenArray[0];
+      if (!react.isValidElement(childrenArray[0])) {
+        if (process.env.NODE_ENV === "development") {
+          console.warn("Slottable: First child is not a valid React element");
+        }
+        return null;
+      }
+      if (!react.isValidElement(Slot2)) {
+        return null;
+      }
+      return react.cloneElement(
+        Slot2,
+        {
+          ...mergeProps(slotProps, Slot2.props),
+          ref: composeRefs(ref, Slot2.ref)
+        },
+        Slot2.props.children
+      );
+    }
+    if (!react.isValidElement(slot) || !react.isValidElement(slot.props.children)) {
+      return null;
+    }
+    const newChildren = childrenArray.map((child) => {
+      if (!react.isValidElement(child)) {
+        return child;
+      }
+      if (child.type === Slot) {
+        return slot.props.children.props.children;
+      }
+      return child;
+    });
+    return react.cloneElement(
+      slot.props.children,
+      {
+        ...mergeProps(slotProps, slot.props),
+        ref: composeRefs(ref, slot.props.children.ref)
+      },
+      newChildren
+    );
+  }
+  return react.forwardRef(Slottable2);
+}
+const Slot = ({ children }) => children;
+const Slottable = createSlottable("div");
+const Box = react.forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
+  const [atomsProps, otherProps] = styles_lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Slottable,
+    {
+      ref,
+      asChild,
+      className: classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
+      ...otherProps,
+      children
+    }
+  );
+});
+const Divider = ({ className, color, ...restProps }) => {
+  const dividerClass = useComponentStyles("divider", { base: true });
+  const dividerDefaults = useComponentStyleDefaultProps("divider");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      role: "separator",
+      width: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: classnames(className, dividerClass, styles_components_display_Divider_divider_css_cjs.divider),
+      ...restProps
+    }
+  );
+};
+exports.BlocksProviderContext = BlocksProviderContext;
+exports.Box = Box;
+exports.Divider = Divider;
+exports.Slot = Slot;
+exports.classnames = classnames;
+exports.createSlottable = createSlottable;
+exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
+exports.useComponentStyles = useComponentStyles;
+exports.useTheme = useTheme;

package/dist/styles/components/display/Divider/Divider.mjs

@@ -0,0 +1,227 @@
+import { jsx } from "react/jsx-runtime";
+import { divider } from "./divider.css.mjs";
+import { createContext, useContext, forwardRef, Children, isValidElement, cloneElement } from "react";
+import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+const BlocksProviderContext = createContext(null);
+const useTheme = () => {
+  const theme = useContext(BlocksProviderContext);
+  if (!theme) {
+    throw new Error("useTheme must be used within a BlocksProvider");
+  }
+  return theme;
+};
+function useComponentStyles(name, props, useDefaultVariants = true) {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(component[key]);
+    }
+  }
+  if (!component.variants) {
+    return classNames.join(" ");
+  }
+  const { defaultVariants } = component;
+  if (useDefaultVariants && defaultVariants) {
+    const keys2 = Object.keys(defaultVariants);
+    for (const key of keys2) {
+      if (variantsWithDefaults[key] === void 0 && defaultVariants[key]) {
+        variantsWithDefaults[key] = defaultVariants[key];
+      }
+    }
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0 || componentVariants[key] === void 0) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
+      }
+      continue;
+    }
+    const variant = componentVariants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  const { compoundVariants } = component;
+  if (compoundVariants) {
+    for (const compoundVariant of compoundVariants) {
+      const keys2 = Object.keys(compoundVariant.variants);
+      const matches = keys2.every((key) => {
+        const value = variantsWithDefaults[key];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+const useComponentStyleDefaultProps = (name) => {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
+};
+const classnames = (...args) => {
+  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
+  return className || void 0;
+};
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      setRef(ref, node);
+    }
+  };
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = {};
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    if (childPropValue === void 0) {
+      continue;
+    }
+    if (slotPropValue === void 0) {
+      overrideProps[propName] = childPropValue;
+      continue;
+    }
+    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
+      overrideProps[propName] = (...args) => {
+        childPropValue(...args);
+        slotPropValue(...args);
+      };
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    } else {
+      overrideProps[propName] = childPropValue;
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function createSlottable(defaultElement) {
+  function Slottable2(props, ref) {
+    const { asChild, children, ...slotProps } = props;
+    const Component = defaultElement;
+    if (!asChild) {
+      return /* @__PURE__ */ jsx(Component, { ref, ...slotProps, children });
+    }
+    const childrenArray = Children.toArray(children);
+    const slot = childrenArray.find((child) => {
+      if (!isValidElement(child)) {
+        return false;
+      }
+      return child.type === Slot;
+    });
+    if (!slot) {
+      const Slot2 = childrenArray[0];
+      if (!isValidElement(childrenArray[0])) {
+        if (process.env.NODE_ENV === "development") {
+          console.warn("Slottable: First child is not a valid React element");
+        }
+        return null;
+      }
+      if (!isValidElement(Slot2)) {
+        return null;
+      }
+      return cloneElement(
+        Slot2,
+        {
+          ...mergeProps(slotProps, Slot2.props),
+          ref: composeRefs(ref, Slot2.ref)
+        },
+        Slot2.props.children
+      );
+    }
+    if (!isValidElement(slot) || !isValidElement(slot.props.children)) {
+      return null;
+    }
+    const newChildren = childrenArray.map((child) => {
+      if (!isValidElement(child)) {
+        return child;
+      }
+      if (child.type === Slot) {
+        return slot.props.children.props.children;
+      }
+      return child;
+    });
+    return cloneElement(
+      slot.props.children,
+      {
+        ...mergeProps(slotProps, slot.props),
+        ref: composeRefs(ref, slot.props.children.ref)
+      },
+      newChildren
+    );
+  }
+  return forwardRef(Slottable2);
+}
+const Slot = ({ children }) => children;
+const Slottable = createSlottable("div");
+const Box = forwardRef(function Box2({ asChild, className, children, ...restProps }, ref) {
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsx(
+    Slottable,
+    {
+      ref,
+      asChild,
+      className: classnames(className, atoms(atomsProps)),
+      ...otherProps,
+      children
+    }
+  );
+});
+const Divider = ({ className, color, ...restProps }) => {
+  const dividerClass = useComponentStyles("divider", { base: true });
+  const dividerDefaults = useComponentStyleDefaultProps("divider");
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "separator",
+      width: "full",
+      backgroundColor: color ?? dividerDefaults.color,
+      className: classnames(className, dividerClass, divider),
+      ...restProps
+    }
+  );
+};
+export {
+  BlocksProviderContext,
+  Box,
+  Divider,
+  Slot,
+  classnames,
+  createSlottable,
+  useComponentStyleDefaultProps,
+  useComponentStyles,
+  useTheme
+};

package/dist/styles/components/{Divider → display/Divider}/divider.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/Divider/divider.css.ts?used", "blocks");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/display/Divider/divider.css.ts", "blocks");
 const divider = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/{Divider → display/Divider}/divider.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/Divider/divider.css.ts?used", "blocks");
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/display/Divider/divider.css.ts", "blocks");
 const divider = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Button/Button.cjs

@@ -0,0 +1,55 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_form_Button_Button_css_cjs = require("./Button.css.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const Spinner = ({ className, size, color, ...restProps }) => {
+  const spinnerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("spinner", { base: true, variants: { size, color } });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { color, className: styles_components_display_Divider_Divider_cjs.classnames(spinnerClassName, className), ...restProps });
+};
+const Slottable = styles_components_display_Divider_Divider_cjs.createSlottable("button");
+const Button = react.forwardRef(function Button2({
+  children,
+  className,
+  variant,
+  intent,
+  size,
+  startSlot,
+  endSlot,
+  loading,
+  disabled,
+  asChild,
+  ...restProps
+}, ref) {
+  const buttonClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("button", {
+    base: true,
+    variants: {
+      variant,
+      intent,
+      size,
+      disabled,
+      loading
+    }
+  });
+  const [atomsProps, otherProps] = styles_lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Slottable,
+    {
+      ref,
+      asChild,
+      disabled: disabled || loading,
+      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Button_Button_css_cjs.buttonReset, buttonClassName, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps), className),
+      ...otherProps,
+      children: [
+        startSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: startSlot }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size }),
+        /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Slot, { children }),
+        endSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: endSlot })
+      ]
+    }
+  );
+});
+exports.Button = Button;
+exports.Spinner = Spinner;

package/dist/styles/components/{Button → form/Button}/Button.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const styles_lib_css_layers_layers_css_cjs = require("../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/Button/Button.css.ts?used", "blocks");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/form/Button/Button.css.ts", "blocks");
 const buttonReset = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/{Button → form/Button}/Button.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/Button/Button.css.ts?used", "blocks");
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/form/Button/Button.css.ts", "blocks");
 const buttonReset = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Button/Button.mjs

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
+import { useComponentStyles, Box, classnames, createSlottable, Slot } from "../../display/Divider/Divider.mjs";
+import { buttonReset } from "./Button.css.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+const Spinner = ({ className, size, color, ...restProps }) => {
+  const spinnerClassName = useComponentStyles("spinner", { base: true, variants: { size, color } });
+  return /* @__PURE__ */ jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
+};
+const Slottable = createSlottable("button");
+const Button = forwardRef(function Button2({
+  children,
+  className,
+  variant,
+  intent,
+  size,
+  startSlot,
+  endSlot,
+  loading,
+  disabled,
+  asChild,
+  ...restProps
+}, ref) {
+  const buttonClassName = useComponentStyles("button", {
+    base: true,
+    variants: {
+      variant,
+      intent,
+      size,
+      disabled,
+      loading
+    }
+  });
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
+  return /* @__PURE__ */ jsxs(
+    Slottable,
+    {
+      ref,
+      asChild,
+      disabled: disabled || loading,
+      className: classnames(buttonReset, buttonClassName, atoms(atomsProps), className),
+      ...otherProps,
+      children: [
+        startSlot && /* @__PURE__ */ jsx("div", { children: startSlot }),
+        loading && /* @__PURE__ */ jsx(Spinner, { size }),
+        /* @__PURE__ */ jsx(Slot, { children }),
+        endSlot && /* @__PURE__ */ jsx("div", { children: endSlot })
+      ]
+    }
+  );
+});
+export {
+  Button,
+  Spinner
+};

package/dist/styles/components/form/Checkbox/Checkbox.cjs

@@ -0,0 +1,47 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const styles_components_form_Checkbox_checkbox_css_cjs = require("./checkbox.css.cjs");
+const Label = ({
+  asSpan,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = asSpan ? "span" : "label";
+  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
+      ...restProps,
+      children
+    }
+  );
+};
+const Checkbox = react.forwardRef(function Checkbox2({ name, label, required, className, ...restProps }, ref) {
+  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { base: true }, false);
+  const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { icon: true }, false);
+  const labelClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { label: true }, false);
+  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.container, containerClassName, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "checkbox", name, className: styles_components_form_Checkbox_checkbox_css_cjs.input, ...restProps }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.icon, iconClassName) })
+  ] });
+  if (!label) {
+    return input;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
+    input,
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { asSpan: true, required, children: label })
+  ] });
+});
+exports.Checkbox = Checkbox;
+exports.Label = Label;