@blockle/blocks 0.19.1 → 0.20.0-alpha1.0

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

@@ -0,0 +1,113 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useLayoutEffect, useEffect, useCallback } from "react";
+import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { classnames } from "../../../lib/utils/classnames.js";
+import { hasAnimationDuration } from "../../../lib/utils/dom.js";
+import { getPopoverPosition } from "./popover-utils.js";
+import { useLayer } from "../../../hooks/useLayer/useLayer.js";
+import { useVisibilityState } from "../../../hooks/useVisibilityState/useVisibilityState.js";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
+import { Portal } from "../../other/Portal/Portal.js";
+import { Box } from "../../layout/Box/Box.js";
+const Popover = ({
+  align = "bottom",
+  anchorElement,
+  children,
+  className,
+  onRequestClose,
+  open,
+  repositionOnScroll,
+  style,
+  ...restProps
+}) => {
+  const layer = useLayer();
+  const [visible, hide] = useVisibilityState(open);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const popoverRef = useRef(null);
+  const containerClassName = getComponentStyles(
+    "popover",
+    { base: true },
+    false
+  );
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const position2 = getPopoverPosition(align, anchorElement, popoverRef);
+    setPosition({ x: position2[0], y: position2[1] });
+  }, [align, anchorElement, visible]);
+  useEffect(() => {
+    if (!open || !repositionOnScroll) {
+      return;
+    }
+    function handleResize() {
+      const position2 = getPopoverPosition(align, anchorElement, popoverRef);
+      setPosition({ x: position2[0], y: position2[1] });
+    }
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleResize);
+    };
+  }, [align, anchorElement, open, repositionOnScroll]);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+    if (!open) {
+      (_a = popoverRef.current) == null ? void 0 : _a.removeAttribute("data-open");
+      return;
+    }
+    let timer = requestAnimationFrame(() => {
+      timer = requestAnimationFrame(() => {
+        var _a2;
+        (_a2 = popoverRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!hasAnimationDuration(popoverRef.current)) {
+      hide();
+    }
+  }, [hide, open]);
+  useKeyboard("Escape", onRequestClose, { enabled: visible });
+  useClickOutside(popoverRef, onRequestClose, { enabled: visible });
+  if (!visible) {
+    return null;
+  }
+  const dataOpen = typeof window === "undefined" && open ? "" : void 0;
+  return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: popoverRef,
+      "data-open": dataOpen,
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      className: classnames(containerClassName, className),
+      position: "absolute",
+      style: {
+        ...style,
+        left: position.x,
+        top: position.y
+      },
+      ...restProps,
+      children
+    }
+  ) });
+};
+export {
+  Popover
+};

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

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

package/dist/components/overlay/Popover/popover-utils.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getPopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
+    return [0, 0];
+  }
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
+  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  let popoverStyles = getComputedStyle(popoverRef.current);
+  const top = popoverStyles.getPropertyValue("top");
+  const left = popoverStyles.getPropertyValue("left");
+  popoverRef.current.style.left = "0";
+  popoverRef.current.style.top = "0";
+  popoverStyles = getComputedStyle(popoverRef.current);
+  const marginTop = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-top")
+  );
+  const marginRight = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-right")
+  );
+  const marginBottom = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-bottom")
+  );
+  const marginLeft = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-left")
+  );
+  const marginY = marginTop + marginBottom;
+  const marginX = marginRight + marginLeft;
+  const docHeight = document.documentElement.clientHeight;
+  const docWidth = document.documentElement.clientWidth;
+  const docScrollTop = document.documentElement.scrollTop;
+  const docScrollLeft = document.documentElement.scrollLeft;
+  const anchorLeft = anchorRect.left + docScrollLeft;
+  const anchorTop = anchorRect.top + docScrollTop;
+  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
+  const leftPosition = anchorRect.left - popoverRect.width;
+  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
+  popoverRef.current.style.transform = "";
+  popoverRef.current.style.transitionDuration = "";
+  popoverRef.current.style.top = top;
+  popoverRef.current.style.left = left;
+  switch (align) {
+    case "top": {
+      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+    }
+    case "bottom": {
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
+    }
+    case "left": {
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+    }
+    case "right": {
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
+    }
+  }
+}
+exports.getPopoverPosition = getPopoverPosition;

