@codefast/ui 0.0.43 → 0.0.45

package/package.json

@@ -1,326 +1,341 @@
 {
   "name": "@codefast/ui",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"
   ],
   "exports": {
-    "./radio-cards": {
-      "types": "./src/react/radio-cards.tsx",
-      "import": "./dist/react/radio-cards.mjs",
-      "require": "./dist/react/radio-cards.js"
+    "./accordion": {
+      "types": "./src/react/accordion.tsx",
+      "import": "./dist/react/accordion.mjs",
+      "require": "./dist/react/accordion.js"
     },
-    "./spinner": {
-      "types": "./src/react/spinner.tsx",
-      "import": "./dist/react/spinner.mjs",
-      "require": "./dist/react/spinner.js"
+    "./alert": {
+      "types": "./src/react/alert.tsx",
+      "import": "./dist/react/alert.mjs",
+      "require": "./dist/react/alert.js"
     },
-    "./radio": {
-      "types": "./src/react/radio.tsx",
-      "import": "./dist/react/radio.mjs",
-      "require": "./dist/react/radio.js"
+    "./alert-dialog": {
+      "types": "./src/react/alert-dialog.tsx",
+      "import": "./dist/react/alert-dialog.mjs",
+      "require": "./dist/react/alert-dialog.js"
     },
-    "./checkbox-cards": {
-      "types": "./src/react/checkbox-cards.tsx",
-      "import": "./dist/react/checkbox-cards.mjs",
-      "require": "./dist/react/checkbox-cards.js"
+    "./aspect-ratio": {
+      "types": "./src/react/aspect-ratio.tsx",
+      "import": "./dist/react/aspect-ratio.mjs",
+      "require": "./dist/react/aspect-ratio.js"
     },
-    "./checkbox-group": {
-      "types": "./src/react/checkbox-group.tsx",
-      "import": "./dist/react/checkbox-group.mjs",
-      "require": "./dist/react/checkbox-group.js"
+    "./avatar": {
+      "types": "./src/react/avatar.tsx",
+      "import": "./dist/react/avatar.mjs",
+      "require": "./dist/react/avatar.js"
     },
-    "./container": {
-      "types": "./src/react/container.tsx",
-      "import": "./dist/react/container.mjs",
-      "require": "./dist/react/container.js"
+    "./badge": {
+      "types": "./src/react/badge.tsx",
+      "import": "./dist/react/badge.mjs",
+      "require": "./dist/react/badge.js"
     },
-    "./section": {
-      "types": "./src/react/section.tsx",
-      "import": "./dist/react/section.mjs",
-      "require": "./dist/react/section.js"
+    "./blockquote": {
+      "types": "./src/react/blockquote.tsx",
+      "import": "./dist/react/blockquote.mjs",
+      "require": "./dist/react/blockquote.js"
     },
     "./box": {
       "types": "./src/react/box.tsx",
       "import": "./dist/react/box.mjs",
       "require": "./dist/react/box.js"
     },
-    "./strong": {
-      "types": "./src/react/strong.tsx",
-      "import": "./dist/react/strong.mjs",
-      "require": "./dist/react/strong.js"
+    "./breadcrumb": {
+      "types": "./src/react/breadcrumb.tsx",
+      "import": "./dist/react/breadcrumb.mjs",
+      "require": "./dist/react/breadcrumb.js"
     },
-    "./quote": {
-      "types": "./src/react/quote.tsx",
-      "import": "./dist/react/quote.mjs",
-      "require": "./dist/react/quote.js"
+    "./button": {
+      "types": "./src/react/button.tsx",
+      "import": "./dist/react/button.mjs",
+      "require": "./dist/react/button.js"
     },
-    "./blockquote": {
-      "types": "./src/react/blockquote.tsx",
-      "import": "./dist/react/blockquote.mjs",
-      "require": "./dist/react/blockquote.js"
+    "./calendar": {
+      "types": "./src/react/calendar.tsx",
+      "import": "./dist/react/calendar.mjs",
+      "require": "./dist/react/calendar.js"
     },
-    "./kbd": {
-      "types": "./src/react/kbd.tsx",
-      "import": "./dist/react/kbd.mjs",
-      "require": "./dist/react/kbd.js"
+    "./card": {
+      "types": "./src/react/card.tsx",
+      "import": "./dist/react/card.mjs",
+      "require": "./dist/react/card.js"
     },
-    "./em": {
-      "types": "./src/react/em.tsx",
-      "import": "./dist/react/em.mjs",
-      "require": "./dist/react/em.js"
+    "./carousel": {
+      "types": "./src/react/carousel.tsx",
+      "import": "./dist/react/carousel.mjs",
+      "require": "./dist/react/carousel.js"
+    },
+    "./checkbox": {
+      "types": "./src/react/checkbox.tsx",
+      "import": "./dist/react/checkbox.mjs",
+      "require": "./dist/react/checkbox.js"
+    },
+    "./checkbox-cards": {
+      "types": "./src/react/checkbox-cards.tsx",
+      "import": "./dist/react/checkbox-cards.mjs",
+      "require": "./dist/react/checkbox-cards.js"
+    },
+    "./checkbox-group": {
+      "types": "./src/react/checkbox-group.tsx",
+      "import": "./dist/react/checkbox-group.mjs",
+      "require": "./dist/react/checkbox-group.js"
     },
     "./code": {
       "types": "./src/react/code.tsx",
       "import": "./dist/react/code.mjs",
       "require": "./dist/react/code.js"
     },
-    "./pre": {
-      "types": "./src/react/pre.tsx",
-      "import": "./dist/react/pre.mjs",
-      "require": "./dist/react/pre.js"
+    "./collapsible": {
+      "types": "./src/react/collapsible.tsx",
+      "import": "./dist/react/collapsible.mjs",
+      "require": "./dist/react/collapsible.js"
     },
-    "./heading": {
-      "types": "./src/react/heading.tsx",
-      "import": "./dist/react/heading.mjs",
-      "require": "./dist/react/heading.js"
+    "./command": {
+      "types": "./src/react/command.tsx",
+      "import": "./dist/react/command.mjs",
+      "require": "./dist/react/command.js"
     },
-    "./text": {
-      "types": "./src/react/text.tsx",
-      "import": "./dist/react/text.mjs",
-      "require": "./dist/react/text.js"
+    "./container": {
+      "types": "./src/react/container.tsx",
+      "import": "./dist/react/container.mjs",
+      "require": "./dist/react/container.js"
+    },
+    "./context-menu": {
+      "types": "./src/react/context-menu.tsx",
+      "import": "./dist/react/context-menu.mjs",
+      "require": "./dist/react/context-menu.js"
     },
     "./data-table": {
       "types": "./src/react/data-table.tsx",
       "import": "./dist/react/data-table.mjs",
       "require": "./dist/react/data-table.js"
     },
-    "./form": {
-      "types": "./src/react/form.tsx",
-      "import": "./dist/react/form.mjs",
-      "require": "./dist/react/form.js"
-    },
-    "./tooltip": {
-      "types": "./src/react/tooltip.tsx",
-      "import": "./dist/react/tooltip.mjs",
-      "require": "./dist/react/tooltip.js"
-    },
-    "./toggle-group": {
-      "types": "./src/react/toggle-group.tsx",
-      "import": "./dist/react/toggle-group.mjs",
-      "require": "./dist/react/toggle-group.js"
-    },
-    "./toggle": {
-      "types": "./src/react/toggle.tsx",
-      "import": "./dist/react/toggle.mjs",
-      "require": "./dist/react/toggle.js"
-    },
-    "./textarea": {
-      "types": "./src/react/textarea.tsx",
-      "import": "./dist/react/textarea.mjs",
-      "require": "./dist/react/textarea.js"
+    "./dialog": {
+      "types": "./src/react/dialog.tsx",
+      "import": "./dist/react/dialog.mjs",
+      "require": "./dist/react/dialog.js"
     },
-    "./tabs": {
-      "types": "./src/react/tabs.tsx",
-      "import": "./dist/react/tabs.mjs",
-      "require": "./dist/react/tabs.js"
+    "./drawer": {
+      "types": "./src/react/drawer.tsx",
+      "import": "./dist/react/drawer.mjs",
+      "require": "./dist/react/drawer.js"
     },
-    "./table": {
-      "types": "./src/react/table.tsx",
-      "import": "./dist/react/table.mjs",
-      "require": "./dist/react/table.js"
+    "./dropdown-menu": {
+      "types": "./src/react/dropdown-menu.tsx",
+      "import": "./dist/react/dropdown-menu.mjs",
+      "require": "./dist/react/dropdown-menu.js"
     },
-    "./switch": {
-      "types": "./src/react/switch.tsx",
-      "import": "./dist/react/switch.mjs",
-      "require": "./dist/react/switch.js"
+    "./em": {
+      "types": "./src/react/em.tsx",
+      "import": "./dist/react/em.mjs",
+      "require": "./dist/react/em.js"
     },
-    "./sonner": {
-      "types": "./src/react/sonner.tsx",
-      "import": "./dist/react/sonner.mjs",
-      "require": "./dist/react/sonner.js"
+    "./form": {
+      "types": "./src/react/form.tsx",
+      "import": "./dist/react/form.mjs",
+      "require": "./dist/react/form.js"
     },
-    "./slider": {
-      "types": "./src/react/slider.tsx",
-      "import": "./dist/react/slider.mjs",
-      "require": "./dist/react/slider.js"
+    "./heading": {
+      "types": "./src/react/heading.tsx",
+      "import": "./dist/react/heading.mjs",
+      "require": "./dist/react/heading.js"
     },
-    "./skeleton": {
-      "types": "./src/react/skeleton.tsx",
-      "import": "./dist/react/skeleton.mjs",
-      "require": "./dist/react/skeleton.js"
+    "./hover-card": {
+      "types": "./src/react/hover-card.tsx",
+      "import": "./dist/react/hover-card.mjs",
+      "require": "./dist/react/hover-card.js"
     },
-    "./sheet": {
-      "types": "./src/react/sheet.tsx",
-      "import": "./dist/react/sheet.mjs",
-      "require": "./dist/react/sheet.js"
+    "./input": {
+      "types": "./src/react/input.tsx",
+      "import": "./dist/react/input.mjs",
+      "require": "./dist/react/input.js"
     },
-    "./separator": {
-      "types": "./src/react/separator.tsx",
-      "import": "./dist/react/separator.mjs",
-      "require": "./dist/react/separator.js"
+    "./input-otp": {
+      "types": "./src/react/input-otp.tsx",
+      "import": "./dist/react/input-otp.mjs",
+      "require": "./dist/react/input-otp.js"
     },
-    "./select": {
-      "types": "./src/react/select.tsx",
-      "import": "./dist/react/select.mjs",
-      "require": "./dist/react/select.js"
+    "./kbd": {
+      "types": "./src/react/kbd.tsx",
+      "import": "./dist/react/kbd.mjs",
+      "require": "./dist/react/kbd.js"
     },
-    "./scroll-area": {
-      "types": "./src/react/scroll-area.tsx",
-      "import": "./dist/react/scroll-area.mjs",
-      "require": "./dist/react/scroll-area.js"
+    "./label": {
+      "types": "./src/react/label.tsx",
+      "import": "./dist/react/label.mjs",
+      "require": "./dist/react/label.js"
     },
-    "./resizable": {
-      "types": "./src/react/resizable.tsx",
-      "import": "./dist/react/resizable.mjs",
-      "require": "./dist/react/resizable.js"
+    "./menubar": {
+      "types": "./src/react/menubar.tsx",
+      "import": "./dist/react/menubar.mjs",
+      "require": "./dist/react/menubar.js"
     },
-    "./radio-group": {
-      "types": "./src/react/radio-group.tsx",
-      "import": "./dist/react/radio-group.mjs",
-      "require": "./dist/react/radio-group.js"
+    "./navigation-menu": {
+      "types": "./src/react/navigation-menu.tsx",
+      "import": "./dist/react/navigation-menu.mjs",
+      "require": "./dist/react/navigation-menu.js"
     },
-    "./progress": {
-      "types": "./src/react/progress.tsx",
-      "import": "./dist/react/progress.mjs",
-      "require": "./dist/react/progress.js"
+    "./pagination": {
+      "types": "./src/react/pagination.tsx",
+      "import": "./dist/react/pagination.mjs",
+      "require": "./dist/react/pagination.js"
     },
     "./popover": {
       "types": "./src/react/popover.tsx",
       "import": "./dist/react/popover.mjs",
       "require": "./dist/react/popover.js"
     },
-    "./pagination": {
-      "types": "./src/react/pagination.tsx",
-      "import": "./dist/react/pagination.mjs",
-      "require": "./dist/react/pagination.js"
+    "./progress": {
+      "types": "./src/react/progress.tsx",
+      "import": "./dist/react/progress.mjs",
+      "require": "./dist/react/progress.js"
     },
-    "./navigation-menu": {
-      "types": "./src/react/navigation-menu.tsx",
-      "import": "./dist/react/navigation-menu.mjs",
-      "require": "./dist/react/navigation-menu.js"
+    "./pre": {
+      "types": "./src/react/pre.tsx",
+      "import": "./dist/react/pre.mjs",
+      "require": "./dist/react/pre.js"
     },
-    "./menubar": {
-      "types": "./src/react/menubar.tsx",
-      "import": "./dist/react/menubar.mjs",
-      "require": "./dist/react/menubar.js"
+    "./quote": {
+      "types": "./src/react/quote.tsx",
+      "import": "./dist/react/quote.mjs",
+      "require": "./dist/react/quote.js"
     },
-    "./label": {
-      "types": "./src/react/label.tsx",
-      "import": "./dist/react/label.mjs",
-      "require": "./dist/react/label.js"
+    "./radio": {
+      "types": "./src/react/radio.tsx",
+      "import": "./dist/react/radio.mjs",
+      "require": "./dist/react/radio.js"
     },
-    "./input-otp": {
-      "types": "./src/react/input-otp.tsx",
-      "import": "./dist/react/input-otp.mjs",
-      "require": "./dist/react/input-otp.js"
+    "./radio-cards": {
+      "types": "./src/react/radio-cards.tsx",
+      "import": "./dist/react/radio-cards.mjs",
+      "require": "./dist/react/radio-cards.js"
     },
-    "./input": {
-      "types": "./src/react/input.tsx",
-      "import": "./dist/react/input.mjs",
-      "require": "./dist/react/input.js"
+    "./radio-group": {
+      "types": "./src/react/radio-group.tsx",
+      "import": "./dist/react/radio-group.mjs",
+      "require": "./dist/react/radio-group.js"
     },
-    "./hover-card": {
-      "types": "./src/react/hover-card.tsx",
-      "import": "./dist/react/hover-card.mjs",
-      "require": "./dist/react/hover-card.js"
+    "./resizable": {
+      "types": "./src/react/resizable.tsx",
+      "import": "./dist/react/resizable.mjs",
+      "require": "./dist/react/resizable.js"
     },
-    "./drawer": {
-      "types": "./src/react/drawer.tsx",
-      "import": "./dist/react/drawer.mjs",
-      "require": "./dist/react/drawer.js"
+    "./scroll-area": {
+      "types": "./src/react/scroll-area.tsx",
+      "import": "./dist/react/scroll-area.mjs",
+      "require": "./dist/react/scroll-area.js"
     },
-    "./context-menu": {
-      "types": "./src/react/context-menu.tsx",
-      "import": "./dist/react/context-menu.mjs",
-      "require": "./dist/react/context-menu.js"
+    "./section": {
+      "types": "./src/react/section.tsx",
+      "import": "./dist/react/section.mjs",
+      "require": "./dist/react/section.js"
     },
-    "./dialog": {
-      "types": "./src/react/dialog.tsx",
-      "import": "./dist/react/dialog.mjs",
-      "require": "./dist/react/dialog.js"
+    "./select": {
+      "types": "./src/react/select.tsx",
+      "import": "./dist/react/select.mjs",
+      "require": "./dist/react/select.js"
     },
-    "./command": {
-      "types": "./src/react/command.tsx",
-      "import": "./dist/react/command.mjs",
-      "require": "./dist/react/command.js"
+    "./separator": {
+      "types": "./src/react/separator.tsx",
+      "import": "./dist/react/separator.mjs",
+      "require": "./dist/react/separator.js"
     },
-    "./collapsible": {
-      "types": "./src/react/collapsible.tsx",
-      "import": "./dist/react/collapsible.mjs",
-      "require": "./dist/react/collapsible.js"
+    "./sheet": {
+      "types": "./src/react/sheet.tsx",
+      "import": "./dist/react/sheet.mjs",
+      "require": "./dist/react/sheet.js"
     },
-    "./checkbox": {
-      "types": "./src/react/checkbox.tsx",
-      "import": "./dist/react/checkbox.mjs",
-      "require": "./dist/react/checkbox.js"
+    "./skeleton": {
+      "types": "./src/react/skeleton.tsx",
+      "import": "./dist/react/skeleton.mjs",
+      "require": "./dist/react/skeleton.js"
     },
-    "./carousel": {
-      "types": "./src/react/carousel.tsx",
-      "import": "./dist/react/carousel.mjs",
-      "require": "./dist/react/carousel.js"
+    "./slider": {
+      "types": "./src/react/slider.tsx",
+      "import": "./dist/react/slider.mjs",
+      "require": "./dist/react/slider.js"
     },
-    "./card": {
-      "types": "./src/react/card.tsx",
-      "import": "./dist/react/card.mjs",
-      "require": "./dist/react/card.js"
+    "./sonner": {
+      "types": "./src/react/sonner.tsx",
+      "import": "./dist/react/sonner.mjs",
+      "require": "./dist/react/sonner.js"
     },
-    "./calendar": {
-      "types": "./src/react/calendar.tsx",
-      "import": "./dist/react/calendar.mjs",
-      "require": "./dist/react/calendar.js"
+    "./spinner": {
+      "types": "./src/react/spinner.tsx",
+      "import": "./dist/react/spinner.mjs",
+      "require": "./dist/react/spinner.js"
     },
-    "./accordion": {
-      "types": "./src/react/accordion.tsx",
-      "import": "./dist/react/accordion.mjs",
-      "require": "./dist/react/accordion.js"
+    "./strong": {
+      "types": "./src/react/strong.tsx",
+      "import": "./dist/react/strong.mjs",
+      "require": "./dist/react/strong.js"
     },
-    "./avatar": {
-      "types": "./src/react/avatar.tsx",
-      "import": "./dist/react/avatar.mjs",
-      "require": "./dist/react/avatar.js"
+    "./switch": {
+      "types": "./src/react/switch.tsx",
+      "import": "./dist/react/switch.mjs",
+      "require": "./dist/react/switch.js"
     },
-    "./aspect-ratio": {
-      "types": "./src/react/aspect-ratio.tsx",
-      "import": "./dist/react/aspect-ratio.mjs",
-      "require": "./dist/react/aspect-ratio.js"
+    "./table": {
+      "types": "./src/react/table.tsx",
+      "import": "./dist/react/table.mjs",
+      "require": "./dist/react/table.js"
     },
-    "./alert-dialog": {
-      "types": "./src/react/alert-dialog.tsx",
-      "import": "./dist/react/alert-dialog.mjs",
-      "require": "./dist/react/alert-dialog.js"
+    "./tabs": {
+      "types": "./src/react/tabs.tsx",
+      "import": "./dist/react/tabs.mjs",
+      "require": "./dist/react/tabs.js"
     },
-    "./dropdown-menu": {
-      "types": "./src/react/dropdown-menu.tsx",
-      "import": "./dist/react/dropdown-menu.mjs",
-      "require": "./dist/react/dropdown-menu.js"
+    "./text": {
+      "types": "./src/react/text.tsx",
+      "import": "./dist/react/text.mjs",
+      "require": "./dist/react/text.js"
     },
-    "./breadcrumb": {
-      "types": "./src/react/breadcrumb.tsx",
-      "import": "./dist/react/breadcrumb.mjs",
-      "require": "./dist/react/breadcrumb.js"
+    "./textarea": {
+      "types": "./src/react/textarea.tsx",
+      "import": "./dist/react/textarea.mjs",
+      "require": "./dist/react/textarea.js"
     },
-    "./badge": {
-      "types": "./src/react/badge.tsx",
-      "import": "./dist/react/badge.mjs",
-      "require": "./dist/react/badge.js"
+    "./toggle": {
+      "types": "./src/react/toggle.tsx",
+      "import": "./dist/react/toggle.mjs",
+      "require": "./dist/react/toggle.js"
     },
-    "./alert": {
-      "types": "./src/react/alert.tsx",
-      "import": "./dist/react/alert.mjs",
-      "require": "./dist/react/alert.js"
+    "./toggle-group": {
+      "types": "./src/react/toggle-group.tsx",
+      "import": "./dist/react/toggle-group.mjs",
+      "require": "./dist/react/toggle-group.js"
     },
-    "./button": {
-      "types": "./src/react/button.tsx",
-      "import": "./dist/react/button.mjs",
-      "require": "./dist/react/button.js"
+    "./tooltip": {
+      "types": "./src/react/tooltip.tsx",
+      "import": "./dist/react/tooltip.mjs",
+      "require": "./dist/react/tooltip.js"
     },
     "./utils": {
       "types": "./src/lib/utils.ts",
       "import": "./dist/lib/utils.mjs",
       "require": "./dist/lib/utils.js"
     },
+    "./colors": {
+      "types": "./src/lib/colors.ts",
+      "import": "./dist/lib/colors.mjs",
+      "require": "./dist/lib/colors.js"
+    },
+    "./use-media-query": {
+      "types": "./src/hooks/use-media-query.ts",
+      "import": "./dist/hooks/use-media-query.mjs",
+      "require": "./dist/hooks/use-media-query.js"
+    },
+    "./use-mutation-observer": {
+      "types": "./src/hooks/use-mutation-observer.ts",
+      "import": "./dist/hooks/use-mutation-observer.mjs",
+      "require": "./dist/hooks/use-mutation-observer.js"
+    },
     "./tailwind.config": {
       "types": "./tailwind.config.ts",
       "import": "./dist/tailwind.config.mjs",

package/src/hooks/use-media-query.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [value, setValue] = React.useState(false);
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent): void {
+      setValue(event.matches);
+    }
+
+    const result = matchMedia(query);
+    result.addEventListener('change', onChange);
+    setValue(result.matches);
+
+    return () => {
+      result.removeEventListener('change', onChange);
+    };
+  }, [query]);
+
+  return value;
+}

package/src/hooks/use-mutation-observer.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export const useMutationObserver = (
+  ref: React.MutableRefObject<HTMLElement | null>,
+  callback: MutationCallback,
+  options: MutationObserverInit = {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  },
+): void => {
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const observer = new MutationObserver(callback);
+    observer.observe(ref.current, options);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, callback, options]);
+};