pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/Components/DatePicker/TimePickerInput.js

@@ -7,6 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const sanitizeDigits = (input) => input.replace(/\D/g, "").slice(0, 4);
 const adjustDigits = (digits, is12Hour) => {
@@ -91,10 +92,10 @@ const caretFromDigitIndex = (digitIndex, digitsLen) => {
     return digitIndex + 1;
 };
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-/** Masked HH:mm digit input, no seconds; has no `name`/`id` prop, so it can't be targeted by native form APIs. */
-const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
+/** Masked HH:mm digit input, no seconds. */
+const TimePickerInput = ({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = controlSizes_1.DEFAULT_CONTROL_SIZE, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const sizeKey = typeof size === "string" ? size : "md";
+    const sizeKey = typeof size === "string" ? size : controlSizes_1.DEFAULT_CONTROL_SIZE;
     const iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     const iconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const inputRef = (0, react_1.useRef)(null);
@@ -404,13 +405,6 @@ const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeh
             inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey, bg: theme.colors.background[50], borderColor: error ? theme.colors.semanticText.error : theme.colors.boxborder[500], _focus: {
-                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                    boxShadow: error
-                        ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                        : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: {
-                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                } }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: id, name: name, isRequired: isRequired, "aria-describedby": describedBy, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
 };
 exports.TimePickerInput = TimePickerInput;

package/dist/Components/DatePicker/dayStates.d.ts

@@ -1,24 +1,5 @@
-/**
- * Day-state marking for the calendar grid.
- *
- * A *state* is a key describing what a single day MEANS in the caller's domain — a weekly off,
- * a public holiday, a day excluded from a leave count. It is deliberately separate from
- * disabling: a marked day stays selectable unless the caller also returns the `"disabled"` key
- * (or blocks the day through `minDate`/`maxDate`/`disablePastDates`/`disableFutureDates`).
- *
- * Every key returned reaches a screen reader. Only the keys in `DAY_STATE_KEYS` also carry
- * built-in styling, so a caller can return a free-text key ("Onam") purely to have it announced
- * alongside the recognised one: `["Onam", "holiday"]` → "16 September 2025, Onam, holiday".
- *
- * Colour comes from the palette only — every visual below is a function of `PaletteProps`, so a
- * marked day follows the active light/dark palette like the rest of `CalendarPanel`.
- */
 import type { ReactNode } from "react";
 import type { PaletteProps } from "../../Theme/tokens/types";
-/**
- * The keys with built-in styling, in ascending precedence — when a day carries several, a later
- * key's visual overrides the fields an earlier one set.
- */
 export declare const DAY_STATE_KEYS: readonly ["weekly-off", "holiday", "optional-holiday", "excluded", "disabled"];
 export type DayStateKey = (typeof DAY_STATE_KEYS)[number];
 /** Returns zero or more state keys for a day. Unrecognised keys are announced, never styled. */
@@ -49,8 +30,4 @@ export declare const DAY_CLASS = "pxl-calendar-day";
 export declare const dayStateClassName: (states: string[]) => string;
 /** Human phrasing for the accessible name — every key, styled or not, in the caller's own order. */
 export declare const describeDayStates: (states: string[]) => string;
-/**
- * The day's accessible name. The date is spelled out because "16" alone tells a screen-reader
- * user nothing, and the states follow it so the marking is heard, not only seen.
- */
 export declare const dayAccessibleName: (formattedDate: string, states: string[]) => string;

package/dist/Components/DatePicker/dayStates.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dayAccessibleName = exports.describeDayStates = exports.dayStateClassName = exports.DAY_CLASS = exports.resolveDayStateVisual = exports.isDayStateKey = exports.DAY_STATE_KEYS = void 0;
-/**
- * The keys with built-in styling, in ascending precedence — when a day carries several, a later
- * key's visual overrides the fields an earlier one set.
- */
+// Ascending precedence — when a day carries several keys, a later one's visual overrides an earlier one's.
 exports.DAY_STATE_KEYS = [
     "weekly-off",
     "holiday",
@@ -12,13 +9,7 @@ exports.DAY_STATE_KEYS = [
     "excluded",
     "disabled",
 ];
-/**
- * Token roles, not rungs (see `Theme/THEME-CONTRACT.md`):
- * - a non-working day is a *surface* step down plus muted ink — `backgroundColor.muted` / `textMuted`
- * - a holiday is *status ink*, so `semanticText.<tone>`, never the `semantic.<tone>[500]` fill rung
- * - an optional holiday is the same tone family one step less certain: warning + a dashed ring
- * - an unavailable day is the `disabled` ramp, the only ramp whose job is exactly this
- */
+// NOTE: token roles per THEME-CONTRACT.md, not raw rungs — e.g. holiday uses semanticText, never semantic[500].
 const VISUALS = {
     "weekly-off": (colors) => ({
         cellBg: colors.backgroundColor.muted,
@@ -76,10 +67,7 @@ const describeDayStates = (states) => states
     .filter(Boolean)
     .join(", ");
 exports.describeDayStates = describeDayStates;
-/**
- * The day's accessible name. The date is spelled out because "16" alone tells a screen-reader
- * user nothing, and the states follow it so the marking is heard, not only seen.
- */
+// The day's accessible name, date spelled out then states, so marking is heard, not only seen.
 const dayAccessibleName = (formattedDate, states) => {
     const described = (0, exports.describeDayStates)(states);
     return described ? `${formattedDate}, ${described}` : formattedDate;

package/dist/Components/DatePicker/pickerField.d.ts

@@ -0,0 +1,24 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+import type { PickerType } from "./DatePickerProps";
+type AliasedPickerProps = {
+    isDisabled?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    placeholderText?: string;
+};
+/** Canonical `isDisabled`/`placeholder` win over their deprecated aliases. */
+export declare const resolvePickerAliases: ({ isDisabled, disabled, placeholder, placeholderText }: AliasedPickerProps) => {
+    isDisabled: boolean;
+    placeholder: string | undefined;
+};
+/** A read-only field that opens a picker still gets the field's hover border. */
+export declare const readOnlyTriggerSx: (colors: PaletteProps) => {
+    _readOnly: {
+        _hover: {
+            borderColor: string;
+        };
+    };
+};
+export declare const formatHasTime: (format: string) => boolean;
+export declare const inferPickerTypeFromFormat: (format: string) => PickerType;
+export {};

package/dist/Components/DatePicker/pickerField.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inferPickerTypeFromFormat = exports.formatHasTime = exports.readOnlyTriggerSx = exports.resolvePickerAliases = void 0;
+const fieldStyles_1 = require("../Common/fieldStyles");
+/** Canonical `isDisabled`/`placeholder` win over their deprecated aliases. */
+const resolvePickerAliases = ({ isDisabled, disabled, placeholder, placeholderText }) => {
+    var _a;
+    return ({
+        isDisabled: (_a = isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled) !== null && _a !== void 0 ? _a : false,
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : placeholderText,
+    });
+};
+exports.resolvePickerAliases = resolvePickerAliases;
+/** A read-only field that opens a picker still gets the field's hover border. */
+const readOnlyTriggerSx = (colors) => ({
+    _readOnly: { _hover: { borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors) } },
+});
+exports.readOnlyTriggerSx = readOnlyTriggerSx;
+// NOTE: case matters in date-fns — MM is month, mm is minutes; lowercasing made dd/MM/yyyy a datetime.
+const formatHasTime = (format) => /[Hh]|mm|ss/.test(format);
+exports.formatHasTime = formatHasTime;
+const inferPickerTypeFromFormat = (format) => {
+    const hasTime = (0, exports.formatHasTime)(format);
+    const hasDate = /d/i.test(format) && /M/.test(format) && /y/i.test(format);
+    if (hasTime && hasDate)
+        return "datetime";
+    if (hasTime)
+        return "time";
+    return "date";
+};
+exports.inferPickerTypeFromFormat = inferPickerTypeFromFormat;

package/dist/Components/DatePicker/valueFormat.d.ts

@@ -0,0 +1,4 @@
+import type { PickerType } from "./DatePickerProps";
+export declare const isoFormatFor: (pickerType: PickerType) => string;
+export declare const parseIsoValue: (value: string, pickerType: PickerType) => Date | null;
+export declare const formatIsoValue: (date: Date, pickerType: PickerType) => string;

package/dist/Components/DatePicker/valueFormat.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatIsoValue = exports.parseIsoValue = exports.isoFormatFor = void 0;
+const date_fns_1 = require("date-fns");
+const ISO_FORMATS = {
+    date: "yyyy-MM-dd",
+    time: "HH:mm",
+    datetime: "yyyy-MM-dd'T'HH:mm:ss",
+};
+const isoFormatFor = (pickerType) => ISO_FORMATS[pickerType];
+exports.isoFormatFor = isoFormatFor;
+// Local time, no offset — a malformed/empty string yields null rather than an Invalid Date.
+const parseIsoValue = (value, pickerType) => {
+    if (!value)
+        return null;
+    const parsed = (0, date_fns_1.parse)(value, (0, exports.isoFormatFor)(pickerType), new Date());
+    return (0, date_fns_1.isValid)(parsed) ? parsed : null;
+};
+exports.parseIsoValue = parseIsoValue;
+const formatIsoValue = (date, pickerType) => (0, date_fns_1.format)(date, (0, exports.isoFormatFor)(pickerType));
+exports.formatIsoValue = formatIsoValue;

package/dist/Components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,4 @@
+import type { DescriptionListProps } from "./DescriptionListProps";
+/** Label/value read grid: semantic dl/dt/dd, "stacked" (label above) or "inline" (label left, value right). */
+declare const DescriptionList: ({ items, columns, layout, emptyValue, isLoading, loadingRows, }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;
+export default DescriptionList;

package/dist/Components/DescriptionList/DescriptionList.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const CopyButton_1 = __importDefault(require("../CopyButton/CopyButton"));
+const DEFAULT_COLUMNS = { base: 1, md: 2 };
+const toTemplateColumns = (columns) => Object.fromEntries(Object.entries(columns).map(([bp, count]) => [bp, `repeat(${count}, minmax(0, 1fr))`]));
+const isMissing = (value) => value === null || value === undefined || value === "";
+/** Label/value read grid: semantic dl/dt/dd, "stacked" (label above) or "inline" (label left, value right). */
+const DescriptionList = ({ items, columns = DEFAULT_COLUMNS, layout = "stacked", emptyValue = "—", isLoading = false, loadingRows = 6, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const templateColumns = toTemplateColumns(columns);
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Grid, { role: "group", "aria-busy": "true", "aria-label": "Loading", templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: Array.from({ length: loadingRows }, (_, index) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "75%" })] }, index))) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Grid, { as: "dl", m: 0, templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: items.map((item, index) => {
+            const displayValue = isMissing(item.value) ? emptyValue : item.value;
+            const canCopy = item.copyable && typeof item.value === "string" && item.value !== "";
+            const copyTooltip = typeof item.label === "string" ? `Copy ${item.label}` : "Copy";
+            const Value = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "dd", m: 0, align: "center", gap: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.text[800], textAlign: layout === "inline" ? "right" : "left", noOfLines: layout === "inline" ? 1 : undefined, children: displayValue }), canCopy && (0, jsx_runtime_1.jsx)(CopyButton_1.default, { value: item.value, size: "xs", tooltip: copyTooltip })] }));
+            const itemProps = layout === "inline"
+                ? { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3 }
+                : {};
+            return ((0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, gridColumn: item.span ? `span ${item.span}` : undefined, ...itemProps, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "dt", fontSize: "xs", color: colors.textMuted, mb: layout === "inline" ? 0 : 0.5, children: item.label }), Value] }, index));
+        }) }));
+};
+exports.default = DescriptionList;