package/dist/components/overlay/Popover/popover-utils.d.ts

@@ -0,0 +1,2 @@
+export type PopoverPositions = [x: number, y: number];
+export declare function getPopoverPosition(align: 'top' | 'bottom' | 'left' | 'right', anchorRef: React.RefObject<HTMLElement | null>, popoverRef: React.RefObject<HTMLElement | null>): PopoverPositions;

package/dist/components/overlay/Popover/popover-utils.js

@@ -0,0 +1,62 @@
+function getPopoverPosition(align, anchorRef, popoverRef) {
+  if (!anchorRef.current || !popoverRef.current) {
+    return [0, 0];
+  }
+  popoverRef.current.style.transform = "none";
+  popoverRef.current.style.transitionDuration = "0s";
+  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  let popoverStyles = getComputedStyle(popoverRef.current);
+  const top = popoverStyles.getPropertyValue("top");
+  const left = popoverStyles.getPropertyValue("left");
+  popoverRef.current.style.left = "0";
+  popoverRef.current.style.top = "0";
+  popoverStyles = getComputedStyle(popoverRef.current);
+  const marginTop = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-top")
+  );
+  const marginRight = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-right")
+  );
+  const marginBottom = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-bottom")
+  );
+  const marginLeft = Number.parseFloat(
+    popoverStyles.getPropertyValue("margin-left")
+  );
+  const marginY = marginTop + marginBottom;
+  const marginX = marginRight + marginLeft;
+  const docHeight = document.documentElement.clientHeight;
+  const docWidth = document.documentElement.clientWidth;
+  const docScrollTop = document.documentElement.scrollTop;
+  const docScrollLeft = document.documentElement.scrollLeft;
+  const anchorLeft = anchorRect.left + docScrollLeft;
+  const anchorTop = anchorRect.top + docScrollTop;
+  const topPosition = anchorRect.top - (popoverRect.height + marginTop);
+  const rightPosition = anchorRect.left + anchorRect.width + popoverRect.width;
+  const bottomPosition = anchorRect.top + anchorRect.height + popoverRect.height;
+  const leftPosition = anchorRect.left - popoverRect.width;
+  const offsetX = anchorLeft - marginLeft - (popoverRect.width - anchorRect.width) / 2;
+  const offsetY = anchorTop - marginTop - (popoverRect.height - anchorRect.height) / 2;
+  popoverRef.current.style.transform = "";
+  popoverRef.current.style.transitionDuration = "";
+  popoverRef.current.style.top = top;
+  popoverRef.current.style.left = left;
+  switch (align) {
+    case "top": {
+      return topPosition > 0 ? [offsetX, anchorTop - popoverRect.height - marginY] : [offsetX, anchorTop + anchorRect.height];
+    }
+    case "bottom": {
+      return bottomPosition < docHeight || topPosition < 0 ? [offsetX, anchorTop + anchorRect.height] : [offsetX, anchorTop - popoverRect.height - marginY];
+    }
+    case "left": {
+      return leftPosition > docWidth || leftPosition > 0 ? [anchorLeft - popoverRect.width - marginX, offsetY] : [anchorLeft + anchorRect.width, offsetY];
+    }
+    case "right": {
+      return rightPosition < docWidth || leftPosition < 0 ? [anchorLeft + anchorRect.width, offsetY] : [anchorLeft - popoverRect.width - marginX, offsetY];
+    }
+  }
+}
+export {
+  getPopoverPosition
+};

package/dist/components/overlay/Tooltip/Tooltip.cjs

