pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Pages/checkbox.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CheckBox from "../Components/Checkbox/Checkbox";
+const CheckboxPage = () => {
+    return (_jsx("div", { children: _jsx(CheckBox, { label: "hello world", error: true, errorMessage: "dd" }) }));
+};
+export default CheckboxPage;

package/dist/esm/Pages/contactForm.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ContactForm from "../Components/ContactForm/ContactForm";
+const contactForm = () => {
+    return (_jsx("div", { children: _jsx(ContactForm, { apiKey: "https://dev.api.pixelizetech.com/api/mks/sendSweet/", 
+            //  customFields={<>Product kjdhfkljh</>}
+            getCustomValues: () => ({
+            //  product: "empty",
+            }), customerId: 1, organizationId: 1 }) }));
+};
+export default contactForm;

package/dist/esm/Pages/customModulesTable.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box } from "@chakra-ui/react";
+import CustomModulesTable from "../Components/CustomModulesTable/CustomModulesTable";
+const initialModules = [
+    { module_id: 1, moduleName: "Projects", ownerLabel: "Aisha Khan" },
+    { module_id: 2, moduleName: "Invoices", ownerLabel: "Marcus Reed" },
+    { module_id: 3, moduleName: "Support Tickets", ownerLabel: "Lena Fischer" },
+];
+const CustomModulesTablePage = () => {
+    const [modules, setModules] = useState(initialModules);
+    return (_jsx(Box, { maxW: "720px", children: _jsx(CustomModulesTable, { modules: modules, onUpdateModule: ({ moduleId, moduleName }) => {
+                console.log("[CustomModulesTablePage] update", moduleId, moduleName);
+                setModules((prev) => prev.map((m) => m.module_id === moduleId ? { ...m, moduleName } : m));
+            }, onDeleteModule: (moduleId) => {
+                console.log("[CustomModulesTablePage] delete", moduleId);
+                setModules((prev) => prev.filter((m) => m.module_id !== moduleId));
+            } }) }));
+};
+export default CustomModulesTablePage;

package/dist/esm/Pages/datePick.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// import DatePicker from "../Components/DatePicker/DatePicker";
+import ThemeDatePicker from "../Components/DatePicker/ThemeDatePicker";
+const DatePick = () => {
+    const [selectedDate, setSelectedDate] = useState();
+    // const [selectedDateTheme, setSelectedDateTheme] = useState<Date | null>();
+    const [selectedTime, setSelectedTime] = useState(null);
+    const [selectedDateTime, setSelectedDateTime] = useState(() => {
+        const now = new Date();
+        now.setHours(now.getHours() + 1);
+        return now;
+    });
+    const [selectedDateRange, setSelectedDateRange] = useState(null);
+    // const handleDateChange = (value: Date | null) => {
+    //   setSelectedDate(value);
+    //   console.log("Date selected:", value);
+    // };
+    // const handleTimeChange = (value: Date | null) => {
+    //   setSelectedTime(value);
+    //   console.log("Time selected:", value);
+    // };
+    // const handleDateTimeChange = (value: Date | null) => {
+    //   setSelectedDateTime(value);
+    //   console.log("DateTime selected:", value);
+    // };
+    const handleDateRangeChange = (value) => {
+        if (value && "from" in value && "to" in value) {
+            setSelectedDateRange(value);
+            console.log("Date range selected:", value.from, value.to);
+        }
+        else {
+            setSelectedDateRange(null);
+            console.log("Date range cleared");
+        }
+    };
+    console.log("Selected DateTime:", selectedDateTime);
+    return (_jsxs("div", { children: [_jsx("h2", { children: "Single Date Picker" }), _jsx("h2", { children: "Date " }), _jsx("h2", { children: "Theme Date Picker" }), _jsx(ThemeDatePicker, { selectedDate: selectedDate, onChange: setSelectedDate, dateFormat: "dd/MM/yyyy", pickerType: "date", label: "Select Date", 
+                // disableFutureDates
+                disablePastDates: true, 
+                // disableToday
+                width: "300px", size: "xs" }), _jsx(ThemeDatePicker, { selectedDate: selectedDateTime, onChange: setSelectedDateTime, dateFormat: "dd/MM/yyyy hh:mm a", pickerType: "datetime", label: "Select Date & Time", disablePastDates: true, isRequired: true, error: true, errorMessage: "Invalid date", size: "sm" }), _jsx(ThemeDatePicker, { isRange: true, selectedDate: selectedDateRange, onChange: handleDateRangeChange, dateFormat: "dd/MM/yyyy hh:mm a", pickerType: "date", label: "Select Date Range" }), _jsx(ThemeDatePicker, { selectedDate: selectedTime, onChange: setSelectedTime, dateFormat: "hh:mm a", pickerType: "time", label: "SelectTime", disablePastDates: true, isRequired: true, error: true, errorMessage: "Invalid time", informationMessage: "hh", isInformation: true, size: "md" })] }));
+};
+export default DatePick;