package/dist/Components/DescriptionList/DescriptionListProps.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+/** One label/value pair rendered as a dt/dd. */
+export interface DescriptionListItem {
+    /** dt content — 13px, textMuted. */
+    label: ReactNode;
+    /** dd content — 14px, text[800]; falls back to `emptyValue` when null, undefined or "". */
+    value: ReactNode;
+    /** How many grid columns this item spans; defaults to 1. */
+    span?: number;
+    /** Adds a copy-to-clipboard icon beside the value; only applies when `value` is a non-empty string. */
+    copyable?: boolean;
+}
+/** Column count per breakpoint, same keys as Chakra's responsive props. */
+export type DescriptionListColumns = Partial<Record<"base" | "sm" | "md" | "lg" | "xl", number>>;
+/** Props for the label/value grid used on record-detail and settings-style read views. */
+export interface DescriptionListProps {
+    /** The label/value pairs to render, in order. */
+    items: DescriptionListItem[];
+    /** Columns per breakpoint; defaults to `{ base: 1, md: 2 }`. */
+    columns?: DescriptionListColumns;
+    /** "stacked" (label above value) or "inline" (label left, value right); defaults to "stacked". */
+    layout?: "stacked" | "inline";
+    /** Shown in place of a missing value; defaults to "—". */
+    emptyValue?: ReactNode;
+    /** Renders `loadingRows` skeleton pairs instead of `items`. */
+    isLoading?: boolean;
+    /** Skeleton pair count while `isLoading`; defaults to 6. */
+    loadingRows?: number;
+}

