@blockle/blocks 0.7.0 → 0.7.2

package/dist/index.cjs

@@ -5,13 +5,15 @@ const styles_lib_theme_makeComponentTheme_cjs = require("./styles/lib/theme/make
 const styles_lib_theme_makeTheme_cjs = require("./styles/lib/theme/makeTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("./styles/lib/theme/vars.css.cjs");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
-const react = require("react");
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const styles_components_Button_Button_css_cjs = require("./styles/components/Button/Button.css.cjs");
+const styles_components_Checkbox_checkbox_css_cjs = require("./styles/components/Checkbox/checkbox.css.cjs");
 const styles_components_Dialog_dialog_css_cjs = require("./styles/components/Dialog/dialog.css.cjs");
 const reactDom = require("react-dom");
 const styles_components_Divider_divider_css_cjs = require("./styles/components/Divider/divider.css.cjs");
 const styles_components_Input_input_css_cjs = require("./styles/components/Input/input.css.cjs");
+const styles_components_Radio_radio_css_cjs = require("./styles/components/Radio/radio.css.cjs");
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -172,38 +174,45 @@ const Button = react.forwardRef(function Button2({
     }
   );
 });
-const useLayer = () => {
-  const layerRef = react.useRef();
-  react.useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-      }
-    },
-    []
-  );
-  return () => {
-    if (!layerRef.current) {
-      const div = document.createElement("div");
-      div.dataset.layer = "blocks";
-      layerRef.current = div;
-      document.body.append(layerRef.current);
-    }
-    return layerRef.current;
-  };
-};
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = react.useState(open);
-  const hide = react.useCallback(() => {
-    setVisible(false);
-  }, []);
-  react.useEffect(() => {
-    if (open) {
-      setVisible(true);
+const Label = ({
+  visualOnly,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = visualOnly ? "span" : "label";
+  const containerClassName = useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
+      ...restProps,
+      children
     }
-  }, [open]);
-  return [visible, hide];
+  );
 };
+const Checkbox = react.forwardRef(function Checkbox2({ name, label, required, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("checkbox", { base: true }, false);
+  const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classnames(styles_components_Checkbox_checkbox_css_cjs.container, containerClassName, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "checkbox", name, className: styles_components_Checkbox_checkbox_css_cjs.input, ...restProps }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames(styles_components_Checkbox_checkbox_css_cjs.icon, iconClassName) })
+  ] });
+  if (!label) {
+    return input;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
+    input,
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { visualOnly: true, required, children: label })
+  ] });
+});
 const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const getFirstFocusableElement = (container) => {
   const focusable = container.querySelector(focusableSelectors);
@@ -231,7 +240,38 @@ const useFocusLock = ({ ref, active }) => {
     };
   }, [active]);
 };
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+const useLayer = () => {
+  const layerRef = react.useRef();
+  react.useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+      }
+    },
+    []
+  );
+  return () => {
+    if (!layerRef.current) {
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  };
+};
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    const prevValue = document.body.style.getPropertyValue("overflow");
+    if (enabled) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = prevValue;
+    };
+  }, [enabled]);
+};
 const useRestoreFocus = (active) => {
   const [target, setTarget] = react.useState(null);
   useIsomorphicLayoutEffect(() => {
@@ -245,6 +285,25 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = react.useState(open);
+  const hide = react.useCallback(() => {
+    setVisible(false);
+  }, []);
+  react.useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+const Portal = ({ children, container }) => {
+  const context = useTheme();
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(BlocksProvider, { theme: context, children }),
+    container || document.body
+  );
+};
 const DialogContext = react.createContext(void 0);
 const useNestedDialog = (open) => {
   const parentDialog = react.useContext(DialogContext);
@@ -259,24 +318,6 @@ const useNestedDialog = (open) => {
   }, [parentDialog, open]);
   return !!parentDialog;
 };
-const usePreventBodyScroll = (enabled = true) => {
-  useIsomorphicLayoutEffect(() => {
-    const prevValue = document.body.style.getPropertyValue("overflow");
-    if (enabled) {
-      document.body.style.overflow = "hidden";
-    }
-    return () => {
-      document.body.style.overflow = prevValue;
-    };
-  }, [enabled]);
-};
-const Portal = ({ children, container }) => {
-  const context = useTheme();
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(BlocksProvider, { theme: context, children }),
-    container || document.body
-  );
-};
 const Dialog = ({
   children,
   open,
@@ -456,29 +497,6 @@ const Input = react.forwardRef(function Input2({ className, name, type = "text",
     endSlot
   ] }) });
 });
