resizable

1import type {
2  DynamicProps,
3  HandleProps,
4  PanelProps,
5  RootProps,
6} from "@corvu/resizable";
7import ResizablePrimitive from "@corvu/resizable";
8 
9import { cn } from "~/lib/utils.ts";
10import type { ValidComponent } from "solid-js";
11 
12import { Show, splitProps } from "solid-js";
13 
14type ResizableProps<T extends ValidComponent = "div"> = RootProps<T> & {
15  class?: string;
16};
17 
18const Resizable = <T extends ValidComponent = "div">(
19  props: DynamicProps<T, ResizableProps<T>>,
20) => {
21  const [local, others] = splitProps(props as ResizableProps, ["class"]);
22  return (
23    <ResizablePrimitive
24      data-slot="resizable-panel-group"
25      class={cn(
26        "flex h-full w-full data-[orientation=vertical]:flex-col",
27        local.class,
28      )}
29      {...others}
30    />
31  );
32};
33 
34type ResizablePanelProps<T extends ValidComponent = "div"> = PanelProps<T> & {
35  class?: string;
36};
37 
38const ResizablePanel = <T extends ValidComponent = "div">(
39  props: DynamicProps<T, ResizablePanelProps<T>>,
40) => {
41  const [local, others] = splitProps(props as ResizablePanelProps, ["class"]);
42  return (
43    <ResizablePrimitive.Panel
44      data-slot="resizable-panel"
45      // Corvu only sets `flex-basis` on a panel, so the automatic minimum
46      // size of the flex item would keep it from shrinking past its
47      // content. Clipping restores the behaviour react-resizable-panels
48      // gets from its own inline `overflow: hidden`.
49      class={cn("overflow-hidden", local.class)}
50      {...others}
51    />
52  );
53};
54 
55type ResizableHandleProps<T extends ValidComponent = "button"> =
56  & HandleProps<T>
57  & {
58    class?: string;
59    withHandle?: boolean;
60  };
61 
62const ResizableHandle = <T extends ValidComponent = "button">(
63  props: DynamicProps<T, ResizableHandleProps<T>>,
64) => {
65  const [local, others] = splitProps(props as ResizableHandleProps, [
66    "class",
67    "withHandle",
68  ]);
69  return (
70    <ResizablePrimitive.Handle
71      data-slot="resizable-handle"
72      class={cn(
73// … truncated