@timmbr/ui 1.15.1 → 1.16.0

package/dist/components/Card/Card.styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const cardVariants: (props?: ({
-    variant?: "inset" | "outline" | "subtle" | "elevated" | "interactive" | null | undefined;
+    variant?: "inset" | "outline" | "elevated" | "subtle" | "interactive" | null | undefined;
     padding?: "none" | "sm" | "md" | "lg" | "default" | null | undefined;
     selected?: boolean | null | undefined;
     sectioned?: boolean | null | undefined;

package/dist/components/Panel/Panel.context.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { panelSectionPadding } from './Panel.styles';
+export type PanelPadding = keyof typeof panelSectionPadding;
+export type PanelPlacement = 'inline' | 'left' | 'right';
+export interface PanelContextValue {
+    sectioned: boolean;
+    padding: PanelPadding;
+    collapsed: boolean;
+    collapsible: boolean;
+    shouldAnimate: boolean;
+    panelId: string;
+    placement: PanelPlacement;
+    onToggleCollapse: () => void;
+}
+export declare const PanelContext: React.Context<PanelContextValue>;
+export declare const usePanelContext: () => PanelContextValue;
+//# sourceMappingURL=Panel.context.d.ts.map

package/dist/components/Panel/Panel.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.context.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAC5D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,cAAc,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,kCASvB,CAAC;AAEH,eAAO,MAAM,eAAe,yBAAuC,CAAC"}

package/dist/components/Panel/Panel.context.js

@@ -0,0 +1,17 @@
+"use client";
+import * as React from 'react';
+
+const PanelContext = React.createContext({
+  sectioned: false,
+  padding: "default",
+  collapsed: false,
+  collapsible: false,
+  shouldAnimate: true,
+  panelId: "",
+  placement: "inline",
+  onToggleCollapse: () => {
+  }
+});
+const usePanelContext = () => React.useContext(PanelContext);
+
+export { PanelContext, usePanelContext };

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { PanelProps } from './Panel.types';
+export declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/components/Panel/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,KAAK,mFAqMjB,CAAC"}

package/dist/components/Panel/Panel.helpers.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { useMotionValue } from '@timmbr/motion';
+export declare const DEFAULT_H_MIN = 120;
+export declare const DEFAULT_H_MAX = 640;
+export declare const DEFAULT_H_SIZE = 320;
+export declare const DEFAULT_H_COLLAPSED = 40;
+export declare const DEFAULT_V_MIN = 80;
+export declare const DEFAULT_V_MAX = 480;
+export declare const DEFAULT_V_SIZE = 240;
+export declare const DEFAULT_V_COLLAPSED = 40;
+export interface PanelSizes {
+    isH: boolean;
+    resolvedMin: number;
+    resolvedMax: number;
+    resolvedDefault: number;
+    resolvedCollapsedSize: number;
+}
+/**
+ * Derives the concrete px values for min/max/default/collapsed from the
+ * raw props, falling back to axis-specific defaults.
+ *
+ * Side panels (left/right) always collapse along the horizontal axis;
+ * only inline panels with resizable='vertical' use the vertical axis.
+ */
+export declare function resolvePanelSizes(resizable: false | 'horizontal' | 'vertical', placement: 'inline' | 'left' | 'right', minSize?: number, maxSize?: number, defaultSize?: number, collapsedSize?: number): PanelSizes;
+export interface UsePanelResizeOptions {
+    containerRef: React.RefObject<HTMLElement | null>;
+    resizable: false | 'horizontal' | 'vertical';
+    /** Which edge the panel is docked to — determines whether delta should be inverted. */
+    placement?: 'inline' | 'left' | 'right';
+    minSize: number;
+    maxSize: number;
+    defaultSize: number;
+    /** Starting size for the motion value — may differ from defaultSize when initially collapsed. */
+    initialValue?: number;
+    onResize?: (size: number) => void;
+}
+export interface UsePanelResizeReturn {
+    size: number;
+    isResizing: boolean;
+    /** Live motion value driving the panel's inline width/height — also used by the collapse spring. */
+    sizeMotionValue: ReturnType<typeof useMotionValue<number>>;
+    handleProps: React.HTMLAttributes<HTMLDivElement> & {
+        'data-resizing'?: string;
+    };
+}
+export interface UsePanelCollapseOptions {
+    collapsible: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+export interface UsePanelCollapseReturn {
+    collapsed: boolean;
+    toggle: () => void;
+}
+/**
+ * Manages drag-to-resize behaviour for the Panel.
+ *
+ * During drag, `sizeMotionValue` is updated directly for zero-stutter 60fps
+ * tracking. The collapse spring in Panel.tsx reuses the same motion value so
+ * both interactions drive the element through a single binding.
+ *
+ * When animations are disabled, the same code path runs — motion values still
+ * work as plain reactive values; only the spring in the collapse path is skipped.
+ */
+export declare function usePanelResize({ containerRef: _containerRef, resizable, placement, minSize, maxSize, defaultSize, initialValue, onResize, }: UsePanelResizeOptions): UsePanelResizeReturn;
+/**
+ * Imperatively spring-animates the panel size motion value to a target.
+ * Called from Panel.tsx when the collapse state changes.
+ */
+export declare function animatePanelSize(motionValue: ReturnType<typeof useMotionValue<number>>, target: number, shouldAnimate: boolean): void;
+/**
+ * Manages controlled/uncontrolled collapse state for the Panel toggle button.
+ */
+export declare function usePanelCollapse({ collapsible, collapsed, defaultCollapsed, onCollapsedChange, }: UsePanelCollapseOptions): UsePanelCollapseReturn;
+export interface UsePanelSnapCoordinationOptions {
+    /** Whether snap-to-collapse coordination is active (requires collapsible + resizable + snapToCollapse). */
+    activelySnapping: boolean;
+    handleProps: UsePanelResizeReturn['handleProps'];
+    collapsed: boolean;
+    sizeMotionValue: ReturnType<typeof useMotionValue<number>>;
+    resolvedMin: number;
+    resolvedCollapsedSize: number;
+    toggle: () => void;
+    isH: boolean;
+    placement: 'inline' | 'left' | 'right';
+    /** Mutable ref tracking the last expanded size — owned by Panel root, shared here. */
+    expandedSizeRef: React.MutableRefObject<number>;
+}
+/**
+ * Wraps the resize handle props to coordinate snap-to-collapse behaviour:
+ *
+ * EXPANDING (panel is collapsed):
+ *   - A bare click must NOT expand. Panel stays at collapsedSize until drag crosses minSize.
+ *   - Once the threshold is crossed the panel expands and normal resize takes over.
+ *
+ * COLLAPSING (panel is expanded):
+ *   - When the user releases at minSize (the clamped floor), they wanted to go smaller —
+ *     the panel smooth-animates to collapsedSize.
+ */
+export declare function usePanelSnapCoordination({ activelySnapping, handleProps, collapsed, sizeMotionValue, resolvedMin, resolvedCollapsedSize, toggle, isH, placement, expandedSizeRef, }: UsePanelSnapCoordinationOptions): UsePanelResizeReturn['handleProps'];
+//# sourceMappingURL=Panel.helpers.d.ts.map

package/dist/components/Panel/Panel.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.helpers.ts"],"names":[],"mappings":"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"}

package/dist/components/Panel/Panel.helpers.js

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { useControllableState } from '@timmbr/hooks';
+import { animate, useMotionValue } from '@timmbr/motion';
+
+const DEFAULT_H_MIN = 120;
+const DEFAULT_H_MAX = 640;
+const DEFAULT_H_SIZE = 320;
+const DEFAULT_H_COLLAPSED = 40;
+const DEFAULT_V_MIN = 80;
+const DEFAULT_V_MAX = 480;
+const DEFAULT_V_SIZE = 240;
+const DEFAULT_V_COLLAPSED = 40;
+function resolvePanelSizes(resizable, placement, minSize, maxSize, defaultSize, collapsedSize) {
+  const isH = resizable === "horizontal" || placement === "right" || placement === "left";
+  return {
+    isH,
+    resolvedMin: minSize ?? (isH ? DEFAULT_H_MIN : DEFAULT_V_MIN),
+    resolvedMax: maxSize ?? (isH ? DEFAULT_H_MAX : DEFAULT_V_MAX),
+    resolvedDefault: defaultSize ?? (isH ? DEFAULT_H_SIZE : DEFAULT_V_SIZE),
+    resolvedCollapsedSize: collapsedSize ?? (isH ? DEFAULT_H_COLLAPSED : DEFAULT_V_COLLAPSED)
+  };
+}
+function usePanelResize({
+  containerRef: _containerRef,
+  resizable,
+  placement = "inline",
+  minSize,
+  maxSize,
+  defaultSize,
+  initialValue,
+  onResize
+}) {
+  const [size, setSize] = React.useState(defaultSize);
+  const [isResizing, setIsResizing] = React.useState(false);
+  const sizeMotionValue = useMotionValue(initialValue ?? defaultSize);
+  const dragStartPos = React.useRef(0);
+  const dragStartSize = React.useRef(defaultSize);
+  const clamp = React.useCallback(
+    (v) => Math.min(maxSize, Math.max(minSize, v)),
+    [minSize, maxSize]
+  );
+  const handlePointerDown = React.useCallback(
+    (e) => {
+      if (resizable === false) return;
+      e.preventDefault();
+      e.target.setPointerCapture(e.pointerId);
+      dragStartPos.current = resizable === "horizontal" ? e.clientX : e.clientY;
+      dragStartSize.current = sizeMotionValue.get();
+      setIsResizing(true);
+    },
+    [resizable, sizeMotionValue]
+  );
+  const handlePointerMove = React.useCallback(
+    (e) => {
+      if (!e.buttons || resizable === false) return;
+      const rawDelta = (resizable === "horizontal" ? e.clientX : e.clientY) - dragStartPos.current;
+      const delta = placement === "right" ? -rawDelta : rawDelta;
+      const next = clamp(dragStartSize.current + delta);
+      sizeMotionValue.set(next);
+    },
+    [resizable, placement, clamp, sizeMotionValue]
+  );
+  const handlePointerUp = React.useCallback(() => {
+    if (!isResizing) return;
+    const final = sizeMotionValue.get();
+    setIsResizing(false);
+    setSize(final);
+    onResize?.(final);
+  }, [isResizing, sizeMotionValue, onResize]);
+  const handleProps = {
+    role: "separator",
+    "aria-label": resizable === "horizontal" ? "Resize panel width" : "Resize panel height",
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    ...isResizing ? { "data-resizing": "true" } : {}
+  };
+  return { size, isResizing, sizeMotionValue, handleProps };
+}
+function animatePanelSize(motionValue, target, shouldAnimate) {
+  if (shouldAnimate) {
+    animate(motionValue, target, {
+      type: "tween",
+      duration: 0.2,
+      ease: [0.25, 1, 0.5, 1]
+    });
+  } else {
+    motionValue.set(target);
+  }
+}
+function usePanelCollapse({
+  collapsible,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange
+}) {
+  const [isCollapsed, setIsCollapsed] = useControllableState({
+    value: collapsed,
+    defaultValue: defaultCollapsed,
+    onChange: onCollapsedChange
+  });
+  const toggle = React.useCallback(() => {
+    if (!collapsible) return;
+    setIsCollapsed((prev) => !prev);
+  }, [collapsible, setIsCollapsed]);
+  return { collapsed: isCollapsed ?? false, toggle };
+}
+function usePanelSnapCoordination({
+  activelySnapping,
+  handleProps,
+  collapsed,
+  sizeMotionValue,
+  resolvedMin,
+  resolvedCollapsedSize,
+  toggle,
+  isH,
+  placement,
+  expandedSizeRef
+}) {
+  const dragFromCollapsedRef = React.useRef(false);
+  const pendingExpandRef = React.useRef(false);
+  const pendingDragStartPos = React.useRef(0);
+  return React.useMemo(() => {
+    if (!activelySnapping) return handleProps;
+    const origDown = handleProps.onPointerDown;
+    const origMove = handleProps.onPointerMove;
+    const origUp = handleProps.onPointerUp;
+    return {
+      ...handleProps,
+      onPointerDown: (e) => {
+        if (collapsed) {
+          pendingExpandRef.current = true;
+          dragFromCollapsedRef.current = true;
+          pendingDragStartPos.current = isH ? e.clientX : e.clientY;
+        } else {
+          pendingExpandRef.current = false;
+          dragFromCollapsedRef.current = false;
+        }
+        origDown?.(e);
+      },
+      onPointerMove: (e) => {
+        if (!pendingExpandRef.current) {
+          origMove?.(e);
+          return;
+        }
+        const curPos = isH ? e.clientX : e.clientY;
+        const rawDelta = curPos - pendingDragStartPos.current;
+        const delta = placement === "right" ? -rawDelta : rawDelta;
+        const wouldBe = resolvedCollapsedSize + delta;
+        if (wouldBe >= resolvedMin) {
+          pendingExpandRef.current = false;
+          expandedSizeRef.current = resolvedMin;
+          toggle();
+          origMove?.(e);
+        }
+      },
+      onPointerUp: (e) => {
+        const wasPending = pendingExpandRef.current;
+        pendingExpandRef.current = false;
+        origUp?.(e);
+        if (wasPending) {
+          expandedSizeRef.current = resolvedMin;
+          dragFromCollapsedRef.current = false;
+          return;
+        }
+        if (dragFromCollapsedRef.current) {
+          dragFromCollapsedRef.current = false;
+          return;
+        }
+        if (!collapsed && sizeMotionValue.get() <= resolvedMin) {
+          expandedSizeRef.current = resolvedMin;
+          toggle();
+        }
+      }
+    };
+  }, [activelySnapping, handleProps, collapsed, sizeMotionValue, resolvedMin, resolvedCollapsedSize, toggle, isH, placement]);
+}
+
+export { DEFAULT_H_COLLAPSED, DEFAULT_H_MAX, DEFAULT_H_MIN, DEFAULT_H_SIZE, DEFAULT_V_COLLAPSED, DEFAULT_V_MAX, DEFAULT_V_MIN, DEFAULT_V_SIZE, animatePanelSize, resolvePanelSizes, usePanelCollapse, usePanelResize, usePanelSnapCoordination };

package/dist/components/Panel/Panel.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { motion } from '@timmbr/motion';
+import { usePrevious } from '@timmbr/hooks';
+import { resolveMotion } from '../../types/motion.js';
+import { panelVariants } from './Panel.styles.js';
+import { resolvePanelSizes, usePanelResize, usePanelCollapse, animatePanelSize, usePanelSnapCoordination } from './Panel.helpers.js';
+import { PanelContext } from './Panel.context.js';
+import { PanelResizeHandle } from './subcomponents/PanelResizeHandle.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const Panel = React.forwardRef(
+  ({
+    className,
+    variant,
+    padding,
+    placement = "inline",
+    sectioned = false,
+    asChild = false,
+    resizable = false,
+    minSize,
+    maxSize,
+    defaultSize,
+    onResize,
+    collapsible = false,
+    collapsed: controlledCollapsed,
+    defaultCollapsed = false,
+    collapsedSize,
+    onCollapsedChange,
+    snapToCollapse = true,
+    motion: motionProp,
+    children,
+    ...props
+  }, ref) => {
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate, motionClass } = resolveMotion(motionProp, globalMotion);
+    const rawId = React.useId();
+    const panelId = rawId.replace(/[^a-zA-Z0-9_-]/g, "");
+    const containerRef = React.useRef(null);
+    const resolvedPlacement = placement ?? "inline";
+    const { isH, resolvedMin, resolvedMax, resolvedDefault, resolvedCollapsedSize } = resolvePanelSizes(resizable, resolvedPlacement, minSize, maxSize, defaultSize, collapsedSize);
+    const isInitiallyCollapsed = collapsible && (defaultCollapsed || controlledCollapsed === true);
+    const initialMotionValue = isInitiallyCollapsed ? resolvedCollapsedSize : resolvedDefault;
+    const expandedSizeRef = React.useRef(isInitiallyCollapsed ? resolvedDefault : initialMotionValue);
+    const { isResizing, sizeMotionValue, handleProps } = usePanelResize({
+      containerRef,
+      resizable,
+      placement: resolvedPlacement,
+      minSize: resolvedMin,
+      maxSize: resolvedMax,
+      defaultSize: resolvedDefault,
+      initialValue: initialMotionValue,
+      onResize: (newSize) => {
+        expandedSizeRef.current = newSize;
+        onResize?.(newSize);
+      }
+    });
+    const { collapsed, toggle } = usePanelCollapse({
+      collapsible,
+      collapsed: controlledCollapsed,
+      defaultCollapsed,
+      onCollapsedChange
+    });
+    const prevCollapsed = usePrevious(collapsed);
+    React.useEffect(() => {
+      if (!collapsible || prevCollapsed === void 0 || prevCollapsed === collapsed) return;
+      animatePanelSize(
+        sizeMotionValue,
+        collapsed ? resolvedCollapsedSize : expandedSizeRef.current,
+        shouldAnimate
+      );
+    }, [collapsed, collapsible, resolvedCollapsedSize, sizeMotionValue, shouldAnimate]);
+    const coordHandleProps = usePanelSnapCoordination({
+      activelySnapping: collapsible && resizable !== false && snapToCollapse,
+      handleProps,
+      collapsed,
+      sizeMotionValue,
+      resolvedMin,
+      resolvedCollapsedSize,
+      toggle,
+      isH,
+      placement: resolvedPlacement,
+      expandedSizeRef
+    });
+    const context = React.useMemo(
+      () => ({
+        sectioned,
+        padding: padding ?? "default",
+        collapsed,
+        collapsible,
+        shouldAnimate,
+        panelId,
+        placement: resolvedPlacement,
+        onToggleCollapse: toggle
+      }),
+      [sectioned, padding, collapsed, collapsible, shouldAnimate, panelId, resolvedPlacement, toggle]
+    );
+    const needsSizeControl = resizable !== false || collapsible;
+    const dimension = isH ? "width" : "height";
+    const handleEdge = resizable === "horizontal" ? resolvedPlacement === "right" ? "left" : "right" : "bottom";
+    const rootClasses = cn(
+      panelVariants({ variant, padding, sectioned, placement }),
+      needsSizeControl && "overflow-hidden",
+      !shouldAnimate && "transition-none animate-none",
+      motionClass,
+      className
+    );
+    const combinedRef = React.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const rootContent = /* @__PURE__ */ jsxs(PanelContext.Provider, { value: context, children: [
+      children,
+      resizable !== false && /* @__PURE__ */ jsx(
+        PanelResizeHandle,
+        {
+          direction: handleEdge,
+          isResizing,
+          handleProps: coordHandleProps
+        }
+      )
+    ] });
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          "data-slot": "panel",
+          "data-collapsed": collapsed || void 0,
+          className: rootClasses,
+          ...props,
+          children: rootContent
+        }
+      );
+    }
+    if (needsSizeControl && shouldAnimate) {
+      return /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: combinedRef,
+          "data-slot": "panel",
+          "data-collapsed": collapsed || void 0,
+          className: rootClasses,
+          style: { [dimension]: sizeMotionValue },
+          ...props,
+          children: rootContent
+        }
+      );
+    }
+    const staticStyle = needsSizeControl ? { [dimension]: collapsed ? resolvedCollapsedSize : sizeMotionValue.get(), ...props.style ?? {} } : props.style ?? void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: combinedRef,
+        "data-slot": "panel",
+        "data-collapsed": collapsed || void 0,
+        className: rootClasses,
+        style: staticStyle,
+        ...props,
+        children: rootContent
+      }
+    );
+  }
+);
+Panel.displayName = "Panel";
+
+export { Panel };

