@blockle/blocks 0.6.0 → 0.7.1

package/dist/index.mjs

@@ -5,13 +5,15 @@ 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 { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useId } from "react";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
-import { divider } from "./styles/components/Divider/divider.css.mjs";
+import { container, input, icon } from "./styles/components/Checkbox/checkbox.css.mjs";
 import { backdropLeaveAnimation, backdropLeave, backdrop, dialogLeave, dialog } from "./styles/components/Dialog/dialog.css.mjs";
 import { createPortal } from "react-dom";
-import { input } from "./styles/components/Input/input.css.mjs";
+import { divider } from "./styles/components/Divider/divider.css.mjs";
+import { input as input$1 } from "./styles/components/Input/input.css.mjs";
+import { container as container$1, input as input$2, icon as icon$1 } from "./styles/components/Radio/radio.css.mjs";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -72,33 +74,36 @@ function useComponentStyles(name, props, useDefaultVariants = true) {
   if (!component.variants) {
     return classNames.join(" ");
   }
-  if (useDefaultVariants && component.defaultVariants) {
-    const keys2 = Object.keys(component.defaultVariants);
+  const { defaultVariants } = component;
+  if (useDefaultVariants && defaultVariants) {
+    const keys2 = Object.keys(defaultVariants);
     for (const key of keys2) {
-      if (variantsWithDefaults[key] === void 0) {
-        variantsWithDefaults[key] = component.defaultVariants[key];
+      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) {
       continue;
     }
     if (typeof value === "boolean") {
-      if (value && component.variants[key]) {
-        classNames.push(component.variants[key]);
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
       }
       continue;
     }
-    const variant = component.variants[key][value];
+    const variant = componentVariants[key][value];
     if (variant) {
       classNames.push(variant);
     }
   }
-  if (component.compoundVariants) {
-    for (const compoundVariant of component.compoundVariants) {
+  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];
@@ -140,31 +145,22 @@ const Button = forwardRef(function Button2({
   disabled,
   ...restProps
 }, ref) {
-  const isLinkVariant = variant === "link";
   const buttonClassName = useComponentStyles("button", {
     base: true,
     variants: {
-      variant: isLinkVariant ? "solid" : variant,
+      variant,
       intent,
       size,
       disabled,
       loading
     }
   });
-  const linkClassName = useComponentStyles("link", {
-    base: true,
-    variants: { variant: "primary" }
-  });
   return /* @__PURE__ */ jsxs(
     Box,
     {
       ref,
       as: "button",
-      className: classnames(
-        buttonReset,
-        isLinkVariant ? linkClassName : buttonClassName,
-        className
-      ),
+      className: classnames(buttonReset, buttonClassName, className),
       width,
       type,
       disabled: disabled || loading,
@@ -178,143 +174,45 @@ const Button = forwardRef(function Button2({
     }
   );
 });
-const Heading = ({
-  className,
-  level = 1,
+const Label = ({
+  visualOnly,
   children,
-  align,
-  fontSize,
-  fontWeight = "strong",
-  fontFamily,
+  className,
+  required,
+  size,
+  cursor,
   ...restProps
 }) => {
-  const as = `h${level}`;
+  const Component = visualOnly ? "span" : "label";
+  const containerClassName = useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
   return /* @__PURE__ */ jsx(
-    Box,
+    Component,
     {
-      as,
-      className,
-      fontFamily,
-      fontWeight,
-      fontSize,
-      textAlign: align,
-      padding: "none",
-      margin: "none",
+      className: classnames(containerClassName, className, atoms({ cursor })),
       ...restProps,
       children
     }
   );
 };
-const justifyContentMap = {
-  left: "flex-start",
-  right: "flex-end",
-  center: "center",
-  between: "space-between",
-  around: "space-around"
-};
-const alignItemsMap = {
-  left: "flex-start",
-  right: "flex-end",
-  center: "center",
-  stretch: "stretch"
-};
-const Inline = ({
-  alignX,
-  alignY,
-  as = "div",
-  children,
-  display = "flex",
-  gap,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      as,
-      display,
-      gap,
-      flexDirection: "row",
-      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
-      alignItems: alignY ? alignItemsMap[alignY] : void 0,
-      flexWrap: "wrap",
-      ...props,
-      children
-    }
-  );
-};
-const Stack = ({
-  as = "div",
-  display = "flex",
-  children,
-  gap,
-  alignX,
-  ...restProps
-}) => {
-  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && as !== "ol") {
-    console.warn('Stack: start prop is only valid when as="ol"');
+const Checkbox = forwardRef(function Checkbox2({ name, label, required, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("checkbox", { base: true }, false);
+  const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input$12 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "checkbox", name, className: input, ...restProps }),
+    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
+  ] });
+  if (!label) {
+    return input$12;
   }
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      as,
-      display,
-      gap,
-      flexDirection: "column",
-      alignItems: alignX ? alignItemsMap[alignX] : void 0,
-      ...restProps,
-      children
-    }
-  );
-};
-const Text = ({
-  as = "span",
-  children,
-  color,
-  fontSize,
-  fontWeight,
-  fontFamily,
-  textAlign,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      as,
-      color,
-      fontSize,
-      fontWeight,
-      fontFamily,
-      textAlign,
-      padding: "none",
-      margin: "none",
-      ...restProps,
-      children
-    }
-  );
-};
-const defaultElement = "a";
-const Link = forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
-  const Component = as || defaultElement;
-  const linkClassName = useComponentStyles("link", {
-    base: true,
-    variants: { variant, underline }
-  });
-  return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
+  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+    input$12,
+    label && /* @__PURE__ */ jsx(Label, { visualOnly: true, required, children: label })
+  ] });
 });