package/dist/esm/Pages/drawer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Button from "../Components/Button/Button";
+import Drawer, { DrawerBody, DrawerFooter, DrawerHeader, } from "../Components/Drawer/Drawer";
+const DrawerPage = () => {
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const handleOnclick3 = () => {
+        setDrawerOpen(true);
+    };
+    const handleOnclick4 = () => {
+        setDrawerOpen(false);
+    };
+    return (_jsxs("div", { children: [_jsx(Button, { label: "DrawerButton", onClick: handleOnclick3, width: 250, variant: "solid" }), _jsx("br", {}), _jsxs(Drawer, { isOpen: drawerOpen, onClose: handleOnclick4, size: "xl", children: [_jsx(DrawerHeader, { children: "Drawer Header" }), _jsx(DrawerBody, { children: "Drawer Body" }), _jsx(DrawerFooter, { children: "Drawer Footer" })] })] }));
+};
+export default DrawerPage;

package/dist/esm/Pages/dropdown.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from "@chakra-ui/react";
+import Dropdown from "../Components/Dropdown/DropDown";
+import { ChevronUp, Ellipsis, FileText } from "lucide-react";
+const DropdownPage = () => {
+    const exportOptionss = [
+        { id: 1, label: "Upload file", image: FileText },
+        { id: 2, label: "Documents", image: ChevronUp },
+        { id: 3, label: "CRM workDrive", image: ChevronUp },
+        { id: 4, label: "Other Cloud Drives", image: ChevronUp },
+        { id: 5, label: "Link(URL)", image: ChevronUp },
+    ];
+    const onSelect = (id, label) => console.log("optionid", id, label);
+    return (_jsxs(Flex, { align: "flex-start", gap: 6, flexWrap: "wrap", children: [["xs", "sm", "md", "lg", "xl"].map((size) => (_jsx(Dropdown, { ButtonText: `Size ${size}`, size: size, options: exportOptionss, DropdownIcon: _jsx(FileText, { size: 16 }), dropdownType: "button", handleOptionSelect: onSelect, divider: true }, size))), _jsx(Dropdown, { text: "More", size: "md", options: exportOptionss, DropdownIcon: _jsx(Ellipsis, { size: 18 }), dropdownType: "text", handleOptionSelect: onSelect })] }));
+};
+export default DropdownPage;

package/dist/esm/Pages/editor.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Editor from '../Components/Editor/Editor';
+const EditorPage = () => {
+    return (_jsx("div", { children: _jsx(Editor, { value: "heeeeejhbjhvbjhvbhj jbhkjhbiubviu iuhiuhiuhiu", config: { readonly: false, width: "900px" }, onChange: () => {
+                //console.log(val);
+            } }) }));
+};
+export default EditorPage;

package/dist/esm/Pages/feedback.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Container, Heading } from "@chakra-ui/react";
+import FeedbackForm from "../Components/FeedbackForm/FeedbackForm";
+export default function FeedbackPage() {
+    return (_jsxs(Container, { maxW: "4xl", py: 8, children: [_jsx(Heading, { size: "lg", mb: 6, children: "Feedback Form" }), _jsx(Box, { bg: "white", p: 6, borderRadius: "md", boxShadow: "sm", children: _jsx(FeedbackForm, { submitUrl: "/api/crm/feedback" }) })] }));
+}