@@ -0,0 +1,73 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const refs = require("../../../lib/react/refs.cjs");
+const theme = require("../../../lib/theme/store/theme.cjs");
+const Popover = require("../Popover/Popover.cjs");
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
+  const id = react.useId();
+  const ref = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const tooltipClassName = theme.getComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    function onEnter() {
+      setOpen(true);
+    }
+    function onLeave() {
+      setOpen(false);
+    }
+    element.addEventListener("mouseenter", onEnter);
+    element.addEventListener("mouseleave", onLeave);
+    element.addEventListener("focusin", onEnter);
+    element.addEventListener("focusout", onLeave);
+    return () => {
+      element.removeEventListener("mouseenter", onEnter);
+      element.removeEventListener("mouseleave", onLeave);
+      element.removeEventListener("focusin", onEnter);
+      element.removeEventListener("focusout", onLeave);
+    };
+  }, []);
+  if (react.Children.count(children) !== 1) {
+    throw new Error("Tooltip component can only have one child");
+  }
+  const child = react.Children.toArray(children)[0];
+  if (!react.isValidElement(child)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    react.cloneElement(child, {
+      ref: refs.composeRefs(ref, child.ref),
+      ["aria-describedby"]: open ? id : void 0
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        id,
+        role: "tooltip",
+        anchorElement: ref,
+        open,
+        onRequestClose: () => {
+          setOpen(false);
+        },
+        align,
+        className: tooltipClassName,
+        children: label
+      }
+    )
+  ] });
+};
+exports.Tooltip = Tooltip;

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.js

@@ -0,0 +1,73 @@
+"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.js";
+import { getComponentStyles } from "../../../lib/theme/store/theme.js";
+import { Popover } from "../Popover/Popover.js";
+const Tooltip = ({
+  align = "top",
+  children,
+  label,
+  colorScheme
+}) => {
+  const id = useId();
+  const ref = useRef(null);
+  const [open, setOpen] = useState(false);
+  const tooltipClassName = getComponentStyles("tooltip", {
+    base: true,
+    variants: { colorScheme }
+  });
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    function onEnter() {
+      setOpen(true);
+    }
+    function onLeave() {
+      setOpen(false);
+    }
+    element.addEventListener("mouseenter", onEnter);
+    element.addEventListener("mouseleave", onLeave);
+    element.addEventListener("focusin", onEnter);
+    element.addEventListener("focusout", onLeave);
+    return () => {
+      element.removeEventListener("mouseenter", onEnter);
+      element.removeEventListener("mouseleave", onLeave);
+      element.removeEventListener("focusin", onEnter);
+      element.removeEventListener("focusout", onLeave);
+    };
+  }, []);
+  if (Children.count(children) !== 1) {
+    throw new Error("Tooltip component can only have one child");
+  }
+  const child = Children.toArray(children)[0];
+  if (!isValidElement(child)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloneElement(child, {
+      ref: composeRefs(ref, child.ref),
+      ["aria-describedby"]: open ? id : void 0
+    }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id,
+        role: "tooltip",
+        anchorElement: ref,
+        open,
+        onRequestClose: () => {
+          setOpen(false);
+        },
+        align,
+        className: tooltipClassName,
+        children: label
+      }
+    )
+  ] });
+};
+export {
+  Tooltip
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+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,
+  children,
+  ...restProps
+}) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box.Box,
+    {
+      asChild: true,
+      className: classnames.classnames(heading_css.heading, className),
+      ...restProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tag, { children })
+    }
+  );
+};
+exports.Heading = Heading;

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.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+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,
+  children,
+  ...restProps
+}) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      className: classnames(heading, className),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(Tag, { children })
+    }
+  );
+};
+export {
+  Heading
+};

package/dist/{styles/components → 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 styles_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": {
-    [styles_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/{styles/components/typography/Heading/heading.css.mjs → components/typography/Heading/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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+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,
+  className,
+  ref,
+  tag,
+  ...restProps
+}) => {
+  const Component = tag ?? "span";
+  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 })
+  ) });
+};
+exports.Text = Text;

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/{styles/components/typography/Text/Text.mjs → components/typography/Text/Text.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { classnames } from "../../Accessibility/VisuallyHidden/VisuallyHidden.mjs";
-import { text } from "./text.css.mjs";
-import { Box } from "../../display/Divider/Divider.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/{styles/components → 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 styles_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": {
-    [styles_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/{styles/components/typography/Text/text.css.mjs → components/typography/Text/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';