@blockle/blocks-react 1.0.0

package/dist/components/layout/Stack/Stack.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const Box = require("../Box/Box.cjs");
+const Stack = ({
+  tag: Tag = "div",
+  display = "flex",
+  children,
+  spacing,
+  alignX,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      asChild: true,
+      display,
+      gap: spacing,
+      flexDirection: "column",
+      alignItems: alignX ? blocksCore.alignItemsMap[alignX] : void 0,
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
+    }
+  );
+};
+exports.Stack = Stack;

package/dist/components/layout/Stack/Stack.d.ts

@@ -0,0 +1,16 @@
+import { AlignItemsMap, MarginSprinkles, PaddingSprinkles, ResponsiveDisplayFlex, Sprinkles } from '@blockle/blocks-core';
+export type StackProps = {
+    alignX?: keyof AlignItemsMap;
+    tag?: 'div' | 'section' | 'ul' | 'ol';
+    children: React.ReactNode;
+    className?: string;
+    display?: ResponsiveDisplayFlex;
+    spacing: Sprinkles['gap'];
+    style?: React.CSSProperties;
+    role?: React.AriaRole;
+    /**
+     * Start prop is only valid when tag="ol"
+     */
+    start?: number;
+} & MarginSprinkles & PaddingSprinkles;
+export declare const Stack: React.FC<StackProps>;

package/dist/components/layout/Stack/Stack.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { alignItemsMap } from "@blockle/blocks-core";
+import { Box } from "../Box/Box.js";
+const Stack = ({
+  tag: Tag = "div",
+  display = "flex",
+  children,
+  spacing,
+  alignX,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      display,
+      gap: spacing,
+      flexDirection: "column",
+      alignItems: alignX ? alignItemsMap[alignX] : void 0,
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Tag, { children })
+    }
+  );
+};
+export {
+  Stack
+};

package/dist/components/layout/Stack/Stack.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Stack, StackProps } from './Stack';
+declare const _default: Meta<typeof Stack>;
+export default _default;
+export declare const Default: StoryObj<StackProps>;
+export declare const List: StoryObj<StackProps>;

package/dist/components/layout/Stack/index.d.ts

@@ -0,0 +1 @@
+export { Stack, type StackProps } from './Stack';

package/dist/components/navigation/Link/Link.cjs

@@ -0,0 +1,33 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const blocksReactSlot = require("@blockle/blocks-react-slot");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const [Template, Slot] = blocksReactSlot.createSlottable("a");
+const Link = ({
+  asChild,
+  children,
+  className,
+  ref,
+  underline,
+  variant,
+  ...restProps
+}) => {
+  const linkClassName = useComponentStyles.useComponentStyles("link", {
+    base: true,
+    variants: { variant, underline }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Template,
+    {
+      asChild,
+      ref,
+      className: blocksCore.classnames(className, linkClassName),
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Slot, { children })
+    }
+  );
+};
+exports.Link = Link;

package/dist/components/navigation/Link/Link.d.ts

@@ -0,0 +1,11 @@
+import { ComponentThemes, HTMLElementProps, MarginSprinkles } from '@blockle/blocks-core';
+type LinkTheme = ComponentThemes['link'];
+export type LinkProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLAnchorElement>;
+    underline?: LinkTheme['variants']['underline'];
+    variant?: LinkTheme['variants']['variant'];
+} & MarginSprinkles & HTMLElementProps<HTMLAnchorElement>;
+export declare const Link: React.FC<LinkProps>;
+export {};

package/dist/components/navigation/Link/Link.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+const [Template, Slot] = createSlottable("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 })
+    }
+  );
+};
+export {
+  Link
+};

package/dist/components/navigation/Link/Link.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { LinkProps } from './Link';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<LinkProps>;
+export declare const Play: StoryObj<LinkProps>;

package/dist/components/navigation/Link/Link.test.d.ts

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

package/dist/components/navigation/Link/index.d.ts

@@ -0,0 +1 @@
+export { Link, type LinkProps } from './Link';

package/dist/components/overlay/Dialog/Dialog.cjs

