@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/resizable.json

@@ -7,6 +7,247 @@
     "ResizablePanel",
     "ResizablePanelGroup"
   ],
+  "parts": [
+    {
+      "name": "ResizableHandle",
+      "props": [
+        {
+          "name": "withHandle",
+          "type": "boolean",
+          "required": false,
+          "description": "Render a visible grip on the handle.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "CSS class name.\r\n\r\nℹ️ Use the `data-separator` attribute for custom _hover_ and _active_ styles\r\n\r\n⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`",
+          "from": "@types/react"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "When disabled, the separator cannot be used to resize its neighboring panels.\r\n\r\nℹ️ The panels may still be resized indirectly (while other panels are being resized).\r\nTo prevent a panel from being resized at all, it needs to also be disabled.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "disableDoubleClick",
+          "type": "boolean",
+          "required": false,
+          "description": "When true, double-clicking this `Separator` will not reset its `Panel` to its default size.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "elementRef",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "description": "Ref attached to the root `HTMLDivElement`.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "CSS properties.\r\n\r\nℹ️ Use the `data-separator` attribute for custom _hover_ and _active_ styles\r\n\r\n⚠️ The following properties cannot be overridden: `flex-grow`, `flex-shrink`",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "ResizablePanel",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "CSS class name.\r\n\r\n⚠️ Class is applied to nested `HTMLDivElement` to avoid styles that interfere with Flex layout.",
+          "from": "@types/react"
+        },
+        {
+          "name": "collapsedSize",
+          "type": "string | number",
+          "required": false,
+          "description": "Panel size when collapsed; defaults to 0%.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "collapsible",
+          "type": "boolean",
+          "required": false,
+          "description": "This panel can be collapsed.\r\n\r\nℹ️ A collapsible panel will collapse when it's size is less than of the specified `minSize`",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "defaultSize",
+          "type": "string | number",
+          "required": false,
+          "description": "Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.\r\n\r\nℹ️ Interpretation rules:\r\n- Numbers are interpreted as pixels (e.g. `defaultSize={200}` is 200 pixels)\r\n- Strings without explicit units are interpreted as percentage (e.g. `defaultSize=\"50\"` is 50 percent)\r\n- Use explicit units (e.g. \"px\", \"%\", \"em\", \"rem\", \"vh\", or \"vw\") to change interpretation\r\n\r\n⚠️ Percentage based sizes may cause slight layout shift when server-rendering.\r\nFor more information see the documentation.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel).",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "elementRef",
+          "type": "Ref<HTMLDivElement | null>",
+          "required": false,
+          "description": "Ref attached to the root `HTMLDivElement`.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "groupResizeBehavior",
+          "type": "\"preserve-relative-size\" | \"preserve-pixel-size\"",
+          "required": false,
+          "description": "How should this Panel behave if the parent Group is resized?\r\nDefaults to `preserve-relative-size`.\r\n\r\n- `preserve-relative-size`: Retain the current relative size (as a percentage of the Group)\r\n- `preserve-pixel-size`: Retain its current size (in pixels)\r\n\r\nℹ️ Panel min/max size constraints may impact this behavior.\r\n\r\n⚠️ A Group must contain at least one Panel with `preserve-relative-size` resize behavior.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "maxSize",
+          "type": "string | number",
+          "required": false,
+          "description": "Maximum size of Panel within its parent group; defaults to `\"100%\"`.\r\n\r\nℹ️ Interpretation rules:\r\n- Numbers are interpreted as pixels (e.g. `maxSize={200}` is 200 pixels)\r\n- Strings without explicit units are interpreted as percentage (e.g. `maxSize=\"50\"` is 50 percent)\r\n- Use explicit units (e.g. \"px\", \"%\", \"em\", \"rem\", \"vh\", or \"vw\") to change interpretation",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "minSize",
+          "type": "string | number",
+          "required": false,
+          "description": "Minimum size of Panel within its parent group; defaults to 0%.\r\n\r\nℹ️ Interpretation rules:\r\n- Numbers are interpreted as pixels (e.g. `minSize={200}` is 200 pixels)\r\n- Strings without explicit units are interpreted as percentage (e.g. `minSize=\"50\"` is 50 percent)\r\n- Use explicit units (e.g. \"px\", \"%\", \"em\", \"rem\", \"vh\", or \"vw\") to change interpretation",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "onResize",
+          "type": "((panelSize: PanelSize, id: string | number | undefined, prevPanelSize: PanelSize | undefined) => void)",
+          "required": false,
+          "description": "Called when panel sizes change.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "panelRef",
+          "type": "Ref<PanelImperativeHandle | null>",
+          "required": false,
+          "description": "Exposes the following imperative API:\r\n- `collapse(): void`\r\n- `expand(): void`\r\n- `getSize(): number`\r\n- `isCollapsed(): boolean`\r\n- `resize(size: number): void`\r\n\r\nℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "CSS properties.\r\n\r\n⚠️ Style is applied to nested `HTMLDivElement` to avoid styles that interfere with Flex layout.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "ResizablePanelGroup",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Panel and Separator components that comprise this group.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "CSS class name.",
+          "from": "@types/react"
+        },
+        {
+          "name": "defaultLayout",
+          "type": "Layout",
+          "required": false,
+          "description": "Default layout for the Group.\r\n\r\nℹ️ This value allows layouts to be remembered between page reloads.\r\n\r\n⚠️ Slight layout shift may occur when server-rendering panels with percentage-based default sizes.\r\nRefer to the documentation for suggestions on how to minimize the impact of this.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "disableCursor",
+          "type": "boolean",
+          "required": false,
+          "description": "This library sets custom mouse cursor styles to indicate drag state.\r\nUse this prop to disable that behavior for Panels and Separators in this group.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "description": "Disable resize functionality.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "elementRef",
+          "type": "Ref<HTMLDivElement | null>",
+          "required": false,
+          "description": "Ref attached to the root `HTMLDivElement`.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "groupRef",
+          "type": "Ref<GroupImperativeHandle | null>",
+          "required": false,
+          "description": "Exposes the following imperative API:\r\n- `getLayout(): Layout`\r\n- `setLayout(layout: Layout): void`\r\n\r\nℹ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "onLayoutChange",
+          "type": "((layout: Layout) => void | undefined)",
+          "required": false,
+          "description": "Called when the Group's layout is changing.\r\n\r\n⚠️ For layout changes caused by pointer events, this method is called each time the pointer is moved.\r\nFor most cases, it is recommended to use the `onLayoutChanged` callback instead.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "onLayoutChanged",
+          "type": "((layout: Layout, meta: LayoutChangedMeta) => void)",
+          "required": false,
+          "description": "Called after the Group's layout has  been changed.\r\n\r\nℹ️ For layout changes caused by pointer events, this method is not called until the pointer has been released.\r\nThis method is recommended when saving layouts to some storage api.\r\n\r\nℹ️ The second argument contains meta information about the layout change.\r\nThe `isUserInteraction` attribute signals whether the resize was caused by direct user input.\r\nIt is true for resizes caused by pointer or keyboard input\r\nand false for other triggers (e.g. imperative API calls, initial mount, etc.)",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "orientation",
+          "type": "\"horizontal\" | \"vertical\"",
+          "required": false,
+          "description": "Specifies the resizable orientation (\"horizontal\" or \"vertical\"); defaults to \"horizontal\"",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "resizeTargetMinimumSize",
+          "type": "{ coarse: number; fine: number; }",
+          "required": false,
+          "description": "Minimum size of the resizable hit target area (either `Separator` or `Panel` edge)\r\nThis threshold ensures are large enough to avoid mis-clicks.\r\n\r\n- Coarse inputs (typically a finger on a touchscreen) have reduced accuracy;\r\nto ensure accessibility and ease of use, hit targets should be larger to prevent mis-clicks.\r\n- Fine inputs (typically a mouse) can be smaller\r\n\r\nℹ️ [Apple interface guidelines](https://developer.apple.com/design/human-interface-guidelines/accessibility) suggest `20pt` (`27px`) on desktops and `28pt` (`37px`) for touch devices\r\nIn practice this seems to be much larger than many of their own applications use though.",
+          "from": "react-resizable-panels"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "CSS properties.\r\n\r\n⚠️ The following styles cannot be overridden: `display`, `flex-direction`, `flex-wrap`, and `overflow`.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "react-resizable-panels": "^4.12.3"
   },
@@ -16,7 +257,7 @@
   "files": [
     {
       "path": "components/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nfunction ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\"flex size-full aria-[orientation=vertical]:flex-col\", className)}\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        \"relative flex w-px items-center justify-center bg-border ring-offset-background 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-ring 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 && <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n"
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nfunction ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\"flex size-full aria-[orientation=vertical]:flex-col\", className)}\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  /** Render a visible grip on the handle. */\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background 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-ring 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 && <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n"
     }
   ]
 }