funuicss 3.8.13 → 3.8.15

package/ui/form/Form.js

@@ -384,7 +384,7 @@ var Form = function (props) {
     }, [parsedDefaultValues]);
     // Validate a single field
     var validateField = (0, react_1.useCallback)(function (field, value) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         // Required validation
         if (field.required) {
             if (value === undefined || value === null || value === '') {
@@ -431,16 +431,34 @@ var Form = function (props) {
                 }
             }
             // Phone validation (basic) - only for strings
+            // Phone validation (basic) - only for strings
             if (field.type === 'tel' && typeof value === 'string') {
-                var phoneRegex = /^[\+]?[1-9][\d]{0,17}$/;
-                if (!phoneRegex.test(value.replace(/[\s+\-()]/g, ''))) {
-                    return 'Please enter a valid phone number';
+                // Remove all non-digit characters except + at the beginning
+                var cleanedValue = value.replace(/[^\d+]/g, '');
+                // Check if the value contains any letters (shouldn't happen after cleaning, but just in case)
+                if (/[a-zA-Z]/.test(value)) {
+                    return 'Phone number cannot contain letters';
+                }
+                // Allow numbers starting with 0 or with country code (+)
+                var phoneRegex = /^[\+]?[0-9]{0,18}$/;
+                if (value && !phoneRegex.test(cleanedValue)) {
+                    return 'Please enter a valid phone number (digits only, can start with 0 or +)';
+                }
+                // Optional: Add minimum length check
+                var minLength = ((_c = field.inputProps) === null || _c === void 0 ? void 0 : _c.minLength) || 10; // Default 10 digits
+                if (cleanedValue.length > 0 && cleanedValue.length < minLength) {
+                    return "Phone number must be at least ".concat(minLength, " digits");
+                }
+                // Optional: Add maximum length check
+                var maxLength = ((_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.maxLength) || 15; // Default 15 digits
+                if (cleanedValue.length > maxLength) {
+                    return "Phone number cannot exceed ".concat(maxLength, " digits");
                 }
             }
             // Length validation for strings
             if (typeof value === 'string') {
-                var minLength = (_c = field.inputProps) === null || _c === void 0 ? void 0 : _c.minLength;
-                var maxLength = (_d = field.inputProps) === null || _d === void 0 ? void 0 : _d.maxLength;
+                var minLength = (_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.minLength;
+                var maxLength = (_f = field.inputProps) === null || _f === void 0 ? void 0 : _f.maxLength;
                 if (minLength && value.length < minLength) {
                     return "Minimum ".concat(minLength, " characters required");
                 }
@@ -449,7 +467,7 @@ var Form = function (props) {
                 }
             }
             // Pattern validation if provided - only for strings
-            if (((_e = field.inputProps) === null || _e === void 0 ? void 0 : _e.pattern) && typeof value === 'string') {
+            if (((_g = field.inputProps) === null || _g === void 0 ? void 0 : _g.pattern) && typeof value === 'string') {
                 try {
                     var regex = new RegExp(field.inputProps.pattern);
                     if (!regex.test(value)) {

package/ui/sidebar/SideBar.js

@@ -1,5 +1,294 @@
 "use strict";
+// '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 { useVariant } from '../theme/theme';
+// import Button from '../button/Button';
+// import  Accordion from '../accordion/Accordion';
+// interface SideBarLink {
+//   uri: string;
+//   icon?: React.ReactNode;
+//   text: string;
+//   section: string;
+//   onClick?: () => void;
+// }
+// interface SideBarProps {
+//   funcss?: string;
+//   position?: 'left' | 'right';
+//   open?: boolean;
+//   header?: ReactNode;
+//   content?: ReactNode;
+//   footer?: ReactNode;
+//   top?: number;
+//   sidebarWidth?: number;
+//   sidebarCss?: string;
+//   activeCss?: string;
+//   iconCSS?: string;
+//   accordionItemCss?: string;
+//   bodyCss?: string;
+//   popIcon?: boolean;
+//   dividers?: boolean;
+//   links?: SideBarLink[];
+//   children?: ReactNode;
+//   onClose?: () => void;
+//   isAccordion?: boolean;
+// }
+// export default function SideBar({
+//   funcss = '',
+//   position = 'left',
+//   open = false,
+//   header,
+//   content,
+//   footer,
+//   top = 0,
+//   sidebarWidth = 250,
+//   iconCSS = '',
+//   sidebarCss = '',
+//   activeCss,
+//   bodyCss = '',
+//   popIcon = false,
+//   dividers = false,
+//   accordionItemCss,
+//   links = [],
+//   children,
+//   onClose,
+//   isAccordion = false,
+// }: 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 { variant } = useVariant();
+//   const [selectedOption, setselectedOption] = useState('');
+//   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;
+//   // Prepare accordion items when isAccordion is true
+//   const accordionItems = isAccordion
+//     ? Object.entries(groupedLinks).map(([section, sectionLinks]) => ({
+//       icon: sectionLinks[0]?.icon,
+//         title: section,
+//         content: (
+//           <div className="sidebar-accordion-links">
+//             {sectionLinks.map((link, index) => {
+//               const isActive = link.onClick
+//                 ? selectedOption === `${section}-${index}`
+//                 : pathname === link.uri;
+//               return (
+//                 <div
+//                   onClick={() => {
+//                     if (isMobile) {
+//                       handleClose();
+//                     }
+//                     if (link?.onClick) {
+//                       link.onClick();
+//                       setselectedOption(`${section}-${index}`);
+//                     } else {
+//                       window.location.href = link.uri;
+//                     }
+//                   }}
+//                   key={link.uri}
+//                 >
+//                   <Button
+//                     fullWidth
+//                     small
+//                     funcss={`sidebar-link ${isActive ? "" : "p-0"} text-left ${
+//                       isActive ? `primary ${activeCss || ''}` : 'hoverable'
+//                     }`}
+//                     startIcon={
+//                       <span
+//                         className={`${iconCSS || ''} ${
+//                           variant === 'standard' || popIcon
+//                             ? `p-1 ${isActive ? 'primary' : 'lighter text-primary border'} central`
+//                             : variant === 'minimal' && !isActive
+//                             ? 'p-1 central lighter text-primary'
+//                             : ''
+//                         }`}
+//                         style={{ lineHeight: 0, borderRadius: '0.4rem' }}
+//                       >
+//                         {link.icon}
+//                       </span>
+//                     }
+//                   >
+//                     <Text text={link.text} size="sm" weight={400} />
+//                   </Button>
+//                 </div>
+//               );
+//             })}
+//           </div>
+//         ),
+//       }))
+//     : [];
+//   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',
+//           }}
+//         >
+//             {header && <div>{header}</div>}
+//           <section className="sidebar-body mt-3">
+//             {links.length > 0 && (
+//               <nav className="sidebar-links">
+//                 {isAccordion ? (
+//                   <Accordion
+//                   itemClass={accordionItemCss}
+//                     items={accordionItems}
+//                     allowMultiple={false}
+//                     contentClass=""
+//                     titleClass='text-sm'
+//                     activeClass=""
+//                   />
+//                 ) : (
+//                   Object.entries(groupedLinks).map(([section, sectionLinks]) => (
+//                     <div key={section} className={`sidebar-section ${dividers ? 'bt' : ''} pt-2 pb-2`}>
+//                       <Text size="sm" >
+//                         {section}
+//                       </Text>
+//                       {sectionLinks.map((link, index) => {
+//                         const isActive = link.onClick
+//                           ? selectedOption === `${section}-${index}`
+//                           : pathname === link.uri;
+//                         return (
+//                           <div
+//                             onClick={() => {
+//                               if (isMobile) {
+//                                 handleClose();
+//                               }
+//                               if (link?.onClick) {
+//                                 link.onClick();
+//                                 setselectedOption(`${section}-${index}`);
+//                               } else {
+//                                 window.location.href = link.uri;
+//                               }
+//                             }}
+//                             key={link.uri}
+//                           >
+//                             <Button
+//                               fullWidth
+//                               small
+//                               funcss={`sidebar-link text-left ${
+//                                 isActive ? `primary ${activeCss || ''}` : 'hoverable'
+//                               }`}
+//                               startIcon={
+//                                 <span
+//                                   className={`${iconCSS || ''} ${
+//                                     variant === 'standard' || popIcon
+//                                       ? `p-1 ${isActive ? 'primary' : 'lighter text-primary border'} central`
+//                                       : variant === 'minimal' && !isActive
+//                                       ? 'p-1 central lighter text-primary'
+//                                       : ''
+//                                   }`}
+//                                   style={{ lineHeight: 0, borderRadius: '0.4rem' }}
+//                                 >
+//                                   {link.icon}
+//                                 </span>
+//                               }
+//                             >
+//                               <Text text={link.text} size="sm" weight={400} />
+//                             </Button>
+//                           </div>
+//                         );
+//                       })}
+//                     </div>
+//                   ))
+//                 )}
+//               </nav>
+//             )}
+//             {content}
+//           </section>
+//           {footer && <footer className="sidebar-footer mt-2">{footer}</footer>}
+//         </aside>
+//       )}
+//       <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>
+//   );
+// }
 'use client';
+// '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 { useVariant } from '../theme/theme';
+// import Button from '../button/Button';
+// import  Accordion from '../accordion/Accordion';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -44,16 +333,19 @@ var navigation_1 = require("next/navigation");
 var theme_1 = require("../theme/theme");
 var Button_1 = __importDefault(require("../button/Button"));
 var Accordion_1 = __importDefault(require("../accordion/Accordion"));
+var bs_1 = require("react-icons/bs");
+var Flex_1 = __importDefault(require("../flex/Flex"));
 function SideBar(_a) {
-    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.iconCSS, iconCSS = _h === void 0 ? '' : _h, _j = _a.sidebarCss, sidebarCss = _j === void 0 ? '' : _j, activeCss = _a.activeCss, _k = _a.bodyCss, bodyCss = _k === void 0 ? '' : _k, _l = _a.popIcon, popIcon = _l === void 0 ? false : _l, _m = _a.dividers, dividers = _m === void 0 ? false : _m, accordionItemCss = _a.accordionItemCss, _o = _a.links, links = _o === void 0 ? [] : _o, children = _a.children, onClose = _a.onClose, _p = _a.isAccordion, isAccordion = _p === void 0 ? false : _p;
-    var _q = (0, react_1.useState)(false), isMobile = _q[0], setIsMobile = _q[1];
-    var _r = (0, react_1.useState)(open), internalOpen = _r[0], setInternalOpen = _r[1];
-    var _s = (0, react_1.useState)('0px'), appBarHeight = _s[0], setAppBarHeight = _s[1];
+    var _b, _c;
+    var _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.position, position = _e === void 0 ? 'left' : _e, _f = _a.open, open = _f === void 0 ? false : _f, header = _a.header, content = _a.content, footer = _a.footer, _g = _a.top, top = _g === void 0 ? 0 : _g, _h = _a.sidebarWidth, sidebarWidth = _h === void 0 ? 250 : _h, _j = _a.iconCSS, iconCSS = _j === void 0 ? '' : _j, _k = _a.sidebarCss, sidebarCss = _k === void 0 ? '' : _k, activeCss = _a.activeCss, _l = _a.bodyCss, bodyCss = _l === void 0 ? '' : _l, _m = _a.popIcon, popIcon = _m === void 0 ? false : _m, _o = _a.dividers, dividers = _o === void 0 ? false : _o, accordionItemCss = _a.accordionItemCss, _p = _a.links, links = _p === void 0 ? [] : _p, children = _a.children, onClose = _a.onClose, _q = _a.isAccordion, isAccordion = _q === void 0 ? false : _q;
+    var _r = (0, react_1.useState)(false), isMobile = _r[0], setIsMobile = _r[1];
+    var _s = (0, react_1.useState)(open), internalOpen = _s[0], setInternalOpen = _s[1];
+    var _t = (0, react_1.useState)('0px'), appBarHeight = _t[0], setAppBarHeight = _t[1];
+    var _u = (0, react_1.useState)(false), collapsed = _u[0], setCollapsed = _u[1];
     var pathname = (0, navigation_1.usePathname)();
     var sidebarRef = (0, react_1.useRef)(null);
     var variant = (0, theme_1.useVariant)().variant;
-    var _t = (0, react_1.useState)(''), selectedOption = _t[0], setselectedOption = _t[1];
+    var _v = (0, react_1.useState)(''), selectedOption = _v[0], setselectedOption = _v[1];
     var updateIsMobile = (0, react_1.useCallback)(function () {
         setIsMobile(window.innerWidth <= 992);
     }, []);
@@ -91,6 +383,9 @@ function SideBar(_a) {
         setInternalOpen(false);
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
+    var toggleCollapse = function () {
+        setCollapsed(!collapsed);
+    };
     var groupedLinks = links.reduce(function (acc, link) {
         acc[link.section] = acc[link.section] || [];
         acc[link.section].push(link);
@@ -125,23 +420,68 @@ function SideBar(_a) {
                                     ? "p-1 ".concat(isActive ? 'primary' : 'lighter text-primary border', " central")
                                     : variant === 'minimal' && !isActive
                                         ? 'p-1 central lighter text-primary'
-                                        : ''), style: { lineHeight: 0, borderRadius: '0.4rem' } }, link.icon) },
-                            react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
+                                        : ''), style: { lineHeight: 0, borderRadius: '0.4rem' } }, link.icon) }, !collapsed && react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
                 }))),
             });
         })
         : [];
