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

package/dist/Components/Editor/useEditorBridge.d.ts

@@ -0,0 +1,40 @@
+import type { Ref } from "react";
+import type { EditorApi, EditorMergeField, EditorTokenSyntax } from "./EditorProps";
+import { type ChipContext } from "./editorTokens";
+export type JoditLike = {
+    value: string;
+    editor: HTMLElement;
+    s: {
+        isInsideArea: boolean;
+        range: Range;
+        selectRange: (range: Range, focus?: boolean) => unknown;
+        insertHTML: (html: string) => void;
+        focus: () => unknown;
+    };
+    events: {
+        on: (events: string, handler: (event: never) => unknown) => unknown;
+    };
+    synchronizeValues: () => void;
+    waitForReady: () => Promise<unknown>;
+};
+type BridgeArgs = {
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: (value: string, event: never) => void;
+    mergeFields?: EditorMergeField[];
+    syntax: EditorTokenSyntax;
+    chipLabel: (label: string) => string;
+    apiRef?: Ref<EditorApi>;
+    onReady?: () => void;
+    onUnknownTokens?: (paths: string[]) => void;
+};
+export declare function useEditorBridge({ value, onChange, onBlur, mergeFields, syntax, chipLabel, apiRef, onReady, onUnknownTokens, }: BridgeArgs): {
+    joditValue: string | undefined;
+    attachEditor: (jodit: JoditLike) => void;
+    api: EditorApi;
+    instance: JoditLike | null;
+    raw: string;
+    unknown: string[];
+    ctx: ChipContext;
+};
+export {};

