oneslash-design-system 1.1.2 → 1.1.4

package/components/button.tsx

@@ -111,7 +111,9 @@ export default function Button({
       {IconLeft && (
           <IconLeft className={sizeIcon} />
       )}
-      <div className="whitespace-nowrap px-2">{label}</div>
+      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2">
+        {label}
+      </div>
       {IconRight && (
         <div onClick={onClickActionIcon} className="cursor-pointer">
           <IconRight className={sizeIcon} />

package/components/modal.tsx

@@ -1,12 +1,13 @@
 'use client';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 interface ModalProps {
   isOpen: boolean;
-  title: string;
+  title?: string;
   children: React.ReactNode;
   onClose: () => void;
-  actions: React.ReactNode;
+  actions?: React.ReactNode;
+  size?: 'medium' | 'large'; 
 }
 
 export default function Modal({ 
@@ -15,28 +16,37 @@ export default function Modal({
   children, 
   onClose, 
   actions, 
+  size = 'medium', // Default size is medium
 }: ModalProps) {
+  
   if (!isOpen) return null;
 
+  // close modal by clicking elsewhere
   const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   };
 
+  // close modal by esc keypress
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         onClose();
       }
     };
-
     window.addEventListener('keydown', handleKeyDown);
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
   }, [onClose]);
 
+  // Determine width based on size prop
+  const modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
+  const maxWidth = size === 'large' ? '1200px' : '600px';
+
+  
+
   return (
     <div 
       className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50"
@@ -44,23 +54,31 @@ export default function Modal({
       role="dialog"
       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 w-[600px]"
+        className={`bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 ${modalWidth}`}
         style={{
-          maxHeight: 'calc(100vh - 64px)',
+          maxWidth,
+          width: 'calc(100vw - 64px)',
+          maxHeight: '800px',
+          height: 'auto',
           overflowY: 'auto',
         }}
       >
-        <h2 id="modal-title" className="text-h6">
-          {title}
-        </h2>
+        {title && (
+          <h2 id="modal-title" className="text-h6">
+            {title}
+          </h2>
+        )}
         <div className="text-body1 space-y-4">
           {children}
         </div>
-        <div className="flex justify-between">
-          {actions}
-        </div>
+        {actions && (
+          <div className="flex justify-between">
+            {actions}
+          </div>
+        )}
       </div>
     </div>
   );

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-accent-main dark:bg-dark-accent-main 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">{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, " transition-colors duration-300 ease-in-out")} 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,10 @@
+import React from 'react';
+interface MenuItemProps {
+    href?: string;
+    iconName?: string;
+    label: string;
+    isSelected?: boolean;
+    onClick: any;
+}
+export default function MenuItem({ href, iconName, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
+export {};

package/dist/components/menuItem.jsx

@@ -0,0 +1,96 @@
+'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';
+import NextLink from 'next/link';
+export default function MenuItem(_a) {
+    var _this = this;
+    var _b = _a.href, href = _b === void 0 ? '#' : _b, iconName = _a.iconName, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick;
+    var _c = useState(null), Icon = _c[0], setIcon = _c[1];
+    // Import icon dynamically
+    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
+        var module_1, IconComponent, 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();
+                    IconComponent = module_1[iconName];
+                    return [2 /*return*/, IconComponent || 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 fetchIcon = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!iconName) 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*/];
+                }
+            });
+        }); };
+        fetchIcon();
+    }, [iconName, loadIcon]);
+    return (<NextLink href={href}>
+      <div className={"\n          flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start\n          ".concat(isSelected
+            ? 'bg-light-action-selected dark:bg-dark-action-selected'
+            : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100', "\n        ")} style={{ width: '100%' }} onClick={onClick}>
+        {Icon && <Icon className="w-6 h-6"/>}
+        <span className="whitespace-nowrap text-body1 px-2">
+          {label}
+        </span>
+      </div>
+    </NextLink>);
+}