package/dist/components/Panel/Panel.styles.d.ts

@@ -0,0 +1,42 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const panelVariants: (props?: ({
+    variant?: "outline" | "ghost" | "elevated" | "subtle" | null | undefined;
+    padding?: "none" | "sm" | "lg" | "default" | null | undefined;
+    sectioned?: boolean | null | undefined;
+    placement?: "left" | "right" | "inline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const panelSectionPadding: {
+    readonly none: "";
+    readonly sm: "p-4";
+    readonly default: "p-6";
+    readonly lg: "p-8";
+};
+export declare const panelSectionFooterPadding: {
+    readonly none: "";
+    readonly sm: "px-4 py-2";
+    readonly default: "px-6 py-3";
+    readonly lg: "px-8 py-4";
+};
+export declare const panelHeaderVariants: (props?: ({
+    sectioned?: boolean | null | undefined;
+    divider?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const panelTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const panelDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const panelBodyVariants: (props?: ({
+    overflow?: "auto" | "hidden" | "visible" | null | undefined;
+    sectioned?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const panelFooterVariants: (props?: ({
+    sectioned?: boolean | null | undefined;
+    justify?: "start" | "end" | "between" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const panelResizeHandleVariants: (props?: ({
+    direction?: "left" | "right" | "bottom" | null | undefined;
+    resizing?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type PanelVariants = VariantProps<typeof panelVariants>;
+export type PanelBodyVariants = VariantProps<typeof panelBodyVariants>;
+export type PanelFooterVariants = VariantProps<typeof panelFooterVariants>;
+export type PanelResizeHandleVariants = VariantProps<typeof panelResizeHandleVariants>;
+//# sourceMappingURL=Panel.styles.d.ts.map

package/dist/components/Panel/Panel.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;;;;8EAiCzB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX,eAAO,MAAM,yBAAyB;;;;;CAK5B,CAAC;AAEX,eAAO,MAAM,mBAAmB;;;8EAa9B,CAAC;AAEH,eAAO,MAAM,kBAAkB,oFAE9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,oFAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;8EAa5B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;8EAgB/B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;8EAgBrC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC/D,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACvE,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAC3E,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC"}

package/dist/components/Panel/Panel.styles.js

@@ -0,0 +1,118 @@
+import { cva } from 'class-variance-authority';
+
+const panelVariants = cva(
+  "relative flex flex-col text-foreground font-sans",
+  {
+    variants: {
+      variant: {
+        outline: "border border-grey-200 dark:border-grey-800 bg-card shadow-sm",
+        elevated: "border border-transparent bg-card shadow-md",
+        subtle: "border border-transparent bg-card",
+        ghost: "bg-transparent"
+      },
+      padding: {
+        none: "p-0",
+        sm: "p-4",
+        default: "p-6",
+        lg: "p-8"
+      },
+      sectioned: {
+        true: "p-0",
+        false: ""
+      },
+      placement: {
+        inline: "rounded-[4px]",
+        left: "rounded-r-[4px] h-full shrink-0",
+        right: "rounded-l-[4px] h-full shrink-0"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      padding: "default",
+      sectioned: false,
+      placement: "inline"
+    }
+  }
+);
+const panelSectionPadding = {
+  none: "",
+  sm: "p-4",
+  default: "p-6",
+  lg: "p-8"
+};
+const panelSectionFooterPadding = {
+  none: "",
+  sm: "px-4 py-2",
+  default: "px-6 py-3",
+  lg: "px-8 py-4"
+};
+const panelHeaderVariants = cva("flex flex-col gap-1.5", {
+  variants: {
+    sectioned: {
+      true: "",
+      false: "mb-4"
+    },
+    divider: {
+      true: "border-b border-border",
+      false: ""
+    }
+  },
+  compoundVariants: [{ sectioned: false, divider: true, className: "pb-4" }],
+  defaultVariants: { sectioned: false, divider: false }
+});
+const panelTitleVariants = cva(
+  "text-h6 font-bold text-foreground leading-tight tracking-tight"
+);
+const panelDescriptionVariants = cva(
+  "text-body-2 text-muted-foreground leading-relaxed"
+);
+const panelBodyVariants = cva("flex-1 min-h-0", {
+  variants: {
+    overflow: {
+      auto: "overflow-auto",
+      hidden: "overflow-hidden",
+      visible: "overflow-visible"
+    },
+    sectioned: {
+      true: "",
+      false: ""
+    }
+  },
+  defaultVariants: { overflow: "auto", sectioned: false }
+});
+const panelFooterVariants = cva(
+  "flex items-center gap-2 border-t border-border",
+  {
+    variants: {
+      sectioned: {
+        true: "",
+        false: "pt-4 mt-4"
+      },
+      justify: {
+        start: "justify-start",
+        between: "justify-between",
+        end: "justify-end"
+      }
+    },
+    defaultVariants: { sectioned: false, justify: "between" }
+  }
+);
+const panelResizeHandleVariants = cva(
+  "absolute z-10 flex items-center justify-center select-none touch-none group transition-colors duration-100 hover:bg-primary/10 active:bg-primary/15",
+  {
+    variants: {
+      direction: {
+        left: "left-0 inset-y-0 w-2 cursor-ew-resize",
+        right: "right-0 inset-y-0 w-2 cursor-ew-resize",
+        bottom: "bottom-0 inset-x-0 h-2 cursor-ns-resize"
+      },
+      resizing: {
+        true: "bg-primary/15",
+        false: ""
+      }
+    },
+    defaultVariants: { direction: "left", resizing: false }
+  }
+);
+
+export { panelBodyVariants, panelDescriptionVariants, panelFooterVariants, panelHeaderVariants, panelResizeHandleVariants, panelSectionFooterPadding, panelSectionPadding, panelTitleVariants, panelVariants };

package/dist/components/Panel/Panel.types.d.ts

@@ -0,0 +1,59 @@
+import type * as React from 'react';
+import type { MotionProp } from '../../types/motion';
+import type { PanelVariants, PanelBodyVariants, PanelFooterVariants } from './Panel.styles';
+export interface PanelProps extends React.HTMLAttributes<HTMLDivElement>, Omit<PanelVariants, 'sectioned'> {
+    asChild?: boolean;
+    /**
+     * Distributes padding to PanelHeader / PanelBody / PanelFooter instead of
+     * the root, so header and footer dividers run edge to edge.
+     */
+    sectioned?: boolean;
+    /** Enables a drag handle at the panel edge for continuous resize. */
+    resizable?: false | 'horizontal' | 'vertical';
+    /** Minimum size in px. Defaults: 120 (horizontal) / 80 (vertical). */
+    minSize?: number;
+    /** Maximum size in px. Defaults: 640 (horizontal) / 480 (vertical). */
+    maxSize?: number;
+    /** Initial size in px. Defaults: 320 (horizontal) / 240 (vertical). */
+    defaultSize?: number;
+    /** Called when a drag-resize interaction commits a new size. */
+    onResize?: (size: number) => void;
+    /** Shows a chevron toggle button in the header to collapse/expand the panel. */
+    collapsible?: boolean;
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    /** Uncontrolled initial collapsed state. */
+    defaultCollapsed?: boolean;
+    /** Size in px when collapsed. Defaults to 40 (narrow icon bar). */
+    collapsedSize?: number;
+    /** Called when the collapsed state changes. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * When both `resizable` and `collapsible` are set:
+     * - Dragging the handle while collapsed auto-expands to `minSize`.
+     * - Dragging below `(collapsedSize + minSize) / 2` auto-collapses.
+     * Default: `true`.
+     */
+    snapToCollapse?: boolean;
+    motion?: MotionProp;
+}
+export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+    /** Renders a divider line below the header (full width in sectioned panels). */
+    divider?: boolean;
+    /** Content rendered at the trailing end of the header row. */
+    actions?: React.ReactNode;
+}
+export interface PanelTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    asChild?: boolean;
+}
+export interface PanelDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    asChild?: boolean;
+}
+export interface PanelBodyProps extends React.HTMLAttributes<HTMLDivElement>, Omit<PanelBodyVariants, 'sectioned'> {
+    asChild?: boolean;
+}
+export interface PanelFooterProps extends React.HTMLAttributes<HTMLDivElement>, Omit<PanelFooterVariants, 'sectioned'> {
+    asChild?: boolean;
+}
+//# sourceMappingURL=Panel.types.d.ts.map

package/dist/components/Panel/Panel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.types.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,qEAAqE;IACrE,SAAS,CAAC,EAAE,KAAK,GAAG,YAAY,GAAG,UAAU,CAAC;IAC9C,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAGlC,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAGjD;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAGzB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,IAAI,CAAC,iBAAiB,EAAE,WAAW,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,IAAI,CAAC,mBAAmB,EAAE,WAAW,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Panel/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Panel';
+export * from './Panel.context';
+export * from './Panel.types';
+export * from './Panel.styles';
+export * from './Panel.helpers';
+export * from './subcomponents';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/dist/components/Panel/subcomponents/PanelBody.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { PanelBodyProps } from '../Panel.types';
+export declare const PanelBody: React.ForwardRefExoticComponent<PanelBodyProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PanelBody.d.ts.map

package/dist/components/Panel/subcomponents/PanelBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelBody.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel/subcomponents/PanelBody.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,eAAO,MAAM,SAAS,uFAuDrB,CAAC"}

package/dist/components/Panel/subcomponents/PanelBody.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { AnimatePresence, motion, panelContentFadeVariants } from '@timmbr/motion';
+import { panelBodyVariants, panelSectionPadding } from '../Panel.styles.js';
+import { usePanelContext } from '../Panel.context.js';
+
+const PanelBody = React.forwardRef(
+  ({ className, asChild = false, overflow = "auto", children, ...props }, ref) => {
+    const { sectioned, padding, collapsed, collapsible, shouldAnimate, panelId } = usePanelContext();
+    const Comp = asChild ? Slot : "div";
+    const bodyClasses = cn(
+      panelBodyVariants({ overflow, sectioned }),
+      sectioned && panelSectionPadding[padding],
+      className
+    );
+    if (!collapsible) {
+      return /* @__PURE__ */ jsx(
+        Comp,
+        {
+          ref,
+          id: `panel-body-${panelId}`,
+          "data-slot": "panel-body",
+          className: bodyClasses,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        id: `panel-body-${panelId}`,
+        "data-slot": "panel-body",
+        className: cn(bodyClasses, "overflow-hidden"),
+        ...props,
+        children: shouldAnimate ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: panelContentFadeVariants,
+            initial: "hidden",
+            animate: "visible",
+            exit: "exit",
+            className: "h-full",
+            children
+          },
+          "panel-body-content"
+        ) }) : !collapsed && children
+      }
+    );
+  }
+);
+PanelBody.displayName = "PanelBody";
+
+export { PanelBody };

package/dist/components/Panel/subcomponents/PanelDescription.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { PanelDescriptionProps } from '../Panel.types';
+export declare const PanelDescription: React.ForwardRefExoticComponent<PanelDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=PanelDescription.d.ts.map

package/dist/components/Panel/subcomponents/PanelDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelDescription.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel/subcomponents/PanelDescription.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAE5D,eAAO,MAAM,gBAAgB,oGAY5B,CAAC"}

package/dist/components/Panel/subcomponents/PanelDescription.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { panelDescriptionVariants } from '../Panel.styles.js';
+
+const PanelDescription = React.forwardRef(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "p";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-slot": "panel-description",
+        className: cn(panelDescriptionVariants(), className),
+        ...props
+      }
+    );
+  }
+);
+PanelDescription.displayName = "PanelDescription";
+
+export { PanelDescription };

package/dist/components/Panel/subcomponents/PanelFooter.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { PanelFooterProps } from '../Panel.types';
+export declare const PanelFooter: React.ForwardRefExoticComponent<PanelFooterProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PanelFooter.d.ts.map

package/dist/components/Panel/subcomponents/PanelFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel/subcomponents/PanelFooter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,eAAO,MAAM,WAAW,yFA4BvB,CAAC"}

package/dist/components/Panel/subcomponents/PanelFooter.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { panelFooterVariants, panelSectionFooterPadding } from '../Panel.styles.js';
+import { usePanelContext } from '../Panel.context.js';
+
+const PanelFooter = React.forwardRef(
+  ({ className, asChild = false, justify, children, ...props }, ref) => {
+    const { sectioned, padding, collapsed, collapsible } = usePanelContext();
+    const Comp = asChild ? Slot : "div";
+    const footerClasses = cn(
+      panelFooterVariants({ sectioned, justify }),
+      sectioned && panelSectionFooterPadding[padding],
+      className
+    );
+    if (!collapsible) {
+      return /* @__PURE__ */ jsx(Comp, { ref, "data-slot": "panel-footer", className: footerClasses, ...props, children });
+    }
+    if (collapsed) return null;
+    return /* @__PURE__ */ jsx(Comp, { ref, "data-slot": "panel-footer", className: footerClasses, ...props, children });
+  }
+);
+PanelFooter.displayName = "PanelFooter";
+
+export { PanelFooter };

package/dist/components/Panel/subcomponents/PanelHeader.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { PanelHeaderProps } from '../Panel.types';
+export declare const PanelHeader: React.ForwardRefExoticComponent<PanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PanelHeader.d.ts.map

package/dist/components/Panel/subcomponents/PanelHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel/subcomponents/PanelHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,eAAO,MAAM,WAAW,yFAqGvB,CAAC"}

package/dist/components/Panel/subcomponents/PanelHeader.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { motion, transitions } from '@timmbr/motion';
+import { ChevronRight } from '@timmbr/icons';
+import { panelHeaderVariants, panelSectionPadding } from '../Panel.styles.js';
+import { usePanelContext } from '../Panel.context.js';
+
+const PanelHeader = React.forwardRef(
+  ({ className, asChild = false, divider = false, actions, children, ...props }, ref) => {
+    const {
+      sectioned,
+      padding,
+      collapsed,
+      collapsible,
+      shouldAnimate,
+      panelId,
+      placement,
+      onToggleCollapse
+    } = usePanelContext();
+    const Comp = asChild ? Slot : "div";
+    const rotationDeg = placement === "right" ? collapsed ? 180 : 0 : collapsed ? 0 : 180;
+    const collapseButton = collapsible && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": !collapsed,
+        "aria-controls": `panel-body-${panelId}`,
+        onClick: onToggleCollapse,
+        className: "flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        "data-slot": "panel-collapse-toggle",
+        children: [
+          shouldAnimate ? /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              animate: { rotate: rotationDeg },
+              transition: transitions.fast,
+              style: { display: "flex", alignItems: "center", justifyContent: "center" },
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transform: `rotate(${rotationDeg}deg)`
+              },
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: collapsed ? "Expand panel" : "Collapse panel" })
+        ]
+      }
+    );
+    const headerClasses = cn(
+      panelHeaderVariants({ sectioned, divider }),
+      sectioned && panelSectionPadding[padding],
+      sectioned && !divider && "pb-0",
+      className
+    );
+    if (collapsible && collapsed) {
+      return /* @__PURE__ */ jsx(
+        Comp,
+        {
+          ref,
+          "data-slot": "panel-header",
+          className: cn("flex items-center justify-center py-2", className),
+          ...props,
+          children: collapseButton
+        }
+      );
+    }
+    const hasTrailingContent = actions !== void 0 || collapsible;
+    if (!hasTrailingContent) {
+      return /* @__PURE__ */ jsx(Comp, { ref, "data-slot": "panel-header", className: headerClasses, ...props, children });
+    }
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        "data-slot": "panel-header",
+        className: cn(headerClasses, "flex-row items-start justify-between gap-2"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-1", "data-slot": "panel-header-text", children }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 -mt-0.5", "data-slot": "panel-header-actions", children: [
+            actions,
+            collapseButton
+          ] })
+        ]
+      }
+    );
+  }
+);
+PanelHeader.displayName = "PanelHeader";
+
+export { PanelHeader };

