@blockle/blocks 0.20.0-alpha1.0 → 1.0.1

package/dist/hooks/useKeyboard/useKeyboard.d.ts

@@ -1,6 +0,0 @@
-type UseKeyboardOptions = {
-    enabled?: boolean;
-    type?: 'keydown' | 'keyup';
-};
-export declare const useKeyboard: (key: KeyboardEvent["key"], callback: (event: KeyboardEvent) => void, { enabled, type }?: UseKeyboardOptions) => void;
-export {};

package/dist/hooks/useKeyboard/useKeyboard.js

@@ -1,21 +0,0 @@
-"use client";
-import { useEffect } from "react";
-const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
-  useEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    function handleKeyDown(event) {
-      if (event.key === key) {
-        callback(event);
-      }
-    }
-    document.addEventListener(type, handleKeyDown);
-    return () => {
-      document.removeEventListener(type, handleKeyDown);
-    };
-  }, [callback, enabled, key, type]);
-};
-export {
-  useKeyboard
-};

package/dist/hooks/useLayer/index.d.ts

@@ -1 +0,0 @@
-export { useLayer } from './useLayer';

package/dist/hooks/useLayer/useLayer.cjs

@@ -1,27 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const useLayer = () => {
-  const layerRef = react.useRef(null);
-  react.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;
-};
-exports.useLayer = useLayer;

package/dist/hooks/useLayer/useLayer.d.ts

@@ -1 +0,0 @@
-export declare const useLayer: () => (() => HTMLDivElement);

package/dist/hooks/useLayer/useLayer.js

@@ -1,27 +0,0 @@
-"use client";
-import { useRef, useEffect } from "react";
-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;
-};
-export {
-  useLayer
-};

package/dist/hooks/usePreventBodyScroll/index.d.ts

@@ -1 +0,0 @@
-export { usePreventBodyScroll } from './usePreventBodyScroll';

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const useIsomorphicLayoutEffect = require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
-const usePreventBodyScroll = (enabled = true) => {
-  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const prevOverflow = document.body.style.getPropertyValue("overflow");
-    const prevScrollTop = document.documentElement.scrollTop;
-    if (document.body.scrollHeight > window.innerHeight) {
-      document.body.style.position = "fixed";
-      document.body.style.overflow = "hidden";
-      document.body.style.overflowY = "scroll";
-      document.body.style.width = "100%";
-      document.body.style.top = `-${prevScrollTop}px`;
-    } else {
-      document.body.style.overflow = "hidden";
-    }
-    return () => {
-      document.body.style.position = "";
-      document.body.style.overflow = prevOverflow;
-      document.body.style.overflowY = "";
-      document.body.style.width = "";
-      document.body.style.top = "";
-      document.documentElement.scrollTop = prevScrollTop;
-    };
-  }, [enabled]);
-};
-exports.usePreventBodyScroll = usePreventBodyScroll;

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.d.ts

@@ -1 +0,0 @@
-export declare const usePreventBodyScroll: (enabled?: boolean) => void;

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.js

@@ -1,30 +0,0 @@
-import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
-const usePreventBodyScroll = (enabled = true) => {
-  useIsomorphicLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    const prevOverflow = document.body.style.getPropertyValue("overflow");
-    const prevScrollTop = document.documentElement.scrollTop;
-    if (document.body.scrollHeight > window.innerHeight) {
-      document.body.style.position = "fixed";
-      document.body.style.overflow = "hidden";
-      document.body.style.overflowY = "scroll";
-      document.body.style.width = "100%";
-      document.body.style.top = `-${prevScrollTop}px`;
-    } else {
-      document.body.style.overflow = "hidden";
-    }
-    return () => {
-      document.body.style.position = "";
-      document.body.style.overflow = prevOverflow;
-      document.body.style.overflowY = "";
-      document.body.style.width = "";
-      document.body.style.top = "";
-      document.documentElement.scrollTop = prevScrollTop;
-    };
-  }, [enabled]);
-};
-export {
-  usePreventBodyScroll
-};

package/dist/hooks/useRestoreFocus/index.d.ts

@@ -1 +0,0 @@
-export { useRestoreFocus } from './useRestoreFocus';

package/dist/hooks/useRestoreFocus/useRestoreFocus.cjs

