funuicss 2.7.16 → 3.0.0

package/ui/modal/Modal.tsx

@@ -1,140 +0,0 @@
-'use client';
-import * as React from 'react';
-import ModalHeader from './Header';
-import ModalContent from './Content';
-import ModalAction from './Action';
-import { PiX , PiPaperPlaneRight} from 'react-icons/pi';
-import Button from '../button/Button';
-
-interface ModalProps {
-  children?: React.ReactNode;
-  funcss?: string;
-  animation?: string;
-  duration?: number;
-  open: boolean;
-  hideClose: boolean;
-  setOpen: (val: boolean) => void;
-  maxWidth?: string;
-  maxHeight?: string;
-  height?: string;
-  width?: string;
-  backdrop?: boolean;
-  body?: React.ReactNode;
-  bodycss?: string;
-  title?: React.ReactNode;
-  okIcon?: React.ReactNode;
-  titlecss?: string;
-  footer?: React.ReactNode;
-  footercss?: string;
-  close?: React.ReactNode;
-  closecss?: string;
-  id?: string;
-  position?: string;
-  flat?: boolean;
-  onOk?: () => void; // 👈 new
-  onOkText?: string; // 👈 new
-}
-
-export default function Modal({
-  children,
-  funcss,
-  animation,
-  duration,
-  open,
-  setOpen,
-  maxWidth,
-  maxHeight,
-  okIcon,
-  height,
-  hideClose = false,
-  width,
-  backdrop = false,
-  title,
-  titlecss,
-  body,
-  bodycss,
-  footer,
-  footercss,
-  close,
-  closecss,
-  position,
-  id,
-  flat,
-  onOk,       // 👈 added
-  onOkText,   // 👈 added
-  ...rest
-}: ModalProps) {
-  const modalId = id || '_mymodal';
-
-  const handleClickOutside = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target && (e.target as HTMLElement).id === modalId) {
-      setOpen(false);
-    }
-  };
-
-  const handleOkClick = () => {
-    if (onOk) onOk();
-    else setOpen(false); // default behavior if no onOk is provided
-  };
-
-  if (!open) return null;
-
-  return (
-    <div
-      className={`modal ${backdrop ? 'backdrop' : ''} ${position || ''}`}
-      id={modalId}
-      onClick={handleClickOutside}
-    >
-      <div
-        className={`modal-content ${funcss || ''} ${flat ? 'flat' : ''}`}
-        style={{
-          animation: `${duration || 0.2}s ${animation || 'ScaleUp'}`,
-          maxWidth: maxWidth || undefined,
-          maxHeight: maxHeight || undefined,
-          width: width || '100%',
-          height: height || undefined,
-        }}
-        {...rest}
-      >
-        {title && (
-          <ModalHeader
-            funcss={titlecss || ''}
-            title={title}
-            close={!hideClose ? 
-              
-              <div
-                onClick={() => setOpen(false)}
-                className={`${closecss || ''} pointer hover-text-error`}
-              >
-                    {close || <PiX size={25} />}
-              </div>
-            : ""
-            }
-          />
-        )}
-
-          <ModalContent funcss={bodycss || ''}>
-            {body || children}
-          </ModalContent>
-
-               {/* Show default Ok button if no custom footer */}
-        {footer ? (
-          <ModalAction funcss={footercss || ''}>
-            {footer}
-          </ModalAction>
-        ) : (
-          <ModalAction funcss='text-right'>
-            <Button
-            bg='success800'
-            endIcon={okIcon || <PiPaperPlaneRight />} 
-            raised
-              onClick={handleOkClick}
-            >
-              {onOkText || 'OK'}
-            </Button>
-          </ModalAction>
-        )}
-      </div>
-    </div>
-  );
-}

package/ui/notification/Content.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-type NotificationContentProps = {
-  funcss?: string;
-  children?: React.ReactNode;
-};
-
-export default function NotificationContent({ funcss, children }: NotificationContentProps) {
-  return (
-    <div className={`notificationContent ${funcss ? funcss : ''}`}>
-      {children}
-    </div>
-  );
-}

package/ui/notification/Footer.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-type NotificationFooterProps = {
-  funcss?: string;
-  children?: React.ReactNode;
-};
-
-export default function NotificationFooter({ funcss, children }: NotificationFooterProps) {
-  return (
-    <div className={`notificationFooter ${funcss ? funcss : ''}`}>
-      {children}
-    </div>
-  );
-}