-const Label = ({
-  visualOnly,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = visualOnly ? "span" : "label";
-  const containerClassName = useComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      className: classnames(containerClassName, className, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
 const defaultElement = "a";
 const Link = react.forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
   const Component = as || defaultElement;
@@ -488,6 +506,22 @@ const Link = react.forwardRef(function Link2({ as, className, variant, underline
   });
   return /* @__PURE__ */ jsxRuntime.jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
 });
+const Radio = react.forwardRef(function Checkbox3({ name, label, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("radio", { base: true }, false);
+  const iconClassName = useComponentStyles("radio", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classnames(styles_components_Radio_radio_css_cjs.container, containerClassName, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "radio", name, className: styles_components_Radio_radio_css_cjs.input, ...restProps }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classnames(styles_components_Radio_radio_css_cjs.icon, iconClassName) })
+  ] });
+  if (!label) {
+    return input;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
+    input,
+    label && /* @__PURE__ */ jsxRuntime.jsx(Label, { visualOnly: true, children: label })
+  ] });
+});
 const Stack = ({
   as = "div",
   display = "flex",
@@ -546,6 +580,7 @@ exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.BlocksProvider = BlocksProvider;
 exports.Box = Box;
 exports.Button = Button;
+exports.Checkbox = Checkbox;
 exports.Dialog = Dialog;
 exports.Divider = Divider;
 exports.Heading = Heading;
@@ -553,6 +588,8 @@ exports.Inline = Inline;
 exports.Input = Input;
 exports.Label = Label;
 exports.Link = Link;
+exports.Portal = Portal;
+exports.Radio = Radio;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
 exports.Text = Text;

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Radio, RadioProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, useComponentStyleDefaultProps, useComponentStyles, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -5,13 +5,15 @@ import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
 import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
-import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useEffect, useRef, useLayoutEffect, useState, useCallback, useId } from "react";
 import { buttonReset } from "./styles/components/Button/Button.css.mjs";
+import { container, input, icon } from "./styles/components/Checkbox/checkbox.css.mjs";
 import { backdropLeaveAnimation, backdropLeave, backdrop, dialogLeave, dialog } from "./styles/components/Dialog/dialog.css.mjs";
 import { createPortal } from "react-dom";
 import { divider } from "./styles/components/Divider/divider.css.mjs";
-import { input } from "./styles/components/Input/input.css.mjs";
+import { input as input$1 } from "./styles/components/Input/input.css.mjs";
+import { container as container$1, input as input$2, icon as icon$1 } from "./styles/components/Radio/radio.css.mjs";
 const classnames = (...args) => {
   const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
   return className || void 0;
@@ -172,45 +174,52 @@ const Button = forwardRef(function Button2({
     }
   );
 });
-const useLayer = () => {
-  const layerRef = useRef();
-  useEffect(
-    () => () => {
-      if (layerRef.current) {
-        layerRef.current.remove();
-      }
-    },
-    []
-  );
-  return () => {
-    if (!layerRef.current) {
-      const div = document.createElement("div");
-      div.dataset.layer = "blocks";
-      layerRef.current = div;
-      document.body.append(layerRef.current);
-    }
-    return layerRef.current;
-  };
-};
-const useVisibilityState = (open) => {
-  const [visible, setVisible] = useState(open);
-  const hide = useCallback(() => {
-    setVisible(false);
-  }, []);
-  useEffect(() => {
-    if (open) {
-      setVisible(true);
+const Label = ({
+  visualOnly,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = visualOnly ? "span" : "label";
+  const containerClassName = useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classnames(containerClassName, className, atoms({ cursor })),
+      ...restProps,
+      children
     }
-  }, [open]);
-  return [visible, hide];
+  );
 };
+const Checkbox = forwardRef(function Checkbox2({ name, label, required, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("checkbox", { base: true }, false);
+  const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input$12 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "checkbox", name, className: input, ...restProps }),
+    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
+  ] });
+  if (!label) {
+    return input$12;
+  }
+  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+    input$12,
+    label && /* @__PURE__ */ jsx(Label, { visualOnly: true, required, children: label })
+  ] });
+});
 const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
