@blockle/blocks 0.19.1 → 0.20.0-alpha1.0

package/dist/index.mjs

@@ -1,451 +0,0 @@
-'use client';
-
-import { minMediaQuery } 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, createAsChildTemplate, useTheme, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
-import { Divider, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
-import { classnames } from "./styles/components/Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { VisuallyHidden } from "./styles/components/Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";
-import { Checkbox, Label } from "./styles/components/form/Checkbox/Checkbox.mjs";
-import { Input } from "./styles/components/form/Input/Input.mjs";
-import { Radio } from "./styles/components/form/Radio/Radio.mjs";
-import { Select } from "./styles/components/form/Select/Select.mjs";
-import { Slider } from "./styles/components/form/Slider/Slider.mjs";
-import { Switch } from "./styles/components/form/Switch/Switch.mjs";
-import { BlocksProvider } from "./styles/components/other/BlocksProvider/BlocksProvider.mjs";
-import { createPortal } from "react-dom";
-import { useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, useClickOutside } from "./styles/components/overlay/Dialog/Dialog.mjs";
-import { Dialog, usePreventBodyScroll } from "./styles/components/overlay/Dialog/Dialog.mjs";
-import { useRef, useEffect, useState, useCallback, useLayoutEffect, useId, Children, isValidElement, cloneElement, useContext } from "react";
-import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
-import { Text } from "./styles/components/typography/Text/Text.mjs";
-const Progress = ({
-  className,
-  indeterminate,
-  max = 100,
-  ref,
-  value = 0,
-  ...restProps
-}) => {
-  const progress = value / max * 100;
-  const containerClassName = useComponentStyles(
-    "progress",
-    {
-      base: true
-    },
-    false
-  );
-  const barClassName = useComponentStyles(
-    "progress",
-    { bar: true, variants: { indeterminate } },
-    false
-  );
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      className: classnames(containerClassName, className),
-      overflow: "hidden",
-      role: "progressbar",
-      "aria-valuenow": value,
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          className: barClassName,
-          backgroundColor: "currentColor",
-          inlineSize: "full",
-          blockSize: "full",
-          style: { transform: indeterminate ? void 0 : `translateX(-${100 - progress}%)` }
-        }
-      )
-    }
-  );
-};
-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,
-  tag: Tag = "div",
-  children,
-  display = "flex",
-  spacing,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      display,
-      gap: spacing,
-      flexDirection: "row",
-      justifyContent: alignX ? justifyContentMap[alignX] : void 0,
-      alignItems: alignY ? alignItemsMap[alignY] : void 0,
-      flexWrap: "wrap",
-      ...props,
-      children: /* @__PURE__ */ jsx(Tag, { children })
-    }
-  );
-};
-const Stack = ({
-  tag: Tag = "div",
-  display = "flex",
-  children,
-  spacing,
-  alignX,
-  ...restProps
-}) => {
-  if (process.env.NODE_ENV === "development" && restProps.start !== void 0 && Tag !== "ol") {
-    console.warn('Stack: "start" prop is only valid with tag="ol"');
-  }
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      asChild: true,
-      display,
-      gap: spacing,
-      flexDirection: "column",
-      alignItems: alignX ? alignItemsMap[alignX] : void 0,
-      ...restProps,
-      children: /* @__PURE__ */ jsx(Tag, { children })
-    }
-  );
-};
-const { Template, Slot } = createAsChildTemplate("a");
-const Link = ({
-  asChild,
-  children,
-  className,
-  ref,
-  underline,
-  variant,
-  ...restProps
-}) => {
-  const linkClassName = useComponentStyles("link", {
-    base: true,
-    variants: { variant, underline }
-  });
-  return /* @__PURE__ */ jsx(
-    Template,
-    {
-      asChild,
-      ref,
-      className: classnames(className, linkClassName),
-      ...restProps,
-      children: /* @__PURE__ */ jsx(Slot, { children })
-    }
-  );
-};
-const Portal = ({ children, container }) => {
-  const context = useTheme();
-  return createPortal(
-    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
-    container || document.body
-  );
-};
-const useLayer = () => {
-  const layerRef = useRef(null);
-  useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-        layerRef.current = null;
-      }
-    },
-    []
-  );
-  function getLayer() {
-    if (!layerRef.current) {
-      const div = document.createElement("div");
-      div.dataset.layer = "blocks";
-      layerRef.current = div;
-      document.body.append(layerRef.current);
-    }
-    return layerRef.current;
-  }
-  return getLayer;
-};
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = useState(open);
-  const hide = useCallback(() => {
-    setVisible(false);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
-function getPopoverPosition(align, anchorRef, popoverRef) {
-  if (!anchorRef.current || !popoverRef.current) {
-    return [0, 0];
-  }
-  popoverRef.current.style.transform = "none";
-  popoverRef.current.style.transitionDuration = "0s";
-  const anchorRect = anchorRef.current.getBoundingClientRect();
-  const popoverRect = popoverRef.current.getBoundingClientRect();
-  let popoverStyles = getComputedStyle(popoverRef.current);
-  const top = popoverStyles.getPropertyValue("top");
-  const left = popoverStyles.getPropertyValue("left");
-  popoverRef.current.style.left = "0";
-  popoverRef.current.style.top = "0";
-  popoverStyles = getComputedStyle(popoverRef.current);
-  const marginTop = Number.parseFloat(popoverStyles.getPropertyValue("margin-top"));
-  const marginRight = Number.parseFloat(popoverStyles.getPropertyValue("margin-right"));
-  const marginBottom = Number.parseFloat(popoverStyles.getPropertyValue("margin-bottom"));
-  const marginLeft = Number.parseFloat(popoverStyles.getPropertyValue("margin-left"));
-  const marginY = marginTop + marginBottom;
-  const marginX = marginRight + marginLeft;
-  const docHeight = document.documentElement.clientHeight;
-  const docWidth = document.documentElement.clientWidth;
-  const docScrollTop = document.documentElement.scrollTop;
-  const docScrollLeft = document.documentElement.scrollLeft;
-  const anchorLeft = anchorRect.left + docScrollLeft;
-  const anchorTop = anchorRect.top + docScrollTop;
-  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
-  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
-  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
-  const leftPosition = anchorRect.left - popoverRect.width;
-  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
-  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
-  popoverRef.current.style.transform = "";
-  popoverRef.current.style.transitionDuration = "";
-  popoverRef.current.style.top = top;
-  popoverRef.current.style.left = left;
-  switch (align) {
-    case "top": {
-      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
-    }
-    case "bottom": {
-      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
-    }
-    case "left": {
-      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
-    }
-    case "right": {
-      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
-    }
-  }
-}
-const Popover = ({
-  align = "bottom",
-  anchorElement,
-  children,
-  className,
-  onRequestClose,
-  open,
-  repositionOnScroll,
-  style: style2,
-  ...restProps
-}) => {
-  const layer = useLayer();
-  const [visible, hide] = useVisibilityState(open);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const popoverRef = useRef(null);
-  const containerClassName = useComponentStyles("popover", { base: true }, false);
-  useLayoutEffect(() => {
-    if (!visible) {
-      return;
-    }
-    const position2 = getPopoverPosition(align, anchorElement, popoverRef);
-    setPosition({ x: position2[0], y: position2[1] });
-  }, [align, anchorElement, visible]);
-  useEffect(() => {
-    if (!open || !repositionOnScroll) {
-      return;
-    }
-    function handleResize() {
-      const position2 = getPopoverPosition(align, anchorElement, popoverRef);
-      setPosition({ x: position2[0], y: position2[1] });
-    }
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize);
-    };
-  }, [align, anchorElement, open, repositionOnScroll]);
-  useIsomorphicLayoutEffect(() => {
-    var _a;
-    if (!open) {
-      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
-      return;
-    }
-    let timer = requestAnimationFrame(() => {
-      timer = requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
-      });
-    });
-    return () => {
-      cancelAnimationFrame(timer);
-    };
-  }, [open, visible]);
-  const onAnimationEnd = useCallback(() => {
-    if (!open) {
-      hide();
-    }
-  }, [hide, open]);
-  useEffect(() => {
-    if (open) {
-      return;
-    }
-    if (!hasAnimationDuration(popoverRef.current)) {
-      hide();
-    }
-  }, [hide, open]);
-  useKeyboard("Escape", onRequestClose, { enabled: visible });
-  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
-  if (!visible) {
-    return null;
-  }
-  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
-  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref: popoverRef,
-      "data-open": dataOpen,
-      onAnimationEnd,
-      onTransitionEnd: onAnimationEnd,
-      className: classnames(containerClassName, className),
-      position: "absolute",
-      style: {
-        ...style2,
-        left: position.x,
-        top: position.y
-      },
-      ...restProps,
-      children
-    }
-  ) });
-};
-const Tooltip = ({
-  align = "top",
-  children,
-  label,
-  colorScheme
-}) => {
-  const id = useId();
-  const ref = useRef(null);
-  const [open, setOpen] = useState(false);
-  const tooltipClassName = useComponentStyles("tooltip", {
-    base: true,
-    variants: { colorScheme }
-  });
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    function onEnter() {
-      setOpen(true);
-    }
-    function onLeave() {
-      setOpen(false);
-    }
-    element.addEventListener("mouseenter", onEnter);
-    element.addEventListener("mouseleave", onLeave);
-    element.addEventListener("focusin", onEnter);
-    element.addEventListener("focusout", onLeave);
-    return () => {
-      element.removeEventListener("mouseenter", onEnter);
-      element.removeEventListener("mouseleave", onLeave);
-      element.removeEventListener("focusin", onEnter);
-      element.removeEventListener("focusout", onLeave);
-    };
-  }, [ref, setOpen]);
-  if (Children.count(children) !== 1) {
-    throw new Error("Tooltip component can only have one child");
-  }
-  const child = Children.toArray(children)[0];
-  if (!isValidElement(child)) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    cloneElement(child, {
-      ref: composeRefs(ref, child.ref),
-      ["aria-describedby"]: open ? id : void 0
-    }),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        id,
-        role: "tooltip",
-        anchorElement: ref,
-        open,
-        onRequestClose: () => {
-          setOpen(false);
-        },
-        align,
-        className: tooltipClassName,
-        children: label
-      }
-    )
-  ] });
-};
-const useRootAriaHidden = (hidden) => {
-  const context = useContext(BlocksProviderContext);
-  if (!context) {
-    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
-  }
-  context.setAriaHidden(hidden);
-};
-export {
-  BlocksProvider,
-  Box,
-  Button,
-  Checkbox,
-  Dialog,
-  Divider,
-  Heading,
-  Inline,
-  Input,
-  Label,
-  Link,
-  Portal,
-  Progress,
-  Radio,
-  Select,
-  Slider,
-  Spinner,
-  Stack,
-  Switch,
-  Text,
-  Tooltip,
-  VisuallyHidden,
-  atoms,
-  classnames,
-  createAsChildTemplate,
-  makeComponentTheme,
-  makeTheme,
-  minMediaQuery,
-  style,
-  useComponentStyleDefaultProps,
-  useComponentStyles,
-  useIsomorphicLayoutEffect,
-  useKeyboard,
-  usePreventBodyScroll,
-  useRootAriaHidden,
-  vars
-};