package/dist/Components/DescriptionList/DescriptionListProps.js

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

package/dist/Components/Drawer/Drawer.d.ts

@@ -1,12 +1,6 @@
 import React from "react";
-import { DrawerProps } from "./DrawerProps";
-export declare const DrawerHeader: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const DrawerBody: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const DrawerFooter: React.FC<{
-    children: React.ReactNode;
-}>;
-export default function Drawer({ isOpen, onClose, placement, size, id, variant, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+import { DrawerProps, DrawerHeaderSlotProps, DrawerBodySlotProps, DrawerFooterSlotProps } from "./DrawerProps";
+export declare const DrawerHeader: React.FC<DrawerHeaderSlotProps>;
+export declare const DrawerBody: React.FC<DrawerBodySlotProps>;
+export declare const DrawerFooter: React.FC<DrawerFooterSlotProps>;
+export default function Drawer({ isOpen, onClose, placement, size, id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Drawer/Drawer.js

@@ -21,13 +21,27 @@ const DrawerFooter = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.DrawerFooter = DrawerFooter;
-function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant = "solid", children, }) {
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// Matches by type one Fragment deep, so `<>{cond && <DrawerFooter>...</DrawerFooter>}</>` isn't dropped.
+const findSlot = (children, slot) => {
+    for (const child of react_1.default.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === react_1.default.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};
+function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, children, }) {
+    var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const isReactElement = (child) => {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerHeader);
-    const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerBody);
-    const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerFooter);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { bg: colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), header && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", children: header })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { children: body && body }), footer && (0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", children: footer })] })] }));
+    const headerSlot = findSlot(children, exports.DrawerHeader);
+    const bodySlot = findSlot(children, exports.DrawerBody);
+    const footerSlot = findSlot(children, exports.DrawerFooter);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { ...contentProps, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot }))] })] }));
 }