package/ui/notification/Header.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-type NotificationHeaderProps = {
-  funcss?: string;
-  children?: React.ReactNode;
-};
-
-export default function NotificationHeader({ funcss, children }: NotificationHeaderProps) {
-  return (
-    <div className={`notificationHeader ${funcss ? funcss : ''}`}>
-      {children}
-    </div>
-  );
-}

package/ui/notification/Notification.tsx

@@ -1,62 +0,0 @@
-'use client'; 
-import * as React from 'react';
-import NotificationHeader from './Header';
-import NotificationContent from './Content';
-import NotificationFooter from './Footer';
-
-type NotificationProps = {
-  position: string;
-  funcss?: string;
-  animation?: string;
-  duration?: number;
-  children: React.ReactNode;
-  state: boolean;
-  width?: string;
-  header?: React.ReactNode;
-  content?: React.ReactNode;
-  footer?: React.ReactNode; 
-};
-
-export default function Notification({
-  position,
-  funcss,
-  animation,
-  duration,
-  children,
-  state,
-  width,
-  header,
-  content,
-  footer 
-}: NotificationProps) {
-  if (state) {
-    return (
-      <div
-        className={`notification ${position} ${funcss}`}
-        style={{ animation: ` ${duration ? duration : 0.2}s ${animation}`, width: width ? width : '450px' }}
-      >
-        {
-          header && 
-          <NotificationHeader>
-            {header}
-          </NotificationHeader>
-        }
-        {
-          content && 
-          <NotificationContent>
-            {content}
-          </NotificationContent>
-        }
-        {
-          footer && 
-          <NotificationFooter>
-            {footer}
-          </NotificationFooter>
-        }
-        {children}
-      </div>
-    );
-  } else {
-    return null;
-  }
-}

package/ui/page/NotFound.tsx

