funuicss 3.8.7 → 3.8.8

package/ui/button/Button.js

@@ -63,10 +63,10 @@ var componentUtils_1 = require("../../utils/componentUtils");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 function Button(_a) {
     var _b, _c;
-    var _d = _a.variant, variant = _d === void 0 ? '' : _d, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, prefix = _a.prefix, suffix = _a.suffix, iconSize = _a.iconSize, _e = _a.iconLineHeight, iconLineHeight = _e === void 0 ? 0 : _e, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, bold = _a.bold, children = _a.children, style = _a.style, url = _a.url, onClick = _a.onClick, disabled = _a.disabled, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "stringPrefix", "stringSuffix", "prefix", "suffix", "iconSize", "iconLineHeight", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "bold", "children", "style", "url", "onClick", "disabled"]);
+    var _d = _a.variant, variant = _d === void 0 ? '' : _d, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, prefix = _a.prefix, suffix = _a.suffix, iconSize = _a.iconSize, _e = _a.iconLineHeight, iconLineHeight = _e === void 0 ? 0 : _e, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, _f = _a.type, type = _f === void 0 ? 'button' : _f, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, bold = _a.bold, children = _a.children, style = _a.style, url = _a.url, onClick = _a.onClick, disabled = _a.disabled, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "stringPrefix", "stringSuffix", "prefix", "suffix", "iconSize", "iconLineHeight", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "type", "outlineSize", "isLoading", "status", "bold", "children", "style", "url", "onClick", "disabled"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Button', variant).mergeWithLocal;
     // Create local props object - these will override config props
-    var localProps = __assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, disabled: disabled, outlineSize: outlineSize, isLoading: isLoading, status: status, bold: bold, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, rest);
+    var localProps = __assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, disabled: disabled, outlineSize: outlineSize, isLoading: isLoading, status: status, type: type, bold: bold, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, rest);
     // Merge with config - LOCAL PROPS OVERRIDE CONFIG
     var mergedProps = mergeWithLocal(localProps).props;
     // Extract final values - local props take precedence