package/dist/Components/Drawer/DrawerProps.d.ts

@@ -1,9 +1,21 @@
-import { DrawerProps as ChakraDrawerProps } from "@chakra-ui/react";
-/** Curated Pick of Chakra's DrawerProps plus overrides — `vaiant` is a typo'd, unused field; the real prop is `variant`. */
-export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant"> & {
+import { DrawerProps as ChakraDrawerProps, DrawerContentProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from "@chakra-ui/react";
+/** Only DrawerHeader/Body/Footer children render, matched by type one fragment deep; any other sibling is dropped. */
+export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant" | "initialFocusRef" | "finalFocusRef" | "closeOnOverlayClick" | "closeOnEsc"> & {
+    /** Defaults to "xl". */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    /** Defaults to "right". */
     placement?: "top" | "right" | "bottom" | "left";
+    /** @deprecated Typo of `variant`, kept as an alias; `variant` wins if both are set. */
     vaiant?: "solid" | "outline" | "ghost" | "link";
-    /** Only DrawerHeader/DrawerBody/DrawerFooter render; other elements and fragment-wrapped slots are silently dropped. */
     children?: React.ReactNode;
+    /** Spread onto DrawerContent, e.g. to set width or padding. */
+    contentProps?: DrawerContentProps;
+    /** Drops the built-in close button, for a drawer dismissed only by its own footer action. */
+    hideCloseButton?: boolean;
 };