@@ -1,19 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const isBrowser = typeof window !== "undefined";
-const useRestoreFocus = (active) => {
-  const target = react.useRef(null);
-  if (isBrowser && active && !target.current) {
-    target.current = document.activeElement;
-  }
-  react.useEffect(() => {
-    var _a;
-    if (target.current && !active && target.current instanceof HTMLElement) {
-      (_a = target.current) == null ? void 0 : _a.focus();
-      target.current = null;
-    }
-  }, [active]);
-};
-exports.useRestoreFocus = useRestoreFocus;

package/dist/hooks/useRestoreFocus/useRestoreFocus.d.ts

@@ -1,4 +0,0 @@
-/**
- * Restores focus to the previously focused element
- */
-export declare const useRestoreFocus: (active: boolean) => void;

package/dist/hooks/useRestoreFocus/useRestoreFocus.js

@@ -1,19 +0,0 @@
-"use client";
-import { useRef, useEffect } from "react";
-const isBrowser = typeof window !== "undefined";
-const useRestoreFocus = (active) => {
-  const target = useRef(null);
-  if (isBrowser && active && !target.current) {
-    target.current = document.activeElement;
-  }
-  useEffect(() => {
-    var _a;
-    if (target.current && !active && target.current instanceof HTMLElement) {
-      (_a = target.current) == null ? void 0 : _a.focus();
-      target.current = null;
-    }
-  }, [active]);
-};
-export {
-  useRestoreFocus
-};

package/dist/hooks/useRootAriaHidden/index.d.ts

@@ -1 +0,0 @@
-export { useRootAriaHidden } from './useRootAriaHidden';

package/dist/hooks/useRootAriaHidden/useRootAriaHidden.cjs

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const context = require("../../components/other/BlocksProvider/context.cjs");
-const useRootAriaHidden = (hidden) => {
-  const context$1 = react.useContext(context.BlocksProviderContext);
-  if (!context$1) {
-    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
-  }
-  context$1.setAriaHidden(hidden);
-};
-exports.useRootAriaHidden = useRootAriaHidden;

package/dist/hooks/useRootAriaHidden/useRootAriaHidden.d.ts

@@ -1,7 +0,0 @@
-/**
- * Sets the `aria-hidden` attribute on this provider's root element.
- *
- * Usefull for modals and other overlays that should hide the rest of the page from screen readers
- * and are rendered inside their own `BlocksProvider`.
- */
-export declare const useRootAriaHidden: (hidden: boolean) => void;

package/dist/hooks/useRootAriaHidden/useRootAriaHidden.js

@@ -1,12 +0,0 @@
-import { useContext } from "react";
-import { BlocksProviderContext } from "../../components/other/BlocksProvider/context.js";
-const useRootAriaHidden = (hidden) => {
-  const context = useContext(BlocksProviderContext);
-  if (!context) {
-    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
-  }
-  context.setAriaHidden(hidden);
-};
-export {
-  useRootAriaHidden
-};

package/dist/hooks/useVisibilityState/index.d.ts

@@ -1 +0,0 @@
-export { useVisibilityState } from './useVisibilityState';

package/dist/hooks/useVisibilityState/useVisibilityState.cjs

@@ -1,17 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = react.useState(open);
-  const hide = react.useCallback(() => {
-    setVisible(false);
-  }, []);
-  react.useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
-exports.useVisibilityState = useVisibilityState;

package/dist/hooks/useVisibilityState/useVisibilityState.d.ts

@@ -1,3 +0,0 @@
-type UseVisibilityState = [visible: boolean, hide: () => void];
-export declare const useVisibilityState: (open: boolean) => UseVisibilityState;
-export {};

package/dist/hooks/useVisibilityState/useVisibilityState.js

@@ -1,17 +0,0 @@
-"use client";
-import { useState, useCallback, useEffect } from "react";
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = useState(open);
-  const hide = useCallback(() => {
-    setVisible(false);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setVisible(true);
-    }
-  }, [open]);
-  return [visible, hide];
-};
-export {
-  useVisibilityState
-};

