@majapisoftwares/ui 4.1.17 → 4.3.0

package/components/NavigationDrawer/NavigationItem.jsx

@@ -18,7 +18,7 @@ export default function NavigationItem({ icon, children, href, exact, alternativ
     return (<Button variant={active ? "light" : "text"} color={active ? "primary" : "default"} className={clsx("w-full justify-start border-transparent", className)} leading={icon &&
             cloneElement(icon, {
                 className: clsx(icon.props?.className, "w-5! mr-3"),
-            })} href={href} onClick={isMobile ? navigationDrawerState.close : undefined} disabled={disabled}>
-      {children}
+            })} href={href} onClick={isMobile ? navigationDrawerState.close : undefined} disabled={disabled}>
+      {children}
     </Button>);
 }

package/components/NoSsr/NoSsr.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export default function NoSsr({ children }: {
     children: ReactNode;
 }): React.JSX.Element | null;

package/components/Notifications/Notifications.jsx

@@ -4,7 +4,7 @@ import notificationsState from "./notifications.state";
 import { CheckCircleIcon, ExclamationCircleIcon, } from "@heroicons/react/24/outline";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 import Button from "../Button";
-import { cloneElement, useEffect } from "react";
+import { cloneElement, useEffect, } from "react";
 import clsx from "../../utils/clsx";
 export default function Notifications({ notificationClassName, }) {
     const { notifications, remove, setRendered } = useSnapshot(notificationsState);
@@ -14,8 +14,8 @@ export default function Notifications({ notificationClassName, }) {
             setRendered(false);
         };
     }, [setRendered]);
-    return (<ul id="ui-notifications" className="pointer-events-none fixed inset-0 z-30 flex flex-col items-center justify-end gap-3 px-4 py-6 sm:items-end sm:justify-start sm:p-6">
-      <AnimatePresence initial={false}>
+    return (<ul id="ui-notifications" className="pointer-events-none fixed inset-0 z-30 flex flex-col items-center justify-end gap-3 px-4 py-6 sm:items-end sm:justify-start sm:p-6">
+      <AnimatePresence initial={false}>
         {notifications.map(({ _id, dismissable, title, message, icon, actions, style, className, }) => {
             const iconChild = (typeof icon === "string"
                 ? {
@@ -24,37 +24,37 @@ export default function Notifications({ notificationClassName, }) {
                 }[icon]
                 : icon);
             // noinspection SuspiciousTypeOfGuard
-            return (<motion.li key={_id} layout initial={{ opacity: 0, y: 50, scale: 0.3 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }} className={clsx("pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10", notificationClassName, className)} style={style}>
-                <div className="p-4">
-                  <div className="flex items-start">
-                    {iconChild && (<div className="mr-2 shrink-0">
+            return (<motion.li key={_id} layout initial={{ opacity: 0, y: 50, scale: 0.3 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }} className={clsx("pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10", notificationClassName, className)} style={style}>
+                <div className="p-4">
+                  <div className="flex items-start">
+                    {iconChild && (<div className="mr-2 shrink-0">
                         {cloneElement(iconChild, {
                         className: clsx("h-6 w-6 text-zinc-400 dark:text-zinc-600", iconChild.props?.className),
                         "aria-hidden": "true",
-                    })}
-                      </div>)}
-                    <div className="ml-1 w-0 flex-1 pt-0.5">
-                      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
-                        {title || message}
-                      </p>
-                      {title && message && (<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
-                          {message}
-                        </p>)}
-                      {actions && (<div className="-m-3 mt-0 flex">
-                          {actions}
-                        </div>)}
-                    </div>
-                    {dismissable && (<div className="ml-4 flex shrink-0">
+                    })}
+                      </div>)}
+                    <div className="ml-1 w-0 flex-1 pt-0.5">
+                      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                        {title || message}
+                      </p>
+                      {title && message && (<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+                          {message}
+                        </p>)}
+                      {actions && (<div className="-m-3 mt-0 flex">
+                          {actions}
+                        </div>)}
+                    </div>
+                    {dismissable && (<div className="ml-4 flex shrink-0">
                         <Button icon onClick={() => {
                         remove(_id);
-                    }} className="h-5 w-5 p-0!" variant="text">
-                          <XMarkIcon className="h-5 w-5 text-zinc-400" aria-label="Close"/>
-                        </Button>
-                      </div>)}
-                  </div>
-                </div>
+                    }} className="h-5 w-5 p-0!" variant="text">
+                          <XMarkIcon className="h-5 w-5 text-zinc-400" aria-label="Close"/>
+                        </Button>
+                      </div>)}
+                  </div>
+                </div>
               </motion.li>);
-        })}
-      </AnimatePresence>
+        })}
+      </AnimatePresence>
     </ul>);
 }