package/dist/esm/Pages/fileUpload.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Reorder from "../Components/Reorder/Reorder";
+import FileUploaderd from "../Components/FileUploader/FileUploader";
+import FileUpload from "../Components/FileUpload/FileUpload";
+const imageList = [
+    { id: "1", previewUrl: "https://picsum.photos/id/1011/100", name: "Image 1" },
+    { id: "2", previewUrl: "https://picsum.photos/id/1012/100", name: "Image 2" },
+    { id: "3", previewUrl: "https://picsum.photos/id/1013/100", name: "Image 3" },
+    { id: "4", previewUrl: "https://picsum.photos/id/1011/100", name: "Image 1" },
+];
+export const FileUploader = () => {
+    const [file, setFile] = useState([]);
+    const [list, setList] = useState(imageList);
+    const handleFiles = (files) => {
+        setFile(files);
+        const uploadedImages = files.map((f, i) => ({
+            id: `${i + 11}`,
+            name: f.name,
+            previewUrl: URL.createObjectURL(f),
+        }));
+        setList([...imageList, ...uploadedImages]);
+    };
+    const handleFilesChange = (files) => {
+        console.log('Uploaded files:', files);
+        // Handle the uploaded files here
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(FileUpload, { onFilesUploaded: (files) => handleFiles(files), uploadedFiles: file, onRemoveFile: (file) => console.log("SDFSDf", file), acceptTypes: [".webp", ".pdf", ".zip"], maxSizeKB: 512 }), _jsx("br", {}), _jsx(Reorder, { items: list, onReorder: (files) => setList(files), label: "Reorder" }), _jsx("br", {}), _jsx(FileUploaderd, { maxFiles: 10, maxTotalSize: 20, onFilesChange: handleFilesChange, acceptTypes: ["jpeg", "jpg", "png"] })] }));
+};

package/dist/esm/Pages/input.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import TextInput from "../Components/Input/TextInput";
+import PhoneNumberInput from "../Components/Input/PhoneNumberInput";
+import { InputSwitch } from "../Components/Input/Switch/InputSwitch";
+import { Mail } from "lucide-react";
+const InputPage = () => {
+    const [countries, setCountries] = useState([]);
+    const [switchState, setSwitchState] = useState(false);
+    useEffect(() => {
+        fetch("https://dev.api.pixelizetech.com/account/api/allCountries")
+            .then((res) => res.json())
+            .then((data) => {
+            setCountries(data);
+        })
+            .catch((err) => console.error("Error fetching countries:", err));
+    }, []);
+    return (_jsxs("div", { style: { width: "500px" }, children: [_jsx(TextInput, { label: "My Label", id: "input1", name: "hello", 
+                //helperText="Hello"
+                //errorMessage="Required"
+                // error={true}
+                type: "email", 
+                // border={"0px solid"}
+                // padding={"0px"}
+                // inputStyle={{ border: "0px solid", padding: "0px" }}
+                // inputGroupStyle={{ border: "0px solid", padding: "0px" }}
+                // error={true}
+                // errorMessage="Required"
+                onChange: (e) => {
+                    console.log(e.target.files);
+                }, onKeyDown: () => {
+                    console.log("keydown");
+                }, onBlur: () => {
+                    console.log("blur");
+                }, 
+                // helperText="sometibg"
+                isRequired: true, informationMessage: "This is information", isInformation: true, 
+                // isDisabled
+                minW: "200px", maxW: "300px", inputLeftIcon: _jsx(Mail, {}) }, "input1"), _jsx(PhoneNumberInput, { label: "Phone", id: "input1", name: "hello", country: "IN", value: "", codeValueReturn: false, countries: countries, onChange: (val) => {
+                    console.log(val, "hello");
+                }, isRequired: true, informationMessage: "This is information", isInformation: true, error: true, errorMessage: "Required", showCountrySelect: true, minW: "200px", maxW: "300px" }), _jsx(InputSwitch, { id: "repeat-switch", isChecked: switchState, onChange: (e) => setSwitchState(e.target.checked), switchText: "Repeat", switchTextPosition: "right", label: "My Switch", isInformation: true, informationMessage: "This is information", isRequired: true, size: "md" })] }));
+};
+export default InputPage;

