pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/FeedbackForm/FeedbackForm.js

@@ -1,91 +1,36 @@
 "use strict";
-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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = FeedbackForm;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const TextInput_1 = __importDefault(require("../Input/TextInput"));
+const InputTextArea_1 = __importDefault(require("../InputTextArea/InputTextArea"));
+const RadioButton_1 = require("../RadioButton/RadioButton");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Toaster_1 = require("../Toaster/Toaster");
+const TYPE_OPTIONS = [
+    { label: "Comments", id: "comments" },
+    { label: "Suggestions", id: "suggestions" },
+    { label: "Questions", id: "questions" },
+];
 // eslint-disable-next-line no-control-regex, no-useless-escape
-var emailRegex = /^(?:[a-zA-Z0-9_'^&\/+{}=?`|~!-]+(?:\.[a-zA-Z0-9_'^&\/+{}=?`|~!-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z-]*[a-zA-Z]:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]+)\])$/;
+const emailRegex = /^(?:[a-zA-Z0-9_'^&\/+{}=?`|~!-]+(?:\.[a-zA-Z0-9_'^&\/+{}=?`|~!-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z-]*[a-zA-Z]:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]+)\])$/;
+/** Renders its own success/error toast via this library's Toaster — needs a mounted ToasterProvider. */
 function FeedbackForm(props) {
-    var _this = this;
     var _a, _b, _c, _d, _e;
-    var onSubmit = props.onSubmit, submitUrl = props.submitUrl, isDisabled = props.isDisabled, defaultValues = props.defaultValues, _f = props.submitText, submitText = _f === void 0 ? "Submit" : _f, _g = props.isSubmittingText, isSubmittingText = _g === void 0 ? "Submitting..." : _g;
-    var toast = (0, react_2.useToast)();
-    var _h = (0, react_1.useState)(false), isSubmitting = _h[0], setIsSubmitting = _h[1];
-    var _j = (0, react_1.useState)((_a = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.type) !== null && _a !== void 0 ? _a : "comments"), type = _j[0], setType = _j[1];
-    var _k = (0, react_1.useState)((_b = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.message) !== null && _b !== void 0 ? _b : ""), message = _k[0], setMessage = _k[1];
-    var _l = (0, react_1.useState)((_c = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.firstName) !== null && _c !== void 0 ? _c : ""), firstName = _l[0], setFirstName = _l[1];
-    var _m = (0, react_1.useState)((_d = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.lastName) !== null && _d !== void 0 ? _d : ""), lastName = _m[0], setLastName = _m[1];
-    var _o = (0, react_1.useState)((_e = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email) !== null && _e !== void 0 ? _e : ""), email = _o[0], setEmail = _o[1];
-    var errors = (0, react_1.useMemo)(function () {
+    const { onSubmit, submitUrl, isDisabled, defaultValues, submitText = "Submit", isSubmittingText = "Submitting..." } = props;
+    const { showToast } = (0, Toaster_1.useToaster)();
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [type, setType] = (0, react_1.useState)((_a = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.type) !== null && _a !== void 0 ? _a : "comments");
+    const [message, setMessage] = (0, react_1.useState)((_b = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.message) !== null && _b !== void 0 ? _b : "");
+    const [firstName, setFirstName] = (0, react_1.useState)((_c = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.firstName) !== null && _c !== void 0 ? _c : "");
+    const [lastName, setLastName] = (0, react_1.useState)((_d = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.lastName) !== null && _d !== void 0 ? _d : "");
+    const [email, setEmail] = (0, react_1.useState)((_e = defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.email) !== null && _e !== void 0 ? _e : "");
+    const errors = (0, react_1.useMemo)(() => {
         return {
             message: message.trim().length === 0 ? "Please describe your feedback" : "",
             firstName: firstName.trim().length === 0 ? "First name is required" : "",
@@ -93,82 +38,45 @@ function FeedbackForm(props) {
             email: email.trim().length === 0 ? "Email is required" : !emailRegex.test(email) ? "Enter a valid email" : "",
         };
     }, [message, firstName, lastName, email]);
-    var hasErrors = Object.values(errors).some(Boolean);
-    var handleSubmit = function (e) { return __awaiter(_this, void 0, void 0, function () {
-        var payload, res, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.preventDefault();
-                    if (hasErrors) {
-                        toast({ status: "error", title: "Please fix the errors in the form" });
-                        return [2 /*return*/];
-                    }
-                    payload = { type: type, message: message.trim(), firstName: firstName.trim(), lastName: lastName.trim(), email: email.trim() };
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 6, 7, 8]);
-                    setIsSubmitting(true);
-                    if (!onSubmit) return [3 /*break*/, 3];
-                    return [4 /*yield*/, onSubmit(payload)];
-                case 2:
-                    _a.sent();
-                    return [3 /*break*/, 5];
-                case 3:
-                    if (!submitUrl) return [3 /*break*/, 5];
-                    return [4 /*yield*/, fetch(submitUrl, {
-                            method: "POST",
-                            headers: { "Content-Type": "application/json" },
-                            body: JSON.stringify(payload),
-                        })];
-                case 4:
-                    res = _a.sent();
-                    if (!res.ok)
-                        throw new Error("Request failed: ".concat(res.status));
-                    _a.label = 5;
-                case 5:
-                    toast({ status: "success", title: "Thank you for your feedback" });
-                    setMessage("");
-                    setFirstName("");
-                    setLastName("");
-                    setEmail("");
-                    setType("comments");
-                    return [3 /*break*/, 8];
-                case 6:
-                    err_1 = _a.sent();
-                    toast({ status: "error", title: "Could not submit feedback", description: err_1 === null || err_1 === void 0 ? void 0 : err_1.message });
-                    return [3 /*break*/, 8];
-                case 7:
-                    setIsSubmitting(false);
-                    return [7 /*endfinally*/];
-                case 8: return [2 /*return*/];
+    const hasErrors = Object.values(errors).some(Boolean);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (hasErrors) {
+            showToast({ status: "error", title: "Please fix the errors in the form" });
+            return;
+        }
+        const payload = { type, message: message.trim(), firstName: firstName.trim(), lastName: lastName.trim(), email: email.trim() };
+        try {
+            setIsSubmitting(true);
+            if (onSubmit) {
+                await onSubmit(payload);
+            }
+            else if (submitUrl) {
+                const res = await fetch(submitUrl, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(payload),
+                });
+                if (!res.ok)
+                    throw new Error(`Request failed: ${res.status}`);
             }
-        });
-    }); };
-    return (react_1.default.createElement(react_2.Box, { as: "form", onSubmit: handleSubmit, width: "100%" },
-        react_1.default.createElement(react_2.FormControl, { as: react_2.Box, mb: 6, isDisabled: isDisabled },
-            react_1.default.createElement(react_2.FormLabel, null, "Feedback Type"),
-            react_1.default.createElement(react_2.RadioGroup, { value: type, onChange: function (v) { return setType(v); } },
-                react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 8 },
-                    react_1.default.createElement(react_2.Radio, { value: "comments" }, "Comments"),
-                    react_1.default.createElement(react_2.Radio, { value: "suggestions" }, "Suggestions"),
-                    react_1.default.createElement(react_2.Radio, { value: "questions" }, "Questions")))),
-        react_1.default.createElement(react_2.FormControl, { mb: 6, isInvalid: !!errors.message, isRequired: true, isDisabled: isDisabled },
-            react_1.default.createElement(react_2.FormLabel, null, "Describe Your Feedback"),
-            react_1.default.createElement(react_2.Textarea, { value: message, onChange: function (e) { return setMessage(e.target.value); }, rows: 6, placeholder: "Tell us more..." }),
-            react_1.default.createElement(react_2.FormErrorMessage, null, errors.message)),
-        react_1.default.createElement(react_2.Grid, { templateColumns: { base: "1fr", md: "1fr 1fr" }, gap: 4, mb: 6 },
-            react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.firstName, isRequired: true, isDisabled: isDisabled },
-                react_1.default.createElement(react_2.FormLabel, null, "First Name"),
-                react_1.default.createElement(react_2.Input, { value: firstName, onChange: function (e) { return setFirstName(e.target.value); }, placeholder: "First name" }),
-                react_1.default.createElement(react_2.FormErrorMessage, null, errors.firstName)),
-            react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.lastName, isRequired: true, isDisabled: isDisabled },
-                react_1.default.createElement(react_2.FormLabel, null, "Last Name"),
-                react_1.default.createElement(react_2.Input, { value: lastName, onChange: function (e) { return setLastName(e.target.value); }, placeholder: "Last name" }),
-                react_1.default.createElement(react_2.FormErrorMessage, null, errors.lastName))),
-        react_1.default.createElement(react_2.FormControl, { mb: 6, isInvalid: !!errors.email, isRequired: true, isDisabled: isDisabled },
-            react_1.default.createElement(react_2.FormLabel, null, "E-mail"),
-            react_1.default.createElement(react_2.Input, { type: "email", value: email, onChange: function (e) { return setEmail(e.target.value); }, placeholder: "ex: myname@example.com" }),
-            react_1.default.createElement(react_2.FormErrorMessage, null, errors.email)),
-        react_1.default.createElement(react_2.Button, { type: "submit", colorScheme: "primary", isLoading: isSubmitting, loadingText: isSubmittingText, isDisabled: isDisabled }, submitText)));
+            showToast({ status: "success", title: "Thank you for your feedback" });
+            setMessage("");
+            setFirstName("");
+            setLastName("");
+            setEmail("");
+            setType("comments");
+        }
+        catch (err) {
+            showToast({
+                status: "error",
+                title: "Could not submit feedback",
+                description: err instanceof Error ? err.message : String(err),
+            });
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "form", onSubmit: handleSubmit, width: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { mb: 6, children: (0, jsx_runtime_1.jsx)(RadioButton_1.RadioButtonGroup, { label: "Feedback Type", options: TYPE_OPTIONS, value: type, onChange: (v) => setType(v), isDisabled: isDisabled }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { mb: 6, children: (0, jsx_runtime_1.jsx)(InputTextArea_1.default, { label: "Describe Your Feedback", value: message, onChange: (e) => setMessage(e.target.value), rows: 6, placeholder: "Tell us more...", isRequired: true, isDisabled: isDisabled, error: !!errors.message, errorMessage: errors.message }) }), (0, jsx_runtime_1.jsxs)(react_2.Grid, { templateColumns: { base: "1fr", md: "1fr 1fr" }, gap: 4, mb: 6, children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "First Name", value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "First name", isRequired: true, isDisabled: isDisabled, error: !!errors.firstName, errorMessage: errors.firstName }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "Last Name", value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Last name", isRequired: true, isDisabled: isDisabled, error: !!errors.lastName, errorMessage: errors.lastName })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { mb: 6, children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { type: "email", label: "E-mail", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "ex: myname@example.com", isRequired: true, isDisabled: isDisabled, error: !!errors.email, errorMessage: errors.email }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", colorScheme: "primary", isLoading: isSubmitting, loadingText: isSubmittingText, isDisabled: isDisabled, children: submitText })] }));
 }

