@timmbr/ui 1.15.1 → 1.17.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"}