Resizable

1import type { ValidComponent } from "solid-js"
2import { Show, splitProps } from "solid-js"
3 
4import type { DynamicProps, HandleProps, RootProps } from "@corvu/resizable"
5import ResizablePrimitive from "@corvu/resizable"
6 
7import { cn } from "~/lib/utils"
8 
9type ResizableProps<T extends ValidComponent = "div"> = RootProps<T> & { class?: string }
10 
11const Resizable = <T extends ValidComponent = "div">(props: DynamicProps<T, ResizableProps<T>>) => {
12  const [, rest] = splitProps(props as ResizableProps, ["class"])
13  return (
14    <ResizablePrimitive
15      class={cn("flex size-full data-[orientation=vertical]:flex-col", props.class)}
16      {...rest}
17    />
18  )
19}
20 
21const ResizablePanel = ResizablePrimitive.Panel
22 
23type ResizableHandleProps<T extends ValidComponent = "button"> = HandleProps<T> & {
24  class?: string
25  withHandle?: boolean
26}
27 
28const ResizableHandle = <T extends ValidComponent = "button">(
29  props: DynamicProps<T, ResizableHandleProps<T>>
30) => {
31  const [, rest] = splitProps(props as ResizableHandleProps, ["class", "withHandle"])
32  return (
33    <ResizablePrimitive.Handle
34      class={cn(
35        "relative flex w-px shrink-0 items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90",
36        props.class
37      )}
38      {...rest}
39    >
40      <Show when={props.withHandle}>
41        <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
42          <svg
43            xmlns="http://www.w3.org/2000/svg"
44            viewBox="0 0 24 24"
45            fill="none"
46            stroke="currentColor"
47            stroke-width="2"
48            stroke-linecap="round"
49            stroke-linejoin="round"
50            class="size-2.5"
51          >
52            <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
53            <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
54            <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
55            <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
56            <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
57// … truncated