@majapisoftwares/ui 4.0.2

package/components/Resizable/index.jsx

@@ -0,0 +1,3 @@
+import Resizable from "./Resizable";
+export * from "./Resizable";
+export default Resizable;

package/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, Ref } from "react";
+export default function ScrollArea({ className, children, viewportClassName, ref, viewportRef, type, }: {
+    children: ReactNode;
+    className?: string;
+    viewportClassName?: string;
+    ref?: Ref<HTMLDivElement>;
+    viewportRef?: Ref<HTMLDivElement>;
+    type?: "auto" | "always" | "scroll" | "hover";
+}): import("react").JSX.Element;

package/components/ScrollArea/ScrollArea.jsx

@@ -0,0 +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"/>
+    </RScrollArea.Root>);
+}

package/components/ScrollArea/index.d.ts

@@ -0,0 +1,3 @@
+import ScrollArea from "./ScrollArea";
+export * from "./ScrollArea";
+export default ScrollArea;

package/components/ScrollArea/index.jsx

@@ -0,0 +1,3 @@
+import ScrollArea from "./ScrollArea";
+export * from "./ScrollArea";
+export default ScrollArea;

package/components/Select/Select.d.ts

@@ -0,0 +1,24 @@
+import { 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;
+declare function SelectSeparator({ className, ...props }: ComponentProps<typeof RSelect.Separator>): import("react").JSX.Element;
+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> & {
+    placeholder?: string;
+}): import("react").JSX.Element;
+declare function SelectLabel({ className, ...props }: ComponentProps<typeof RSelect.Label>): import("react").JSX.Element;
+declare const Select: {
+    Root: import("react").FC<RSelect.SelectProps>;
+    Item: typeof SelectItem;
+    Trigger: typeof SelectTrigger;
+    Content: typeof SelectContent;
+    Group: import("react").ForwardRefExoticComponent<RSelect.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: typeof SelectLabel;
+    Separator: typeof SelectSeparator;
+    Icon: import("react").ForwardRefExoticComponent<RSelect.SelectIconProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Value: import("react").ForwardRefExoticComponent<RSelect.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export default Select;

package/components/Select/Select.jsx

@@ -0,0 +1,55 @@
+import * as RSelect from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from "@heroicons/react/16/solid";
+import Button from "../Button";
+import clsx from "../../utils/clsx";
+import { dropdownItemClassName, dropdownItemIndicatorClassName, dropdownLabelClassName, dropdownSeparatorClassName, } from "../../styles/Dropdown.classNames";
+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>
+    </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>
+    </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>)}
+    </RSelect.Trigger>);
+}
+function SelectLabel({ className, ...props }) {
+    return (<RSelect.Label className={clsx(dropdownLabelClassName, "ui-select-label", className)} {...props}/>);
+}
+const Select = {
+    Root: RSelect.Root,
+    Item: SelectItem,
+    Trigger: SelectTrigger,
+    Content: SelectContent,
+    Group: RSelect.Group,
+    Label: SelectLabel,
+    Separator: SelectSeparator,
+    Icon: RSelect.Icon,
+    Value: RSelect.Value,
+};
+export default Select;

package/components/Select/index.d.ts

@@ -0,0 +1,3 @@
+import Select from "./Select";
+export * from "./Select";
+export default Select;

package/components/Select/index.jsx

@@ -0,0 +1,3 @@
+import Select from "./Select";
+export * from "./Select";
+export default Select;

package/components/Skeleton/Skeleton.d.ts

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

package/components/Skeleton/Skeleton.jsx

@@ -0,0 +1,8 @@
+import clsx from "../../utils/clsx";
+export default function Skeleton({ className, ...props }) {
+    return (<div className={clsx("animate-pulse overflow-hidden rounded-sm text-transparent", "bg-zinc-300 text-zinc-300 dark:bg-zinc-700 dark:text-zinc-700", className)} {...props}>
+      <div className={clsx("animate-shiny w-dull h-full", "bg-[linear-gradient(120deg,rgba(255,255,255,0)_0%,#e4e4e7,rgba(255,255,255,0)_100%)]", "dark:bg-[linear-gradient(120deg,rgba(255,255,255,0)_20%,#52525b,rgba(255,255,255,0)_80%)]")} style={{
+            backgroundSize: "200% 100%",
+        }}/>
+    </div>);
+}

package/components/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+import Skeleton from "./Skeleton";
+export * from "./Skeleton";
+export default Skeleton;

package/components/Skeleton/index.jsx

