@blockle/blocks-react 1.0.0

package/dist/components/typography/Heading/heading.css.js

@@ -0,0 +1,16 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks-react");
+const heading = style({
+  "@layer": {
+    [blocksLayer]: {
+      margin: 0,
+      padding: 0
+    }
+  }
+});
+endFileScope();
+export {
+  heading
+};

package/dist/components/typography/Heading/heading.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Heading, HeadingProps } from './Heading';
+declare const _default: Meta<typeof Heading>;
+export default _default;
+export declare const Default: StoryObj<HeadingProps>;
+export declare const All: {
+    render: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, {
+        children: React.ReactNode;
+        className?: string;
+        level: 1 | 2 | 3 | 4 | 5 | 6;
+    } & import('@blockle/blocks-core').TextSprinkles & import('@blockle/blocks-core').MarginSprinkles & import('@blockle/blocks-core').PaddingSprinkles & import('@blockle/blocks-core').HTMLElementProps<HTMLHeadingElement>>;
+};

package/dist/components/typography/Heading/index.d.ts

@@ -0,0 +1 @@
+export { Heading, type HeadingProps } from './Heading';

package/dist/components/typography/Text/Text.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const blocksCore = require("@blockle/blocks-core");
+const text_css = require("./text.css.cjs");
+const Box = require("../../layout/Box/Box.cjs");
+const Text = ({
+  asChild,
+  children,
+  className,
+  ref,
+  tag,
+  ...restProps
+}) => {
+  const Component = tag ?? "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { asChild: true, className: blocksCore.classnames(text_css.text, className), ...restProps, children: asChild ? children : (
+    // biome-ignore lint/suspicious/noExplicitAny: Safe to assert ref as React.RefObject<any>
+    /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, children })
+  ) });
+};
+exports.Text = Text;

package/dist/components/typography/Text/Text.d.ts

@@ -0,0 +1,11 @@
+import { HTMLElementProps, MarginSprinkles, PaddingSprinkles, TextSprinkles } from '@blockle/blocks-core';
+import { default as React } from 'react';
+type Tags = 'del' | 'em' | 'ins' | 'label' | 'p' | 's' | 'small' | 'span' | 'strong' | 'sub' | 'sup';
+export type TextProps<Tag extends Tags = 'span'> = {
+    asChild?: boolean;
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLElementTagNameMap[Tag]>;
+    tag?: Tag;
+} & TextSprinkles & MarginSprinkles & PaddingSprinkles & HTMLElementProps<HTMLSpanElement>;
+export declare const Text: <T extends Tags = "span">({ asChild, children, className, ref, tag, ...restProps }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/typography/Text/Text.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { text } from "./text.css.js";
+import { Box } from "../../layout/Box/Box.js";
+const Text = ({
+  asChild,
+  children,
+  className,
+  ref,
+  tag,
+  ...restProps
+}) => {
+  const Component = tag ?? "span";
+  return /* @__PURE__ */ jsx(Box, { asChild: true, className: classnames(text, className), ...restProps, children: asChild ? children : (
+    // biome-ignore lint/suspicious/noExplicitAny: Safe to assert ref as React.RefObject<any>
+    /* @__PURE__ */ jsx(Component, { ref, children })
+  ) });
+};
+export {
+  Text
+};

package/dist/components/typography/Text/Text.stories.d.ts

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

package/dist/components/typography/Text/Text.test.d.ts

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

package/dist/components/typography/Text/index.d.ts

@@ -0,0 +1 @@
+export { Text, type TextProps } from './Text';

package/dist/components/typography/Text/text.css.cjs

@@ -0,0 +1,16 @@
+"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/typography/Text/text.css.ts", "@blockle/blocks-react");
+const text = css.style({
+  "@layer": {
+    [blocksCore.blocksLayer]: {
+      margin: 0,
+      padding: 0
+    }
+  }
+});
+fileScope.endFileScope();
+exports.text = text;

package/dist/components/typography/Text/text.css.d.ts

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

package/dist/components/typography/Text/text.css.js

@@ -0,0 +1,16 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { blocksLayer } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks-react");
+const text = style({
+  "@layer": {
+    [blocksLayer]: {
+      margin: 0,
+      padding: 0
+    }
+  }
+});
+endFileScope();
+export {
+  text
+};

