@blockle/blocks 0.7.1 → 0.7.2

package/dist/index.cjs

@@ -213,38 +213,6 @@ const Checkbox = react.forwardRef(function Checkbox2({ name, label, required, cl
     label && /* @__PURE__ */ jsxRuntime.jsx(Label, { visualOnly: true, required, children: label })
   ] });
 });
-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);
-    }
-  }, [open]);
-  return [visible, hide];
-};
 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);
@@ -272,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(() => {
@@ -286,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);
@@ -300,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,

package/dist/index.mjs

@@ -6,7 +6,7 @@ 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 { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useId } from "react";
+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";
@@ -213,38 +213,6 @@ const Checkbox = forwardRef(function Checkbox2({ name, label, required, classNam
     label && /* @__PURE__ */ jsx(Label, { visualOnly: true, required, children: label })
   ] });
 });
-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);
-    }
-  }, [open]);
-  return [visible, hide];
-};
 const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const getFirstFocusableElement = (container2) => {
   const focusable = container2.querySelector(focusableSelectors);
@@ -272,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(() => {
@@ -286,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);
@@ -300,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: container2 }) => {
-  const context = useTheme();
-  return createPortal(
-    /* @__PURE__ */ jsx(BlocksProvider, { theme: context, children }),
-    container2 || document.body
-  );
-};
 const Dialog = ({
   children,
   open,

package/dist/momotaro.chunk.d.ts

@@ -1,6 +1,6 @@
 import { ForwardRefComponent } from '@radix-ui/react-polymorphic';
 import * as react from 'react';
-import react__default, { 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,8 +569,8 @@ 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>>;
 
@@ -586,21 +586,21 @@ declare const Checkbox: react__default.ForwardRefExoticComponent<{
 } & 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'];
@@ -645,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>>;
 
@@ -669,7 +669,7 @@ 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>;
@@ -677,10 +677,10 @@ type PolymorphicLink = ForwardRefComponent<'a', LinkProps>;
 declare const Link: PolymorphicLink;
 
 type PortalProps = {
-    children: ReactNode;
+    children: React.ReactNode;
     container?: HTMLElement;
 };
-declare const Portal: FC<PortalProps>;
+declare const Portal: React.FC<PortalProps>;
 
 type RadioProps = {
     name: string;
@@ -699,7 +699,7 @@ type SpinnerProps = {
     size?: SpinnerTheme['variants']['size'];
     style?: React.CSSProperties;
 } & MarginAtoms;
-declare const Spinner: FC<SpinnerProps>;
+declare const Spinner: React.FC<SpinnerProps>;
 
 type StackProps = {
     alignX?: keyof AlignItemsMap;

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.1",
+  "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",