@@ -0,0 +1,3 @@
+import Skeleton from "./Skeleton";
+export * from "./Skeleton";
+export default Skeleton;

package/components/Slider/Slider.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export default function Slider({ step, max, min, className, value, onValueChange, thumbClassName, }: {
+    step?: number;
+    max?: number;
+    className?: string;
+    thumbClassName?: string;
+    min?: number;
+    value?: number[];
+    onValueChange?: (value: number[]) => void;
+}): React.JSX.Element;

package/components/Slider/Slider.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import * as RSlider from "@radix-ui/react-slider";
+import fakeArray from "../../utils/fakeArray";
+import clsx from "../../utils/clsx";
+import { useUpdateEffect } from "react-use";
+export default function Slider({ step = 1, max = 100, min = 0, className, value, onValueChange, thumbClassName, }) {
+    const thumbs = value?.length || 1;
+    const [intervalValue, setInternalValue] = useState(fakeArray(thumbs).map((n) => 10 * n));
+    useUpdateEffect(() => {
+        setInternalValue(value || fakeArray(thumbs).map((n) => 10 * n));
+    }, [value]);
+    useUpdateEffect(() => {
+        onValueChange?.(intervalValue);
+    }, [intervalValue, onValueChange]);
+    return (<RSlider.Root className={clsx("relative flex h-5 touch-none select-none items-center", className)} value={intervalValue} max={max} onValueChange={setInternalValue} step={step} min={min}>
+      <RSlider.Track className="relative h-[3px] grow rounded-full bg-black/30">
+        <RSlider.Range className="absolute h-full rounded-full bg-primary-500"/>
+      </RSlider.Track>
+      {fakeArray(thumbs).map((n) => (<RSlider.Thumb key={n} className={clsx("block h-5 w-5 rounded-full bg-white shadow-md ring-primary-500 ring-offset-2 ring-offset-zinc-100 transition hover:bg-primary-500 focus:outline-hidden focus-visible:shadow-lg focus-visible:ring-2", thumbClassName)}/>))}
+    </RSlider.Root>);
+}

package/components/Slider/index.d.ts

@@ -0,0 +1,3 @@
+import Slider from "./Slider";
+export * from "./Slider";
+export default Slider;

package/components/Slider/index.jsx

@@ -0,0 +1,3 @@
+import Slider from "./Slider";
+export * from "./Slider";
+export default Slider;

package/components/Spotlight/Spotlight.d.ts

@@ -0,0 +1,30 @@
+export default function Spotlight<T extends object>({ recentSearchesId, open, setOpen, setQuery, query, onClickItem, results, loading, getItemId, getItemLabel, getItemPicture, getItemHref, showSeeMoreButton, onSeeMoreClick, seeMoreHref, overlayClassName, dialogContentClassName, className, contentClassName, iconClassName, inputClassName, buttonClassName, noResultsClassName, recentSearchClassName, buttonLabel, noRecentSearchLabel, recentlySearchedLabel, noResultsLabel, }: {
+    recentSearchesId: string;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    setQuery: (search: string) => void;
+    query: string;
+    results?: T[];
+    loading: boolean;
+    getItemId?: (item: T) => string;
+    getItemLabel?: (item: T) => string;
+    getItemPicture?: (item: T) => string;
+    getItemHref?: (item: T) => string;
+    onClickItem?: (item: T) => void;
+    showSeeMoreButton?: boolean;
+    onSeeMoreClick?: () => void;
+    seeMoreHref?: string;
+    overlayClassName?: string;
+    dialogContentClassName?: string;
+    className?: string;
+    contentClassName?: string;
+    iconClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    noResultsClassName?: string;
+    recentSearchClassName?: string;
+    buttonLabel?: string;
+    noRecentSearchLabel?: string;
+    recentlySearchedLabel?: string;
+    noResultsLabel?: string;
+}): import("react").JSX.Element;

package/components/Spotlight/Spotlight.jsx

