pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/esm/Components/Header/components/mobileMenu.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Button, Badge, Text, VStack, Collapse, HStack, } from "@chakra-ui/react";
+import React from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }) => {
+    const [openMenuLabel, setOpenMenuLabel] = React.useState(null);
+    React.useEffect(() => {
+        if (!isOpen)
+            setOpenMenuLabel(null);
+    }, [isOpen]);
+    return (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { pb: 4, display: { md: "none" }, children: _jsxs(Stack, { spacing: 4, children: [menuItems.map((item) => {
+                        var _a, _b, _c, _d, _e;
+                        return item.children ? (_jsxs(Box, { px: 2, children: [_jsx(Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: item.children.some((subItem) => isActive(subItem.href))
+                                        ? activeBg
+                                        : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (_jsx(ChevronDown, { size: 16 })) : (_jsx(ChevronRight, { size: 16 })), px: 2, children: _jsx(HStack, { w: "full", justify: "space-between", align: "center", children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), _jsx(Text, { fontWeight: "bold", children: item.label })] }) }) }), _jsx(Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: _jsx(Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                            var _a, _b, _c;
+                                            return (_jsx(Button, { onClick: () => {
+                                                    var _a;
+                                                    (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
+                                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), _jsx(Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                        }) }) })] }, item.label)) : (_jsx(Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", px: 2, py: 0.5, children: (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label })), _jsx(Text, { children: item.label })] }) }, item.label));
+                    }), rightSlot && _jsx(Box, { mt: 4, children: rightSlot })] }) }) }));
+};
+export default MobileMenu;

package/dist/esm/Components/Input/Input/Input.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Box, Input as ChakraInput, IconButton } from "@chakra-ui/react";
+import { Eye, EyeOff } from "lucide-react";
+import { TextLabel } from "../../Common/FormLabel.js";
+import { FIELD_RADIUS } from "../../Common/fieldStyles.js";
+import ErrorComponent from "../../Common/ErrorComponent.js";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+const Input = ({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }) => {
+    const { colors } = useCustomTheme();
+    const [showPassword, setShowPassword] = useState(false);
+    const isPassword = type === "password";
+    const inputType = isPassword ? (showPassword ? "text" : "password") : type;
+    const borderColor = error
+        ? colors.semanticText.error
+        : value
+            ? colors.primary[500]
+            : colors.boxborder[500];
+    const shadowPrimary = colors.boxShadow.primary;
+    const shadowError = colors.boxShadow.error;
+    return (_jsxs(Box, { className: inputBoxClassName, mb: 4, children: [_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), _jsxs(Box, { position: "relative", w: "100%", overflow: "hidden", children: [_jsx(ChakraInput, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: accentTextOnCanvas(colors.secondary, colors.backgroundColor.main), pr: isPassword ? 10 : 4, _hover: {
+                            borderColor: error
+                                ? colors.semantic.error[600]
+                                : value
+                                    ? colors.primary[600]
+                                    : colors.gray[400],
+                        }, _focus: {
+                            borderColor: error ? colors.semanticText.error : colors.primary[500],
+                            boxShadow: error
+                                ? `0 0 0 0.125rem ${shadowError}`
+                                : `0 0 0 0.125rem ${shadowPrimary}`,
+                            outline: "none",
+                        }, required: isRequired }), isPassword && (_jsx(IconButton, { type: "button", "aria-label": showPassword ? "Hide password" : "Show password", variant: "ghost", size: "sm", position: "absolute", right: 2, top: "50%", transform: "translateY(-50%)", icon: showPassword ? _jsx(Eye, { size: 20 }) : _jsx(EyeOff, { size: 20 }), onClick: () => setShowPassword((prev) => !prev), color: colors.textMuted }))] }), error && _jsx(ErrorComponent, { error: error })] }));
+};
+export default React.memo(Input);