package/dist/hooks/useClickOutside/useClickOutside.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  react.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    };
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("click", listener);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, onClickOutside, enabled]);
+};
+exports.useClickOutside = useClickOutside;

package/dist/hooks/useClickOutside/useClickOutside.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+type UseClickOutsideOptions = {
+    enabled?: boolean;
+};
+export declare const useClickOutside: (ref: React.RefObject<HTMLElement | null>, onClickOutside: () => void, { enabled }?: UseClickOutsideOptions) => void;
+export {};

package/dist/hooks/useClickOutside/useClickOutside.js

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    };
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("click", listener);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, onClickOutside, enabled]);
+};
+export {
+  useClickOutside
+};

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

@@ -0,0 +1,2 @@
+export { useComponentStyles } from './useComponentStyles';
+export { useComponentStyleDefaultProps } from './useComponentStyleDefaultProps';

package/dist/hooks/useComponentStyles/useComponentStyleDefaultProps.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useTheme = require("../useTheme/useTheme.cjs");
+const useComponentStyleDefaultProps = (name) => {
+  const { components } = useTheme.useTheme();
+  const component = components[name];
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
+};
+exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps;

package/dist/hooks/useComponentStyles/useComponentStyleDefaultProps.d.ts

@@ -0,0 +1,7 @@
+import { RecordLike, ThemeComponentsStyles } from '@blockle/blocks-core';
+type ThemeComponentsStylesRequired = Required<ThemeComponentsStyles>;
+type Components = {
+    [K in keyof ThemeComponentsStylesRequired]: ThemeComponentsStylesRequired[K] extends RecordLike ? Required<ThemeComponentsStylesRequired[K]>['defaultVariants'] extends RecordLike ? ThemeComponentsStylesRequired[K]['defaultVariants'] extends undefined ? never : Exclude<ThemeComponentsStylesRequired[K]['defaultVariants'], undefined> : never : never;
+};
+export declare const useComponentStyleDefaultProps: <T extends keyof ThemeComponentsStyles>(name: T) => Components[T];
+export {};

package/dist/hooks/useComponentStyles/useComponentStyleDefaultProps.js

@@ -0,0 +1,12 @@
+import { useTheme } from "../useTheme/useTheme.js";
+const useComponentStyleDefaultProps = (name) => {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    return {};
+  }
+  return component.defaultVariants ?? {};
+};
+export {
+  useComponentStyleDefaultProps
+};

package/dist/hooks/useComponentStyles/useComponentStyles.cjs

@@ -0,0 +1,74 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useTheme = require("../useTheme/useTheme.cjs");
+function useComponentStyles(name, props, useDefaultVariants = true) {
+  const { components } = useTheme.useTheme();
+  const component = components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(
+        // biome-ignore lint/suspicious/noExplicitAny: type assertion
+        component[key]
+      );
+    }
+  }
+  if (!component.variants) {
+    return classNames.join(" ");
+  }
+  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];
+      }
+    }
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0 || componentVariants[key] === void 0) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
+      }
+      continue;
+    }
+    const variant = componentVariants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  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];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+exports.useComponentStyles = useComponentStyles;

package/dist/hooks/useComponentStyles/useComponentStyles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentThemesProps } from '@blockle/blocks-core';
+export declare function useComponentStyles<T extends keyof ComponentThemesProps>(name: T, props: ComponentThemesProps[T], useDefaultVariants?: boolean): string;

package/dist/hooks/useComponentStyles/useComponentStyles.js