+const getFirstFocusableElement = (container2) => {
+  const focusable = container2.querySelector(focusableSelectors);
   return focusable || null;
 };
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
+const focusFirstElement = (container2) => {
+  const focusable = getFirstFocusableElement(container2);
   if (focusable) {
     focusable.focus();
   }
@@ -231,7 +240,38 @@ const useFocusLock = ({ ref, active }) => {
     };
   }, [active]);
 };
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const useLayer = () => {
+  const layerRef = useRef();
+  useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+      }
+    },
+    []
+  );
+  return () => {
+    if (!layerRef.current) {
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  };
+};
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    const prevValue = document.body.style.getPropertyValue("overflow");
+    if (enabled) {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.overflow = prevValue;
+    };
+  }, [enabled]);
+};
 const useRestoreFocus = (active) => {
   const [target, setTarget] = useState(null);
   useIsomorphicLayoutEffect(() => {
@@ -245,6 +285,25 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = useState(open);
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+const Portal = ({ children, container: container2 }) => {
+  const context = useTheme();
+  return createPortal(
+    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
+    container2 || document.body
+  );
+};
 const DialogContext = createContext(void 0);
 const useNestedDialog = (open) => {
   const parentDialog = useContext(DialogContext);
@@ -259,24 +318,6 @@ const useNestedDialog = (open) => {
   }, [parentDialog, open]);
   return !!parentDialog;
 };
-const usePreventBodyScroll = (enabled = true) => {
-  useIsomorphicLayoutEffect(() => {
-    const prevValue = document.body.style.getPropertyValue("overflow");
-    if (enabled) {
-      document.body.style.overflow = "hidden";
-    }
-    return () => {
-      document.body.style.overflow = prevValue;
-    };
-  }, [enabled]);
-};
-const Portal = ({ children, container }) => {
-  const context = useTheme();
-  return createPortal(
-    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
-    container || document.body
-  );
-};
 const Dialog = ({
   children,
   open,
@@ -449,36 +490,13 @@ const Input = forwardRef(function Input2({ className, name, type = "text", start
         placeholder: placeholder || label,
         width: "full",
         overflow: "hidden",
-        className: classnames(input, inputClassName),
+        className: classnames(input$1, inputClassName),
         ...restProps
       }
     ),
     endSlot
   ] }) });
 });