+    // Get current sidebar width based on collapsed state
+    var currentSidebarWidth = collapsed ? 70 : sidebarWidth;
+    var collapseIconSize = '18px';
     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"),
+        internalOpen && collapsed && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar collapsed ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_b = {
+                    width: isOverlay ? '100%' : "".concat(currentSidebarWidth, "px"),
                     height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
                     position: 'fixed',
                     top: appBarHeight || top
                 },
                 _b[position] = 0,
-                _b.padding = '1rem',
+                _b.padding = '0.5rem',
+                // overflow: 'auto',
+                _b.overflow = "visible",
                 _b) },
-            header && react_1.default.createElement("div", null, header),
+            react_1.default.createElement("div", { className: 'pointer hover-text-primary text-center p-1', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
+                react_1.default.createElement(bs_1.BsLayoutSidebarInsetReverse, null)),
+            react_1.default.createElement("section", { className: "" }, links.length > 0 && (react_1.default.createElement(Flex_1.default, { direction: 'column', gap: 0.6, alignItems: 'center', width: '100%' }, Object.entries(groupedLinks).map(function (_a, sectionIndex) {
+                var section = _a[0], sectionLinks = _a[1];
+                return (react_1.default.createElement(Flex_1.default, { direction: 'column', gap: 0.5, alignItems: 'center', width: '100%' },
+                    sectionLinks.map(function (link, index) {
+                        var isActive = link.onClick
+                            ? selectedOption === "".concat(section, "-").concat(index)
+                            : pathname === link.uri;
+                        return (react_1.default.createElement("div", { onClick: function () {
+                                if (isMobile) {
+                                    handleClose();
+                                }
+                                if (link === null || link === void 0 ? void 0 : link.onClick) {
+                                    link.onClick();
+                                    setselectedOption("".concat(section, "-").concat(index));
+                                }
+                                else {
+                                    window.location.href = link.uri;
+                                }
+                            }, key: link.uri },
+                            react_1.default.createElement("span", { className: " pointer ".concat(iconCSS || '', " ").concat(variant === 'standard' || popIcon
+                                    ? "p-1 ".concat(isActive ? 'primary' : 'bg text-primary border', " central")
+                                    : variant === 'minimal' && !isActive
+                                        ? 'p-1 central bg text-primary'
+                                        : ''), style: { lineHeight: 0, borderRadius: '0.4rem', fontSize: collapseIconSize } }, link.icon)));
+                    }),
+                    sectionIndex < Object.keys(groupedLinks).length - 1 && (react_1.default.createElement("div", { className: "mt-1 mb-1 bt col" }))));
+            })))))),
+        internalOpen && !collapsed && (react_1.default.createElement("aside", { role: "complementary", ref: sidebarRef, className: "sidebar ".concat(funcss, " ").concat(sidebarCss, " ").concat(isOverlay ? 'nav_overlay' : ''), style: (_c = {
+                    width: isOverlay ? '100%' : "".concat(currentSidebarWidth, "px"),
+                    height: "calc(100vh - ".concat(appBarHeight || top || '0px', ")"),
+                    position: 'fixed',
+                    top: appBarHeight || top
+                },
+                _c[position] = 0,
+                _c.padding = '1rem',
+                _c) },
+            react_1.default.createElement("div", { className: "sidebar-header" },
+                react_1.default.createElement("div", { className: 'pointer hover-text-primary text-right', style: { fontSize: collapseIconSize, lineHeight: 0 }, onClick: toggleCollapse },
+                    react_1.default.createElement(bs_1.BsLayoutSidebarInset, null)),
+                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" }, isAccordion ? (react_1.default.createElement(Accordion_1.default, { itemClass: accordionItemCss, items: accordionItems, allowMultiple: false, contentClass: "", titleClass: 'text-sm', activeClass: "" })) : (Object.entries(groupedLinks).map(function (_a) {
                     var section = _a[0], sectionLinks = _a[1];
@@ -175,8 +515,8 @@ function SideBar(_a) {
             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,
+                marginLeft: position === 'left' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
+                marginRight: position === 'right' && !isOverlay && internalOpen ? "".concat(currentSidebarWidth, "px") : 0,
                 overflowY: 'auto',
                 height: '100vh',
                 paddingTop: appBarHeight || top,

package/ui/text/Text.d.ts

@@ -42,6 +42,9 @@ type TypographyProps = {
     variant?: string;
     margin?: string;
     padding?: string;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    } | boolean;
     style?: React.CSSProperties;
     size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | string;
 };

package/ui/text/Text.js

@@ -31,11 +31,11 @@ var pi_1 = require("react-icons/pi");
 var componentUtils_1 = require("../../utils/componentUtils");
 var Text = function (_a) {
     var _b;
-    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, _c = _a.variant, variant = _c === void 0 ? '' : _c, size = _a.size, margin = _a.margin, style = _a.style, padding = _a.padding, 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", "variant", "size", "margin", "style", "padding"]);
+    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, _c = _a.variant, variant = _c === void 0 ? '' : _c, size = _a.size, margin = _a.margin, style = _a.style, dangerouslySetInnerHTML = _a.dangerouslySetInnerHTML, padding = _a.padding, 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", "variant", "size", "margin", "style", "dangerouslySetInnerHTML", "padding"]);
     // Use component configuration (simplified - let the hook handle empty variant)
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', variant).mergeWithLocal;
     // Create local props object - include ALL props
-    var localProps = __assign({ bg: bg, color: color, hoverBg: hoverBg, hoverText: hoverText, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size, margin: margin, padding: padding }, rest);
+    var localProps = __assign({ bg: bg, color: color, hoverBg: hoverBg, hoverText: hoverText, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size, margin: margin, style: style, dangerouslySetInnerHTML: dangerouslySetInnerHTML, padding: padding }, rest);
     // Merge with config - LOCAL PROPS OVERRIDE CONFIG (consistent with Button)
     var mergedProps = mergeWithLocal(localProps).props;
     // Extract final values - use NULLISH COALESCING like Button component
@@ -77,6 +77,7 @@ var Text = function (_a) {
         margin: margin !== null && margin !== void 0 ? margin : mergedProps.margin,
         text: text !== null && text !== void 0 ? text : mergedProps.text,
         padding: padding !== null && padding !== void 0 ? padding : mergedProps.padding,
+        dangerouslySetInnerHTML: dangerouslySetInnerHTML !== null && dangerouslySetInnerHTML !== void 0 ? dangerouslySetInnerHTML : mergedProps.dangerouslySetInnerHTML,
     };
     // If margin is provided, force block display
     var shouldBeBlock = final.block || !!final.margin;
@@ -120,6 +121,18 @@ var Text = function (_a) {
     ]
         .filter(Boolean)
         .join(' ');
+    // Handle dangerouslySetInnerHTML
+    var hasDangerousHTML = Boolean(final.dangerouslySetInnerHTML);
+    var dangerousHTMLContent = hasDangerousHTML
+        ? (typeof final.dangerouslySetInnerHTML === 'boolean'
+            ? { __html: String(final.text || '') }
+            : final.dangerouslySetInnerHTML)
+        : null;
+    // KEY FIX: Don't pass children when using dangerouslySetInnerHTML
+    if (hasDangerousHTML) {
+        return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles, dangerouslySetInnerHTML: dangerousHTMLContent }, rest)));
+    }
+    // Normal render without dangerouslySetInnerHTML
     return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, rest),
         final.quote && (react_1.default.createElement("div", null,
             react_1.default.createElement(pi_1.PiQuotesLight, null))),

