@blockle/blocks 0.20.0-alpha1 → 0.20.0-alpha1.0

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

@@ -0,0 +1,11 @@
+import { TooltipTheme } from '../../../lib/theme/componentThemes';
+import { PopoverProps } from '../Popover/Popover';
+type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export type TooltipProps = {
+    align?: PopoverProps['align'];
+    children: ReactElement;
+    label: React.ReactNode;
+    colorScheme?: TooltipTheme['variants']['colorScheme'];
+};
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

package/dist/components/overlay/Tooltip/{Tooltip.mjs → Tooltip.js}

@@ -1,10 +1,9 @@
-'use client';
-
+"use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useId, useRef, useState, useEffect, Children, isValidElement, cloneElement } from "react";
-import { composeRefs } from "../../../lib/react/refs.mjs";
-import { getComponentStyles } from "../../../lib/theme/store/theme.mjs";
-import { Popover } from "../Popover/Popover.mjs";
+import { composeRefs } from "../../../lib/react/refs.js";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { Popover } from "../Popover/Popover.js";
 const Tooltip = ({
   align = "top",
   children,

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

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

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

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps } from './Tooltip';

package/dist/components/typography/Heading/Heading.cjs

@@ -1,8 +1,9 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_typography_Heading_heading_css_cjs = require("./heading.css.cjs");
-const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const heading_css = require("./heading.css.cjs");
+const Box = require("../../layout/Box/Box.cjs");
 const Heading = ({
   className,
   level = 1,
@@ -11,10 +12,10 @@ const Heading = ({
 }) => {
   const Tag = `h${level}`;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    components_layout_Box_Box_cjs.Box,
+    Box.Box,
     {
       asChild: true,
-      className: lib_utils_classnames_cjs.classnames(components_typography_Heading_heading_css_cjs.heading, className),
+      className: classnames.classnames(heading_css.heading, className),
       ...restProps,
       children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
     }

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

@@ -0,0 +1,8 @@
+import { MarginAtoms, PaddingAtoms, TextAtoms } from '../../../lib/css/atoms';
+import { HTMLElementProps } from '../../../lib/utils/utils';
+export type HeadingProps = {
+    children: React.ReactNode;
+    className?: string;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+} & TextAtoms & MarginAtoms & PaddingAtoms & HTMLElementProps<HTMLHeadingElement>;
+export declare const Heading: React.FC<HeadingProps>;

package/dist/components/typography/Heading/{Heading.mjs → Heading.js}

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

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

@@ -1,15 +1,16 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const layers_css = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks");
 const heading = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       margin: 0,
       padding: 0
     }
   }
-}, "heading");
+});
 fileScope.endFileScope();
 exports.heading = heading;

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

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

package/dist/components/typography/Heading/{heading.css.mjs → heading.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
 setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks");
 const heading = style({
   "@layer": {
@@ -9,7 +9,7 @@ const heading = style({
       padding: 0
     }
   }
-}, "heading");
+});
 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/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, {
+        children: React.ReactNode;
+        className?: string;
+        level: 1 | 2 | 3 | 4 | 5 | 6;
+    } & import('../../../lib/css/atoms').TextAtoms & import('../../../lib/css/atoms').MarginAtoms & import('../../../lib/css/atoms').PaddingAtoms & import('../../../lib/utils/utils').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

@@ -1,8 +1,9 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lib_utils_classnames_cjs = require("../../../lib/utils/classnames.cjs");
-const components_typography_Text_text_css_cjs = require("./text.css.cjs");
-const components_layout_Box_Box_cjs = require("../../layout/Box/Box.cjs");
+const classnames = require("../../../lib/utils/classnames.cjs");
+const text_css = require("./text.css.cjs");
+const Box = require("../../layout/Box/Box.cjs");
 const Text = ({
   asChild,
   children,
@@ -12,7 +13,7 @@ const Text = ({
   ...restProps
 }) => {
   const Component = tag ?? "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(components_layout_Box_Box_cjs.Box, { asChild: true, className: lib_utils_classnames_cjs.classnames(components_typography_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : (
+  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { asChild: true, className: classnames.classnames(text_css.text, className), ...restProps, children: asChild ? children : (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, children })
   ) });

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { MarginAtoms, PaddingAtoms, TextAtoms } from '../../../lib/css/atoms';
+import { HTMLElementProps } from '../../../lib/utils/utils';
+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;
+} & TextAtoms & MarginAtoms & PaddingAtoms & 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.mjs → Text.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { classnames } from "../../../lib/utils/classnames.mjs";
-import { text } from "./text.css.mjs";
-import { Box } from "../../layout/Box/Box.mjs";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { text } from "./text.css.js";
+import { Box } from "../../layout/Box/Box.js";
 const Text = ({
   asChild,
   children,

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/index.d.ts

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

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

@@ -1,15 +1,16 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
-const lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+const layers_css = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks");
 const text = css.style({
   "@layer": {
-    [lib_css_layers_layers_css_cjs.blocksLayer]: {
+    [layers_css.blocksLayer]: {
       margin: 0,
       padding: 0
     }
   }
-}, "text");
+});
 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.mjs → text.css.js}