@@ -0,0 +1,81 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const react = require("react");
+const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
+const dialog_css = require("./dialog.css.cjs");
+const dialogHelper = require("./dialogHelper.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const useRestoreFocus = require("../../../hooks/useRestoreFocus/useRestoreFocus.cjs");
+const usePreventBodyScroll = require("../../../hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
+const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
+const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const Dialog = ({
+  children,
+  open,
+  className,
+  onRequestClose,
+  size,
+  ...restProps
+}) => {
+  const dialogClassName = useComponentStyles.useComponentStyles("dialog", {
+    dialog: true,
+    variants: { size }
+  });
+  const dialogRef = react.useRef(null);
+  const [enabled, setEnabled] = react.useState(true);
+  const [visible, setVisible] = react.useState(open);
+  useRestoreFocus.useRestoreFocus(open);
+  const isNested = dialogHelper.useNestedDialog(open);
+  usePreventBodyScroll.usePreventBodyScroll(open && !isNested);
+  const onEscape = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      onRequestClose();
+    },
+    [onRequestClose]
+  );
+  useKeyboard.useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  useClickOutside.useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (open && visible) {
+      if (!dialogRef.current || !dialogRef.current.showModal) {
+        return;
+      }
+      dialogRef.current.showModal();
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!blocksCore.hasAnimationDuration(dialogRef.current)) {
+        setVisible(false);
+      }
+      (_a = dialogRef.current) == null ? void 0 : _a.close();
+    }
+  }, [open, visible]);
+  const onAnimationEnd = react.useCallback(() => {
+    if (!open) {
+      setVisible(false);
+    }
+  }, [open]);
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? true : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(dialogHelper.DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      "aria-modal": "true",
+      open: dataOpen,
+      className: blocksCore.classnames(dialog_css.dialog, dialogClassName, className),
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      ...restProps,
+      children
+    }
+  ) }) });
+};
+exports.Dialog = Dialog;

package/dist/components/overlay/Dialog/Dialog.d.ts

@@ -0,0 +1,12 @@
+import { ComponentThemes } from '@blockle/blocks-core';
+type DialogTheme = ComponentThemes['dialog'];
+export type DialogProps = {
+    children?: React.ReactNode;
+    open: boolean;
+    onRequestClose: () => void;
+    className?: string;
+    size?: DialogTheme['variants']['size'];
+    'aria-label'?: string;
+};
+export declare const Dialog: React.FC<DialogProps>;
+export {};

package/dist/components/overlay/Dialog/Dialog.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
+import { useRef, useState, useCallback } from "react";
+import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { dialog } from "./dialog.css.js";
+import { useNestedDialog, DialogContext } from "./dialogHelper.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.js";
+import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+const Dialog = ({
+  children,
+  open,
+  className,
+  onRequestClose,
+  size,
+  ...restProps
+}) => {
+  const dialogClassName = useComponentStyles("dialog", {
+    dialog: true,
+    variants: { size }
+  });
+  const dialogRef = useRef(null);
+  const [enabled, setEnabled] = useState(true);
+  const [visible, setVisible] = useState(open);
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(open);
+  usePreventBodyScroll(open && !isNested);
+  const onEscape = useCallback(
+    (event) => {
+      event.preventDefault();
+      onRequestClose();
+    },
+    [onRequestClose]
+  );
+  useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  useClickOutside(dialogRef, onRequestClose, { enabled: open && enabled });
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (open && visible) {
+      if (!dialogRef.current || !dialogRef.current.showModal) {
+        return;
+      }
+      dialogRef.current.showModal();
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!hasAnimationDuration(dialogRef.current)) {
+        setVisible(false);
+      }
+      (_a = dialogRef.current) == null ? void 0 : _a.close();
+    }
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      setVisible(false);
+    }
+  }, [open]);
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? true : void 0;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      "aria-modal": "true",
+      open: dataOpen,
+      className: classnames(dialog, dialogClassName, className),
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      ...restProps,
+      children
+    }
+  ) }) });
+};
+export {
+  Dialog
+};

package/dist/components/overlay/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DialogProps } from './Dialog';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryObj<DialogProps>;
+export declare const WithAriaMarkup: StoryObj<DialogProps>;
+export declare const Play: StoryObj<DialogProps>;

package/dist/components/overlay/Dialog/Dialog.test.d.ts

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