@@ -0,0 +1,77 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { VisuallyHidden } from "radix-ui";
+import { useCallback } from "react";
+import { ChevronRightIcon, MagnifyingGlassIcon, } from "@heroicons/react/24/solid";
+import { useLocalStorage } from "react-use";
+import { take, uniqBy } from "lodash-es";
+import Image from "next/image";
+import Input from "../Input";
+import Skeleton from "../Skeleton";
+import UnstyledButton from "../Button/UnstyledButton";
+import Button from "../Button";
+import clsx from "../../utils/clsx";
+export default function Spotlight({ recentSearchesId, open, setOpen, setQuery, query, onClickItem, results, loading, getItemId = (item) => item._id, getItemLabel = (item) => item.name, getItemPicture, getItemHref, showSeeMoreButton, onSeeMoreClick, seeMoreHref, overlayClassName, dialogContentClassName, className, contentClassName, iconClassName, inputClassName, buttonClassName, noResultsClassName, recentSearchClassName, buttonLabel = "See more", noRecentSearchLabel = "No recent search", recentlySearchedLabel = "Recently searched", noResultsLabel = "No result found", }) {
+    const [recentQueries, setRecentQueries] = useLocalStorage(`spotlight-recent-queries-${recentSearchesId}`, []);
+    const handleClose = useCallback((item) => {
+        setRecentQueries(take(uniqBy([item, ...(recentQueries || [])], getItemId), 5));
+        setOpen(false);
+        setQuery("");
+    }, [getItemId, recentQueries, setOpen, setQuery, setRecentQueries]);
+    const handleItemClick = useCallback((item) => () => {
+        onClickItem?.(item);
+        handleClose(item);
+    }, [handleClose, onClickItem]);
+    return (<Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay className={clsx("fixed inset-0 z-20 flex justify-center bg-black/30 backdrop-blur-xs", "data-[state=closed]:animate-fade-out data-[state=open]:animate-slide-up-and-fade will-change-[opacity,transform]", overlayClassName)}>
+          <Dialog.Content className={clsx("fixed mx-auto w-full max-w-(--breakpoint-md) px-4 py-4 focus:outline-hidden md:py-8", "data-[state=closed]:animate-fade-out data-[state=open]:animate-elastic-slide-up-and-fade will-change-[transform,opacity]", dialogContentClassName)}>
+            <VisuallyHidden.Root>
+              <Dialog.Title />
+              <Dialog.Description />
+            </VisuallyHidden.Root>
+            <div className={clsx("flex w-full flex-col justify-center rounded-sm border border-zinc-800 bg-zinc-900", className)}>
+              <div className="px-4 py-4">
+                <Input className={clsx("w-full bg-zinc-900", contentClassName)} inputClassName={clsx("border-none rounded-t-md rounded-b-none dark:bg-zinc-900 dark:focus:ring-0", inputClassName)} autoFocus={true} leading={<MagnifyingGlassIcon className={clsx("h-5 w-5 text-white", iconClassName)}/>} value={query} onChange={(e) => setQuery(e.target.value)}/>
+              </div>
+              <div className="w-full border-t border-zinc-800">
+                <div className="flex flex-col">
+                  {query ? (<>
+                      {loading && (<div className="flex items-center gap-4 px-4 py-2">
+                          {getItemPicture && <Skeleton className="h-16 w-28"/>}
+                          <Skeleton className="h-6 w-32"/>
+                        </div>)}
+                      {!loading && !results?.length && (<div className={clsx("flex justify-center border-b border-zinc-800 px-6 py-10 text-zinc-600", noResultsClassName)}>
+                          {noResultsLabel}
+                        </div>)}
+                      {!loading && !!results?.length && (<>
+                          {results.map((item) => (<UnstyledButton key={getItemId(item)} href={getItemHref?.(item)} className="flex w-full items-center gap-4 border-t border-zinc-800 px-4 py-2 hover:bg-zinc-800/90" onClick={handleItemClick(item)}>
+                              {getItemPicture && (<Image src={getItemPicture(item)} alt={getItemLabel(item)} width={200} height={378} className="h-16 w-28 rounded-sm object-cover"/>)}
+                              <div className="text-white">
+                                {getItemLabel(item)}
+                              </div>
+                            </UnstyledButton>))}
+                          {showSeeMoreButton && (<div className="flex w-full justify-center px-4 py-2">
+                              <Button variant="filled" type="submit" className={clsx("w-full dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700", buttonClassName)} trailing={<ChevronRightIcon />} onClick={onSeeMoreClick} href={seeMoreHref}>
+                                {buttonLabel}
+                              </Button>
+                            </div>)}
+                        </>)}
+                    </>) : (<>
+                      {recentQueries?.length ? (<div className={clsx("px-6 py-2 text-zinc-400", recentSearchClassName)}>
+                          {recentlySearchedLabel}
+                        </div>) : (<div className={clsx("flex justify-center border-zinc-800 px-6 py-10 text-zinc-600", noResultsClassName)}>
+                          {noRecentSearchLabel}
+                        </div>)}
+                      {recentQueries?.map((item) => (<UnstyledButton key={getItemId(item)} href={getItemHref?.(item)} className="flex w-full items-center gap-4 border-t border-zinc-800 px-4 py-2 hover:bg-zinc-800/90" onClick={handleItemClick(item)}>
+                          {getItemPicture && (<Image src={getItemPicture(item)} alt={getItemLabel(item)} width={200} height={378} className="max-h-16 max-w-28 rounded-sm object-cover"/>)}
+                          <div className="text-white">{getItemLabel(item)}</div>
+                        </UnstyledButton>))}
+                    </>)}
+                </div>
+              </div>
+            </div>
+          </Dialog.Content>
+        </Dialog.Overlay>
+      </Dialog.Portal>
+    </Dialog.Root>);
+}

