fix: update props, migrate components and add changelog

This commit is contained in:
shadcn
2026-02-02 16:33:35 +04:00
parent b28f77f893
commit c3c7f03f04
24 changed files with 112 additions and 72 deletions

View File

@@ -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<HTMLIFrameElement>(null)
const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
const resizablePanelRef = React.useRef<PanelImperativeHandle>(null)
// Sync resizable panel with URL param changes.
React.useEffect(() => {

View File

@@ -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<ImperativePanelHandle | null> | null
resizablePanelRef: React.RefObject<PanelImperativeHandle | null> | null
tree: ReturnType<typeof createFileTreeForRegistryItemFiles> | null
highlightedFiles:
| (z.infer<typeof registryItemFileSchema> & {
@@ -101,7 +101,7 @@ function BlockViewerProvider({
const [activeFile, setActiveFile] = React.useState<
BlockViewerContext["activeFile"]
>(highlightedFiles?.[0].target ?? null)
const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
const resizablePanelRef = React.useRef<PanelImperativeHandle>(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"
>
<ResizablePanel
ref={resizablePanelRef}
panelRef={resizablePanelRef}
className="bg-background relative aspect-[4/2.5] overflow-hidden rounded-lg border md:aspect-auto md:rounded-xl"
defaultSize="100%"
minSize="30%"

View File

@@ -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` |
<Callout>
The shadcn/ui wrapper components (`ResizablePanelGroup`, `ResizablePanel`,
`ResizableHandle`) remain unchanged.
</Callout>

View File

@@ -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` |
<Callout>
The shadcn/ui wrapper components (`ResizablePanelGroup`, `ResizablePanel`,
`ResizableHandle`) remain unchanged.
</Callout>

View File

@@ -15,7 +15,7 @@ export default function ResizableDemo() {
<span className="font-semibold">One</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizableHandle withHandle />
<ResizablePanel defaultSize="50%">
<ResizablePanelGroup orientation="vertical">
<ResizablePanel defaultSize="25%">
@@ -23,7 +23,7 @@ export default function ResizableDemo() {
<span className="font-semibold">Two</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizableHandle withHandle />
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Three</span>

View File

@@ -44,25 +44,25 @@ export function ResizableRtl() {
return (
<ResizablePanelGroup
direction="horizontal"
orientation="horizontal"
className="max-w-sm rounded-lg border"
dir={dir}
>
<ResizablePanel defaultSize={50}>
<ResizablePanel defaultSize="50%">
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold">{t.one}</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50}>
<ResizablePanelGroup direction="vertical" dir={dir}>
<ResizablePanel defaultSize={25}>
<ResizablePanel defaultSize="50%">
<ResizablePanelGroup orientation="vertical" dir={dir}>
<ResizablePanel defaultSize="25%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">{t.two}</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={75}>
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">{t.three}</span>
</div>

View File

@@ -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<typeof ResizablePrimitive.PanelGroup>) {
}: ResizablePrimitive.GroupProps) {
return (
<ResizablePrimitive.PanelGroup
<ResizablePrimitive.Group
data-slot="resizable-panel-group"
className={cn(
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
"flex h-full w-full aria-[orientation=vertical]:flex-col",
className
)}
{...props}
@@ -20,9 +19,7 @@ function ResizablePanelGroup({
)
}
function ResizablePanel({
...props
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}
@@ -30,14 +27,14 @@ function ResizableHandle({
withHandle,
className,
...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
}: ResizablePrimitive.SeparatorProps & {
withHandle?: boolean
}) {
return (
<ResizablePrimitive.PanelResizeHandle
<ResizablePrimitive.Separator
data-slot="resizable-handle"
className={cn(
"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 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:start-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:data-[panel-group-direction=vertical]:after:-translate-x-0 [&[data-panel-group-direction=vertical]>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 && (
<div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
)}
</ResizablePrimitive.PanelResizeHandle>
</ResizablePrimitive.Separator>
)
}
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

View File

@@ -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 }

View File

@@ -15,7 +15,7 @@ export default function ResizableDemo() {
<span className="font-semibold">One</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizableHandle withHandle />
<ResizablePanel defaultSize="50%">
<ResizablePanelGroup orientation="vertical">
<ResizablePanel defaultSize="25%">
@@ -23,7 +23,7 @@ export default function ResizableDemo() {
<span className="font-semibold">Two</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizableHandle withHandle />
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">Three</span>

View File

@@ -44,25 +44,25 @@ export function ResizableRtl() {
return (
<ResizablePanelGroup
direction="horizontal"
orientation="horizontal"
className="max-w-sm rounded-lg border"
dir={dir}
>
<ResizablePanel defaultSize={50}>
<ResizablePanel defaultSize="50%">
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold">{t.one}</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50}>
<ResizablePanelGroup direction="vertical" dir={dir}>
<ResizablePanel defaultSize={25}>
<ResizablePanel defaultSize="50%">
<ResizablePanelGroup orientation="vertical" dir={dir}>
<ResizablePanel defaultSize="25%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">{t.two}</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={75}>
<ResizablePanel defaultSize="75%">
<div className="flex h-full items-center justify-center p-6">
<span className="font-semibold">{t.three}</span>
</div>

View File

@@ -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<typeof ResizablePrimitive.PanelGroup>) {
}: ResizablePrimitive.GroupProps) {
return (
<ResizablePrimitive.PanelGroup
<ResizablePrimitive.Group
data-slot="resizable-panel-group"
className={cn(
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
"flex h-full w-full aria-[orientation=vertical]:flex-col",
className
)}
{...props}
@@ -20,9 +19,7 @@ function ResizablePanelGroup({
)
}
function ResizablePanel({
...props
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}
@@ -30,14 +27,14 @@ function ResizableHandle({
withHandle,
className,
...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
}: ResizablePrimitive.SeparatorProps & {
withHandle?: boolean
}) {
return (
<ResizablePrimitive.PanelResizeHandle
<ResizablePrimitive.Separator
data-slot="resizable-handle"
className={cn(
"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 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:start-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:data-[panel-group-direction=vertical]:after:-translate-x-0 [&[data-panel-group-direction=vertical]>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 && (
<div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
)}
</ResizablePrimitive.PanelResizeHandle>
</ResizablePrimitive.Separator>
)
}
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

View File

@@ -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 }

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n <GripVerticalIcon className=\"size-2.5\" />\n </div>\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n <GripVerticalIcon className=\"size-2.5\" />\n </div>\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

View File

@@ -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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\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 <ResizablePrimitive.Group\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n <ResizablePrimitive.Separator\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-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:left-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 [&[aria-orientation=horizontal]>div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n )}\n </ResizablePrimitive.Separator>\n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],

22
pnpm-lock.yaml generated
View File

@@ -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)