@blockle/blocks 0.5.1 → 0.7.0

package/dist/index.mjs

@@ -1,23 +1,36 @@
 'use client';
 
 import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
-import { makeComponentTheme } from "./styles/lib/css/theme/makeComponentTheme.mjs";
-import { makeTheme } from "./styles/lib/css/theme/makeTheme.mjs";
-import { vars } from "./styles/lib/css/theme/vars.css.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 { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect } from "react";
+import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
-import { divider } from "./styles/components/Divider/divider.css.mjs";
 import { backdropLeaveAnimation, backdropLeave, backdrop, dialogLeave, dialog } from "./styles/components/Dialog/dialog.css.mjs";
 import { createPortal } from "react-dom";
+import { divider } from "./styles/components/Divider/divider.css.mjs";
+import { input } from "./styles/components/Input/input.css.mjs";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
 };
 const BlocksProviderContext = createContext(null);
-const BlocksProvider = ({ children, theme }) => {
-  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx("div", { className: classnames(theme.vars, atoms({ fontFamily: "primary" })), children }) });
+const BlocksProvider = ({
+  children,
+  theme,
+  className,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classnames(theme.vars, atoms({ fontFamily: "primary" }), className),
+      ...restProps,
+      children
+    }
+  ) });
 };
 const defaultElement$1 = "div";
 const Box = forwardRef(function Box2({ className, as, ...restProps }, ref) {
@@ -40,55 +53,58 @@ const useTheme = () => {
   }
   return theme;
 };
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-function useComponentStyles(name, props) {
+function useComponentStyles(name, props, useDefaultVariants = true) {
   const { components } = useTheme();
   const component = components[name];
   if (!component) {
-    console.info(`Component ${name} is not defined in the theme`);
+    console.warn(`Component ${name} is not defined in the theme`);
     return "";
   }
   const classNames = [];
-  const propsWithDefaults = { ...props };
-  if (component.defaultVariants) {
-    const keys2 = Object.keys(component.defaultVariants);
-    for (const key of keys2) {
-      if (propsWithDefaults[key] === void 0) {
-        propsWithDefaults[key] = component.defaultVariants[key];
-      }
+  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 (propsWithDefaults.base && component.base) {
-    classNames.push(component.base);
-  }
   if (!component.variants) {
     return classNames.join(" ");
   }
-  const keys = Object.keys(propsWithDefaults);
-  for (const key of keys) {
-    const value = propsWithDefaults[key];
-    if (key === "base" || value === void 0) {
-      continue;
+  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];
+      }
     }
-    if (!hasOwnProperty.call(component.variants, 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) {
-        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 = propsWithDefaults[key];
+        const value = variantsWithDefaults[key];
         if (value === void 0) {
           return false;
         }
@@ -104,10 +120,13 @@ function useComponentStyles(name, props) {
 const useComponentStyleDefaultProps = (name) => {
   const { components } = useTheme();
   const component = components[name];
-  return (component == null ? void 0 : component.defaultVariants) ?? {};
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
 };
 const Spinner = ({ className, size, color, ...restProps }) => {
-  const spinnerClassName = useComponentStyles("spinner", { base: true, size, color });
+  const spinnerClassName = useComponentStyles("spinner", { base: true, variants: { size, color } });
   return /* @__PURE__ */ jsx(Box, { color, className: classnames(spinnerClassName, className), ...restProps });
 };
 const Button = forwardRef(function Button2({
@@ -124,26 +143,22 @@ const Button = forwardRef(function Button2({
   disabled,
   ...restProps
 }, ref) {
-  const isLinkVariant = variant === "link";
   const buttonClassName = useComponentStyles("button", {
     base: true,
-    variant: isLinkVariant ? "solid" : variant,
-    intent,
-    size,
-    disabled,
-    loading
+    variants: {
+      variant,
+      intent,
+      size,
+      disabled,
+      loading
+    }
   });
-  const linkClassName = useComponentStyles("link", { base: true, 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,
@@ -157,140 +172,6 @@ const Button = forwardRef(function Button2({
     }
   );
 });
-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 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
-    }
-  );
-};
-const defaultElement = "a";
-const Link = forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
-  const Component = as || defaultElement;
-  const linkClassName = useComponentStyles("link", { base: true, variant, underline });
-  return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
-});
-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(
@@ -303,7 +184,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;
@@ -394,7 +277,14 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const Dialog = ({ children, open, className, onRequestClose }) => {
+const Dialog = ({
+  children,
+  open,
+  className,
+  onRequestClose,
+  size,
+  ...restProps
+}) => {
   const dialogRef = useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
@@ -431,8 +321,8 @@ const Dialog = ({ children, open, className, onRequestClose }) => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, enabled]);
-  const backdropClassName = useComponentStyles("dialog", { backdrop: true });
-  const dialogClassName = useComponentStyles("dialog", { base: true });
+  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
+  const dialogClassName = useComponentStyles("dialog", { base: true, variants: { size } });
   if (!visible) {
     return null;
   }
@@ -449,6 +339,7 @@ const Dialog = ({ children, open, className, onRequestClose }) => {
         {
           ref: dialogRef,
           as: "dialog",
+          "aria-modal": "true",
           open: true,
           className: classnames(
             dialog,
@@ -456,12 +347,197 @@ const Dialog = ({ children, open, className, onRequestClose }) => {
             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);
+  const inputClassName = useComponentStyles("input", { input: true });
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", className: classnames(containerClassName, className), children: [
+    startSlot,
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "input",
+        id,
+        ref,
+        name,
+        type,
+        placeholder: placeholder || label,
+        width: "full",
+        overflow: "hidden",
+        className: classnames(input, inputClassName),
+        ...restProps
+      }
+    ),
+    endSlot
+  ] }) });
+});
+const Label = ({
+  visualOnly,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = visualOnly ? "span" : "label";
+  const containerClassName = useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classnames(containerClassName, className, atoms({ cursor })),
+      ...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 });
+});
+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,
@@ -470,6 +546,8 @@ export {
   Divider,
   Heading,
   Inline,
+  Input,
+  Label,
   Link,
   Spinner,
   Stack,