-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
-    }
-  );
-};
 const useLayer = () => {
   const layerRef = useRef();
   useEffect(
@@ -327,7 +225,9 @@ const useLayer = () => {
   );
   return () => {
     if (!layerRef.current) {
-      layerRef.current = document.createElement("div");
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
       document.body.append(layerRef.current);
     }
     return layerRef.current;
@@ -346,12 +246,12 @@ const useVisibilityState = (open) => {
   return [visible, hide];
 };
 const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
+const getFirstFocusableElement = (container2) => {
+  const focusable = container2.querySelector(focusableSelectors);
   return focusable || null;
 };
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
+const focusFirstElement = (container2) => {
+  const focusable = getFirstFocusableElement(container2);
   if (focusable) {
     focusable.focus();
   }
@@ -411,14 +311,21 @@ const usePreventBodyScroll = (enabled = true) => {
     };
   }, [enabled]);
 };
-const Portal = ({ children, container }) => {
+const Portal = ({ children, container: container2 }) => {
   const context = useTheme();
   return createPortal(
     /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
-    container || document.body
+    container2 || document.body
   );
 };
-const Dialog = ({ children, open, className, onRequestClose, size }) => {
+const Dialog = ({
+  children,
+  open,
+  className,
+  onRequestClose,
+  size,
+  ...restProps
+}) => {
   const dialogRef = useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
@@ -473,6 +380,7 @@ const Dialog = ({ children, open, className, onRequestClose, size }) => {
         {
           ref: dialogRef,
           as: "dialog",
+          "aria-modal": "true",
           open: true,
           className: classnames(
             dialog,
@@ -480,12 +388,91 @@ const Dialog = ({ children, open, className, onRequestClose, size }) => {
             dialogClassName,
             className
           ),
+          ...restProps,
           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
+    }
+  );
+};
+const Heading = ({
+  className,
+  level = 1,
+  children,
+  align,
+  fontSize,
+  fontWeight = "strong",
+  fontFamily,
+  ...restProps
+}) => {
+  const as = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as,
+      className,
+      fontFamily,
+      fontWeight,
+      fontSize,
+      textAlign: align,
+      padding: "none",
+      margin: "none",
+      ...restProps,
+      children
+    }
+  );
+};
+const justifyContentMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around"
+};
+const alignItemsMap = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center",
+  stretch: "stretch"
+};
+const Inline = ({
+  alignX,
+  alignY,
+  as = "div",
+  children,
+  display = "flex",
+  gap,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as,
+      display,
+      gap,
+      flexDirection: "row",
+      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
+      alignItems: alignY ? alignItemsMap[alignY] : void 0,
+      flexWrap: "wrap",
+      ...props,
+      children
+    }
+  );
+};
 const Input = forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, label, placeholder, ...restProps }, ref) {
   const id = useId();
   const containerClassName = useComponentStyles("input", { container: true }, false);
@@ -503,23 +490,102 @@ const Input = forwardRef(function Input2({ className, name, type = "text", start
         placeholder: placeholder || label,
         width: "full",
         overflow: "hidden",
-        className: classnames(input, inputClassName),
+        className: classnames(input$1, inputClassName),
         ...restProps
       }
     ),
     endSlot
   ] }) });
 });
+const defaultElement = "a";
+const Link = forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
+  const Component = as || defaultElement;
+  const linkClassName = useComponentStyles("link", {
+    base: true,
+    variants: { variant, underline }
+  });
+  return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
+});
+const Radio = forwardRef(function Checkbox3({ name, label, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("radio", { base: true }, false);
+  const iconClassName = useComponentStyles("radio", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input2 = /* @__PURE__ */ jsxs("div", { className: classnames(container$1, containerClassName, className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "radio", name, className: input$2, ...restProps }),
+    /* @__PURE__ */ jsx("div", { className: classnames(icon$1, iconClassName) })
+  ] });
+  if (!label) {
+    return input2;
+  }
+  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+    input2,
+    label && /* @__PURE__ */ jsx(Label, { visualOnly: true, children: label })
+  ] });
+});
+const Stack = ({
+  as = "div",
+  display = "flex",
+  children,
+  gap,
+  alignX,
+  ...restProps
+}) => {
+  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && as !== "ol") {
+    console.warn('Stack: start prop is only valid when as="ol"');
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as,
+      display,
+      gap,
+      flexDirection: "column",
+      alignItems: alignX ? alignItemsMap[alignX] : void 0,
+      ...restProps,
+      children
+    }
+  );
+};
+const Text = ({
+  as = "span",
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  textAlign,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as,
+      color,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      textAlign,
+      padding: "none",
+      margin: "none",
+      ...restProps,
+      children
+    }
+  );
+};
 export {
   BlocksProvider,
   Box,
   Button,
+  Checkbox,
   Dialog,
   Divider,
   Heading,
   Inline,
   Input,
+  Label,
   Link,
+  Portal,
+  Radio,
   Spinner,
   Stack,
   Text,