{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gutter",
  "type": "registry:ui",
  "title": "Gutter",
  "description": "Component-driven whitespace blank spacing primitive between UI elements (e.g. navbar and content).",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/gutter.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst gutterVariants = cva(\"shrink-0 select-none pointer-events-none\", {\n  variants: {\n    orientation: {\n      vertical: \"w-full block\",\n      horizontal: \"h-full inline-block\",\n    },\n    size: {\n      none: \"\",\n      \"2xs\": \"\",\n      xs: \"\",\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n      xl: \"\",\n      \"2xl\": \"\",\n      \"3xl\": \"\",\n      \"4xl\": \"\",\n    },\n  },\n  compoundVariants: [\n    { orientation: \"vertical\", size: \"none\", className: \"h-0\" },\n    { orientation: \"vertical\", size: \"2xs\", className: \"h-1\" },\n    { orientation: \"vertical\", size: \"xs\", className: \"h-2\" },\n    { orientation: \"vertical\", size: \"sm\", className: \"h-3\" },\n    { orientation: \"vertical\", size: \"md\", className: \"h-6\" },\n    { orientation: \"vertical\", size: \"lg\", className: \"h-9\" },\n    { orientation: \"vertical\", size: \"xl\", className: \"h-12\" },\n    { orientation: \"vertical\", size: \"2xl\", className: \"h-18\" },\n    { orientation: \"vertical\", size: \"3xl\", className: \"h-24\" },\n    { orientation: \"vertical\", size: \"4xl\", className: \"h-32\" },\n\n    { orientation: \"horizontal\", size: \"none\", className: \"w-0\" },\n    { orientation: \"horizontal\", size: \"2xs\", className: \"w-1\" },\n    { orientation: \"horizontal\", size: \"xs\", className: \"w-2\" },\n    { orientation: \"horizontal\", size: \"sm\", className: \"w-3\" },\n    { orientation: \"horizontal\", size: \"md\", className: \"w-6\" },\n    { orientation: \"horizontal\", size: \"lg\", className: \"w-9\" },\n    { orientation: \"horizontal\", size: \"xl\", className: \"w-12\" },\n    { orientation: \"horizontal\", size: \"2xl\", className: \"w-18\" },\n    { orientation: \"horizontal\", size: \"3xl\", className: \"w-24\" },\n    { orientation: \"horizontal\", size: \"4xl\", className: \"w-32\" },\n  ],\n  defaultVariants: {\n    orientation: \"vertical\",\n    size: \"md\",\n  },\n});\n\nexport type GutterNamedSize =\n  | \"none\"\n  | \"2xs\"\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\";\n\nexport type GutterSize = GutterNamedSize | number | string;\n\nexport interface GutterProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n    Omit<VariantProps<typeof gutterVariants>, \"size\"> {\n  /**\n   * Spacing size preset or custom number (px) / string dimension.\n   * @default \"md\"\n   */\n  size?: GutterSize;\n  /**\n   * Axis shorthand: \"y\" sets orientation=\"vertical\", \"x\" sets orientation=\"horizontal\".\n   */\n  axis?: \"x\" | \"y\";\n}\n\nconst NAMED_SIZES: readonly string[] = [\n  \"none\",\n  \"2xs\",\n  \"xs\",\n  \"sm\",\n  \"md\",\n  \"lg\",\n  \"xl\",\n  \"2xl\",\n  \"3xl\",\n  \"4xl\",\n];\n\nexport const Gutter = React.forwardRef<HTMLDivElement, GutterProps>(\n  (\n    {\n      className,\n      orientation = \"vertical\",\n      axis,\n      size = \"md\",\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const effectiveOrientation =\n      axis === \"x\" ? \"horizontal\" : axis === \"y\" ? \"vertical\" : orientation;\n    const isNamed =\n      typeof size === \"string\" && NAMED_SIZES.includes(size);\n\n    const customDim =\n      typeof size === \"number\"\n        ? `${size}px`\n        : !isNamed && size\n        ? String(size)\n        : undefined;\n\n    const dynamicStyle: React.CSSProperties = {\n      ...(customDim\n        ? effectiveOrientation === \"horizontal\"\n          ? { width: customDim }\n          : { height: customDim }\n        : {}),\n      ...style,\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn(\n          gutterVariants({\n            orientation: effectiveOrientation,\n            size: isNamed ? (size as GutterNamedSize) : undefined,\n          }),\n          className\n        )}\n        style={dynamicStyle}\n        {...props}\n      />\n    );\n  }\n);\n\nGutter.displayName = \"Gutter\";\n\nexport const Spacer = Gutter;\n",
      "type": "registry:ui"
    }
  ]
}