@blockle/blocks-react 1.1.1 → 1.2.0

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { VisuallyHidden, VisuallyHiddenProps } from './VisuallyHidden';
+import { VisuallyHidden, VisuallyHiddenProps } from './VisuallyHidden.js';
 declare const meta: Meta<typeof VisuallyHidden>;
 export default meta;
 type Story = StoryObj<VisuallyHiddenProps>;

package/dist/components/display/Divider/Divider.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
-import { divider } from "./divider.css.js";
-import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { useComponentStyleDefaultProps } from "../../../hooks/useComponentStyles/useComponentStyleDefaultProps.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Box } from "../../layout/Box/Box.js";
+import { divider } from "./divider.css.js";
 const Divider = ({
   className,
   color,

package/dist/components/display/Divider/Divider.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Divider, DividerProps } from './Divider';
+import { Divider, DividerProps } from './Divider.js';
 declare const meta: Meta<typeof Divider>;
 export default meta;
 type Story = StoryObj<DividerProps>;

package/dist/components/display/Divider/divider.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks-react");
 const divider = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       clear: "both",
       blockSize: "1px"
     }

package/dist/components/feedback/Progress/Progress.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ProgressProps } from './Progress';
+import { ProgressProps } from './Progress.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<ProgressProps>;

package/dist/components/feedback/Spinner/Spinner.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { SpinnerProps } from './Spinner';
+import { SpinnerProps } from './Spinner.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<SpinnerProps>;

package/dist/components/form/Button/Button.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks-react");
 const buttonReset = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       all: "unset",
       cursor: "pointer"
     }

package/dist/components/form/Button/Button.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { getAtomsAndProps, classnames, atoms } from "@blockle/blocks-core";
 import { createSlottable } from "@blockle/blocks-react-slot";
-import { buttonReset } from "./Button.css.js";
-import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Spinner } from "../../feedback/Spinner/Spinner.js";
+import { buttonReset } from "./Button.css.js";
 const [Template, Slot] = createSlottable("button");
 const Button = ({
   asChild,

package/dist/components/form/Button/Button.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ButtonProps } from './Button';
+import { ButtonProps } from './Button.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<ButtonProps>;

package/dist/components/form/Checkbox/Checkbox.js

@@ -2,9 +2,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useId } from "react";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Label } from "../Label/Label.js";
 import { input, icon, container } from "./checkbox.css.js";
-import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 const Checkbox = ({
   children,
   className,

package/dist/components/form/Checkbox/Checkbox.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { CheckboxProps } from './Checkbox';
+import { CheckboxProps } from './Checkbox.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<CheckboxProps>;

package/dist/components/form/Checkbox/checkbox.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"
@@ -16,7 +16,7 @@ const input = style({
   inset: 0,
   opacity: 0,
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       all: "unset"
     }
   }

package/dist/components/form/Input/Input.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { classnames } from "@blockle/blocks-core";
-import { input } from "./input.css.js";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { classnames } from "@blockle/blocks-core";
 import { Box } from "../../layout/Box/Box.js";
+import { input } from "./input.css.js";
 const Input = ({
   className,
   endSlot,

package/dist/components/form/Input/Input.stories.d.ts

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

package/dist/components/form/Input/input.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks-react");
 const input = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       appearance: "none",
       width: "100%",
       selectors: {

package/dist/components/form/Label/Label.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { LabelProps } from './Label';
+import { LabelProps } from './Label.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<LabelProps>;

package/dist/components/form/Radio/Radio.js

@@ -2,9 +2,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useId } from "react";
-import { input, icon, container } from "./radio.css.js";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Label } from "../Label/Label.js";
+import { input, icon, container } from "./radio.css.js";
 const Radio = ({
   name,
   children,

package/dist/components/form/Radio/Radio.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { RadioProps } from './Radio';
+import { RadioProps } from './Radio.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<RadioProps>;

package/dist/components/form/Radio/radio.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"
@@ -16,7 +16,7 @@ const input = style({
   inset: 0,
   opacity: 0,
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       all: "unset"
     }
   }

package/dist/components/form/Select/Select.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
-import { select, icon, wrapper } from "./select.css.js";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Box } from "../../layout/Box/Box.js";
+import { select, icon, wrapper } from "./select.css.js";
 const Select = ({
   children,
   placeholder,

package/dist/components/form/Select/Select.stories.d.ts

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

package/dist/components/form/Select/select.css.js

@@ -1,17 +1,17 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks-react");
 const wrapper = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       position: "relative"
     }
   }
 });
 const select = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       appearance: "none",
       inlineSize: "100%"
     }
@@ -19,7 +19,7 @@ const select = style({
 });
 const icon = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       position: "absolute",
       right: 0,
       top: 0,

package/dist/components/form/Slider/Slider.js

@@ -2,10 +2,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames, roundToPrecision, getBoundValue } from "@blockle/blocks-core";
 import { useRef, useCallback } from "react";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { useControlledValue } from "../../../hooks/useControlledValue/useControlledValue.js";
 import { filledTrack, track, thumb, container, containerVertical } from "./slider.css.js";
 import { usePointerProgress } from "./usePointerProgress.js";
