funuicss 2.7.16 → 3.0.0

package/ui/view/View.tsx

@@ -1,157 +0,0 @@
-'use client';
-import * as React from 'react';
-
-type ViewProps = {
-  children?: React.ReactNode;
-  content?: React.ReactNode;
-  funcss?: string;
-  customStyle?: React.CSSProperties;
-
-  // Dimensions
-  height?: string;
-  width?: string;
-  minHeight?: string;
-  maxHeight?: string;
-  minWidth?: string;
-  maxWidth?: string;
-
-  // Spacing
-  padding?: string;
-  margin?: string;
-  gap?: string;
-
-  // Layout & Display
-  fit?: boolean;
-  display?: React.CSSProperties['display'];
-  flexDirection?: React.CSSProperties['flexDirection'];
-  justifyContent?: React.CSSProperties['justifyContent'];
-  alignItems?: React.CSSProperties['alignItems'];
-
-  // Styling
-  background?: string;
-  color?: string;
-  border?: string;
-  borderRadius?: string;
-  boxShadow?: string;
-
-  // Positioning
-  position?: React.CSSProperties['position'];
-  top?: string;
-  left?: string;
-  right?: string;
-  bottom?: string;
-  zIndex?: number;
-  overflow?: React.CSSProperties['overflow'];
-
-  // Accessibility & IDs
-  id?: string;
-  title?: string;
-  role?: string;
-  ariaLabel?: string;
-
-  // Events
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-  onFocus?: React.FocusEventHandler<HTMLDivElement>;
-  onBlur?: React.FocusEventHandler<HTMLDivElement>;
-};
-
-const View = ({
-  children,
-  content,
-  funcss = '',
-  customStyle = {},
-
-  height,
-  width,
-  minHeight,
-  maxHeight,
-  minWidth,
-  maxWidth,
-
-  padding,
-  margin,
-  gap,
-
-  fit,
-  display,
-  flexDirection,
-  justifyContent,
-  alignItems,
-
-  background,
-  color,
-  border,
-  borderRadius,
-  boxShadow,
-
-  position,
-  top,
-  left,
-  right,
-  bottom,
-  zIndex,
-  overflow,
-
-  id,
-  title,
-  role,
-  ariaLabel,
-
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  onFocus,
-  onBlur,
-
-  ...rest
-}: ViewProps) => {
-  return (
-    <div
-      id={id}
-      title={title}
-      role={role}
-      aria-label={ariaLabel}
-      className={`${fit ? 'width-100-p height-100-p' : ''} ${funcss}`}
-      style={{
-        display,
-        flexDirection,
-        justifyContent,
-        alignItems,
-        height,
-        width,
-        minHeight,
-        maxHeight,
-        minWidth,
-        maxWidth,
-        padding,
-        margin,
-        gap,
-        background,
-        color,
-        border,
-        borderRadius,
-        boxShadow,
-        position,
-        top,
-        left,
-        right,
-        bottom,
-        zIndex,
-        overflow,
-        ...customStyle,
-      }}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      {...rest}
-    >
-      {content || children}
-    </div>
-  );
-};
-
-export default View;

package/ui/vista/Vista.tsx