package/components/Spotlight/index.d.ts

@@ -0,0 +1,3 @@
+import Spotlight from "./Spotlight";
+export * from "./Spotlight";
+export default Spotlight;

package/components/Spotlight/index.jsx

@@ -0,0 +1,3 @@
+import Spotlight from "./Spotlight";
+export * from "./Spotlight";
+export default Spotlight;

package/components/SpotlightCard/SpotlightCard.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface SpotlightCardProps extends React.PropsWithChildren {
+    className?: string;
+    spotlightColor?: `rgba(${number}, ${number}, ${number}, ${number})`;
+}
+declare const SpotlightCard: React.FC<SpotlightCardProps>;
+export default SpotlightCard;

package/components/SpotlightCard/SpotlightCard.jsx

@@ -0,0 +1,35 @@
+import React, { useRef, useState } from "react";
+const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)", }) => {
+    const divRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [opacity, setOpacity] = useState(0);
+    const handleMouseMove = (e) => {
+        if (!divRef.current || isFocused)
+            return;
+        const rect = divRef.current.getBoundingClientRect();
+        setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+        setOpacity(0.6);
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+        setOpacity(0);
+    };
+    const handleMouseEnter = () => {
+        setOpacity(0.6);
+    };
+    const handleMouseLeave = () => {
+        setOpacity(0);
+    };
+    return (<div ref={divRef} onMouseMove={handleMouseMove} onFocus={handleFocus} onBlur={handleBlur} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={`relative overflow-hidden ${className}`}>
+      <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out" style={{
+            opacity,
+            background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`,
+        }}/>
+      {children}
+    </div>);
+};
+export default SpotlightCard;

package/components/SpotlightCard/index.d.ts

@@ -0,0 +1,3 @@
+import SpotlightCard from "./SpotlightCard";
+export * from "./SpotlightCard";
+export default SpotlightCard;

package/components/SpotlightCard/index.jsx

@@ -0,0 +1,3 @@
+import SpotlightCard from "./SpotlightCard";
+export * from "./SpotlightCard";
+export default SpotlightCard;

package/components/Stack/Stack.d.ts

@@ -0,0 +1,4 @@
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+export type StackProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+declare function Stack({ className, ...props }: StackProps): import("react").JSX.Element;
+export default Stack;

package/components/Stack/Stack.jsx

@@ -0,0 +1,5 @@
+import clsx from "../../utils/clsx";
+function Stack({ className, ...props }) {
+    return <div {...props} className={clsx("flex flex-col gap-2", className)}/>;
+}
+export default Stack;

package/components/Stack/index.d.ts

@@ -0,0 +1,3 @@
+import Stack from "./Stack";
+export * from "./Stack";
+export default Stack;

package/components/Stack/index.jsx

@@ -0,0 +1,3 @@
+import Stack from "./Stack";
+export * from "./Stack";
+export default Stack;

package/components/StarBorder/StarBorder.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type StarBorderProps<T extends React.ElementType> = React.ComponentPropsWithoutRef<T> & {
+    as?: T;
+    className?: string;
+    children?: React.ReactNode;
+    color?: string;
+    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;
+export default StarBorder;

package/components/StarBorder/StarBorder.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import clsx from "../../utils/clsx";
+const StarBorder = ({ as, className = "", color = "white", speed = "6s", children, innerClassName, ...rest }) => {
+    const Component = (as || "button");
+    return (<Component className={`relative inline-block overflow-hidden rounded-[20px] py-[1px] ${className}`} {...rest}>
+      <div className="animate-star-movement-bottom absolute right-[-250%] bottom-[-11px] z-0 h-[50%] w-[300%] rounded-full opacity-70" style={{
+            background: `radial-gradient(circle, ${color}, transparent 10%)`,
+            animationDuration: speed,
+        }}/>
+      <div className="animate-star-movement-top absolute top-[-10px] left-[-250%] z-0 h-[50%] w-[300%] rounded-full opacity-70" style={{
+            background: `radial-gradient(circle, ${color}, transparent 10%)`,
+            animationDuration: speed,
+        }}/>
+      <div className={clsx("relative z-1 rounded-[20px] border border-gray-800 bg-gradient-to-b from-black to-gray-900 px-[26px] py-[16px] text-center text-[16px] text-white", innerClassName)}>
+        {children}
+      </div>
+    </Component>);
+};
+export default StarBorder;

package/components/StarBorder/index.d.ts

@@ -0,0 +1,3 @@
+import StarBorder from "./StarBorder";
+export * from "./StarBorder";
+export default StarBorder;

package/components/StarBorder/index.jsx

@@ -0,0 +1,3 @@
+import StarBorder from "./StarBorder";
+export * from "./StarBorder";
+export default StarBorder;

package/components/Switch/Switch.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { UnstyledInputCommonProps } from "../Input";
+export interface SwitchProps {
+    srLabel?: string;
+    checked?: boolean;
+    className?: string;
+    rightLabel?: ReactNode;
+    switchClassName?: string;
+    pointerClassName?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onChange?(checked: boolean): void;
+}
+export default function Switch({ srLabel, checked, onChange, className, rightLabel, readOnly, switchClassName, pointerClassName, disabled, }: SwitchProps): import("react").JSX.Element;
+export type SwitchInputProps = UnstyledInputCommonProps & SwitchProps;
+export declare function SwitchInput({ inputClassName, checked, ...props }: SwitchInputProps): import("react").JSX.Element;

package/components/Switch/Switch.jsx

@@ -0,0 +1,24 @@
+import { Switch as RSwitch } from "radix-ui";
+import clsx from "../../utils/clsx";
+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")}>
+      <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>)}
+    </div>);
+}
+export function SwitchInput({ inputClassName, checked, ...props }) {
+    return (<Input 
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    {...props} as={Switch} inputClassName={clsx("p-1.5 border bg-white", inputClassName)} checked={!!checked}/>);
+}

package/components/Switch/index.d.ts

@@ -0,0 +1,3 @@
+import Switch from "./Switch";
+export * from "./Switch";
+export default Switch;

package/components/Switch/index.jsx

@@ -0,0 +1,3 @@
+import Switch from "./Switch";
+export * from "./Switch";
+export default Switch;

package/components/Table/DataTable.d.ts

@@ -0,0 +1,57 @@
+import { ComponentType, ReactElement, ReactNode } from "react";
+export type DataTableProps<RowData> = {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    headerContent?: ReactNode;
+    data?: RowData[];
+    idAccessor?: keyof RowData;
+    columns: {
+        id?: string;
+        title?: ReactNode;
+        accessor?: keyof RowData;
+        render?: (item: RowData) => ReactNode;
+        headerClassName?: string;
+        cellClassName?: string;
+        sortable?: boolean;
+    }[];
+    actions?: {
+        title: string;
+        icon: ReactElement;
+        href?: string | ((item: RowData) => string | null | undefined);
+        onClick?: (item: RowData) => void;
+        wrapper?: ComponentType<{
+            item: RowData;
+            children: ReactElement<{
+                className?: string;
+                onClick: () => void;
+            }>;
+        }>;
+        target?: string;
+    }[];
+    isLoading?: boolean;
+    noRecords?: ReactNode;
+    onRowClick?: (item: RowData) => void;
+    rowWrapper?: ComponentType<{
+        item: RowData;
+        children: ReactElement<{
+            className?: string;
+        }>;
+    }>;
+    pagination?: boolean;
+    currentPage?: number;
+    onChangePage?: (page: number) => void;
+    totalItems?: number;
+    itemsPerPage?: number;
+    className?: string;
+    autoHeight?: boolean;
+    onChangeSort?: (sort: [string, "asc" | "desc"][]) => void;
+    sort?: [string, "asc" | "desc"][];
+    previousText?: string;
+    nextText?: string;
+    showingText?: string;
+    toText?: string;
+    ofText?: string;
+    resultsText?: string;
+    tableClassName?: string;
+};
+export default function DataTable<RowData>({ title, subtitle, headerContent, data, idAccessor, actions, columns, isLoading, noRecords: noRecordsText, onRowClick, rowWrapper, pagination, currentPage, onChangePage, totalItems, itemsPerPage, className, autoHeight, onChangeSort, sort: defaultSort, previousText, nextText, showingText, toText, ofText, resultsText, tableClassName, }: DataTableProps<RowData>): import("react").JSX.Element;