package/dist/lib/asChildRenderer/createAsChildTemplate.cjs

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const mergeProps = require("../react/mergeProps.cjs");
-function createAsChildTemplate(defaultElement) {
-  const Tag = defaultElement;
-  const Template = ({
-    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;
-    });
-    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.mergeProps(rootProps, slot.props.children.props)
-      );
-    }
-    nextChildren[slotIndex] = slot.props.children.props.children;
-    return react.cloneElement(
-      slot.props.children,
-      mergeProps.mergeProps(rootProps, slot.props.children.props),
-      nextChildren
-    );
-  };
-  return {
-    Template,
-    Slot
-  };
-}
-function isValidElementWithChildren(child) {
-  return react.isValidElement(child) && !!child.props;
-}
-const Slot = ({ children }) => {
-  return children;
-};
-exports.createAsChildTemplate = createAsChildTemplate;

package/dist/lib/asChildRenderer/createAsChildTemplate.d.ts

@@ -1,34 +0,0 @@
-import { default as React } from 'react';
-import { HTMLElementProps } from '../utils/utils';
-type TemplateProps = {
-    asChild?: boolean;
-    children?: React.ReactNode;
-    ref?: React.Ref<Element>;
-};
-/**
- * Create a Template component that can render as a child of another component with asChild prop.
- *
- * Example
- * // Create a Template and Slot components with div as default element
- * const { Template, Slot } = createAsChildContainer('div');
- *
- * const MyComponent = ({ children, asChild, ...restProps }) => {
- *  return (
- *   <Template asChild={asChild} {...restProps}>
- *     <Slot>{childen}</Slot> // Slot is required, will be replaced with children
- *   </Template>
- * );
- * }
- *
- * <MyComponent className="test">Not a link</MyComponent> // Renders as <div class="test">Not a link</div>
- * <MyComponent className="test"><a href="#">Link</a></MyComponent> // Renders as <div class="test"><a href="#">Link</a></div>
- * <MyComponent className="test" asChild><a href="#">Link</a></MyComponent> // Renders as <a href="#" class="test">Link</a>
- */
-export declare function createAsChildTemplate<T extends keyof HTMLElementTagNameMap>(defaultElement: T): {
-    Template: React.FC<TemplateProps & HTMLElementProps<HTMLElementTagNameMap[T]>>;
-    Slot: React.FC<SlotProps>;
-};
-type SlotProps = {
-    children: React.ReactNode;
-};
-export {};

package/dist/lib/asChildRenderer/createAsChildTemplate.js

@@ -1,73 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Children, isValidElement, cloneElement } from "react";
-import { mergeProps } from "../react/mergeProps.js";
-function createAsChildTemplate(defaultElement) {
-  const Tag = defaultElement;
-  const Template = ({
-    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;
-    });
-    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,
-    Slot
-  };
-}
-function isValidElementWithChildren(child) {
-  return isValidElement(child) && !!child.props;
-}
-const Slot = ({ children }) => {
-  return children;
-};
-export {
-  createAsChildTemplate
-};

package/dist/lib/asChildRenderer/createAsChildTemplate.spec.d.ts

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

package/dist/lib/css/atoms/atomTypes.d.ts

@@ -1,37 +0,0 @@
-import { atoms } from './sprinkles.css';
-export type Atoms = Parameters<typeof atoms>[0];
-export type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
-export type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
-export type MarginAtoms = {
-    margin?: Atoms['margin'];
-    marginBlock?: Atoms['marginBlock'];
-    marginBlockStart?: Atoms['marginBlockStart'];
-    marginBlockEnd?: Atoms['marginBlockEnd'];
-    marginInline?: Atoms['marginInline'];
-    marginInlineStart?: Atoms['marginInlineStart'];
-    marginInlineEnd?: Atoms['marginInlineEnd'];
-};
-export type PaddingAtoms = {
-    padding?: Atoms['padding'];
-    paddingBlock?: Atoms['paddingBlock'];
-    paddingBlockStart?: Atoms['paddingBlockStart'];
-    paddingBlockEnd?: Atoms['paddingBlockEnd'];
-    paddingInline?: Atoms['paddingInline'];
-    paddingInlineStart?: Atoms['paddingInlineStart'];
-    paddingInlineEnd?: Atoms['paddingInlineEnd'];
-};
-export type TextAtoms = {
-    color?: Atoms['color'];
-    fontFamily?: Atoms['fontFamily'];
-    fontSize?: Atoms['fontSize'];
-    fontStyle?: Atoms['fontStyle'];
-    fontWeight?: Atoms['fontWeight'];
-    lineHeight?: Atoms['lineHeight'];
-    textAlign?: Atoms['textAlign'];
-    textDecoration?: Atoms['textDecoration'];
-    textTransform?: Atoms['textTransform'];
-    textWrap?: Atoms['textWrap'];
-    whiteSpace?: Atoms['whiteSpace'];
-    wordBreak?: Atoms['wordBreak'];
-    wordWrap?: Atoms['wordWrap'];
-};

