pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.40

package/dist/Components/PdfViewer/PdfViewer.js

@@ -7,9 +7,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+/** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
 const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.gray[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    const toolbarSurface = theme.colors.background[50];
+    const iconHoverInk = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, toolbarSurface);
+    const iconHoverBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).active;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
 };
 exports.default = PdfViewer;

package/dist/Components/PinInput/PinInput.d.ts

@@ -1,2 +1,3 @@
 import { ChakraPinInputProps } from "./PinInputProps";
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. Not to be confused with the unexported `PinInputs/PinInputs.tsx`. */
 export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, id, isRequired, isInformation, informationMessage, }: ChakraPinInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/PinInput/PinInput.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. Not to be confused with the unexported `PinInputs/PinInputs.tsx`. */
 function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { backgroundColor: theme.colors.background[100], 

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -1,4 +1,5 @@
 import { PinInputProps } from "@chakra-ui/react";
+/** The only pin/OTP component exported from the package — the similarly-named PinInputs in Components/PinInputs/ is dead code, not exported; do not deep-import it. */
 export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultValue" | "placeholder" | "manageFocus" | "errorBorderColor" | "focusBorderColor" | "onChange" | "onComplete"> & {
     type?: "alphanumeric" | "number";
     size?: "xs" | "sm" | "md" | "lg";
@@ -6,6 +7,7 @@ export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultV
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";
     pins: number;
     label?: string;
+    /** Only feeds the visible label's htmlFor — no PinInputField ever receives this id, so the association points at nothing. */
     id?: string;
     isRequired?: boolean;
     isInformation?: boolean;

package/dist/Components/PinInputs/PinInputs.d.ts

@@ -1,3 +1,4 @@
 import { PinInputsProps } from "./PinInputsProps";
+/** Unused hand-rolled OTP input — not exported from index.ts and not referenced anywhere in this repo; use `PinInput` (from `Components/PinInput/`) instead. */
 declare const PinInputs: ({ length, label, error, onChange, onComplete, mask, placeholder, }: PinInputsProps) => import("react/jsx-runtime").JSX.Element;
 export default PinInputs;

package/dist/Components/PinInputs/PinInputs.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const Label_1 = __importDefault(require("../Common/Label"));
 const ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Unused hand-rolled OTP input — not exported from index.ts and not referenced anywhere in this repo; use `PinInput` (from `Components/PinInput/`) instead. */
 const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [values, setValues] = (0, react_1.useState)(Array(length).fill(""));

package/dist/Components/PinInputs/PinInputsProps.d.ts

@@ -1,3 +1,4 @@
+/** Not exported from index.ts and unused anywhere in this repo — for the library's real pin/OTP field, use PinInput instead. */
 export type PinInputsProps = {
     length?: number;
     label?: string;

package/dist/Components/PlanBadge/PlanBadgeProps.d.ts

@@ -1,4 +1,5 @@
 import { PlanBadgeInput } from "../../Utils/planBadge";
+/** Props for the top-bar plan badge; see PlanBadgeInput for the state this resolves into a PlanPill. */
 export interface PlanBadgeProps {
     /** The org's plan state. Resolved into label, tone and chip text internally. */
     input: PlanBadgeInput;
@@ -6,5 +7,6 @@ export interface PlanBadgeProps {
     maxLabelWidth?: string;
     /** Accessible label (falls back to `label — status`). */
     ariaLabel?: string;
+    /** Passed straight through to the underlying PlanPill button — same always-interactive caveat applies. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/Components/PlanPill/PlanPillProps.d.ts

@@ -4,6 +4,7 @@ import { ElementType } from "react";
  * badge reads as healthy / expiring soon / expired before the text is read.
  */
 export type PlanPillTone = "normal" | "warning" | "danger";
+/** Presentational plan-state pill — label/status/gradient only, no resolution logic. For org plan data, use PlanBadge instead of hand-deriving tone/copy here. */
 export interface PlanPillProps {
     /** Primary label, e.g. the plan name or an upgrade prompt. */
     label: string;
@@ -23,5 +24,6 @@ export interface PlanPillProps {
     maxLabelWidth?: string;
     /** Accessible label (falls back to `label — status`). */
     ariaLabel?: string;
+    /** Renders as a real <button> (hover-lift, pointer cursor, tabbable) even when omitted — there is no static/non-interactive mode. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/Components/Primitives/Primitives.d.ts

@@ -0,0 +1,6 @@
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Avatar, AvatarGroup, Badge, Spinner, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Tabs, TabList, Tab, TabPanels, TabPanel, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+export { Table as TableRoot, Slider as RangeSlider } from "@chakra-ui/react";
+export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, AvatarProps, BadgeProps, IconProps, LinkProps, ImageProps, SpinnerProps, DividerProps, ContainerProps, IconButtonProps, FormControlProps, FormLabelProps, TabsProps, PopoverProps, ListProps, AlertProps, MenuProps, AccordionProps, } from "@chakra-ui/react";
+export { Input, Textarea, Progress, Radio, RadioGroup, Skeleton, ModalOverlay, ModalContent, ModalCloseButton, CardBody, } from "@chakra-ui/react";
+export { Card as ChakraCard, Select as ChakraSelect, Modal as ChakraModal, ModalBody as ChakraModalBody, ModalHeader as ChakraModalHeader, ModalFooter as ChakraModalFooter, } from "@chakra-ui/react";
+export type { InputProps, TextareaProps, ProgressProps, RadioProps, SkeletonProps as ChakraSkeletonProps, SelectProps as ChakraSelectProps, ModalProps as ChakraModalProps, CardProps as ChakraCardProps, } from "@chakra-ui/react";

package/dist/Components/Primitives/Primitives.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControl = exports.PopoverCloseButton = exports.PopoverArrow = exports.PopoverFooter = exports.PopoverHeader = exports.PopoverBody = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.UnorderedList = exports.OrderedList = exports.ListIcon = exports.ListItem = exports.List = exports.Hide = exports.Show = exports.Collapse = exports.Portal = exports.AlertDescription = exports.AlertTitle = exports.AlertIcon = exports.Alert = exports.Spinner = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.Icon = exports.Image = exports.Link = exports.Heading = exports.Text = exports.Divider = exports.Container = exports.Spacer = exports.Center = exports.WrapItem = exports.Wrap = exports.SimpleGrid = exports.GridItem = exports.Grid = exports.HStack = exports.VStack = exports.Stack = exports.Flex = exports.Box = void 0;
+exports.ChakraModalBody = exports.ChakraModal = exports.ChakraSelect = exports.ChakraCard = exports.CardBody = exports.ModalCloseButton = exports.ModalContent = exports.ModalOverlay = exports.Skeleton = exports.RadioGroup = exports.Radio = exports.Progress = exports.Textarea = exports.Input = exports.RangeSlider = exports.TableRoot = exports.useBreakpointValue = exports.useToken = exports.useMediaQuery = exports.useDisclosure = exports.extendTheme = exports.ChakraProvider = exports.SliderMark = exports.SliderThumb = exports.SliderFilledTrack = exports.SliderTrack = exports.AccordionIcon = exports.AccordionPanel = exports.AccordionButton = exports.AccordionItem = exports.Accordion = exports.MenuItemOption = exports.MenuOptionGroup = exports.MenuDivider = exports.MenuGroup = exports.MenuItem = exports.MenuList = exports.MenuButton = exports.Menu = exports.Td = exports.Th = exports.Tr = exports.Tfoot = exports.Tbody = exports.Thead = exports.TableContainer = exports.IconButton = exports.FormHelperText = exports.FormErrorMessage = exports.FormLabel = void 0;
+exports.ChakraModalFooter = exports.ChakraModalHeader = void 0;
+var react_1 = require("@chakra-ui/react");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return react_1.Box; } });
+Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return react_1.Flex; } });
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return react_1.Stack; } });
+Object.defineProperty(exports, "VStack", { enumerable: true, get: function () { return react_1.VStack; } });
+Object.defineProperty(exports, "HStack", { enumerable: true, get: function () { return react_1.HStack; } });
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return react_1.Grid; } });
+Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return react_1.GridItem; } });
+Object.defineProperty(exports, "SimpleGrid", { enumerable: true, get: function () { return react_1.SimpleGrid; } });
+Object.defineProperty(exports, "Wrap", { enumerable: true, get: function () { return react_1.Wrap; } });
+Object.defineProperty(exports, "WrapItem", { enumerable: true, get: function () { return react_1.WrapItem; } });
+Object.defineProperty(exports, "Center", { enumerable: true, get: function () { return react_1.Center; } });
+Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return react_1.Spacer; } });
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return react_1.Container; } });
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return react_1.Divider; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return react_1.Text; } });
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return react_1.Heading; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return react_1.Link; } });
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return react_1.Image; } });
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return react_1.Icon; } });
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return react_1.Avatar; } });
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return react_1.AvatarGroup; } });
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return react_1.Badge; } });
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return react_1.Spinner; } });
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return react_1.Alert; } });
+Object.defineProperty(exports, "AlertIcon", { enumerable: true, get: function () { return react_1.AlertIcon; } });
+Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return react_1.AlertTitle; } });
+Object.defineProperty(exports, "AlertDescription", { enumerable: true, get: function () { return react_1.AlertDescription; } });
+Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return react_1.Portal; } });
+Object.defineProperty(exports, "Collapse", { enumerable: true, get: function () { return react_1.Collapse; } });
+Object.defineProperty(exports, "Show", { enumerable: true, get: function () { return react_1.Show; } });
+Object.defineProperty(exports, "Hide", { enumerable: true, get: function () { return react_1.Hide; } });
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return react_1.List; } });
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return react_1.ListItem; } });
+Object.defineProperty(exports, "ListIcon", { enumerable: true, get: function () { return react_1.ListIcon; } });
+Object.defineProperty(exports, "OrderedList", { enumerable: true, get: function () { return react_1.OrderedList; } });
+Object.defineProperty(exports, "UnorderedList", { enumerable: true, get: function () { return react_1.UnorderedList; } });
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return react_1.Tabs; } });
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return react_1.TabList; } });
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return react_1.Tab; } });
+Object.defineProperty(exports, "TabPanels", { enumerable: true, get: function () { return react_1.TabPanels; } });
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return react_1.TabPanel; } });
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return react_1.Popover; } });
+Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return react_1.PopoverTrigger; } });
+Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return react_1.PopoverContent; } });
+Object.defineProperty(exports, "PopoverBody", { enumerable: true, get: function () { return react_1.PopoverBody; } });
+Object.defineProperty(exports, "PopoverHeader", { enumerable: true, get: function () { return react_1.PopoverHeader; } });
+Object.defineProperty(exports, "PopoverFooter", { enumerable: true, get: function () { return react_1.PopoverFooter; } });
+Object.defineProperty(exports, "PopoverArrow", { enumerable: true, get: function () { return react_1.PopoverArrow; } });
+Object.defineProperty(exports, "PopoverCloseButton", { enumerable: true, get: function () { return react_1.PopoverCloseButton; } });
+Object.defineProperty(exports, "FormControl", { enumerable: true, get: function () { return react_1.FormControl; } });
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return react_1.FormLabel; } });
+Object.defineProperty(exports, "FormErrorMessage", { enumerable: true, get: function () { return react_1.FormErrorMessage; } });
+Object.defineProperty(exports, "FormHelperText", { enumerable: true, get: function () { return react_1.FormHelperText; } });
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return react_1.IconButton; } });
+Object.defineProperty(exports, "TableContainer", { enumerable: true, get: function () { return react_1.TableContainer; } });
+Object.defineProperty(exports, "Thead", { enumerable: true, get: function () { return react_1.Thead; } });
+Object.defineProperty(exports, "Tbody", { enumerable: true, get: function () { return react_1.Tbody; } });
+Object.defineProperty(exports, "Tfoot", { enumerable: true, get: function () { return react_1.Tfoot; } });
+Object.defineProperty(exports, "Tr", { enumerable: true, get: function () { return react_1.Tr; } });
+Object.defineProperty(exports, "Th", { enumerable: true, get: function () { return react_1.Th; } });
+Object.defineProperty(exports, "Td", { enumerable: true, get: function () { return react_1.Td; } });
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return react_1.Menu; } });
+Object.defineProperty(exports, "MenuButton", { enumerable: true, get: function () { return react_1.MenuButton; } });
+Object.defineProperty(exports, "MenuList", { enumerable: true, get: function () { return react_1.MenuList; } });
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return react_1.MenuItem; } });
+Object.defineProperty(exports, "MenuGroup", { enumerable: true, get: function () { return react_1.MenuGroup; } });
+Object.defineProperty(exports, "MenuDivider", { enumerable: true, get: function () { return react_1.MenuDivider; } });
+Object.defineProperty(exports, "MenuOptionGroup", { enumerable: true, get: function () { return react_1.MenuOptionGroup; } });
+Object.defineProperty(exports, "MenuItemOption", { enumerable: true, get: function () { return react_1.MenuItemOption; } });
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return react_1.Accordion; } });
+Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return react_1.AccordionItem; } });
+Object.defineProperty(exports, "AccordionButton", { enumerable: true, get: function () { return react_1.AccordionButton; } });
+Object.defineProperty(exports, "AccordionPanel", { enumerable: true, get: function () { return react_1.AccordionPanel; } });
+Object.defineProperty(exports, "AccordionIcon", { enumerable: true, get: function () { return react_1.AccordionIcon; } });
+Object.defineProperty(exports, "SliderTrack", { enumerable: true, get: function () { return react_1.SliderTrack; } });
+Object.defineProperty(exports, "SliderFilledTrack", { enumerable: true, get: function () { return react_1.SliderFilledTrack; } });
+Object.defineProperty(exports, "SliderThumb", { enumerable: true, get: function () { return react_1.SliderThumb; } });
+Object.defineProperty(exports, "SliderMark", { enumerable: true, get: function () { return react_1.SliderMark; } });
+Object.defineProperty(exports, "ChakraProvider", { enumerable: true, get: function () { return react_1.ChakraProvider; } });
+Object.defineProperty(exports, "extendTheme", { enumerable: true, get: function () { return react_1.extendTheme; } });
+Object.defineProperty(exports, "useDisclosure", { enumerable: true, get: function () { return react_1.useDisclosure; } });
+Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return react_1.useMediaQuery; } });
+Object.defineProperty(exports, "useToken", { enumerable: true, get: function () { return react_1.useToken; } });
+Object.defineProperty(exports, "useBreakpointValue", { enumerable: true, get: function () { return react_1.useBreakpointValue; } });
+// Renamed: the library's own Table and Slider own these names.
+var react_2 = require("@chakra-ui/react");
+Object.defineProperty(exports, "TableRoot", { enumerable: true, get: function () { return react_2.Table; } });
+Object.defineProperty(exports, "RangeSlider", { enumerable: true, get: function () { return react_2.Slider; } });
+var react_3 = require("@chakra-ui/react");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return react_3.Input; } });
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return react_3.Textarea; } });
+Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return react_3.Progress; } });
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return react_3.Radio; } });
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return react_3.RadioGroup; } });
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return react_3.Skeleton; } });
+Object.defineProperty(exports, "ModalOverlay", { enumerable: true, get: function () { return react_3.ModalOverlay; } });
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return react_3.ModalContent; } });
+Object.defineProperty(exports, "ModalCloseButton", { enumerable: true, get: function () { return react_3.ModalCloseButton; } });
+Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return react_3.CardBody; } });
+// Prefixed because the library ships its own component under each of these names.
+var react_4 = require("@chakra-ui/react");
+Object.defineProperty(exports, "ChakraCard", { enumerable: true, get: function () { return react_4.Card; } });
+Object.defineProperty(exports, "ChakraSelect", { enumerable: true, get: function () { return react_4.Select; } });
+Object.defineProperty(exports, "ChakraModal", { enumerable: true, get: function () { return react_4.Modal; } });
+Object.defineProperty(exports, "ChakraModalBody", { enumerable: true, get: function () { return react_4.ModalBody; } });
+Object.defineProperty(exports, "ChakraModalHeader", { enumerable: true, get: function () { return react_4.ModalHeader; } });
+Object.defineProperty(exports, "ChakraModalFooter", { enumerable: true, get: function () { return react_4.ModalFooter; } });

package/dist/Components/ProductCard/ProductCardProps.d.ts

@@ -1,12 +1,17 @@
+/** Card size; drives width, image height and padding via ProductCard's own sizeStyles map. */
 export type SizeType = "xs" | "sm" | "md" | "lg";
+/** Compact catalog/grid tile (image + price + cart actions) — for a full gallery/description page use ProductDetails instead. */
 export type ProductCardProps = {
     id: string | number;
     label: string;
+    /** Accepted by the type but never read by ProductCard — passing it has no effect. */
     description?: string;
     productImage: productImage[];
+    /** Renders nothing at all past 4 tags — ProductTags' row layout has no case for 5 or more. */
     tags?: string[];
     rating?: string | number;
     reviews?: string | number;
+    /** Non-empty when provided — `[]` crashes the price dropdown; selection won't refresh if this array is later replaced. */
     options?: options[];
     onClick?: () => void;
     button?: {
@@ -15,6 +20,7 @@ export type ProductCardProps = {
     };
     onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
     onNotifyMe?: (id: string | number, var_id: number) => void;
+    /** Also fires once on mount for the default (first) option, not only when the shopper picks a different one. */
     onOptionChange?: (option: options) => void;
     addToCart?: boolean;
     goToCart?: boolean;
@@ -22,10 +28,12 @@ export type ProductCardProps = {
     OnGoToCart?: () => void;
     batch?: batch;
     size?: SizeType;
+    /** Accepted by the type but never read anywhere in ProductCard — always a no-op regardless of value. */
     avalabilitys?: boolean;
     isQtyEditable?: boolean;
     displayRating?: boolean;
 };
+/** One purchase variant (weight/price/stock) shown in the price dropdown; var_id identifies it to cart callbacks. */
 export type options = {
     label: string;
     weight: number;
@@ -35,10 +43,12 @@ export type options = {
     var_id: number;
     stocks: number;
 };
+/** Corner ribbon badge on the product image (e.g. "Sale"); color defaults to green when unset. */
 export type batch = {
     label: string;
     color?: string;
 };
+/** One gallery image; the first two (after filtering isImage !== false) are the cover and hover-swap. */
 export type productImage = {
     imageUrl: string;
     imageId: number;

package/dist/Components/ProductCard/ProductReview.d.ts

@@ -1,4 +1,5 @@
 type ProductReviewProps = {
+    /** Clamped 0-5, but the fill bar divides by 6 internally — a perfect 5 rating never fully fills the star. */
     rating?: string | number;
     reviewCount?: string | number;
     mb?: number;

package/dist/Components/ProductCard/ProductReview.js

@@ -5,6 +5,8 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const color_1 = require("../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 // The theme's `yellow` scale reverses index roles in dark mode (like every utility hue), so
 // pulling it through the theme would silently flip this decorative "filled star" from gold to
 // pale. A rating star is a universal, brand-independent gold — not something that should follow
@@ -19,6 +21,9 @@ const ProductReview = ({ rating, reviewCount, mb = 0 }) => {
     // Calculate fill percentage: (rating / 5) * 100%
     const numericRating = hasRating ? Math.min(Math.max(Number(rating), 0), 5) : 0;
     const fillPercentage = (numericRating / 6) * 100;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), px: 2, borderRadius: "md", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: RATING_STAR_FILL, fill: RATING_STAR_FILL }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && (0, jsx_runtime_1.jsx)(react_1.Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
+    const chipBg = colors.teal[50];
+    const chipInk = (0, accentText_1.accentTextOnCanvas)(colors.teal, chipBg);
+    const starFill = (0, color_1.contrastRatio)(RATING_STAR_FILL, chipBg) >= outlineRung_1.AA_NON_TEXT ? RATING_STAR_FILL : chipInk;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mb: mb, children: [hasRating && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, bg: chipBg, color: chipInk, px: 2, borderRadius: "md", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", flexShrink: 0, display: "inline-block", width: "14px", height: "14px", lineHeight: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: "14px", height: "14px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, fill: "none", strokeWidth: 1.5 }) }), fillPercentage > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 0, left: 0, width: `${fillPercentage}%`, height: "100%", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 14, color: starFill, fill: starFill }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: "bold", children: numericRating })] })), hasRating && hasReviewCount && (0, jsx_runtime_1.jsx)(react_1.Box, { h: "4", w: "0.063rem", bg: colors.boxborder[500] }), hasReviewCount && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: ["(", reviewCount, ")"] })] }))] }));
 };
 exports.default = ProductReview;

