{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resizable",
  "title": "Resizable",
  "description": "Astro panels with pointer and keyboard size controls.",
  "dependencies": [
    "@data-slot/resizable@^1.1.0",
    "cn@0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "packages/ui/src/components/ui/resizable/index.ts",
      "content": "export { default as ResizableHandle } from './resizable-handle.astro'\nexport { default as ResizablePanel } from './resizable-panel.astro'\nexport { default as ResizablePanelGroup } from './resizable-panel-group.astro'\nexport type { ResizableProps } from './types'\n",
      "type": "registry:file",
      "target": "~/src/components/ui/resizable/index.ts"
    },
    {
      "path": "packages/ui/src/components/ui/resizable/resizable-handle.astro",
      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"cn\"\n\n/**\n * Separator between two resizable panels.\n *\n * `@data-slot/resizable` sets `aria-orientation` on the handle after startup.\n * The parent `data-direction` classes paint the correct axis before that runs.\n * A horizontal group uses a vertical separator.\n * A vertical group uses a horizontal separator.\n */\n\ntype Props = HTMLAttributes<\"div\"> & {\n  /**\n   * Show a grip in the center of the handle.\n   * @default false\n   */\n  withHandle?: boolean\n}\n\nconst {\n  class: className,\n  withHandle = false,\n  \"aria-label\": ariaLabel = \"Resize panels\",\n  ...props\n} = Astro.props\n---\n\n{/* The handle is really a panel separator */}\n<div\n  data-slot=\"resizable-handle\"\n  role=\"separator\"\n  tabindex=\"0\"\n  aria-label={ariaLabel}\n  class={cn(\n    \"bg-border ring-offset-background relative flex w-px shrink-0 cursor-col-resize touch-none items-center justify-center select-none 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\",\n    \"aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-row-resize 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    \"[[data-direction=vertical]>&]:h-px [[data-direction=vertical]>&]:w-full [[data-direction=vertical]>&]:cursor-row-resize [[data-direction=vertical]>&]:after:left-0 [[data-direction=vertical]>&]:after:h-1 [[data-direction=vertical]>&]:after:w-full [[data-direction=vertical]>&]:after:translate-x-0 [[data-direction=vertical]>&]:after:-translate-y-1/2 [[data-direction=vertical]>&]:[&>div]:rotate-90\",\n    className,\n  )}\n  {...props}\n>\n  {/* Small handle in the center of the separator */}\n  {withHandle && (\n    <div\n      class=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg\"\n      data-slot=\"resizable-handle-handle\"\n    />\n  )}\n  <slot />\n</div>\n",
      "type": "registry:file",
      "target": "~/src/components/ui/resizable/resizable-handle.astro"
    },
    {
      "path": "packages/ui/src/components/ui/resizable/resizable-panel-group.astro",
      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { ResizableDirection, ResizableOptions } from \"@data-slot/resizable\"\n\nimport { cn } from \"cn\"\nimport type { ResizableProps } from \"./types\"\n\n/**\n * Group of panels that share space.\n *\n * `@data-slot/resizable` binds `data-slot=\"resizable\"`.\n * The public component name stays `ResizablePanelGroup`.\n */\n\ntype Props = HTMLAttributes<\"div\"> & ResizableProps\n\nconst {\n  class: className,\n  direction = \"horizontal\",\n  keyboardResizeBy,\n  ...props\n} = Astro.props\n\n/**\n * Keep a numeric 0 in the attribute.\n * Astro can omit a bare 0.\n */\nconst dataNumber = (value: number | undefined) =>\n  value === undefined ? undefined : String(value)\n---\n\n<div\n  data-slot=\"resizable\"\n  data-direction={direction}\n  data-keyboard-resize-by={dataNumber(keyboardResizeBy)}\n  class={cn(\n    \"flex h-full w-full min-h-0 min-w-0 overflow-hidden data-[direction=vertical]:flex-col\",\n    className,\n  )}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/resizable\"\n\n  // Destroy bindings before a view transition so the next page-load binds once.\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
      "type": "registry:file",
      "target": "~/src/components/ui/resizable/resizable-panel-group.astro"
    },
    {
      "path": "packages/ui/src/components/ui/resizable/resizable-panel.astro",
      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"cn\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  /**\n   * Initial size as a percentage of the group.\n   * Panels without a size share the remaining space.\n   */\n  defaultSize?: number\n  /**\n   * Minimum size as a percentage.\n   * @default 0\n   */\n  minSize?: number\n  /**\n   * Maximum size as a percentage.\n   * @default 100\n   */\n  maxSize?: number\n  /**\n   * Allow this panel to collapse past `minSize`.\n   * Press Enter on the preceding handle to collapse and expand it.\n   * @default false\n   */\n  collapsible?: boolean\n  /**\n   * Size as a percentage when the panel is collapsed.\n   * This value must not exceed `minSize`.\n   * @default 0\n   */\n  collapsedSize?: number\n}\n\nconst {\n  class: className,\n  defaultSize,\n  minSize,\n  maxSize,\n  collapsible,\n  collapsedSize,\n  style,\n  ...props\n} = Astro.props\n\n/**\n * Keep a numeric 0 in the attribute.\n * Astro can omit a bare 0.\n */\nconst dataNumber = (value: number | undefined) =>\n  value === undefined ? undefined : String(value)\n\nconst layoutStyle = defaultSize === undefined ? \"\" : `flex-grow:${defaultSize}`\nconst userStyle = typeof style === \"string\" ? style : \"\"\nconst mergedStyle =\n  [layoutStyle, userStyle].filter(Boolean).join(\";\") || undefined\n---\n\n<div\n  data-slot=\"resizable-panel\"\n  data-default-size={dataNumber(defaultSize)}\n  data-min-size={dataNumber(minSize)}\n  data-max-size={dataNumber(maxSize)}\n  data-collapsible={collapsible ? \"\" : undefined}\n  data-collapsed-size={dataNumber(collapsedSize)}\n  class={cn(\"min-h-0 min-w-0 flex-1 overflow-hidden\", className)}\n  style={mergedStyle}\n  {...props}\n>\n  <slot />\n</div>\n",
      "type": "registry:file",
      "target": "~/src/components/ui/resizable/resizable-panel.astro"
    },
    {
      "path": "packages/ui/src/components/ui/resizable/types.ts",
      "content": "import type { ResizableDirection, ResizableOptions } from '@data-slot/resizable'\n\nexport type ResizableProps = ResizableOptions & {\n    /**\n     * Layout axis for the panels.\n     * `horizontal` places panels side by side.\n     * `vertical` stacks the panels.\n     * @default \"horizontal\"\n     */\n    direction?: ResizableDirection\n    /**\n     * Percent added or removed for each arrow key press.\n     * Shift with an arrow key moves to the limit.\n     * @default 10\n     */\n    keyboardResizeBy?: number\n}\n",
      "type": "registry:file",
      "target": "~/src/components/ui/resizable/types.ts"
    }
  ],
  "meta": {
    "framework": "astro",
    "source": "@gnosticai/ui"
  },
  "docs": "https://ui.gnosticai.com/components/resizable",
  "categories": [
    "ui"
  ],
  "type": "registry:ui"
}