@arolariu/components 0.0.37 → 0.0.38

package/src/hooks/use-mobile.tsx

@@ -1,19 +1,44 @@
-import * as React from "react"
+import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
 
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+/**
+ * A custom React hook that detects whether the current device is a mobile device
+ * based on the screen width.
+ *
+ * This hook uses a media query to check if the viewport width is less than the defined
+ * mobile breakpoint (768px). It updates the state when the window size changes.
+ *
+ * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,
+ *                   false otherwise.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isMobile = useIsMobile();
+ *
+ *   return (
+ *     <div>
+ *       {isMobile ? 'Mobile View' : 'Desktop View'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
 
-  return !!isMobile
+  return !!isMobile;
 }

package/src/index.ts

@@ -383,3 +383,18 @@ export { DotBackground } from "./components/ui/dot-background";
 
 // Aceternity UI exports:
 export { BackgroundBeams } from "./components/ui/background-beams";
+
+// Jia Wei Ng export (https://github.com/jiaweing/DropDrawer):
+export {
+  DropDrawer,
+  DropDrawerContent,
+  DropDrawerFooter,
+  DropDrawerGroup,
+  DropDrawerItem,
+  DropDrawerLabel,
+  DropDrawerSeparator,
+  DropDrawerSub,
+  DropDrawerSubContent,
+  DropDrawerSubTrigger,
+  DropDrawerTrigger,
+} from "./components/ui/dropdrawer";

package/tsconfig.json

@@ -1,50 +1,50 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noImplicitAny": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noErrorTruncation": true,
-    "noImplicitOverride": true,
-    "noImplicitReturns": true,
-    "noUnusedParameters": false,
-    "noFallthroughCasesInSwitch": true,
-    "useUnknownInCatchVariables": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "allowUnreachableCode": false,
-    "allowImportingTsExtensions": false,
-    "allowArbitraryExtensions": true,
-    "diagnostics": true,
-    "extendedDiagnostics": true,
-    "pretty": true,
-    "resolvePackageJsonExports": true,
-    "resolvePackageJsonImports": true,
-    "removeComments": false,
-    "allowUnusedLabels": false,
-    "declaration": true,
-    "sourceMap": true,
-    "declarationDir": "dist/types",
-    "emitDeclarationOnly": true,
-    "outDir": "dist",
-    "rootDir": "src",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "types": ["@types/node", "@types/react", "@types/react-dom"],
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "**/*.{test,stories}.{ts,tsx}"]
-}
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noErrorTruncation": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "useUnknownInCatchVariables": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "allowUnreachableCode": false,
+    "allowImportingTsExtensions": false,
+    "allowArbitraryExtensions": true,
+    "diagnostics": true,
+    "extendedDiagnostics": true,
+    "pretty": true,
+    "resolvePackageJsonExports": true,
+    "resolvePackageJsonImports": true,
+    "removeComments": false,
+    "allowUnusedLabels": false,
+    "declaration": true,
+    "sourceMap": true,
+    "declarationDir": "dist/types",
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["@types/node", "@types/react", "@types/react-dom"],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.{test,stories}.{ts,tsx}"]
+}