funuicss 2.6.0 → 2.6.1

package/ui/appbar/AppBar.d.ts

@@ -12,6 +12,9 @@ interface NavbarProps {
     sidebarTrigger?: React.ReactNode;
     transparent?: boolean;
     sideBar?: number;
+    hasSidebar?: boolean;
+    sidebarOpen?: boolean;
+    openSidebar?: () => void;
 }
-export default function AppBar({ fixedTop, funcss, padding, fixedBottom, justify, left, center, right, sideBar, sidebarTrigger, transparent, }: NavbarProps): React.JSX.Element;
+export default function AppBar({ fixedTop, funcss, padding, fixedBottom, justify, left, center, right, sideBar, sidebarTrigger, transparent, hasSidebar, openSidebar, sidebarOpen }: NavbarProps): React.JSX.Element;
 export {};

package/ui/appbar/AppBar.js

@@ -43,9 +43,9 @@ var react_1 = require("react");
 var navigation_1 = require("next/navigation"); // <-- Updated import
 var Hamburger_1 = __importDefault(require("./Hamburger"));
 function AppBar(_a) {
-    var fixedTop = _a.fixedTop, funcss = _a.funcss, padding = _a.padding, fixedBottom = _a.fixedBottom, justify = _a.justify, left = _a.left, center = _a.center, right = _a.right, sideBar = _a.sideBar, sidebarTrigger = _a.sidebarTrigger, transparent = _a.transparent;
-    var _b = (0, react_1.useState)(false), isMobileMenuOpen = _b[0], setIsMobileMenuOpen = _b[1];
-    var _c = (0, react_1.useState)(false), isMobileScreen = _c[0], setIsMobileScreen = _c[1];
+    var fixedTop = _a.fixedTop, funcss = _a.funcss, padding = _a.padding, fixedBottom = _a.fixedBottom, justify = _a.justify, left = _a.left, center = _a.center, right = _a.right, sideBar = _a.sideBar, sidebarTrigger = _a.sidebarTrigger, transparent = _a.transparent, hasSidebar = _a.hasSidebar, openSidebar = _a.openSidebar, _b = _a.sidebarOpen, sidebarOpen = _b === void 0 ? false : _b;
+    var _c = (0, react_1.useState)(false), isMobileMenuOpen = _c[0], setIsMobileMenuOpen = _c[1];
+    var _d = (0, react_1.useState)(false), isMobileScreen = _d[0], setIsMobileScreen = _d[1];
     var pathname = (0, navigation_1.usePathname)(); // <-- New hook to detect path changes
     var toggleMenu = function () { return setIsMobileMenuOpen(function (prev) { return !prev; }); };
     var closeMenu = function () { return setIsMobileMenuOpen(false); };
@@ -69,7 +69,9 @@ function AppBar(_a) {
         var isOpen = _a.isOpen;
         return React.createElement(Hamburger_1.default, { isOpen: isOpen });
     };
-    return (React.createElement("nav", { className: "navigation-bar\n        ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n        ").concat(funcss || '', "\n        ").concat(fixedTop ? 'fixed_top_navbar' : '', "\n        ").concat(sideBar ? 'there_is_sidebar' : '', "\n        ").concat(transparent ? 'transparent' : '', "\n        ").concat(fixedBottom ? 'fixedBottom' : '', "\n      "), style: {
+    return (React.createElement("nav", { 
+        // the id will be used to get the height for the sidebar in the sidebar file
+        id: 'appBar', className: "navigation-bar\n        ".concat(isMobileMenuOpen ? 'navbar-mobile-open' : '', "\n        ").concat(funcss || '', "\n        ").concat(fixedTop ? 'fixed_top_navbar' : '', "\n        ").concat(sideBar ? 'there_is_sidebar' : '', "\n        ").concat(transparent ? 'transparent' : '', "\n        ").concat(fixedBottom ? 'fixedBottom' : '', "\n      "), style: {
             padding: "".concat(padding || ''),
             justifyContent: "".concat(justify || ''),
         } },
@@ -79,5 +81,7 @@ function AppBar(_a) {
                 React.createElement(Trigger, { isOpen: isMobileMenuOpen })))),
         React.createElement("div", { className: "linkWrapper" }, center),
         React.createElement("div", { className: "linkWrapper" }, right),
-        isMobileScreen && !isMobileMenuOpen && (React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen })))));
+        isMobileScreen && !isMobileMenuOpen && (React.createElement(React.Fragment, null, hasSidebar ?
+            React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: openSidebar }, sidebarTrigger || React.createElement(Trigger, { isOpen: sidebarOpen }))
+            : React.createElement("span", { className: "sidebar-trigger pointer hover-text-primary", onClick: toggleMenu }, sidebarTrigger || React.createElement(Trigger, { isOpen: isMobileMenuOpen }))))));
 }

