@blockle/blocks-react 1.0.0

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.js

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

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

package/dist/hooks/useRestoreFocus/useRestoreFocus.cjs

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

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

package/dist/hooks/useRestoreFocus/useRestoreFocus.js

@@ -0,0 +1,19 @@
+"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/useTheme/index.d.ts

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

package/dist/hooks/useTheme/useTheme.cjs

@@ -0,0 +1,13 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const context = require("../../components/providers/BlocksProvider/context.cjs");
+const useTheme = () => {
+  const context$1 = react.useContext(context.BlocksProviderContext);
+  if (!context$1) {
+    throw new Error("useTheme must be called within a BlocksProvider");
+  }
+  return context$1.theme;
+};
+exports.useTheme = useTheme;

package/dist/hooks/useTheme/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@blockle/blocks-core';
+export declare const useTheme: () => Theme;

package/dist/hooks/useTheme/useTheme.js

@@ -0,0 +1,13 @@
+"use client";
+import { useContext } from "react";
+import { BlocksProviderContext } from "../../components/providers/BlocksProvider/context.js";
+const useTheme = () => {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
+    throw new Error("useTheme must be called within a BlocksProvider");
+  }
+  return context.theme;
+};
+export {
+  useTheme
+};

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

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

package/dist/hooks/useVisibilityState/useVisibilityState.cjs

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

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

package/dist/hooks/useVisibilityState/useVisibilityState.js

