oneslash-design-system 1.1.10 → 1.1.12

package/components/button.tsx

@@ -1,6 +1,5 @@
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
-import UserImage from './userImage';
 
 interface ButtonProps{
   size: 'small' | 'medium' | 'large';
@@ -8,8 +7,6 @@ interface ButtonProps{
   state: 'enabled' | 'hovered' | 'focused' | 'disabled';
   label: string;
   decoIcon?: string;
-  userHandle?: string;
-  userImgUrl?: string;
   actionIcon?: string;
   onClickButton?: any; 
   onClickActionIcon?: () => void;
@@ -23,8 +20,6 @@ export default function Button({
   state,
   label,
   decoIcon,
-  userHandle,
-  userImgUrl,
   actionIcon,
   onClickButton,
   onClickActionIcon,
@@ -113,27 +108,12 @@ export default function Button({
       onMouseLeave={() => { if (state !== 'disabled') setIsHovered(false); }}
       onClick={onClickButton} // Button click action
     >
-      {/* conditionally render left section */}
-      {(IconLeft || userImgUrl || userHandle) && (
-      <div className="flex items-center space-x-2">
-        {/* Render dynamic icon if available */}
-        {IconLeft && (
+      {IconLeft && (
           <IconLeft className={sizeIcon} />
-        )}
-        
-        {/* Render UserImage if userImgUrl or userHandle is provided */}
-        {(userImgUrl || userHandle) && (
-          <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl} />
-        )}
-      </div>
-    )}
-
-      {/* label */}
-      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2 text-left">
+      )}
+      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2">
         {label}
       </div>
-      
-      {/* right icon */}
       {IconRight && (
         <div onClick={onClickActionIcon} className="cursor-pointer">
           <IconRight className={sizeIcon} />

package/components/iconButton.tsx

@@ -49,8 +49,8 @@ export default function IconButton({
 
   // padding, corner
   const baseClasses = variant === 'contained' 
-    ? 'p-1 rounded-[8px] leading-none ' 
-    : 'p-1 rounded-[8px] leading-none ';
+    ? 'p-2 rounded-[8px] leading-none ' 
+    : 'p-2 rounded-[8px] leading-none ';
 
   // bg color
   const bgColor = variant === 'contained'

package/components/menuItem.tsx

@@ -73,7 +73,6 @@ export default function MenuItem({
         <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">
           {label}
         </span>
-
       </div>
     </NextLink>
   );

package/components/modal.tsx

@@ -41,10 +41,10 @@ export default function Modal({
     };
   }, [onClose]);
 
-  // Define dimensions based on size
-  const dimensions = size === 'large' 
-    ? { width: '1200px', height: '800px' }
-    : { width: '600px' };
+  // Determine width based on size prop
+  const modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
+  const maxWidth = size === 'large' ? '1200px' : '600px';
+
   
 
   return (
@@ -55,31 +55,28 @@ export default function Modal({
       aria-labelledby="modal-title"
       aria-modal="true"
       tabIndex={-1}
-      >
+    >
       <div 
+        className={`bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 ${modalWidth}`}
         style={{
-          maxWidth: dimensions.width,
-          ...(size === 'large' && { maxHeight: dimensions.height }),          
+          maxWidth,
           width: 'calc(100vw - 64px)',
-          height: size === 'large' ? 'calc(100vh - 64px)' : 'auto', 
-          overflowY: size === 'large' ? 'auto' : 'visible',
+          maxHeight: '800px',
+          height: 'auto',
+          overflowY: 'auto',
         }}
-        className={`flex flex-col bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4`}
-        
-        >
+      >
         {title && (
           <h2 id="modal-title" className="text-h6">
             {title}
           </h2>
         )}
-        <div className="flex-grow overflow-auto">
+        <div className="text-body1 space-y-4">
           {children}
         </div>
         {actions && (
-          <div className='pt-6'>
-            <div className="flex justify-between" >
-              {actions}
-            </div>
+          <div className="flex justify-between">
+            {actions}
           </div>
         )}
       </div>

package/components/popover.tsx

@@ -57,11 +57,7 @@ export default function Popover({
     <div
       id={id}
       ref={setPopoverElement}
-      style={{ 
-        ...styles.popper, 
-        display: open ? 'block' : 'none',
-        zIndex: 10000, 
-      }}
+      style={{ ...styles.popper, display: open ? 'block' : 'none' }}
       {...attributes.popper}
       className="bg-light-background-accent100 dark:bg-dark-background-accent100 rounded-[8px] shadow-lg p-2"
       role="dialog"

package/components/tab.tsx

@@ -66,8 +66,8 @@ export default function Tab({
       className={`
         flex items-center space-x-1 p-1 rounded-[8px] cursor-pointer justify-start 
         ${isSelected 
-          ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast' 
-          : 'bg-transparent dark:bg-transparent hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200'}
+          ? 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast' 
+          : 'bg-light-action-selected dark:bg-dark-action-selected hover:bg-light-background-default dark:hover:bg-dark-action-hover'}
       `}
       onClick={handleClick}
     >

package/components/tag.tsx

@@ -3,7 +3,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 import * as HeroIcons from '@heroicons/react/24/outline';
 
 interface TagProps{
-  key?: any;
   variant: "contained" | "textOnly";
   size: "medium" | "small";
   state?: "enabled" | "selected" ;
@@ -17,7 +16,6 @@ interface TagProps{
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
 export default function Tag({
-  key,
   variant,
   size,
   state,

package/dist/components/alert.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface AlertProps {
+    open?: boolean;
+    type: 'success' | 'warning' | 'error' | 'info';
+    message: string;
+    onClose: () => void;
+}
+export default function Alert({ open, type, message, onClose }: AlertProps): React.JSX.Element | null;
+export {};

package/dist/components/alert.jsx

@@ -0,0 +1,38 @@
+'use client';
+import React, { useEffect } from 'react';
+export default function Alert(_a) {
+    var open = _a.open, type = _a.type, message = _a.message, onClose = _a.onClose;
+    useEffect(function () {
+        if (open) {
+            var timer_1 = setTimeout(function () {
+                onClose();
+            }, 3000);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    var bgColor;
+    switch (type) {
+        case 'error':
+            bgColor = 'bg-light-error-main dark:bg-dark-error-main';
+            break;
+        case 'warning':
+            bgColor = 'bg-light-warning-main dark:bg-dark-warning-main';
+            break;
+        case 'info':
+            bgColor = 'bg-light-info-main dark:bg-dark-info-main';
+            break;
+        case 'success':
+            bgColor = 'bg-light-success-main dark:bg-dark-success-main';
+            break;
+    }
+    return (<div className="fixed top-4 inset-x-0 z-50 flex justify-center">
+      <div className={"flex items-center justify-between w-full max-w-md p-4 rounded-[8px] shadow-lg text-light-text-contrast dark:text-dark-text-contrast ".concat(bgColor)}>
+        <span>{message}</span>
+        <button onClick={onClose} className="ml-4 text-xl font-bold">
+          &times;
+        </button>
+      </div>
+    </div>);
+}

package/dist/components/button.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ButtonProps {
+    size: 'small' | 'medium' | 'large';
+    type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
+    state: 'enabled' | 'hovered' | 'focused' | 'disabled';
+    label: string;
+    decoIcon?: string;
+    actionIcon?: string;
+    onClickButton?: any;
+    onClickActionIcon?: () => void;
+}
+export default function Button({ size, type, state, label, decoIcon, actionIcon, onClickButton, onClickActionIcon, }: ButtonProps): React.JSX.Element;
+export {};

package/dist/components/button.jsx

@@ -0,0 +1,141 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState, useEffect, useCallback } from 'react';
+export default function Button(_a) {
+    var _this = this;
+    var size = _a.size, type = _a.type, state = _a.state, label = _a.label, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon, onClickButton = _a.onClickButton, onClickActionIcon = _a.onClickActionIcon;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(null), IconLeft = _c[0], setIconLeft = _c[1];
+    var _d = useState(null), IconRight = _d[0], setIconRight = _d[1];
+    // Import icon dynamically
+    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
+        var module_1, Icon, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!iconName)
+                        return [2 /*return*/, null];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
+                case 2:
+                    module_1 = _a.sent();
+                    Icon = module_1[iconName];
+                    return [2 /*return*/, Icon || null];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
+                    return [2 /*return*/, null];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    useEffect(function () {
+        var fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!decoIcon) return [3 /*break*/, 2];
+                        _a = setIconLeft;
+                        return [4 /*yield*/, loadIcon(decoIcon)];
+                    case 1:
+                        _a.apply(void 0, [_c.sent()]);
+                        _c.label = 2;
+                    case 2:
+                        if (!actionIcon) return [3 /*break*/, 4];
+                        _b = setIconRight;
+                        return [4 /*yield*/, loadIcon(actionIcon)];
+                    case 3:
+                        _b.apply(void 0, [_c.sent()]);
+                        _c.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchIcons();
+    }, [decoIcon, actionIcon, loadIcon]);
+    // Define classes for size
+    var sizeClasses = {
+        large: 'text-body1 p-2',
+        medium: 'text-body1 p-1',
+        small: 'text-body2 p-1',
+    }[size];
+    // Define icon size classes
+    var sizeIcon = {
+        large: 'w-6 h-6',
+        medium: 'w-5 h-5',
+        small: 'w-4 h-4',
+    }[size];
+    // Define classes for button types
+    var baseTypeClasses = {
+        primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
+        secondary: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
+        tertiary: 'bg-light-background-accent200 dark:bg-dark-background-accent200 text-light-text-primary dark:text-dark-text-primary',
+        textOnly: 'text-light-text-primary dark:text-dark-text-primary',
+    }[type];
+    var hoverTypeClasses = {
+        primary: 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark',
+        secondary: 'hover:bg-light-primary-dark dark:hover:bg-dark-primary-dark',
+        tertiary: 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300',
+        textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
+    }[type];
+    // State classes
+    var stateClasses = {
+        enabled: 'cursor-pointer',
+        focused: 'ring-2 ring-offset-4 ring-offset-light-background-default dark:ring-offset-dark-background-default ring-light-accent-main dark:ring-dark-accent-main',
+        disabled: type === 'textOnly'
+            ? 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-transparent'
+            : 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
+    };
+    // Build the button classes dynamically
+    var buttonClasses = "\n    flex flex-row space-x-2 items-center rounded-[8px]\n    ".concat(sizeClasses, "\n    ").concat(state === 'enabled' ? baseTypeClasses : '', "\n    ").concat(state === 'focused' ? stateClasses.focused : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : baseTypeClasses, "\n    ").concat(state !== 'disabled' && isHovered ? hoverTypeClasses : '', "\n    ");
+    return (<button className={buttonClasses} onMouseEnter={function () { if (state !== 'disabled')
+        setIsHovered(true); }} onMouseLeave={function () { if (state !== 'disabled')
+        setIsHovered(false); }} onClick={onClickButton} // Button click action
+    >
+      {IconLeft && (<IconLeft className={sizeIcon}/>)}
+      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2">
+        {label}
+      </div>
+      {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
+          <IconRight className={sizeIcon}/>
+        </div>)}
+    </button>);
+}

package/dist/components/checkBox.d.ts

@@ -0,0 +1,7 @@
+interface CheckboxProps {
+    label?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export default function Checkbox({ label, checked, onChange }: CheckboxProps): import("react").JSX.Element;
+export {};

package/dist/components/checkBox.jsx

@@ -0,0 +1,29 @@
+'use client';
+import { useState } from 'react';
+export default function Checkbox(_a) {
+    var label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange;
+    var _c = useState(checked), isChecked = _c[0], setIsChecked = _c[1];
+    var handleToggle = function () {
+        var newChecked = !isChecked;
+        setIsChecked(newChecked);
+        if (onChange) {
+            onChange(newChecked);
+        }
+    };
+    return (<label className="flex items-center cursor-pointer">
+      <div onClick={handleToggle} className="relative flex items-center justify-center w-6 h-6 group">
+        {/* Circle behind the checkbox */}
+        <div className="absolute w-6 h-6 rounded-full group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected transition-all"></div>
+        
+        {/* Checkbox */}
+        <div className={"relative z-10 w-4 h-4 border-2 rounded ".concat(isChecked
+            ? 'bg-light-text-primary dark:bg-dark-text-primary border-none'
+            : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center transition-colors")}>
+          {isChecked && (<svg className="w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast" fill="none" stroke="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+              <path strokeWidth="2" d="M1 6l4 3 6-7"/>
+            </svg>)}
+        </div>
+      </div>
+      {label && <span className="ml-2 text-body1 text-light-text-primary dark:text-dark-text-primary">{label}</span>}
+    </label>);
+}

package/dist/components/emptyBox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface EmptyBoxProps {
+    text: string;
+    size: "small" | "large";
+}
+export default function EmptyBox({ text, size, }: EmptyBoxProps): React.JSX.Element;
+export {};

package/dist/components/emptyBox.jsx

@@ -0,0 +1,17 @@
+'use client';
+import React from 'react';
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+export default function EmptyBox(_a) {
+    var text = _a.text, size = _a.size;
+    var color = 'text-light-text-disabled dark:text-dark-text-disabled';
+    var height = size === 'small'
+        ? 'py-6'
+        : 'h-full';
+    var iconSize = 'size-6';
+    return (<div className={"flex flex-col space-y-2 justify-center items-center w-full ".concat(height)}>
+            <ExclamationCircleIcon className={"".concat(iconSize, " ").concat(color)}/>
+            <p className={"text-body1 ".concat(color)} text-center>
+                {text}
+            </p>
+        </div>);
+}

package/dist/components/iconButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as HeroIcons from '@heroicons/react/24/outline';
+interface IconButtonProps {
+    variant: "contained" | "iconOnly";
+    color: "primary" | "secondary";
+    state: "enabled" | "selected" | "disabled";
+    iconName: keyof typeof HeroIcons;
+    onClick?: any;
+}
+export default function IconButton({ variant, color, state, iconName, onClick, }: IconButtonProps): React.JSX.Element;
+export {};

package/dist/components/iconButton.jsx

@@ -0,0 +1,126 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState, useEffect, useCallback } from 'react';
+export default function IconButton(_a) {
+    var _this = this;
+    var variant = _a.variant, color = _a.color, state = _a.state, iconName = _a.iconName, onClick = _a.onClick;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var _c = useState(null), Icon = _c[0], setIcon = _c[1];
+    // import icon
+    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
+        var module_1, Icon_1, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!iconName)
+                        return [2 /*return*/, null];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
+                case 2:
+                    module_1 = _a.sent();
+                    Icon_1 = module_1[iconName];
+                    return [2 /*return*/, Icon_1 || null];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
+                    return [2 /*return*/, null];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    // Load icons on mount and when props change
+    useEffect(function () {
+        var fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!(typeof iconName === 'string')) return [3 /*break*/, 2];
+                        _a = setIcon;
+                        return [4 /*yield*/, loadIcon(iconName)];
+                    case 1:
+                        _a.apply(void 0, [_b.sent()]);
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchIcons();
+    }, [iconName, loadIcon]);
+    // padding, corner
+    var baseClasses = variant === 'contained'
+        ? 'p-2 rounded-[8px] leading-none '
+        : 'p-2 rounded-[8px] leading-none ';
+    // bg color
+    var bgColor = variant === 'contained'
+        ? color === 'primary'
+            ? 'bg-light-primary-main dark:bg-dark-primary-main' // contained && primary
+            : 'bg-light-background-accent200 dark:bg-dark-background-accent200' // contained && secondary
+        : color === 'primary'
+            ? ' ' // textOnly && primary
+            : ' '; // textOnly && secondary
+    // bg color hover
+    var bgColorHover = variant === 'contained'
+        ? color === 'primary'
+            ? 'hover:bg-light-primary-dark hover:dark:bg-dark-primary-dark' // contained && primary
+            : 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300' // contained && secondary
+        : color === 'primary'
+            ? 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover' // textOnly && primary
+            : 'hover:bg-light-action-hover hover:dark:bg-dark-action-hover'; // textOnly && secondary
+    // icon color
+    var iconColor = variant === 'contained'
+        ? color === 'primary'
+            ? 'text-light-primary-contrast dark:text-dark-primary-contrast' // contained && primary
+            : 'text-light-text-primary dark:text-dark-text-primary' // contained && secondary
+        : color === 'primary'
+            ? ' text-light-text-primary dark:text-dark-text-primary' // textOnly && primary
+            : ' text-light-text-primary dark:text-dark-text-primary'; // textOnly && secondary
+    // state
+    var stateClasses = state === 'disabled'
+        ? 'cursor-not-allowed opacity-50'
+        : state === 'selected'
+            ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
+            : isHovered
+                ? 'cursor-pointer hover:bg-opacity-75'
+                : 'cursor-pointer';
+    return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " ")} disabled={state === 'disabled'} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
+        {Icon && <Icon className="size-6"/>}
+    </button>);
+}

package/dist/components/loadingScreen.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export default function LoadingScreen(): React.JSX.Element;
+export declare function LoadingSmall(): React.JSX.Element;

package/dist/components/loadingScreen.jsx

@@ -0,0 +1,14 @@
+'use client';
+import React from 'react';
+export default function LoadingScreen() {
+    return (<div className="flex justify-center items-center h-full w-full min-h-[200px]">
+        <div className="w-12 h-12 border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+    </div>);
+}
+;
+export function LoadingSmall() {
+    return (<div className="flex justify-center items-center h-[40px] w-[40px]">
+      <div className="w-[40px] h-[40px] border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+    </div>);
+}
+;

package/dist/components/menuItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface MenuItemProps {
+    href?: string;
+    iconName?: string;
+    userHandle?: string;
+    userImgUrl?: string;
+    label: string;
+    isSelected?: boolean;
+    onClick?: any;
+}
+export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
+export {};