package/components/Notifications/notifications.state.d.ts

@@ -1,5 +1,5 @@
-import { StringValue } from "ms";
-import { CSSProperties, ReactElement, ReactNode } from "react";
+import { type StringValue } from "ms";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
 type Notification = {
     _id: string;
     message: string | ReactElement;

package/components/Notifications/notifications.state.js

@@ -1,6 +1,6 @@
 import { proxy, ref } from "valtio";
 import isomorphicObjectId from "@majapisoftwares/next/utils/isomorphicObjectId";
-import ms from "ms";
+import ms, {} from "ms";
 const notificationsState = proxy({
     rendered: false,
     setRendered(rendered) {

package/components/Pagination/Pagination.jsx

@@ -1,5 +1,5 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, } from "react";
 import clsx from "../../utils/clsx";
 import { range } from "lodash-es";
 import UnstyledButton from "../Button/UnstyledButton";
@@ -46,19 +46,19 @@ export default function Pagination({ totalItems, itemsPerPage, currentPage, onCh
         e.preventDefault();
         setPage(page);
     }, []);
-    return (<nav className={clsx("ui-pagination", className)} aria-label={paginationText}>
-      <UnstyledButton disabled={page === 1} onClick={handlePageClick(page - 1)} href={page !== 1 && pageHref ? pageHref(page - 1) : undefined}>
-        <span className="sr-only">{previousText}</span>
-        <ChevronLeftIcon className="h-5 w-5" aria-hidden="true"/>
-      </UnstyledButton>
-      {pages.map((p) => typeof p === "number" ? (<UnstyledButton key={p} onClick={handlePageClick(p)} data-active={page === p ? "" : undefined} href={pageHref ? pageHref(p) : undefined}>
-            {p}
-          </UnstyledButton>) : (<button key={p} disabled>
-            ...
-          </button>))}
-      <UnstyledButton disabled={page === pageCount} onClick={handlePageClick(page + 1)} href={page !== pageCount && pageHref ? pageHref(page + 1) : undefined}>
-        <span className="sr-only">{nextText}</span>
-        <ChevronRightIcon className="h-5 w-5" aria-hidden="true"/>
-      </UnstyledButton>
+    return (<nav className={clsx("ui-pagination", className)} aria-label={paginationText}>
+      <UnstyledButton disabled={page === 1} onClick={handlePageClick(page - 1)} href={page !== 1 && pageHref ? pageHref(page - 1) : undefined}>
+        <span className="sr-only">{previousText}</span>
+        <ChevronLeftIcon className="h-5 w-5" aria-hidden="true"/>
+      </UnstyledButton>
+      {pages.map((p) => typeof p === "number" ? (<UnstyledButton key={p} onClick={handlePageClick(p)} data-active={page === p ? "" : undefined} href={pageHref ? pageHref(p) : undefined}>
+            {p}
+          </UnstyledButton>) : (<button key={p} disabled>
+            ...
+          </button>))}
+      <UnstyledButton disabled={page === pageCount} onClick={handlePageClick(page + 1)} href={page !== pageCount && pageHref ? pageHref(page + 1) : undefined}>
+        <span className="sr-only">{nextText}</span>
+        <ChevronRightIcon className="h-5 w-5" aria-hidden="true"/>
+      </UnstyledButton>
     </nav>);
 }

package/components/Particles/Particles.jsx

@@ -15,62 +15,62 @@ const hexToRgb = (hex) => {
     const b = (int & 255) / 255;
     return [r, g, b];
 };
-const vertex = /* glsl */ `
-  attribute vec3 position;
-  attribute vec4 random;
-  attribute vec3 color;
-  
-  uniform mat4 modelMatrix;
-  uniform mat4 viewMatrix;
-  uniform mat4 projectionMatrix;
-  uniform float uTime;
-  uniform float uSpread;
-  uniform float uBaseSize;
-  uniform float uSizeRandomness;
-  
-  varying vec4 vRandom;
-  varying vec3 vColor;
-  
-  void main() {
-    vRandom = random;
-    vColor = color;
-    
-    vec3 pos = position * uSpread;
-    pos.z *= 10.0;
-    
-    vec4 mPos = modelMatrix * vec4(pos, 1.0);
-    float t = uTime;
-    mPos.x += sin(t * random.z + 6.28 * random.w) * mix(0.1, 1.5, random.x);
-    mPos.y += sin(t * random.y + 6.28 * random.x) * mix(0.1, 1.5, random.w);
-    mPos.z += sin(t * random.w + 6.28 * random.y) * mix(0.1, 1.5, random.z);
-    
-    vec4 mvPos = viewMatrix * mPos;
-    gl_PointSize = (uBaseSize * (1.0 + uSizeRandomness * (random.x - 0.5))) / length(mvPos.xyz);
-    gl_Position = projectionMatrix * mvPos;
-  }
+const vertex = /* glsl */ `
+  attribute vec3 position;
+  attribute vec4 random;
+  attribute vec3 color;
+  
+  uniform mat4 modelMatrix;
+  uniform mat4 viewMatrix;
+  uniform mat4 projectionMatrix;
+  uniform float uTime;
+  uniform float uSpread;
+  uniform float uBaseSize;
+  uniform float uSizeRandomness;
+  
+  varying vec4 vRandom;
+  varying vec3 vColor;
+  
+  void main() {
+    vRandom = random;
+    vColor = color;
+    
+    vec3 pos = position * uSpread;
+    pos.z *= 10.0;
+    
+    vec4 mPos = modelMatrix * vec4(pos, 1.0);
+    float t = uTime;
+    mPos.x += sin(t * random.z + 6.28 * random.w) * mix(0.1, 1.5, random.x);
+    mPos.y += sin(t * random.y + 6.28 * random.x) * mix(0.1, 1.5, random.w);
+    mPos.z += sin(t * random.w + 6.28 * random.y) * mix(0.1, 1.5, random.z);
+    
+    vec4 mvPos = viewMatrix * mPos;
+    gl_PointSize = (uBaseSize * (1.0 + uSizeRandomness * (random.x - 0.5))) / length(mvPos.xyz);
+    gl_Position = projectionMatrix * mvPos;
+  }
 `;
-const fragment = /* glsl */ `
-  precision highp float;
-  
-  uniform float uTime;
-  uniform float uAlphaParticles;
-  varying vec4 vRandom;
-  varying vec3 vColor;
-  
-  void main() {
-    vec2 uv = gl_PointCoord.xy;
-    float d = length(uv - vec2(0.5));
-    
-    if(uAlphaParticles < 0.5) {
-      if(d > 0.5) {
-        discard;
-      }
-      gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), 1.0);
-    } else {
-      float circle = smoothstep(0.5, 0.4, d) * 0.8;
-      gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), circle);
-    }
-  }
+const fragment = /* glsl */ `
+  precision highp float;
+  
+  uniform float uTime;
+  uniform float uAlphaParticles;
+  varying vec4 vRandom;
+  varying vec3 vColor;
+  
+  void main() {
+    vec2 uv = gl_PointCoord.xy;
+    float d = length(uv - vec2(0.5));
+    
+    if(uAlphaParticles < 0.5) {
+      if(d > 0.5) {
+        discard;
+      }
+      gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), 1.0);
+    } else {
+      float circle = smoothstep(0.5, 0.4, d) * 0.8;
+      gl_FragColor = vec4(vColor + 0.2 * sin(uv.yxx + uTime + vRandom.y * 6.28), circle);
+    }
+  }
 `;
 const Particles = ({ particleCount = 200, particleSpread = 10, speed = 0.1, particleColors, moveParticlesOnHover = false, particleHoverFactor = 1, alphaParticles = false, particleBaseSize = 100, sizeRandomness = 1, cameraDistance = 20, disableRotation = false, className, useWindowMouseMove = false, }) => {
     const containerRef = useRef(null);

package/components/PictureCropInput/PictureCropInput.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from "react";
-import { PixelCrop } from "react-image-crop";
+import { type RefObject } from "react";
+import { type PixelCrop } from "react-image-crop";
 export type PictureCropInputRef = {
     handleCrop: () => Promise<void>;
     completedCrop: PixelCrop | undefined;

package/components/PictureCropInput/PictureCropInput.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useId, useRef, useState, } from "react";
-import ReactCrop from "react-image-crop";
+import ReactCrop, {} from "react-image-crop";
 import useDebounceEffect from "../../hooks/useDebounceEffect";
 import { canvasPreview } from "./canvasPreview";
 import Skeleton from "../Skeleton";
@@ -103,51 +103,51 @@ export default function PictureCropInput({ value, onChange, loading, className,
         setCrop(undefined);
         setSrc(undefined);
     }, []);
-    return (<div ref={parentRef} className={clsx("flex gap-2", className)}>
-      {loading && <Skeleton className={previewSizeClassNames}/>}
-      {src && (<>
-          <ReactCrop crop={crop} onChange={(c) => setCrop(c)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect} minWidth={50 * aspect} minHeight={50 * aspect} className="max-h-96 max-w-96" keepSelection>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
+    return (<div ref={parentRef} className={clsx("flex gap-2", className)}>
+      {loading && <Skeleton className={previewSizeClassNames}/>}
+      {src && (<>
+          <ReactCrop crop={crop} onChange={(c) => setCrop(c)} onComplete={(c) => setCompletedCrop(c)} aspect={aspect} minWidth={50 * aspect} minHeight={50 * aspect} className="max-h-96 max-w-96" keepSelection>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
             <img alt="Picture" src={src} 
         // className="h-96 w-96 object-contain"
-        ref={imgRef}/>
-          </ReactCrop>
-          {completedCrop && (<div className={clsx("flex flex-col gap-2", previewContainerClassName)}>
+        ref={imgRef}/>
+          </ReactCrop>
+          {completedCrop && (<div className={clsx("flex flex-col gap-2", previewContainerClassName)}>
               <canvas ref={previewCanvasRef} className={previewSizeClassNames} style={{
                     objectFit: "cover",
-                }}/>
-              <div className="flex gap-2">
-                <Button onClick={handleCrop} className={clsx("w-full", cropButtonClassName)} leading={<CheckIcon />}>
-                  Crop
-                </Button>
-                <Tooltip content="Clear">
-                  <Button onClick={handleClear} variant="text" icon>
-                    <TrashIcon />
-                  </Button>
-                </Tooltip>
-              </div>
-            </div>)}
-        </>)}
-      {!src && (<>
+                }}/>
+              <div className="flex gap-2">
+                <Button onClick={handleCrop} className={clsx("w-full", cropButtonClassName)} leading={<CheckIcon />}>
+                  Crop
+                </Button>
+                <Tooltip content="Clear">
+                  <Button onClick={handleClear} variant="text" icon>
+                    <TrashIcon />
+                  </Button>
+                </Tooltip>
+              </div>
+            </div>)}
+        </>)}
+      {!src && (<>
           {value && (<div className={clsx("flex shrink-0 rounded-sm", previewSizeClassNames)} style={{
                     background: value
                         ? `center / cover url(${value})`
                         : undefined,
-                }}/>)}
-          <input type="file" id={id} className="hidden" onChange={onFileSelect} accept=".jpg,.jpeg,.png"/>
-          <Button variant="outlined" className="mb-auto flex items-center gap-3 p-2" onClick={() => document.getElementById(id)?.click()}>
-            <div className="flex h-12 w-12 items-center justify-center rounded-sm border border-zinc-800 p-3">
-              <PhotoIcon />
-            </div>
-            <div className="flex flex-col items-start gap-1.5">
-              <div className="text-gray-10 text-sm font-medium">
-                {value ? "Change" : "Select"} picture
-              </div>
-              <div className="text-xs text-zinc-500">
-                JPG, PNG - Max size 10MB
-              </div>
-            </div>
-          </Button>
-        </>)}
+                }}/>)}
+          <input type="file" id={id} className="hidden" onChange={onFileSelect} accept=".jpg,.jpeg,.png"/>
+          <Button variant="outlined" className="mb-auto flex items-center gap-3 p-2" onClick={() => document.getElementById(id)?.click()}>
+            <div className="flex h-12 w-12 items-center justify-center rounded-sm border border-zinc-800 p-3">
+              <PhotoIcon />
+            </div>
+            <div className="flex flex-col items-start gap-1.5">
+              <div className="text-gray-10 text-sm font-medium">
+                {value ? "Change" : "Select"} picture
+              </div>
+              <div className="text-xs text-zinc-500">
+                JPG, PNG - Max size 10MB
+              </div>
+            </div>
+          </Button>
+        </>)}
     </div>);
 }

