funuicss 2.7.6 → 2.7.8

package/ui/datepicker/DatePicker.tsx

@@ -0,0 +1,143 @@
+'use client';
+import React, { useState } from 'react';
+import dayjs from 'dayjs';
+import Avatar from '../avatar/Avatar';
+import { PiCaretLeft, PiCaretRight, PiX, PiXCircle } from 'react-icons/pi';
+
+interface DatePickerProps {
+  mode?: 'single' | 'interval';
+  funcss?: string;
+  onSelect?: (value: Date | [Date, Date]) => void;
+  value?: Date | [Date, Date];
+  className?: string;
+}
+
+type Selection = Date | [Date, Date | null] | null;
+
+const DatePicker: React.FC<DatePickerProps> = ({
+  mode = 'single',
+  onSelect,
+  value,
+  funcss,
+  className = '',
+}) => {
+  const [currentMonth, setCurrentMonth] = useState(dayjs());
+  const [selected, setSelected] = useState<Selection>(value || null);
+
+  const daysInMonth = currentMonth.daysInMonth();
+  const firstDay = currentMonth.startOf('month').day(); // 0 = Sunday
+
+  const days: (Date | null)[] = [];
+  for (let i = 0; i < firstDay; i++) {
+    days.push(null); // padding
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    days.push(currentMonth.date(i).toDate());
+  }
+
+  const handleSelect = (date: Date) => {
+    if (mode === 'single') {
+      setSelected(date);
+      onSelect?.(date);
+    } else if (mode === 'interval') {
+      if (!selected || !Array.isArray(selected)) {
+        setSelected([date, null]);
+      } else {
+        const [start, end] = selected;
+        if (!end) {
+          const range: [Date, Date] =
+            dayjs(date).isBefore(dayjs(start)) ? [date, start] : [start, date];
+          setSelected(range);
+          onSelect?.(range);
+        } else {
+          setSelected([date, null]); // restart
+        }
+      }
+    }
+  };
+
+  const isSelected = (date: Date) => {
+    if (!selected) return false;
+    if (mode === 'single' && selected instanceof Date) {
+      return dayjs(selected).isSame(date, 'day');
+    }
+    if (Array.isArray(selected)) {
+      const [start, end] = selected;
+      if (start && end) {
+        return (
+          dayjs(date).isSame(start, 'day') ||
+          dayjs(date).isSame(end, 'day') ||
+          (dayjs(date).isAfter(start) && dayjs(date).isBefore(end))
+        );
+      }
+      return dayjs(date).isSame(start, 'day');
+    }
+    return false;
+  };
+
+  const nextMonth = () => setCurrentMonth(currentMonth.add(1, 'month'));
+  const prevMonth = () => setCurrentMonth(currentMonth.subtract(1, 'month'));
+
+  const handleClear = () => {
+    setSelected(null);
+    onSelect?.(mode === 'single' ? null as unknown as Date : null as unknown as [Date, Date]);
+  };
+
+  const formatDate = (date: Date | null | undefined) =>
+    date ? dayjs(date).format('MMM D, YYYY') : '...';
+
+  return (
+    <div className={`datepicker ${funcss} ${className}`}>
+      <div className="datepicker-header">
+        <Avatar onClick={prevMonth}><PiCaretLeft /></Avatar>
+        <span>{currentMonth.format('MMMM YYYY')}</span>
+        <Avatar onClick={nextMonth}><PiCaretRight /></Avatar>
+      </div>
+
+      {selected && (
+        <div className="datepicker-selected">
+          <span className="interval-display">
+            {mode === 'single' && selected instanceof Date && (
+              <>Selected: {formatDate(selected)}</>
+            )}
+            {mode === 'interval' && Array.isArray(selected) && (
+              <div className='text-sm'>
+                {selected[1]
+                  ? `From ${formatDate(selected[0])} to ${formatDate(selected[1])}`
+                  : `Start: ${formatDate(selected[0])} - Select end date`}
+              </div>
+            )}
+          </span>
+          <div style={{lineHeight:"0"}}>
+          <PiX className="clear-icon" onClick={handleClear} style={{ cursor: 'pointer' }} />
+          </div>
+        </div>
+      )}
+
+      <div className="datepicker-weekdays">
+        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d) => (
+          <div key={d}>{d}</div>
+        ))}
+      </div>
+
+      <div className="datepicker-grid">
+        {days.map((date, idx) => {
+          const isSelectedClass = date && isSelected(date) ? 'selected' : '';
+          const isInRangeClass =
+            date && isSelected(date) && Array.isArray(selected) ? 'in-range' : '';
+          return (
+            <div
+              key={idx}
+              onClick={() => date && handleSelect(date)}
+              className={`datepicker-day ${!date ? 'empty' : ''} ${isSelectedClass} ${isInRangeClass}`}
+            >
+              {date ? dayjs(date).date() : ''}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default DatePicker;

package/ui/specials/Circle.js

@@ -60,7 +60,7 @@ 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, bordered = _a.bordered, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "bordered"]);
-    return (React.createElement("div", __assign({ className: " animated fade-in ".concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || '', " ").concat(hoverable ? 'hoverable' : ''), style: {
+    return (React.createElement("div", __assign({ className: " animated fade-in ".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

@@ -32,7 +32,7 @@ export default function Circle({
 }: Circle_Props) {
   return (
       <div
-        className={` animated fade-in ${bordered ? "border" : ""} pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || ''} ${
+        className={` animated fade-in ${bordered ? "border" : ""} pointer avatar ${funcss || ''} ${`text-` + color?.trim() || ''} ${raised ? "raised" : ''} ${bg || 'lighter'} ${
           hoverable ? 'hoverable' : ''
         }`}
         style={{

package/ui/theme/theme.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface ThemeProviderProps {
-    theme: 'light' | 'dark' | 'dark-blue' | 'light-gray';
+    theme: 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-green' | 'warm-orange' | 'frosted-glass' | 'midnight-purple' | 'cyber-metal';
     children: React.ReactNode;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/ui/theme/theme.js

@@ -48,7 +48,7 @@ var ThemeProvider = function (_a) {
             root.style.setProperty(key, value);
         });
         // Apply darkened RGBA versions (for dark themes only)
-        if (theme === 'dark' || theme === 'dark-blue') {
+        if (theme === 'dark' || theme === 'dark-blue' || theme === 'midnight-purple' || theme === 'cyber-metal') {
             themes_1.colorVarsToDarken.forEach(function (varName) {
                 var original = getComputedStyle(root).getPropertyValue(varName).trim();
                 if (original) {

package/ui/theme/theme.tsx

@@ -4,7 +4,7 @@ import { colorVarsToDarken, themes } from './themes';
 import { getDarkenAmount, darkenToRgba } from './darkenUtils';
 
 interface ThemeProviderProps {
-  theme: 'light' | 'dark' | 'dark-blue' | 'light-gray';
+  theme: 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-green' | 'warm-orange' | 'frosted-glass' | 'midnight-purple' | 'cyber-metal';
   children: React.ReactNode;
 }
 
@@ -19,7 +19,7 @@ const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
     });
 
     // Apply darkened RGBA versions (for dark themes only)
-    if (theme === 'dark' || theme === 'dark-blue') {
+    if (theme === 'dark' || theme === 'dark-blue' || theme === 'midnight-purple' || theme === 'cyber-metal') {
       colorVarsToDarken.forEach((varName) => {
         const original = getComputedStyle(root).getPropertyValue(varName).trim();
         if (original) {

package/ui/theme/themes.d.ts

@@ -52,6 +52,7 @@ export declare const themes: {
         '--raiseThemes': string;
         '--raiseOpaque': string;
         '--borderColor': string;
+        '--borderRgb': string;
         '--lighter': string;
         '--linkColor': string;
         '--cardBg': string;
@@ -84,6 +85,7 @@ export declare const themes: {
         '--raiseThemes': string;
         '--raiseOpaque': string;
         '--borderColor': string;
+        '--borderRgb': string;
         '--lighter': string;
         '--linkColor': string;
         '--accent': string;
@@ -97,6 +99,117 @@ export declare const themes: {
         '--raiseThemes': string;
         '--raiseOpaque': string;
         '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'pastel-green': {
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'warm-orange': {
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'frosted-glass': {
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'midnight-purple': {
+        '--success50': string;
+        '--success100': string;
+        '--success200': string;
+        '--success300': string;
+        '--success400': string;
+        '--warning50': string;
+        '--warning100': string;
+        '--warning200': string;
+        '--warning300': string;
+        '--warning400': string;
+        '--info50': string;
+        '--info100': string;
+        '--info200': string;
+        '--info300': string;
+        '--info400': string;
+        '--error50': string;
+        '--error100': string;
+        '--error200': string;
+        '--error300': string;
+        '--error400': string;
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
+        '--lighter': string;
+        '--linkColor': string;
+        '--accent': string;
+        '--cardBg': string;
+        '--card': string;
+    };
+    'cyber-metal': {
+        '--success50': string;
+        '--success100': string;
+        '--success200': string;
+        '--success300': string;
+        '--success400': string;
+        '--warning50': string;
+        '--warning100': string;
+        '--warning200': string;
+        '--warning300': string;
+        '--warning400': string;
+        '--info50': string;
+        '--info100': string;
+        '--info200': string;
+        '--info300': string;
+        '--info400': string;
+        '--error50': string;
+        '--error100': string;
+        '--error200': string;
+        '--error300': string;
+        '--error400': string;
+        '--page-bg': string;
+        '--text-color': string;
+        '--text-muted': string;
+        '--raiseThemes': string;
+        '--raiseOpaque': string;
+        '--borderColor': string;
+        '--borderRgb': string;
         '--lighter': string;
         '--linkColor': string;
         '--accent': string;

package/ui/theme/themes.js

@@ -45,8 +45,8 @@ exports.themes = {
         '--page-bg': '#FFFFFF',
         '--text-color': '#000000',
     },
-    dark: __assign({ '--page-bg': '#1E1E1E', '--text-color': '#FFFFFF', '--raiseThemes': 'rgba(32, 32, 32, 0.5)', '--raiseOpaque': 'rgba(32, 32, 32, 0.8)', '--borderColor': '#4a4a4a', '--lighter': '#2a2a2a', '--linkColor': '#9ab', '--cardBg': '#1e1e1e', '--card': "4px 4px 6px #141414, -4px -4px 6px #272727" }, exports.darkerDefaults),
-    'dark-blue': __assign({ '--page-bg': '#0d1b2a', '--text-color': '#f0f4f8', '--text-muted': '#a9bcd0', '--raiseThemes': 'rgba(13, 27, 42, 0.5)', '--raiseOpaque': 'rgba(13, 27, 42, 0.8)', '--borderColor': '#1e3249', '--lighter': '#1b2c3f', '--linkColor': '#56ccf2', '--accent': '#66d9ef', '--cardBg': '#0d1b2a', '--card': "4px 4px 6px #08121d, -4px -4px 6px #15273b" }, exports.darkerDefaults),
+    dark: __assign({ '--page-bg': '#1E1E1E', '--text-color': '#FFFFFF', '--raiseThemes': 'rgba(32, 32, 32, 0.5)', '--raiseOpaque': 'rgba(32, 32, 32, 0.8)', '--borderColor': '#4a4a4a', '--borderRgb': '74, 74, 74', '--lighter': '#2a2a2a', '--linkColor': '#9ab', '--cardBg': '#1e1e1e', '--card': "4px 4px 6px #141414, -4px -4px 6px #272727" }, exports.darkerDefaults),
+    'dark-blue': __assign({ '--page-bg': '#0d1b2a', '--text-color': '#f0f4f8', '--text-muted': '#a9bcd0', '--raiseThemes': 'rgba(13, 27, 42, 0.5)', '--raiseOpaque': 'rgba(13, 27, 42, 0.8)', '--borderColor': '#1e3249', '--borderRgb': '30, 50, 73', '--lighter': '#1b2c3f', '--linkColor': '#56ccf2', '--accent': '#66d9ef', '--cardBg': '#0d1b2a', '--card': "4px 4px 6px #08121d, -4px -4px 6px #15273b" }, exports.darkerDefaults),
     'light-gray': {
         '--page-bg': '#e8e8e8',
         '--text-color': '#2a2a2a',
@@ -54,10 +54,55 @@ exports.themes = {
         '--raiseThemes': 'rgba(255, 255, 255, 0.6)',
         '--raiseOpaque': 'rgba(255, 255, 255, 0.94)',
         '--borderColor': '#d0d0d0',
+        '--borderRgb': '208, 208, 208',
         '--lighter': '#f4f4f4',
         '--linkColor': '#202020',
         '--accent': '#4a90e2',
         '--cardBg': '#e8e8e8',
         '--card': "8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff",
-    }
+    },
+    'pastel-green': {
+        '--page-bg': '#e6f5ea',
+        '--text-color': '#2f4f4f',
+        '--text-muted': '#5a7d7d',
+        '--raiseThemes': 'rgba(230, 245, 234, 0.6)',
+        '--raiseOpaque': 'rgba(230, 245, 234, 0.9)',
+        '--borderColor': '#b5d3c5',
+        '--borderRgb': '181, 211, 197',
+        '--lighter': '#f1faf3',
+        '--linkColor': '#4caf50',
+        '--accent': '#81c784',
+        '--cardBg': '#e6f5ea',
+        '--card': "6px 6px 12px #cde3d5, -6px -6px 12px #ffffff",
+    },
+    'warm-orange': {
+        '--page-bg': '#fff3e0',
+        '--text-color': '#4e342e',
+        '--text-muted': '#8d6e63',
+        '--raiseThemes': 'rgba(255, 243, 224, 0.6)',
+        '--raiseOpaque': 'rgba(255, 243, 224, 0.94)',
+        '--borderColor': '#ffccbc',
+        '--borderRgb': '255, 204, 188',
+        '--lighter': '#ffecb3',
+        '--linkColor': '#ff7043',
+        '--accent': '#ff8a65',
+        '--cardBg': '#fff3e0',
+        '--card': "6px 6px 14px #e0c7b3, -6px -6px 14px #ffffff",
+    },
+    'frosted-glass': {
+        '--page-bg': 'rgba(255, 255, 255, 0.75)',
+        '--text-color': '#111',
+        '--text-muted': '#666',
+        '--raiseThemes': 'rgba(255, 255, 255, 0.4)',
+        '--raiseOpaque': 'rgba(255, 255, 255, 0.9)',
+        '--borderColor': '#ccc',
+        '--borderRgb': '204, 204, 204',
+        '--lighter': '#fafafa',
+        '--linkColor': '#0099cc',
+        '--accent': '#00c2ff',
+        '--cardBg': 'rgba(255, 255, 255, 0.6)',
+        '--card': "4px 4px 10px rgba(0, 0, 0, 0.05), -4px -4px 10px rgba(255, 255, 255, 0.5)",
+    },
+    'midnight-purple': __assign({ '--page-bg': '#1a1333', '--text-color': '#e0e0ff', '--text-muted': '#b39ddb', '--raiseThemes': 'rgba(26, 19, 51, 0.5)', '--raiseOpaque': 'rgba(26, 19, 51, 0.85)', '--borderColor': '#2e215c', '--borderRgb': '46, 33, 92', '--lighter': '#2f2258', '--linkColor': '#d1c4e9', '--accent': '#9575cd', '--cardBg': '#1a1333', '--card': "4px 4px 8px #120c26, -4px -4px 8px #221a40" }, exports.darkerDefaults),
+    'cyber-metal': __assign({ '--page-bg': '#0f1115', '--text-color': '#d0d0d0', '--text-muted': '#888', '--raiseThemes': 'rgba(15, 17, 21, 0.4)', '--raiseOpaque': 'rgba(15, 17, 21, 0.85)', '--borderColor': '#2a2a2a', '--borderRgb': '42, 42, 42', '--lighter': '#1a1a1a', '--linkColor': '#00ffe0', '--accent': '#39ff14', '--cardBg': '#0f1115', '--card': "6px 6px 12px #050607, -6px -6px 12px #1c1f25" }, exports.darkerDefaults)
 };

package/ui/theme/themes.ts

@@ -43,6 +43,7 @@ export const themes = {
     '--raiseThemes': 'rgba(32, 32, 32, 0.5)',
     '--raiseOpaque': 'rgba(32, 32, 32, 0.8)',
     '--borderColor': '#4a4a4a',
+    '--borderRgb': '74, 74, 74',
     '--lighter': '#2a2a2a',
     '--linkColor': '#9ab',
     '--cardBg': '#1e1e1e',
@@ -56,6 +57,7 @@ export const themes = {
     '--raiseThemes': 'rgba(13, 27, 42, 0.5)',
     '--raiseOpaque': 'rgba(13, 27, 42, 0.8)',
     '--borderColor': '#1e3249',
+    '--borderRgb': '30, 50, 73',
     '--lighter': '#1b2c3f',
     '--linkColor': '#56ccf2',
     '--accent': '#66d9ef',
@@ -70,10 +72,83 @@ export const themes = {
     '--raiseThemes': 'rgba(255, 255, 255, 0.6)',
     '--raiseOpaque': 'rgba(255, 255, 255, 0.94)',
     '--borderColor': '#d0d0d0',
+    '--borderRgb': '208, 208, 208',
     '--lighter': '#f4f4f4',
     '--linkColor': '#202020',
     '--accent': '#4a90e2',
     '--cardBg': '#e8e8e8',
     '--card': `8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff`,
+  },
+  'pastel-green': {
+    '--page-bg': '#e6f5ea',
+    '--text-color': '#2f4f4f',
+    '--text-muted': '#5a7d7d',
+    '--raiseThemes': 'rgba(230, 245, 234, 0.6)',
+    '--raiseOpaque': 'rgba(230, 245, 234, 0.9)',
+    '--borderColor': '#b5d3c5',
+    '--borderRgb': '181, 211, 197',
+    '--lighter': '#f1faf3',
+    '--linkColor': '#4caf50',
+    '--accent': '#81c784',
+    '--cardBg': '#e6f5ea',
+    '--card': `6px 6px 12px #cde3d5, -6px -6px 12px #ffffff`,
+  },
+  'warm-orange': {
+    '--page-bg': '#fff3e0',
+    '--text-color': '#4e342e',
+    '--text-muted': '#8d6e63',
+    '--raiseThemes': 'rgba(255, 243, 224, 0.6)',
+    '--raiseOpaque': 'rgba(255, 243, 224, 0.94)',
+    '--borderColor': '#ffccbc',
+    '--borderRgb': '255, 204, 188',
+    '--lighter': '#ffecb3',
+    '--linkColor': '#ff7043',
+    '--accent': '#ff8a65',
+    '--cardBg': '#fff3e0',
+    '--card': `6px 6px 14px #e0c7b3, -6px -6px 14px #ffffff`,
+  },
+  'frosted-glass': {
+    '--page-bg': 'rgba(255, 255, 255, 0.75)',
+    '--text-color': '#111',
+    '--text-muted': '#666',
+    '--raiseThemes': 'rgba(255, 255, 255, 0.4)',
+    '--raiseOpaque': 'rgba(255, 255, 255, 0.9)',
+    '--borderColor': '#ccc',
+    '--borderRgb': '204, 204, 204',
+    '--lighter': '#fafafa',
+    '--linkColor': '#0099cc',
+    '--accent': '#00c2ff',
+    '--cardBg': 'rgba(255, 255, 255, 0.6)',
+    '--card': `4px 4px 10px rgba(0, 0, 0, 0.05), -4px -4px 10px rgba(255, 255, 255, 0.5)`,
+  },
+  'midnight-purple': {
+    '--page-bg': '#1a1333',
+    '--text-color': '#e0e0ff',
+    '--text-muted': '#b39ddb',
+    '--raiseThemes': 'rgba(26, 19, 51, 0.5)',
+    '--raiseOpaque': 'rgba(26, 19, 51, 0.85)',
+    '--borderColor': '#2e215c',
+    '--borderRgb': '46, 33, 92',
+    '--lighter': '#2f2258',
+    '--linkColor': '#d1c4e9',
+    '--accent': '#9575cd',
+    '--cardBg': '#1a1333',
+    '--card': `4px 4px 8px #120c26, -4px -4px 8px #221a40`,
+    ...darkerDefaults,
+  },
+  'cyber-metal': {
+    '--page-bg': '#0f1115',
+    '--text-color': '#d0d0d0',
+    '--text-muted': '#888',
+    '--raiseThemes': 'rgba(15, 17, 21, 0.4)',
+    '--raiseOpaque': 'rgba(15, 17, 21, 0.85)',
+    '--borderColor': '#2a2a2a',
+    '--borderRgb': '42, 42, 42',
+    '--lighter': '#1a1a1a',
+    '--linkColor': '#00ffe0',
+    '--accent': '#39ff14',
+    '--cardBg': '#0f1115',
+    '--card': `6px 6px 12px #050607, -6px -6px 12px #1c1f25`,
+    ...darkerDefaults,
   }
 };

package/ui/view/View.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+type ViewProps = {
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    funcss?: string;
+    customStyle?: React.CSSProperties;
+    height?: string;
+    width?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    padding?: string;
+    margin?: string;
+    gap?: string;
+    fit?: boolean;
+    display?: React.CSSProperties['display'];
+    flexDirection?: React.CSSProperties['flexDirection'];
+    justifyContent?: React.CSSProperties['justifyContent'];
+    alignItems?: React.CSSProperties['alignItems'];
+    background?: string;
+    color?: string;
+    border?: string;
+    borderRadius?: string;
+    boxShadow?: string;
+    position?: React.CSSProperties['position'];
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
+    zIndex?: number;
+    overflow?: React.CSSProperties['overflow'];
+    id?: string;
+    title?: string;
+    role?: string;
+    ariaLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+};
+declare 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) => React.JSX.Element;
+export default View;

package/ui/view/View.js

@@ -0,0 +1,64 @@
+"use strict";
+'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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var View = function (_a) {
+    var children = _a.children, content = _a.content, _b = _a.funcss, funcss = _b === void 0 ? '' : _b, _c = _a.customStyle, customStyle = _c === void 0 ? {} : _c, height = _a.height, width = _a.width, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth, padding = _a.padding, margin = _a.margin, gap = _a.gap, fit = _a.fit, display = _a.display, flexDirection = _a.flexDirection, justifyContent = _a.justifyContent, alignItems = _a.alignItems, background = _a.background, color = _a.color, border = _a.border, borderRadius = _a.borderRadius, boxShadow = _a.boxShadow, position = _a.position, top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom, zIndex = _a.zIndex, overflow = _a.overflow, id = _a.id, title = _a.title, role = _a.role, ariaLabel = _a.ariaLabel, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onFocus = _a.onFocus, onBlur = _a.onBlur, rest = __rest(_a, ["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"]);
+    return (React.createElement("div", __assign({ id: id, title: title, role: role, "aria-label": ariaLabel, className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss), style: __assign({ display: display, flexDirection: flexDirection, justifyContent: justifyContent, alignItems: alignItems, height: height, width: width, minHeight: minHeight, maxHeight: maxHeight, minWidth: minWidth, maxWidth: maxWidth, padding: padding, margin: margin, gap: gap, background: background, color: color, border: border, borderRadius: borderRadius, boxShadow: boxShadow, position: position, top: top, left: left, right: right, bottom: bottom, zIndex: zIndex, overflow: overflow }, customStyle), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, rest), content || children));
+};
+exports.default = View;