oneslash-design-system 1.1.10 → 1.1.11

package/dist/components/menuItem.jsx

@@ -0,0 +1,99 @@
+'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-background-accent200 dark:bg-dark-background-accent200 hover:bg-light-background-accent300 dark:hover:bg-dark-background-accent300'
+            : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100', "\n        ")} style={{ width: '100%' }} onClick={onClick}>
+        {/* render userImage. render dynamic icon if userImage is not available */}
+        {userImgUrl || userHandle ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''}/>) : (IconLeft && <IconLeft className="w-6 h-6"/>)}
+
+        {/* label */}
+        <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">
+          {label}
+        </span>
+      </div>
+    </NextLink>);
+}

package/dist/components/modal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ModalProps {
+    isOpen: boolean;
+    title?: string;
+    children: React.ReactNode;
+    onClose: () => void;
+    actions?: React.ReactNode;
+    size?: 'medium' | 'large';
+}
+export default function Modal({ isOpen, title, children, onClose, actions, size, }: ModalProps): React.JSX.Element | null;
+export {};

package/dist/components/modal.jsx

@@ -0,0 +1,47 @@
+'use client';
+import React, { useEffect } from 'react';
+export default function Modal(_a) {
+    var isOpen = _a.isOpen, title = _a.title, children = _a.children, onClose = _a.onClose, actions = _a.actions, _b = _a.size, size = _b === void 0 ? 'medium' : _b;
+    if (!isOpen)
+        return null;
+    // close modal by clicking elsewhere
+    var handleOverlayClick = function (e) {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    // close modal by esc keypress
+    useEffect(function () {
+        var handleKeyDown = function (e) {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [onClose]);
+    // Determine width based on size prop
+    var modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
+    var maxWidth = size === 'large' ? '1200px' : '600px';
+    return (<div className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={handleOverlayClick} 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 ".concat(modalWidth)} style={{
+            maxWidth: maxWidth,
+            width: 'calc(100vw - 64px)',
+            maxHeight: '800px',
+            height: 'auto',
+            overflowY: 'auto',
+        }}>
+        {title && (<h2 id="modal-title" className="text-h6">
+            {title}
+          </h2>)}
+        <div className="text-body1 space-y-4">
+          {children}
+        </div>
+        {actions && (<div className="flex justify-between">
+            {actions}
+          </div>)}
+      </div>
+    </div>);
+}

package/dist/components/popover.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface PopoverProps {
+    id?: string;
+    anchorEl?: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+export default function Popover({ id, anchorEl, open, onClose, children, }: PopoverProps): React.ReactPortal | null;
+export {};

package/dist/components/popover.jsx

@@ -0,0 +1,52 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { usePopper } from 'react-popper';
+export default function Popover(_a) {
+    var id = _a.id, anchorEl = _a.anchorEl, open = _a.open, onClose = _a.onClose, children = _a.children;
+    var _b = useState(null), popoverElement = _b[0], setPopoverElement = _b[1];
+    var _c = useState(false), hasMounted = _c[0], setHasMounted = _c[1];
+    // Initialize Popper.js
+    var _d = usePopper(anchorEl, popoverElement, {
+        placement: 'bottom-start', // Default placement, can be customized
+        modifiers: [
+            { name: 'offset', options: { offset: [0, 8] } }, // Offset for spacing between anchor and popover
+        ],
+    }), styles = _d.styles, attributes = _d.attributes;
+    // Handle outside clicks to close the popover
+    useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (popoverElement && !popoverElement.contains(event.target) && anchorEl) {
+                onClose();
+            }
+        };
+        if (open) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [open, anchorEl, popoverElement, onClose]);
+    // Ensure popover is only rendered after the component mounts
+    useEffect(function () {
+        setHasMounted(true);
+    }, []);
+    if (!open || !hasMounted || !anchorEl)
+        return null;
+    // Render popover in a portal to prevent layout shifts and positioning issues
+    return createPortal(<div id={id} ref={setPopoverElement} style={__assign(__assign({}, 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">
+      {children}
+    </div>, document.body // Mounting the popover in the document body for isolation
+    );
+}

package/dist/components/radioGroup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface RadioOption {
+    label: string;
+    value: string;
+}
+interface RadioGroupProps {
+    options: RadioOption[];
+    selectedValue: string;
+    onChange: (value: string) => void;
+    direction?: 'horizontal' | 'vertical';
+}
+export default function RadioGroup({ options, selectedValue, onChange, direction, }: RadioGroupProps): React.JSX.Element;
+export {};

package/dist/components/radioGroup.jsx

@@ -0,0 +1,17 @@
+'use client';
+import React from 'react';
+export default function RadioGroup(_a) {
+    var options = _a.options, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.direction, direction = _b === void 0 ? 'vertical' : _b;
+    return (<div className={"flex ".concat(direction === 'horizontal' ? 'space-x-4' : 'flex-col space-y-2')}>
+      {options.map(function (option) { return (<label key={option.value} className="flex items-center cursor-pointer" onClick={function () { return onChange(option.value); }}>
+          {/* outer circle */}
+          <div className={"relative flex justify-center items-center w-4 h-4 rounded-full border-2\n              ".concat(selectedValue === option.value
+                ? 'border-light-text-primary dark:border-dark-text-primary'
+                : 'border-light-text-secondary dark:border-dark-text-secondary', "\n            ")}>
+            {/* Inner circle */}
+            {selectedValue === option.value && (<div className='absolute w-2 h-2 rounded-full bg-light-text-primary dark:bg-dark-text-primary'/>)}
+          </div>
+          <span className="ml-2 text-body1 text-light-text-primary dark:text-dark-text-primary">{option.label}</span>
+        </label>); })}
+    </div>);
+}

package/dist/components/tab.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type TabProps = {
+    label: string;
+    href?: string;
+    isSelected: boolean;
+    onClickTab: () => void;
+    onClickActionIcon?: any;
+    decoIcon?: string;
+    actionIcon?: string;
+};
+export default function Tab({ label, href, isSelected, onClickTab, onClickActionIcon, decoIcon, actionIcon }: TabProps): React.JSX.Element;
+export {};

package/dist/components/tab.jsx

@@ -0,0 +1,113 @@
+'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 { useRouter, usePathname } from 'next/navigation';
+export default function Tab(_a) {
+    var _this = this;
+    var label = _a.label, href = _a.href, isSelected = _a.isSelected, onClickTab = _a.onClickTab, onClickActionIcon = _a.onClickActionIcon, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon;
+    var router = useRouter();
+    var pathname = usePathname();
+    var _b = useState(null), IconLeft = _b[0], setIconLeft = _b[1];
+    var _c = useState(null), IconRight = _c[0], setIconRight = _c[1];
+    // Load 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]);
+    var handleClick = function () {
+        onClickTab();
+        if (href) {
+            router.push(href);
+        }
+    };
+    return (<div className={"\n        flex items-center space-x-1 p-1 rounded-[8px] cursor-pointer justify-start \n        ".concat(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', "\n      ")} onClick={handleClick}>
+      {IconLeft && <IconLeft className="w-5 h-5"/>}
+      <span className="whitespace-nowrap text-body1 px-2">
+        {label}
+      </span>
+      {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
+          <IconRight className="w-5 h-5"/>
+        </div>)}
+    </div>);
+}

package/dist/components/tag.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import * as HeroIcons from '@heroicons/react/24/outline';
+interface TagProps {
+    key?: any;
+    variant: "contained" | "textOnly";
+    size: "medium" | "small";
+    state?: "enabled" | "selected";
+    label: any;
+    iconName?: keyof typeof HeroIcons;
+    isDeletable?: keyof typeof HeroIcons;
+    onClick?: any;
+    color?: 'default' | 'info';
+}
+export default function Tag({ key, variant, size, state, label, iconName, isDeletable, onClick, color, }: TagProps): React.JSX.Element;
+export {};

package/dist/components/tag.jsx

@@ -0,0 +1,123 @@
+'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 Tag(_a) {
+    var _this = this;
+    var key = _a.key, variant = _a.variant, size = _a.size, state = _a.state, label = _a.label, iconName = _a.iconName, isDeletable = _a.isDeletable, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'default' : _b;
+    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
+    var _d = useState(null), Icon = _d[0], setIcon = _d[1];
+    var _e = useState(null), DeleteIcon = _e[0], setDeleteIcon = _e[1];
+    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*/];
+            }
+        });
+    }); }, []);
+    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 (!(typeof iconName === 'string')) return [3 /*break*/, 2];
+                        _a = setIcon;
+                        return [4 /*yield*/, loadIcon(iconName)];
+                    case 1:
+                        _a.apply(void 0, [_c.sent()]);
+                        _c.label = 2;
+                    case 2:
+                        if (!(typeof isDeletable === 'string')) return [3 /*break*/, 4];
+                        _b = setDeleteIcon;
+                        return [4 /*yield*/, loadIcon(isDeletable)];
+                    case 3:
+                        _b.apply(void 0, [_c.sent()]);
+                        _c.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchIcons();
+    }, [iconName, isDeletable, loadIcon]);
+    // size and padding
+    var sizeClasses = size === 'medium' ? 'text-body2 px-2 py-1' : 'text-caption px-2 py-[3px]';
+    // bg color
+    var bgClasses = variant === 'contained'
+        ? (color === 'info'
+            ? 'bg-light-info-main dark:bg-dark-info-main' // info 
+            : 'bg-light-background-accent200 dark:bg-dark-background-accent200') // default 
+        : ''; // textOnly
+    // font color
+    var fontClasses = variant === 'textOnly'
+        ? (color === 'info'
+            ? 'text-light-info-main dark:text-dark-info-main' // info
+            : 'text-light-text-primary dark:text-dark-text-primary') // default
+        : 'text-light-text-primary dark:text-dark-text-primary'; // contained
+    // state
+    var stateClasses = state === 'selected'
+        ? 'bg-light-accent-main dark:bg-dark-accent-main text-white'
+        : 'cursor-pointer';
+    // hover
+    var hoverClasses = isHovered ? (variant === 'contained' ? 'hover:bg-dark-background-accent300' : '') : '';
+    return (<div className={"flex items-center space-x-1 rounded-full \n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(stateClasses, " ").concat(hoverClasses, " \n        transition-colors duration-300 ease-in-out")} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
+      {Icon && <Icon className="w-4 h-4"/>}
+      <span>{label}</span>
+      {isDeletable && (<button className="ml-2 text-red-500" onClick={function (e) {
+                e.stopPropagation();
+                // Handle delete action
+            }}>
+          {DeleteIcon && <DeleteIcon className="w-4 h-4"/>}
+        </button>)}
+    </div>);
+}