package/dist/lib/css/atoms/atomicProperties.cjs

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vars_css = require("../../theme/vars.css.cjs");
-const colorsWithCurrentColor = { ...vars_css.vars.color, currentColor: "currentColor" };
-const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
-const unresponsiveProperties = {
-  backgroundColor: colorsWithCurrentColor,
-  borderColor: colorsWithCurrentColor,
-  borderRadius: vars_css.vars.borderRadius,
-  borderWidth: vars_css.vars.borderWidth,
-  border: ["none"],
-  insetBlock: [0],
-  insetBlockStart: [0],
-  insetBlockEnd: [0],
-  insetInline: [0],
-  insetInlineStart: [0],
-  insetInlineEnd: [0],
-  boxShadow: vars_css.vars.shadow,
-  color: colorsWithCurrentColor,
-  cursor: ["auto", "pointer"],
-  fontFamily: vars_css.vars.fontFamily,
-  fontStyle: ["normal", "italic", "oblique"],
-  fontWeight: vars_css.vars.fontWeight,
-  lineHeight: vars_css.vars.lineHeight,
-  blockSize: size,
-  maxBlockSize: size,
-  inlineSize: size,
-  maxInlineSize: size,
-  opacity: [0, 1],
-  overflow: ["hidden", "scroll", "visible", "auto"],
-  overflowBlock: ["hidden", "scroll", "visible", "auto"],
-  overflowInline: ["hidden", "scroll", "visible", "auto"],
-  pointerEvents: ["none"],
-  textDecoration: ["overline", "line-through", "underline", "none"],
-  textTransform: ["lowercase", "uppercase", "capitalize"],
-  textWrap: ["balance", "wrap"],
-  transition: vars_css.vars.transition,
-  userSelect: ["none"],
-  whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
-  wordBreak: ["break-word"],
-  wordWrap: ["break-word"]
-};
-const marginSpace = { auto: "auto", ...vars_css.vars.space };
-const responsiveProperties = {
-  alignContent: ["stretch", "center", "flex-start", "flex-end"],
-  alignItems: ["stretch", "center", "flex-start", "flex-end"],
-  alignSelf: ["stretch", "center", "flex-start", "flex-end"],
-  columnGap: vars_css.vars.space,
-  display: [
-    "none",
-    "flex",
-    "inline-flex",
-    "block",
-    "inline",
-    "inline-block",
-    "grid",
-    "inline-grid"
-  ],
-  flex: [1],
-  flexDirection: ["row", "row-reverse", "column", "column-reverse"],
-  flexGrow: [0, 1],
-  flexShrink: [0, 1],
-  flexWrap: ["nowrap", "wrap"],
-  fontSize: vars_css.vars.fontSize,
-  gap: vars_css.vars.space,
-  justifyContent: [
-    "flex-start",
-    "flex-end",
-    "center",
-    "space-between",
-    "space-around"
-  ],
-  marginBlockStart: marginSpace,
-  marginBlockEnd: marginSpace,
-  marginInlineStart: marginSpace,
-  marginInlineEnd: marginSpace,
-  outline: ["none"],
-  padding: vars_css.vars.space,
-  paddingBlock: vars_css.vars.space,
-  paddingBlockStart: vars_css.vars.space,
-  paddingBlockEnd: vars_css.vars.space,
-  paddingInline: vars_css.vars.space,
-  paddingInlineStart: vars_css.vars.space,
-  paddingInlineEnd: vars_css.vars.space,
-  position: ["relative", "fixed", "absolute", "sticky", "static"],
-  rowGap: vars_css.vars.space,
-  textAlign: ["center", "left", "right", "justify"]
-};
-exports.responsiveProperties = responsiveProperties;
-exports.unresponsiveProperties = unresponsiveProperties;