@blockle/blocks-react 1.1.2 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.stories.d.ts +1 -1
- package/dist/components/display/Divider/Divider.js +2 -2
- package/dist/components/display/Divider/Divider.stories.d.ts +1 -1
- package/dist/components/feedback/Progress/Progress.stories.d.ts +1 -1
- package/dist/components/feedback/Spinner/Spinner.js +1 -0
- package/dist/components/feedback/Spinner/Spinner.stories.d.ts +1 -1
- package/dist/components/feedback/Spinner/Spinner.test.d.ts +1 -0
- package/dist/components/form/Button/Button.js +2 -2
- package/dist/components/form/Button/Button.stories.d.ts +1 -1
- package/dist/components/form/Checkbox/Checkbox.js +1 -1
- package/dist/components/form/Checkbox/Checkbox.stories.d.ts +1 -1
- package/dist/components/form/Input/Input.js +2 -2
- package/dist/components/form/Input/Input.stories.d.ts +1 -1
- package/dist/components/form/Label/Label.stories.d.ts +1 -1
- package/dist/components/form/Radio/Radio.js +1 -1
- package/dist/components/form/Radio/Radio.stories.d.ts +1 -1
- package/dist/components/form/Radio/RadioGroup.test.d.ts +1 -0
- package/dist/components/form/Select/Select.js +1 -1
- package/dist/components/form/Select/Select.stories.d.ts +1 -1
- package/dist/components/form/Slider/Slider.d.ts +0 -1
- package/dist/components/form/Slider/Slider.js +3 -4
- package/dist/components/form/Slider/Slider.stories.d.ts +1 -1
- package/dist/components/form/Switch/Switch.js +1 -1
- package/dist/components/form/Switch/Switch.stories.d.ts +1 -1
- package/dist/components/layout/Box/Box.stories.d.ts +1 -1
- package/dist/components/layout/Inline/Inline.stories.d.ts +1 -1
- package/dist/components/layout/Stack/Stack.stories.d.ts +1 -1
- package/dist/components/navigation/Link/Link.stories.d.ts +1 -1
- package/dist/components/overlay/Dialog/Dialog.js +5 -5
- package/dist/components/overlay/Dialog/Dialog.stories.d.ts +1 -1
- package/dist/components/overlay/Popover/Popover.js +2 -2
- package/dist/components/overlay/Popover/Popover.stories.d.ts +1 -1
- package/dist/components/overlay/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/overlay/Tooltip/Tooltip.stories.d.ts +1 -1
- package/dist/components/typography/Heading/Heading.js +1 -1
- package/dist/components/typography/Heading/heading.stories.d.ts +1 -1
- package/dist/components/typography/Text/Text.js +1 -1
- package/dist/components/typography/Text/Text.stories.d.ts +1 -1
- package/dist/hooks/useControlledValue/useControlledValue.d.ts +5 -0
- package/dist/hooks/useControlledValue/useControlledValue.js +7 -11
- package/dist/hooks/useControlledValue/useControlledValue.test.d.ts +1 -0
- package/dist/index.d.ts +28 -27
- package/package.json +8 -14
- package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.cjs +0 -20
- package/dist/components/accessibility/VisuallyHidden/index.d.ts +0 -1
- package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.cjs +0 -16
- package/dist/components/display/Divider/Divider.cjs +0 -28
- package/dist/components/display/Divider/divider.css.cjs +0 -16
- package/dist/components/display/Divider/index.d.ts +0 -1
- package/dist/components/feedback/Progress/Progress.cjs +0 -55
- package/dist/components/feedback/Progress/index.d.ts +0 -1
- package/dist/components/feedback/Spinner/Spinner.cjs +0 -27
- package/dist/components/feedback/Spinner/index.d.ts +0 -1
- package/dist/components/form/Button/Button.cjs +0 -58
- package/dist/components/form/Button/Button.css.cjs +0 -16
- package/dist/components/form/Button/index.d.ts +0 -1
- package/dist/components/form/Checkbox/Checkbox.cjs +0 -80
- package/dist/components/form/Checkbox/checkbox.css.cjs +0 -32
- package/dist/components/form/Checkbox/index.d.ts +0 -1
- package/dist/components/form/Input/Input.cjs +0 -52
- package/dist/components/form/Input/index.d.ts +0 -1
- package/dist/components/form/Input/input.css.cjs +0 -21
- package/dist/components/form/Label/Label.cjs +0 -30
- package/dist/components/form/Label/index.d.ts +0 -1
- package/dist/components/form/Radio/Radio.cjs +0 -50
- package/dist/components/form/Radio/index.d.ts +0 -2
- package/dist/components/form/Radio/radio.css.cjs +0 -32
- package/dist/components/form/Select/Select.cjs +0 -73
- package/dist/components/form/Select/index.d.ts +0 -1
- package/dist/components/form/Select/select.css.cjs +0 -38
- package/dist/components/form/Slider/Slider.cjs +0 -139
- package/dist/components/form/Slider/index.d.ts +0 -1
- package/dist/components/form/Slider/slider.css.cjs +0 -75
- package/dist/components/form/Slider/usePointerProgress.cjs +0 -46
- package/dist/components/form/Switch/Switch.cjs +0 -73
- package/dist/components/form/Switch/index.d.ts +0 -1
- package/dist/components/form/Switch/switch.css.cjs +0 -27
- package/dist/components/layout/Box/Box.cjs +0 -26
- package/dist/components/layout/Box/index.d.ts +0 -1
- package/dist/components/layout/Inline/Inline.cjs +0 -30
- package/dist/components/layout/Inline/index.d.ts +0 -1
- package/dist/components/layout/Stack/Stack.cjs +0 -27
- package/dist/components/layout/Stack/index.d.ts +0 -1
- package/dist/components/navigation/Link/Link.cjs +0 -33
- package/dist/components/navigation/Link/index.d.ts +0 -1
- package/dist/components/overlay/Dialog/Dialog.cjs +0 -82
- package/dist/components/overlay/Dialog/dialog.css.cjs +0 -22
- package/dist/components/overlay/Dialog/dialogHelper.cjs +0 -21
- package/dist/components/overlay/Dialog/index.d.ts +0 -1
- package/dist/components/overlay/Popover/Popover.cjs +0 -106
- package/dist/components/overlay/Popover/index.d.ts +0 -1
- package/dist/components/overlay/Popover/popover-utils.cjs +0 -57
- package/dist/components/overlay/Portal/Portal.cjs +0 -15
- package/dist/components/overlay/Portal/index.d.ts +0 -1
- package/dist/components/overlay/Tooltip/Tooltip.cjs +0 -73
- package/dist/components/overlay/Tooltip/index.d.ts +0 -1
- package/dist/components/providers/BlocksProvider/BlocksProvider.cjs +0 -35
- package/dist/components/providers/BlocksProvider/context.cjs +0 -5
- package/dist/components/providers/BlocksProvider/index.d.ts +0 -2
- package/dist/components/typography/Heading/Heading.cjs +0 -24
- package/dist/components/typography/Heading/heading.css.cjs +0 -16
- package/dist/components/typography/Heading/index.d.ts +0 -1
- package/dist/components/typography/Text/Text.cjs +0 -21
- package/dist/components/typography/Text/index.d.ts +0 -1
- package/dist/components/typography/Text/text.css.cjs +0 -16
- package/dist/hooks/useClickOutside/useClickOutside.cjs +0 -23
- package/dist/hooks/useComponentStyles/index.d.ts +0 -2
- package/dist/hooks/useComponentStyles/useComponentStyleDefaultProps.cjs +0 -12
- package/dist/hooks/useComponentStyles/useComponentStyles.cjs +0 -74
- package/dist/hooks/useControlledValue/index.d.ts +0 -1
- package/dist/hooks/useControlledValue/useControlledValue.cjs +0 -33
- package/dist/hooks/useIsomorphicLayoutEffect/index.d.ts +0 -1
- package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs +0 -6
- package/dist/hooks/useKeyboard/index.d.ts +0 -1
- package/dist/hooks/useKeyboard/useKeyboard.cjs +0 -21
- package/dist/hooks/useLayer/index.d.ts +0 -1
- package/dist/hooks/usePreventBodyScroll/index.d.ts +0 -1
- package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs +0 -31
- package/dist/hooks/useRestoreFocus/index.d.ts +0 -1
- package/dist/hooks/useRestoreFocus/useRestoreFocus.cjs +0 -19
- package/dist/hooks/useTheme/index.d.ts +0 -1
- package/dist/hooks/useTheme/useTheme.cjs +0 -13
- package/dist/hooks/useVisibilityState/index.d.ts +0 -1
- package/dist/index.cjs +0 -58
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { VisuallyHidden, VisuallyHiddenProps } from './VisuallyHidden';
|
|
2
|
+
import { VisuallyHidden, VisuallyHiddenProps } from './VisuallyHidden.js';
|
|
3
3
|
declare const meta: Meta<typeof VisuallyHidden>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<VisuallyHiddenProps>;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { classnames } from "@blockle/blocks-core";
|
|
4
|
-
import { divider } from "./divider.css.js";
|
|
5
|
-
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
6
4
|
import { useComponentStyleDefaultProps } from "../../../hooks/useComponentStyles/useComponentStyleDefaultProps.js";
|
|
5
|
+
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
7
6
|
import { Box } from "../../layout/Box/Box.js";
|
|
7
|
+
import { divider } from "./divider.css.js";
|
|
8
8
|
const Divider = ({
|
|
9
9
|
className,
|
|
10
10
|
color,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
3
4
|
import { getAtomsAndProps, classnames, atoms } from "@blockle/blocks-core";
|
|
4
5
|
import { createSlottable } from "@blockle/blocks-react-slot";
|
|
5
|
-
import { buttonReset } from "./Button.css.js";
|
|
6
|
-
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
7
6
|
import { Spinner } from "../../feedback/Spinner/Spinner.js";
|
|
7
|
+
import { buttonReset } from "./Button.css.js";
|
|
8
8
|
const [Template, Slot] = createSlottable("button");
|
|
9
9
|
const Button = ({
|
|
10
10
|
asChild,
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
3
|
import { classnames } from "@blockle/blocks-core";
|
|
4
4
|
import { useId } from "react";
|
|
5
|
+
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
5
6
|
import { Label } from "../Label/Label.js";
|
|
6
7
|
import { input, icon, container } from "./checkbox.css.js";
|
|
7
|
-
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
8
8
|
const Checkbox = ({
|
|
9
9
|
children,
|
|
10
10
|
className,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useId } from "react";
|
|
4
|
-
import { classnames } from "@blockle/blocks-core";
|
|
5
|
-
import { input } from "./input.css.js";
|
|
6
4
|
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
5
|
+
import { classnames } from "@blockle/blocks-core";
|
|
7
6
|
import { Box } from "../../layout/Box/Box.js";
|
|
7
|
+
import { input } from "./input.css.js";
|
|
8
8
|
const Input = ({
|
|
9
9
|
className,
|
|
10
10
|
endSlot,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { Input, InputProps } from './Input';
|
|
2
|
+
import { Input, InputProps } from './Input.js';
|
|
3
3
|
declare const _default: Meta<typeof Input>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: StoryObj<InputProps>;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
3
|
import { classnames } from "@blockle/blocks-core";
|
|
4
4
|
import { useId } from "react";
|
|
5
|
-
import { input, icon, container } from "./radio.css.js";
|
|
6
5
|
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
7
6
|
import { Label } from "../Label/Label.js";
|
|
7
|
+
import { input, icon, container } from "./radio.css.js";
|
|
8
8
|
const Radio = ({
|
|
9
9
|
name,
|
|
10
10
|
children,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
3
|
import { classnames } from "@blockle/blocks-core";
|
|
4
|
-
import { select, icon, wrapper } from "./select.css.js";
|
|
5
4
|
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
6
5
|
import { Box } from "../../layout/Box/Box.js";
|
|
6
|
+
import { select, icon, wrapper } from "./select.css.js";
|
|
7
7
|
const Select = ({
|
|
8
8
|
children,
|
|
9
9
|
placeholder,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { Select, SelectProps } from './Select';
|
|
2
|
+
import { Select, SelectProps } from './Select.js';
|
|
3
3
|
declare const _default: Meta<typeof Select>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: StoryObj<SelectProps>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
-
import { classnames,
|
|
3
|
+
import { classnames, clampAndRoundValue } from "@blockle/blocks-core";
|
|
4
4
|
import { useRef, useCallback } from "react";
|
|
5
|
+
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
5
6
|
import { useControlledValue } from "../../../hooks/useControlledValue/useControlledValue.js";
|
|
6
7
|
import { filledTrack, track, thumb, container, containerVertical } from "./slider.css.js";
|
|
7
8
|
import { usePointerProgress } from "./usePointerProgress.js";
|
|
8
|
-
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
9
9
|
const usableKeys = /* @__PURE__ */ new Set([
|
|
10
10
|
"ArrowLeft",
|
|
11
11
|
"ArrowRight",
|
|
@@ -30,7 +30,6 @@ const Slider = ({
|
|
|
30
30
|
size,
|
|
31
31
|
colorScheme,
|
|
32
32
|
disabled,
|
|
33
|
-
precision = 2,
|
|
34
33
|
...restProps
|
|
35
34
|
}) => {
|
|
36
35
|
const baseClass = useComponentStyles("slider", {
|
|
@@ -49,7 +48,7 @@ const Slider = ({
|
|
|
49
48
|
defaultValue,
|
|
50
49
|
value,
|
|
51
50
|
onChange,
|
|
52
|
-
transformValue: (value2) =>
|
|
51
|
+
transformValue: (value2) => clampAndRoundValue(value2, min, max, step)
|
|
53
52
|
});
|
|
54
53
|
usePointerProgress({
|
|
55
54
|
container: containerRef,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { Slider, SliderProps } from './Slider';
|
|
2
|
+
import { Slider, SliderProps } from './Slider.js';
|
|
3
3
|
declare const _default: Meta<typeof Slider>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: StoryObj<SliderProps>;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { classnames } from "@blockle/blocks-core";
|
|
4
4
|
import { useState, useEffect, useCallback } from "react";
|
|
5
|
-
import { input, container } from "./switch.css.js";
|
|
6
5
|
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
6
|
+
import { input, container } from "./switch.css.js";
|
|
7
7
|
const Switch = ({
|
|
8
8
|
checked,
|
|
9
9
|
className,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { Inline, InlineProps } from './Inline';
|
|
2
|
+
import { Inline, InlineProps } from './Inline.js';
|
|
3
3
|
declare const _default: Meta<typeof Inline>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: StoryObj<InlineProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { Stack, StackProps } from './Stack';
|
|
2
|
+
import { Stack, StackProps } from './Stack.js';
|
|
3
3
|
declare const _default: Meta<typeof Stack>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: StoryObj<StackProps>;
|
|
@@ -3,13 +3,13 @@ import { jsx, Fragment } from "react/jsx-runtime";
|
|
|
3
3
|
import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
|
|
4
4
|
import { useRef, useState, useCallback } from "react";
|
|
5
5
|
import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
|
|
6
|
-
import { dialog } from "./dialog.css.js";
|
|
7
|
-
import { useNestedDialog, DialogContext } from "./dialogHelper.js";
|
|
8
6
|
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
9
|
-
import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.js";
|
|
10
|
-
import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
|
|
11
|
-
import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
|
|
12
7
|
import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
|
|
8
|
+
import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
|
|
9
|
+
import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
|
|
10
|
+
import { useRestoreFocus } from "../../../hooks/useRestoreFocus/useRestoreFocus.js";
|
|
11
|
+
import { dialog } from "./dialog.css.js";
|
|
12
|
+
import { useNestedDialog, DialogContext } from "./dialogHelper.js";
|
|
13
13
|
const Dialog = ({
|
|
14
14
|
children,
|
|
15
15
|
open,
|
|
@@ -3,11 +3,11 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
|
|
4
4
|
import { useRef, useState, useEffect, useCallback } from "react";
|
|
5
5
|
import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
|
|
6
|
-
import { getPopoverPosition } from "./popover-utils.js";
|
|
7
6
|
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
8
|
-
import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
|
|
9
7
|
import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
|
|
8
|
+
import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
|
|
10
9
|
import { Box } from "../../layout/Box/Box.js";
|
|
10
|
+
import { getPopoverPosition } from "./popover-utils.js";
|
|
11
11
|
const Popover = ({
|
|
12
12
|
anchorElement,
|
|
13
13
|
children,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentThemes } from '@blockle/blocks-core';
|
|
2
|
-
import { PopoverProps } from '../Popover';
|
|
2
|
+
import { PopoverProps } from '../Popover/Popover.js';
|
|
3
3
|
type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
4
4
|
type TooltipTheme = ComponentThemes['tooltip'];
|
|
5
5
|
export type TooltipProps = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { classnames } from "@blockle/blocks-core";
|
|
3
|
-
import { heading } from "./heading.css.js";
|
|
4
3
|
import { Box } from "../../layout/Box/Box.js";
|
|
4
|
+
import { heading } from "./heading.css.js";
|
|
5
5
|
const Heading = ({
|
|
6
6
|
className,
|
|
7
7
|
level = 1,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { Heading, HeadingProps } from './Heading';
|
|
2
|
+
import { Heading, HeadingProps } from './Heading.js';
|
|
3
3
|
declare const _default: Meta<typeof Heading>;
|
|
4
4
|
export default _default;
|
|
5
5
|
export declare const Default: StoryObj<HeadingProps>;
|
|
@@ -3,6 +3,11 @@ type ControlledValue<T> = {
|
|
|
3
3
|
defaultValue: T;
|
|
4
4
|
onChange?: (value: T) => void;
|
|
5
5
|
transformValue?: (value: T) => T;
|
|
6
|
+
} | {
|
|
7
|
+
value: T;
|
|
8
|
+
defaultValue?: T;
|
|
9
|
+
onChange: (value: T) => void;
|
|
10
|
+
transformValue?: (value: T) => T;
|
|
6
11
|
};
|
|
7
12
|
export declare function useControlledValue<T>({ defaultValue, value, onChange, transformValue, }: ControlledValue<T>): [T, (value: T) => void];
|
|
8
13
|
export {};
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useState, useCallback
|
|
2
|
+
import { useState, useCallback } from "react";
|
|
3
|
+
function noopTransform(value) {
|
|
4
|
+
return value;
|
|
5
|
+
}
|
|
3
6
|
function useControlledValue({
|
|
4
7
|
defaultValue,
|
|
5
8
|
value,
|
|
6
9
|
onChange,
|
|
7
|
-
transformValue
|
|
10
|
+
transformValue = noopTransform
|
|
8
11
|
}) {
|
|
9
12
|
const [internValue, setInternValue] = useState(defaultValue);
|
|
10
13
|
const currentValue = (onChange ? value : internValue) ?? defaultValue;
|
|
11
14
|
const setValue = useCallback(
|
|
12
15
|
function setValue2(value2) {
|
|
13
|
-
const nextValue = transformValue
|
|
16
|
+
const nextValue = transformValue(value2);
|
|
14
17
|
if (onChange) {
|
|
15
18
|
onChange(nextValue);
|
|
16
19
|
} else {
|
|
@@ -19,14 +22,7 @@ function useControlledValue({
|
|
|
19
22
|
},
|
|
20
23
|
[onChange, transformValue]
|
|
21
24
|
);
|
|
22
|
-
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
if (onChange && value === void 0) {
|
|
25
|
-
console.error("Slider is in controlled mode but no value is provided");
|
|
26
|
-
}
|
|
27
|
-
}, []);
|
|
28
|
-
}
|
|
29
|
-
return [currentValue, setValue];
|
|
25
|
+
return [transformValue(currentValue), setValue];
|
|
30
26
|
}
|
|
31
27
|
export {
|
|
32
28
|
useControlledValue
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
export { VisuallyHidden, type VisuallyHiddenProps, } from './components/accessibility/VisuallyHidden';
|
|
2
|
-
export { Divider, type DividerProps } from './components/display/Divider';
|
|
3
|
-
export { Progress, type ProgressProps } from './components/feedback/Progress';
|
|
4
|
-
export { Spinner, type SpinnerProps } from './components/feedback/Spinner';
|
|
5
|
-
export { Button, type ButtonProps } from './components/form/Button';
|
|
6
|
-
export { Checkbox, type CheckboxProps } from './components/form/Checkbox';
|
|
7
|
-
export { Input, type InputProps } from './components/form/Input';
|
|
8
|
-
export { Label, type LabelProps } from './components/form/Label';
|
|
9
|
-
export { Radio, type RadioProps } from './components/form/Radio';
|
|
10
|
-
export { Select, type SelectProps } from './components/form/Select';
|
|
11
|
-
export { Slider, type SliderProps } from './components/form/Slider';
|
|
12
|
-
export { Switch, type SwitchProps } from './components/form/Switch';
|
|
13
|
-
export { Box, type BoxProps } from './components/layout/Box';
|
|
14
|
-
export { Inline, type InlineProps } from './components/layout/Inline';
|
|
15
|
-
export { Stack, type StackProps } from './components/layout/Stack';
|
|
16
|
-
export { Link, type LinkProps } from './components/navigation/Link';
|
|
17
|
-
export { Dialog, type DialogProps } from './components/overlay/Dialog';
|
|
18
|
-
export { Portal, type PortalProps } from './components/overlay/Portal';
|
|
19
|
-
export { Tooltip, type TooltipProps } from './components/overlay/Tooltip';
|
|
20
|
-
export { BlocksProvider, type BlocksProviderProps, } from './components/providers/BlocksProvider';
|
|
21
|
-
export { Heading, type HeadingProps } from './components/typography/Heading';
|
|
22
|
-
export { Text, type TextProps } from './components/typography/Text';
|
|
23
|
-
export { useComponentStyleDefaultProps
|
|
24
|
-
export {
|
|
25
|
-
export {
|
|
26
|
-
export {
|
|
27
|
-
export {
|
|
1
|
+
export { VisuallyHidden, type VisuallyHiddenProps, } from './components/accessibility/VisuallyHidden/VisuallyHidden.js';
|
|
2
|
+
export { Divider, type DividerProps, } from './components/display/Divider/Divider.js';
|
|
3
|
+
export { Progress, type ProgressProps, } from './components/feedback/Progress/Progress.js';
|
|
4
|
+
export { Spinner, type SpinnerProps, } from './components/feedback/Spinner/Spinner.js';
|
|
5
|
+
export { Button, type ButtonProps } from './components/form/Button/Button.js';
|
|
6
|
+
export { Checkbox, type CheckboxProps, } from './components/form/Checkbox/Checkbox.js';
|
|
7
|
+
export { Input, type InputProps } from './components/form/Input/Input.js';
|
|
8
|
+
export { Label, type LabelProps } from './components/form/Label/Label.js';
|
|
9
|
+
export { Radio, type RadioProps } from './components/form/Radio/Radio.js';
|
|
10
|
+
export { Select, type SelectProps } from './components/form/Select/Select.js';
|
|
11
|
+
export { Slider, type SliderProps } from './components/form/Slider/Slider.js';
|
|
12
|
+
export { Switch, type SwitchProps } from './components/form/Switch/Switch.js';
|
|
13
|
+
export { Box, type BoxProps } from './components/layout/Box/Box.js';
|
|
14
|
+
export { Inline, type InlineProps } from './components/layout/Inline/Inline.js';
|
|
15
|
+
export { Stack, type StackProps } from './components/layout/Stack/Stack.js';
|
|
16
|
+
export { Link, type LinkProps } from './components/navigation/Link/Link.js';
|
|
17
|
+
export { Dialog, type DialogProps, } from './components/overlay/Dialog/Dialog.js';
|
|
18
|
+
export { Portal, type PortalProps, } from './components/overlay/Portal/Portal.js';
|
|
19
|
+
export { Tooltip, type TooltipProps, } from './components/overlay/Tooltip/Tooltip.js';
|
|
20
|
+
export { BlocksProvider, type BlocksProviderProps, } from './components/providers/BlocksProvider/BlocksProvider.js';
|
|
21
|
+
export { Heading, type HeadingProps, } from './components/typography/Heading/Heading.js';
|
|
22
|
+
export { Text, type TextProps } from './components/typography/Text/Text.js';
|
|
23
|
+
export { useComponentStyleDefaultProps } from './hooks/useComponentStyles/useComponentStyleDefaultProps.js';
|
|
24
|
+
export { useComponentStyles } from './hooks/useComponentStyles/useComponentStyles.js';
|
|
25
|
+
export { useControlledValue } from './hooks/useControlledValue/useControlledValue.js';
|
|
26
|
+
export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
|
|
27
|
+
export { useKeyboard } from './hooks/useKeyboard/useKeyboard.js';
|
|
28
|
+
export { usePreventBodyScroll } from './hooks/usePreventBodyScroll/usePreventBodyScroll.js';
|
package/package.json
CHANGED
|
@@ -1,25 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockle/blocks-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "React hooks and components for Blockle",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
8
|
-
"types":
|
|
9
|
-
|
|
10
|
-
"require": "./dist/index.d.ts"
|
|
11
|
-
},
|
|
12
|
-
"import": "./dist/index.js",
|
|
13
|
-
"require": "./dist/index.cjs"
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"import": "./dist/index.js"
|
|
14
10
|
}
|
|
15
11
|
},
|
|
16
12
|
"files": [
|
|
17
13
|
"dist"
|
|
18
14
|
],
|
|
19
15
|
"sideEffects": false,
|
|
20
|
-
"main": "./dist/index.cjs",
|
|
21
|
-
"module": "./dist/index.mjs",
|
|
22
|
-
"types": "./dist/index.d.ts",
|
|
23
16
|
"scripts": {
|
|
24
17
|
"build": "vite build",
|
|
25
18
|
"test": "vitest",
|
|
@@ -41,9 +34,10 @@
|
|
|
41
34
|
"@vanilla-extract/css": "^1.17.1"
|
|
42
35
|
},
|
|
43
36
|
"peerDependencies": {
|
|
44
|
-
"react": "
|
|
45
|
-
"react-dom": "
|
|
46
|
-
"@
|
|
47
|
-
"@blockle/blocks-
|
|
37
|
+
"react": ">= 18 || >= 19",
|
|
38
|
+
"react-dom": ">= 18 || >= 19",
|
|
39
|
+
"@vanilla-extract/css": ">= 1.17.1",
|
|
40
|
+
"@blockle/blocks-core": ">= 0.x",
|
|
41
|
+
"@blockle/blocks-react-slot": ">= 1.x"
|
|
48
42
|
}
|
|
49
43
|
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
5
|
-
const visuallyHidden_css = require("./visually-hidden.css.cjs");
|
|
6
|
-
const VisuallyHidden = ({
|
|
7
|
-
children,
|
|
8
|
-
className,
|
|
9
|
-
...restProps
|
|
10
|
-
}) => {
|
|
11
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12
|
-
"span",
|
|
13
|
-
{
|
|
14
|
-
className: blocksCore.classnames(visuallyHidden_css.visuallyHidden, className),
|
|
15
|
-
...restProps,
|
|
16
|
-
children
|
|
17
|
-
}
|
|
18
|
-
);
|
|
19
|
-
};
|
|
20
|
-
exports.VisuallyHidden = VisuallyHidden;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { VisuallyHidden, type VisuallyHiddenProps } from './VisuallyHidden';
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const fileScope = require("@vanilla-extract/css/fileScope");
|
|
4
|
-
const css = require("@vanilla-extract/css");
|
|
5
|
-
fileScope.setFileScope("src/components/accessibility/VisuallyHidden/visually-hidden.css.ts", "@blockle/blocks-react");
|
|
6
|
-
const visuallyHidden = css.style({
|
|
7
|
-
clip: "rect(0 0 0 0)",
|
|
8
|
-
clipPath: "inset(50%)",
|
|
9
|
-
height: "1px",
|
|
10
|
-
overflow: "hidden",
|
|
11
|
-
position: "absolute",
|
|
12
|
-
whiteSpace: "nowrap",
|
|
13
|
-
width: "1px"
|
|
14
|
-
});
|
|
15
|
-
fileScope.endFileScope();
|
|
16
|
-
exports.visuallyHidden = visuallyHidden;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
-
const blocksCore = require("@blockle/blocks-core");
|
|
6
|
-
const divider_css = require("./divider.css.cjs");
|
|
7
|
-
const useComponentStyles = require("../../../hooks/useComponentStyles/useComponentStyles.cjs");
|
|
8
|
-
const useComponentStyleDefaultProps = require("../../../hooks/useComponentStyles/useComponentStyleDefaultProps.cjs");
|
|
9
|
-
const Box = require("../../layout/Box/Box.cjs");
|
|
10
|
-
const Divider = ({
|
|
11
|
-
className,
|
|
12
|
-
color,
|
|
13
|
-
...restProps
|
|
14
|
-
}) => {
|
|
15
|
-
const dividerClass = useComponentStyles.useComponentStyles("divider", { base: true });
|
|
16
|
-
const dividerDefaults = useComponentStyleDefaultProps.useComponentStyleDefaultProps("divider");
|
|
17
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
18
|
-
Box.Box,
|
|
19
|
-
{
|
|
20
|
-
role: "separator",
|
|
21
|
-
inlineSize: "full",
|
|
22
|
-
backgroundColor: color ?? dividerDefaults.color,
|
|
23
|
-
className: blocksCore.classnames(className, dividerClass, divider_css.divider),
|
|
24
|
-
...restProps
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
};
|
|
28
|
-
exports.Divider = Divider;
|