+/** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered DrawerHeader; omit to keep theme defaults. Chakra's Drawer reuses Modal's header part internally. */
+export type DrawerHeaderSlotProps = ModalHeaderProps;
+/** Chakra style props (padding, gap, sx, ...) spread onto the rendered DrawerBody; omit to keep theme defaults. */
+export type DrawerBodySlotProps = ModalBodyProps;
+/** Chakra style props (padding, borderTop, gap, sx, ...) spread onto the rendered DrawerFooter; omit to keep theme defaults. */
+export type DrawerFooterSlotProps = ModalFooterProps;

package/dist/Components/Dropdown/DropDown.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { DropdownProps } from "./DropdownProps";
-/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use Select/SelectV2. */
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use `Select`. */
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
 export default Dropdown;

package/dist/Components/Dropdown/DropDown.js

@@ -10,18 +10,25 @@ const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const lucide_react_1 = require("lucide-react");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
-// Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
 const SIZE_MAP = {
-    xs: { btn: "xs", fontSize: "0.75rem", py: 1, px: 2.5, img: "1rem", chevron: 13, minW: "8rem", gap: 1.5 },
-    sm: { btn: "sm", fontSize: "0.8125rem", py: 1.5, px: 3, img: "1.05rem", chevron: 14, minW: "9rem", gap: 2 },
-    md: { btn: "md", fontSize: "0.875rem", py: 2, px: 3, img: "1.15rem", chevron: 16, minW: "11rem", gap: 2 },
-    lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
+    xs: { btn: "xs", fontSize: controlSizes_1.CONTROL_SIZES.xs.fontSize, py: 1, px: 2.5, img: "1rem", chevron: controlSizes_1.CONTROL_SIZES.xs.iconSize, minW: "8rem", gap: 1.5 },
+    sm: { btn: "sm", fontSize: controlSizes_1.CONTROL_SIZES.sm.fontSize, py: 1.5, px: 3, img: "1rem", chevron: controlSizes_1.CONTROL_SIZES.sm.iconSize, minW: "9rem", gap: 2 },
+    md: { btn: "md", fontSize: controlSizes_1.CONTROL_SIZES.md.fontSize, py: 2, px: 3, img: "1.125rem", chevron: controlSizes_1.CONTROL_SIZES.md.iconSize, minW: "11rem", gap: 2 },
+    lg: { btn: "lg", fontSize: controlSizes_1.CONTROL_SIZES.lg.fontSize, py: 2.5, px: 3.5, img: "1.25rem", chevron: controlSizes_1.CONTROL_SIZES.lg.iconSize, minW: "12rem", gap: 2.5 },
     xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
 };
-/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use Select/SelectV2. */
+const TRIGGER_TRANSITION = (0, motion_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]);
+const ROW_TRANSITION = (0, motion_1.transitionFor)(["background-color", "color"]);
+const CHEVRON_TRANSITION = (0, motion_1.transitionFor)(["transform"], "base");
+const isTypeaheadKey = (e) => e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey;
+/** Menu-button that triggers labelled actions — nothing is "selected"/persisted; for picking a value from a list, use `Select`. */
 const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
-    var _a, _b;
+    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
@@ -29,7 +36,8 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     const dropdownRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [menuPos, setMenuPos] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
-    const s = (_b = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "md"]) !== null && _b !== void 0 ? _b : SIZE_MAP.md;
+    const s = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "sm"];
+    const prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
     const menuId = (0, react_1.useId)();
     // Roving-tabindex keyboard nav for the menu (ARIA APG menu-button pattern):
     // real DOM focus moves through the items, so no aria-activedescendant is needed.
@@ -47,9 +55,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     const openAndFocus = (index) => {
         var _a;
         if (isOpen) {
-            // Already open (trigger still holds focus, e.g. after Enter/Space) — the
-            // portal is already mounted, so focus directly; no need to wait a frame,
-            // and the effect below only reacts to isOpen *changing* anyway.
+            // NOTE: already open — portal is already mounted, so focus directly, no frame wait needed.
             setActiveIndex(index);
             (_a = itemRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
         }
@@ -74,9 +80,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
             pendingFocusIndex.current = null;
             if (idx !== null) {
                 setActiveIndex(idx);
-                // Chakra's <Portal> mounts its children a tick after this effect runs
-                // (it resolves its target node via its own effect first), so the menu
-                // item ref isn't attached yet here — a frame gets us past that.
+                // NOTE: Chakra's Portal mounts children a tick late, so the item ref isn't attached yet — a frame gets past that.
                 requestAnimationFrame(() => { var _a; return (_a = itemRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.focus(); });
             }
         }
@@ -102,16 +106,13 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
             onClose();
         }
         else if (e.key === "Enter" || e.key === " ") {
-            // Explicit rather than relying on native button activation: the text
-            // trigger is a styled Flex (no default action to rely on), and jsdom's
-            // `fireEvent` does not simulate a real browser's Enter/Space-activates-
-            // button default action either.
+            // NOTE: explicit — the trigger is a styled Flex with no native button activation to rely on.
             e.preventDefault();
             handleToggle();
         }
     };
     const handleMenuKeyDown = (e) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (options.length === 0)
             return;
         if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -140,6 +141,15 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         else if (e.key === "Tab") {
             onClose();
         }
