@majapisoftwares/ui 4.1.17 → 4.2.0

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;

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>)}
+    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>)}
     </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;

package/components/Switch/Switch.jsx

@@ -1,20 +1,20 @@
 import { Switch as RSwitch } from "radix-ui";
 import clsx from "../../utils/clsx";
-import Input from "../Input";
+import Input, {} from "../Input";
 export default function Switch({ srLabel, checked, onChange, className, rightLabel, readOnly, switchClassName, pointerClassName, disabled, }) {
-    return (<div className={clsx(className, "flex items-center")}>
+    return (<div className={clsx(className, "flex items-center")}>
       <RSwitch.Root checked={checked} onCheckedChange={onChange} className={clsx({
             "bg-primary-600": checked,
             "bg-zinc-300 dark:bg-zinc-600": !checked,
             "cursor-pointer": !readOnly && !disabled,
             "cursor-not-allowed": disabled,
-        }, "focus:ring-primary-500 relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-offset-2 focus:outline-hidden dark:ring-offset-zinc-900", switchClassName)} disabled={readOnly || disabled}>
-        {srLabel && <span className="sr-only">{srLabel}</span>}
-        <RSwitch.Thumb aria-hidden="true" className={clsx("pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out data-[state=checked]:translate-x-5", pointerClassName)}/>
-      </RSwitch.Root>
-      {rightLabel && (<span className="ml-3 text-sm text-zinc-500 dark:text-zinc-300">
-          {rightLabel}
-        </span>)}
+        }, "focus:ring-primary-500 relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-offset-2 focus:outline-hidden dark:ring-offset-zinc-900", switchClassName)} disabled={readOnly || disabled}>
+        {srLabel && <span className="sr-only">{srLabel}</span>}
+        <RSwitch.Thumb aria-hidden="true" className={clsx("pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out data-[state=checked]:translate-x-5", pointerClassName)}/>
+      </RSwitch.Root>
+      {rightLabel && (<span className="ml-3 text-sm text-zinc-500 dark:text-zinc-300">
+          {rightLabel}
+        </span>)}
     </div>);
 }
 export function SwitchInput({ inputClassName, checked, ...props }) {

package/components/Table/DataTable.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ReactElement, ReactNode } from "react";
+import { type ComponentType, type ReactElement, type ReactNode } from "react";
 export type DataTableProps<RowData> = {
     title?: ReactNode;
     subtitle?: ReactNode;