package/dist/esm/Pages/kanbanboard.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTheme, Text, Box } from "@chakra-ui/react";
+import KanbanBoard from "../Components/KanbanBoard/KanbanBoard";
+const createItems = (count, prefix) => Array.from({ length: count }, (_, i) => ({
+    id: `${prefix}-${i}`,
+    rating: "Acquired",
+    name: `${prefix} Item ${i}`,
+    // customNode: () => <div style={{ backgroundColor: "red", padding: "10px", borderRadius: "5px" }}>Custom Node {i}</div>,
+}));
+const buildKanbanData = (primaryColumnColor, successColumnColor) => ({
+    acquired: {
+        id: "acquired",
+        title: "Acquired",
+        color: primaryColumnColor,
+        items: createItems(1000, "acq"),
+    },
+    active: {
+        id: "requested",
+        title: "Requested",
+        color: successColumnColor,
+        items: createItems(4, "req"),
+        customNode: () => (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 2, children: [_jsx(Text, { fontSize: "xs", color: "gray.600", children: "Total items: 4" }), _jsx(Text, { fontSize: "xs", color: "gray.500", children: "Drag cards to move" })] })),
+    },
+    closed: {
+        id: "closed",
+        title: "close",
+        color: successColumnColor,
+        items: createItems(3, "cls"),
+    },
+    open: {
+        id: "open",
+        title: "Open",
+        color: successColumnColor,
+        items: createItems(5, "OP"),
+        customNode: () => (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 2, children: [_jsx(Text, { fontSize: "xs", color: "gray.600", children: "Total items: 4" }), _jsx(Text, { fontSize: "xs", color: "gray.500", children: "Drag cards to move" })] })),
+    },
+    done: {
+        id: "done",
+        title: "Done",
+        color: successColumnColor,
+        items: createItems(6, "done"),
+    },
+});
+const viewListData = [
+    {
+        view_id: 5,
+        type: "contact",
+        viewName: "status",
+        groupBy: "Lead Source",
+        selectedField: [
+            "contact_owner",
+            "first_name",
+            "last_name",
+            "title",
+            "assistant",
+            "email",
+            "mobile",
+            "lead_source",
+            "dob",
+            "skype_id",
+            "twitter",
+            "sec_email",
+            "mail_street",
+            "mail_city",
+            "mail_state",
+            "mail_zip",
+            "mail_country",
+            "other_street",
+            "other_city",
+            "other_state",
+            "other_zip",
+            "other_country",
+            "fax",
+            "description",
+        ],
+        moduleId: null,
+        created_at: 1756720852175,
+        updated_at: 1756720852175,
+    },
+    {
+        view_id: 4,
+        type: "contact",
+        viewName: "demo",
+        groupBy: "Lead Source",
+        selectedField: [
+            "contact_owner",
+            "first_name",
+            "last_name",
+            "title",
+            "assistant",
+            "email",
+            "mobile",
+            "lead_source",
+            "dob",
+            "skype_id",
+            "twitter",
+            "sec_email",
+            "mail_street",
+            "mail_city",
+            "mail_state",
+            "mail_zip",
+            "mail_country",
+            "other_street",
+            "other_city",
+            "other_state",
+            "other_zip",
+            "other_country",
+            "fax",
+            "description",
+        ],
+        moduleId: null,
+        created_at: 1756720474429,
+        updated_at: 1756720474429,
+    },
+    {
+        view_id: 2,
+        type: "contact",
+        viewName: "kanabana",
+        groupBy: "Lead Source",
+        selectedField: [
+            "contact_owner",
+            "first_name",
+            "last_name",
+            "title",
+            "assistant",
+            "email",
+            "mobile",
+            "lead_source",
+            "dob",
+            "skype_id",
+            "twitter",
+            "sec_email",
+            "mail_street",
+            "mail_city",
+            "mail_state",
+            "mail_zip",
+            "mail_country",
+            "other_street",
+            "other_city",
+            "other_state",
+            "other_zip",
+            "other_country",
+            "fax",
+            "description",
+        ],
+        moduleId: null,
+        created_at: 1756457931264,
+        updated_at: 1756457931264,
+    },
+];
+const KanbanBoardExample = () => {
+    const theme = useTheme();
+    const data = useMemo(() => buildKanbanData(theme.colors.primary[500], theme.colors.semantic.success[500]), [theme]);
+    return (_jsx(KanbanBoard, { data: data, onDelete: (item) => console.log("Delete", item), onOpen: (item) => console.log("Open", item), onDrag: (updatedColumns) => console.log("New State", updatedColumns), onColumnDelete: (updatedColumns) => console.log("New Del", updatedColumns), isLoading: false, virtualization: true, kanbanCreate: {
+            isCreatable: true,
+            onCreate: () => { },
+        }, kanbanEdit: {
+            isEditable: true,
+            onEdit: () => { },
+            label: "Edit",
+        }, kanbanSelect: {
+            isSelect: true,
+            options: viewListData === null || viewListData === void 0 ? void 0 : viewListData.map((item) => ({
+                label: item === null || item === void 0 ? void 0 : item.viewName,
+                id: String(item === null || item === void 0 ? void 0 : item.view_id),
+            })),
+            onSelectChange: () => { },
+            selectPlaceholderText: "",
+            width: "200px",
+            value: "kanbanSelectValue",
+        }, enableColumnCollapse: true, enableColumnReorder: true, onColumnReorder: (columns) => console.log("New Order", columns), collapsedColumns: {
+            active: true,
+            closed: true,
+        }, onColumnCollapseChange: (columns) => console.log("New Collapse", columns) }));
+};
+export default KanbanBoardExample;