package/ui/appbar/AppBar.tsx

@@ -17,6 +17,9 @@ interface NavbarProps {
   sidebarTrigger?: React.ReactNode;
   transparent?: boolean;
   sideBar?: number;
+  hasSidebar?: boolean;
+  sidebarOpen?: boolean;
+  openSidebar?: () => void;
 }
 
 export default function AppBar({
@@ -31,6 +34,9 @@ export default function AppBar({
   sideBar,
   sidebarTrigger,
   transparent,
+  hasSidebar,
+  openSidebar,
+  sidebarOpen = false
 }: NavbarProps) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isMobileScreen, setIsMobileScreen] = useState(false);
@@ -64,6 +70,8 @@ export default function AppBar({
 
   return (
     <nav
+    // the id will be used to get the height for the sidebar in the sidebar file
+    id='appBar'
       className={`navigation-bar
         ${isMobileMenuOpen ? 'navbar-mobile-open' : ''}
         ${funcss || ''}
@@ -90,9 +98,17 @@ export default function AppBar({
       <div className="linkWrapper">{right}</div>
 
       {isMobileScreen && !isMobileMenuOpen && (
-        <span className="sidebar-trigger pointer hover-text-primary" onClick={toggleMenu}>
+       <>
+       {
+        hasSidebar ? 
+         <span className="sidebar-trigger pointer hover-text-primary" onClick={openSidebar}>
+          {sidebarTrigger  || <Trigger isOpen={sidebarOpen} />}
+        </span>
+        :  <span className="sidebar-trigger pointer hover-text-primary" onClick={toggleMenu}>
           {sidebarTrigger || <Trigger isOpen={isMobileMenuOpen} />}
         </span>
+       }
+       </>
       )}
     </nav>
   );

package/ui/input/Input.js

@@ -123,7 +123,8 @@ var Input = function (_a) {
                     }, value: value }, rest))));
         return (react_1.default.createElement("div", { className: "_upload_container" },
             react_1.default.createElement("label", { htmlFor: id || "fileInput", className: "_upload_label" },
-                react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(react_1.default.Fragment, null, "\u21EA")),
+                react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(pi_1.PiCloudArrowUp, null))),
                 react_1.default.createElement("div", { className: "_upload_text", style: {
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',

package/ui/input/Input.tsx

@@ -306,7 +306,7 @@ const Input: React.FC<InputProps> = ({
     return (
           <div className="_upload_container">
           <label htmlFor={id || "fileInput"} className="_upload_label">
-            <div className="_upload_icon">{ icon || <>&#8682;</>}</div> 
+            <div className="_upload_icon">{ icon || <><PiCloudArrowUp /></>}</div> 
             <div className="_upload_text"    style={{
             whiteSpace: 'nowrap',
             overflow: 'hidden',

package/ui/sidebar/SideBar.d.ts

@@ -1,15 +1,24 @@
-import { ReactNode } from 'react';
-import * as React from 'react';
-interface FunLoaderProps {
+import React, { ReactNode } from 'react';
+interface SideBarLink {
+    uri: string;
+    icon: React.ReactNode;
+    text: string;
+    section: string;
+}
+interface SideBarProps {
     funcss?: string;
-    position?: "left" | "right";
-    glassy?: boolean;
+    position?: 'left' | 'right';
     open?: boolean;
     header?: ReactNode;
     content?: ReactNode;
-    close?: ReactNode;
     footer?: ReactNode;
-    fixed?: boolean;
+    top?: number;
+    sidebarWidth?: number;
+    sidebarCss?: string;
+    bodyCss?: string;
+    links?: SideBarLink[];
+    children?: ReactNode;
+    onClose?: () => void;
 }
-export default function SideBar({ funcss, position, glassy, header, open, content, close, footer, fixed, ...rest }: FunLoaderProps): React.JSX.Element;
+export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, sidebarCss, bodyCss, links, children, onClose, }: SideBarProps): React.JSX.Element;
 export {};

package/ui/sidebar/SideBar.js

@@ -1,15 +1,5 @@
 "use strict";
-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);
-};
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -43,44 +33,99 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SideBar;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
+var Text_1 = __importDefault(require("../text/Text"));
+var navigation_1 = require("next/navigation");
 function SideBar(_a) {
-    var funcss = _a.funcss, position = _a.position, glassy = _a.glassy, header = _a.header, open = _a.open, content = _a.content, close = _a.close, footer = _a.footer, fixed = _a.fixed, rest = __rest(_a, ["funcss", "position", "glassy", "header", "open", "content", "close", "footer", "fixed"]);
-    if (open) {
-        return (React.createElement("aside", __assign({ className: "fun_side_bar_wrapper ".concat(fixed ? "fixed_sidebar" : "", " ").concat(glassy ? "glassy" : "") }, rest),
-            React.createElement("div", { className: "\n            fun_sidebar_content ".concat(funcss || "", " ").concat(position || "", " \n            ") },
-                React.createElement(RowFlex_1.default, { justify: 'space-between' },
-                    header &&
-                        React.createElement("div", { className: "col fit" },
-                            " ",
-                            header,
-                            " "),
-                    close && React.createElement("div", { className: "close_sidebar" },
-                        close,
-                        " ")),
-                content &&
-                    React.createElement("div", null, content),
-                footer &&
-                    React.createElement("div", null, footer))));
-    }
-    else {
-        return React.createElement(React.Fragment, null);
-    }
+    var _b;
+    var _c = _a.funcss, funcss = _c === void 0 ? '' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.open, open = _e === void 0 ? false : _e, header = _a.header, content = _a.content, footer = _a.footer, _f = _a.top, top = _f === void 0 ? 0 : _f, _g = _a.sidebarWidth, sidebarWidth = _g === void 0 ? 250 : _g, _h = _a.sidebarCss, sidebarCss = _h === void 0 ? '' : _h, _j = _a.bodyCss, bodyCss = _j === void 0 ? '' : _j, _k = _a.links, links = _k === void 0 ? [] : _k, children = _a.children, onClose = _a.onClose;
+    var _l = (0, react_1.useState)(false), isMobile = _l[0], setIsMobile = _l[1];
+    var _m = (0, react_1.useState)(open), internalOpen = _m[0], setInternalOpen = _m[1];
+    var _o = (0, react_1.useState)('0px'), appBarHeight = _o[0], setAppBarHeight = _o[1];
+    var pathname = (0, navigation_1.usePathname)();
+    var sidebarRef = (0, react_1.useRef)(null);
+    var updateIsMobile = (0, react_1.useCallback)(function () {
+        setIsMobile(window.innerWidth <= 992);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        updateIsMobile();
+        window.addEventListener('resize', updateIsMobile);
+        return function () { return window.removeEventListener('resize', updateIsMobile); };
+    }, [updateIsMobile]);
+    // Sync internal state with prop changes
+    (0, react_1.useEffect)(function () {
+        setInternalOpen(open);
+    }, [open]);
+    (0, react_1.useEffect)(function () {
+        var appBar = document.querySelector('#appBar');
+        if (appBar) {
+            setAppBarHeight("".concat(appBar.offsetHeight, "px"));
+        }
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!isMobile || !internalOpen)
+            return;
+        var handleOutsideClick = function (e) {
+            if (sidebarRef.current && !sidebarRef.current.contains(e.target)) {
+                handleClose();
+            }
+        };
+        document.addEventListener('mousedown', handleOutsideClick);
+        document.addEventListener('touchstart', handleOutsideClick);
+        return function () {
+            document.removeEventListener('mousedown', handleOutsideClick);
+            document.removeEventListener('touchstart', handleOutsideClick);
+        };
+    }, [isMobile, internalOpen]);
+    var handleClose = function () {
+        setInternalOpen(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    var groupedLinks = links.reduce(function (acc, link) {
+        acc[link.section] = acc[link.section] || [];
+        acc[link.section].push(link);
+        return acc;
+    }, {});
+    var isOverlay = isMobile;
+    return (react_1.default.createElement("div", { className: "sidebar-container ".concat(isOverlay ? '' : 'with-content') },
+        internalOpen && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar ".concat(funcss, " ").concat(sidebarCss, "  ").concat(isOverlay ? 'nav_overlay' : ''), style: (_b = {
+                    width: isOverlay ? '100%' : "".concat(sidebarWidth, "px"),
+                    height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
+                    position: 'fixed',
+                    top: appBarHeight || top
+                },
+                _b[position] = 0,
+                _b.padding = '1rem',
+                _b) },
+            react_1.default.createElement(RowFlex_1.default, { justify: "space-between", funcss: "pl-2 pr-2" }, header && react_1.default.createElement("div", null, header)),
+            react_1.default.createElement("section", { className: "sidebar-body mt-3" },
+                links.length > 0 && (react_1.default.createElement("nav", { className: "sidebar-links" }, Object.entries(groupedLinks).map(function (_a) {
+                    var section = _a[0], sectionLinks = _a[1];
+                    return (react_1.default.createElement("div", { key: section, className: "sidebar-section mb-2 bt pt-2 pb-2" },
+                        react_1.default.createElement(Text_1.default, { size: "sm", funcss: "opacity-5 p-1 pl-2 pr-2" }, section),
+                        sectionLinks.map(function (link) {
+                            var isActive = pathname === link.uri;
+                            return (react_1.default.createElement("a", { onClick: handleClose, key: link.uri, href: link.uri },
+                                react_1.default.createElement("div", { className: "p-1 pl-2 pr-2 sidebar-link  ".concat(isActive ? 'primary50 outline-primary200' : 'hoverable') },
+                                    react_1.default.createElement("span", { style: { lineHeight: 0 } }, link.icon),
+                                    react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
+                        })));
+                }))),
+                content),
+            footer && react_1.default.createElement("footer", { className: "sidebar-footer mt-2" }, footer))),
+        react_1.default.createElement("main", { className: "main-content ".concat(bodyCss), style: {
+                flex: 1,
+                marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(sidebarWidth, "px") : 0,
+                marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(sidebarWidth, "px") : 0,
+                overflowY: 'auto',
+                height: '100vh',
+                paddingTop: appBarHeight || top,
+                transition: 'margin 0.3s ease',
+            } }, children)));
 }

package/ui/sidebar/SideBar.tsx

@@ -1,62 +1,189 @@
-import { ReactNode, useState, useEffect } from 'react';
-import * as React from 'react'
+'use client';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  ReactNode,
+  useCallback,
+} from 'react';
 import RowFlex from '../specials/RowFlex';
+import Text from '../text/Text';
+import { usePathname } from 'next/navigation';
+import { PiX } from 'react-icons/pi';
 
+interface SideBarLink {
+  uri: string;
+  icon: React.ReactNode;
+  text: string;
+  section: string;
+}
 
-interface FunLoaderProps {
+interface SideBarProps {
   funcss?: string;
-  position?: "left" | "right";
-  glassy?: boolean;
-  open?:boolean
-  header?: ReactNode ,
-  content?: ReactNode ,
-  close?: ReactNode ,
-  footer?: ReactNode ,
-  fixed?:boolean
+  position?: 'left' | 'right';
+  open?: boolean;
+  header?: ReactNode;
+  content?: ReactNode;
+  footer?: ReactNode;
+  top?: number;
+  sidebarWidth?: number;
+  sidebarCss?: string;
+  bodyCss?: string;
+  links?: SideBarLink[];
+  children?: ReactNode;
+  onClose?: () => void;
 }
 
 export default function SideBar({
-  funcss,
-  position ,
-  glassy ,
-  header ,
-  open ,
-  content ,
-  close,
-  footer ,
-  fixed,
-  ...rest
-}: FunLoaderProps) {
-
-
-  
-  if(open){
-    return (
-        <aside className={`fun_side_bar_wrapper ${fixed ? "fixed_sidebar" : ""} ${glassy ? "glassy" : ""}`} {...rest}>
-            <div className={`
-            fun_sidebar_content ${funcss || ""} ${position || ""} 
-            `} 
-           >
-              <RowFlex justify='space-between'>
-             {
-                    header && 
-                    <div className="col fit"> {header} </div>
-                }
-              {close && <div className="close_sidebar">{close} </div>}
-
-              </RowFlex>
-                {
-                    content && 
-                    <div>{content}</div>
-                }
-                {
-                    footer && 
-                    <div>{footer}</div>
-                }
+  funcss = '',
+  position = 'left',
+  open = false,
+  header,
+  content,
+  footer,
+  top = 0,
+  sidebarWidth = 250,
+  sidebarCss = '',
+  bodyCss = '',
+  links = [],
+  children,
+  onClose,
+}: SideBarProps) {
+  const [isMobile, setIsMobile] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(open);
+  const [appBarHeight, setAppBarHeight] = useState('0px');
+  const pathname = usePathname();
+  const sidebarRef = useRef<HTMLDivElement>(null);
+
+  const updateIsMobile = useCallback(() => {
+    setIsMobile(window.innerWidth <= 992);
+    
+  }, []);
+
+  useEffect(() => {
+    updateIsMobile();
+    window.addEventListener('resize', updateIsMobile);
+    return () => window.removeEventListener('resize', updateIsMobile);
+  }, [updateIsMobile]);
+
+  // Sync internal state with prop changes
+  useEffect(() => {
+    setInternalOpen(open);
+  }, [open]);
+
+  useEffect(() => {
+    const appBar = document.querySelector('#appBar') as HTMLElement;
+    if (appBar) {
+      setAppBarHeight(`${appBar.offsetHeight}px`);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isMobile || !internalOpen) return;
+
+    const handleOutsideClick = (e: MouseEvent | TouchEvent) => {
+      if (sidebarRef.current && !sidebarRef.current.contains(e.target as Node)) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+    document.addEventListener('touchstart', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+      document.removeEventListener('touchstart', handleOutsideClick);
+    };
+  }, [isMobile, internalOpen]);
+
+  const handleClose = () => {
+    setInternalOpen(false);
+    onClose?.();
+  };
+
+  const groupedLinks = links.reduce<Record<string, SideBarLink[]>>((acc, link) => {
+    acc[link.section] = acc[link.section] || [];
+    acc[link.section].push(link);
+    return acc;
+  }, {});
+
+  const isOverlay = isMobile;
+
+  return (
+    <div className={`sidebar-container ${isOverlay ? '' : 'with-content'}`}>
+      {internalOpen && (
+        <aside
+          role="complementary"
+          ref={sidebarRef}
+          className={`sidebar ${funcss} ${sidebarCss}  ${isOverlay ? 'nav_overlay' : ''}`}
+          style={{
+            width: isOverlay ? '100%' : `${sidebarWidth}px`,
+            height: `calc(100vh - ${appBarHeight || top || '0px'})`,
+            position: 'fixed',
+            top: appBarHeight || top,
+            [position]: 0,
+            padding: '1rem',
+          }}
+        >
+              {/* {isMobile && (
+              <div
+                className="hover-text-error pointer"
+                onClick={handleClose}
+                style={{ cursor: 'pointer' }}
+              >
+                {close || <PiX size={25}/>}
               </div>
+            )} */}
+
+          <RowFlex justify="space-between" funcss="pl-2 pr-2">
+            {header && <div>{header}</div>}
+        
+          </RowFlex>
+
+          <section className="sidebar-body mt-3">
+            {links.length > 0 && (
+              <nav className="sidebar-links">
+                {Object.entries(groupedLinks).map(([section, sectionLinks]) => (
+                  <div key={section} className="sidebar-section mb-2 bt pt-2 pb-2">
+                    <Text size="sm" funcss="opacity-5 p-1 pl-2 pr-2">{section}</Text>
+                    {sectionLinks.map(link => {
+                      const isActive = pathname === link.uri;
+                      return (
+                        <a    onClick={handleClose} key={link.uri} href={link.uri}>
+                          <div   className={`p-1 pl-2 pr-2 sidebar-link  ${
+                            isActive ? 'primary50 outline-primary200' : 'hoverable'
+                          }`}>
+                            <span style={{ lineHeight: 0 }}>{link.icon}</span>
+                            <Text text={link.text} size="sm" weight={400} />
+                          </div>
+                        </a>
+                      );
+                    })}
+                  </div>
+                ))}
+              </nav>
+            )}
+            {content}
+          </section>
+
+          {footer && <footer className="sidebar-footer mt-2">{footer}</footer>}
         </aside>
-      );
-  }else{
-    return <></>
-  }
-}
+      )}
+
+      <main
+        className={`main-content ${bodyCss}`}
+        style={{
+          flex: 1,
+          marginLeft: position === 'left' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
+          marginRight: position === 'right' && !isOverlay && internalOpen ? `${sidebarWidth}px` : 0,
+          overflowY: 'auto',
+          height: '100vh',
+          paddingTop: appBarHeight || top,
+          transition: 'margin 0.3s ease',
+        }}
+      >
+        {children}
+      </main>
+    </div>
+  );
+}

package/ui/specials/Circle.d.ts

@@ -8,8 +8,9 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
     children?: ReactNode;
     hoverable?: boolean;
     raised?: boolean;
+    bordered?: boolean;
     key?: React.Key;
     onClick?: () => void;
 }
-export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, ...rest }: Circle_Props): React.JSX.Element;
+export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, bordered, ...rest }: Circle_Props): React.JSX.Element;
 export {};

package/ui/specials/Circle.js

@@ -59,8 +59,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Circle;
 var React = __importStar(require("react"));
 function Circle(_a) {
-    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick"]);
-    return (React.createElement("div", __assign({ className: "pointer avatar ".concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: {
+    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, _c = _a.bg, bg = _c === void 0 ? 'lighter' : _c, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, bordered = _a.bordered, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "bordered"]);
+    return (React.createElement("div", __assign({ className: " ".concat(bordered ? "border" : "", "pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: {
             width: "".concat(size + "rem" || '2.3rem'),
             height: "".concat(size + "rem" || '2.3rem'),
         }, key: key, onClick: onClick }, rest),

package/ui/specials/Circle.tsx

@@ -11,6 +11,7 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
     children?: ReactNode;
     hoverable?: boolean;
     raised?:boolean 
+    bordered?:boolean 
     key?:React.Key
     onClick?: ()=> void
   }
@@ -19,18 +20,19 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
 export default function Circle({
   size = 2,
   funcss,
-  bg,
+  bg = 'lighter',
   color,
   children,
   hoverable,
   raised ,
   key , 
   onClick ,
+  bordered,
   ...rest
 }: Circle_Props) {
   return (
       <div
-        className={`pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || 'lighter'} ${
+        className={` ${bordered ? "border" : ""}pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || 'lighter'} ${
           hoverable ? 'hoverable' : ''
         }`}
         style={{

package/ui/text/Text.d.ts

@@ -32,7 +32,7 @@ type TypographyProps = {
     fontFamily?: string;
     textShadow?: string;
     textAlign?: "left" | "center" | "right" | "justify";
-    opacity?: number;
+    opacity?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
     zIndex?: number;
     truncate?: number;
     transform?: string;

package/ui/text/Text.js

@@ -28,8 +28,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var pi_1 = require("react-icons/pi");
 var Text = function (_a) {
-    var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, _b = _a.size, size = _b === void 0 ? 'base' : _b, // default
-    rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "size"]);
+    var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _b = _a.size, size = _b === void 0 ? 'base' : _b, // default
+    rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "size"]);
     var Tag = block ? 'div' : 'span';
     var sizeClass = "".concat(size === 'h1' ? "h1" :
         size === 'h2' ? "h2" :
@@ -66,6 +66,7 @@ var Text = function (_a) {
         uppercase ? 'uppercase' : '',
         lowercase ? 'lowercase' : '',
         capitalize ? 'capitalize' : '',
+        opacity ? 'opacity-' + opacity : '',
     ]
         .filter(Boolean)
         .join(' ');