@@ -0,0 +1,17 @@
+"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/index.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const VisuallyHidden = require("./components/accessibility/VisuallyHidden/VisuallyHidden.cjs");
+const Divider = require("./components/display/Divider/Divider.cjs");
+const Progress = require("./components/feedback/Progress/Progress.cjs");
+const Spinner = require("./components/feedback/Spinner/Spinner.cjs");
+const Button = require("./components/form/Button/Button.cjs");
+const Checkbox = require("./components/form/Checkbox/Checkbox.cjs");
+const Input = require("./components/form/Input/Input.cjs");
+const Label = require("./components/form/Label/Label.cjs");
+const Radio = require("./components/form/Radio/Radio.cjs");
+const Select = require("./components/form/Select/Select.cjs");
+const Slider = require("./components/form/Slider/Slider.cjs");
+const Switch = require("./components/form/Switch/Switch.cjs");
+const Box = require("./components/layout/Box/Box.cjs");
+const Inline = require("./components/layout/Inline/Inline.cjs");
+const Stack = require("./components/layout/Stack/Stack.cjs");
+const Link = require("./components/navigation/Link/Link.cjs");
+const Dialog = require("./components/overlay/Dialog/Dialog.cjs");
+const Portal = require("./components/overlay/Portal/Portal.cjs");
+const Tooltip = require("./components/overlay/Tooltip/Tooltip.cjs");
+const BlocksProvider = require("./components/providers/BlocksProvider/BlocksProvider.cjs");
+const Heading = require("./components/typography/Heading/Heading.cjs");
+const Text = require("./components/typography/Text/Text.cjs");
+const useComponentStyleDefaultProps = require("./hooks/useComponentStyles/useComponentStyleDefaultProps.cjs");
+const useComponentStyles = require("./hooks/useComponentStyles/useComponentStyles.cjs");
+const useControlledValue = require("./hooks/useControlledValue/useControlledValue.cjs");
+const useIsomorphicLayoutEffect = require("./hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const useKeyboard = require("./hooks/useKeyboard/useKeyboard.cjs");
+const usePreventBodyScroll = require("./hooks/usePreventBodyScroll/usePreventBodyScroll.cjs");
+exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;
+exports.Divider = Divider.Divider;
+exports.Progress = Progress.Progress;
+exports.Spinner = Spinner.Spinner;
+exports.Button = Button.Button;
+exports.Checkbox = Checkbox.Checkbox;
+exports.Input = Input.Input;
+exports.Label = Label.Label;
+exports.Radio = Radio.Radio;
+exports.Select = Select.Select;
+exports.Slider = Slider.Slider;
+exports.Switch = Switch.Switch;
+exports.Box = Box.Box;
+exports.Inline = Inline.Inline;
+exports.Stack = Stack.Stack;
+exports.Link = Link.Link;
+exports.Dialog = Dialog.Dialog;
+exports.Portal = Portal.Portal;
+exports.Tooltip = Tooltip.Tooltip;
+exports.BlocksProvider = BlocksProvider.BlocksProvider;
+exports.Heading = Heading.Heading;
+exports.Text = Text.Text;
+exports.useComponentStyleDefaultProps = useComponentStyleDefaultProps.useComponentStyleDefaultProps;
+exports.useComponentStyles = useComponentStyles.useComponentStyles;
+exports.useControlledValue = useControlledValue.useControlledValue;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
+exports.useKeyboard = useKeyboard.useKeyboard;
+exports.usePreventBodyScroll = usePreventBodyScroll.usePreventBodyScroll;

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export { VisuallyHidden, type VisuallyHiddenProps, } from './components/accessibility/VisuallyHidden';
+export { Divider, type DividerProps } from './components/display/Divider';
+export { Progress, type ProgressProps } from './components/feedback/Progress';
+export { Spinner, type SpinnerProps } from './components/feedback/Spinner';
+export { Button, type ButtonProps } from './components/form/Button';
+export { Checkbox, type CheckboxProps } from './components/form/Checkbox';
+export { Input, type InputProps } from './components/form/Input';
+export { Label, type LabelProps } from './components/form/Label';
+export { Radio, type RadioProps } from './components/form/Radio';
+export { Select, type SelectProps } from './components/form/Select';
+export { Slider, type SliderProps } from './components/form/Slider';
+export { Switch, type SwitchProps } from './components/form/Switch';
+export { Box, type BoxProps } from './components/layout/Box';
+export { Inline, type InlineProps } from './components/layout/Inline';
+export { Stack, type StackProps } from './components/layout/Stack';
+export { Link, type LinkProps } from './components/navigation/Link';
+export { Dialog, type DialogProps } from './components/overlay/Dialog';
+export { Portal, type PortalProps } from './components/overlay/Portal';
+export { Tooltip, type TooltipProps } from './components/overlay/Tooltip';
+export { BlocksProvider, type BlocksProviderProps, } from './components/providers/BlocksProvider';
+export { Heading, type HeadingProps } from './components/typography/Heading';
+export { Text, type TextProps } from './components/typography/Text';
+export { useComponentStyleDefaultProps, useComponentStyles, } from './hooks/useComponentStyles';
+export { useControlledValue } from './hooks/useControlledValue';
+export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect';
+export { useKeyboard } from './hooks/useKeyboard';
+export { usePreventBodyScroll } from './hooks/usePreventBodyScroll';

package/dist/index.js

@@ -0,0 +1,58 @@
+import { VisuallyHidden } from "./components/accessibility/VisuallyHidden/VisuallyHidden.js";
+import { Divider } from "./components/display/Divider/Divider.js";
+import { Progress } from "./components/feedback/Progress/Progress.js";
+import { Spinner } from "./components/feedback/Spinner/Spinner.js";
+import { Button } from "./components/form/Button/Button.js";
+import { Checkbox } from "./components/form/Checkbox/Checkbox.js";
+import { Input } from "./components/form/Input/Input.js";
+import { Label } from "./components/form/Label/Label.js";
+import { Radio } from "./components/form/Radio/Radio.js";
+import { Select } from "./components/form/Select/Select.js";
+import { Slider } from "./components/form/Slider/Slider.js";
+import { Switch } from "./components/form/Switch/Switch.js";
+import { Box } from "./components/layout/Box/Box.js";
+import { Inline } from "./components/layout/Inline/Inline.js";
+import { Stack } from "./components/layout/Stack/Stack.js";
+import { Link } from "./components/navigation/Link/Link.js";
+import { Dialog } from "./components/overlay/Dialog/Dialog.js";
+import { Portal } from "./components/overlay/Portal/Portal.js";
+import { Tooltip } from "./components/overlay/Tooltip/Tooltip.js";
+import { BlocksProvider } from "./components/providers/BlocksProvider/BlocksProvider.js";
+import { Heading } from "./components/typography/Heading/Heading.js";
+import { Text } from "./components/typography/Text/Text.js";
+import { useComponentStyleDefaultProps } from "./hooks/useComponentStyles/useComponentStyleDefaultProps.js";
+import { useComponentStyles } from "./hooks/useComponentStyles/useComponentStyles.js";
+import { useControlledValue } from "./hooks/useControlledValue/useControlledValue.js";
+import { useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { useKeyboard } from "./hooks/useKeyboard/useKeyboard.js";
+import { usePreventBodyScroll } from "./hooks/usePreventBodyScroll/usePreventBodyScroll.js";
+export {
+  BlocksProvider,
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  Divider,
+  Heading,
+  Inline,
+  Input,
+  Label,
+  Link,
+  Portal,
+  Progress,
+  Radio,
+  Select,
+  Slider,
+  Spinner,
+  Stack,
+  Switch,
+  Text,
+  Tooltip,
+  VisuallyHidden,
+  useComponentStyleDefaultProps,
+  useComponentStyles,
+  useControlledValue,
+  useIsomorphicLayoutEffect,
+  useKeyboard,
+  usePreventBodyScroll
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@blockle/blocks-react",
+  "version": "1.0.0",
+  "description": "React hooks and components for Blockle",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.mts",
+        "require": "./dist/index.d.ts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest",
+    "lint": "biome format ./src",
+    "format": "biome format --write ./src",
+    "ts": "tsc --noemit --project ./tsconfig.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/Blockle/blocks.git"
+  },
+  "author": "Niek Saarberg <n.saarberg@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Blockle/blocks/issues"
+  },
+  "homepage": "https://github.com/Blockle/blocks#readme",
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "@blockle/blocks-core": "^0.21.0",
+    "@blockle/blocks-react-slot": "^1.0.0",
+    "@vanilla-extract/css": "^1.17.1"
+  }
+}