{"path":"apps/dashboard/src/components/ui/resizable.tsx","size":2734,"locked":false,"binary":false,"truncated":false,"content":"\"use client\";\n\nimport * as React from \"react\";\nimport { GripVertical } from \"lucide-react\";\nimport * as ResizablePrimitive from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype PrimitiveProps = React.HTMLAttributes<HTMLDivElement> &\n  Record<string, unknown>;\ntype Direction = \"horizontal\" | \"vertical\";\n\ntype PrimitiveModule = {\n  Group?: React.ComponentType<PrimitiveProps>;\n  PanelGroup?: React.ComponentType<PrimitiveProps>;\n  Panel: React.ComponentType<PrimitiveProps>;\n  Separator?: React.ComponentType<PrimitiveProps>;\n  PanelResizeHandle?: React.ComponentType<PrimitiveProps>;\n};\n\nconst primitives = ResizablePrimitive as unknown as PrimitiveModule;\nconst usesModernApi = Boolean(primitives.Group && primitives.Separator);\nconst panelGroupPrimitive = usesModernApi\n  ? primitives.Group\n  : primitives.PanelGroup;\nconst resizeHandlePrimitive = usesModernApi\n  ? primitives.Separator\n  : primitives.PanelResizeHandle;\n\nif (!panelGroupPrimitive || !resizeHandlePrimitive) {\n  throw new Error(\"Unsupported react-resizable-panels API\");\n}\n\nconst ResizablePanelGroup = ({\n  className,\n  direction = \"horizontal\",\n  ...props\n}: PrimitiveProps & { direction?: Direction }) =>\n  React.createElement(panelGroupPrimitive, {\n    ...props,\n    ...(usesModernApi ? { orientation: direction } : { direction }),\n    className: cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className,\n    ),\n  });\n\nconst ResizablePanel = primitives.Panel;\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: PrimitiveProps & { withHandle?: boolean }) =>\n  React.createElement(\n    resizeHandlePrimitive,\n    {\n      ...props,\n      className: cn(\n        \"relative flex w-px 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-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className,\n      ),\n    },\n    withHandle &&\n      React.createElement(\n        \"div\",\n        {\n          className:\n            \"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\",\n        },\n        React.createElement(GripVertical, { className: \"h-2.5 w-2.5\" }),\n      ),\n  );\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n"}