@mohasinac/appkit 4.33.0 → 4.34.0

package/dist/tokens/motion.d.ts

@@ -8,6 +8,18 @@ import type { Transition } from "motion/react";
 export declare const SPRING_SNAPPY: Transition;
 export declare const SPRING_GENTLE: Transition;
 export declare const EASE_OUT: Transition;
+/**
+ * `EASE_OUT`'s duration in MILLISECONDS.
+ *
+ * For the callers that must wait for an `EASE_OUT` animation to finish before
+ * measuring or focusing — `<Collapse>` animates height with it, and Framer
+ * drives that via rAF rather than a CSS transition, so there is no
+ * `transitionend` event to listen for and a timer is the only handle.
+ *
+ * DERIVED, never a second literal: a hardcoded `300` here would silently stop
+ * matching the moment `EASE_OUT.duration` was tuned.
+ */
+export declare const EASE_OUT_MS: number;
 export declare const MOTION_PRESETS: {
     readonly fadeIn: {
         readonly initial: {

package/dist/tokens/motion.js

@@ -19,6 +19,18 @@ export const EASE_OUT = {
     ease: [0.25, 0.46, 0.45, 0.94],
     duration: 0.3,
 };
+/**
+ * `EASE_OUT`'s duration in MILLISECONDS.
+ *
+ * For the callers that must wait for an `EASE_OUT` animation to finish before
+ * measuring or focusing — `<Collapse>` animates height with it, and Framer
+ * drives that via rAF rather than a CSS transition, so there is no
+ * `transitionend` event to listen for and a timer is the only handle.
+ *
+ * DERIVED, never a second literal: a hardcoded `300` here would silently stop
+ * matching the moment `EASE_OUT.duration` was tuned.
+ */
+export const EASE_OUT_MS = EASE_OUT.duration * 1000;
 export const MOTION_PRESETS = {
     fadeIn: {
         initial: { opacity: 0 },

package/dist/ui/components/CollapsibleSection.d.ts

@@ -3,6 +3,23 @@ export interface CollapsibleSectionProps {
     title: React.ReactNode;
     isCollapsed: boolean;
     onToggle: () => void;
+    /**
+     * Render the header as a STATIC heading with no toggle control, and the
+     * body permanently open.
+     *
+     * Exists because `SectionForm` documents required sections as rendering
+     * "without a collapse control so it can't be hidden" and had no way to say
+     * so: it passed a no-op `onToggle` instead, while this component went on
+     * rendering a full `<Button>` with a rotating chevron. Every required
+     * section — ~73 `sectionRequired: true` annotations across the schemas —
+     * therefore showed an interactive-looking control that did nothing when
+     * clicked, which reads as a broken form rather than as an intentionally
+     * permanent section.
+     *
+     * Not the same thing as `isCollapsed={false}`: that is an open section the
+     * user may still close.
+     */
+    collapsible?: boolean;
     /** Optional right-aligned content next to the title (badges, counts). */
     renderHeaderExtra?: () => React.ReactNode;
     /**
@@ -28,4 +45,4 @@ export interface CollapsibleSectionProps {
  * per-user, accordion-scoped collapse state (see that hook for the
  * server-side merge/default-collapsed semantics). Purely presentational
  * here: isCollapsed/onToggle are always controlled by the caller. */
-export declare function CollapsibleSection({ title, isCollapsed, onToggle, renderHeaderExtra, keepMounted, id, className, children, }: CollapsibleSectionProps): React.JSX.Element;
+export declare function CollapsibleSection({ title, isCollapsed, onToggle, collapsible, renderHeaderExtra, keepMounted, id, className, children, }: CollapsibleSectionProps): React.JSX.Element;

package/dist/ui/components/CollapsibleSection.js

@@ -8,10 +8,27 @@ import { Collapse } from "./Motion";
  * per-user, accordion-scoped collapse state (see that hook for the
  * server-side merge/default-collapsed semantics). Purely presentational
  * here: isCollapsed/onToggle are always controlled by the caller. */
-export function CollapsibleSection({ title, isCollapsed, onToggle, renderHeaderExtra, keepMounted = false, id, className = "", children, }) {
-    return (_jsxs(Div, { id: id, className: className, rounded: "xl", border: "default", surface: "default", children: [_jsxs(Row, { align: "center", justify: "between", paddingX: "x-md", paddingY: "y-sm", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onToggle, paddingX: "none", paddingY: "none", rounded: "none", className: "min-w-0 flex-1", "aria-expanded": !isCollapsed, children: _jsxs(Row, { align: "center", justify: "between", className: "w-full", children: [_jsx(Span, { weight: "semibold", size: "sm", children: title }), _jsx("svg", { className: `w-4 h-4 transition-transform duration-150 ${isCollapsed ? "" : "rotate-180"} shrink-0`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }) }), renderHeaderExtra && _jsx(Div, { className: "ml-3 shrink-0", children: renderHeaderExtra() })] }), keepMounted ? (
+export function CollapsibleSection({ title, isCollapsed, onToggle, collapsible = true, renderHeaderExtra, keepMounted = false, id, className = "", children, }) {
+    /*
+     * A static section is always open, whatever the caller passed. Honouring
+     * `isCollapsed` here would produce a permanently hidden panel with no
+     * control to reveal it — strictly worse than the dead chevron this replaces.
+     */
+    const open = collapsible ? !isCollapsed : true;
+    const panelId = id ? `${id}-panel` : undefined;
+    const headerId = id ? `${id}-header` : undefined;
+    /*
+     * Only wrap a STRING title. `SectionForm` passes phrasing content that
+     * already carries its own weight/size, and wrapping that produced a nested
+     * duplicate `<Span weight="semibold" size="sm">`.
+     */
+    const titleNode = typeof title === "string" ? (_jsx(Span, { weight: "semibold", size: "sm", children: title })) : (title);
+    return (_jsxs(Div, { id: id, className: className, rounded: "xl", border: "default", surface: "default", children: [_jsxs(Row, { align: "center", justify: "between", paddingX: "x-md", paddingY: "y-sm", children: [collapsible ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onToggle, paddingX: "none", paddingY: "none", rounded: "none", className: "min-w-0 flex-1", "aria-expanded": open, "aria-controls": panelId, id: headerId, children: _jsxs(Span, { className: "flex w-full items-center justify-between", children: [titleNode, _jsx("svg", { className: `w-4 h-4 transition-transform duration-150 ${open ? "rotate-180" : ""} shrink-0`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }) })) : (
+                    // No <Button>, no chevron: nothing here is interactive, so nothing
+                    // should look interactive.
+                    _jsx(Div, { className: "min-w-0 flex-1", id: headerId, children: titleNode })), renderHeaderExtra && _jsx(Div, { className: "ml-3 shrink-0", children: renderHeaderExtra() })] }), !collapsible ? (_jsx(Div, { id: panelId, role: "region", "aria-labelledby": headerId, padding: "md", border: "top", children: children })) : keepMounted ? (
             // No <Collapse>: it unmounts on close, which would discard uncommitted
             // child state (see `keepMounted` docs). `hidden` keeps the subtree
             // mounted and removes it from the a11y tree at the same time.
-            _jsx(Div, { padding: "md", border: "top", hidden: isCollapsed, children: children })) : (_jsx(Collapse, { isOpen: !isCollapsed, children: _jsx(Div, { padding: "md", border: "top", children: children }) }))] }));
+            _jsx(Div, { id: panelId, role: "region", "aria-labelledby": headerId, padding: "md", border: "top", hidden: !open, children: children })) : (_jsx(Collapse, { isOpen: open, children: _jsx(Div, { id: panelId, role: "region", "aria-labelledby": headerId, padding: "md", border: "top", children: children }) }))] }));
 }

package/dist/ui/components/Motion.js

@@ -61,7 +61,23 @@ export function ScaleIn({ delay = 0, children, ...props }) {
 }
 export function Collapse({ isOpen, children, ...props }) {
     const reduced = useReducedMotion();
-    return (_jsx(MotionAnimatePresence, { initial: false, children: isOpen && (_jsx(motion.div, { initial: reduced ? false : { height: 0, opacity: 0, overflow: "hidden" }, animate: { height: "auto", opacity: 1, overflow: "hidden" }, exit: { height: 0, opacity: 0, overflow: "hidden" }, transition: EASE_OUT, ...props, children: children })) }));
+    return (_jsx(MotionAnimatePresence, { initial: false, children: isOpen && (_jsx(motion.div, { initial: reduced ? false : { height: 0, opacity: 0, overflow: "hidden" }, 
+            /*
+             * `overflow: hidden` is needed WHILE the height animates, and is
+             * wrong once it lands. Keeping it in the settled state made every
+             * open panel clip anything that escapes its box — a dropdown, a
+             * popover, a tooltip, a focus ring on the last row.
+             *
+             * `transitionEnd` applies after the animation completes, so the
+             * clipping still happens during the transition and is released the
+             * moment the panel reaches its natural height.
+             */
+            animate: {
+                height: "auto",
+                opacity: 1,
+                overflow: "hidden",
+                transitionEnd: { overflow: "visible" },
+            }, exit: { height: 0, opacity: 0, overflow: "hidden" }, transition: EASE_OUT, ...props, children: children })) }));
 }
 export function PressScale({ scale = 0.97, children, ...props }) {
     const reduced = useReducedMotion();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.33.0",
+  "version": "4.34.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"