package/ui/vista/Vista.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 type VistaProps = {
+    id?: string;
     backgroundMode?: 'plain' | 'background';
     gradientOverlay?: boolean;
     gradientColor?: string;
@@ -24,6 +25,9 @@ type VistaProps = {
     bg?: string;
     padding?: string;
     textAlign?: 'left' | 'center' | 'right';
+    contentWrapperMaxWidth?: string;
+    contentJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    contentAlign?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
     mediaPosition?: 'top' | 'bottom';
     funcss?: string;
     blurry?: number;
@@ -53,7 +57,7 @@ type VistaProps = {
     sectionClass?: string;
     containerClass?: string;
     gap?: string;
-    textWrapperClass?: string;
+    contentWrapperClass?: string;
     mediaWrapperClass?: string;
     children?: React.ReactNode;
     showGradient?: boolean;
@@ -85,6 +89,7 @@ type VistaProps = {
     primaryIconSize?: number;
     primaryButtonFuncss?: string;
     primaryButtonSmall?: boolean;
+    primaryButtonBig?: boolean;
     ctaSecondaryRounded?: boolean;
     ctaSecondaryFlat?: boolean;
     ctaSecondaryPrefix?: string;
@@ -92,6 +97,7 @@ type VistaProps = {
     secondaryIconSize?: number;
     secondaryButtonFuncss?: string;
     secondaryButtonSmall?: boolean;
+    secondaryButtonBig?: boolean;
     ctaAccentRounded?: boolean;
     ctaAccentFlat?: boolean;
     ctaAccentPrefix?: string;
@@ -99,6 +105,7 @@ type VistaProps = {
     accentIconSize?: number;
     accentButtonFuncss?: string;
     accentButtonSmall?: boolean;
+    accentButtonBig?: boolean;
     ctaGap?: number;
     ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
     mediaType?: 'image' | 'video' | 'iframe' | 'custom';
@@ -106,17 +113,8 @@ type VistaProps = {
     iframeUrl?: string;
     iframeSize?: string;
     customMedia?: React.ReactNode;
-    mediaOverlay?: boolean;
-    mediaOverlayColor?: string;
-    mediaOverlayOpacity?: number;
     mediaFilter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none';
     mediaFilterValue?: number;
-    mediaBlendMode?: 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten';
-    hoverEffect?: 'lift' | 'scale' | 'tilt' | 'glow' | 'none';
-    parallax?: boolean;
-    parallaxSpeed?: number;
-    backgroundParallax?: boolean;
-    backgroundParallaxSpeed?: number;
 };
 declare const Vista: React.FC<VistaProps>;
 export default Vista;