@@ -1,67 +0,0 @@
-'use client'
-import * as React from 'react';
-import Button from '../button/Button';
-import {PiArrowLeft} from 'react-icons/pi'
-import Text from '../text/Text';
-
-interface NotFoundProps {
-    header?:React.ReactNode 
-    code?:number 
-    content?:React.ReactNode 
-    action?:React.ReactNode
-}
-
-export default function NotFound(
-    {
-        header , 
-        code ,
-        content ,
-        action
-    }:NotFoundProps
-) {
-  return (
-    <div>
-      <div>
-        <div className="central" style={{ minHeight: "100vh", width: "100%", padding: "4rem 0px" }}>
-          <div className="text-center width-600-max">
-          {
-            code ? 
-            code :
-            <div className="h2 text-warning round-edge">
-            404
-          </div>
-          }
-            <div style={{ margin: "1.4rem 0px" }}>
-              {
-                header ? header 
-                : 
-                <div className="text-big text-bold text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
-                Page not found 🤔
-              </div>
-              }
-            </div>
-          {
-            content ? content :
-            <div className="article">
-            <Text article text={`Don't worry, it happens to the best of us 😅. We'll help you find what you're looking for.`} color="dark300" block/>
-          </div>
-          }
-            <div style={{ margin: "2rem 0px" }}>
-              {
-                action ? action :
-                <div className="row-flex gap" style={{ justifyContent: "center", gap: "0.4rem" }}>
-                <Button raised rounded startIcon={<PiArrowLeft />} bg='primary' onClick={() => {
-                    window.history.back()
-                  }}>
-                 Take me back 🏠
-                </Button>
-              </div>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-

package/ui/page/UnAuthorized.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import Button from '../button/Button';
-import {PiArrowLeft} from 'react-icons/pi'
-
-interface UnAuthorizedProps {
-    header?:React.ReactNode 
-    code?:number 
-    content?:React.ReactNode 
-    action?:React.ReactNode
-}
-
-export default function UnAuthorized(
-    {
-        header , 
-        code ,
-        content ,
-        action
-    }:UnAuthorizedProps
-) {
-  return (
-    <div>
-      <div>
-        <div className="central" style={{ minHeight: "100vh", width: "100%", padding: "4rem 0px" }}>
-          <div className="text-center width-600-max">
-          {
-            code ? 
-            code :
-            <div className="h2 text-warning round-edge">
-            401
-          </div>
-          }
-            <div style={{ margin: "1.4rem 0px" }}>
-              {
-                header ? header 
-                : 
-                <div className="text-big text-bold text-dark300" style={{ display: "block", transition: "all 0.2s linear 0s" }}>
-                🚫 Unauthorized Access
-              </div>
-              }
-            </div>
-          {
-            content ? content :
-            <div className="article">
-           Sorry! You do not have access to this resource.
-          </div>
-          }
-            <div style={{ margin: "2rem 0px" }}>
-              {
-                action ? action :
-                <div className="row-flex gap" style={{ justifyContent: "center", gap: "0.4rem" }}>
-            <Button raised rounded startIcon={<PiArrowLeft />} bg='primary' onClick={() => {
-                              window.history.back()
-                            }}>
-                           Take Me Back
-                          </Button>
-              </div>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/ui/progress/Bar.tsx

@@ -1,114 +0,0 @@
-'use client'; 
-import * as React from 'react';
-import { PiCheck } from 'react-icons/pi';
-
-interface ProgressBarProps {
-  funcss?: string;
-  progress: number;
-  height?: number;
-  children?: React.ReactNode;
-  content?: ((progress: number) => React.ReactNode) | React.ReactNode;
-  bg?: string; // Now CSS class names, e.g. 'primary', 'success'
-  raised?: boolean;
-  rounded?: boolean;
-  type?: 'linear' | 'circle';
-  size?: number;
-  strokeWidth?: number;
-}
-
-export default function ProgressBar({
-  funcss,
-  progress,
-  height = 16,
-  children,
-  content,
-  raised,
-  rounded,
-  bg = 'primary', // default CSS class name
-  type = 'linear',
-  size = 60,
-  strokeWidth = 6,
-}: ProgressBarProps) {
-  const clampedProgress = Math.min(100, Math.max(0, progress));
-  const isComplete = clampedProgress >= 100;
-  const effectiveBg = isComplete ? 'success' : bg;
-
-  const renderContent = () => {
-    if (React.isValidElement(content)) return content;
-    if (typeof content === 'function') return content(clampedProgress);
-    if (typeof content === 'string') return content;
-    return `${clampedProgress}%`;
-  };
-
-  if (type === 'circle') {
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const offset = circumference - (clampedProgress / 100) * circumference;
-
-    return (
-      <div className={`relative flex justify-center items-center ${funcss}`} style={{ width: size, height: size }}>
-        <svg width={size} height={size} className="rotate-[-90deg]">
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            strokeWidth={strokeWidth}
-            fill="none"
-            stroke="#e5e7eb" // light gray background stroke
-          />
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            strokeWidth={strokeWidth}
-            fill="none"
-            className={effectiveBg}
-            strokeDasharray={circumference}
-            strokeDashoffset={offset}
-            strokeLinecap="round"
-            style={{ transition: 'stroke-dashoffset 0.4s ease, stroke 0.3s ease' }}
-          />
-        </svg>
-        <div
-          className="absolute text-center font-bold text-sm"
-          style={{
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: size,
-            height: size,
-          }}
-        >
-          {isComplete ? <PiCheck className="text-success800" size={size / 2.2} /> : renderContent()}
-        </div>
-      </div>
-    );
-  }
-
-  // Linear bar
-  return (
-    <div className={`progressBar ${raised ? 'raised' : ''} ${rounded ? 'rounded' : ''} ${funcss || ''}`}>
-      <div
-        className={`progressInner ${rounded ? 'rounded' : ''} ${effectiveBg}`}
-        style={{
-          width: `${clampedProgress}%`,
-          height: `${height}px`,
-          padding: '0 1rem',
-          transition: 'width 0.3s ease, background-color 0.3s ease',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-          fontWeight: 'bold',
-          color: '#fff',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {isComplete ? <PiCheck /> : renderContent()} {children}
-      </div>
-    </div>
-  );
-}

package/ui/richtext/RichText.tsx

@@ -1,156 +0,0 @@
-'use client';
-import React, { useEffect, useRef } from 'react';
-import { useQuill } from 'react-quilljs';
-import 'quill/dist/quill.bubble.css';
-import 'quill/dist/quill.snow.css'; // Add support for snow theme
-import { MdOutlineEmojiEmotions } from 'react-icons/md';
-import { AllEmojis } from '../../utils/Emojis';
-import Dropdown from '../drop/Dropdown';
-import RowFlex from '../specials/RowFlex';
-import ToolTip from '../tooltip/ToolTip';
-import Circle from '../specials/Circle';
-import Tip from '../tooltip/Tip';
-
-type RangeStatic = {
-  index: number;
-  length: number;
-};
-
-interface RichTextProps {
-  value: string;
-  onChange: (content: string) => void;
-  showEmojis?: boolean;
-  placeholder?: string;
-  afterEmoji?: React.ReactNode;
-  funcss?: string;
-
-  /** Custom Quill modules (e.g., additional toolbar items) */
-  modules?: any;
-
-  /** Quill theme (e.g. 'bubble' | 'snow') */
-  theme?: 'bubble' | 'snow';
-
-  /** Optional fontFamily override */
-  fontFamily?: string;
-}
-
-const RichText: React.FC<RichTextProps> = ({
-  value,
-  onChange,
-  showEmojis = false,
-  placeholder = 'Write something...',
-  afterEmoji,
-  funcss = '',
-  modules,
-  theme = 'bubble',
-  fontFamily,
-}) => {
-  const savedRange = useRef<RangeStatic | null>(null);
-
-  // Default modules (basic toolbar)
-  const defaultModules = {
-    toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
-  };
-
-  const { quill, quillRef } = useQuill({
-    theme,
-    placeholder,
-    modules: modules || defaultModules,
-  });
-
-  useEffect(() => {
-    if (!quill) return;
-
-    const handleSelectionChange = (range: RangeStatic | null) => {
-      if (range) savedRange.current = range;
-    };
-
-    const handleTextChange = () => {
-      onChange(quill.root.innerHTML);
-    };
-
-    quill.on('selection-change', handleSelectionChange);
-    quill.on('text-change', handleTextChange);
-
-    return () => {
-      quill.off('selection-change', handleSelectionChange);
-      quill.off('text-change', handleTextChange);
-    };
-  }, [quill, onChange]);
-
-  useEffect(() => {
-    if (quill && value !== quill.root.innerHTML) {
-      quill.root.innerHTML = value;
-    }
-  }, [quill, value]);
-
-  const insertEmoji = (emoji: string) => {
-    if (quill && savedRange.current) {
-      quill.insertText(savedRange.current.index, emoji);
-      quill.setSelection(savedRange.current.index + emoji.length);
-    }
-  };
-
-  const renderEmojiSection = (title: string, emojis: string[]) => (
-    <>
-      <div className="mb-2 mt-2 text-sm">{title}</div>
-      <RowFlex gap={0.3}>
-        {emojis.map((emoji, i) => (
-          <span key={i} className="h6 pointer" onClick={() => insertEmoji(emoji)}>
-            {emoji}
-          </span>
-        ))}
-      </RowFlex>
-    </>
-  );
-
-  return (
-    <div
-   className={funcss}
-    >
-      <div id="editor-container" className="bubble-editor-container  p-0">
-        <div ref={quillRef}    className={theme === 'bubble' ? "bubble-editor " : "snow-editor "}
-      style={{
-        fontFamily: fontFamily || 'inherit',
-      }}/>
-      </div>
-
-      {(showEmojis || afterEmoji) && (
-        <RowFlex gap={0.5} funcss='mt-1'>
-          {showEmojis && (
-            <Dropdown
-              closableOnlyOutside
-              direction="dropdown"
-              openOnHover={false}
-              button={
-                <ToolTip>
-                  <Circle funcss="bg border">
-                    <MdOutlineEmojiEmotions />
-                  </Circle>
-                  <Tip tip="top" animation="ScaleUp" duration={0.5} content="Emojis" />
-                </ToolTip>
-              }
-              items={[
-                {
-                  label: (
-                    <div className="w-200 h-300" style={{ overflowY: 'auto' }}>
-                      {renderEmojiSection('❤️ Smileys & People', AllEmojis.Smiley)}
-                      {renderEmojiSection('👍 Gestures & Body Parts', AllEmojis.Gesture)}
-                      {renderEmojiSection('🔥 Symbols & Expressions', AllEmojis.Symbols)}
-                      {renderEmojiSection('🚀 Travel, Objects & Activities', AllEmojis.Travel)}
-                      {renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', AllEmojis.People)}
-                      {renderEmojiSection('🐶 Animals & Nature', AllEmojis.Animals)}
-                    </div>
-                  ),
-                },
-              ]}
-            />
-          )}
-          {afterEmoji}
-        </RowFlex>
-      )}
-    </div>
-  );
-};
-
-export default RichText;