package/dist/components/overlay/Dialog/dialog.css.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const blocksCore = require("@blockle/blocks-core");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks-react");
+const dialog = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      position: "fixed",
+      inset: 0,
+      border: "none",
+      "::backdrop": {
+        // Remove pointer event to prevent clicks on the backdrop
+        // and make it easier to check if the click was outside the dialog
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+fileScope.endFileScope();
+exports.dialog = dialog;

package/dist/components/overlay/Dialog/dialog.css.d.ts

@@ -0,0 +1 @@
+export declare const dialog: string;

package/dist/components/overlay/Dialog/dialog.css.js

@@ -0,0 +1,22 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks-react");
+const dialog = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "fixed",
+      inset: 0,
+      border: "none",
+      "::backdrop": {
+        // Remove pointer event to prevent clicks on the backdrop
+        // and make it easier to check if the click was outside the dialog
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+endFileScope();
+export {
+  dialog
+};

package/dist/components/overlay/Dialog/dialogHelper.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const DialogContext = react.createContext(
+  void 0
+);
+const useNestedDialog = (open) => {
+  const parentDialog = react.useContext(DialogContext);
+  react.useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+exports.DialogContext = DialogContext;
+exports.useNestedDialog = useNestedDialog;

package/dist/components/overlay/Dialog/dialogHelper.d.ts

@@ -0,0 +1,6 @@
+type DialogContextValue = {
+    setEnabled: (active: boolean) => void;
+};
+export declare const DialogContext: import('react').Context<DialogContextValue | undefined>;
+export declare const useNestedDialog: (open: boolean) => boolean;
+export {};

package/dist/components/overlay/Dialog/dialogHelper.js

@@ -0,0 +1,21 @@
+import { createContext, useContext, useEffect } from "react";
+const DialogContext = createContext(
+  void 0
+);
+const useNestedDialog = (open) => {
+  const parentDialog = useContext(DialogContext);
+  useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+export {
+  DialogContext,
+  useNestedDialog
+};

package/dist/components/overlay/Dialog/index.d.ts

@@ -0,0 +1 @@
+export { Dialog, type DialogProps } from './Dialog';

package/dist/components/overlay/Popover/Popover.cjs

@@ -0,0 +1,112 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const react = require("react");
+const useClickOutside = require("../../../hooks/useClickOutside/useClickOutside.cjs");
+const popoverUtils = require("./popover-utils.cjs");
+const useLayer = require("../../../hooks/useLayer/useLayer.cjs");
+const useVisibilityState = require("../../../hooks/useVisibilityState/useVisibilityState.cjs");
+const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
+const useIsomorphicLayoutEffect = require("../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const useKeyboard = require("../../../hooks/useKeyboard/useKeyboard.cjs");
+const Portal = require("../Portal/Portal.cjs");
+const Box = require("../../layout/Box/Box.cjs");
+const Popover = ({
+  align = "bottom",
+  anchorElement,
+  children,
+  className,
+  onRequestClose,
+  open,
+  repositionOnScroll,
+  style,
+  ...restProps
+}) => {
+  const layer = useLayer.useLayer();
+  const [visible, hide] = useVisibilityState.useVisibilityState(open);
+  const [position, setPosition] = react.useState({ x: 0, y: 0 });
+  const popoverRef = react.useRef(null);
+  const containerClassName = useComponentStyles.useComponentStyles(
+    "popover",
+    { base: true },
+    false
+  );
+  react.useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const position2 = popoverUtils.getPopoverPosition(align, anchorElement, popoverRef);
+    setPosition({ x: position2[0], y: position2[1] });
+  }, [align, anchorElement, visible]);
+  react.useEffect(() => {
+    if (!open || !repositionOnScroll) {
+      return;
+    }
+    function handleResize() {
+      const position2 = popoverUtils.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.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 = react.useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  react.useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!blocksCore.hasAnimationDuration(popoverRef.current)) {
+      hide();
+    }
+  }, [hide, open]);
+  useKeyboard.useKeyboard("Escape", onRequestClose, { enabled: visible });
+  useClickOutside.useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      ref: popoverRef,
+      "data-open": dataOpen,
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      className: blocksCore.classnames(containerClassName, className),
+      position: "absolute",
+      style: {
+        ...style,
+        left: position.x,
+        top: position.y
+      },
+      ...restProps,
+      children
+    }
+  ) });
+};
+exports.Popover = Popover;

package/dist/components/overlay/Popover/Popover.d.ts

@@ -0,0 +1,12 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+export type PopoverProps = {
+    align?: 'top' | 'bottom' | 'left' | 'right';
+    anchorElement: React.RefObject<HTMLElement | null>;
+    children: React.ReactNode;
+    className?: string;
+    onRequestClose: () => void;
+    open: boolean;
+    repositionOnScroll?: boolean;
+    style?: React.CSSProperties;
+} & HTMLElementProps<HTMLDivElement>;
+export declare const Popover: React.FC<PopoverProps>;