package/components/PictureCropInput/canvasPreview.d.ts

@@ -1,2 +1,2 @@
-import { PixelCrop } from "react-image-crop";
+import type { PixelCrop } from "react-image-crop";
 export declare function canvasPreview(image: HTMLImageElement, canvas: HTMLCanvasElement, crop: PixelCrop, scale?: number, rotate?: number): Promise<void>;

package/components/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import * as RPopover from "@radix-ui/react-popover";
-import React, { ComponentProps } from "react";
+import React, { type ComponentProps } from "react";
 declare function PopoverContent({ className, sideOffset, collisionPadding, children, noArrow, ...props }: ComponentProps<typeof RPopover.Content> & {
     noArrow?: boolean;
 }): React.JSX.Element;

package/components/Popover/Popover.jsx

@@ -1,13 +1,13 @@
 import * as RPopover from "@radix-ui/react-popover";
-import React from "react";
+import React, {} from "react";
 import clsx from "../../utils/clsx";
 import { modalArrowClassName, modalContentClassName, } from "../../styles/Modal.classNames";
 function PopoverContent({ className, sideOffset = 4, collisionPadding = 8, children, noArrow, ...props }) {
-    return (<RPopover.Portal>
-      <RPopover.Content {...props} className={clsx(modalContentClassName, "ui-popover-content", className)} sideOffset={sideOffset} collisionPadding={collisionPadding}>
-        {children}
-        {!noArrow && <PopoverArrow />}
-      </RPopover.Content>
+    return (<RPopover.Portal>
+      <RPopover.Content {...props} className={clsx(modalContentClassName, "ui-popover-content", className)} sideOffset={sideOffset} collisionPadding={collisionPadding}>
+        {children}
+        {!noArrow && <PopoverArrow />}
+      </RPopover.Content>
     </RPopover.Portal>);
 }
 function PopoverArrow({ className, ...props }) {

package/components/Resizable/Resizable.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ReactElement, ReactNode } from "react";
+import React, { type CSSProperties, type ReactElement, type ReactNode } from "react";
 export default function Resizable({ children, minWidth, maxWidth, width, onResize, }: {
     children: ReactElement;
     minWidth?: number;

package/components/Resizable/Resizable.jsx

@@ -44,11 +44,11 @@ export default function Resizable({ children, minWidth, maxWidth, width, onResiz
     return cloneElement(child, {
         className: clsx("relative", child.props.className),
         style: { width: internalWidth },
-        children: (<>
-        <div className={clsx("absolute bottom-0 left-0 top-0 z-10 w-1 cursor-e-resize select-none transition-colors hover:bg-zinc-700", {
+        children: (<>
+        <div className={clsx("absolute top-0 bottom-0 left-0 z-10 w-1 cursor-e-resize transition-colors select-none hover:bg-zinc-700", {
                 "bg-zinc-700": isResizing,
-            })} onMouseDown={onMouseDown}/>
-        {child.props.children}
+            })} onMouseDown={onMouseDown}/>
+        {child.props.children}
       </>),
     });
 }

package/components/ScrollArea/ScrollArea.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from "react";
+import type { ReactNode, Ref } from "react";
 export default function ScrollArea({ className, children, viewportClassName, ref, viewportRef, type, }: {
     children: ReactNode;
     className?: string;

package/components/ScrollArea/ScrollArea.jsx

@@ -1,16 +1,16 @@
 import { ScrollArea as RScrollArea } from "radix-ui";
 import clsx from "../../utils/clsx";
 export default function ScrollArea({ className, children, viewportClassName, ref, viewportRef, type, }) {
-    return (<RScrollArea.Root className={clsx("overflow-hidden", className)} ref={ref} type={type}>
-      <RScrollArea.Viewport className={clsx("h-full w-full", viewportClassName)} ref={viewportRef}>
-        {children}
-      </RScrollArea.Viewport>
-      <RScrollArea.Scrollbar className="flex touch-none select-none bg-zinc-700 p-0.5 transition-colors duration-[160ms] ease-out hover:bg-zinc-600 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col" orientation="vertical">
-        <RScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-zinc-500 before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2 hover:bg-zinc-400"/>
-      </RScrollArea.Scrollbar>
-      <RScrollArea.Scrollbar className="flex touch-none select-none bg-zinc-700 p-0.5 transition-colors duration-[160ms] ease-out hover:bg-zinc-600 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col" orientation="horizontal">
-        <RScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-zinc-500 before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-[44px] before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2"/>
-      </RScrollArea.Scrollbar>
-      <RScrollArea.Corner className="bg-zinc-600"/>
+    return (<RScrollArea.Root className={clsx("overflow-hidden", className)} ref={ref} type={type}>
+      <RScrollArea.Viewport className={clsx("h-full w-full", viewportClassName)} ref={viewportRef}>
+        {children}
+      </RScrollArea.Viewport>
+      <RScrollArea.Scrollbar className="flex touch-none bg-zinc-700 p-0.5 transition-colors duration-[160ms] ease-out select-none hover:bg-zinc-600 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-2.5" orientation="vertical">
+        <RScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-zinc-500 before:absolute before:top-1/2 before:left-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2 hover:bg-zinc-400"/>
+      </RScrollArea.Scrollbar>
+      <RScrollArea.Scrollbar className="flex touch-none bg-zinc-700 p-0.5 transition-colors duration-[160ms] ease-out select-none hover:bg-zinc-600 data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-2.5" orientation="horizontal">
+        <RScrollArea.Thumb className="relative flex-1 rounded-[10px] bg-zinc-500 before:absolute before:top-1/2 before:left-1/2 before:size-full before:min-h-[44px] before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2"/>
+      </RScrollArea.Scrollbar>
+      <RScrollArea.Corner className="bg-zinc-600"/>
     </RScrollArea.Root>);
 }

package/components/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import * as RSelect from "@radix-ui/react-select";
 import Button from "../Button";
 declare function SelectContent({ className, children, ...props }: ComponentProps<typeof RSelect.Content>): import("react").JSX.Element;
@@ -6,8 +6,9 @@ declare function SelectSeparator({ className, ...props }: ComponentProps<typeof
 declare function SelectItem({ children, className, indicatorClassName, ...props }: ComponentProps<typeof RSelect.Item> & {
     indicatorClassName?: string;
 }): import("react").JSX.Element;
-declare function SelectTrigger({ className, placeholder, children, readOnly, ref, ...props }: ComponentProps<typeof RSelect.Trigger> & ComponentProps<typeof Button> & {
+declare function SelectTrigger({ className, placeholder, children, readOnly, ref, buttonClassName, ...props }: ComponentProps<typeof RSelect.Trigger> & ComponentProps<typeof Button> & {
     placeholder?: string;
+    buttonClassName?: string;
 }): import("react").JSX.Element;
 declare function SelectLabel({ className, ...props }: ComponentProps<typeof RSelect.Label>): import("react").JSX.Element;
 declare const Select: {

package/components/Select/Select.jsx

@@ -6,36 +6,36 @@ import { dropdownItemClassName, dropdownItemIndicatorClassName, dropdownLabelCla
 import { modalContentClassName } from "../../styles/Modal.classNames";
 const selectScrollButtonClassName = clsx("ui-select-scroll-button", "flex h-6 cursor-default items-center justify-center", "bg-white", "dark:bg-zinc-900", "[&>svg]:w-4 [&>svg]:h-4");
 function SelectContent({ className, children, ...props }) {
-    return (<RSelect.Portal>
-      <RSelect.Content {...props} className={clsx(modalContentClassName, "ui-select-content -ml-[6px]", className)}>
-        <RSelect.ScrollUpButton className={selectScrollButtonClassName}>
-          <ChevronUpIcon />
-        </RSelect.ScrollUpButton>
-        <RSelect.Viewport>{children}</RSelect.Viewport>
-        <RSelect.ScrollDownButton className={selectScrollButtonClassName}>
-          <ChevronDownIcon />
-        </RSelect.ScrollDownButton>
-      </RSelect.Content>
+    return (<RSelect.Portal>
+      <RSelect.Content {...props} className={clsx(modalContentClassName, "ui-select-content -ml-[6px]", className)}>
+        <RSelect.ScrollUpButton className={selectScrollButtonClassName}>
+          <ChevronUpIcon />
+        </RSelect.ScrollUpButton>
+        <RSelect.Viewport>{children}</RSelect.Viewport>
+        <RSelect.ScrollDownButton className={selectScrollButtonClassName}>
+          <ChevronDownIcon />
+        </RSelect.ScrollDownButton>
+      </RSelect.Content>
     </RSelect.Portal>);
 }
 function SelectSeparator({ className, ...props }) {
     return (<RSelect.Separator {...props} className={clsx(dropdownSeparatorClassName, "ui-select-separator", className)}/>);
 }
 function SelectItem({ children, className, indicatorClassName, ...props }) {
-    return (<RSelect.Item className={clsx(dropdownItemClassName, "ui-select-item", className)} {...props}>
-      <RSelect.ItemIndicator className={clsx(dropdownItemIndicatorClassName, "ui-select-item-indicator", indicatorClassName)}>
-        <CheckIcon />
-      </RSelect.ItemIndicator>
-      <RSelect.ItemText>{children}</RSelect.ItemText>
+    return (<RSelect.Item className={clsx(dropdownItemClassName, "ui-select-item", className)} {...props}>
+      <RSelect.ItemIndicator className={clsx(dropdownItemIndicatorClassName, "ui-select-item-indicator", indicatorClassName)}>
+        <CheckIcon />
+      </RSelect.ItemIndicator>
+      <RSelect.ItemText>{children}</RSelect.ItemText>
     </RSelect.Item>);
 }
-function SelectTrigger({ className, placeholder, children, readOnly, ref, ...props }) {
-    return (<RSelect.Trigger asChild {...props} className={className} ref={children ? ref : undefined}>
-      {children || (<Button trailing={!readOnly ? (<RSelect.Icon>
-                <ChevronDownIcon />
-              </RSelect.Icon>) : undefined} ref={ref} disabled={readOnly} className="opacity-100">
-          <RSelect.Value placeholder={placeholder}/>
-        </Button>)}
+function SelectTrigger({ className, placeholder, children, readOnly, ref, buttonClassName, ...props }) {
+    return (<RSelect.Trigger asChild {...props} className={clsx("data-[placeholder]:text-zinc-500", className)} ref={children ? ref : undefined}>
+      {children || (<Button trailing={!readOnly ? (<RSelect.Icon>
+                <ChevronDownIcon />
+              </RSelect.Icon>) : undefined} ref={ref} disabled={readOnly} className={clsx("rounded-md opacity-100", buttonClassName)}>
+          <RSelect.Value placeholder={placeholder}/>
+        </Button>)}
     </RSelect.Trigger>);
 }
 function SelectLabel({ className, ...props }) {

package/components/Skeleton/Skeleton.d.ts

@@ -1,2 +1,2 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
 export default function Skeleton({ className, ...props }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").JSX.Element;

package/components/StarBorder/StarBorder.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 export type StarBorderProps<T extends React.ElementType> = React.ComponentPropsWithoutRef<T> & {
     as?: T;
     className?: string;
@@ -7,5 +6,5 @@ export type StarBorderProps<T extends React.ElementType> = React.ComponentPropsW
     speed?: React.CSSProperties["animationDuration"];
     innerClassName?: string;
 };
-declare const StarBorder: <T extends React.ElementType = "button">({ as, className, color, speed, children, innerClassName, ...rest }: StarBorderProps<T>) => React.JSX.Element;
+declare const StarBorder: <T extends React.ElementType = "button">({ as, className, color, speed, children, innerClassName, ...rest }: StarBorderProps<T>) => import("react").JSX.Element;
 export default StarBorder;

package/components/StarBorder/StarBorder.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import {} from "react";
 import clsx from "../../utils/clsx";
 const StarBorder = ({ as, className = "", color = "white", speed = "6s", children, innerClassName, ...rest }) => {
     const Component = (as || "button");

package/components/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { UnstyledInputCommonProps } from "../Input";
+import type { ReactNode } from "react";
+import { type UnstyledInputCommonProps } from "../Input";
 export interface SwitchProps {
     srLabel?: string;
     checked?: boolean;