package/dist/Components/ProductCard/ProductTags.js

@@ -25,8 +25,8 @@ const ProductTags = ({ tags, className, size = 'sm' }) => {
 };
 const Tag = ({ children, fullWidth = false, size = 'sm', }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const tagBorder = colors.semanticText.error;
     const tagText = colors.text[900];
+    const tagBorder = colors.boxborder[500];
     // Size map for tags
     const tagSizes = {
         xs: { fontSize: '0.625rem', px: '0.5rem', py: '0.125rem' },

package/dist/Components/ProductDetails/ProductDetailsProps.d.ts

@@ -1,9 +1,13 @@
 import { batch, options } from "../ProductCard/ProductCardProps";
+/** Full two-column product detail page (gallery + description + variant picker) — not a card; no size prop or container chrome. */
 export type ProductDetailsProps = {
     id: string | number;
+    /** Actually the weight/price variant list (same shape as ProductCard's `options`), not a number — must be non-empty. */
     price?: options[];
     label?: string;
+    /** Rendered through a mini-markdown parser (**bold**, *italic*, # heading) — literal asterisks aren't shown as-is. */
     shortdesc?: string;
+    /** Renders nothing at all past 4 tags — ProductTags' row layout has no case for 5 or more. */
     tags?: string[];
     images?: images[];
     batch?: batch;
@@ -11,6 +15,7 @@ export type ProductDetailsProps = {
     reviews?: string | number;
     onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
     onNotifyMe?: (id: string | number, var_id: number) => void;
+    /** Also fires once on mount for the default (first) option, not only when the shopper picks a different one. */
     onOptionChange?: (option: options) => void;
     addToCart?: boolean;
     goToCart?: boolean;
@@ -19,6 +24,7 @@ export type ProductDetailsProps = {
     isQtyEditable?: boolean;
     displayRating?: boolean;
 };
+/** Gallery item — isImage=false (or a non-image URL when omitted) renders as video with thumb as the poster; order is accepted but never used to sort. */
 export type images = {
     imageUrl: string;
     imageId: number;
@@ -26,6 +32,7 @@ export type images = {
     isImage?: boolean;
     thumb?: string;
 };
+/** Declared but unused — ProductImageSlider only accepts `images[]` (isImage/thumb cover video items); nothing currently consumes this type. */
 export type videos = {
     videoUrl: string;
     videoId: number;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -23,7 +23,7 @@ const ProfileCardFooter = ({ children, }) => {
 exports.ProfileCardFooter = ProfileCardFooter;
 function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.border[200];
+    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.boxborder[200];
     const accentBorder = `2px solid ${colors.primary[500]}`;
     const isReactElement = (child) => {
         return child !== null && typeof child === "object" && "type" in child;

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -1,8 +1,11 @@
 import { CardProps } from "@chakra-ui/react";
+/** Mirrors Chakra Card's own variant strings — forwarded to the underlying Card unchanged. */
 export type ProfileCardVariant = "elevated" | "outline" | "filled" | "unstyled";
 /** @deprecated Misspelling kept for existing callers — use "outline". */
 export type ProfileCardVariantLegacy = "outlein";
+/** borderTopColor/borderLeftColor are booleans toggling a fixed accent border color, not custom-color props; borderLeftColor wins if both are true. */
 export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" | "justify" | "overflow"> & {
+    /** Only direct ProfileCardHeader/Body/Footer children render — no wrapping fragment, no other siblings. */
     children: React.ReactNode;
     variant?: ProfileCardVariant | ProfileCardVariantLegacy;
     size?: "sm" | "md" | "lg";

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.d.ts

@@ -1,2 +1,3 @@
 import { ProfilePhotoViewerProps } from "./ProfilePhotoViewerProps";
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth, imageAlt, imageObjectFit, imageBorderRadius, editIconSize, editIconPositionRight, editIconPositionBottom, isRound, boxStyle, isEditable, isView, style, handleIsView, fallbackText, revealOnHover, }: ProfilePhotoViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -7,6 +7,8 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = (0, react_1.useState)(photoUrl);
@@ -60,14 +62,14 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[500], color: (0, accentText_1.onFilled)(c.primary[500], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[(0, filledSurface_1.solidFillRung)(c.primary, c.white)], color: (0, filledSurface_1.labelOnFill)(c.primary[(0, filledSurface_1.solidFillRung)(c.primary, c.white)], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.primary[600],
-                                        color: (0, accentText_1.onFilled)(c.primary[600], c.white, c.black),
+                                        color: (0, filledSurface_1.labelOnFill)(c.primary[600], c.white, c.black),
                                         transform: "scale(1.1)",
                                         boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
                                     }, _active: {
                                         bg: c.primary[700],
-                                        color: (0, accentText_1.onFilled)(c.primary[700], c.white, c.black),
+                                        color: (0, filledSurface_1.labelOnFill)(c.primary[700], c.white, c.black),
                                     } }) })), isView && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `0.063rem solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.gray[50],
                                         color: (0, accentText_1.accentTextOnCanvas)(c.primary, c.gray[50]),

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -1,6 +1,10 @@
+/** isEditable and isView are independent — both true shows edit and view actions side by side. */
 export type ProfilePhotoViewerProps = {
+    /** Seeds state on mount only — a later change to this prop is not re-synced; remount (key={photoUrl}) to update. */
     photoUrl: string;
+    /** Receives the raw File (not a URL, despite the param name) — fires only when isEditable and a file is picked. */
     onPhotoChange: (photoUrl: File) => void;
+    /** Also sets the height (maps to Chakra's boxSize) — there's no separate height prop; the frame is square. */
     imageWidth?: string;
     imageAlt?: string;
     imageObjectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
@@ -9,12 +13,16 @@ export type ProfilePhotoViewerProps = {
     editIconSize?: "xs" | "sm" | "md" | "lg" | "xl";
     editIconPositionRight?: string;
     editIconPositionBottom?: string;
+    /** Rounds only the edit/view IconButtons — the photo/avatar shape comes from imageBorderRadius, not this. */
     isRound?: boolean;
+    /** Inline style for the outer wrapper only — the edit/view buttons use the separate `style` prop below. */
     boxStyle?: React.CSSProperties;
     isView?: boolean;
+    /** Applied to BOTH edit and view IconButtons identically — no way to style them individually. */
     style?: React.CSSProperties;
+    /** Fires from the View IconButton — that button (and this handler) only renders when isView is true. */
     handleIsView?: () => void;
     fallbackText?: string;
-    /** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
+    /** When true (the actual default), edit/view icons stay hidden until hover; false keeps them always visible. */
     revealOnHover?: boolean;
 };

package/dist/Components/ProgressBar/ProgressBar.d.ts

@@ -1,2 +1,3 @@
 import { ProgressBarProps } from "./ProgressBarProps";
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
 export default function ProgressBar({ size, isIndeterminate, color, hasStripe, height, value, isAnimated, max, min, variant, ...aria }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProgressBar/ProgressBar.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ProgressBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
 function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
     //  const theme = useCustomTheme();
     return ((0, jsx_runtime_1.jsx)(react_1.Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));

package/dist/Components/ProgressBar/ProgressBarProps.d.ts

@@ -1,6 +1,8 @@
 import { ProgressProps } from "@chakra-ui/react";
+/** Thin themed wrapper over Chakra's Progress — color and variant are custom additions, not from Chakra's own props. */
 export type ProgressBarProps = Pick<ProgressProps, "size" | "isIndeterminate" | "value" | "height" | "hasStripe" | "isAnimated" | "max" | "min" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "id"> & {
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary" | "secondary";
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+    /** Closed prop list, no ...rest, no borderRadius/margin — for those or a ref use Chakra's Progress (Primitives barrel) instead. */
     size?: "lg" | "md" | "sm" | "xs";
 };

package/dist/Components/RadioButton/RadioButton.js

@@ -5,9 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.75rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
+    return ((0, jsx_runtime_1.jsx)(react_1.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], borderWidth: "1.6px", _hover: {
             borderColor: theme.colors.primary[500],
             backgroundColor: theme.colors.background[100],
         }, sx: {
@@ -18,7 +19,7 @@ const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size
             "&[data-checked]:hover": {
                 backgroundColor: theme.colors.primary[500],
                 borderColor: theme.colors.primary[500],
-                boxShadow: `0 0 0 2px ${theme.colors.primary[200]}`,
+                boxShadow: `0 0 0 2px ${(0, outlineRung_1.liftToContrast)(theme.colors.primary[200], theme.colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT)}`,
             },
         }, children: (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }) }));
 };

package/dist/Components/RadioButton/RadioButtonProps.d.ts

@@ -1,4 +1,5 @@
 import { RadioProps, RadioGroupProps } from '@chakra-ui/react';
+/** Closed prop list, no ...rest — for aria-* or a ref use Chakra's Radio (Primitives barrel) instead. Still joins an external RadioGroup correctly via Chakra's own context. */
 export type ChakraRadioProps = Pick<RadioProps, "size" | "colorScheme" | "isChecked" | "onChange" | "isDisabled" | "value" | "defaultChecked"> & {
     label: string;
     labelFontSize?: string;
@@ -6,6 +7,7 @@ export type ChakraRadioProps = Pick<RadioProps, "size" | "colorScheme" | "isChec
     showLabelTooltip?: boolean;
     labelTooltip?: string;
 };
+/** Unlike ChakraRadioProps, showLabelTooltip may be a per-option predicate `(item) => boolean`, evaluated once per rendered option. */
 export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
     options: {
         label: string;

package/dist/Components/Reorder/Reorder.d.ts

@@ -1,7 +1,9 @@
 import { ReorderItem, ReorderListProps } from "./ReorderProps";
+/** The real prop surface — showRemoveIcon/onRemove work but are missing from the exported ReorderListProps in ReorderProps.tsx. */
 type ExtendedReorderListProps<T extends ReorderItem> = ReorderListProps<T> & {
     showRemoveIcon?: boolean;
     onRemove?: (id: string) => void;
 };
+/** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
 declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, showRemoveIcon, onRemove, }: ExtendedReorderListProps<T>) => JSX.Element;
 export default ReorderList;

package/dist/Components/Reorder/Reorder.js

@@ -5,6 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const dnd_1 = require("@hello-pangea/dnd");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
 const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const handleDragEnd = (result) => {

package/dist/Components/Reorder/ReorderProps.d.ts

@@ -1,10 +1,13 @@
+/** Minimal shape for a draggable tile — previewUrl renders as the thumbnail image; name is only used as its alt-text fallback. */
 export interface ReorderItem {
     id: string;
     previewUrl: string;
     name?: string;
 }
+/** Incomplete — the shipped Reorder component also reads showRemoveIcon/onRemove, which aren't declared on this exported type. */
 export interface ReorderListProps<T extends ReorderItem> {
     label?: string;
     items: T[];
+    /** Fires on every completed drag, even a drop back at the start index — diff the array to detect a real change. */
     onReorder: (items: T[]) => void;
 }

package/dist/Components/RolesPermission/RolesPermission.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { RolesPermissionProps } from "./RolesPermissionProps";
+/** Role list + role/permission-matrix form in one component (switch via `view`). */
 declare const RolesPermission: React.FC<RolesPermissionProps>;
 export default RolesPermission;