package/dist/components/Panel/subcomponents/PanelResizeHandle.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface PanelResizeHandleProps {
+    direction: 'left' | 'right' | 'bottom';
+    isResizing: boolean;
+    handleProps: React.HTMLAttributes<HTMLDivElement> & {
+        'data-resizing'?: string;
+    };
+}
+export declare function PanelResizeHandle({ direction, isResizing, handleProps }: PanelResizeHandleProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=PanelResizeHandle.d.ts.map

package/dist/components/Panel/subcomponents/PanelResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel/subcomponents/PanelResizeHandle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;QAAE,eAAe,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAClF;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,sBAAsB,qBAqB/F"}

package/dist/components/Panel/subcomponents/PanelResizeHandle.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { panelResizeHandleVariants } from '../Panel.styles.js';
+
+function PanelResizeHandle({ direction, isResizing, handleProps }) {
+  const isVertical = direction === "bottom";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "panel-resize-handle",
+      className: cn(panelResizeHandleVariants({ direction, resizing: isResizing })),
+      ...handleProps,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "flex shrink-0 items-center justify-center gap-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-150",
+            isVertical ? "h-1.5 w-10 flex-row" : "h-10 w-1.5 flex-col"
+          ),
+          children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("div", { className: "h-1 w-1 shrink-0 rounded-full bg-muted-foreground/50" }, i))
+        }
+      )
+    }
+  );
+}
+
+export { PanelResizeHandle };

