funuicss 2.5.3 → 2.5.5

package/ui/button/Button.tsx

@@ -3,703 +3,6 @@ import  { ReactNode, HTMLProps, MouseEvent, ChangeEvent } from 'react';
 import * as React from 'react';
 import { PiInfo , PiCheck , PiWarning , PiX , PiSpinner } from "react-icons/pi";
 
-interface ColorPalette {
-  primary: string;
-  primary50: string;
-  primary100: string;
-  primary200: string;
-  primary300: string;
-  primary400: string;
-  primary500: string;
-  primary600: string;
-  primary700: string;
-  primary800: string;
-  primary900: string;
-  secondary: string;
-  secondary50: string;
-  secondary100: string;
-  secondary200: string;
-  secondary300: string;
-  secondary400: string;
-  secondary500: string;
-  secondary600: string;
-  secondary700: string;
-  secondary800: string;
-  secondary900: string;
-  error: string;
-  error50: string;
-  error100: string;
-  error200: string;
-  error300: string;
-  error400: string;
-  error500: string;
-  error600: string;
-  error700: string;
-  error800: string;
-  error900: string;
-  success: string;
-  success50: string;
-  success100: string;
-  success200: string;
-  success300: string;
-  success400: string;
-  success500: string;
-  success600: string;
-  success700: string;
-  success800: string;
-  success900: string;
-  warning: string;
-  warning50: string;
-  warning100: string;
-  warning200: string;
-  warning300: string;
-  warning400: string;
-  warning500: string;
-  warning600: string;
-  warning700: string;
-  warning800: string;
-  warning900: string;
-  muted: string;
-  muted50: string;
-  muted100: string;
-  muted200: string;
-  muted300: string;
-  muted400: string;
-  muted500: string;
-  muted600: string;
-  muted700: string;
-  muted800: string;
-  muted900: string;
-  info: string;
-  info50: string;
-  info100: string;
-  info200: string;
-  info300: string;
-  info400: string;
-  info500: string;
-  info600: string;
-  info700: string;
-  info800: string;
-  info900: string;
-  light: string;
-  light50: string;
-  light100: string;
-  light200: string;
-  light300: string;
-  light400: string;
-  light500: string;
-  light600: string;
-  light700: string;
-  light800: string;
-  light900: string;
-  rose: string;
-  rose50: string;
-  rose100: string;
-  rose200: string;
-  rose300: string;
-  rose400: string;
-  rose500: string;
-  rose600: string;
-  rose700: string;
-  rose800: string;
-  rose900: string;
-  pink: string;
-  pink50: string;
-  pink100: string;
-  pink200: string;
-  pink300: string;
-  pink400: string;
-  pink500: string;
-  pink600: string;
-  pink700: string;
-  pink800: string;
-  pink900: string;
-  fuchsia: string;
-fuchsia50: string;
-fuchsia100: string;
-fuchsia200: string;
-fuchsia300: string;
-fuchsia400: string;
-fuchsia500: string;
-fuchsia600: string;
-fuchsia700: string;
-fuchsia800: string;
-fuchsia900: string;
-purple: string;
-purple50: string;
-purple100: string;
-purple200: string;
-purple300: string;
-purple400: string;
-purple500: string;
-purple600: string;
-purple700: string;
-purple800: string;
-purple900: string;
-violet: string;
-violet50: string;
-violet100: string;
-violet200: string;
-violet300: string;
-violet400: string;
-violet500: string;
-violet600: string;
-violet700: string;
-violet800: string;
-violet900: string;
-indigo: string;
-indigo50: string;
-indigo100: string;
-indigo200: string;
-indigo300: string;
-indigo400: string;
-indigo500: string;
-indigo600: string;
-indigo700: string;
-indigo800: string;
-indigo900: string;
-blue: string;
-blue50: string;
-blue100: string;
-blue200: string;
-blue300: string;
-blue400: string;
-blue500: string;
-blue600: string;
-blue700: string;
-blue800: string;
-blue900: string;
-lightBlue: string;
-lightBlue50: string;
-lightBlue100: string;
-lightBlue200: string;
-lightBlue300: string;
-lightBlue400: string;
-lightBlue500: string;
-lightBlue600: string;
-lightBlue700: string;
-lightBlue800: string;
-lightBlue900: string;
-darkBlue: string;
-darkBlue50: string;
-darkBlue100: string;
-darkBlue200: string;
-darkBlue300: string;
-darkBlue400: string;
-darkBlue500: string;
-darkBlue600: string;
-darkBlue700: string;
-darkBlue800: string;
-darkBlue900: string;
-cyan: string;
-cyan50: string;
-cyan100: string;
-cyan200: string;
-cyan300: string;
-cyan400: string;
-cyan500: string;
-cyan600: string;
-cyan700: string;
-cyan800: string;
-cyan900: string;
-teal: string;
-teal50: string;
-teal100: string;
-teal200: string;
-teal300: string;
-teal400: string;
-teal500: string;
-teal600: string;
-teal700: string;
-teal800: string;
-teal900: string;
-emerald: string;
-emerald50: string;
-emerald100: string;
-emerald200: string;
-emerald300: string;
-emerald400: string;
-emerald500: string;
-emerald600: string;
-emerald700: string;
-emerald800: string;
-emerald900: string;
-green: string;
-green50: string;
-green100: string;
-green200: string;
-green300: string;
-green400: string;
-green500: string;
-green600: string;
-green700: string;
-green800: string;
-green900: string;
-lime: string;
-lime50: string;
-lime100: string;
-lime200: string;
-lime300: string;
-lime400: string;
-lime500: string;
-lime600: string;
-lime700: string;
-lime800: string;
-lime900: string;
-yellow: string;
-yellow50: string;
-yellow100: string;
-yellow200: string;
-yellow300: string;
-yellow400: string;
-yellow500: string;
-yellow600: string;
-yellow700: string;
-yellow800: string;
-yellow900: string;
-amber: string;
-amber50: string;
-amber100: string;
-amber200: string;
-amber300: string;
-amber400: string;
-amber500: string;
-amber600: string;
-amber700: string;
-amber800: string;
-amber900: string;
-orange: string;
-orange50: string;
-orange100: string;
-orange200: string;
-orange300: string;
-orange400: string;
-orange500: string;
-orange600: string;
-orange700: string;
-orange800: string;
-orange900: string;
-red: string;
-red50: string;
-red100: string;
-red200: string;
-red300: string;
-red400: string;
-red500: string;
-red600: string;
-red700: string;
-red800: string;
-red900: string;
-warmGray: string;
-warmGray50: string;
-warmGray100: string;
-warmGray200: string;
-warmGray300: string;
-warmGray400: string;
-warmGray500: string;
-warmGray600: string;
-warmGray700: string;
-warmGray800: string;
-warmGray900: string;
-trueGray: string;
-trueGray50: string;
-trueGray100: string;
-trueGray200: string;
-trueGray300: string;
-trueGray400: string;
-trueGray500: string;
-trueGray600: string;
-trueGray700: string;
-trueGray800: string;
-trueGray900: string;
-coolGray: string;
-coolGray50: string;
-coolGray100: string;
-coolGray200: string;
-coolGray300: string;
-coolGray400: string;
-coolGray500: string;
-coolGray600: string;
-coolGray700: string;
-coolGray800: string;
-coolGray900: string;
-blueGray: string;
-blueGray50: string;
-blueGray100: string;
-blueGray200: string;
-blueGray300: string;
-blueGray400: string;
-blueGray500: string;
-blueGray600: string;
-blueGray700: string;
-blueGray800: string;
-blueGray900: string;
-dark: string;
-dark50: string;
-dark100: string;
-dark200: string;
-dark300: string;
-dark400: string;
-dark500: string;
-dark600: string;
-dark700: string;
-dark800: string;
-dark900: string;
-white: string;
-black: string;
-
-}
-
-
-
-export const colors: ColorPalette = {
-primary: "#6366f1",
-primary50: "#eef2ff",
-primary100: "#e0e7ff",
-primary200: "#c7d2fe",
-primary300: "#a5b4fc",
-primary400: "#818cf8",
-primary500: "#6366f1",
-primary600: "#4f46e5",
-primary700: "#4338ca",
-primary800: "#3730a3",
-primary900: "#312e81",
-secondary: "#ec4899",
-secondary50: "#fdf2f8",
-secondary100: "#fce7f3",
-secondary200: "#fbcfe8",
-secondary300: "#f9a8d4",
-secondary400: "#f472b6",
-secondary500: "#ec4899",
-secondary600: "#db2777",
-secondary700: "#be185d",
-secondary800: "#9d174d",
-secondary900: "#831843",
-error: "#ef4444",
-error50: "#fef2f2",
-error100: "#fee2e2",
-error200: "#fecaca",
-error300: "#fca5a5",
-error400: "#f87171",
-error500: "#ef4444",
-error600: "#dc2626",
-error700: "#b91c1c",
-error800: "#991b1b",
-error900: "#7f1d1d",
-success: "#22c55e",
-success50: "#f0fdf4",
-success100: "#dcfce7",
-success200: "#bbf7d0",
-success300: "#86efac",
-success400: "#4ade80",
-success500: "#22c55e",
-success600: "#16a34a",
-success700: "#15803d",
-success800: "#166534",
-success900: "#14532d",
-warning: "#fb923c",
-warning50: "#fff7ed",
-warning100: "#ffedd5",
-warning200: "#fed7aa",
-warning300: "#fdba74",
-warning400: "#fb923c",
-warning500: "#f97316",
-warning600: "#ea580c",
-warning700: "#c2410c",
-warning800: "#9a3412",
-warning900: "#7c2d12",
-muted: "#78716c",
-muted50: "#fafafa",
-muted100: "#f5f5f5",
-muted200: "#e5e5e5",
-muted300: "#d4d4d4",
-muted400: "#a3a3a3",
-muted500: "#737373",
-muted600: "#525252",
-muted700: "#404040",
-muted800: "#262626",
-muted900: "#171717",
-info: "#0ea5e9",
-info50: "#f0f9ff",
-info100: "#e0f2fe",
-info200: "#bae6fd",
-info300: "#7dd3fc",
-info400: "#38bdf8",
-info500: "#0ea5e9",
-info600: "#0284c7",
-info700: "#0369a1",
-info800: "#075985",
-info900: "#0c4a6e",
-light: "#f5f5f4",
-light50: "#fafaf9",
-light100: "#f5f5f4",
-light200: "#e7e5e4",
-light300: "#d6d3d1",
-light400: "#a8a29e",
-light500: "#78716c",
-light600: "#57534e",
-light700: "#44403c",
-light800: "#292524",
-light900: "#1c1917",
-rose: "#f43f5e",
-rose50: "#fff1f2",
-rose100: "#ffe4e6",
-rose200: "#fecdd3",
-rose300: "#fda4af",
-rose400: "#fb7185",
-rose500: "#f43f5e",
-rose600: "#e11d48",
-rose700: "#be123c",
-rose800: "#9f1239",
-rose900: "#881337",
-pink: "#ec4899",
-pink50: "#fdf2f8",
-pink100: "#fce7f3",
-pink200: "#fbcfe8",
-pink300: "#f9a8d4",
-pink400: "#f472b6",
-pink500: "#ec4899",
-pink600: "#db2777",
-pink700: "#be185d",
-pink800: "#9d174d",
-pink900: "#831843",
-fuchsia: "#d946ef",
-fuchsia50: "#fdf4ff",
-fuchsia100: "#fae8ff",
-fuchsia200: "#f5d0fe",
-fuchsia300: "#f0abfc",
-fuchsia400: "#e879f9",
-fuchsia500: "#d946ef",
-fuchsia600: "#c026d3",
-fuchsia700: "#a21caf",
-fuchsia800: "#86198f",
-fuchsia900: "#701a75",
-purple: "#a855f7",
-purple50: "#faf5ff",
-purple100: "#f3e8ff",
-purple200: "#e9d5ff",
-purple300: "#d8b4fe",
-purple400: "#c084fc",
-purple500: "#a855f7",
-purple600: "#9333ea",
-purple700: "#7e22ce",
-purple800: "#6b21a8",
-purple900: "#581c87",
-violet: "#8b5cf6",
-violet50: "#f5f3ff",
-violet100: "#ede9fe",
-violet200: "#ddd6fe",
-violet300: "#c4b5fd",
-violet400: "#a78bfa",
-violet500: "#8b5cf6",
-violet600: "#7c3aed",
-violet700: "#6d28d9",
-violet800: "#5b21b6",
-violet900: "#4c1d95",
-indigo: "#6366f1",
-indigo50: "#eef2ff",
-indigo100: "#e0e7ff",
-indigo200: "#c7d2fe",
-indigo300: "#a5b4fc",
-indigo400: "#818cf8",
-indigo500: "#6366f1",
-indigo600: "#4f46e5",
-indigo700: "#4338ca",
-indigo800: "#3730a3",
-indigo900: "#312e81",
-blue: "#3b82f6",
-blue50: "#eff6ff",
-blue100: "#dbeafe",
-blue200: "#bfdbfe",
-blue300: "#93c5fd",
-blue400: "#60a5fa",
-blue500: "#3b82f6",
-blue600: "#2563eb",
-blue700: "#1d4ed8",
-blue800: "#1e40af",
-blue900: "#1e3a8a",
-lightBlue: "#0ea5e9",
-lightBlue50: "#f0f9ff",
-lightBlue100: "#e0f2fe",
-lightBlue200: "#bae6fd",
-lightBlue300: "#7dd3fc",
-lightBlue400: "#38bdf8",
-lightBlue500: "#0ea5e9",
-lightBlue600: "#0284c7",
-lightBlue700: "#0369a1",
-lightBlue800: "#075985",
-lightBlue900: "#0c4a6e",
-darkBlue: "#0077e6",
-darkBlue50: "#dbf4ff",
-darkBlue100: "#addbff",
-darkBlue200: "#7cc2ff",
-darkBlue300: "#4aa9ff",
-darkBlue400: "#1a91ff",
-darkBlue500: "#0077e6",
-darkBlue600: "#005db4",
-darkBlue700: "#004282",
-darkBlue800: "#002851",
-darkBlue900: "#000e21",
-cyan: "#06b6d4",
-cyan50: "#ecfeff",
-cyan100: "#cffafe",
-cyan200: "#a5f3fc",
-cyan300: "#67e8f9",
-cyan400: "#22d3ee",
-cyan500: "#06b6d4",
-cyan600: "#0891b2",
-cyan700: "#0e7490",
-cyan800: "#155e75",
-cyan900: "#164e63",
-teal: "#14b8a6",
-teal50: "#f0fdfa",
-teal100: "#ccfbf1",
-teal200: "#99f6e4",
-teal300: "#5eead4",
-teal400: "#2dd4bf",
-teal500: "#14b8a6",
-teal600: "#0d9488",
-teal700: "#0f766e",
-teal800: "#115e59",
-teal900: "#134e4a",
-emerald: "#10b981",
-emerald50: "#ecfdf5",
-emerald100: "#d1fae5",
-emerald200: "#a7f3d0",
-emerald300: "#6ee7b7",
-emerald400: "#34d399",
-emerald500: "#10b981",
-emerald600: "#059669",
-emerald700: "#047857",
-emerald800: "#065f46",
-emerald900: "#064e3b",
-green: "#22c55e",
-green50: "#f0fdf4",
-green100: "#dcfce7",
-green200: "#bbf7d0",
-green300: "#86efac",
-green400: "#4ade80",
-green500: "#22c55e",
-green600: "#16a34a",
-green700: "#15803d",
-green800: "#166534",
-green900: "#14532d",
-lime: "#84cc16",
-lime50: "#f7fee7",
-lime100: "#ecfccb",
-lime200: "#d9f99d",
-lime300: "#bef264",
-lime400: "#a3e635",
-lime500: "#84cc16",
-lime600: "#65a30d",
-lime700: "#4d7c0f",
-lime800: "#3f6212",
-lime900: "#365314",
-yellow: "#eab308",
-yellow50: "#fefce8",
-yellow100: "#fef9c3",
-yellow200: "#fef08a",
-yellow300: "#fde047",
-yellow400: "#facc15",
-yellow500: "#eab308",
-yellow600: "#ca8a04",
-yellow700: "#a16207",
-yellow800: "#854d0e",
-yellow900: "#713f12",
-amber: "#f59e0b",
-amber50: "#fffbeb",
-amber100: "#fef3c7",
-amber200: "#fde68a",
-amber300: "#fcd34d",
-amber400: "#fbbf24",
-amber500: "#f59e0b",
-amber600: "#d97706",
-amber700: "#b45309",
-amber800: "#92400e",
-amber900: "#78350f",
-orange: "#f97316",
-orange50: "#fff7ed",
-orange100: "#ffedd5",
-orange200: "#fed7aa",
-orange300: "#fdba74",
-orange400: "#fb923c",
-orange500: "#f97316",
-orange600: "#ea580c",
-orange700: "#c2410c",
-orange800: "#9a3412",
-orange900: "#7c2d12",
-red: "#ef4444",
-red50: "#fef2f2",
-red100: "#fee2e2",
-red200: "#fecaca",
-red300: "#fca5a5",
-red400: "#f87171",
-red500: "#ef4444",
-red600: "#dc2626",
-red700: "#b91c1c",
-red800: "#991b1b",
-red900: "#7f1d1d",
-warmGray: "#78716c",
-warmGray50: "#fafaf9",
-warmGray100: "#f5f5f4",
-warmGray200: "#e7e5e4",
-warmGray300: "#d6d3d1",
-warmGray400: "#a8a29e",
-warmGray500: "#78716c",
-warmGray600: "#57534e",
-warmGray700: "#44403c",
-warmGray800: "#292524",
-warmGray900: "#1c1917",
-trueGray: "#737373",
-trueGray50: "#fafafa",
-trueGray100: "#f5f5f5",
-trueGray200: "#e5e5e5",
-trueGray300: "#d4d4d4",
-trueGray400: "#a3a3a3",
-trueGray500: "#737373",
-trueGray600: "#525252",
-trueGray700: "#404040",
-trueGray800: "#262626",
-trueGray900: "#171717",
-coolGray: "#6b7280",
-coolGray50: "#f9fafb",
-coolGray100: "#f3f4f6",
-coolGray200: "#e5e7eb",
-coolGray300: "#d1d5db",
-coolGray400: "#9ca3af",
-coolGray500: "#6b7280",
-coolGray600: "#4b5563",
-coolGray700: "#374151",
-coolGray800: "#1f2937",
-coolGray900: "#111827",
-blueGray: "#64748b",
-blueGray50: "#f8fafc",
-blueGray100: "#f1f5f9",
-blueGray200: "#e2e8f0",
-blueGray300: "#cbd5e1",
-blueGray400: "#94a3b8",
-blueGray500: "#64748b",
-blueGray600: "#475569",
-blueGray700: "#334155",
-blueGray800: "#1e293b",
-blueGray900: "#0f172a",
-dark: "#71717a",
-dark50: "#18181b",
-dark100: "#27272a",
-dark200: "#3f3f46",
-dark300: "#52525b",
-dark400: "#71717a",
-dark500: "#a1a1aa",
-dark600: "#d4d4d8",
-dark700: "#e4e4e7",
-dark800: "#f4f4f5",
-dark900: "#fafafa",
-white: "#FFFFFF",
-black: "#000000",
-
-
-}
-
 
 interface ButtonProps {
   color?: string;
@@ -772,9 +75,24 @@ export default function Button({
   onClick,
   ...rest
 }: ButtonProps) {
+  function removeNumbers(text:string) {
+  return text.replace(/[0-9]/g, '');
+}
+function hasNumberAbove(text:string) {
+  const matches = text.match(/\d+/g); // find all numbers in the string
+  if (!matches) return false;
+
+  return matches.some(num => parseInt(num) >= 700);
+}
+
+function hasNumber(text:string) {
+  return /\d/.test(text);
+}
+
+
   const classNames = [
     'button',
-    `text-${color}`,
+    `text-${color ? color : !hasNumber(bg) && !outlined ? "white" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) }`,
     funcss || '',
     rounded ? 'roundBtn' : '',
     hoverless ? 'hoverless' : '',
@@ -789,7 +107,7 @@ export default function Button({
     big ? 'bigBtn' : '',
     bigger ? 'biggerBtn' : '',
     jumbo ? 'jumboBtn' : '',
-    outlined ? `outlined text-${color ? color : bg}` : bg || '',
+    outlined ? `outlined outline-${bg || ''	} text-${color ? color : removeNumbers(bg)}` : bg || '',
     `${fillAnimation ? `${fillTextColor ? `hover-text-${fillTextColor}`: ''} button-fill fill-${fillDirection ? fillDirection : 'left'}` : '' }`
   ].join(' ');
 
@@ -803,7 +121,6 @@ export default function Button({
         height: height || '',
         width: fullWidth ? '100%' : width || '',
         borderRadius: flat ? '0rem' : '',
-        border:`${outlined ? outlineSize ? `${outlineSize}rem solid ${colors[bg as keyof ColorPalette]}` : `0.1rem solid ${colors[bg as keyof ColorPalette]}` : ''}` ,
         ...style
       }}  
       onClick={onClick}
@@ -812,13 +129,13 @@ export default function Button({
       
         {
           isLoading &&
-          <span  className='rotate btn_left_icon'>
+          <span  className='rotate btn_left_icon' style={{lineHeight:"0"}}>
                     <PiSpinner/>
           </span>
         }
     {
       status &&
-      <span  className=' btn_left_icon'>
+      <span  className=' btn_left_icon' style={{lineHeight:"0"}}>
       {status === "success" && <PiCheck />}
 {status === "info" && <PiInfo />}
 {status === "warning" && <PiWarning />}
@@ -826,9 +143,9 @@ export default function Button({
 </span>
     }
       {fillAnimation ? <span  className={`button_fill_span ${bg}`} ></span> : ''}
-      {startIcon && <span className="btn_left_icon">{startIcon}</span>}
+      {startIcon && <span className="btn_left_icon" style={{lineHeight:"0"}}>{startIcon}</span>}
       {text ? text : children}
-      {endIcon && <span className="btn_right_icon">{endIcon}</span>}
+      {endIcon && <span className="btn_right_icon" style={{lineHeight:"0"}}>{endIcon}</span>}
 
     </button>
   </span>