package/dist/Components/Editor/useEditorBridge.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorBridge = useEditorBridge;
+const react_1 = require("react");
+const editorTokens_1 = require("./editorTokens");
+function useEditorBridge({ value, onChange, onBlur, mergeFields, syntax, chipLabel, apiRef, onReady, onUnknownTokens, }) {
+    const enabled = mergeFields !== undefined;
+    const fieldsKey = JSON.stringify(mergeFields);
+    const ctx = (0, react_1.useMemo)(() => ({ fields: mergeFields !== null && mergeFields !== void 0 ? mergeFields : [], syntax, chipLabel }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fieldsKey, syntax.open, syntax.close, chipLabel]);
+    const joditRef = (0, react_1.useRef)(null);
+    const rangeRef = (0, react_1.useRef)(null);
+    const lastRef = (0, react_1.useRef)(null);
+    const appliedFieldsKey = (0, react_1.useRef)(fieldsKey);
+    const live = (0, react_1.useRef)({ enabled, ctx, onChange, onBlur, onReady, fieldsKey });
+    live.current = { enabled, ctx, onChange, onBlur, onReady, fieldsKey };
+    const [instance, setInstance] = (0, react_1.useState)(null);
+    const [raw, setRaw] = (0, react_1.useState)(value !== null && value !== void 0 ? value : "");
+    (0, react_1.useEffect)(() => {
+        if (value !== undefined)
+            setRaw(value);
+    }, [value]);
+    const handleChange = (0, react_1.useCallback)((html) => {
+        const { enabled: on, ctx: c, onChange: emit } = live.current;
+        const next = on ? (0, editorTokens_1.serializeChips)(html, c.syntax) : html;
+        lastRef.current = { raw: next, jodit: html };
+        setRaw(next);
+        emit === null || emit === void 0 ? void 0 : emit(next);
+    }, []);
+    const handleBlur = (0, react_1.useCallback)((html, event) => {
+        const { enabled: on, ctx: c, onBlur: emit } = live.current;
+        emit === null || emit === void 0 ? void 0 : emit(on ? (0, editorTokens_1.serializeChips)(html, c.syntax) : html, event);
+    }, []);
+    const attachEditor = (0, react_1.useCallback)((jodit) => {
+        joditRef.current = jodit;
+        rangeRef.current = null;
+        appliedFieldsKey.current = live.current.fieldsKey;
+        const remember = () => {
+            if (jodit.s.isInsideArea)
+                rangeRef.current = jodit.s.range.cloneRange();
+        };
+        jodit.events.on("keyup mouseup touchend", remember);
+        jodit.events.on("change", handleChange);
+        jodit.events.on("blur", (event) => handleBlur(jodit.value, event));
+        const deleteChip = (event) => {
+            if (!live.current.enabled)
+                return false;
+            if (event.key !== "Backspace" && event.key !== "Delete")
+                return false;
+            const chip = (0, editorTokens_1.adjacentChip)(jodit.s.range, event.key === "Backspace" ? "backward" : "forward");
+            if (!chip)
+                return false;
+            chip.remove();
+            jodit.synchronizeValues();
+            event.preventDefault();
+            return true;
+        };
+        jodit.events.on("keydown", ((event) => (deleteChip(event) ? false : undefined)));
+        jodit.editor.addEventListener("keydown", (event) => {
+            if (deleteChip(event))
+                event.stopImmediatePropagation();
+        }, true);
+        jodit.waitForReady().then(() => {
+            var _a, _b;
+            if (joditRef.current !== jodit)
+                return;
+            setInstance(jodit);
+            (_b = (_a = live.current).onReady) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }, [handleChange, handleBlur]);
+    (0, react_1.useEffect)(() => {
+        if (!instance || !enabled || appliedFieldsKey.current === fieldsKey)
+            return;
+        appliedFieldsKey.current = fieldsKey;
+        const html = (0, editorTokens_1.chipify)((0, editorTokens_1.serializeChips)(instance.value, ctx.syntax), ctx);
+        instance.value = html;
+        lastRef.current = { raw: (0, editorTokens_1.serializeChips)(html, ctx.syntax), jodit: instance.value };
+    }, [instance, enabled, fieldsKey, ctx]);
+    const api = (0, react_1.useMemo)(() => {
+        const current = () => joditRef.current;
+        const currentRaw = (jodit) => live.current.enabled ? (0, editorTokens_1.serializeChips)(jodit.value, live.current.ctx.syntax) : jodit.value;
+        const insertHTML = (html) => {
+            const jodit = current();
+            if (!jodit)
+                return;
+            if (rangeRef.current)
+                jodit.s.selectRange(rangeRef.current, true);
+            jodit.s.insertHTML(html);
+            rangeRef.current = jodit.s.range.cloneRange();
+        };
+        return {
+            insertHTML,
+            insertField: (path) => {
+                const { enabled: on, ctx: c } = live.current;
+                insertHTML(on ? (0, editorTokens_1.chipHtml)(path, c) : (0, editorTokens_1.fieldToken)(path, c.syntax));
+            },
+            getSelectionText: () => (rangeRef.current ? rangeRef.current.toString().trim() : ""),
+            replaceAll: (text, path) => {
+                const jodit = current();
+                if (!jodit)
+                    return 0;
+                const { enabled: on, ctx: c, onChange: emit } = live.current;
+                const result = (0, editorTokens_1.makeDynamic)(currentRaw(jodit), text, path, c.syntax);
+                if (result.count === 0)
+                    return 0;
+                jodit.value = on ? (0, editorTokens_1.chipify)(result.html, c) : result.html;
+                lastRef.current = { raw: result.html, jodit: jodit.value };
+                rangeRef.current = null;
+                setRaw(result.html);
+                emit === null || emit === void 0 ? void 0 : emit(result.html);
+                return result.count;
+            },
+            countOccurrences: (text) => {
+                const jodit = current();
+                return jodit ? (0, editorTokens_1.countOccurrences)(currentRaw(jodit), text, live.current.ctx.syntax) : 0;
+            },
+            focus: () => {
+                var _a;
+                (_a = current()) === null || _a === void 0 ? void 0 : _a.s.focus();
+            },
+        };
+    }, []);
+    (0, react_1.useImperativeHandle)(apiRef, () => api, [api]);
+    const unknown = (0, react_1.useMemo)(() => (enabled ? (0, editorTokens_1.unknownTokens)(raw, ctx.fields, syntax) : []), [enabled, raw, ctx, syntax]);
+    const unknownKey = unknown.join("\n");
+    const reported = (0, react_1.useRef)("");
+    (0, react_1.useEffect)(() => {
+        if (!enabled || reported.current === unknownKey)
+            return;
+        reported.current = unknownKey;
+        onUnknownTokens === null || onUnknownTokens === void 0 ? void 0 : onUnknownTokens(unknown);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, unknownKey]);
+    const last = lastRef.current;
+    let joditValue = value;
+    if (enabled && value !== undefined) {
+        joditValue = last && last.raw === value ? last.jodit : (0, editorTokens_1.chipify)(value, ctx);
+    }
+    return { joditValue, attachEditor, api, instance, raw, unknown, ctx };
+}

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
-export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): React.JSX.Element;
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
+export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, subtitle, labels, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -4,29 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = VerifyEmailOtp;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var lucide_react_1 = require("lucide-react");
-function VerifyEmailOtp(_a) {
-    var resendMail = _a.resendMail, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", borderColor: theme.colors.gray[200], borderRadius: "lg" },
-        react_1.default.createElement(react_2.Box, { mb: 4 },
-            react_1.default.createElement(lucide_react_1.MailCheck, { size: 80, color: theme.colors.primary[500] })),
-        react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center" }, title),
-        react_1.default.createElement(react_2.Text, { fontSize: "md", textAlign: "center", color: theme.colors.gray[600], mb: 6 },
-            description,
-            react_1.default.createElement("br", null),
-            "your new Pixel Account"),
-        react_1.default.createElement(react_2.HStack, { spacing: 3, mb: 6 },
-            react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500] }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, borderRadius: "md", border: "0.063rem solid", borderColor: theme.colors.boxborder[300], backgroundColor: theme.colors.background[200], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: "0 0 0 0.063rem ".concat(theme.colors.primary[500]),
-                } })); }))),
-        react_1.default.createElement(react_2.Flex, { justify: "center" },
-            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600] },
-                "Didn\u2019t receive the code?",
-                " ",
-                react_1.default.createElement(react_2.Button, { variant: "link", color: theme.colors.primary[700], fontWeight: "semibold", onClick: resendMail }, "Resend Code")))));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Button_1 = __importDefault(require("../../Button/Button"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const lucide_react_1 = require("lucide-react");
+/** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
+function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, subtitle = "your new Pixel Account", labels, title, isDisabled = false, isInvalid = false, styles, }) {
+    var _a, _b, _c;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const codeName = title || (labels === null || labels === void 0 ? void 0 : labels.verificationCode) || "Verification code";
+    const digitName = (_a = labels === null || labels === void 0 ? void 0 : labels.digit) !== null && _a !== void 0 ? _a : ((index, total) => `digit ${index} of ${total}`);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { mb: 4, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MailCheck, { size: 80, color: theme.colors.accentText }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "2xl", fontWeight: 700, mb: 2, textAlign: "center", children: title }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, subtitle && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("br", {}), subtitle] }))] }), (0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 3, mb: 6, role: "group", "aria-label": codeName, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: true, placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${codeName}, ${digitName(index + 1, pins)}`, borderRadius: "lg", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.textMuted, children: [(_b = labels === null || labels === void 0 ? void 0 : labels.didntReceive) !== null && _b !== void 0 ? _b : "Didn’t receive the code?", " ", (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "link", sx: { color: theme.colors.accentText }, fontWeight: 600, onClick: resendMail, children: (_c = labels === null || labels === void 0 ? void 0 : labels.resend) !== null && _c !== void 0 ? _c : "Resend Code" })] }) })] }));
 }

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts

@@ -1,12 +1,38 @@
+type VerifyEmailOtpLabels = {
+    /** Group and cell name used when `title` is empty. Default "Verification code". */
+    verificationCode?: string;
+    /** Accessible name suffix of one cell. Default "digit N of M". */
+    digit?: (index: number, total: number) => string;
+    /** Text before the resend button. Default "Didn’t receive the code?". */
+    didntReceive?: string;
+    /** Resend button text. Default "Resend Code". */
+    resend?: string;
+};
+/** Props for the full OTP verification card (icon, title, resend link); for a bare input in your own layout use PinInput. */
 export type VerifyEmailOtpProps = {
+    /** Called when the Resend Code button is pressed. */
     resendMail: () => void;
+    /** Called with the digits typed so far on every change. */
     onChange: (value: string) => void;
+    /** Fires once all `pins` cells are filled — a `pins` value that doesn't match the actual OTP length blocks or truncates completion. */
     onComplete: (value: string) => void;
+    /** Character shown in each empty cell; none by default. */
     placeholder?: string;
+    /** Typed as required, but the implementation silently defaults to 5 if a caller bypasses the type and omits it. */
     pins: number;
+    /** Card heading; also the accessible name of the cell group when set. */
     title: string;
+    /** First line under the heading. */
     description: string;
+    /** Second line under `description`. Defaults to "your new Pixel Account"; pass "" to drop the line. */
+    subtitle?: string;
+    /** Replaces the English UI text; any label left out keeps its default. */
+    labels?: VerifyEmailOtpLabels;
+    /** Disables every cell. */
     isDisabled?: boolean;
+    /** Marks the cells invalid. */
     isInvalid?: boolean;
+    /** Inline style on the card's outer box. */
     styles?: React.CSSProperties;
 };
+export {};

package/dist/Components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { EmptyStateProps } from "./EmptyStateProps";
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
+declare const EmptyState: React.FC<EmptyStateProps>;
+export default EmptyState;

package/dist/Components/EmptyState/EmptyState.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("@emotion/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/chakra/motion");
+const float = (0, react_2.keyframes) `
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-0.5rem); }
+`;
+const sizeMap = {
+    sm: { badge: "3rem", icon: 20, title: "0.9375rem", desc: "0.8125rem", gap: 2, pad: 6 },
+    md: { badge: "4.5rem", icon: 30, title: "1.125rem", desc: "0.875rem", gap: 3, pad: 10 },
+    lg: { badge: "6rem", icon: 40, title: "1.375rem", desc: "1rem", gap: 4, pad: 14 },
+};
+const HALO_OPACITY = 0.33;
+const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
+    ? colors[scheme]
+    : scheme === "gray"
+        ? colors.gray
+        : colors.semantic[scheme];
+/** Centered empty/zero-data placeholder — purely decorative; pass `action` for any real button(s)/CTA. */
+const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon: IconComp = lucide_react_1.Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, ...rest }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const s = sizeMap[size];
+    const hasDescription = description !== undefined && description !== null && description !== false && description !== "";
+    const palette = scaleFor(theme.colors, colorScheme);
+    const tone = (0, tone_1.resolveSoftTone)(theme.colors, palette, theme.colors.background[50]);
+    const accentSoft = tone.bg;
+    const accent = tone.fg;
+    const containerStyles = variant === "subtle"
+        ? { bg: theme.colors.background[50], borderRadius: "xl" }
+        : variant === "dashed"
+            ? {
+                border: "0.125rem dashed",
+                borderColor: theme.colors.boxborder[200],
+                borderRadius: "xl",
+                bg: "transparent",
+            }
+            : {};
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { ...rest, direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: { ...containerStyles, ...sx }, children: [image ? ((0, jsx_runtime_1.jsx)(react_1.Image, { src: image, alt: imageAlt, boxSize: s.badge, objectFit: "contain", animation: animate ? `${float} 3s ease-in-out infinite` : undefined, sx: (0, motion_1.reducedMotionSx)() })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? `${float} 3s ease-in-out infinite` : undefined, position: "relative", isolation: "isolate", _before: {
+                    content: '""',
+                    position: "absolute",
+                    inset: "-0.5rem",
+                    borderRadius: "full",
+                    bg: accentSoft,
+                    opacity: HALO_OPACITY,
+                    zIndex: -1,
+                }, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(IconComp, { size: s.icon, strokeWidth: 1.75, "aria-hidden": true }) })), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: titleAs, fontSize: s.title, fontWeight: 600, color: theme.colors.header[900], mt: 1, children: title }), hasDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: typeof description === "string" ? undefined : "div", fontSize: s.desc, color: theme.colors.textMuted, mt: 1, maxW: "23.75rem", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+};
+exports.default = EmptyState;