package/dist/components/Panel/subcomponents/PanelTitle.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { PanelTitleProps } from '../Panel.types';
+export declare const PanelTitle: React.ForwardRefExoticComponent<PanelTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+//# sourceMappingURL=PanelTitle.d.ts.map

package/dist/components/Panel/subcomponents/PanelTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel/subcomponents/PanelTitle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,eAAO,MAAM,UAAU,4FAYtB,CAAC"}

package/dist/components/Panel/subcomponents/PanelTitle.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@timmbr/utils';
+import { panelTitleVariants } from '../Panel.styles.js';
+
+const PanelTitle = React.forwardRef(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "h3";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-slot": "panel-title",
+        className: cn(panelTitleVariants(), className),
+        ...props
+      }
+    );
+  }
+);
+PanelTitle.displayName = "PanelTitle";
+
+export { PanelTitle };

package/dist/components/Panel/subcomponents/index.d.ts

@@ -0,0 +1,6 @@
+export { PanelHeader } from './PanelHeader';
+export { PanelTitle } from './PanelTitle';
+export { PanelDescription } from './PanelDescription';
+export { PanelBody } from './PanelBody';
+export { PanelFooter } from './PanelFooter';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Panel/subcomponents/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel/subcomponents/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Center';
 export * from './components/Stack';
 export * from './components/Inline';
 export * from './components/ScrollRail';
