@choice-ui/react 1.7.4 → 1.7.5

package/dist/components/otp-input/src/tv.d.ts

@@ -36,7 +36,7 @@ export declare const otpInputTv: import('tailwind-variants').TVReturnType<{
     group: string;
     slot: string[];
     slotValue: string;
-    caret: string;
+    caret: string[];
     separator: string;
 }, undefined, {
     variant: {
@@ -76,7 +76,7 @@ export declare const otpInputTv: import('tailwind-variants').TVReturnType<{
     group: string;
     slot: string[];
     slotValue: string;
-    caret: string;
+    caret: string[];
     separator: string;
 }, import('tailwind-variants').TVReturnType<{
     variant: {
@@ -116,6 +116,6 @@ export declare const otpInputTv: import('tailwind-variants').TVReturnType<{
     group: string;
     slot: string[];
     slotValue: string;
-    caret: string;
+    caret: string[];
     separator: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/otp-input/src/tv.js

@@ -1,3 +1,4 @@
+import s from "./styles/style.module.css.js";
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const otpInputTv = tcv({
   slots: {
@@ -12,7 +13,7 @@ const otpInputTv = tcv({
       "border border-solid border-transparent"
     ],
     slotValue: "",
-    caret: "absolute inset-y-2 left-1/2 w-px -translate-x-1/2",
+    caret: ["absolute inset-y-2 left-1/2 w-px -translate-x-1/2", s.caret],
     separator: "text-secondary-foreground mx-1"
   },
   variants: {

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

@@ -11,20 +11,20 @@ interface PanelRowProps extends Omit<HTMLProps<HTMLFieldSetElement>, "title"> {
      * @default "single"
      * @description
      * - `single`: `columns`: 1fr | `areas`: "label" "input" | `rows`: auto minmax(2rem, auto)
-     * - `two-columns`: `columns`: 1fr 1fr | `areas`: "label label" "left right" | `rows`: auto minmax(2rem, auto)
+     * - `two-columns`: `columns`: 1fr 1fr | `areas`: "label-1 label-2" "input-1 input-2" | `rows`: auto minmax(2rem, auto)
      * - `one-label-one-input`: `columns`: 8fr 20fr | `areas`: "label input" | `rows`: 2rem
-     * - `one-label-one-input-one-icon`: `columns`: 8fr 20fr 2rem | `areas`: "label input icon" | `rows`: 2rem
-     * - `one-label-two-input`: `columns`: 8fr 1fr 1fr | `areas`: "label left right" | `rows`: 2rem
-     * - `one-icon-one-input`: `columns`: 2rem 1fr | `areas`: "icon input" | `rows`: 2rem
-     * - `one-input-one-icon`: `columns`: 1fr 2rem | `areas`: "input icon" | `rows`: 2rem
-     * - `one-input-two-icon`: `columns`: 1fr 1fr 2rem | `areas`: "input left icon" "input right icon" | `rows`: 2rem
-     * - `two-input-two-icon`: `columns`: 1fr 1fr 2rem | `areas`: "left icon right icon" | `rows`: 2rem
-     * - `two-input-one-icon`: `columns`: 2rem 1fr 1fr | `areas`: "icon left right" | `rows`: 2rem
-     * - `one-icon-one-input-two-icon`: `columns`: 2rem 1fr 2rem | `areas`: "icon input icon" | `rows`: 2rem
-     * - `two-input-one-icon-double-row`: `columns`: 1fr 1fr 2rem | `areas`: "left icon right icon" | `rows`: 2rem 2rem
-     * - `one-icon-one-input-two-icon-double-row`: `columns`: 2rem 1fr 2rem | `areas`: "icon input icon" | `rows`: 2rem 2rem
+     * - `one-label-one-input-one-icon`: `columns`: 8fr 20fr 1.5rem | `areas`: "label input icon" | `rows`: 2rem
+     * - `one-label-two-input`: `columns`: 8fr 10fr 10fr | `areas`: "label input-1 input-2" | `rows`: 2rem
+     * - `one-icon-one-input`: `columns`: 1.5rem 1fr | `areas`: ". label" "icon input" | `rows`: auto minmax(2rem, auto)
+     * - `one-input-one-icon`: `columns`: 1fr 1.5rem | `areas`: "label label" "input icon" | `rows`: auto minmax(2rem, auto)
+     * - `one-input-two-icon`: `columns`: 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label . . . ." "input . icon-1 . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-two-icon`: `columns`: minmax(76px, 1fr) 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label-1 label-1 label-2 label-2 . . ." "input-1 . input-2 . icon-1 . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-one-icon`: `columns`: 1fr 1fr 1.5rem | `areas`: "label-1 label-2 label-2" "input-1 input-2 icon" | `rows`: auto minmax(2rem, auto)
+     * - `one-icon-one-input-one-icon`: `columns`: 1.5rem 0.5rem 1fr 0.5rem 1.5rem | `areas`: "label label label label label" "icon-1 . input . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `one-icon-one-input-two-icon`: `columns`: 1.5rem 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label label label label label label label" "icon-1 . input . icon-2 . icon-3" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-one-icon-double-row`: `columns`: 1fr 1fr 1.5rem | `areas`: "label-1 label-2 ." "input-1 input-3 icon-1" "input-2 input-3 icon-2" | `rows`: auto 2rem 2rem
      */
-    type?: "single" | "two-columns" | "one-label-one-input" | "one-label-one-input-one-icon" | "one-label-two-input" | "one-icon-one-input" | "one-input-one-icon" | "one-input-two-icon" | "two-input-two-icon" | "two-input-one-icon" | "one-icon-one-input-two-icon" | "two-input-one-icon-double-row";
+    type?: "single" | "two-columns" | "one-label-one-input" | "one-label-one-input-one-icon" | "one-label-two-input" | "one-icon-one-input" | "one-input-one-icon" | "one-input-two-icon" | "two-input-two-icon" | "two-input-one-icon" | "one-icon-one-input-one-icon" | "one-icon-one-input-two-icon" | "two-input-one-icon-double-row";
 }
 declare const PanelRow: react.ForwardRefExoticComponent<Omit<PanelRowProps, "ref"> & react.RefAttributes<HTMLFieldSetElement>>;
 
@@ -83,8 +83,8 @@ declare const SortablePaneContext: react__default.Context<SortablePaneContextVal
 declare const useSortablePane: () => SortablePaneContextValue;
 
 interface PanelSortableProps<T extends SortableItem> {
-    children: react__default.ReactNode;
     className?: string;
+    children: react__default.ReactNode;
     data: T[];
     onDrop: (position: "top" | "bottom" | null, id: string, newIndex: number) => void;
     onSelectedIdChange: (id: string | null) => void;
@@ -129,12 +129,12 @@ interface PanelProps extends Omit<HTMLProps<HTMLDivElement>, "title"> {
     showLabels?: boolean;
     triggerRef?: React.RefObject<HTMLDivElement>;
 }
-declare const PanelContent: ({ children, collapsible, title, otherChildren, }: {
+declare const PanelContent: react.NamedExoticComponent<{
     children: React.ReactNode;
     collapsible?: boolean;
     otherChildren: React.ReactNode[];
     title: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
+}>;
 interface PanelComponentProps extends React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof PanelContent;
     Label: typeof PanelLabel;
@@ -149,4 +149,4 @@ interface PanelComponentProps extends React.ForwardRefExoticComponent<PanelProps
 declare const PanelBase: react.ForwardRefExoticComponent<Omit<PanelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const Panel: PanelComponentProps;
 
-export { Panel, PanelBase, PanelContext, PanelLabel, PanelPreviewer, PanelRow, PanelRowLabel, PanelRowManyIcon, type PanelRowManyIconItem, type PanelRowManyIconProps, type PanelRowProps, PanelSortable, PanelSortableRow, PanelTitle, type SortableItem, SortablePaneContext, type SortablePaneContextValue, SortableRowDataContext, type SortableRowDataContextValue, usePanelContext, useSortablePane, useSortableRowItem };
+export { Panel, PanelBase, PanelContext, type PanelContextType, PanelLabel, PanelPreviewer, PanelRow, PanelRowLabel, PanelRowManyIcon, type PanelRowManyIconItem, type PanelRowManyIconProps, type PanelRowProps, PanelSortable, PanelSortableRow, PanelTitle, type SortableItem, SortablePaneContext, type SortablePaneContextValue, SortableRowDataContext, type SortableRowDataContextValue, usePanelContext, useSortablePane, useSortableRowItem };

package/dist/components/panel/src/components/panel-label.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { panelLabelTv } from "../tv.js";
 import { usePanelContext } from "../context/panel-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const PanelLabel = forwardRef(
@@ -10,7 +11,7 @@ const PanelLabel = forwardRef(
       "span",
       {
         ref,
-        className: tcx("[grid-area:label]", showLabels ? "rows--label" : "sr-only", className),
+        className: tcx(panelLabelTv({ showLabels }), className),
         ...rest,
         children: showLabels ? children : null
       }

package/dist/components/panel/src/components/panel-previewer.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
+import { panelPreviewerTv } from "../tv.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const PanelPreviewer = ({ className, ...rest }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: tcx(
-        "bg-secondary-background text-secondary-foreground relative mx-4 my-2 flex h-32 flex-col items-center justify-center rounded-xl",
-        className
-      ),
+      className: tcx(panelPreviewerTv(), className),
       ...rest
     }
   );

package/dist/components/panel/src/components/panel-row-label.js

@@ -1,14 +1,12 @@
 import { jsx } from "react/jsx-runtime";
+import { panelRowLabelTv } from "../tv.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const PanelRowLabel = (props) => {
   const { className, label, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: tcx(
-        "text-secondary-foreground cursor-default truncate select-none [grid-area:label]",
-        className
-      ),
+      className: tcx(panelRowLabelTv(), className),
       ...rest,
       children: label
     }

package/dist/components/panel/src/components/panel-row-many-icon.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, Fragment } from "react";
 import { useHover } from "usehooks-ts";
+import { panelRowManyIconTv } from "../tv.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 import { mergeRefs } from "../../../../shared/utils/merge-refs/merge-refs.js";
 const PanelRowManyIcon = forwardRef(
@@ -8,18 +9,16 @@ const PanelRowManyIcon = forwardRef(
     const { className, children, icons, isEditing, ...rest } = props;
     const innerRef = useRef(null);
     const isHovered = useHover(innerRef);
+    const tv = panelRowManyIconTv();
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref: mergeRefs(ref, innerRef),
-        className: tcx(
-          "group text-body-medium flex h-8 min-w-0 items-center justify-between gap-x-2 pr-2 pl-4 select-none",
-          className
-        ),
+        className: tcx(tv.container(), className),
         ...rest,
         children: [
           children,
-          /* @__PURE__ */ jsx("div", { className: "text-secondary-foreground group-hover:text-default-foreground flex h-6 min-w-6 flex-none gap-x-1", children: !isEditing && icons.map(({ element, alwaysShow, id }) => {
+          /* @__PURE__ */ jsx("div", { className: tv.iconWrapper(), children: !isEditing && icons.map(({ element, alwaysShow, id }) => {
             return /* @__PURE__ */ jsx(Fragment, { children: isHovered || alwaysShow ? element : null }, id);
           }) })
         ]

package/dist/components/panel/src/components/panel-row.d.ts

@@ -8,19 +8,19 @@ export interface PanelRowProps extends Omit<HTMLProps<HTMLFieldSetElement>, "tit
      * @default "single"
      * @description
      * - `single`: `columns`: 1fr | `areas`: "label" "input" | `rows`: auto minmax(2rem, auto)
-     * - `two-columns`: `columns`: 1fr 1fr | `areas`: "label label" "left right" | `rows`: auto minmax(2rem, auto)
+     * - `two-columns`: `columns`: 1fr 1fr | `areas`: "label-1 label-2" "input-1 input-2" | `rows`: auto minmax(2rem, auto)
      * - `one-label-one-input`: `columns`: 8fr 20fr | `areas`: "label input" | `rows`: 2rem
-     * - `one-label-one-input-one-icon`: `columns`: 8fr 20fr 2rem | `areas`: "label input icon" | `rows`: 2rem
-     * - `one-label-two-input`: `columns`: 8fr 1fr 1fr | `areas`: "label left right" | `rows`: 2rem
-     * - `one-icon-one-input`: `columns`: 2rem 1fr | `areas`: "icon input" | `rows`: 2rem
-     * - `one-input-one-icon`: `columns`: 1fr 2rem | `areas`: "input icon" | `rows`: 2rem
-     * - `one-input-two-icon`: `columns`: 1fr 1fr 2rem | `areas`: "input left icon" "input right icon" | `rows`: 2rem
-     * - `two-input-two-icon`: `columns`: 1fr 1fr 2rem | `areas`: "left icon right icon" | `rows`: 2rem
-     * - `two-input-one-icon`: `columns`: 2rem 1fr 1fr | `areas`: "icon left right" | `rows`: 2rem
-     * - `one-icon-one-input-two-icon`: `columns`: 2rem 1fr 2rem | `areas`: "icon input icon" | `rows`: 2rem
-     * - `two-input-one-icon-double-row`: `columns`: 1fr 1fr 2rem | `areas`: "left icon right icon" | `rows`: 2rem 2rem
-     * - `one-icon-one-input-two-icon-double-row`: `columns`: 2rem 1fr 2rem | `areas`: "icon input icon" | `rows`: 2rem 2rem
+     * - `one-label-one-input-one-icon`: `columns`: 8fr 20fr 1.5rem | `areas`: "label input icon" | `rows`: 2rem
+     * - `one-label-two-input`: `columns`: 8fr 10fr 10fr | `areas`: "label input-1 input-2" | `rows`: 2rem
+     * - `one-icon-one-input`: `columns`: 1.5rem 1fr | `areas`: ". label" "icon input" | `rows`: auto minmax(2rem, auto)
+     * - `one-input-one-icon`: `columns`: 1fr 1.5rem | `areas`: "label label" "input icon" | `rows`: auto minmax(2rem, auto)
+     * - `one-input-two-icon`: `columns`: 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label . . . ." "input . icon-1 . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-two-icon`: `columns`: minmax(76px, 1fr) 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label-1 label-1 label-2 label-2 . . ." "input-1 . input-2 . icon-1 . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-one-icon`: `columns`: 1fr 1fr 1.5rem | `areas`: "label-1 label-2 label-2" "input-1 input-2 icon" | `rows`: auto minmax(2rem, auto)
+     * - `one-icon-one-input-one-icon`: `columns`: 1.5rem 0.5rem 1fr 0.5rem 1.5rem | `areas`: "label label label label label" "icon-1 . input . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `one-icon-one-input-two-icon`: `columns`: 1.5rem 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label label label label label label label" "icon-1 . input . icon-2 . icon-3" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-one-icon-double-row`: `columns`: 1fr 1fr 1.5rem | `areas`: "label-1 label-2 ." "input-1 input-3 icon-1" "input-2 input-3 icon-2" | `rows`: auto 2rem 2rem
      */
-    type?: "single" | "two-columns" | "one-label-one-input" | "one-label-one-input-one-icon" | "one-label-two-input" | "one-icon-one-input" | "one-input-one-icon" | "one-input-two-icon" | "two-input-two-icon" | "two-input-one-icon" | "one-icon-one-input-two-icon" | "two-input-one-icon-double-row";
+    type?: "single" | "two-columns" | "one-label-one-input" | "one-label-one-input-one-icon" | "one-label-two-input" | "one-icon-one-input" | "one-input-one-icon" | "one-input-two-icon" | "two-input-two-icon" | "two-input-one-icon" | "one-icon-one-input-one-icon" | "one-icon-one-input-two-icon" | "two-input-one-icon-double-row";
 }
 export declare const PanelRow: import('react').ForwardRefExoticComponent<Omit<PanelRowProps, "ref"> & import('react').RefAttributes<HTMLFieldSetElement>>;

package/dist/components/panel/src/components/panel-row.js

@@ -5,19 +5,19 @@ import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const PanelRow = forwardRef(
   function PanelRow2(props, ref) {
     const { className, children, type, triggerRef, active, ...rest } = props;
-    const styles = propertiesPanelRowTv({ type, triggerRef: !!triggerRef, active });
+    const tv = propertiesPanelRowTv({ type, triggerRef: !!triggerRef, active });
     return /* @__PURE__ */ jsxs(
       "fieldset",
       {
         ref,
-        className: tcx(styles.container(), className),
+        className: tcx(tv.container(), className),
         ...rest,
         children: [
           triggerRef && /* @__PURE__ */ jsx(
             "div",
             {
               ref: triggerRef,
-              className: styles.triggerRef()
+              className: tv.triggerRef()
             }
           ),
           children

package/dist/components/panel/src/components/panel-sortable-row.js

@@ -1,19 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { GripVerticalSmall } from "@choiceform/icons-react";
-import { memo, forwardRef, useRef } from "react";
+import { memo, forwardRef, useMemo } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { panelSortableRowTv } from "../tv.js";
 import { PanelRow } from "./panel-row.js";
 import { useSortableRowItem, useSortablePane } from "../context/sortable-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
-import { mergeRefs } from "../../../../shared/utils/merge-refs/merge-refs.js";
 const PanelSortableRow = memo(
   forwardRef(function PanelSortableRow2(props, ref) {
     const { children, className, ...rest } = props;
     const item = useSortableRowItem();
     const { id } = item;
     const { selectedId, isDragging, isNodeBeingDragged, handleMouseDown, itemCount } = useSortablePane();
-    const rowRef = useRef(null);
     const isBeingDragged = isNodeBeingDragged(id);
     const isSingleItem = itemCount <= 1;
     const handleOnMouseDown = useEventCallback((e) => {
@@ -21,24 +19,27 @@ const PanelSortableRow = memo(
       if (isSingleItem) return;
       handleMouseDown(id, e);
     });
-    const styles = panelSortableRowTv({
-      selected: selectedId === id,
-      dragging: isDragging,
-      beingDragged: isBeingDragged,
-      singleItem: isSingleItem
-    });
+    const tv = useMemo(
+      () => panelSortableRowTv({
+        selected: selectedId === id,
+        dragging: isDragging,
+        beingDragged: isBeingDragged,
+        singleItem: isSingleItem
+      }),
+      [selectedId, id, isDragging, isBeingDragged, isSingleItem]
+    );
     return /* @__PURE__ */ jsxs(
       PanelRow,
       {
-        ref: mergeRefs(ref, rowRef),
-        className: tcx(styles.root(), className),
+        ref,
+        className: tcx(tv.root(), className),
         onMouseDown: handleOnMouseDown,
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: styles.handle(),
+              className: tv.handle(),
               "aria-label": "Drag handle",
               children: /* @__PURE__ */ jsx(GripVerticalSmall, {})
             }

package/dist/components/panel/src/components/panel-sortable.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 import { SortableItem } from '../context';
 interface PanelSortableProps<T extends SortableItem> {
-    children: React.ReactNode;
     className?: string;
+    children: React.ReactNode;
     data: T[];
     onDrop: (position: "top" | "bottom" | null, id: string, newIndex: number) => void;
     onSelectedIdChange: (id: string | null) => void;

package/dist/components/panel/src/components/panel-sortable.js

@@ -1,13 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import React__default, { forwardRef, useRef, useCallback, useEffect, useMemo, memo } from "react";
+import React__default, { forwardRef, useRef, useEffect, useMemo, memo } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { panelSortableContainerTv } from "../tv.js";
 import { usePanelDragDrop } from "../hooks/use-panel-drag-drop.js";
 import { SortablePaneContext, SortableRowDataContext, useSortableRowItem, useSortablePane } from "../context/sortable-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 import { mergeRefs } from "../../../../shared/utils/merge-refs/merge-refs.js";
 const PanelSortable = forwardRef(function PanelSortable2(props, ref) {
-  const { data, children, className, selectedId, onSelectedIdChange, onDrop } = props;
+  const { data, className, children, selectedId, onSelectedIdChange, onDrop } = props;
   const containerRef = useRef(null);
-  const handleDrop = useCallback(
+  const handleDrop = useEventCallback(
     (dragId, dropId, position) => {
       const items = [...data];
       const dragIndex = items.findIndex((item) => item.id === dragId);
@@ -16,14 +18,13 @@ const PanelSortable = forwardRef(function PanelSortable2(props, ref) {
         return;
       }
       const isDraggingToSamePosition = dragId === dropId || // 同一个项目
-      position === "top" && dragIndex === dropIndex - 1 || // 放在前一个项目的底部
+      position === "top" && dragIndex === dropIndex - 1 || // 拖拽项在目标项上方，放到目标项顶部 = 位置不变
       position === "bottom" && dragIndex === dropIndex + 1;
       if (isDraggingToSamePosition) {
         return;
       }
       onDrop(position, dragId, dropIndex);
-    },
-    [data, onDrop]
+    }
   );
   const {
     containerRef: dragContainerRef,
@@ -36,18 +37,15 @@ const PanelSortable = forwardRef(function PanelSortable2(props, ref) {
     onDrop: handleDrop
   });
   const paneRef = useRef(null);
-  const handleMouseDown = useCallback(
-    (id, e) => {
-      e.stopPropagation();
-      if (selectedId !== id) {
-        onSelectedIdChange(id);
-      }
-      const element = document.querySelector(`[data-row-id="${id}"]`);
-      if (!element) return;
-      handleDragStart({ id, element }, e);
-    },
-    [handleDragStart, selectedId, onSelectedIdChange]
-  );
+  const handleMouseDown = useEventCallback((id, e) => {
+    e.stopPropagation();
+    if (selectedId !== id) {
+      onSelectedIdChange(id);
+    }
+    const element = document.querySelector(`[data-row-id="${id}"]`);
+    if (!element) return;
+    handleDragStart({ id, element }, e);
+  });
   useEffect(() => {
     const handleDocumentClick = (e) => {
       if (isDragging) return;
@@ -62,6 +60,7 @@ const PanelSortable = forwardRef(function PanelSortable2(props, ref) {
       document.removeEventListener("click", handleDocumentClick);
     };
   }, [isDragging, onSelectedIdChange, containerRef]);
+  const tv2 = useMemo(() => panelSortableContainerTv(), []);
   const contextValue = useMemo(
     () => ({
       selectedId,
@@ -88,12 +87,12 @@ const PanelSortable = forwardRef(function PanelSortable2(props, ref) {
     "div",
     {
       ref: mergeRefs(ref, paneRef, dragContainerRef, containerRef),
-      className: tcx("relative flex flex-col", className),
+      className: tcx(tv2.container(), className),
       children: /* @__PURE__ */ jsx(SortablePaneContext.Provider, { value: contextValue, children: data.map((item) => /* @__PURE__ */ jsx(
         SortableRowDataContext.Provider,
         {
           value: { item },
-          children: /* @__PURE__ */ jsx(RowContainer, { children: React__default.Children.map(props.children, (child) => {
+          children: /* @__PURE__ */ jsx(RowContainer, { children: React__default.Children.map(children, (child) => {
             if (React__default.isValidElement(child)) {
               return child;
             }
@@ -106,6 +105,7 @@ const PanelSortable = forwardRef(function PanelSortable2(props, ref) {
   );
 });
 PanelSortable.displayName = "PanelSortable";
+const tv = panelSortableContainerTv();
 const RowContainer = memo(function RowContainer2(props) {
   const { children } = props;
   const item = useSortableRowItem();
@@ -113,7 +113,7 @@ const RowContainer = memo(function RowContainer2(props) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "panel-sortable-row group/sortable-row relative",
+      className: tv.rowContainer(),
       "data-row-id": item.id,
       "data-row-index": item.indexKey,
       "data-drop-target": "false",

package/dist/components/panel/src/components/panel-title.js

@@ -9,58 +9,55 @@ const TitleContent = memo(function TitleContent2({
   title,
   onClick,
   collapsible,
-  styles,
-  classNames
+  titleClassName
 }) {
+  const tv = useMemo(() => propertiesPaneTitleTv(), []);
   return collapsible || onClick ? /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       onClick,
-      className: tcx(styles.title(), classNames == null ? void 0 : classNames.title),
+      className: tcx(tv.title(), titleClassName),
       children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: title })
     }
-  ) : /* @__PURE__ */ jsx("span", { className: tcx(styles.title(), classNames == null ? void 0 : classNames.title), children: title });
+  ) : /* @__PURE__ */ jsx("span", { className: tcx(tv.title(), titleClassName), children: title });
 });
 const PanelTitle = forwardRef(
   function PanelTitle2(props, ref) {
     const { title, children, onHeaderClick, onTitleClick, className, classNames, ...rest } = props;
     const { collapsible, isCollapsed, onCollapsedChange, alwaysShowCollapsible } = usePanelContext();
-    const styles = propertiesPaneTitleTv();
+    const tv = useMemo(() => propertiesPaneTitleTv(), []);
     const handleMouseDown = useEventCallback(() => {
       if (collapsible) {
         onCollapsedChange == null ? void 0 : onCollapsedChange(!isCollapsed);
       }
     });
-    const containerClassName = useMemo(
-      () => tcx(styles.container(), className),
-      [styles, className]
-    );
+    const handleClick = useEventCallback(() => {
+      onHeaderClick == null ? void 0 : onHeaderClick();
+    });
+    const containerClassName = useMemo(() => tcx(tv.container(), className), [tv, className]);
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: containerClassName,
         onMouseDown: handleMouseDown,
-        onClick: () => {
-          onHeaderClick == null ? void 0 : onHeaderClick();
-        },
+        onClick: handleClick,
         ...rest,
-        children: /* @__PURE__ */ jsxs("div", { className: styles.wrapper(), children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.content(), children: [
-            /* @__PURE__ */ jsx("div", { className: tcx(styles.collapsibleWrapper(), alwaysShowCollapsible && "visible"), children: collapsible && (isCollapsed ? /* @__PURE__ */ jsx(ChevronRightSmall, {}) : /* @__PURE__ */ jsx(ChevronDownSmall, {})) }),
-            /* @__PURE__ */ jsx("div", { className: tcx(styles.titleWrapper(), classNames == null ? void 0 : classNames.titleWrapper), children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs("div", { className: tv.wrapper(), children: [
+          /* @__PURE__ */ jsxs("div", { className: tv.content(), children: [
+            /* @__PURE__ */ jsx("div", { className: tcx(tv.collapsibleWrapper(), alwaysShowCollapsible && "visible"), children: collapsible && (isCollapsed ? /* @__PURE__ */ jsx(ChevronRightSmall, {}) : /* @__PURE__ */ jsx(ChevronDownSmall, {})) }),
+            /* @__PURE__ */ jsx("div", { className: tcx(tv.titleWrapper(), classNames == null ? void 0 : classNames.titleWrapper), children: /* @__PURE__ */ jsx(
               TitleContent,
               {
                 title,
                 collapsible,
                 onClick: onTitleClick,
-                styles,
-                classNames
+                titleClassName: classNames == null ? void 0 : classNames.title
               }
             ) })
           ] }),
-          children && /* @__PURE__ */ jsx("div", { className: tcx(styles.actionWrapper(), classNames == null ? void 0 : classNames.actionWrapper), children })
+          children && /* @__PURE__ */ jsx("div", { className: tcx(tv.actionWrapper(), classNames == null ? void 0 : classNames.actionWrapper), children })
         ] })
       }
     );

package/dist/components/panel/src/context/panel-context.d.ts

@@ -1,4 +1,4 @@
-interface PanelContextType {
+export interface PanelContextType {
     alwaysShowCollapsible?: boolean;
     collapsible?: boolean;
     isCollapsed?: boolean;
@@ -7,4 +7,3 @@ interface PanelContextType {
 }
 export declare const PanelContext: import('react').Context<PanelContextType>;
 export declare const usePanelContext: () => PanelContextType;
-export {};

package/dist/components/panel/src/hooks/use-panel-drag-drop.js

@@ -218,15 +218,16 @@ function usePanelDragDrop({
   });
   useEffect(() => {
     endDragRef.current = endDrag;
+  }, [endDrag]);
+  useEffect(() => {
     return () => {
-      if (dragStateRef.current.isDragging) {
-        document.removeEventListener("mousemove", handleGlobalMouseMove);
-        document.removeEventListener("mouseup", handleGlobalMouseUp);
-        clearDropIndicators();
-      }
+      document.removeEventListener("mousemove", handleGlobalMouseMove);
+      document.removeEventListener("mouseup", handleGlobalMouseUp);
+      clearDropIndicators();
       stopAutoScroll();
+      scrollContainerRef.current = null;
     };
-  }, [endDrag, handleGlobalMouseMove, handleGlobalMouseUp, clearDropIndicators, stopAutoScroll]);
+  }, [handleGlobalMouseMove, handleGlobalMouseUp, clearDropIndicators, stopAutoScroll]);
   const handleDragStart = useEventCallback((item, e) => {
     e.preventDefault();
     e.stopPropagation();

package/dist/components/panel/src/panel.d.ts

@@ -12,12 +12,12 @@ interface PanelProps extends Omit<HTMLProps<HTMLDivElement>, "title"> {
     showLabels?: boolean;
     triggerRef?: React.RefObject<HTMLDivElement>;
 }
-declare const PanelContent: ({ children, collapsible, title, otherChildren, }: {
+declare const PanelContent: import('react').NamedExoticComponent<{
     children: React.ReactNode;
     collapsible?: boolean;
     otherChildren: React.ReactNode[];
     title: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}>;
 interface PanelComponentProps extends React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof PanelContent;
     Label: typeof PanelLabel;