Add JSR support

jsr.jsonc

@@ -0,0 +1,23 @@
+{
+ "name": "@bureaudouble/vaul",
+ "version": "0.0.3",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "lib": [
+ "es2022",
+ "dom",
+ "dom.iterable",
+ "dom.asynciterable"
+ ]
+ },
+ "exclude": ["**/*", "!README.md", "!LICENSE.md", "!src", "!jsr.jsonc"],
+ "imports": {
+ "react": "npm:react@^18.2.0",
+ "react-style-singleton": "jsr:@bureaudouble-forks/react-style-singleton@^0.0.1",
+ "@radix-ui/react-dialog": "jsr:@radix-ui-fork/react-dialog@^0.0.7"
+ },
+ "exports": {
+ ".": "./src/index.tsx"
+ }
+}
+

package.json

@@ -63,6 +63,7 @@
  },
  "packageManager": "[email protected]",
  "dependencies": {
+ "react-style-singleton": "^2.2.1",
  "@radix-ui/react-dialog": "^1.0.4"
  }
 }

src/context.ts

@@ -1,5 +1,6 @@
+// @deno-types="npm:@types/react@^18.2.0"
 import React from 'react';
-import { DrawerDirection } from './types';
+import { DrawerDirection } from './types.ts';
 
 interface DrawerContextValue {
  drawerRef: React.RefObject<HTMLDivElement>;

src/helpers.ts

@@ -1,4 +1,4 @@
-import { DrawerDirection } from './types';
+import { DrawerDirection } from './types.ts';
 
 interface Style {
  [key: string]: string;

src/index.tsx

@@ -1,16 +1,18 @@
 'use client';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+// @deno-types="npm:@types/react@^18.2.0"
 import React from 'react';
-import { DrawerContext, useDrawerContext } from './context';
-import './style.css';
-import { usePreventScroll, isInput, isIOS } from './use-prevent-scroll';
-import { useComposedRefs } from './use-composed-refs';
-import { usePositionFixed } from './use-position-fixed';
-import { useSnapPoints } from './use-snap-points';
-import { set, reset, getTranslate, dampenValue, isVertical } from './helpers';
-import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
-import { DrawerDirection } from './types';
+import { styleHookSingleton } from 'react-style-singleton';
+import style from "./style.ts";
+import { DrawerContext, useDrawerContext } from './context.ts';
+import { usePreventScroll, isInput, isIOS } from './use-prevent-scroll.ts';
+import { useComposedRefs } from './use-composed-refs.ts';
+import { usePositionFixed } from './use-position-fixed.ts';
+import { useSnapPoints } from './use-snap-points.ts';
+import { set, reset, getTranslate, dampenValue, isVertical } from './helpers.ts';
+import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants.ts';
+import { DrawerDirection } from './types.ts';
 
 const CLOSE_THRESHOLD = 0.25;
 
@@ -55,6 +57,8 @@ type DialogProps = {
  disablePreventScroll?: boolean;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
+const useStyle: ReturnType<typeof styleHookSingleton> = styleHookSingleton();
+
 function Root({
  open: openProp,
  onOpenChange,
@@ -76,7 +80,8 @@ function Root({
  direction = 'bottom',
  preventScrollRestoration = true,
  disablePreventScroll = false,
-}: DialogProps) {
+}: DialogProps): React.JSX.Element {
+ useStyle(style);
  const [isOpen = false, setIsOpen] = React.useState<boolean>(false);
  const [hasBeenOpened, setHasBeenOpened] = React.useState<boolean>(false);
  // Not visible = translateY(100%)
@@ -760,7 +765,8 @@ function Root({
  );
 }
 
-const Overlay = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>(
+const Overlay: React.ForwardRefExoticComponent<Omit<typeof DialogPrimitive.Overlay, "ref"> & React.RefAttributes<HTMLDivElement>> = 
+React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>(
  function ({ children, ...rest }, ref) {
  const { overlayRef, snapPoints, onRelease, shouldFade, isOpen, visible } = useDrawerContext();
  const composedRef = useComposedRefs(ref, overlayRef);
@@ -786,7 +792,8 @@ type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Conten
  onAnimationEnd?: (open: boolean) => void;
 };
 
-const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
+const Content: React.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>
+= React.forwardRef<HTMLDivElement, ContentProps>(function (
  { onOpenAutoFocus, onPointerDownOutside, onAnimationEnd, style, ...rest },
  ref,
 ) {
@@ -901,7 +908,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
 
 Content.displayName = 'Drawer.Content';
 
-function NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps) {
+function NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps): React.JSX.Element {
  const { onNestedDrag, onNestedOpenChange, onNestedRelease } = useDrawerContext();
 
  if (!onNestedDrag) {

src/style.css → src/style.ts

@@ -1,3 +1,4 @@
+const style: string = /* css */`
 [vaul-drawer] {
  touch-action: none;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
@@ -113,3 +114,6 @@
  to {
  }
 }
+`;
+
+export default style;

src/use-composed-refs.ts

@@ -1,5 +1,6 @@
 // This code comes from https://github.com/radix-ui/primitives/tree/main/packages/react/compose-refs
 
+// @deno-types="npm:@types/react@^18.2.0"
 import * as React from 'react';
 
 type PossibleRef<T> = React.Ref<T> | undefined;

src/use-controllable-state.ts

@@ -1,5 +1,6 @@
 // This code comes from https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
 
+// @deno-types="npm:@types/react@^18.2.0"
 import React from 'react';
 
 type UseControllableStateParams<T> = {

src/use-position-fixed.ts

@@ -1,3 +1,4 @@
+// @deno-types="npm:@types/react@^18.2.0"
 import React from 'react';
 
 let previousBodyPosition: Record<string, string> | null = null;

src/use-prevent-scroll.ts

@@ -1,5 +1,6 @@
 // This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
 
+// @deno-types="npm:@types/react@^18.2.0"
 import { useEffect, useLayoutEffect } from 'react';
 
 export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

src/use-snap-points.ts

@@ -1,8 +1,9 @@
+// @deno-types="npm:@types/react@^18.2.0"
 import React from 'react';
-import { set, isVertical } from './helpers';
-import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
-import { useControllableState } from './use-controllable-state';
-import { DrawerDirection } from './types';
+import { set, isVertical } from './helpers.ts';
+import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants.ts';
+import { useControllableState } from './use-controllable-state.ts';
+import { DrawerDirection } from './types.ts';
 
 export function useSnapPoints({
  activeSnapPointProp,