package/dist/esm/Pages/modal.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Modal, { ModalBody, ModalFooter, ModalHeader, } from "../Components/Modal/Modal";
+import Button from "../Components/Button/Button";
+const ModalPage = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isModelLoading, setIsModelLoading] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsModelLoading(false);
+        }, 5000);
+        // Cleanup the timer on component unmount
+        return () => clearTimeout(timer);
+    }, []);
+    const handleOnclick2 = () => {
+        setIsOpen(true);
+    };
+    return (_jsxs("div", { children: [_jsx(Button, { label: "ModelButton", onClick: handleOnclick2, width: 250, variant: "solid" }), _jsxs(Modal, { isOpen: isOpen, onClose: () => setIsOpen(false), 
+                // overlaybg={"blackAlpha.300"}
+                // overlaybackdropFilter={"blur(10px) hue-rotate(90deg)"}
+                size: "sm", isCentered: true, isLoading: isModelLoading, children: [_jsx(ModalHeader, { children: "hai" }), _jsx(ModalBody, { children: "heelo" }), _jsx(ModalFooter, { children: "welcome" })] })] }));
+};
+export default ModalPage;

package/dist/esm/Pages/multiSelect.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import MultiSelect from '../Components/MultiSelect/MultiSelect';
+const MultiSelectPage = () => {
+    const [selectedOptions, setSelectedOptions] = useState([
+        {
+            id: "1721664346718-1",
+            label: "Testing",
+        },
+    ]);
+    const handleValueSelectChange = (options) => {
+        setSelectedOptions(options);
+        console.log("Selected options updated:", options);
+    };
+    return (_jsx("div", { children: _jsx(MultiSelect, { value: selectedOptions, onValueChange: handleValueSelectChange, error: true, errorMessage: 'frr' }) }));
+};
+export default MultiSelectPage;

package/dist/esm/Pages/noteArea.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import NoteTextArea from '../Components/NoteTextArea/NoteTextArea';
+const NoteAreaPage = () => {
+    const [saveButtonLoading, setSaveButtonLoading] = useState(false);
+    const handleNoteValue = (noteValue, titleValue, file) => {
+        console.log("Title: ", titleValue);
+        console.log("Note: ", noteValue);
+        console.log("File: ", file);
+        setSaveButtonLoading(true);
+        setTimeout(() => {
+            setSaveButtonLoading(false);
+        }, 2000);
+    };
+    return (_jsx("div", { children: _jsx(NoteTextArea, { width: "720px", handleSubmit: (noteValue, titleValue, file) => {
+                handleNoteValue(noteValue, titleValue, file);
+            }, value: "text", title: "hello", isEditable: false, saveButtonLoading: saveButtonLoading, handleCancel: (isActive) => {
+                console.log("isActive", isActive);
+            }, customPlaceholder: "Add a note..." }) }));
+};
+export default NoteAreaPage;

package/dist/esm/Pages/notification.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from "@chakra-ui/react";
+import Notification from "../Components/Notification/Notification";
+const notificationPage = () => {
+    const kavinNotification = {
+        id: 1,
+        title: "Send Proposal",
+        startDate: "2025-10-07T06:30:00.000Z",
+        dueDate: "2025-10-07T07:30:00.000Z",
+        // endDate: "2025-10-07T08:30:00.000Z",
+        description: "Test Deal for Tour",
+        type: "task",
+        host: "Kavin",
+    };
+    // Fixed past date above always renders the "overdue" (error) state — this one is due 20
+    // minutes from render time so the "due soon" (warning/orange) state is directly visible
+    // without needing to edit test data.
+    const dueSoonMeeting = {
+        id: 2,
+        title: "Team standup",
+        startDate: new Date().toISOString(),
+        dueDate: new Date(Date.now() + 20 * 60 * 1000).toISOString(),
+        description: "Daily sync",
+        type: "meeting",
+        host: "Jane Doe",
+    };
+    const handleClose = () => {
+        console.log("Notification closed");
+    };
+    return (_jsxs(Stack, { spacing: 4, children: [_jsx(Notification, { notification: kavinNotification, onClose: handleClose, showStatus: true }), _jsx(Notification, { notification: dueSoonMeeting, showStatus: true })] }));
+};
+export default notificationPage;