@@ -0,0 +1,74 @@
+"use client";
+import { useTheme } from "../useTheme/useTheme.js";
+function useComponentStyles(name, props, useDefaultVariants = true) {
+  const { components } = useTheme();
+  const component = components[name];
+  if (!component) {
+    console.warn(`Component ${name} is not defined in the theme`);
+    return "";
+  }
+  const classNames = [];
+  const variants = props.variants ?? {};
+  const variantsWithDefaults = { ...variants };
+  for (const key in props) {
+    const value = props[key];
+    if (typeof value === "boolean" && value) {
+      classNames.push(
+        // biome-ignore lint/suspicious/noExplicitAny: type assertion
+        component[key]
+      );
+    }
+  }
+  if (!component.variants) {
+    return classNames.join(" ");
+  }
+  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];
+      }
+    }
+  }
+  const keys = Object.keys(variantsWithDefaults);
+  const componentVariants = component.variants;
+  for (const key of keys) {
+    const value = variantsWithDefaults[key];
+    if (value === void 0 || componentVariants[key] === void 0) {
+      continue;
+    }
+    if (typeof value === "boolean") {
+      if (value && componentVariants[key]) {
+        classNames.push(componentVariants[key]);
+      }
+      continue;
+    }
+    const variant = componentVariants[key][value];
+    if (variant) {
+      classNames.push(variant);
+    }
+  }
+  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];
+        if (value === void 0) {
+          return false;
+        }
+        return value === compoundVariant.variants[key];
+      });
+      if (matches) {
+        classNames.push(compoundVariant.style);
+      }
+    }
+  }
+  return classNames.join(" ");
+}
+export {
+  useComponentStyles
+};

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

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

package/dist/hooks/useControlledValue/useControlledValue.cjs

@@ -0,0 +1,33 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useControlledValue({
+  defaultValue,
+  value,
+  onChange,
+  transformValue
+}) {
+  const [internValue, setInternValue] = react.useState(defaultValue);
+  const currentValue = (onChange ? value : internValue) ?? defaultValue;
+  const setValue = react.useCallback(
+    function setValue2(value2) {
+      const nextValue = transformValue ? transformValue(value2) : value2;
+      if (onChange) {
+        onChange(nextValue);
+      } else {
+        setInternValue(nextValue);
+      }
+    },
+    [onChange, transformValue]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    react.useEffect(() => {
+      if (onChange && value === void 0) {
+        console.error("Slider is in controlled mode but no value is provided");
+      }
+    }, []);
+  }
+  return [currentValue, setValue];
+}
+exports.useControlledValue = useControlledValue;

package/dist/hooks/useControlledValue/useControlledValue.d.ts

@@ -0,0 +1,8 @@
+type ControlledValue<T> = {
+    value?: T;
+    defaultValue: T;
+    onChange?: (value: T) => void;
+    transformValue?: (value: T) => T;
+};
+export declare function useControlledValue<T>({ defaultValue, value, onChange, transformValue, }: ControlledValue<T>): [T, (value: T) => void];
+export {};

package/dist/hooks/useControlledValue/useControlledValue.js

@@ -0,0 +1,33 @@
+"use client";
+import { useState, useCallback, useEffect } from "react";
+function useControlledValue({
+  defaultValue,
+  value,
+  onChange,
+  transformValue
+}) {
+  const [internValue, setInternValue] = useState(defaultValue);
+  const currentValue = (onChange ? value : internValue) ?? defaultValue;
+  const setValue = useCallback(
+    function setValue2(value2) {
+      const nextValue = transformValue ? transformValue(value2) : value2;
+      if (onChange) {
+        onChange(nextValue);
+      } else {
+        setInternValue(nextValue);
+      }
+    },
+    [onChange, transformValue]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    useEffect(() => {
+      if (onChange && value === void 0) {
+        console.error("Slider is in controlled mode but no value is provided");
+      }
+    }, []);
+  }
+  return [currentValue, setValue];
+}
+export {
+  useControlledValue
+};

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

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

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1,6 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from 'react';
+/**
+ * useLayoutEffect is not avaible on server side use useEffect instead.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -0,0 +1,6 @@
+"use client";
+import { useEffect, useLayoutEffect } from "react";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export {
+  useIsomorphicLayoutEffect
+};

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

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

package/dist/hooks/useKeyboard/useKeyboard.cjs

@@ -0,0 +1,21 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
+  react.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]);
+};
+exports.useKeyboard = useKeyboard;

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,21 @@
+"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

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

package/dist/hooks/useLayer/useLayer.cjs

@@ -0,0 +1,27 @@
+"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

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

package/dist/hooks/useLayer/useLayer.js

@@ -0,0 +1,27 @@
+"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

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

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs

@@ -0,0 +1,31 @@
+"use client";
+"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

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