package/dist/Components/FieldSelectModal/FieldSelectModal.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface SelectableField {
+    /** Unique value committed on confirm. */
+    field_name: string;
+    /** Human-readable label. */
+    field_label: string;
+}
+/** Modal that lets the user pick which fields to include, confirmed via `onConfirm`. */
+export interface FieldSelectModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    fields: SelectableField[];
+    /** Called with the chosen field_name values. */
+    onConfirm: (selected: string[]) => void;
+    title?: string;
+    confirmText?: string;
+    loadingText?: string;
+    isLoading?: boolean;
+    /** Pre-selected field_name values (defaults to all selected); re-applied whenever this or `fields` changes reference while open. */
+    defaultSelected?: string[];
+    /** Columns in the field grid. */
+    columns?: number;
+    /** Show the search box (auto-hidden under 8 fields by default); "Select all" still applies to every field, not just visible matches. */
+    searchable?: boolean;
+}
+/** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
+declare const FieldSelectModal: React.FC<FieldSelectModalProps>;
+export default FieldSelectModal;

package/dist/Components/FieldSelectModal/FieldSelectModal.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const framer_motion_1 = require("framer-motion");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const MotionModalContent = (0, framer_motion_1.motion)(react_2.ModalContent);
+/** Modal checkbox-grid for choosing which fields/columns to show — a bulk toggle UI, not an inline Select/SelectV2 field. */
+const FieldSelectModal = ({ isOpen, onClose, fields, onConfirm, title = "Select Fields", confirmText = "Apply", loadingText = "Applying...", isLoading = false, defaultSelected, columns = 2, searchable, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
+    const [selected, setSelected] = (0, react_1.useState)([]);
+    const [query, setQuery] = (0, react_1.useState)("");
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            setSelected(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : fields.map((f) => f.field_name));
+            setQuery("");
+        }
+    }, [isOpen, fields, defaultSelected]);
+    const showSearch = searchable !== null && searchable !== void 0 ? searchable : fields.length >= 8;
+    const visibleFields = (0, react_1.useMemo)(() => {
+        if (!query.trim())
+            return fields;
+        const q = query.toLowerCase();
+        return fields.filter((f) => f.field_label.toLowerCase().includes(q));
+    }, [fields, query]);
+    const toggle = (name) => setSelected((prev) => prev.includes(name) ? prev.filter((f) => f !== name) : [...prev, name]);
+    const isAllSelected = selected.length === fields.length && fields.length > 0;
+    const isIndeterminate = selected.length > 0 && selected.length < fields.length;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { overflow: "hidden", maxH: "85vh", initial: prefersReducedMotion ? false : { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.text[900], children: title }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, fontWeight: 400, children: [selected.length, " of ", fields.length, " selected"] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { overflowY: "auto", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: (e) => setSelected(e.target.checked ? fields.map((f) => f.field_name) : []), fontWeight: 500, children: "Select all" }), showSearch && ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", maxW: "13.75rem", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search fields", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "lg" })] }))] }), (0, jsx_runtime_1.jsx)(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3, children: visibleFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: selected.includes(field.field_name), onChange: () => toggle(field.field_name), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", children: field.field_label }) }, field.field_name))) }), visibleFields.length === 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: ["No fields match \"", query, "\""] }))] }), (0, jsx_runtime_1.jsxs)(react_2.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_2.Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: () => onConfirm(selected), children: confirmText })] })] })] }));
+};
+exports.default = FieldSelectModal;

