@blockle/blocks 0.19.0 → 0.20.0-alpha1

package/dist/styles/components/Accessibility/VisuallyHidden/VisuallyHidden.mjs

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { visuallyHidden } from "./visually-hidden.css.mjs";
-const classnames = (...args) => {
-  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
-  return className || void 0;
-};
-const VisuallyHidden = ({
-  children,
-  className,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsx("span", { className: classnames(visuallyHidden, className), ...restProps, children });
-};
-export {
-  VisuallyHidden,
-  classnames
-};

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

@@ -1,239 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
-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 context = react.useContext(BlocksProviderContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a BlocksProvider");
-  }
-  return context.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 ?? {};
-};
-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
-      switch (propName) {
-        case "style": {
-          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-          break;
-        }
-        case "className": {
-          overrideProps[propName] = styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(slotPropValue, childPropValue);
-          break;
-        }
-        case "ref": {
-          overrideProps[propName] = composeRefs(slotPropValue, childPropValue);
-          break;
-        }
-        default: {
-          overrideProps[propName] = childPropValue;
-        }
-      }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-function createAsChildTemplate(defaultElement) {
-  const Tag = defaultElement;
-  const Template2 = ({
-    asChild,
-    children,
-    ref,
-    ...rootProps
-  }) => {
-    if (!asChild) {
-      const tagProps = { ref, ...rootProps };
-      return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ...tagProps, children });
-    }
-    const childrenArray = react.Children.toArray(children);
-    const slotIndex = childrenArray.findIndex((child) => {
-      if (!react.isValidElement(child)) {
-        return false;
-      }
-      return child.type === Slot$1;
-    });
-    const slot = childrenArray[slotIndex];
-    if (!slot) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error("Template: No Slot provided");
-      }
-      return null;
-    }
-    if (!isValidElementWithChildren(slot)) {
-      return null;
-    }
-    if (!react.isValidElement(slot.props.children)) {
-      if (process.env.NODE_ENV !== "production") {
-        if (react.Children.toArray(slot.props.children).length === 0) {
-          console.error("When using asChild, at least one child is required");
-        } else {
-          console.error("When using asChild, only one child is allowed");
-        }
-      }
-      return null;
-    }
-    if (!isValidElementWithChildren(slot.props.children)) {
-      return null;
-    }
-    const nextChildren = [...childrenArray];
-    if (nextChildren.length === 1 && !slot.props.children.props.children) {
-      return react.cloneElement(slot.props.children, mergeProps(rootProps, slot.props.children.props));
-    }
-    nextChildren[slotIndex] = slot.props.children.props.children;
-    return react.cloneElement(
-      slot.props.children,
-      mergeProps(rootProps, slot.props.children.props),
-      nextChildren
-    );
-  };
-  return {
-    Template: Template2,
-    Slot: Slot$1
-  };
-}
-function isValidElementWithChildren(child) {
-  return react.isValidElement(child) && !!child.props;
-}
-const Slot$1 = ({ children }) => {
-  return children;
-};
-const { Template, Slot } = createAsChildTemplate("div");
-const Box = ({ asChild, className, children, ref, ...restProps }) => {
-  const [atomsProps, otherProps] = styles_lib_utils_atomProps_cjs.getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Template,
-    {
-      ref,
-      asChild,
-      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(className, styles_lib_css_atoms_sprinkles_css_cjs.atoms(atomsProps)),
-      ...otherProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
-    }
-  );
-};
-const Divider = ({ className, color, ...restProps }) => {
-  const dividerClass = useComponentStyles("divider", { base: true });
-  const dividerDefaults = useComponentStyleDefaultProps("divider");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box,
-    {
-      role: "separator",
-      inlineSize: "full",
-      backgroundColor: color ?? dividerDefaults.color,
-      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(className, dividerClass, styles_components_display_Divider_divider_css_cjs.divider),
-      ...restProps
-    }
-  );
-};
-exports.BlocksProviderContext = BlocksProviderContext;
-exports.Box = Box;
-exports.Divider = Divider;
-exports.composeRefs = composeRefs;
-exports.createAsChildTemplate = createAsChildTemplate;
-exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;
-exports.useComponentStyles = useComponentStyles;
-exports.useTheme = useTheme;

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