package/dist/esm/Components/Input/Input/InputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Input/PhoneNumberInput.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { Box, Flex, Icon, Input, Select, InputGroup, InputLeftElement, FormControl, } from "@chakra-ui/react";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import HelperText from "../Common/HelperText.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const getFlagEmoji = (countryCode) => {
+    if (!countryCode)
+        return "";
+    return countryCode
+        .toUpperCase()
+        .replace(/./g, (char) => String.fromCodePoint(127397 + char.charCodeAt(0)));
+};
+const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
+const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
+const PhoneNumberInput = ({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, ref, name, minW, maxW, ...rest }) => {
+    const theme = useCustomTheme();
+    const getCountryTelCode = useCallback((countryCode) => {
+        var _a;
+        if (!countryCode)
+            return undefined;
+        return (_a = countries === null || countries === void 0 ? void 0 : countries.find(({ code }) => countryCode === code)) === null || _a === void 0 ? void 0 : _a.dial_code;
+    }, [countries]);
+    const [number, setNumber] = useState(value);
+    const [selectedCountry, setSelectedCountry] = useState(country);
+    const [countryCode, setCountryCode] = useState(country);
+    useEffect(() => {
+        if (country) {
+            const code = getCountryTelCode(country);
+            setSelectedCountry(country);
+            setCountryCode(code);
+        }
+    }, [country, getCountryTelCode]);
+    const handleCountryChange = (e) => {
+        const selected = e.target.value;
+        if (!selected) {
+            setSelectedCountry("");
+            setCountryCode("");
+            setNumber("");
+            onChange("");
+            return;
+        }
+        const code = getCountryTelCode(selected) || "";
+        setSelectedCountry(selected);
+        setCountryCode(code);
+        onChange(codeValueReturn ? `${code} ${number}`.trim() : `${number}`);
+    };
+    const handleNumberChange = (e) => {
+        if (countryCode) {
+            let numValue = e.target.value;
+            numValue = numValue.replace(/[^+\d\s]/g, "");
+            setNumber(numValue);
+            onChange(codeValueReturn ? `${countryCode} ${numValue}`.trim() : `${numValue}`);
+        }
+        else {
+            return;
+        }
+    };
+    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { size: size, ...rest, children: [_jsxs(InputLeftElement, { width: showCountrySelect ? "3rem" : "2rem", height: "100%", children: [showCountrySelect && _jsx(_Fragment, { children: _jsxs(Select, { position: "absolute", top: "0", left: "0", height: "100%", id: selectId, width: sizeToWidth[size], opacity: 0, zIndex: 1, value: selectedCountry, onChange: handleCountryChange, size: size, pt: sizeToPt[size], iconColor: theme.colors.gray[500], children: [_jsx("option", { value: "", children: "Select Country" }), countries.map((option) => (_jsx("option", { value: option.code, children: option.country }, option.code)))] }) }), _jsx(Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between", children: selectedCountry ? (_jsx(Box, { fontSize: "1.2rem", children: getFlagEmoji(selectedCountry) })) : (_jsx(Icon, { viewBox: "0 0 24 24", boxSize: "1rem", children: _jsx("path", { fill: "currentColor", d: "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.79,14.8 16.33,14.67 16.8,14.82C18.17,15.27 19.65,15.5 21,15.5C21.55,15.5 22,15.95 22,16.5V20C22,20.55 21.55,21 21,21C10.61,21 3,13.39 3,3C3,2.45 3.45,2 4,2H7.5C8.05,2 8.5,2.45 8.5,3C8.5,4.35 8.73,5.83 9.18,7.2C9.33,7.67 9.2,8.21 8.82,8.59L6.62,10.79Z" }) })) })] }), _jsx(Input, { type: "tel", pl: showCountrySelect ? "4rem" : "2rem", value: number, id: inputId, onChange: handleNumberChange, onBlur: onBlur, onFocus: onFocus, isReadOnly: isReadOnly, name: name, size: size, height: height, ref: ref, autoComplete: autoComplete, placeholder: placeholder, disabled: !selectedCountry, isInvalid: error })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+};
+export default PhoneNumberInput;

package/dist/esm/Components/Input/PhoneNumberInputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Input/Switch/InputSwitch.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch, FormControl, FormLabel, HStack, Box, } from "@chakra-ui/react";
+import { TextLabel } from "../../Common/FormLabel.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+export const InputSwitch = ({ switchText, switchTextPosition = "right", id, isChecked, label, isInformation, informationMessage, isRequired, size = "md", ...props }) => {
+    const theme = useCustomTheme();
+    // Read the palette directly — it is already swapped for the active mode, so pairing the rungs
+    // through useColorModeValue would adapt twice and pick the wrong rung on the dark canvas.
+    const activeColor = theme.colors.primary[500];
+    const inactiveColor = theme.colors.gray[300];
+    const sizeStyles = {
+        sm: { fontSize: "sm", spacing: 1 },
+        md: { fontSize: "md", spacing: 2 },
+        lg: { fontSize: "lg", spacing: 3 },
+    };
+    return (_jsxs(FormControl, { children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsx(Box, { display: "flex", alignItems: "center", flexGrow: 1, children: _jsxs(HStack, { spacing: sizeStyles[size].spacing, children: [switchText && switchTextPosition === "left" && (_jsx(FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer", children: switchText })), _jsx(Switch, { id: id, size: size, isChecked: isChecked, colorScheme: "blue", sx: {
+                                "span.chakra-switch__track": {
+                                    bg: isChecked ? activeColor : inactiveColor,
+                                },
+                            }, ...props }), switchText && switchTextPosition === "right" && (_jsx(FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer", children: switchText }))] }) })] }));
+};

package/dist/esm/Components/Input/TextInput.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import { Box, FormControl, Input, InputGroup, InputLeftElement, InputRightElement, } from "@chakra-ui/react";
+import { getTextInputIconWrapperSx } from "./textInputIconSize.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import HelperText from "../Common/HelperText.js";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const TextInput = forwardRef(({ label, type = "text", id, name, onChange, onBlur, onFocus, isDisabled = false, isReadOnly = false, isRequired = false, value, placeholder = "Placeholder", width = "100%", height, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size = "md", isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, ...props }, ref) => {
+    const theme = useCustomTheme();
+    const sizeKey = typeof size === "string" ? size : "md";
+    const iconScaleSx = getTextInputIconWrapperSx(sizeKey);
+    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftIcon && (_jsx(InputLeftElement, { onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconScaleSx, color: theme.colors.gray[500], children: inputLeftIcon }) })), _jsx(Input, { type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, ...(height != null && { height }), isInvalid: error, ref: ref, autoComplete: autoComplete, ...inputStyle, ...props }), inputRightIcon && (_jsx(InputRightElement, { onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none", ...rightElementStyle, height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconScaleSx, children: inputRightIcon }) }))] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+});
+TextInput.displayName = "TextInput";
+export default React.memo(TextInput);

package/dist/esm/Components/Input/TextInput.styles.js

@@ -0,0 +1,98 @@
+export const Input = {
+    baseStyle: {
+        field: {
+            fontWeight: 500,
+            fontSize: "0.875rem",
+            letterSpacing: "0.044rem",
+            pt: "0.813rem",
+            pb: "0.813rem",
+            display: "flex",
+            alignItems: "center",
+            borderRadius: "lg",
+            transition: "border-color 0.2s, box-shadow 0.2s",
+            _placeholder: {
+                fontStyle: "italic",
+            },
+        },
+    },
+    sizes: {
+        sm: {
+            field: {
+                h: "2rem",
+                fontSize: "0.8125rem",
+            },
+        },
+        md: {
+            field: {
+                h: "2.75rem",
+                fontSize: "0.875rem",
+            },
+        },
+        lg: {
+            field: {
+                h: "3.25rem",
+                fontSize: "0.9375rem",
+            },
+        },
+    },
+    variants: {
+        outline: (props) => {
+            const { theme } = props;
+            const errorColor = theme.colors.semanticText.error;
+            const borderColor = theme.colors.boxborder[500];
+            const shadowPrimary = theme.colors.boxShadow.primary;
+            const shadowError = theme.colors.boxShadow.error;
+            const primary = theme.colors.primary[500];
+            return {
+                field: {
+                    bg: theme.colors.gray[50],
+                    border: "0.063rem solid",
+                    borderColor,
+                    _placeholder: {
+                        color: theme.colors.textMuted,
+                    },
+                    _hover: {
+                        borderColor: primary,
+                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        outline: "0"
+                    },
+                    _focus: {
+                        borderColor: primary,
+                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        outline: "0"
+                    },
+                    _invalid: {
+                        borderColor: errorColor,
+                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        _hover: {
+                            borderColor: errorColor,
+                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
+                        },
+                        _focus: {
+                            borderColor: errorColor,
+                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
+                        },
+                    },
+                    _readOnly: {
+                        boxShadow: 'inherit',
+                    },
+                    _disabled: {
+                        bg: theme.colors.gray[100],
+                        opacity: 1,
+                        cursor: "not-allowed",
+                        _hover: {
+                            border: "0.063rem solid",
+                            borderColor,
+                        },
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/esm/Components/Input/TextInputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Input/textInputIconSize.js

@@ -0,0 +1,36 @@
+/** Pixels: aligned with `Input` field density (Chakra `sizes.6`–`12` and typical Lucide use). */
+const TEXT_INPUT_ICON_PX = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 24,
+};
+/**
+ * Returns icon target width/height in px for a Chakra `Input` / `InputGroup` `size`.
+ */
+export function getTextInputIconSizePx(size) {
+    var _a;
+    if (!size)
+        return TEXT_INPUT_ICON_PX.md;
+    return (_a = TEXT_INPUT_ICON_PX[size]) !== null && _a !== void 0 ? _a : TEXT_INPUT_ICON_PX.md;
+}
+/**
+ * Scales SVG icons in the icon slot (e.g. Lucide) to match field size; plain `fontSize` does not
+ * affect them because they set explicit width/height.
+ */
+export function getTextInputIconWrapperSx(size) {
+    const px = getTextInputIconSizePx(size);
+    return {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        lineHeight: 0,
+        flexShrink: 0,
+        // Override Lucide/inline width on SVG; cover direct or nested (e.g. one wrapper) icons
+        "& > svg, & > * svg, & svg": {
+            width: `${px}px !important`,
+            height: `${px}px !important`,
+        },
+    };
+}

package/dist/esm/Components/InputTextArea/InputTextArea.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { FormControl, Textarea, } from "@chakra-ui/react";
+import { TextLabel } from "../Common/FormLabel.js";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import HelperText from "../Common/HelperText.js";
+const InputTextArea = forwardRef(function InputTextArea({ label, placeholder, value, onChange, onBlur, name, size = "md", resize = "both", width = 500, isDisabled, isReadOnly, isRequired = false, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete = "" }, ref) {
+    return (_jsxs(FormControl, { children: [label && _jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), _jsx(Textarea, { ref: ref, id: id, name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+});
+export default InputTextArea;

package/dist/esm/Components/InputTextArea/InputTextArea.style.js

@@ -0,0 +1,76 @@
+export const Textarea = {
+    baseStyle: {
+        fontWeight: 500,
+        fontSize: "0.875rem",
+        letterSpacing: "0.044rem",
+        pt: "0.813rem",
+        pb: "0.813rem",
+        borderRadius: "lg",
+        transition: "border-color 0.2s, box-shadow 0.2s",
+        _placeholder: {
+            fontStyle: "italic",
+        },
+    },
+    sizes: {
+        md: {
+            fontSize: "0.875rem",
+            h: "2.75rem",
+        },
+    },
+    variants: {
+        outline: (props) => {
+            const { theme } = props;
+            const errorColor = theme.colors.semanticText.error;
+            const borderColor = theme.colors.boxborder[500];
+            const shadowPrimary = theme.colors.boxShadow.primary;
+            const shadowError = theme.colors.boxShadow.error;
+            const primary = theme.colors.primary[500];
+            return {
+                border: "0.063rem solid",
+                borderColor,
+                bg: theme.colors.gray[50],
+                _placeholder: {
+                    color: theme.colors.textMuted,
+                },
+                _hover: {
+                    borderColor: primary,
+                    outline: "0",
+                },
+                _focus: {
+                    borderColor: primary,
+                    boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                    outline: "0",
+                },
+                _invalid: {
+                    borderColor: errorColor,
+                    boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                    _hover: {
+                        borderColor: errorColor,
+                        outline: "0",
+                    },
+                    _focus: {
+                        borderColor: errorColor,
+                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        outline: "0",
+                    },
+                },
+                _readOnly: {
+                    boxShadow: 'inherit',
+                },
+                _disabled: {
+                    bg: theme.colors.gray[100],
+                    opacity: 1,
+                    cursor: "not-allowed",
+                    _hover: {
+                        border: "0.063rem solid",
+                        borderColor,
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/esm/Components/InputTextArea/InputTextAreaProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/KanbanBoard/AccountCard.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { Box, Flex, Text, Tooltip, HStack, VStack, Collapse, Spacer, } from "@chakra-ui/react";
+import { ChevronDown, ChevronUp, ExternalLink, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+import AccountRow from "./AccountRow.js";
+const excludeKeys = ["id", "details"];
+const AccountCard = React.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
+    const { colors } = useCustomTheme();
+    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = resolveStatusTone(colors.semantic.error, mode);
+    const keys = useMemo(() => Object.keys(account).filter((key) => typeof account[key] === "string" && !excludeKeys.includes(key)), [account]);
+    const visibleKeys = isExpanded ? keys : keys.slice(0, 4);
+    const handleToggle = () => {
+        onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
+    };
+    return (_jsx(Box, { role: "group", width: "100%", borderRadius: "lg", background: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, boxShadow: "sm", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
+            borderColor: colors.primary[300],
+            boxShadow: "md",
+            transform: "translateY(-0.063rem)",
+        }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(Text, { color: colors.accentText, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: colors.primary[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: {
+                                            bg: colors.primary[50],
+                                            color: accentTextOnCanvas(colors.primary, colors.primary[50]),
+                                        }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: _jsx(ExternalLink, { size: 15 }) }) })] })] })] }) }));
+});
+export default AccountCard;

package/dist/esm/Components/KanbanBoard/AccountRow.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text, Tooltip, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { toWords } from "../../Utils/functions.js";
+const AccountRow = ({ label, value }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { w: "full", gap: 1, children: [_jsx(Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: _jsx(Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: toWords(label) }) }), _jsx(Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), _jsx(Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: _jsx(Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));
+};
+export default AccountRow;

package/dist/esm/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import Select from "../../Select/Select.js";
+import { CirclePlus, SquarePen } from "lucide-react";
+import VeritcalDivider from "../../Divider/Divider.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
+import Button from "../../Button/Button.js";
+const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20, color: onFilled(colors.primary[500], colors.white, colors.black) }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+};
+export default KanbanActions;