package/dist/Components/FilePreview/FilePreview.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FilePreviewProps, FilePreviewTriggerProps } from "./FilePreviewProps";
+/** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
+export declare const FilePreview: React.FC<FilePreviewProps>;
+/** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
+export declare const FilePreviewTrigger: React.FC<FilePreviewTriggerProps>;
+export default FilePreview;

package/dist/Components/FilePreview/FilePreview.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilePreviewTrigger = exports.FilePreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const framer_motion_1 = require("framer-motion");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const color_1 = require("../../Theme/tokens/builders/color");
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BASE_TRANSFORM_TRANSITION = (0, motion_1.transitionFor)(["transform"], "base");
+const OPACITY_TRANSITION = (0, motion_1.transitionFor)(["opacity"]);
+const MotionContent = (0, framer_motion_1.motion)(react_2.ModalContent);
+const blackScrim = (black, opacity) => {
+    const { r, g, b } = (0, color_1.hexToRgb)(black);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+const inferKind = (url, fileName) => {
+    const src = (fileName || url).split("?")[0].toLowerCase();
+    if (/\.(png|jpe?g|gif|webp|svg|bmp|avif)$/.test(src))
+        return "image";
+    if (/\.pdf$/.test(src))
+        return "pdf";
+    if (/\.(mp4|webm|ogg|mov)$/.test(src))
+        return "video";
+    return "other";
+};
+const downloadFile = async (fileUrl, fileName) => {
+    try {
+        const res = await fetch(fileUrl);
+        const blob = await res.blob();
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileName || "file";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+    catch {
+        window.open(fileUrl, "_blank", "noopener,noreferrer");
+    }
+};
+/** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
+const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownload = false, size = "xl", }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const downloadFill = (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
+    const [zoom, setZoom] = (0, react_1.useState)(1);
+    const [rotation, setRotation] = (0, react_1.useState)(0);
+    const kind = fileType || inferKind(fileUrl, fileName);
+    const reset = () => {
+        setZoom(1);
+        setRotation(0);
+    };
+    const handleClose = () => {
+        reset();
+        onClose();
+    };
+    const renderBody = () => {
+        if (kind === "image") {
+            return ((0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", align: "center", minH: "200px", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "preview", maxW: "100%", transform: `scale(${zoom}) rotate(${rotation}deg)`, transition: BASE_TRANSFORM_TRANSITION, objectFit: "contain" }) }));
+        }
+        if (kind === "pdf") {
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "embed", src: fileUrl, type: "application/pdf", width: "100%", height: "70vh", borderRadius: "lg" }));
+        }
+        if (kind === "video") {
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: downloadFill.fill, color: downloadFill.color, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
+    };
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.MotionConfig, { reducedMotion: "user", children: (0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { ...(0, overlay_styles_1.overlayScrimStyles)(theme.colors) }), (0, jsx_runtime_1.jsxs)(MotionContent, { bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }) }));
+};
+exports.FilePreview = FilePreview;
+/** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
+const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const kind = fileType || inferKind(fileUrl, fileName);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-label": `Preview ${fileName || "file"}`, "data-group": true, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "lg", overflow: "hidden", cursor: "pointer", _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: onOpen, children: [kind === "image" ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "lg" })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", align: "center", justify: "center", boxSize: thumbHeight, bg: theme.colors.gray[100], borderRadius: "lg", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", position: "absolute", inset: 0, align: "center", justify: "center", bg: blackScrim(theme.colors.black, 0.5), color: theme.colors.white, opacity: 0, transition: OPACITY_TRANSITION, _groupHover: { opacity: 1 }, _groupFocusVisible: { opacity: 1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
+};
+exports.FilePreviewTrigger = FilePreviewTrigger;
+exports.default = exports.FilePreview;

package/dist/Components/FilePreview/FilePreviewProps.d.ts

@@ -0,0 +1,34 @@
+/** Preview renderer to use; "other" falls back to a download-only panel. */
+export type FilePreviewKind = "image" | "pdf" | "video" | "other";
+/** Props for FilePreview, a modal viewer that infers image/pdf/video/other from the file extension. */
+export interface FilePreviewProps {
+    /** Shows the modal. */
+    isOpen: boolean;
+    /** Called on close button, Escape or overlay click. */
+    onClose: () => void;
+    /** Changing this while isOpen stays true does NOT reset zoom/rotation — remount via key={fileUrl}. */
+    fileUrl: string;
+    /** Drives kind-detection instead of fileUrl when set — a name with no extension forces the no-preview fallback. */
+    fileName?: string;
+    /** Force a renderer. When omitted it is inferred from the file extension. */
+    fileType?: FilePreviewKind;
+    /** Hide the download action. */
+    hideDownload?: boolean;
+    /** Modal size. */
+    size?: "md" | "lg" | "xl" | "2xl" | "full";
+}
+/** Props for FilePreviewTrigger — a thumbnail button that opens FilePreview in a modal. */
+export interface FilePreviewTriggerProps {
+    /** URL of the file. */
+    fileUrl: string;
+    /** Names the button "Preview <fileName>" ("Preview file" when omitted) and drives kind detection. */
+    fileName?: string;
+    /** Forces a renderer; inferred from the file extension when omitted. */
+    fileType?: FilePreviewKind;
+    /** Thumbnail max width. */
+    thumbWidth?: string;
+    /** Thumbnail max height. */
+    thumbHeight?: string;
+    /** Hides the download action inside the opened preview. */
+    hideDownload?: boolean;
+}

package/dist/Components/FilePreview/FilePreviewProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/FileUpload/FileUpload.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { FileUploaderProps } from "./FileUploadProps";
+/** Controlled drop zone — you own the `uploadedFiles`/File[] state; `maxSizeKB` defaults to 5 MB. */
 declare const FileUpload: React.FC<FileUploaderProps>;
 export default FileUpload;