package/dist/Components/EmptyState/EmptyStateProps.d.ts

@@ -0,0 +1,56 @@
+import { ElementType, HTMLAttributes, ReactNode } from "react";
+import { BoxProps } from "@chakra-ui/react";
+/** Controls badge/icon size, type scale, and spacing together. */
+export type EmptyStateSize = "sm" | "md" | "lg";
+/** Palette used to tint the icon badge — brand scale or semantic tone. */
+export type EmptyStateColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "success" | "error" | "warning" | "info";
+/** Centered empty/zero-data placeholder; other `<div>` attributes (id, className, data-*, aria-*) land on the root. */
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "color" | "children" | "dangerouslySetInnerHTML"> {
+    /** Heading text. Defaults to "No data found". */
+    title?: string;
+    /** Heading element for the title; defaults to "h3" — pick the level that fits the page outline. */
+    titleAs?: "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+    /** Supporting text under the title; a node (bold, link) is wrapped in the same muted block and renders above `action`. */
+    description?: ReactNode;
+    /** A lucide-react (or any) icon component rendered inside the badge. */
+    icon?: ElementType;
+    /** Illustration image URL. When provided it replaces the icon badge. */
+    image?: string;
+    /** Alt text for `image`; defaults to "" (decorative) because the title already says it. */
+    imageAlt?: string;
+    /** Controls spacing, icon and font sizes. */
+    size?: EmptyStateSize;
+    /** Accent color for the icon badge. */
+    colorScheme?: EmptyStateColorScheme;
+    /** "default" plain, "subtle" tinted card, "dashed" dashed-border drop zone. */
+    variant?: "default" | "subtle" | "dashed";
+    /** Action node(s) — usually a Button or a pair of buttons. */
+    action?: ReactNode;
+    /** Float the icon gently to draw attention; off under reduced motion. */
+    animate?: boolean;
+    /** Minimum height of the container. */
+    minH?: BoxProps["minH"];
+    /** Escape hatch for extra Chakra styles on the outer container. */
+    sx?: BoxProps["sx"];
+}
+/** "Nothing matches your filters" panel; unlike a first-run empty list it names the filters and offers the undo. */
+export interface FilteredEmptyStateProps {
+    /** Defaults to "Nothing matched these filters". */
+    title?: string;
+    /** Replaces the counted default; omit it and, with `filterCount`, a counted line is shown. */
+    description?: ReactNode;
+    /** "card" renders at `sm` size with a 6rem floor so it fits inside a panel; "page" (default) owns the screen. */
+    scale?: "page" | "card";
+    /** Active filter count; drives the default description and the "Clear N filters" label. */
+    filterCount?: number;
+    /** Renders the outline Clear button; omit it and no Clear button appears. */
+    onClearFilters?: () => void;
+    /** Defaults to "Clear filters", or "Clear N filters" when `filterCount` is set. */
+    clearLabel?: string;
+    /** Renders the primary button that drops only the filter doing the narrowing. */
+    onRemoveLastFilter?: () => void;
+    /** Name that filter, e.g. `Remove "Status: Absent"`; defaults to "Remove last filter". */
+    removeLastFilterLabel?: string;
+    /** Overrides the height floor that `scale` sets. */
+    minH?: EmptyStateProps["minH"];
+}