+        else if (isTypeaheadKey(e)) {
+            const char = e.key.toLowerCase();
+            const order = options.map((_, i) => (activeIndex + 1 + i) % options.length);
+            const match = order.find((i) => options[i].label.toLowerCase().startsWith(char));
+            if (match !== undefined) {
+                setActiveIndex(match);
+                (_d = itemRefs.current[match]) === null || _d === void 0 ? void 0 : _d.focus();
+            }
+        }
     };
     const handleItemKeyDown = (e, optionId, optionLabel) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -148,9 +158,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
             focusTrigger();
         }
     };
-    // The menu is portaled to <body> (so it sits above everything). Anchor it to
-    // the trigger, then clamp to the viewport so it never overflows off-screen
-    // (e.g. when the trigger sits near the right or bottom edge).
+    // NOTE: menu is portaled to body — anchor to the trigger, then clamp to viewport so it never overflows.
     const updateMenuPos = (0, react_1.useCallback)(() => {
         var _a, _b;
         if (!dropdownRef.current)
@@ -221,33 +229,35 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         if (node)
             updateMenuPos();
     };
-    const Chevron = isVisibleIconShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevron }) })) : undefined;
+    const Chevron = isVisibleIconShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
-        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: buttonTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], transition: "color 0.15s ease", _hover: { color: theme.colors.accentText }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
+        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: buttonTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: TRIGGER_TRANSITION, ...(0, motion_2.reducedMotionSx)(), ...dropDownButtonStyle }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
+        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], borderRadius: "md", transition: ROW_TRANSITION, _hover: { color: theme.colors.accentText }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(theme.colors), ...(0, motion_2.reducedMotionSx)() }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
-        var _a;
         const hoverTint = rowBackgrounds.active;
-        return ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
+        return ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.surfaceRaised, border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: theme.shadows.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
                     itemRefs.current[index] = node;
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
                     handleListItemClick(option.id, option.label);
                     focusTrigger();
-                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
+                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "md", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: theme.colors.text[700], transition: ROW_TRANSITION, _hover: {
                     bg: hoverTint,
                     color: theme.colors.accentText,
                 }, _focus: {
                     bg: hoverTint,
                     color: theme.colors.accentText,
+                    outline: "none",
+                }, _focusVisible: {
+                    bg: hoverTint,
+                    color: theme.colors.accentText,
+                    boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
                 }, borderBottom: divider
                     ? `0.063rem solid ${theme.colors.boxborder[200]}`
-                    : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
-                        // fontWeight={400}
-                        style: LabelStyle, children: option.label })] }, option.id))) }));
+                    : undefined, sx: { "&:last-child": { borderBottom: "none" }, ...(0, motion_2.reducedMotionSx)() }, style: ItemStyle, fontWeight: 500, children: [option.image && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, style: LabelStyle, children: option.label })] }, option.id))) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", children: [dropDownToggleOption(), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(MotionBox, { ref: setMenuRef, position: "fixed", top: `${menuPos.top}px`, left: `${menuPos.left}px`, minW: `${menuPos.width}px`, zIndex: 1500, initial: prefersReducedMotion ? false : { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle, children: DropdownContentRender() }) }))] }));
 });
 Dropdown.displayName = "Dropdown";
 exports.default = Dropdown;

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -1,25 +1,38 @@
 import { ButtonProps } from "@chakra-ui/react";
