@timmbr/ui 1.15.1 → 1.17.0

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/components/Stepper/Stepper.d.ts

@@ -4,6 +4,8 @@ import type { StepperProps } from './Stepper.types';
  * Progress through a sequence of steps (order tracking, checkout, onboarding).
  * Steps before `current` are complete; `status="error"` marks the current
  * step as failed (e.g. a cancelled order).
+ *
+ * Use `variant="progress"` for checkout/KYC flows with icons and status badges.
  */
 export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
 //# sourceMappingURL=Stepper.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQ/D;;;;GAIG;AACH,eAAO,MAAM,OAAO,uFA0EnB,CAAC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAA+B,YAAY,EAAE,MAAM,iBAAiB,CAAC;AASjF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,uFAsFnB,CAAC"}