package/dist/Components/EmptyState/EmptyStateProps.js

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

package/dist/Components/EmptyState/FilteredEmptyState.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FilteredEmptyStateProps } from "./EmptyStateProps";
+/** Empty because filters excluded everything: announces itself (`role="status"`) and offers Clear / Remove-last. */
+declare const FilteredEmptyState: React.FC<FilteredEmptyStateProps>;
+export default FilteredEmptyState;

package/dist/Components/EmptyState/FilteredEmptyState.js

@@ -0,0 +1,23 @@
+"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 lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const EmptyState_1 = __importDefault(require("./EmptyState"));
+const plural = (count, one, many) => (count === 1 ? one : many);
+/** Empty because filters excluded everything: announces itself (`role="status"`) and offers Clear / Remove-last. */
+const FilteredEmptyState = ({ title = "Nothing matched these filters", description, scale = "page", filterCount, onClearFilters, clearLabel, onRemoveLastFilter, removeLastFilterLabel = "Remove last filter", minH, }) => {
+    const hasCount = filterCount !== undefined && filterCount > 0;
+    const resolvedDescription = description !== null && description !== void 0 ? description : (hasCount
+        ? `${filterCount} ${plural(filterCount, "filter is", "filters are")} active. Remove or clear ${plural(filterCount, "it", "them")} to see more results.`
+        : undefined);
+    const resolvedClearLabel = clearLabel !== null && clearLabel !== void 0 ? clearLabel : (hasCount ? `Clear ${filterCount} ${plural(filterCount, "filter", "filters")}` : "Clear filters");
+    const buttonSize = scale === "card" ? "sm" : "md";
+    const actions = onRemoveLastFilter || onClearFilters ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onRemoveLastFilter && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: buttonSize, label: removeLastFilterLabel, onClick: onRemoveLastFilter })), onClearFilters && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: buttonSize, variant: "outline", colorScheme: "gray", label: resolvedClearLabel, onClick: onClearFilters }))] })) : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.SearchX, colorScheme: "gray", variant: "subtle", size: scale === "card" ? "sm" : "md", minH: minH !== null && minH !== void 0 ? minH : (scale === "card" ? "6rem" : undefined), title: title, description: resolvedDescription, action: actions }) }));
+};
+exports.default = FilteredEmptyState;

package/dist/Components/FeedbackForm/FeedbackForm.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 export type FeedbackPayload = {
     type: "comments" | "suggestions" | "questions";
     message: string;
@@ -6,12 +5,15 @@ export type FeedbackPayload = {
     lastName: string;
     email: string;
 };
+/** Provide onSubmit or submitUrl — with neither, the form still validates and shows a success toast, but nothing is ever sent. */
 export type FeedbackFormProps = {
     onSubmit?: (payload: FeedbackPayload) => Promise<void> | void;
     submitUrl?: string;
     isSubmittingText?: string;
     submitText?: string;
+    /** Only seeds state via useState's initializer on mount — changing this prop later does not resync the rendered fields. */
     defaultValues?: Partial<FeedbackPayload>;
     isDisabled?: boolean;
 };
-export default function FeedbackForm(props: FeedbackFormProps): React.JSX.Element;
+/** Renders its own success/error toast via this library's Toaster — needs a mounted ToasterProvider. */
+export default function FeedbackForm(props: FeedbackFormProps): import("react/jsx-runtime").JSX.Element;