@@ -1,240 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { divider } from "./divider.css.mjs";
-import { createContext, useContext, 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 context = useContext(BlocksProviderContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a BlocksProvider");
-  }
-  return context.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 ?? {};
-};
-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
-      switch (propName) {
-        case "style": {
-          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-          break;
-        }
-        case "className": {
-          overrideProps[propName] = classnames(slotPropValue, childPropValue);
-          break;
-        }
-        case "ref": {
-          overrideProps[propName] = composeRefs(slotPropValue, childPropValue);
-          break;
-        }
-        default: {
-          overrideProps[propName] = childPropValue;
-        }
-      }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-function createAsChildTemplate(defaultElement) {
-  const Tag = defaultElement;
-  const Template2 = ({
-    asChild,
-    children,
-    ref,
-    ...rootProps
-  }) => {
-    if (!asChild) {
-      const tagProps = { ref, ...rootProps };
-      return /* @__PURE__ */ jsx(Tag, { ...tagProps, children });
-    }
-    const childrenArray = Children.toArray(children);
-    const slotIndex = childrenArray.findIndex((child) => {
-      if (!isValidElement(child)) {
-        return false;
-      }
-      return child.type === Slot$1;
-    });
-    const slot = childrenArray[slotIndex];
-    if (!slot) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error("Template: No Slot provided");
-      }
-      return null;
-    }
-    if (!isValidElementWithChildren(slot)) {
-      return null;
-    }
-    if (!isValidElement(slot.props.children)) {
-      if (process.env.NODE_ENV !== "production") {
-        if (Children.toArray(slot.props.children).length === 0) {
-          console.error("When using asChild, at least one child is required");
-        } else {
-          console.error("When using asChild, only one child is allowed");
-        }
-      }
-      return null;
-    }
-    if (!isValidElementWithChildren(slot.props.children)) {
-      return null;
-    }
-    const nextChildren = [...childrenArray];
-    if (nextChildren.length === 1 && !slot.props.children.props.children) {
-      return cloneElement(slot.props.children, mergeProps(rootProps, slot.props.children.props));
-    }
-    nextChildren[slotIndex] = slot.props.children.props.children;
-    return cloneElement(
-      slot.props.children,
-      mergeProps(rootProps, slot.props.children.props),
-      nextChildren
-    );
-  };
-  return {
-    Template: Template2,
-    Slot: Slot$1
-  };
-}
-function isValidElementWithChildren(child) {
-  return isValidElement(child) && !!child.props;
-}
-const Slot$1 = ({ children }) => {
-  return children;
-};
-const { Template, Slot } = createAsChildTemplate("div");
-const Box = ({ asChild, className, children, ref, ...restProps }) => {
-  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
-  return /* @__PURE__ */ jsx(
-    Template,
-    {
-      ref,
-      asChild,
-      className: classnames(className, atoms(atomsProps)),
-      ...otherProps,
-      children: /* @__PURE__ */ jsx(Slot, { children })
-    }
-  );
-};
-const Divider = ({ className, color, ...restProps }) => {
-  const dividerClass = useComponentStyles("divider", { base: true });
-  const dividerDefaults = useComponentStyleDefaultProps("divider");
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      role: "separator",
-      inlineSize: "full",
-      backgroundColor: color ?? dividerDefaults.color,
-      className: classnames(className, dividerClass, divider),
-      ...restProps
-    }
-  );
-};
-export {
-  BlocksProviderContext,
-  Box,
-  Divider,
-  composeRefs,
-  createAsChildTemplate,
-  useComponentStyleDefaultProps,
-  useComponentStyles,
-  useTheme
-};

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

@@ -1,56 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
-const styles_lib_utils_atomProps_cjs = require("../../../lib/utils/atom-props.cjs");
-const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.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_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(spinnerClassName, className), ...restProps });
-};
-const { Template, Slot } = styles_components_display_Divider_Divider_cjs.createAsChildTemplate("button");
-const Button = ({
-  asChild,
-  children,
-  className,
-  disabled,
-  endSlot,
-  intent,
-  loading,
-  ref,
-  size,
-  startSlot,
-  variant,
-  ...restProps
-}) => {
-  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(
-    Template,
-    {
-      ref,
-      asChild,
-      disabled: disabled || loading,
-      className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_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(Slot, { children }),
-        endSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: endSlot })
-      ]
-    }
-  );
-};
-exports.Button = Button;
-exports.Spinner = Spinner;

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

@@ -1,84 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs = require("../../Accessibility/VisuallyHidden/VisuallyHidden.cjs");
-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_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
-const Checkbox = ({
-  children,
-  className,
-  id,
-  name,
-  ref,
-  required,
-  ...restProps
-}) => {
-  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 reactId = react.useId();
-  const inputId = id || reactId;
-  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.container, containerClassName, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref,
-        type: "checkbox",
-        name,
-        id: inputId,
-        className: styles_components_form_Checkbox_checkbox_css_cjs.input,
-        ...restProps
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_Accessibility_VisuallyHidden_VisuallyHidden_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
-  ] });
-  if (!children) {
-    return input;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: labelClassName, children: [
-    input,
-    children && /* @__PURE__ */ jsxRuntime.jsx(Label, { required, htmlFor: inputId, children })
-  ] });
-};
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        style: { width: "1rem", height: "1rem", display: "block" },
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m4.5 12.75 6 6 9-13.5" })
-      }
-    )
-  );
-};
-exports.Checkbox = Checkbox;
-exports.Label = Label;