-import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 const usableKeys = /* @__PURE__ */ new Set([
   "ArrowLeft",
   "ArrowRight",

package/dist/components/form/Slider/Slider.stories.d.ts

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

package/dist/components/form/Slider/slider.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       position: "relative",
       writingMode: "horizontal-tb"
     }
@@ -12,14 +12,14 @@ const container = style({
 });
 const containerVertical = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       writingMode: "vertical-lr"
     }
   }
 });
 const track = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       cursor: "pointer",
       position: "absolute",
       inlineSize: "100%",
@@ -35,7 +35,7 @@ const track = style({
 });
 const filledTrack = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       position: "absolute",
       blockSize: "100%",
       borderRadius: "inherit",
@@ -49,7 +49,7 @@ const filledTrack = style({
 });
 const thumb = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       cursor: "pointer",
       position: "absolute",
       blockSize: "100%",

package/dist/components/form/Switch/Switch.js

@@ -2,8 +2,8 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useState, useEffect, useCallback } from "react";
-import { input, container } from "./switch.css.js";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { input, container } from "./switch.css.js";
 const Switch = ({
   checked,
   className,

package/dist/components/form/Switch/Switch.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { SwitchProps } from './Switch';
+import { SwitchProps } from './Switch.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<SwitchProps>;

package/dist/components/form/Switch/switch.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       cursor: "pointer",
       userSelect: "none",
       position: "relative"
@@ -13,7 +13,7 @@ const container = style({
 });
 const input = style({
   "@layer": {
-    [blocksLayer]: {
+    [blocksLayerComponent]: {
       opacity: 0,
       maxBlockSize: 0,
       maxInlineSize: 0

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { BoxProps } from './Box';
+import { BoxProps } from './Box.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<BoxProps>;

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

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

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

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

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

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

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

@@ -3,13 +3,13 @@ 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";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
+import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
+import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.js";
+import { dialog } from "./dialog.css.js";
+import { useNestedDialog, DialogContext } from "./dialogHelper.js";
 const Dialog = ({
   children,
   open,

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

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

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

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } 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]: {
+    [blocksLayerComponent]: {
       position: "fixed",
       inset: 0,
       border: "none",

package/dist/components/overlay/Popover/Popover.js

@@ -3,11 +3,11 @@ import { jsx } from "react/jsx-runtime";
 import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
 import { useRef, useState, useEffect, useCallback } from "react";
 import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
-import { getPopoverPosition } from "./popover-utils.js";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
-import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
 import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
 import { Box } from "../../layout/Box/Box.js";
+import { getPopoverPosition } from "./popover-utils.js";
 const Popover = ({
   anchorElement,
   children,

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { PopoverProps } from './Popover';
+import { PopoverProps } from './Popover.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<PopoverProps>;

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

@@ -1,5 +1,5 @@
 import { ComponentThemes } from '@blockle/blocks-core';
-import { PopoverProps } from '../Popover';
+import { PopoverProps } from '../Popover/Popover.js';
 type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 type TooltipTheme = ComponentThemes['tooltip'];
 export type TooltipProps = {

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { TooltipProps } from './Tooltip';
+import { TooltipProps } from './Tooltip.js';
 declare const _default: Meta;
 export default _default;
 export declare const Default: StoryObj<TooltipProps>;

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
-import { heading } from "./heading.css.js";
 import { Box } from "../../layout/Box/Box.js";
+import { heading } from "./heading.css.js";
 const Heading = ({
   className,
   level = 1,

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

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } 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]: {
+    [blocksLayerComponent]: {
       margin: 0,
       padding: 0
     }

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

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

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

@@ -1,7 +1,7 @@
 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";
+import { text } from "./text.css.js";
 const Text = ({
   asChild,
   children,

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

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

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

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayer } from "@blockle/blocks-core";
+import { blocksLayerComponent } 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]: {
+    [blocksLayerComponent]: {
       margin: 0,
       padding: 0
     }