+export * from './components/Panel';
 export * from './components/Input';
 export * from './components/Textarea';
 export * from './components/Select';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG3D,cAAc,aAAa,CAAC;AAG5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG3D,cAAc,aAAa,CAAC;AAG5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}

package/dist/index.js

@@ -27,6 +27,7 @@ export { DEFAULT_AUTH_MODAL_LABELS } from './components/AuthModal/AuthModal.labe
 export { DEFAULT_FILTER_DRAWER_LABELS, FilterDrawer } from './components/FilterDrawer/FilterDrawer.js';
 export { DEFAULT_FILTER_LABELS, FilterOptionList, FilterPanel, FilterPriceSlider, FilterToggleRow, isOptionDisabled } from './components/FilterPanel/FilterPanel.js';
 export { DEFAULT_FOOTER_LEGAL_LINKS, DEFAULT_FOOTER_SECTIONS, DEFAULT_FOOTER_SOCIAL_LINKS, isCrossZoneNavigation, resolveNavDestination } from './components/NavFooter/NavFooter.helpers.js';
+export { DEFAULT_H_COLLAPSED, DEFAULT_H_MAX, DEFAULT_H_MIN, DEFAULT_H_SIZE, DEFAULT_V_COLLAPSED, DEFAULT_V_MAX, DEFAULT_V_MIN, DEFAULT_V_SIZE, animatePanelSize, resolvePanelSizes, usePanelCollapse, usePanelResize, usePanelSnapCoordination } from './components/Panel/Panel.helpers.js';
 export { DEFAULT_STORAGE_KEY, isNavItemActive, isRouteActive, readStoredCollapsed, writeStoredCollapsed } from './components/SideBarNavigation/SideBarNavigation.helpers.js';
 export { DataList, DataListAction, DataListItem, DataListLabel, DataListValue } from './components/DataList/DataList.js';
 export { DataTable } from './components/DataTable/DataTable.js';