@@ -1,6 +1,6 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
-import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.js";
 setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks");
 const text = style({
   "@layer": {
@@ -9,7 +9,7 @@ const text = style({
       padding: 0
     }
   }
-}, "text");
+});
 endFileScope();
 export {
   text

package/dist/entries/themes/momotaro.d.ts

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

package/dist/hooks/useClickOutside/useClickOutside.cjs

@@ -1,4 +1,6 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   react.useEffect(() => {

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.mjs → useClickOutside.js}

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from "react";
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
   useEffect(() => {

package/dist/hooks/useControlledValue/useControlledValue.cjs

@@ -1,4 +1,6 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 function useControlledValue({
   defaultValue,

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.mjs → useControlledValue.js}

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useCallback, useEffect } from "react";
 function useControlledValue({
   defaultValue,

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

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

package/dist/hooks/useFocusLock/useFocusLock.d.ts

@@ -0,0 +1,6 @@
+type UseFocusLock = {
+    ref: React.RefObject<HTMLElement>;
+    active: boolean;
+};
+export declare const useFocusLock: ({ ref, active }: UseFocusLock) => void;
+export {};

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

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

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs

@@ -1,4 +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.mjs → useIsomorphicLayoutEffect.js}

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

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

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

package/dist/hooks/useKeyboard/useKeyboard.cjs

@@ -1,4 +1,6 @@
+"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(() => {

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.mjs → useKeyboard.js}

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { useEffect } from "react";
 const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
   useEffect(() => {

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

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

package/dist/hooks/useLayer/useLayer.cjs

@@ -1,4 +1,6 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const useLayer = () => {
   const layerRef = react.useRef(null);

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

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

package/dist/hooks/useLayer/{useLayer.mjs → useLayer.js}

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect } from "react";
 const useLayer = () => {
   const layerRef = useRef(null);

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

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

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs

@@ -1,7 +1,8 @@
 "use strict";
-const hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs = require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useIsomorphicLayoutEffect = require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
 const usePreventBodyScroll = (enabled = true) => {
-  hooks_useIsomorphicLayoutEffect_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     if (!enabled) {
       return;
     }

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

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

package/dist/hooks/usePreventBodyScroll/{usePreventBodyScroll.mjs → usePreventBodyScroll.js}

@@ -1,4 +1,4 @@
-import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
 const usePreventBodyScroll = (enabled = true) => {
   useIsomorphicLayoutEffect(() => {
     if (!enabled) {

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

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

package/dist/hooks/useRestoreFocus/useRestoreFocus.cjs

@@ -1,4 +1,6 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const isBrowser = typeof window !== "undefined";
 const useRestoreFocus = (active) => {

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.mjs → useRestoreFocus.js}

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect } from "react";
 const isBrowser = typeof window !== "undefined";
 const useRestoreFocus = (active) => {

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

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

package/dist/hooks/useRootAriaHidden/useRootAriaHidden.cjs

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

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

@@ -0,0 +1,7 @@
+/**
+ * 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.mjs → useRootAriaHidden.js}

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { BlocksProviderContext } from "../../components/other/BlocksProvider/context.mjs";
+import { BlocksProviderContext } from "../../components/other/BlocksProvider/context.js";
 const useRootAriaHidden = (hidden) => {
   const context = useContext(BlocksProviderContext);
   if (!context) {

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

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

package/dist/hooks/useVisibilityState/useVisibilityState.cjs

@@ -1,4 +1,6 @@
+"use client";
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const useVisibilityState = (open) => {
   const [visible, setVisible] = react.useState(open);

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.mjs → useVisibilityState.js}

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useCallback, useEffect } from "react";
 const useVisibilityState = (open) => {
   const [visible, setVisible] = useState(open);