@@ -1,165 +0,0 @@
-'use client';
-import React from 'react';
-import ScrollInView from '../ScrollInView/ScrollInView';
-import { getCssVariableValue } from '../../utils/getCssVariable';
-
-type VistaProps = {
-  layout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
-  pattern?: 'grid' | 'dots' | 'diagonal' | 'checkerboard' | 'horizontal' | 'vertical';
-  patternOpacity?: number;
-  reverse?: boolean;
-  background?: string;
-  padding?: string;
-  textAlign?: 'left' | 'center' | 'right';
-  imgPosition?: 'top' | 'bottom';
-  funcss?: string;
-  blurry?: number;
-  opacity?: number;
-
-  heading?: React.ReactNode;
-  subheading?: React.ReactNode;
-  content?: React.ReactNode;
-  image?: React.ReactNode;
-  cta?: React.ReactNode;
-
-  sectionClass?: string;
-  containerClass?: string;
-  textWrapperClass?: string;
-  imageWrapperClass?: string;
-  children?: React.ReactNode;
-
-  // New Props for Gradient Blob
-  showGradient?: boolean;
-  gradientPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
-  gradientSize?: string; // e.g. '300px'
-  gradientColors?: string; // e.g. 'radial-gradient(circle, #ff6ec4, #7873f5)'
-};
-
-const Vista: React.FC<VistaProps> = ({
-  layout = 'imageRight',
-  reverse = false,
-  background = '',
-  padding = 'padding-lg',
-  textAlign = 'left',
-  imgPosition = 'top',
-  funcss = '',
-  pattern = '',
-  patternOpacity = pattern === 'grid' ? 0.15 : pattern === 'dots' ? 0.4 : pattern === 'diagonal' ? 0.2 : pattern === 'checkerboard' ? 0.2 : pattern === 'horizontal' ? 0.2 : pattern === 'vertical' ? 0.2 : 0.1,
-
-  heading,
-  subheading,
-  content,
-  image,
-  cta,
-
-  sectionClass = '',
-  containerClass = '',
-  textWrapperClass = '',
-  imageWrapperClass = '',
-  children,
-
-  // Gradient Props
-  showGradient = false,
-  gradientPosition = 'bottom-right',
-  gradientSize = '300px',
-  blurry = 100,
-  opacity = 0.4 ,
-  gradientColors,
-}) => {
-  const layoutClass = [
-    layout,
-    reverse ? 'reverse' : '',
-    `text-${textAlign}`,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const TextContent = (
-    <div className={`vista-text ${textWrapperClass}`}>
-      {heading}
-      {subheading}
-      {content}
-      {cta}
-      {children}
-    </div>
-  );
-
-  const ImageContent = image && (
-    <div className={`vista-image ${imageWrapperClass}`}>{image}</div>
-  );
-
-  const isCentered = layout === 'centered';
-  const isStacked = layout === 'stacked';
-
-  const positionStyles: Record<string, React.CSSProperties> = {
-    'top-left': { top: '-100px', left: '-100px' },
-    'top-right': { top: '-100px', right: '-100px' },
-    'bottom-left': { bottom: '-100px', left: '-100px' },
-    'bottom-right': { bottom: '-100px', right: '-100px' },
-    center: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' },
-  };
-
-  let primaryColor = getCssVariableValue('primary')
-  let secondaryColor = getCssVariableValue('secondary')
-
-  const gradientStyle: React.CSSProperties = {
-    position: 'absolute',
-    width: gradientSize,
-    height: gradientSize,
-    background: gradientColors || `radial-gradient(circle, ${primaryColor}, ${secondaryColor})`,
-    opacity: opacity,
-    filter: `blur(${blurry}px)`,
-    pointerEvents: 'none',
-    zIndex: 0,
-    ...positionStyles[gradientPosition],
-  };
-
-  return (
-    <ScrollInView>
-      <div
-        className={`vista 
-          ${pattern === 'grid' ? 'grid-bg' : 
-            pattern === 'dots' ? 'bg-pattern-dots' : 
-            pattern === 'diagonal' ? 'bg-pattern-diagonal' : 
-            pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
-            pattern === 'horizontal' ? 'bg-pattern-horizontal' :
-            pattern === 'vertical' ? 'bg-pattern-vertical' : ''} 
-            ${background} ${padding} ${layoutClass} ${sectionClass} ${funcss}`}
-        style={{ position: 'relative', 
-          overflow: 'hidden'  ,
-          backgroundImage: pattern === 'grid' ? `linear-gradient(to right, rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px),
-          linear-gradient(to bottom, rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px)` :
-          pattern === 'dots' ? `radial-gradient(rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px)` :
-          pattern === 'diagonal' ? `repeating-linear-gradient(45deg, rgba(var(--borderRgb), ${patternOpacity}), rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px, transparent 10px)` :
-          pattern === 'checkerboard' ? `linear-gradient(45deg, rgba(var(--borderRgb), ${patternOpacity}) 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ${patternOpacity}) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ${patternOpacity}) 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ${patternOpacity}) 75%)` :
-          pattern === 'horizontal' ? `linear-gradient(to bottom, rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px)` :
-          pattern === 'vertical' ? `linear-gradient(to right, rgba(var(--borderRgb), ${patternOpacity}) 1px, transparent 1px)` : ''
-         }}
-      >
-        {showGradient && <div style={gradientStyle} />}
-        <div className={`vista-container ${containerClass}`} style={{ position: 'relative', zIndex: 1 }}>
-          {isCentered || isStacked ? (
-            <>
-              {(imgPosition === 'top') && ImageContent}
-              {TextContent}
-              {(imgPosition === 'bottom') && ImageContent}
-            </>
-          ) : reverse ? (
-            <>
-              {ImageContent}
-              {TextContent}
-            </>
-          ) : (
-            <>
-              {(layout === 'imageLeft') && ImageContent}
-              {TextContent}
-              {(layout === 'imageRight') && ImageContent}
-            </>
-          )}
-        </div>
-      </div>
-    </ScrollInView>
-  );
-};
-
-export default Vista;

package/utils/Emojis.tsx

@@ -1,59 +0,0 @@
-export let EmojiSmiley = () => {
-return [
-'😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃','😉','😊','😇','🥰','😍','🤩','😘','😗','☺️','😚',
-'😙','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','😶','😏','😒','🙄','😬','🤥','😌','😔',
-'😪','🤤','😴','😷','🤒','🤕','🤢','🤮','🥵','🥶','😵','🥴','😕','😟','🙁','☹️','😲','😯','😳',
-'🥺','😦','😧','😨','😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡','😠',
-'🤬','😈','👿','💀','☠️','🤡','👹','👺','👻','👽','👾','🤖'
-]
-
-}
-export let EmojiGesture = () => {
-return [
-'👋','🤚','🖐️','✋','🖖','👌','🤌','🤏','✌️','🤞','🫰','🫵','🫱','🫲','🤟','🤘','🤙','👈','👉','👆',
-'🖕','👇','☝️','👍','👎','✊','👊','🤛','🤜','👏','🙌','👐','🤲','🙏','💪','🦾','🦿','🦵','🦶'
-]
-
-}
-export let EmojiSymbol = () => {
-return [
-'❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','❣️','💕','💞','💓','💗','💖','💘','💝','💟',
-'💯','💢','💥','💫','💦','💨','🕳️','💣','💬','👁️‍🗨️','🗨️','🗯️','💭','🌀','🔔','🔕','🎵','🎶',
-'🎼','🔥','⭐','🌟','✨','⚡','💡','🎉','🎊','🎈','🎁','🎀'
-]
-
-}
-export let EmojiTravel = () => {
-return [
-'🚀','🚁','✈️','🛩️','🚗','🚕','🚙','🚌','🚎','🏎️','🚓','🚑','🚒','🚐','🚚','🚛','🛻','🚜','🛴','🚲',
-'🛵','🏍️','🛺','🚨','🚔','🚍','🚘','🚖','🚡','🚟','🚠','🚃','🚋','🚞','🚝','🚄','🚅','🚈','🚂','🚆',
-'🛫','🛬','🛰️','💺','🛶','⛵','🚤','🛳️','⛴️','🚢'
-]
-
-}
-export let EmojiPeople = () => {
-return [
-'👶','🧒','👦','👧','🧑','👱','👨','👩','🧓','👴','👵','🙍','🙎','🙅','🙆','💁','🙋','🧏','🙇','🤦',
-'🤷','🧑‍⚕️','👨‍⚕️','👩‍⚕️','🧑‍🎓','👨‍🎓','👩‍🎓','🧑‍🏫','👨‍🏫','👩‍🏫','🧑‍⚖️','👨‍⚖️','👩‍⚖️','🧑‍🌾',
-'👨‍🌾','👩‍🌾','🧑‍🍳','👨‍🍳','👩‍🍳','🧑‍🔧','👨‍🔧','👩‍🔧','🧑‍🏭','👨‍🏭','👩‍🏭'
-]
-
-}
-export let EmojiAminal = () => {
-return [
-'🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🙈','🙉','🙊','🐒','🐔',
-'🐧','🐦','🐤','🐣','🐥','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄','🐝','🐛','🦋','🐌','🐞','🐜','🪲'
-]
-
-
-}
-
-
-export let AllEmojis =  {
-    'Animals':EmojiAminal(),
-    'People':EmojiPeople(),
-    'Travel':EmojiTravel(),
-    'Smiley':EmojiSmiley(),
-    'Gesture':EmojiGesture(),
-    'Symbols':EmojiSymbol(),
-}

package/utils/Functions.tsx

@@ -1,9 +0,0 @@
-export function isTouchDevice(): boolean {
-  // Check for touch events
-  const hasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-
-  // Check for typical mobile user agents
-  const isMobileAgent = /Mobi|Android|iPhone|iPad|iPod|Opera Mini|IEMobile/i.test(navigator.userAgent);
-
-  return hasTouchSupport && isMobileAgent;
-}

package/utils/getCssVariable.tsx

@@ -1,9 +0,0 @@
-export function getCssVariableValue(name: string): string {
-  if (typeof window === 'undefined' || typeof getComputedStyle === 'undefined') {
-    return ''; // or throw an error / return a fallback
-  }
-
-  const variableName = name.startsWith('--') ? name : `--${name}`;
-  const rootStyles = getComputedStyle(document.documentElement);
-  return rootStyles.getPropertyValue(variableName).trim();
-}