-/** Props for the action-menu Dropdown — nothing here is "selected" or persisted; for picking a value from a list use Select/SelectV2. */
+/** Action-menu Dropdown (role="menu"): rows fire an action, nothing is "selected" or persisted. For picking a value use `Select`. */
 export type DropdownProps = {
     /** Rendered only for the default dropdownType="button" — has no effect under dropdownType="text" (use `text` there). */
     ButtonText?: string;
     options: Option[];
+    /** Fires on click, Enter or Space; the menu closes and focus returns to the trigger. */
     handleOptionSelect: (id: string | number, label: string) => void;
+    /** "button" renders a filled primary button; "text" a plain-text trigger. Defaults to "button". */
     dropdownType?: "button" | "text";
+    /** Trigger label for dropdownType="text" only; ignored for "button" (use `ButtonText`). */
     text?: string;
+    /** Leading icon inside the trigger, before the label; works with both trigger types. */
     DropdownIcon?: JSX.Element;
+    /** Styles the trigger — merged into `sx` for "button", inline `style` for "text". */
     dropDownButtonStyle?: React.CSSProperties;
+    /** Shows the rotating chevron on the trigger. Defaults to true. */
     isVisibleIconShow?: boolean;
+    /** Spread last onto the "button" trigger, so it can override size/colorScheme; ignored for "text". */
     buttonProps?: ButtonProps;
+    /** Inline style on the portaled, fixed-position menu wrapper. */
     headStyle?: React.CSSProperties;
+    /** Inline style on the menu list (the bordered, scrolling panel). */
     ListStyle?: React.CSSProperties;
+    /** Inline style on every menu row. */
     ItemStyle?: React.CSSProperties;
+    /** Inline style on each row's label text. */
     LabelStyle?: React.CSSProperties;
+    /** Inline style on each row's `image` icon; ignored for options without one. */
     ImageStyle?: React.CSSProperties;
-    /** Overall size of the trigger + options (like Button sizes). */
+    /** Trigger + menu size on the shared control scale; defaults to `sm`. `xl` renders an `lg` trigger. */
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     /** @deprecated Use `size` instead. Kept for backward compatibility. */
     optionsSize?: "sm" | "md" | "lg";
+    /** Draws a separator line between menu rows. */
     divider?: boolean;
     /** Accessible name for the trigger when it renders icon-only (no `ButtonText`/`text`). */
     ariaLabel?: string;

package/dist/Components/Editor/Editor.js

@@ -39,6 +39,7 @@ const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const joditThemeVars_1 = require("./joditThemeVars");
+const joditAccessibility_1 = require("./joditAccessibility");
 // Loaded on render, not on import: jodit-react's browser bundle touches `self` at module
 // scope, which crashes any Node/SSR consumer importing this package's barrel.
 const JoditEditor = react_1.default.lazy(async () => {
@@ -59,6 +60,8 @@ const Editor = react_1.default.memo(function Editor({ value, key, config, editor
     const stableConfig = (0, react_1.useMemo)(() => ({
         theme: (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "default",
         popupRoot,
+        // Off by default, Jodit ships every toolbar button unreachable by keyboard.
+        allowTabNavigation: true,
         // `config` spread as `Record<string, unknown>`: mixing a literal `popupRoot` key with a
         // spread of the raw `DeepPartial<Config>` type (Jodit's huge recursive config type) blows
         // past TS's type-instantiation depth limit (TS2589) — the cast avoids that without
@@ -72,6 +75,15 @@ const Editor = react_1.default.memo(function Editor({ value, key, config, editor
     // feeds our actual active colors into those variables, scoped to this instance (see
     // `joditThemeVars.ts`).
     const themeVars = (0, react_1.useMemo)(() => (0, joditThemeVars_1.getJoditThemeVars)(theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [theme]);
+    // Jodit rebuilds its own toolbar DOM (resize, mode change), so re-run on every mutation.
+    (0, react_1.useEffect)(() => {
+        if (!popupRoot)
+            return;
+        (0, joditAccessibility_1.applyJoditAccessibilityFixes)(popupRoot);
+        const observer = new MutationObserver(() => (0, joditAccessibility_1.applyJoditAccessibilityFixes)(popupRoot));
+        observer.observe(popupRoot, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [popupRoot]);
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: setPopupRoot, sx: themeVars, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(JoditEditor, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }) }));
 });
 exports.default = Editor;