components.json

@@ -12,14 +12,16 @@
     },
     "iconLibrary": "lucide",
     "rtl": false,
-    "aliases": {
-        "components": "@/ui/components",
-        "ui": "@/ui/components/shadcn",
-        "lib": "@/ui/components/shadcn/lib",
-        "utils": "@/ui/components/shadcn/lib/utils",
-        "hooks": "@/ui/hooks"
-    },
     "menuColor": "default",
     "menuAccent": "subtle",
-    "registries": {}
+    "aliases": {
+        "components": "@/ui/components",
+        "utils": "@/ui/components/shadcn/lib/utils",
+        "ui": "@/ui/components/shadcn",
+        "lib": "@/ui/components/shadcn/lib",
+        "hooks": "@/ui/hooks"
+    },
+    "registries": {
+        "@diceui": "https://diceui.com/r/{name}.json"
+    }
 }

src/ui/hooks/use-as-ref.ts

@@ -0,0 +1,14 @@
+import { useIsomorphicLayoutEffect } from '@/ui/hooks/use-isomorphic-layout-effect';
+import * as React from 'react';
+
+function useAsRef<T>(props: T) {
+    const ref = React.useRef<T>(props);
+
+    useIsomorphicLayoutEffect(() => {
+        ref.current = props;
+    });
+
+    return ref;
+}
+
+export { useAsRef };

src/ui/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+const useIsomorphicLayoutEffect =
+    typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+export { useIsomorphicLayoutEffect };

src/ui/hooks/use-lazy-ref.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+function useLazyRef<T>(fn: () => T) {
+    const ref = React.useRef<T | null>(null);
+
+    if (ref.current === null) {
+        ref.current = fn();
+    }
+
+    return ref as React.RefObject<T>;
+}
+
+export { useLazyRef };