diff --git a/apps/v4/app/(create)/components/preview.tsx b/apps/v4/app/(create)/components/preview.tsx index 4210d739f4..24ae974b8c 100644 --- a/apps/v4/app/(create)/components/preview.tsx +++ b/apps/v4/app/(create)/components/preview.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { type ImperativePanelHandle } from "react-resizable-panels" +import { type PanelImperativeHandle } from "react-resizable-panels" import { DARK_MODE_FORWARD_TYPE } from "@/components/mode-switcher" import { Badge } from "@/registry/new-york-v4/ui/badge" @@ -16,7 +16,7 @@ import { export function Preview() { const [params] = useDesignSystemSearchParams() const iframeRef = React.useRef(null) - const resizablePanelRef = React.useRef(null) + const resizablePanelRef = React.useRef(null) // Sync resizable panel with URL param changes. React.useEffect(() => { diff --git a/apps/v4/components/block-viewer.tsx b/apps/v4/components/block-viewer.tsx index ab58f96d4e..4d6eb64334 100644 --- a/apps/v4/components/block-viewer.tsx +++ b/apps/v4/components/block-viewer.tsx @@ -16,7 +16,7 @@ import { Tablet, Terminal, } from "lucide-react" -import { type ImperativePanelHandle } from "react-resizable-panels" +import { type PanelImperativeHandle } from "react-resizable-panels" import { type registryItemFileSchema, type registryItemSchema, @@ -68,7 +68,7 @@ type BlockViewerContext = { setView: (view: "code" | "preview") => void activeFile: string | null setActiveFile: (file: string) => void - resizablePanelRef: React.RefObject | null + resizablePanelRef: React.RefObject | null tree: ReturnType | null highlightedFiles: | (z.infer & { @@ -101,7 +101,7 @@ function BlockViewerProvider({ const [activeFile, setActiveFile] = React.useState< BlockViewerContext["activeFile"] >(highlightedFiles?.[0].target ?? null) - const resizablePanelRef = React.useRef(null) + const resizablePanelRef = React.useRef(null) const [iframeKey, setIframeKey] = React.useState(0) return ( @@ -272,7 +272,7 @@ function BlockViewerView({ styleName }: { styleName: Style["name"] }) { className="after:bg-surface/50 relative z-10 after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-xl" > + The shadcn/ui wrapper components (`ResizablePanelGroup`, `ResizablePanel`, + `ResizableHandle`) remain unchanged. + diff --git a/apps/v4/content/docs/components/radix/resizable.mdx b/apps/v4/content/docs/components/radix/resizable.mdx index d39b06d21d..78ffa09780 100644 --- a/apps/v4/content/docs/components/radix/resizable.mdx +++ b/apps/v4/content/docs/components/radix/resizable.mdx @@ -101,3 +101,27 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl) ## API Reference See the [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels) documentation. + +## Changelog + +### 2025-02-02 `react-resizable-panels` v4 + +Updated to `react-resizable-panels` v4. See the [v4.0.0 release notes](https://github.com/bvaughn/react-resizable-panels/releases/tag/4.0.0) for full details. + +If you're using `react-resizable-panels` primitives directly, note the following changes: + +| v3 | v4 | +| ---------------------------- | ----------------------- | +| `PanelGroup` | `Group` | +| `PanelResizeHandle` | `Separator` | +| `direction` prop | `orientation` prop | +| `defaultSize={50}` | `defaultSize="50%"` | +| `onLayout` | `onLayoutChange` | +| `ImperativePanelHandle` | `PanelImperativeHandle` | +| `ref` prop on Panel | `panelRef` prop | +| `data-panel-group-direction` | `aria-orientation` | + + + The shadcn/ui wrapper components (`ResizablePanelGroup`, `ResizablePanel`, + `ResizableHandle`) remain unchanged. + diff --git a/apps/v4/examples/base/resizable-demo.tsx b/apps/v4/examples/base/resizable-demo.tsx index 70af854442..9a719e83df 100644 --- a/apps/v4/examples/base/resizable-demo.tsx +++ b/apps/v4/examples/base/resizable-demo.tsx @@ -15,7 +15,7 @@ export default function ResizableDemo() { One - + @@ -23,7 +23,7 @@ export default function ResizableDemo() { Two - +
Three diff --git a/apps/v4/examples/base/resizable-rtl.tsx b/apps/v4/examples/base/resizable-rtl.tsx index a7417a3fd1..9f13a889c7 100644 --- a/apps/v4/examples/base/resizable-rtl.tsx +++ b/apps/v4/examples/base/resizable-rtl.tsx @@ -44,25 +44,25 @@ export function ResizableRtl() { return ( - +
{t.one}
- - - + + +
{t.two}
- +
{t.three}
diff --git a/apps/v4/examples/base/ui-rtl/resizable.tsx b/apps/v4/examples/base/ui-rtl/resizable.tsx index 57c347ae9b..cbb1169705 100644 --- a/apps/v4/examples/base/ui-rtl/resizable.tsx +++ b/apps/v4/examples/base/ui-rtl/resizable.tsx @@ -1,18 +1,17 @@ "use client" -import * as React from "react" import { cn } from "@/examples/base/lib/utils" import * as ResizablePrimitive from "react-resizable-panels" function ResizablePanelGroup({ className, ...props -}: React.ComponentProps) { +}: ResizablePrimitive.GroupProps) { return ( - ) { +function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) { return } @@ -30,14 +27,14 @@ function ResizableHandle({ withHandle, className, ...props -}: React.ComponentProps & { +}: ResizablePrimitive.SeparatorProps & { withHandle?: boolean }) { return ( - div]:rotate-90", + "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90", className )} {...props} @@ -45,8 +42,8 @@ function ResizableHandle({ {withHandle && (
)} - + ) } -export { ResizablePanelGroup, ResizablePanel, ResizableHandle } +export { ResizableHandle, ResizablePanel, ResizablePanelGroup } diff --git a/apps/v4/examples/base/ui/resizable.tsx b/apps/v4/examples/base/ui/resizable.tsx index f312c9f193..acd1c5cdb4 100644 --- a/apps/v4/examples/base/ui/resizable.tsx +++ b/apps/v4/examples/base/ui/resizable.tsx @@ -1,6 +1,5 @@ "use client" -import * as React from "react" import { cn } from "@/examples/base/lib/utils" import * as ResizablePrimitive from "react-resizable-panels" @@ -47,4 +46,4 @@ function ResizableHandle({ ) } -export { ResizablePanelGroup, ResizablePanel, ResizableHandle } +export { ResizableHandle, ResizablePanel, ResizablePanelGroup } diff --git a/apps/v4/examples/radix/resizable-demo.tsx b/apps/v4/examples/radix/resizable-demo.tsx index fae58281de..a97ff7e0da 100644 --- a/apps/v4/examples/radix/resizable-demo.tsx +++ b/apps/v4/examples/radix/resizable-demo.tsx @@ -15,7 +15,7 @@ export default function ResizableDemo() { One
- + @@ -23,7 +23,7 @@ export default function ResizableDemo() { Two
- +
Three diff --git a/apps/v4/examples/radix/resizable-rtl.tsx b/apps/v4/examples/radix/resizable-rtl.tsx index 383f3899e5..004df77821 100644 --- a/apps/v4/examples/radix/resizable-rtl.tsx +++ b/apps/v4/examples/radix/resizable-rtl.tsx @@ -44,25 +44,25 @@ export function ResizableRtl() { return ( - +
{t.one}
- - - + + +
{t.two}
- +
{t.three}
diff --git a/apps/v4/examples/radix/ui-rtl/resizable.tsx b/apps/v4/examples/radix/ui-rtl/resizable.tsx index 990b4c9032..d95bbce1c2 100644 --- a/apps/v4/examples/radix/ui-rtl/resizable.tsx +++ b/apps/v4/examples/radix/ui-rtl/resizable.tsx @@ -1,18 +1,17 @@ "use client" -import * as React from "react" import { cn } from "@/examples/radix/lib/utils" import * as ResizablePrimitive from "react-resizable-panels" function ResizablePanelGroup({ className, ...props -}: React.ComponentProps) { +}: ResizablePrimitive.GroupProps) { return ( - ) { +function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) { return } @@ -30,14 +27,14 @@ function ResizableHandle({ withHandle, className, ...props -}: React.ComponentProps & { +}: ResizablePrimitive.SeparatorProps & { withHandle?: boolean }) { return ( - div]:rotate-90", + "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90", className )} {...props} @@ -45,8 +42,8 @@ function ResizableHandle({ {withHandle && (
)} - + ) } -export { ResizablePanelGroup, ResizablePanel, ResizableHandle } +export { ResizableHandle, ResizablePanel, ResizablePanelGroup } diff --git a/apps/v4/examples/radix/ui/resizable.tsx b/apps/v4/examples/radix/ui/resizable.tsx index f5d927be23..184e050829 100644 --- a/apps/v4/examples/radix/ui/resizable.tsx +++ b/apps/v4/examples/radix/ui/resizable.tsx @@ -1,6 +1,5 @@ "use client" -import * as React from "react" import { cn } from "@/examples/radix/lib/utils" import * as ResizablePrimitive from "react-resizable-panels" @@ -47,4 +46,4 @@ function ResizableHandle({ ) } -export { ResizablePanelGroup, ResizablePanel, ResizableHandle } +export { ResizableHandle, ResizablePanel, ResizablePanelGroup } diff --git a/apps/v4/public/r/styles/base-lyra/resizable.json b/apps/v4/public/r/styles/base-lyra/resizable.json index 58b53f2c42..2593102e55 100644 --- a/apps/v4/public/r/styles/base-lyra/resizable.json +++ b/apps/v4/public/r/styles/base-lyra/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/base-lyra/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-maia/resizable.json b/apps/v4/public/r/styles/base-maia/resizable.json index 2e727ca55c..d7f0935aaf 100644 --- a/apps/v4/public/r/styles/base-maia/resizable.json +++ b/apps/v4/public/r/styles/base-maia/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/base-maia/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-mira/resizable.json b/apps/v4/public/r/styles/base-mira/resizable.json index 6d2d4658c1..2c79e042a9 100644 --- a/apps/v4/public/r/styles/base-mira/resizable.json +++ b/apps/v4/public/r/styles/base-mira/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/base-mira/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-nova/resizable.json b/apps/v4/public/r/styles/base-nova/resizable.json index 9580664b7c..802dffe327 100644 --- a/apps/v4/public/r/styles/base-nova/resizable.json +++ b/apps/v4/public/r/styles/base-nova/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/base-nova/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-vega/resizable.json b/apps/v4/public/r/styles/base-vega/resizable.json index 296890895a..bdbb0575a9 100644 --- a/apps/v4/public/r/styles/base-vega/resizable.json +++ b/apps/v4/public/r/styles/base-vega/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/base-vega/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/resizable.json b/apps/v4/public/r/styles/new-york-v4/resizable.json index ec20686f15..30ff10a45d 100644 --- a/apps/v4/public/r/styles/new-york-v4/resizable.json +++ b/apps/v4/public/r/styles/new-york-v4/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n \n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n \n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-lyra/resizable.json b/apps/v4/public/r/styles/radix-lyra/resizable.json index 68fde1fd50..00872ce601 100644 --- a/apps/v4/public/r/styles/radix-lyra/resizable.json +++ b/apps/v4/public/r/styles/radix-lyra/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-lyra/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-maia/resizable.json b/apps/v4/public/r/styles/radix-maia/resizable.json index 197aed43c9..9f32746f1e 100644 --- a/apps/v4/public/r/styles/radix-maia/resizable.json +++ b/apps/v4/public/r/styles/radix-maia/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-maia/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-mira/resizable.json b/apps/v4/public/r/styles/radix-mira/resizable.json index 8d2abe60a6..f23f3fa7c3 100644 --- a/apps/v4/public/r/styles/radix-mira/resizable.json +++ b/apps/v4/public/r/styles/radix-mira/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-mira/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-nova/resizable.json b/apps/v4/public/r/styles/radix-nova/resizable.json index f6ed980479..5152d7ccff 100644 --- a/apps/v4/public/r/styles/radix-nova/resizable.json +++ b/apps/v4/public/r/styles/radix-nova/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-nova/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-vega/resizable.json b/apps/v4/public/r/styles/radix-vega/resizable.json index 77605ba715..9220fb716d 100644 --- a/apps/v4/public/r/styles/radix-vega/resizable.json +++ b/apps/v4/public/r/styles/radix-vega/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-vega/ui/resizable.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
\n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n", "type": "registry:ui" } ], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ab64ceb3be..372041fac1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -260,8 +260,8 @@ importers: specifier: ^7.62.0 version: 7.62.0(react@19.2.3) react-resizable-panels: - specifier: ^3.0.6 - version: 3.0.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + specifier: ^4 + version: 4.5.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3) react-textarea-autosize: specifier: ^8.5.9 version: 8.5.9(@types/react@19.2.2)(react@19.2.3) @@ -6821,11 +6821,11 @@ packages: '@types/react': optional: true - react-resizable-panels@3.0.6: - resolution: {integrity: sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==} + react-resizable-panels@4.5.8: + resolution: {integrity: sha512-X2S5YoYWbjd7Ove6e6T/kzOrjiUD6ccz55a+XW0H3JXbrPb+Gmz7YRAJy4ysOkua/U5jSOG9SoySbebMBjtQJQ==} peerDependencies: - react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc - react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 react-smooth@4.0.4: resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==} @@ -12223,7 +12223,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)))(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)): dependencies: debug: 3.2.7 optionalDependencies: @@ -12234,7 +12234,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)))(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)): dependencies: debug: 3.2.7 optionalDependencies: @@ -12256,7 +12256,7 @@ snapshots: doctrine: 2.1.0 eslint: 9.26.0(hono@4.11.7)(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)))(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -12285,7 +12285,7 @@ snapshots: doctrine: 2.1.0 eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)))(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -15168,7 +15168,7 @@ snapshots: optionalDependencies: '@types/react': 19.2.2 - react-resizable-panels@3.0.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3): + react-resizable-panels@4.5.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3): dependencies: react: 19.2.3 react-dom: 19.2.3(react@19.2.3)