@@ -72,6 +73,13 @@ export { PRICE_GROUP_KEY } from './components/FilterPanel/FilterPanel.types.js';
 export { PageHeader } from './components/PageHeader/PageHeader.js';
 export { PageProgress } from './components/PageProgress/PageProgress.js';
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationSummary } from './components/Pagination/Pagination.js';
+export { Panel } from './components/Panel/Panel.js';
+export { PanelBody } from './components/Panel/subcomponents/PanelBody.js';
+export { PanelContext, usePanelContext } from './components/Panel/Panel.context.js';
+export { PanelDescription } from './components/Panel/subcomponents/PanelDescription.js';
+export { PanelFooter } from './components/Panel/subcomponents/PanelFooter.js';
+export { PanelHeader } from './components/Panel/subcomponents/PanelHeader.js';
+export { PanelTitle } from './components/Panel/subcomponents/PanelTitle.js';
 export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from './components/Popover/Popover.js';
 export { Price, discountPercent } from './components/Price/Price.js';
 export { ProductGallery } from './components/ProductGallery/ProductGallery.js';
@@ -171,6 +179,7 @@ export { optionImageVariants, optionPickerLegendVariants, optionPickerVariants,
 export { otpContainerVariants, otpSlotVariants } from './components/OtpInput/OtpInput.styles.js';
 export { pageHeaderTitleVariants, pageHeaderVariants } from './components/PageHeader/PageHeader.styles.js';
 export { paginationLinkVariants } from './components/Pagination/Pagination.styles.js';
+export { panelBodyVariants, panelDescriptionVariants, panelFooterVariants, panelHeaderVariants, panelResizeHandleVariants, panelSectionFooterPadding, panelSectionPadding, panelTitleVariants, panelVariants } from './components/Panel/Panel.styles.js';
 export { popoverContentVariants } from './components/Popover/Popover.styles.js';
 export { priceAmountVariants, priceCompareVariants, priceDiscountVariants, priceVariants } from './components/Price/Price.styles.js';
 export { productGalleryArrowVariants, productGalleryCounterVariants, productGalleryFrameVariants, productGalleryLensVariants, productGalleryLightboxButtonVariants, productGalleryLightboxVariants, productGallerySlideVariants, productGalleryStageVariants, productGalleryThumbListVariants, productGalleryThumbVariants, productGalleryThumbsVariants, productGalleryTrackVariants, productGalleryVariants, productGalleryZoomPaneVariants } from './components/ProductGallery/ProductGallery.styles.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmbr/ui",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "description": "High-performance, Next.js App Router-compatible UI design system components for Timmbr",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,11 +51,11 @@
     "@tiptap/extension-text-align": "^2.11.0",
     "@tiptap/extension-placeholder": "^2.11.0",
     "@tiptap/extension-character-count": "^2.11.0",
-    "@timmbr/hooks": "1.2.0",
-    "@timmbr/icons": "1.6.0",
+    "@timmbr/hooks": "1.3.0",
     "@timmbr/motion": "1.2.5",
-    "@timmbr/theme": "1.3.0",
-    "@timmbr/utils": "1.6.0"
+    "@timmbr/utils": "1.6.0",
+    "@timmbr/icons": "1.6.0",
+    "@timmbr/theme": "1.3.0"
   },
   "peerDependencies": {
     "next": ">=13.0.0 || >=14.0.0 || >=15.0.0 || >=16.0.0",