package/dist/esm/Pages/numberInput.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import NumberInput from "../Components/NumberInput/NumberInput";
+const NumberInputPage = () => {
+    const [numbetInputValue, setNumbetInputValue] = useState("0");
+    const handleNumberinput = (value) => {
+        setNumbetInputValue(value);
+    };
+    return (_jsx("div", { children: _jsx(NumberInput, { min: 0, max: 20, value: numbetInputValue, onChange: handleNumberinput }) }));
+};
+export default NumberInputPage;

package/dist/esm/Pages/orgSwitcher.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
+import OrgSwitcher from "../Components/OrgSwitcher/OrgSwitcher";
+import { useCustomTheme } from "../Theme/useCustomTheme";
+const ORGS = [
+    { id: 1, name: "Pixelize Technologies", role: "Owner" },
+    { id: 2, name: "Norstella Pharma Solutions", role: "Admin" },
+    { id: 3, name: "Acme Corporation", role: "Sales Manager" },
+    { id: 4, name: "Globex International", role: "Member" },
+    { id: 5, name: "Initech Software Pvt Ltd", role: "Admin" },
+    { id: 6, name: "Umbrella Health Group", role: "Viewer" },
+    { id: 7, name: "Stark Industries", role: "Owner" },
+];
+const Section = ({ title, children, bg, }) => {
+    var _a, _b, _c, _d;
+    const theme = useCustomTheme();
+    return (_jsxs(Box, { mb: 8, p: 6, borderRadius: "16px", border: "1px solid", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#E2E8F0", bg: bg !== null && bg !== void 0 ? bg : theme.colors.background[50], children: [_jsx(Heading, { size: "sm", mb: 4, color: (_d = (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900]) !== null && _d !== void 0 ? _d : "gray.700", children: title }), children] }));
+};
+const OrgSwitcherPage = () => {
+    const [org, setOrg] = useState(1);
+    const [loadingOrg, setLoadingOrg] = useState(2);
+    const [isLoading, setIsLoading] = useState(false);
+    const handleSwitch = (id) => {
+        setIsLoading(true);
+        setLoadingOrg(id);
+        setTimeout(() => setIsLoading(false), 1200);
+    };
+    return (_jsxs(Box, { maxW: "900px", mx: "auto", py: 4, children: [_jsx(Heading, { size: "lg", mb: 6, children: "Org Switcher" }), _jsxs(Section, { title: "Ghost trigger (navbar) \u2014 searchable, role subtitles, active check", children: [_jsx(Flex, { bg: "gray.50", p: 3, borderRadius: "10px", justify: "flex-start", children: _jsx(OrgSwitcher, { organizations: ORGS, value: org, onChange: (id) => setOrg(id) }) }), _jsxs(Text, { mt: 3, fontSize: "sm", color: "gray.500", children: ["Selected org id: ", _jsx("b", { children: org })] })] }), _jsxs(Section, { title: "Loading state (switching)", children: [_jsx(OrgSwitcher, { organizations: ORGS, value: loadingOrg, onChange: handleSwitch, isLoading: isLoading }), _jsx(Text, { mt: 3, fontSize: "sm", color: "gray.500", children: "Pick an org \u2192 simulates a 1.2s switch with inline spinner." })] }), _jsx(Section, { title: "Variants & sizes", children: _jsxs(Flex, { gap: 6, align: "center", wrap: "wrap", children: [_jsx(OrgSwitcher, { organizations: ORGS.slice(0, 3), value: 1, onChange: () => { }, triggerVariant: "outline", size: "sm" }), _jsx(OrgSwitcher, { organizations: ORGS.slice(0, 3), value: 2, onChange: () => { }, triggerVariant: "subtle", size: "md" }), _jsx(OrgSwitcher, { organizations: ORGS.slice(0, 3), value: 3, onChange: () => { }, triggerVariant: "outline", size: "lg" })] }) })] }));
+};
+export default OrgSwitcherPage;

package/dist/esm/Pages/organizationDetails.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import OrganizationDetails from "../Components/OrganizationDetails/OrganizationDetails";
+const initialActive = [
+    {
+        orgId: 1,
+        company_name: "Pixelize HQ",
+        company_url: "pixelize.example.com",
+        default: 1,
+        uiInvite: 1,
+        defaultOrg: 1,
+        roleName: "Super Admin",
+        deleteDisabledReason: "Your default organization cannot be deleted",
+    },
+    {
+        orgId: 2,
+        company_name: "Northwind Traders",
+        company_url: "northwind.example.com",
+        default: 0,
+        uiInvite: 1,
+        defaultOrg: 0,
+        roleName: "Super Admin",
+    },
+    {
+        orgId: 3,
+        company_name: "Globex Corporation",
+        company_url: "globex.example.com",
+        default: 0,
+        uiInvite: 1,
+        defaultOrg: 0,
+        roleName: "Admin",
+        deleteDisabledReason: "Only a Super Admin can delete this organization",
+    },
+];
+const initialInvited = [
+    {
+        orgId: 4,
+        company_name: "Initech",
+        company_url: "initech.example.com",
+        default: 0,
+        uiInvite: 0,
+        defaultOrg: 0,
+    },
+];
+const OrganizationDetailsPage = () => {
+    const [active, setActive] = useState(initialActive);
+    const [invited, setInvited] = useState(initialInvited);
+    const [ownsConfirm, setOwnsConfirm] = useState(false);
+    const removeOrg = (orgId) => setActive((prev) => prev.filter((o) => o.orgId !== orgId));
+    return (_jsxs(_Fragment, { children: [_jsxs("label", { style: { display: "block", padding: "8px 12px", fontSize: 13 }, children: [_jsx("input", { type: "checkbox", checked: ownsConfirm, onChange: (e) => setOwnsConfirm(e.target.checked) }), " ", "Own the delete confirm (onDeleteRequest) instead of the built-in modal"] }), _jsx(OrganizationDetails, { activeOrganizations: active, invitedOrganizations: invited, userName: "Mahesh", onEditOrganization: (orgId, newName) => {
+                    console.log("[OrganizationDetailsPage] rename", orgId, newName);
+                    setActive((prev) => prev.map((o) => o.orgId === orgId ? { ...o, company_name: newName } : o));
+                }, onSetDefault: (orgId) => {
+                    console.log("[OrganizationDetailsPage] set default", orgId);
+                    setActive((prev) => prev.map((o) => ({ ...o, default: o.orgId === orgId ? 1 : 0 })));
+                }, onAcceptInvite: (orgId) => {
+                    console.log("[OrganizationDetailsPage] accept", orgId);
+                    setInvited((prev) => prev.filter((o) => o.orgId !== orgId));
+                }, onDeclineInvite: (orgId) => {
+                    console.log("[OrganizationDetailsPage] decline", orgId);
+                    setInvited((prev) => prev.filter((o) => o.orgId !== orgId));
+                }, onDeleteOrganization: (orgId) => {
+                    console.log("[OrganizationDetailsPage] delete", orgId);
+                    removeOrg(orgId);
+                }, onDeleteRequest: ownsConfirm
+                    ? (orgId) => {
+                        console.log("[OrganizationDetailsPage] delete request", orgId);
+                        if (window.confirm(`Delete organization ${orgId}?`))
+                            removeOrg(orgId);
+                    }
+                    : undefined, onCreateOrganization: (values) => {
+                    console.log("[OrganizationDetailsPage] create", values);
+                }, onBack: () => console.log("[OrganizationDetailsPage] back") })] }));
+};
+export default OrganizationDetailsPage;

package/dist/esm/Pages/photoViewer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ProfilePhotoViewer from '../Components/ProfilePhotoViewer/ProfilePhotoViewer';
+const PhotoViewer = () => {
+    return (_jsx("div", { children: _jsx(ProfilePhotoViewer, { photoUrl: "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=", onPhotoChange: (file) => console.log(file), isEditable: true, isView: true, fallbackText: "" }) }));
+};
+export default PhotoViewer;

package/dist/esm/Pages/pinInputs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PinInputs from "../Components/PinInput/PinInput";
+const PinInputPage = () => {
+    return (_jsx("div", { children: _jsx(PinInputs, { pins: 5, label: "Enter pin", color: "primary" }) }));
+};
+export default PinInputPage;