package/dist/components/textField.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface TextFieldProps {
+    id: string;
+    label?: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    autoFocus?: boolean;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode | React.ComponentType<any>;
+    multiline?: boolean;
+    maxRows?: number;
+    disabled?: boolean;
+    error?: boolean;
+}
+export default function TextField({ id, label, value, onChange, onBlur, onFocus, onKeyDown, autoFocus, // Accept the autoFocus prop with default value
+iconLeft, iconRight, multiline, maxRows, disabled, error, }: TextFieldProps): React.JSX.Element;
+export {};

package/dist/components/textField.jsx

@@ -0,0 +1,55 @@
+'use client';
+import React, { useState } from 'react';
+export default function TextField(_a) {
+    var id = _a.id, label = _a.label, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, // Accept the autoFocus prop with default value
+    iconLeft = _a.iconLeft, iconRight = _a.iconRight, _c = _a.multiline, multiline = _c === void 0 ? false : _c, _d = _a.maxRows, maxRows = _d === void 0 ? 6 : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f;
+    var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
+    var baseClasses = 'w-full border rounded-[8px] p-2';
+    var bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-300 ease-in-out';
+    var borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
+    var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(borderColor, "\n    ").concat(baseClasses, "\n    ").concat(disabled ? 'bg-gray-200 cursor-not-allowed' : '', "\n    ").concat(error ? 'border-red-500 focus:ring-red-500' : '', "\n    ").concat(isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : '', "\n    ").concat(!disabled && !error ? 'hover:border-light-outlinedBorder-hover' : '', "\n    border-gray-300\n  ");
+    var renderIconRight = function () {
+        if (React.isValidElement(iconRight)) {
+            return iconRight;
+        }
+        if (typeof iconRight === 'function') {
+            return React.createElement(iconRight);
+        }
+        return null;
+    };
+    return (<div className="flex flex-col w-full">
+      {label && (<label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
+          {label}
+        </label>)}
+      <div className="relative">
+        {iconLeft && (<span className="absolute inset-y-0 left-0 pl-3 flex items-center">
+            {iconLeft}
+          </span>)}
+        {iconRight && (<span className="absolute inset-y-0 right-0 pr-3 flex items-center">
+            {renderIconRight()}
+          </span>)}
+        {multiline ? (<textarea id={id} rows={maxRows} className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
+                setIsFocused(true);
+                if (onFocus)
+                    onFocus(e);
+            }} onBlur={function (e) {
+                setIsFocused(false);
+                if (onBlur)
+                    onBlur(e);
+            }} onKeyDown={onKeyDown} autoFocus={autoFocus} // Pass autoFocus to textarea
+         disabled={disabled}/>) : (<input id={id} type="text" className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
+                setIsFocused(true);
+                if (onFocus)
+                    onFocus(e);
+            }} onBlur={function (e) {
+                setIsFocused(false);
+                if (onBlur)
+                    onBlur(e);
+            }} onKeyDown={onKeyDown} autoFocus={autoFocus} // Pass autoFocus to input
+         disabled={disabled}/>)}
+      </div>
+      {error && (<p className="mt-1 text-light-error-main text-body2">
+          This field is required
+        </p>)}
+    </div>);
+}

package/dist/components/timeStamp.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TimeStampProps {
+    createdAt: string | number | Date;
+    dateFormat: 'absolute' | 'relative';
+}
+export default function TimeStamp({ createdAt, dateFormat, }: TimeStampProps): React.JSX.Element;
+export {};