@@ -90,6 +90,7 @@ function Button(_a) {
         big: big !== null && big !== void 0 ? big : mergedProps.big,
         bigger: bigger !== null && bigger !== void 0 ? bigger : mergedProps.bigger,
         jumbo: jumbo !== null && jumbo !== void 0 ? jumbo : mergedProps.jumbo,
+        type: type !== null && type !== void 0 ? type : mergedProps.type,
         fillAnimation: fillAnimation !== null && fillAnimation !== void 0 ? fillAnimation : mergedProps.fillAnimation,
         fillDirection: fillDirection !== null && fillDirection !== void 0 ? fillDirection : mergedProps.fillDirection,
         fillTextColor: fillTextColor !== null && fillTextColor !== void 0 ? fillTextColor : mergedProps.fillTextColor,
@@ -98,10 +99,10 @@ function Button(_a) {
         stringPrefix: stringPrefix !== null && stringPrefix !== void 0 ? stringPrefix : mergedProps.stringPrefix,
         stringSuffix: stringSuffix !== null && stringSuffix !== void 0 ? stringSuffix : mergedProps.stringSuffix,
     };
-    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
-    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
-    var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
-    var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
+    var _g = (0, react_1.useState)(null), prefixNode = _g[0], setPrefixNode = _g[1];
+    var _h = (0, react_1.useState)(null), suffixNode = _h[0], setSuffixNode = _h[1];
+    var _j = (0, react_1.useState)(false), hasValidStringPrefix = _j[0], setHasValidStringPrefix = _j[1];
+    var _k = (0, react_1.useState)(false), hasValidStringSuffix = _k[0], setHasValidStringSuffix = _k[1];
     function isReactElement(node) {
         return react_1.default.isValidElement(node);
     }
@@ -213,7 +214,7 @@ function Button(_a) {
         return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, isReactElement(icon) ? react_1.default.cloneElement(icon, { size: iconSize }) : icon));
     };
     return (react_1.default.createElement("span", null,
-        react_1.default.createElement("button", __assign({ disabled: disabled || final.isLoading || false, className: "".concat(classNames, " ").concat((showPrefix || showSuffix || final.isLoading) ? 'iconic' : ''), style: __assign({ height: (_b = height !== null && height !== void 0 ? height : mergedProps.height) !== null && _b !== void 0 ? _b : '', width: final.fullWidth ? '100%' : (_c = width !== null && width !== void 0 ? width : mergedProps.width) !== null && _c !== void 0 ? _c : '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
+        react_1.default.createElement("button", __assign({ type: final.type || 'button', disabled: disabled || final.isLoading || false, className: "".concat(classNames, " ").concat((showPrefix || showSuffix || final.isLoading) ? 'iconic' : ''), style: __assign({ height: (_b = height !== null && height !== void 0 ? height : mergedProps.height) !== null && _b !== void 0 ? _b : '', width: final.fullWidth ? '100%' : (_c = width !== null && width !== void 0 ? width : mergedProps.width) !== null && _c !== void 0 ? _c : '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
             final.isLoading ? (renderIcon(react_1.default.createElement(pi_1.PiSpinner, { className: "rotate" }), 'btn_left_icon')) : (react_1.default.createElement(react_1.default.Fragment, null,
                 final.status && (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle },
                     final.status === 'success' && react_1.default.createElement(pi_1.PiCheck, { size: iconSize }),

package/ui/div/Div.d.ts

@@ -12,10 +12,12 @@ type DivProps = {
     padding?: string;
     margin?: string;
     id?: string;
+    className?: string;
+    style?: React.CSSProperties;
     fit?: boolean;
     ref?: React.Ref<HTMLDivElement>;
     customStyle?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
-declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, margin, id, fit, ref, customStyle, ...rest }: DivProps) => React.JSX.Element;
+declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, className, style, margin, id, fit, ref, customStyle, ...rest }: DivProps) => React.JSX.Element;
 export default Div;

package/ui/div/Div.js

@@ -58,8 +58,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var Div = function (_a) {
-    var children = _a.children, funcss = _a.funcss, content = _a.content, minHeight = _a.minHeight, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, minWidth = _a.minWidth, height = _a.height, width = _a.width, padding = _a.padding, margin = _a.margin, id = _a.id, fit = _a.fit, ref = _a.ref, customStyle = _a.customStyle, rest = __rest(_a, ["children", "funcss", "content", "minHeight", "maxHeight", "maxWidth", "minWidth", "height", "width", "padding", "margin", "id", "fit", "ref", "customStyle"]);
+    var children = _a.children, funcss = _a.funcss, content = _a.content, minHeight = _a.minHeight, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, minWidth = _a.minWidth, height = _a.height, width = _a.width, padding = _a.padding, className = _a.className, style = _a.style, margin = _a.margin, id = _a.id, fit = _a.fit, ref = _a.ref, customStyle = _a.customStyle, rest = __rest(_a, ["children", "funcss", "content", "minHeight", "maxHeight", "maxWidth", "minWidth", "height", "width", "padding", "className", "style", "margin", "id", "fit", "ref", "customStyle"]);
     return (React.createElement("div", null,
-        React.createElement("div", __assign({ ref: ref, className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss), style: __assign({ height: height || '', maxHeight: maxHeight || '', minHeight: minHeight || '', maxWidth: maxWidth || '', minWidth: minWidth || '', width: width || '', padding: padding || '', margin: margin || '' }, customStyle), id: id }, rest), content || children)));
+        React.createElement("div", __assign({ ref: ref, className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss, " ").concat(className || ''), style: __assign(__assign({ height: height || '', maxHeight: maxHeight || '', minHeight: minHeight || '', maxWidth: maxWidth || '', minWidth: minWidth || '', width: width || '', padding: padding || '', margin: margin || '' }, style), customStyle), id: id }, rest), content || children)));
 };
 exports.default = Div;

package/ui/form/Form.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+export type InputType = 'text' | 'email' | 'number' | 'tel' | 'textarea' | 'password' | 'date' | 'select' | 'checkbox' | 'radio' | 'file';
+export interface FieldOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface FormField {
+    name: string;
+    label?: string;
+    type: InputType;
+    required?: boolean;
+    placeholder?: string;
+    options?: FieldOption[];
+    multiple?: boolean;
+    value?: any;
+    disabled?: boolean;
+    helperText?: string;
+    column?: string;
+    inputProps?: {
+        startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
+        prefix?: React.ReactNode;
+        suffix?: React.ReactNode;
+        stringPrefix?: string;
+        stringSuffix?: string;
+        iconicBg?: string;
+        funcss?: string;
+        bg?: string;
+        flat?: boolean;
+        bordered?: boolean;
+        borderless?: boolean;
+        rounded?: boolean;
+        leftRounded?: boolean;
+        rightRounded?: boolean;
+        rows?: number;
+        noBorder?: boolean;
+        variant?: string;
+        id?: string;
+        autocomplete?: string;
+        pattern?: string;
+        min?: string | number;
+        max?: string | number;
+        minLength?: number;
+        maxLength?: number;
+        step?: string | number;
+    };
+}
+export interface FormProps {
+    fields: FormField[];
+    onSubmit: (values: Record<string, any>) => void;
+    defaultValues?: Record<string, any>;
+    submitText?: string;
+    resetText?: string;
+    showReset?: boolean;
+    isLoading?: boolean;
+    className?: string;
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    gap?: string;
+    whatsappIntegration?: {
+        enabled: boolean;
+        phoneNumber?: string;
+        headerMessage?: string;
+        footerMessage?: string;
+    };
+}
+declare const Form: React.FC<FormProps>;
+export default Form;