-const Label = ({
-  visualOnly,
-  children,
-  className,
-  required,
-  size,
-  cursor,
-  ...restProps
-}) => {
-  const Component = visualOnly ? "span" : "label";
-  const containerClassName = useComponentStyles("label", {
-    base: true,
-    variants: { required, size }
-  });
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: classnames(containerClassName, className, atoms({ cursor })),
-      ...restProps,
-      children
-    }
-  );
-};
 const defaultElement = "a";
 const Link = forwardRef(function Link2({ as, className, variant, underline, ...restProps }, ref) {
   const Component = as || defaultElement;
@@ -488,6 +506,22 @@ const Link = forwardRef(function Link2({ as, className, variant, underline, ...r
   });
   return /* @__PURE__ */ jsx(Box, { ref, as: Component, className: classnames(className, linkClassName), ...restProps });
 });
+const Radio = forwardRef(function Checkbox3({ name, label, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("radio", { base: true }, false);
+  const iconClassName = useComponentStyles("radio", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input2 = /* @__PURE__ */ jsxs("div", { className: classnames(container$1, containerClassName, className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "radio", name, className: input$2, ...restProps }),
+    /* @__PURE__ */ jsx("div", { className: classnames(icon$1, iconClassName) })
+  ] });
+  if (!label) {
+    return input2;
+  }
+  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+    input2,
+    label && /* @__PURE__ */ jsx(Label, { visualOnly: true, children: label })
+  ] });
+});
 const Stack = ({
   as = "div",
   display = "flex",
@@ -542,6 +576,7 @@ export {
   BlocksProvider,
   Box,
   Button,
+  Checkbox,
   Dialog,
   Divider,
   Heading,
@@ -549,6 +584,8 @@ export {
   Input,
   Label,
   Link,
+  Portal,
+  Radio,
   Spinner,
   Stack,
   Text,

package/dist/momotaro.chunk.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
 import * as react from 'react';
-import { HTMLProps, ReactNode, FC } from 'react';
+import react__default from 'react';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 
 declare const atoms: ((props: {
@@ -545,10 +545,10 @@ type BoxProps = {
 type PolymorphicBox = ForwardRefComponent<'div', BoxProps>;
 declare const Box: PolymorphicBox;
 
-type HTMLElementProps<E extends Element> = Omit<HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
+type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
 
 type ButtonProps = {
-    children: ReactNode;
+    children: React.ReactNode;
     type?: 'button' | 'submit' | 'reset';
     variant?: ButtonTheme['variants']['variant'];
     intent?: ButtonTheme['variants']['intent'];
@@ -556,12 +556,12 @@ type ButtonProps = {
     width?: Atoms['width'];
     alignSelf?: Atoms['alignSelf'];
     loading?: boolean;
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
+    startSlot?: React.ReactNode;
+    endSlot?: React.ReactNode;
     disabled?: boolean;
 } & Omit<HTMLElementProps<HTMLButtonElement>, 'size'>;
 declare const Button: react.ForwardRefExoticComponent<{
-    children: ReactNode;
+    children: React.ReactNode;
     type?: "button" | "submit" | "reset" | undefined;
     variant?: "outline" | "solid" | "ghost" | undefined;
     intent?: "danger" | "neutral" | undefined;
@@ -569,27 +569,38 @@ declare const Button: react.ForwardRefExoticComponent<{
     width?: Atoms['width'];
     alignSelf?: Atoms['alignSelf'];
     loading?: boolean | undefined;
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
+    startSlot?: React.ReactNode;
+    endSlot?: React.ReactNode;
     disabled?: boolean | undefined;
 } & Omit<HTMLElementProps<HTMLButtonElement>, "size"> & react.RefAttributes<HTMLButtonElement>>;
 
+type CheckboxProps = {
+    name: string;
+    label?: react__default.ReactNode;
+    required?: boolean;
+} & HTMLElementProps<HTMLInputElement>;
+declare const Checkbox: react__default.ForwardRefExoticComponent<{
+    name: string;
+    label?: react__default.ReactNode;
+    required?: boolean | undefined;
+} & HTMLElementProps<HTMLInputElement> & react__default.RefAttributes<HTMLInputElement>>;
+
 type DialogProps = {
-    children?: ReactNode;
+    children?: React.ReactNode;
     open: boolean;
     onRequestClose: () => void;
     className?: string;
     size?: DialogTheme['variants']['size'];
     'aria-label'?: string;
 };
-declare const Dialog: FC<DialogProps>;
+declare const Dialog: React.FC<DialogProps>;
 
 type DividerProps = {
     className?: string;
     color?: Atoms['backgroundColor'];
     style?: React.CSSProperties;
 };
-declare const Divider: FC<DividerProps>;
+declare const Divider: React.FC<DividerProps>;
 
 type HeadingProps = {
     align?: Atoms['textAlign'];
@@ -634,16 +645,16 @@ type InputProps = {
     className?: string;
     name: string;
     type?: OptionalLiteral<'email' | 'number' | 'password' | 'tel' | 'text' | 'url'>;
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
+    startSlot?: React.ReactNode;
+    endSlot?: React.ReactNode;
     label: string;
 } & Omit<HTMLElementProps<HTMLInputElement>, 'type'>;
 declare const Input: react.ForwardRefExoticComponent<{
     className?: string | undefined;
     name: string;
     type?: OptionalLiteral<"number" | "text" | "tel" | "url" | "email" | "password"> | undefined;
-    startSlot?: ReactNode;
-    endSlot?: ReactNode;
+    startSlot?: React.ReactNode;
+    endSlot?: React.ReactNode;
     label: string;
 } & Omit<HTMLElementProps<HTMLInputElement>, "type"> & react.RefAttributes<HTMLInputElement>>;
 
@@ -658,20 +669,37 @@ type LabelProps = {
 declare const Label: React.FC<LabelProps>;
 
 type LinkProps = {
-    children?: ReactNode;
+    children?: React.ReactNode;
     underline?: LinkTheme['variants']['underline'];
     variant?: LinkTheme['variants']['variant'];
 } & Atoms & HTMLElementProps<HTMLAnchorElement>;
 type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
 declare const Link: PolymorphicLink;
 
+type PortalProps = {
+    children: React.ReactNode;
+    container?: HTMLElement;
+};
+declare const Portal: React.FC<PortalProps>;
+
+type RadioProps = {
+    name: string;
+    value: string;
+    label?: React.ReactNode;
+} & HTMLElementProps<HTMLInputElement>;
+declare const Radio: react.ForwardRefExoticComponent<{
+    name: string;
+    value: string;
+    label?: React.ReactNode;
+} & HTMLElementProps<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
+
 type SpinnerProps = {
     className?: string;
     color?: SpinnerTheme['variants']['color'];
     size?: SpinnerTheme['variants']['size'];
     style?: React.CSSProperties;
 } & MarginAtoms;
-declare const Spinner: FC<SpinnerProps>;
+declare const Spinner: React.FC<SpinnerProps>;
 
 type StackProps = {
     alignX?: keyof AlignItemsMap;
@@ -719,4 +747,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: Theme;
 
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Radio, RadioProps, Spinner, SpinnerProps, Stack, StackProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, makeComponentTheme, makeTheme, momotaro, useComponentStyleDefaultProps, useComponentStyles, vars };

package/dist/styles/components/Checkbox/checkbox.css.cjs

@@ -0,0 +1,31 @@
+"use strict";
+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");
+fileScope.setFileScope("src/components/Checkbox/checkbox.css.ts?used", "blocks");
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = css.style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = css.style({
+  pointerEvents: "none"
+}, "icon");
+fileScope.endFileScope();
+exports.container = container;
+exports.icon = icon;
+exports.input = input;

package/dist/styles/components/Checkbox/checkbox.css.mjs

@@ -0,0 +1,32 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Checkbox/checkbox.css.ts?used", "blocks");
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = style({
+  pointerEvents: "none"
+}, "icon");
+endFileScope();
+export {
+  container,
+  icon,
+  input
+};

package/dist/styles/components/Radio/radio.css.cjs

@@ -0,0 +1,31 @@
+"use strict";
+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");
+fileScope.setFileScope("src/components/Radio/radio.css.ts?used", "blocks");
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = css.style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = css.style({
+  pointerEvents: "none"
+}, "icon");
+fileScope.endFileScope();
+exports.container = container;
+exports.icon = icon;
+exports.input = input;

package/dist/styles/components/Radio/radio.css.mjs

@@ -0,0 +1,32 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/Radio/radio.css.ts?used", "blocks");
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = style({
+  pointerEvents: "none"
+}, "icon");
+endFileScope();
+export {
+  container,
+  icon,
+  input
+};

package/dist/styles/lib/theme/tokens.cjs

@@ -2,6 +2,7 @@
 const tokens = {
   typography: {
     fontFamily: {
+      body: "Roboto, sans-serif",
       primary: "Roboto, sans-serif",
       secondary: "Roboto, sans-serif"
     },

package/dist/styles/lib/theme/tokens.mjs

@@ -1,6 +1,7 @@
 const tokens = {
   typography: {
     fontFamily: {
+      body: "Roboto, sans-serif",
       primary: "Roboto, sans-serif",
       secondary: "Roboto, sans-serif"
     },

package/dist/styles/themes/momotaro/components/helpers.css.cjs

@@ -11,11 +11,12 @@ const focusable = css.style({
     transitionDuration: styles_lib_theme_vars_css_cjs.vars.transition.fast,
     transitionProperty: "box-shadow"
   },
-  ":disabled": {
-    opacity: 0.5,
-    cursor: "auto"
-  },
   selectors: {
+    "&:disabled, &[disabled]": {
+      opacity: 0.5,
+      cursor: "auto",
+      pointerEvents: "none"
+    },
     "&:has(input:focus-visible)": {
       outline: "2px solid transparent",
       outlineOffset: "2px",

package/dist/styles/themes/momotaro/components/helpers.css.mjs

@@ -10,11 +10,12 @@ const focusable = style({
     transitionDuration: vars.transition.fast,
     transitionProperty: "box-shadow"
   },
-  ":disabled": {
-    opacity: 0.5,
-    cursor: "auto"
-  },
   selectors: {
+    "&:disabled, &[disabled]": {
+      opacity: 0.5,
+      cursor: "auto",
+      pointerEvents: "none"
+    },
     "&:has(input:focus-visible)": {
       outline: "2px solid transparent",
       outlineOffset: "2px",

package/dist/styles/themes/momotaro/tokens.css.cjs

@@ -55,6 +55,7 @@ const tokens = {
   },
   typography: {
     fontFamily: {
+      body: '"Rubik", sans-serif',
       primary: '"Rubik", sans-serif',
       secondary: '"Rubik", sans-serif'
     },

package/dist/styles/themes/momotaro/tokens.css.mjs

@@ -54,6 +54,7 @@ const tokens = {
   },
   typography: {
     fontFamily: {
+      body: '"Rubik", sans-serif',
       primary: '"Rubik", sans-serif',
       secondary: '"Rubik", sans-serif'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "build-storybook": "storybook build",
     "coverage": "vitest run --coverage",
     "fix": "crackle fix",
-    "lint": "eslint . --resolve-plugins-relative-to /Users/niek/Projects/blockle/blocks/",
+    "lint": "eslint .",
     "storybook": "storybook dev -p 6006 --no-open",
     "test": "vitest",
     "ts": "tsc --noemit --project ./tsconfig.json",
@@ -71,19 +71,19 @@
     "@storybook/react": "^7.3.1",
     "@storybook/react-vite": "^7.3.1",
     "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.11",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
     "@vanilla-extract/vite-plugin": "^3.8.2",
     "@vitest/coverage-v8": "^0.34.6",
     "cross-env": "^7.0.3",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.4.2",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",